el-tag入门学习
el-tag的入门使用
·
el-tag入门学习
知识点
type
属性默认是蓝色,还可以设置success,info,warning,danger
size
属性默认最大,还可以设置medium,small,mini
closable
属性可以进行移除样式显示@close
方法实现移除效果,其实就是对数组的删除操作- 新增效果本质是对数组的增加,本次学习中接触到了
el-input
中的@blur
,@keyup.enter.native
两种触发事件钩子,一个是离开焦点钩子,一个是键盘回车钩子 effect
设置主题,默认light
主题,还可以设置dark,plain
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<el-form>
<el-form-item label='不同大小size'>
<el-tag>标签1</el-tag>
<el-tag type='success' size='medium'>标签2</el-tag>
<el-tag type='info' size='small'>标签3</el-tag>
<el-tag type='warning' size='mini'>标签4</el-tag>
<el-tag type='danger'>标签5</el-tag>
</el-form-item>
<el-form-item label='可移除标签closable'>
<el-tag v-for='tag in tags' :key='tag.id' :type='tag.type' closable @close='handleClose(tag)'>
{{tag.name}}</el-tag>
</el-form-item>
<el-form-item label='不同主题Dark'>
<el-tag v-for='tag in tags' :key='tag.id' :type='tag.type' closable @close='handleClose(tag)' effect='dark'>
{{tag.name}}</el-tag>
</el-form-item>
<el-form-item label='不同主题Plain'>
<el-tag v-for='tag in tags' :key='tag.id' :type='tag.type' closable @close='handleClose(tag)' effect='plain'>
{{tag.name}}</el-tag>
</el-form-item>
</el-form>
<el-input class='input-new-tag' v-if='inputVisible' v-model='inputValue' size='small'
@keyup.enter.native='confirmTag' @blur='confirmTag'>
</el-input>
<el-button v-else size='small' type='primary' @click='inputVisible = true'>+New Tag</el-button>
</div>
</body>
</html>
<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>
<script>
new Vue({
el: '#app',
data() {
return {
tags: [
{ id: 1, name: '标签', type: '' },
{ id: 2, name: '标签', type: 'success' },
{ id: 3, name: '标签', type: 'info' },
{ id: 4, name: '标签', type: 'warning' },
{ id: 5, name: '标签', type: 'danger' }
],
inputVisible: false,
inputValue: ''
}
},
created() {
this.mapTags()
},
methods: {
mapTags() {
this.tags.map(item => item.name = item.name + item.id)
},
handleClose(tag) {
let index = this.tags.indexOf(tag)
this.tags.splice(index, 1)
},
confirmTag() {
if (this.inputVisible) {
let tag = {
id: this.tags.length + 1,
name: this.inputValue,
type: ''
}
this.tags.push(tag)
this.inputValue = ''
this.inputVisible = false
}
}
}
})
</script>
官网
更多推荐
已为社区贡献17条内容
所有评论(0)