<!-- 服务标签 -->
|
<template>
|
<div class="serveLabel">
|
<el-tag
|
v-for="tag in labelList"
|
:key="tag"
|
closable
|
:disable-transitions="false"
|
@close="labelCloseHandle(tag)"
|
>
|
{{ tag }}
|
</el-tag>
|
<el-input
|
v-if="labelInputVisible"
|
ref="saveTagInput"
|
v-model="labelValue"
|
class="input-new-tag"
|
size="small"
|
placeholder="输入标签，回车分隔"
|
@keyup.enter.native="handleInputConfirm"
|
@blur="handleInputConfirm"
|
/>
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加{{ text||'标签' }}</el-button>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ServeLabels',
|
model: {
|
prop: 'param_labelList', // 使用 v-model
|
event: 'change' // 绑定change事件
|
},
|
props: [
|
'param_labelList', // 标签
|
'text'
|
],
|
data() {
|
return {
|
// 标签输入
|
labelValue: '',
|
// 是否显示标签输入框
|
labelInputVisible: false,
|
// 标签数组
|
labelList: []
|
}
|
},
|
watch: {
|
// 监听shopId，并触发change事件
|
labelList(value) {
|
this.$emit('change', value)
|
},
|
param_labelList(value) {
|
this.labelList = value
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.labelList = this.param_labelList || []
|
},
|
|
// 删除标签
|
labelCloseHandle(tag) {
|
this.labelList.splice(this.labelList.indexOf(tag), 1)
|
},
|
// 显示输入框
|
showInput() {
|
this.labelInputVisible = true
|
this.$nextTick(() => {
|
this.$refs.saveTagInput.$refs.input.focus()
|
})
|
},
|
// 输入标签完成
|
handleInputConfirm() {
|
const inputValue = this.labelValue
|
|
if (this.labelList.indexOf(inputValue) > -1) {
|
this.$messageError('请勿重复输入标签')
|
} else {
|
if (inputValue) {
|
this.labelList.push(inputValue)
|
}
|
}
|
|
// 隐藏输入框
|
this.labelInputVisible = false
|
// 清空输入内容
|
this.labelValue = ''
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.serveLabel .el-tag {
|
margin-right: 10px;
|
margin-bottom: 10px;
|
font-size: 14px;
|
}
|
.button-new-tag {
|
height: 32px;
|
line-height: 30px;
|
padding-top: 0;
|
padding-bottom: 0;
|
font-size: 14px !important;
|
}
|
.input-new-tag {
|
width: 160px;
|
vertical-align: bottom;
|
}
|
.input-new-tag .el-input__inner{
|
font-size: 14px;
|
}
|
</style>
|
