前端 自定義 tag組件 VUE高效開發 - tag - 戴向天

大家好！我叫戴向天

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>

使用方法

效果圖如下