el-button-dict组件

仅用于标记，方便使用标记数据来源于字典时使用。如某某某状态对应某某某type的标记。 支持配置el-button所有属性，事件及slot。调用getRef() 返回 el-button实例

由type属性来选择tag的类型，type没传时默认primary类型，也可以通过color属性来自定义背景色。

<template>
  <div class="el-button-dict" ref="container">
    <div class="title">基础用法</div>
    <div class="normal-tag">
      <el-button-dict dictType="PERSON_TYPE" :value="value1"></el-button-dict>
      <el-button-dict dictType="PERSON_TYPE" :value="value2"></el-button-dict>
      <el-button-dict  dictType="PERSON_TYPE" :value="value3"></el-button-dict>
      <el-button-dict  dictType="PERSON_TYPE" :value="value4"></el-button-dict>
      <el-button-dict dictType="PERSON_TYPE" :value="value5"></el-button-dict>
    </div>

    <div class="title">使用函数</div>
    <div class="function-tag">
      <el-button-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value1"></el-button-dict>
      <el-button-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value2"></el-button-dict>
      <el-button-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value3"></el-button-dict>
      <el-button-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value4"></el-button-dict>
      <el-button-dict :judgeTypeFun="judgeTypeFun" dictType="PERSON_TYPE" :value="value5"></el-button-dict>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "001",
      value2: "002",
      value3: "003",
      value4: "004",
      value5: "005"
    }
  },
  mounted() {},
  methods: {
    //val 为字典数据值
    judgeTypeFun(val) {
      const typeObj = {
        "001": "danger",
        "002": "warning",
        "003": "info",
        "004": "success",
        "005": "primary"
      }
      return typeObj[val]
    }
  }
}
</script>

<style lang="less" scoped>
.el-button + .el-button{
  margin-left: 10px;
}
</style>

显示代码

Tag Dict Attributes

参数	说明	类型	可选值	默认值
dictType	必传，传递字典类型	String	—	—
value	必传，数据值	[String, Number]	—	—
type	选传，默认 primary judgeTypeFun优先级更高	String	primary，success，info，warning，danger	primary
judgeTypeFun	选传，不传则获取type配置，所以未返回值时默认primary	Function	—	type的类型

注意：如此组件满足不了需求，可直接使用el-tag原生组件，查阅原生组件文档 (opens new window)