新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

 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 正常
    *    @value small 小尺寸
    *    @value mini 迷你尺寸
    * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
    *    @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、primary、success、warning、error、royal
            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 正常

    *    @value small 小尺寸

    *    @value mini 迷你尺寸

    * @property {String} type = [default|primary|success｜warning｜error]  颜色类型

    *    @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、primary、success、warning、error、royal

            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>