Tag 标签

用于标记和选择。

基础展示：

<lee-tag-group :tag="tag">
        <lee-tag :item="item" v-for="(item,xh) in tag" :key="xh"></lee-tag>
</lee-tag-group>

<script>
    export default {
        data() {
              return {
                tag:[
                { t: '活泼',color:'#67c23a'},
                { t: '聪明',color:'#909399' },
                { t: '可爱',color:'#409eff' },
                { t: '温柔',color:'#e6a23c' },
                { t: '美腿',color:'#f56c6c' }
                ]
              }
          }
    }
</script>

显示代码

可以关闭：

<lee-tag-group :tag="tag" closeable>
        <lee-tag :item="item" v-for="(item,xh) in tag" :key="xh"></lee-tag>
</lee-tag-group>

<script>
    export default {
        data() {
              return {
                tag:[
                { t: '活泼',color:'#67c23a'},
                { t: '聪明',color:'#909399' },
                { t: '可爱',color:'#409eff' },
                { t: '温柔',color:'#e6a23c' },
                { t: '美腿',color:'#f56c6c' }
                ]
              }
          }
    }
</script>

显示代码

可以增加：

+ 新标签

<lee-tag-group :tag="tag" closeable editable>
        <lee-tag :item="item" v-for="(item,xh) in tag" :key="xh"></lee-tag>
</lee-tag-group>

<script>
    export default {
        data() {
              return {
                tag:[
                { t: '活泼',color:'#67c23a'},
                { t: '聪明',color:'#909399' },
                { t: '可爱',color:'#409eff' },
                { t: '温柔',color:'#e6a23c' },
                { t: '美腿',color:'#f56c6c' }
                ]
              }
          }
    }
</script>

显示代码

tagGroup 属性

参数	说明	类型	可选值	默认值
closeable	是否可以删除	Boolean	--	false
editable	是否可以添加	Boolean	--	false

tag属性

参数	说明	类型	可选值	默认值
item	标签数据	Object	--	--