DynamicTags 动态标签

agel-dynamic-tags 组件是基于 el-tag el-input 的封装组件。

使用

点击查看代码

<template>
  <div class="demo border">
    <el-row type="flex">
      <span>动态标签：</span>
      <agel-dynamic-tags v-model="value" :tagPropHandle="tagPropHandle" button-text="+ 标签"
        @click="tagClick"></agel-dynamic-tags>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "agel-dynamic-tags-demo",
  data() {
    return {
      value: ["不可关闭", "自定义样式", "标签1", "标签2"],
    };
  },
  methods: {
    tagClick(tag, index) {
      this.$message.info(`点击了${index}.${tag}`);
    },
    tagPropHandle(tag, index) {
      if (index == 0) {
        return { closable: false };
      }
      if (index == 1) {
        return { type: "success", effect: "plain", };
      }
    },
  },
};
</script>

DynamicTags Attributes

属性	类型	默认值	说明
value	Array	[]	绑定值
disabled	Boolean	false	是否禁用
createable	Boolean	true	是否可创建标签
repeatable	Boolean	false	是否可创建重复标签
closable	Boolean	false	是否可关闭标签
type	String	-	类型
effect	String	-	主题
color	String	-	颜色
hit	String	-	描边
tagPropHandle	Function(tag,index )		自定义每个标签的 prop

DynamicTags Events

属性	参数	说明
create	tag	创建新标签时触发
close	tag,index	关闭标签时触发
click	tag,index	点击标签时触发