From c9c263dc43ad90f95f24a036cee9e6b47afb596c Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期六, 21 十二月 2024 18:44:20 +0800 Subject: [PATCH] 新建盐城德森项目 --- uni_modules/uni-tag/components/uni-tag/uni-tag.vue | 504 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 252 insertions(+), 252 deletions(-) diff --git a/uni_modules/uni-tag/components/uni-tag/uni-tag.vue b/uni_modules/uni-tag/components/uni-tag/uni-tag.vue index 418c955..d3a89fd 100644 --- a/uni_modules/uni-tag/components/uni-tag/uni-tag.vue +++ b/uni_modules/uni-tag/components/uni-tag/uni-tag.vue @@ -1,252 +1,252 @@ -<template> - <text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text> -</template> - -<script> - /** - * Tag 鏍囩 - * @description 鐢ㄤ簬灞曠ず1涓垨澶氫釜鏂囧瓧鏍囩锛屽彲鐐瑰嚮鍒囨崲閫変腑銆佷笉閫変腑鐨勭姸鎬� - * @tutorial https://ext.dcloud.net.cn/plugin?id=35 - * @property {String} text 鏍囩鍐呭 - * @property {String} size = [default|small|mini] 澶у皬灏哄 - * @value default 姝e父 - * @value small 灏忓昂瀵� - * @value mini 杩蜂綘灏哄 - * @property {String} type = [default|primary|success锝渨arning锝渆rror] 棰滆壊绫诲瀷 - * @value default 鐏拌壊 - * @value primary 钃濊壊 - * @value success 缁胯壊 - * @value warning 榛勮壊 - * @value error 绾㈣壊 - * @property {Boolean} disabled = [true|false] 鏄惁涓虹鐢ㄧ姸鎬� - * @property {Boolean} inverted = [true|false] 鏄惁鏃犻渶鑳屾櫙棰滆壊锛堢┖蹇冩爣绛撅級 - * @property {Boolean} circle = [true|false] 鏄惁涓哄渾瑙� - * @event {Function} click 鐐瑰嚮 Tag 瑙﹀彂浜嬩欢 - */ - - export default { - name: "UniTag", - emits: ['click'], - props: { - type: { - // 鏍囩绫诲瀷default銆乸rimary銆乻uccess銆亀arning銆乪rror銆乺oyal - type: String, - default: "default" - }, - size: { - // 鏍囩澶у皬 normal, small - type: String, - default: "normal" - }, - // 鏍囩鍐呭 - text: { - type: String, - default: "" - }, - disabled: { - // 鏄惁涓虹鐢ㄧ姸鎬� - type: [Boolean, String], - default: false - }, - inverted: { - // 鏄惁涓虹┖蹇� - type: [Boolean, String], - default: false - }, - circle: { - // 鏄惁涓哄渾瑙掓牱寮� - type: [Boolean, String], - default: false - }, - mark: { - // 鏄惁涓烘爣璁版牱寮� - type: [Boolean, String], - default: false - }, - customStyle: { - type: String, - default: '' - } - }, - computed: { - classes() { - const { - type, - disabled, - inverted, - circle, - mark, - size, - isTrue - } = this - const classArr = [ - 'uni-tag--' + type, - 'uni-tag--' + size, - isTrue(disabled) ? 'uni-tag--disabled' : '', - isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '', - isTrue(circle) ? 'uni-tag--circle' : '', - isTrue(mark) ? 'uni-tag--mark' : '', - // type === 'default' ? 'uni-tag--default' : 'uni-tag-text', - isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '', - size === 'small' ? 'uni-tag-text--small' : '' - ] - // 杩斿洖绫荤殑瀛楃涓诧紝鍏煎瀛楄妭灏忕▼搴� - return classArr.join(' ') - } - }, - methods: { - isTrue(value) { - return value === true || value === 'true' - }, - onClick() { - if (this.isTrue(this.disabled)) return - this.$emit("click"); - } - } - }; -</script> - -<style lang="scss" scoped> - $uni-primary: #2979ff !default; - $uni-success: #18bc37 !default; - $uni-warning: #f3a73f !default; - $uni-error: #e43d33 !default; - $uni-info: #8f939c !default; - - - $tag-default-pd: 4px 7px; - $tag-small-pd: 2px 5px; - $tag-mini-pd: 1px 3px; - - .uni-tag { - line-height: 14px; - font-size: 12px; - font-weight: 200; - padding: $tag-default-pd; - color: #fff; - border-radius: 3px; - background-color: $uni-info; - border-width: 1rpx; - border-style: solid; - border-color: $uni-info; - /* #ifdef H5 */ - cursor: pointer; - /* #endif */ - - // size attr - &--default { - font-size: 12px; - } - - &--default--inverted { - color: $uni-info; - border-color: $uni-info; - } - - &--small { - padding: $tag-small-pd; - font-size: 12px; - border-radius: 2px; - } - - &--mini { - padding: $tag-mini-pd; - font-size: 12px; - border-radius: 2px; - } - - // type attr - &--primary { - background-color: $uni-primary; - border-color: $uni-primary; - color: #fff; - } - - &--success { - color: #fff; - background-color: $uni-success; - border-color: $uni-success; - } - - &--warning { - color: #fff; - background-color: $uni-warning; - border-color: $uni-warning; - } - - &--error { - color: #fff; - background-color: $uni-error; - border-color: $uni-error; - } - - &--primary--inverted { - color: $uni-primary; - border-color: $uni-primary; - } - - &--success--inverted { - color: $uni-success; - border-color: $uni-success; - } - - &--warning--inverted { - color: $uni-warning; - border-color: $uni-warning; - } - - &--error--inverted { - color: $uni-error; - border-color: $uni-error; - } - - &--inverted { - background-color: #fff; - } - - // other attr - &--circle { - border-radius: 15px !important; - } - - &--mark { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - border-top-right-radius: 15px !important; - border-bottom-right-radius: 15px !important; - } - - &--disabled { - opacity: 0.5; - /* #ifdef H5 */ - cursor: not-allowed; - /* #endif */ - } - } - - - .uni-tag-text { - color: #fff; - font-size: 14px; - - &--primary { - color: $uni-primary; - } - - &--success { - color: $uni-success; - } - - &--warning { - color: $uni-warning; - } - - &--error { - color: $uni-error; - } - - &--small { - font-size: 12px; - } - } -</style> +<template> + <text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text> +</template> + +<script> + /** + * Tag 鏍囩 + * @description 鐢ㄤ簬灞曠ず1涓垨澶氫釜鏂囧瓧鏍囩锛屽彲鐐瑰嚮鍒囨崲閫変腑銆佷笉閫変腑鐨勭姸鎬� + * @tutorial https://ext.dcloud.net.cn/plugin?id=35 + * @property {String} text 鏍囩鍐呭 + * @property {String} size = [default|small|mini] 澶у皬灏哄 + * @value default 姝e父 + * @value small 灏忓昂瀵� + * @value mini 杩蜂綘灏哄 + * @property {String} type = [default|primary|success锝渨arning锝渆rror] 棰滆壊绫诲瀷 + * @value default 鐏拌壊 + * @value primary 钃濊壊 + * @value success 缁胯壊 + * @value warning 榛勮壊 + * @value error 绾㈣壊 + * @property {Boolean} disabled = [true|false] 鏄惁涓虹鐢ㄧ姸鎬� + * @property {Boolean} inverted = [true|false] 鏄惁鏃犻渶鑳屾櫙棰滆壊锛堢┖蹇冩爣绛撅級 + * @property {Boolean} circle = [true|false] 鏄惁涓哄渾瑙� + * @event {Function} click 鐐瑰嚮 Tag 瑙﹀彂浜嬩欢 + */ + + export default { + name: "UniTag", + emits: ['click'], + props: { + type: { + // 鏍囩绫诲瀷default銆乸rimary銆乻uccess銆亀arning銆乪rror銆乺oyal + type: String, + default: "default" + }, + size: { + // 鏍囩澶у皬 normal, small + type: String, + default: "normal" + }, + // 鏍囩鍐呭 + text: { + type: String, + default: "" + }, + disabled: { + // 鏄惁涓虹鐢ㄧ姸鎬� + type: [Boolean, String], + default: false + }, + inverted: { + // 鏄惁涓虹┖蹇� + type: [Boolean, String], + default: false + }, + circle: { + // 鏄惁涓哄渾瑙掓牱寮� + type: [Boolean, String], + default: false + }, + mark: { + // 鏄惁涓烘爣璁版牱寮� + type: [Boolean, String], + default: false + }, + customStyle: { + type: String, + default: '' + } + }, + computed: { + classes() { + const { + type, + disabled, + inverted, + circle, + mark, + size, + isTrue + } = this + const classArr = [ + 'uni-tag--' + type, + 'uni-tag--' + size, + isTrue(disabled) ? 'uni-tag--disabled' : '', + isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '', + isTrue(circle) ? 'uni-tag--circle' : '', + isTrue(mark) ? 'uni-tag--mark' : '', + // type === 'default' ? 'uni-tag--default' : 'uni-tag-text', + isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '', + size === 'small' ? 'uni-tag-text--small' : '' + ] + // 杩斿洖绫荤殑瀛楃涓诧紝鍏煎瀛楄妭灏忕▼搴� + return classArr.join(' ') + } + }, + methods: { + isTrue(value) { + return value === true || value === 'true' + }, + onClick() { + if (this.isTrue(this.disabled)) return + this.$emit("click"); + } + } + }; +</script> + +<style lang="scss" scoped> + $uni-primary: #2979ff !default; + $uni-success: #18bc37 !default; + $uni-warning: #f3a73f !default; + $uni-error: #e43d33 !default; + $uni-info: #8f939c !default; + + + $tag-default-pd: 4px 7px; + $tag-small-pd: 2px 5px; + $tag-mini-pd: 1px 3px; + + .uni-tag { + line-height: 14px; + font-size: 12px; + font-weight: 200; + padding: $tag-default-pd; + color: #fff; + border-radius: 3px; + background-color: $uni-info; + border-width: 1rpx; + border-style: solid; + border-color: $uni-info; + /* #ifdef H5 */ + cursor: pointer; + /* #endif */ + + // size attr + &--default { + font-size: 12px; + } + + &--default--inverted { + color: $uni-info; + border-color: $uni-info; + } + + &--small { + padding: $tag-small-pd; + font-size: 12px; + border-radius: 2px; + } + + &--mini { + padding: $tag-mini-pd; + font-size: 12px; + border-radius: 2px; + } + + // type attr + &--primary { + background-color: $uni-primary; + border-color: $uni-primary; + color: #fff; + } + + &--success { + color: #fff; + background-color: $uni-success; + border-color: $uni-success; + } + + &--warning { + color: #fff; + background-color: $uni-warning; + border-color: $uni-warning; + } + + &--error { + color: #fff; + background-color: $uni-error; + border-color: $uni-error; + } + + &--primary--inverted { + color: $uni-primary; + border-color: $uni-primary; + } + + &--success--inverted { + color: $uni-success; + border-color: $uni-success; + } + + &--warning--inverted { + color: $uni-warning; + border-color: $uni-warning; + } + + &--error--inverted { + color: $uni-error; + border-color: $uni-error; + } + + &--inverted { + background-color: #fff; + } + + // other attr + &--circle { + border-radius: 15px !important; + } + + &--mark { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-top-right-radius: 15px !important; + border-bottom-right-radius: 15px !important; + } + + &--disabled { + opacity: 0.5; + /* #ifdef H5 */ + cursor: not-allowed; + /* #endif */ + } + } + + + .uni-tag-text { + color: #fff; + font-size: 14px; + + &--primary { + color: $uni-primary; + } + + &--success { + color: $uni-success; + } + + &--warning { + color: $uni-warning; + } + + &--error { + color: $uni-error; + } + + &--small { + font-size: 12px; + } + } +</style> -- Gitblit v1.9.1