效果图:
创建words.vue文件
<template>
<div class="words">
<span class="title" v-if="keyword.length <= 0">
表达式搜索
<el-popover
placement="right"
width="400"
trigger="hover">
<div>
<div>
帮助说明:
</div>
<div>
1.公式可包括"与","或","非"的关系,用"&"代表"与",""代表"或","!"代表"非"
</div>
<div>
2.每个公式中的每组关键词必须以"()"包含,不支持2级括号及1组以上配置;
</div>
<div>
3.关键词搜索模式输入不能包含&、|、!、(、)符号;
</div>
<div>
4.表达式搜索模式下,每个公式中的每组关键词只能有&或|一种关系,大于2组关键词时,每组关键词之间不能出现!和!同时存在,也不能出现!和&同时存在;多组公式或关键词之间是"或关系";回车输入下一组关键词或公式。
</div>
<div>
示例:
</div>
<div>
(北京&冬奥)&(涓雪|滑冰|冰球|雪橇)!(雪车|冰壶)(中国|北京)&(科技冬奥|冰雪科技)
</div>
</div>
<svg-icon slot="reference" icon-class="shuoming" class="icon" />
</el-popover>
</span>
<div class="box" @click="input">
<div class="keyword">
<el-tag
v-show="keyword.length > 0"
v-for="(tag, index) in keyword"
size="mini"
:key="index"
@close="close(index)"
:closable="!checkIF">
<span @click="tagEdit(tag, index)">{{tag}}</span>
</el-tag>
</div>
<el-input
:disabled="checkIF"
ref="input"
type="text"
@keyup.enter.native="search"
@blur="search"
placeholder="请输入关键词并回车"
v-model.trim="text"
show-word-limit
/>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
},
checkIF: {
type: Boolean,
default: false
}
},
data() {
return {
text: '',
keyword: []
}
},
watch: {
list() {
this.keyword = this.list
},
},
methods: {
tagEdit(tag, index) {
this.text = tag
this.keyword.splice(index, 1)
this.$emit('inputKeyword', this.keyword)
},
input() {
this.$refs.input.focus()
},
search() {
if (this.text) {
this.keyword.push(`${this.text}`)
this.text = ''
this.$emit('inputKeyword', this.keyword)
}
},
close(index) {
this.$emit('tagEdit', this.keyword[index])
this.keyword.splice(index, 1)
this.$emit('inputKeyword', this.keyword)
}
}
}
</script>
<style lang="scss" scoped>
.words{
height: 96px;
background: #FFFFFF;
border-radius: 2px 2px 2px 2px;
border: 1px solid #E5E6EB;
position: relative;
padding: 7px 16px;
z-index: 10;
.title {
font-size: 14px;
color: #86909C;
.icon {
cursor: pointer;
margin-left: 5px;
}
}
::v-deep .box {
height: 100%;
.keyword {
font-size: 14px;
color: #C9CDD4;
max-height: calc(100% - 30px);
&::-webkit-scrollbar {
width: 0;
}
overflow: auto;
.el-tag {
font-size: 14px;
margin-bottom: 5px;
margin-right: 5px;
}
}
.el-input__inner {
border: none;
height: 30px;
}
}
}
</style>
在父组件引用:
<words
@tagEdit="tagEdit"
:list="this.formData.articleQuerySaveParams.keywordExps"
style="margin-bottom: 16px;"
@inputKeyword="inputKeyword"
/>
tagEdit方法删除关键词触发
:list参数是默认显示(回显时使用)
inputKeyword方法时关键词发生改变时触发(回车添加时或删除关键词时)