Element-tag

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		  .el-tag + .el-tag {
			margin-left: 10px;
		  }
		  .button-new-tag {
			margin-left: 10px;
			height: 32px;
			line-height: 30px;
			padding-top: 0;
			padding-bottom: 0;
		  }
		  .input-new-tag {
			width: 90px;
			margin-left: 10px;
			vertical-align: bottom;
		  }
		</style>

		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/vue.js"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div class="app">
			<!-- 基础用法:由type属性来选择tag的类型，也可以通过color属性来自定义背景色。 -->
			<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>
			
			
			<br />
			<!-- 可移除标签:设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，
			如果不想使用，可以设置disable-transitions属性，它接受一个Boolean，true 为关闭。 -->
			<el-tag
			  v-for="tag in tags"
			  :key="tag.name"
			  closable
			  :type="tag.type">
			  {{tag.name}}
			</el-tag>
			
			
			<br />
			<!-- 动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现 -->
			<el-tag
			  :key="tag"
			  v-for="tag in dynamicTags"
			  closable
			  :disable-transitions="false"
			  @close="handleClose(tag)">
			  {{tag}}
			</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>
	        
			
			
			<br />
			<!-- 不同尺寸:额外的尺寸：medium、small、mini，通过设置size属性来配置它们。 -->
			<el-tag closable>默认标签</el-tag>
			<el-tag size="medium" closable>中等标签</el-tag>
			<el-tag size="small" closable>小型标签</el-tag>
			<el-tag size="mini" closable>超小标签</el-tag>
			
			
			
			
			<!-- 不同主题:Tag 组件提供了三个不同的主题：dark、light 和 plain 
			通过设置effect属性来改变主题，默认为 light-->
			<div class="tag-group">
			  <span class="tag-group__title">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 class="tag-group__title">Plain</span>
			  <el-tag
				v-for="item in items"
				:key="item.label"
				:type="item.type"
				effect="plain">
				{{ item.label }}
			  </el-tag>
			</div>
			
			
		</div>
		<script>
			new Vue({
				el:'.app',
				data() {
				  return {
					tags: [
					  { name: '标签一', type: '' },
					  { name: '标签二', type: 'success' },
					  { name: '标签三', type: 'info' },
					  { name: '标签四', type: 'warning' },
					  { name: '标签五', type: 'danger' }
					],
					dynamicTags: ['标签一', '标签二', '标签三'],
					inputVisible: false,
					inputValue: '',
					items: [
					  { type: '', label: '标签一' },
					  { type: 'success', label: '标签二' },
					  { type: 'info', label: '标签三' },
					  { type: 'danger', label: '标签四' },
					  { type: 'warning', label: '标签五' }
					]
				  };
				},
				methods: {
				  handleClose(tag) {
					this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				  },

				  showInput() {
					this.inputVisible = true;
					this.$nextTick(_ => {
					  this.$refs.saveTagInput.$refs.input.focus();
					});
				  },

				  handleInputConfirm() {
					let inputValue = this.inputValue;
					if (inputValue) {
					  this.dynamicTags.push(inputValue);
					}
					this.inputVisible = false;
					this.inputValue = '';
				  }
				}
			})
		</script>
	</body>
</html>
猜你喜欢
