139 lines
3.9 KiB
Vue
139 lines
3.9 KiB
Vue
<template>
|
||
<div class="line-box" v-if="configData">
|
||
<div class="title">
|
||
<p>搜索热词</p>
|
||
<span>热词最多20个词，鼠标拖拽左侧圆点可调整</span>
|
||
</div>
|
||
<div class="input-box">
|
||
<draggable
|
||
class="dragArea list-group"
|
||
:list="configData.list"
|
||
group="peoples"
|
||
handle=".icon"
|
||
>
|
||
<div class="input-item" v-for="(item,index) in configData.list" :key="index">
|
||
<div class="icon">
|
||
<i class="el-icon-s-grid" style="font-size: 20px;" />
|
||
</div>
|
||
<el-input v-model="item.val" maxlength="10" placeholder="选填，不超过十个字" />
|
||
<div class="delete" @click.stop="bindDelete(index)">
|
||
<i class="el-icon-error" style="font-size: 20px;"/>
|
||
</div>
|
||
</div>
|
||
</draggable>
|
||
<div class="add-btn" @click="addHotTxt" v-if="configData.list.length < 20">
|
||
<el-button class="btn" style="width:100%;height:40px;font-size:12px;">添加热词</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
import vuedraggable from 'vuedraggable'
|
||
export default {
|
||
name: 'c_hot_word',
|
||
props: {
|
||
configObj: {
|
||
type: Object
|
||
},
|
||
configNme: {
|
||
type: String
|
||
}
|
||
},
|
||
components: {
|
||
draggable: vuedraggable
|
||
},
|
||
data () {
|
||
return {
|
||
hotWordList: [],
|
||
hotIndex: 1,
|
||
defaults: {},
|
||
configData: {}
|
||
}
|
||
},
|
||
created () {
|
||
this.defaults = this.configObj
|
||
this.configData = this.configObj[this.configNme]
|
||
},
|
||
watch: {
|
||
configObj: {
|
||
handler (nVal, oVal) {
|
||
// this.hotWordList = nVal.hotList
|
||
this.configData = nVal[this.configNme]
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
addHotTxt () {
|
||
// let obj = {}
|
||
// if(this.configData.list.length){
|
||
// obj = JSON.parse(JSON.stringify(this.configData.list[this.configData.list.length - 1]))
|
||
// }else {
|
||
// obj = {
|
||
// val: ''
|
||
// }
|
||
// }
|
||
let obj = {
|
||
val: ''
|
||
};
|
||
this.configData.list.push(obj)
|
||
// this.$emit('input', this.hotWordList);
|
||
},
|
||
// 删除数组
|
||
bindDelete (index) {
|
||
this.configData.list.splice(index, 1)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.line-box{
|
||
margin-top: 20px;
|
||
padding: 10px 0 20px;
|
||
border-top: 1px solid rgba(0,0,0,.05);
|
||
border-bottom: 1px solid rgba(0,0,0,.05);
|
||
.title{
|
||
p{
|
||
font-size: 14px;
|
||
color: #000000;
|
||
}
|
||
span{
|
||
color: #999999;
|
||
}
|
||
}
|
||
.input-box{
|
||
margin-top: 10px;
|
||
.add-btn{
|
||
margin-top: 18px;
|
||
}
|
||
.input-item{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
.delete{
|
||
position: absolute;
|
||
right: -7px;
|
||
top: -8px;
|
||
color: #999;
|
||
}
|
||
.icon{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
cursor: move;
|
||
}
|
||
}
|
||
}
|
||
.btn{
|
||
color: var(--prev-color-primary);
|
||
border-color: var(--prev-color-primary);
|
||
}
|
||
}
|
||
|
||
</style>
|