ElementUI 标签组件

官方地址

https://element.eleme.io/#/zh-CN/component/tag

基本用法

<el-tag>标签一</el-tag>

<el-tag>标签一</el-tag>

边框描边

边框描边由hit属性指定

 <h1>边框描边</h1>
 <el-tag :hit="true">有边框描边</el-tag>
 <el-tag :hit="false">无边框描边</el-tag>

情境色

情境色由type属性指定，做了两件事：

1. 背景色
2. 边框

• success
• info
• warning
• danger

 <h1>情境色</h1>
 <el-tag type="success">标签一</el-tag>
 <el-tag type="info">标签二</el-tag>
 <el-tag type="warning">标签三</el-tag>
 <el-tag type="danger">标签四</el-tag>

主题

主题由effect属性指定

• dark
• light
• plain

 <h1>主题</h1>
 <el-tag type="success" effect="dark">标签一</el-tag>
 <el-tag type="warning" effect="light">标签二</el-tag>
 <el-tag type="danger" effect="plain">标签三</el-tag>

自定义背景颜色

背景颜色可以由color属性自行指定，但不会覆盖type的边框色

 <h1>自定义背景颜色</h1>
 <h2>color覆盖type的背景色，但不会覆盖type的边框色</h2>
 <el-tag color="pink" effect="dark" type="success">标签一</el-tag>
 <el-tag color="red" effect="light" type="warning">标签二</el-tag>
 <el-tag color="green" effect="plain" type="danger">标签三</el-tag>

尺寸

尺寸由size属性指定

• medium
• small
• mini

 <h1>尺寸</h1>
 <el-tag effect="light" type="success">正常</el-tag>
 <el-tag effect="light" type="success" size="medium">Medium</el-tag>
 <el-tag effect="light" type="success" size="small">Small</el-tag>
 <el-tag effect="light" type="success" size="mini">Mini</el-tag>

可关闭的标签

1. closable是显示关闭按钮
2. 真正关闭还是要结合close事件
3. 其中disable-transitions属性可以指定是否禁用渐变动画

方式一

v-if

 <p>
 	<el-tag v-if="isShow" closable @close="handleClose" :disable-transitions="false">标签一</el-tag>
 </p>

handleClose() {
	
	// 第一种方法
	this.isShow = false;
	
},

方式二

dom

 <p>
 
	<el-tag closable @close="handleClose2" :disable-transitions="false">标签二</el-tag>
 
 </p>

handleClose2() {
	
	// 第二种方法
	console.log(event);
	
	console.log(event.path[1]);
	
	event.path[1].style.display = 'none';
	
},

方式三

v-for

  <el-tag 
  closable 
  @close="handleClose3(index)" 
  :disable-transitions="false" 
  v-for="(tag, index) in dynamicTags"
  :key="index"
  >{{tag}}</el-tag>

<script>
export default {
	data() {
		return {
			dynamicTags: ['标签一', '标签二', '标签三'],
		}
	},
	methods: {
		handleClose4(tag) {
			
			this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1);
		
		},
	}
}
</script>

click点击事件

 <h1>click事件</h1>
 
 <p>
 
<el-tag @click="handleClick">Click事件</el-tag>
 
 </p>

handleClick() {
	
	console.log('点我啦');
	
},

动态生成标签

<el-tag
  :key="tag"
  v-for="tag in dynamicTags2"
  closable
  :disable-transitions="false"
  @close="handleClose4(tag)">
  {{tag}}
</el-tag>
 

 
<el-input 
class="input-new-tag"
size="small"
ref="saveTagInput"
v-model="inputValue"
v-if="inputVisible"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm">
</el-input>

<el-button class="button-new-tag" v-else @click="showInput" size="small">+ New Tag</el-button>

<script>
	export default {
		data() {
			return {
				dynamicTags2: ['标签一', '标签二', '标签三'],
				inputVisible: false,
				inputValue: '',
			}
		},
		methods: {
			handleClose4(tag) {
				
				this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1);
			
			},
			
			showInput() {
				
				this.inputVisible = true;
				this.$nextTick(_ => {
					
					this.$refs.saveTagInput.$refs.input.focus();
					
				})
				
			},
			
			handleInputConfirm() {
				
				let inputVal = this.inputValue;
				if (inputVal) {
					
					this.dynamicTags2.push(inputVal)
					
				}
				
				this.inputValue = '';
				this.inputVisible = false;
				
			},

		}

}

</script>

属性

参数	说明	类型	可选值	默认值
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

事件

事件名称	说明	回调参数
click	点击 Tag 时触发的事件	—
close	关闭 Tag 时触发的事件	—