大家好！我叫戴向天

QQ群：602504799

QQ:809002582

tag 组件的内容

在手机移动端上面的时候，文字的字体会有向上偏移的情况，所以在在组件方面我没有使用height，而采用了padding,利用padding来进行是文字居中（文字普遍的向上偏移2px）

优化了

type值可以进行自定义属性值

可直接在colorSystem里面加入类型名称以及相对应的色值

利用了layout-div组件的特性使得tag组件更加方便，不需要去依赖class样式在进行多规格

layout-div 组件详情 》https://blog.csdn.net/weixin_41088946/article/details/91448369

2019-06-25 戴向天

<template>
  <layout-div
    v-if="name"
    v-bind="getParams"
    style=" display:inline-block"
    @click="$emit('click')">{{name}}
  </layout-div>

</template>

<script>

  import LayoutDiv from "./layout-div";

  export default {
    components: {LayoutDiv},
    props: {
      name: {
        type: String,
        default: null,
      },
      fill: {
        type: Boolean,
        default: false,
      },
      type: {
        type: String,
        default: 'warning'
      },
      size: {
        type: String,
        default: 'mini'
      },
      round: {
        type: Boolean,
        default: false
      },
      color: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        colorSystem: {
          warning: '#f80',    //警告色
          danger: 'rgb(255, 68, 68)',    //危险色
          primary: 'black',    //主题色
          success: 'rgb(7, 193, 96)',    //成功色
          ash: 'rgb(150, 151, 153)',    //灰色
        }
      }
    },
    computed: {
      getParams() {
        let pad = [], color = '', bg = '', br = '', fontSize = 24, mar = [0, 10, 10, 0], fillet = 4;
        if (this.size == 'mini') {
          pad = [8, 10, 4]
          fontSize = 18
        } else if (this.size == 'small') {
          pad = [12, 20, 10]
          fontSize = 26
        } else if (this.size == 'large') {
          pad = [16, 30, 14]
          fontSize = 30
        }
        if (this.fill) {
          color = '#fff'
          if (this.color) {
            bg = this.color
            br = `0.011rem solid ${this.color}`
            console.log("br", br)
          } else {
            bg = this.colorSystem[this.type]
            br = `0.011rem solid ${this.colorSystem[this.type]}`
          }
        } else {
          if (this.color) {
            color = this.color;
            br = `0.011rem solid ${this.color}`
          } else {
            color = this.colorSystem[this.type]
            br = `0.011rem solid ${this.colorSystem[this.type]}`
          }
        }
        return {
          pad, color, bg, br, fontSize, mar, fillet
        };

      }
    }
  }
</script>

使用方法

效果图如下