Vue 项目使用 Element 组件
Element-Tag 编辑
封装 components
模板 (位置: components\tag.vue
)
<template>
<div class="tag row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<el-tag
:key="tag"
v-for="tag in val"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag input"
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>
</div>
</div>
</template>
<script>
export default {
components:{
"el-tag": ()=>import(/* webpackChunkName: "element-ui/lib/date-picker" */ 'element-ui/lib/tag'),
"el-button": ()=>import(/* webpackChunkName: "element-ui/lib/button" */ 'element-ui/lib/button'),
"el-input": ()=>import(/* webpackChunkName: "element-ui/lib/input" */ 'element-ui/lib/input'),
},
name: "tag",
props: {
//绑定值
value: {
type:[String],
default: function () {
return '';
}
},
placeholders:{
type:[String],
default: function () {
return '';
}
},
disabledFuture:{
type:[Boolean],
default: function () {
return true;
}
}
},
data () {
return {
val: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
};
},
watch:{
value(val){
if(this.val!=val || (typeof this.val)!=(typeof val)){
this.val = JSON.parse(val)==null? []:JSON.parse(val);
}
},
val (val) {
if(this.value!=val){
// 修改值,把修改后的值重新返回
this.$emit('input', JSON.stringify(val)); //修改值
this.$emit('change',JSON.stringify(val)); //修改值
}
},
disabled(value){
this.setDisabled(value);
},
},
methods: {
handleClose(tag) {
this.val.splice(this.val.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.val.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
}
},
}
</script>
<style scoped>
.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>
模板使用
<edit-item key-name="tag" :options="{name: '标签',type:'text', rules:'',title:''}" :datas="props">
<template slot="input-item">
<tag v-model="props.data.row['tag']"
:disabled="!props.url">
</tag >
</template>
</edit-item>
// 用到的模板
<script>
import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
export default {
components: {
edit: ()=>import(/* webpackChunkName: "common_components/edit.vue" */ 'common_components/edit.vue'),
editItem: ()=>import(/* webpackChunkName: "common_components/editItem.vue" */ 'common_components/editItem.vue'),
tag:()=>import(/* webpackChunkName: "common_components/select2.vue" */ 'common_components/tag.vue'), //选择框异步组件
},
data () {
},
watch: {
}
};
</script>
效果图

标签展示
// 示例
<span v-else-if="field.type =='tag'">
<div class="tag-group">
<el-tag
v-for="item in JSON.parse(array_get(row,k,''))"
:key="item" size="mini" effect="dark"
:type="['','success','info','warning','danger'][Math.floor(Math.random()*5+1)]">
{{ item }}
</el-tag>
</div>
</span>
// 组件引用
<script>
import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
export default {
components: {
"el-tag": ()=>import(/* webpackChunkName: "element-ui/lib/date-picker" */ 'element-ui/lib/tag'),
},
data () {
},
watch: {
}
};
</script>
效果图

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析