<el-form-item label=”标签” class=”partAdd_tag” prop=”tags”>
<el-tag
v-for="(tag, index) in dynamicTags"
:key="index"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-tooltip class="item" effect="dark" content="为组件打标签,该标签将显示在主页上,比如说:收藏SDK,可以打上“Android”、“收藏”等标签" placement="right">
<el-autocomplete
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
:fetch-suggestions="querySearchAsync"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm(1)"
@blur="handleInputConfirm(2)"
:trigger-on-focus="false" popper-class="tag_insert_select"
>
</el-autocomplete>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
</el-tooltip>
</el-form-item>
var self = this
var validateTags = (rule, value, callback) => {
if (self.dynamicTags.length <= 1) {
return callback(new Error('请至少添加两个标签'))
} else {
return callback()
}
}
tags: [
{ validator: validateTags, trigger: ['blur', 'change'] }
],
dynamicTags: [],
do_save (self) {
// 获取tag数据
self.form.tags = self.dynamicTags.join()
self.axios.post(self.publicPath + '/component/save', self.form).then(function (res) {
if (res.data.code == 1) {
self.$message({
message: res.data.msg,
type: 'success'
})
self.form.id = res.data.data
setTimeout(self.doCancel, 1000)
} else {
self.$message.error(res.data ? res.data.msg : '操作失败')
}
}).catch(function (error) {
console.log(error)
self.$message.error('网络异常,请稍后再试')
})
},
handleClose (tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
this.$refs.ruleForm.validateField('tags')
},
showInput () {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
defaultAction () {
let inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
},
handleInputConfirm (kind) {
if (kind == 1) {
setTimeout(() => {
this.defaultAction()
}, 200)
} else {
this.defaultAction()
}
},
.partAdd_tag{
text-align: left
}
.tag_insert_select{
width: 150px!important;
}