023_Tag标签

1. Tag标签

1.1. Tag标签用于标记和选择。

1.2. Attributes

参数	说明	类型	可选值	默认值
type	类型	string	success/info/warning/danger	无
closable	是否可关闭	boolean	无	false
disable-transitions	是否禁用渐变动画	boolean	无	false
hit	是否有边框描边	boolean	无	false
color	背景色	string	无	无
size	尺寸	string	medium / small / mini	无
effect	主题	string	dark / light / plain	light

1.3. Events

事件名称	说明
click	点击Tag时触发的事件
close	关闭Tag时触发的事件

2. Tag标签例子

2.1. 使用脚手架新建一个名为element-ui-tag的前端项目, 同时安装Element插件。

2.2. 在components在新建Tag.vue 

<template><div><h1>基础用法</h1><h4>由type属性来选择tag的类型, 也可以通过color属性来自定义背景色。</h4><el-tag>标签一</el-tag><el-tag type="success">标签二</el-tag><el-tag type="info">标签三</el-tag><el-tag type="warning">标签四</el-tag><el-tag type="danger">标签五</el-tag><h1>可移除标签</h1><h4>设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画, 如果不想使用, 可以设置disable-transitions属性, 它接受一个Boolean, true为关闭。</h4><el-tag v-for="(closableTag, index) in closableTags" :key="closableTag.name" closable :disable-transitions="true" @close="handleClose(closableTag, index)" :type="closableTag.type">{{closableTag.name}}</el-tag><h1>动态编辑标签</h1><h4>hit添加边框描边。color添加背景色。</h4><el-tag hit color="#fff" :key="dynamicTag" v-for="dynamicTag in dynamicTags">{{dynamicTag}}</el-tag><el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input><el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button><h1>不同尺寸</h1><h4>Tag组件提供除了默认值以外的三种尺寸, 可以在不同场景下选择合适的按钮尺寸。额外的尺寸: medium、small、mini, 通过设置size属性来配置它们。</h4><el-tag>默认标签</el-tag><el-tag size="medium">中等标签</el-tag><el-tag size="small">小型标签</el-tag><el-tag size="mini">超小标签</el-tag><h1>不同主题</h1><h4>Tag组件提供了三个不同的主题: dark、light和plain。通过设置effect属性来改变主题, 默认为light。</h4><div class="tag-group"><span>Dark</span><el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">{{ item.label }}</el-tag></div><div class="tag-group"><span>Plain</span><el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain">{{ item.label }}</el-tag></div></div> </template><script> export default {name: 'app',data () {return {closableTags: [{ name: '标签一', type: '' },{ name: '标签二', type: 'success' },{ name: '标签三', type: 'info' },{ name: '标签四', type: 'warning' },{ name: '标签五', type: 'danger' }],dynamicTags: ['标签1', '标签2', '标签3'],inputVisible: false,inputValue: '',items: [{ type: '', label: '标签一' },{ type: 'success', label: '标签二' },{ type: 'info', label: '标签三' },{ type: 'danger', label: '标签四' },{ type: 'warning', label: '标签五' }]}},methods: {handleClose (closableTag, index) {this.closableTags.splice(index, 1)},showInput () {this.inputVisible = truethis.$nextTick(_ => {this.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm () {const inputValue = this.inputValueif (inputValue) {this.dynamicTags.push(inputValue)}this.inputVisible = falsethis.inputValue = ''}} } </script><style scoped> .el-tag + .el-tag, .tag-group .el-tag {margin-left: 10px; } .button-new-tag {margin-left: 10px;height: 32px;line-height: 32px;padding-top: 0;padding-bottom: 0; } .input-new-tag {width: 90px;margin-left: 10px; } .tag-group {margin-top: 10px; } </style>

2.3. 访问http://localhost:8080/#/Tag

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的023_Tag标签的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。