children117cl
2021-06-03 8410b536a5f7cd16b5d8dcd86b28b6a283437626
提交 | 用户 | age
c95579 1 <!-- 服务标签 -->
L 2 <template>
3   <div class="serveLabel">
4     <el-tag
5       v-for="tag in labelList"
6       :key="tag"
7       closable
8       :disable-transitions="false"
9       @close="labelCloseHandle(tag)"
10     >
11       {{ tag }}
12     </el-tag>
13     <el-input
14       v-if="labelInputVisible"
15       ref="saveTagInput"
16       v-model="labelValue"
17       class="input-new-tag"
18       size="small"
36b711 19       maxlength="50"
c95579 20       placeholder="输入标签,回车分隔"
L 21       @keyup.enter.native="handleInputConfirm"
22       @blur="handleInputConfirm"
23     />
24     <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加{{ text||'标签' }}</el-button>
25   </div>
26 </template>
27
28 <script>
29 export default {
30   name: 'ServeLabels',
31   model: {
32     prop: 'param_labelList', // 使用 v-model
33     event: 'change' // 绑定change事件
34   },
35   props: [
36     'param_labelList', // 标签
37     'text'
38   ],
39   data() {
40     return {
41       // 标签输入
42       labelValue: '',
43       // 是否显示标签输入框
44       labelInputVisible: false,
45       // 标签数组
46       labelList: []
47     }
48   },
49   watch: {
50     // 监听shopId,并触发change事件
51     labelList(value) {
52       this.$emit('change', value)
53     },
54     param_labelList(value) {
55       this.labelList = value
56     }
57   },
58   mounted() {
59     this.init()
60   },
61   methods: {
62     init() {
63       this.labelList = this.param_labelList || []
64     },
65
66     // 删除标签
67     labelCloseHandle(tag) {
68       this.labelList.splice(this.labelList.indexOf(tag), 1)
69     },
70     // 显示输入框
71     showInput() {
72       this.labelInputVisible = true
73       this.$nextTick(() => {
74         this.$refs.saveTagInput.$refs.input.focus()
75       })
76     },
77     // 输入标签完成
78     handleInputConfirm() {
79       const inputValue = this.labelValue
80
81       if (this.labelList.indexOf(inputValue) > -1) {
82         this.$messageError('请勿重复输入标签')
83       } else {
84         if (inputValue) {
85           this.labelList.push(inputValue)
86         }
87       }
88
89       // 隐藏输入框
90       this.labelInputVisible = false
91       // 清空输入内容
92       this.labelValue = ''
93     }
94   }
95 }
96 </script>
97
98 <style>
99 .serveLabel .el-tag {
100   margin-right: 10px;
101   margin-bottom: 10px;
102   font-size: 14px;
103 }
104 .button-new-tag {
105   height: 32px;
106   line-height: 30px;
107   padding-top: 0;
108   padding-bottom: 0;
109   font-size: 14px !important;
110 }
111 .input-new-tag {
112   width: 160px;
113   vertical-align: bottom;
114 }
115 .input-new-tag .el-input__inner{
116   font-size: 14px;
117 }
118 </style>