|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
- <div class='add-keyword-container'>
|
|
|
- <div style="margin-top:6px;">
|
|
|
+ <div class="add-keyword-container">
|
|
|
+ <div style="margin-top: 6px">
|
|
|
<el-input
|
|
|
class="add-keyword-input"
|
|
|
type="text"
|
|
|
@@ -12,7 +12,12 @@
|
|
|
@focus="onKeydown"
|
|
|
@keydown.native="onKeydown"
|
|
|
></el-input>
|
|
|
- <span class="add-keyword-btn" :class="{'focus': addKeywordVal}" @click="addKeyTags">添加</span>
|
|
|
+ <span
|
|
|
+ class="add-keyword-btn"
|
|
|
+ :class="{ focus: addKeywordVal }"
|
|
|
+ @click="addKeyTags"
|
|
|
+ >添加</span
|
|
|
+ >
|
|
|
</div>
|
|
|
<div class="add-keyword-tags">
|
|
|
<el-tag
|
|
|
@@ -20,8 +25,9 @@
|
|
|
v-for="(tag, index) in list"
|
|
|
closable
|
|
|
:disable-transitions="false"
|
|
|
- @close="removeTag(tag)">
|
|
|
- {{tag}}
|
|
|
+ @close="removeTag(tag)"
|
|
|
+ >
|
|
|
+ {{ tag }}
|
|
|
</el-tag>
|
|
|
</div>
|
|
|
<slot name="radio"></slot>
|
|
|
@@ -67,7 +73,7 @@ export default {
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
addKeywordVal: ''
|
|
|
}
|
|
|
@@ -75,23 +81,26 @@ export default {
|
|
|
methods: {
|
|
|
addKeyTags() {
|
|
|
if (!this.addKeywordVal) return
|
|
|
- this.list.push(this.addKeywordVal.replace(/,/g, ' ').replace(/\s*$/g,''))
|
|
|
+ this.list.push(this.addKeywordVal.replace(/,/g, ' ').replace(/\s*$/g, ''))
|
|
|
this.$emit('change', this.list)
|
|
|
this.addKeywordVal = ''
|
|
|
},
|
|
|
onKeyup() {
|
|
|
- if(this.$parent.$parent) {
|
|
|
+ if (this.$parent.$parent) {
|
|
|
this.$parent.$parent.visible = true
|
|
|
}
|
|
|
- this.addKeywordVal = this.addKeywordVal.replace(/,/g, ' ').trim().replace(/^\s*/g, '')
|
|
|
+ this.addKeywordVal = this.addKeywordVal
|
|
|
+ .replace(/,/g, ' ')
|
|
|
+ .trim()
|
|
|
+ .replace(/^\s*/g, '')
|
|
|
},
|
|
|
- removeTag (tag) {
|
|
|
+ removeTag(tag) {
|
|
|
this.list.splice(this.list.indexOf(tag), 1)
|
|
|
this.$emit('change', this.list)
|
|
|
},
|
|
|
// dropdown的坑点，微软输入法，input输入的时候会失去焦，dropdown会收起，暂且如此处理
|
|
|
- onKeydown () {
|
|
|
- if(this.$parent.$parent) {
|
|
|
+ onKeydown() {
|
|
|
+ if (this.$parent.$parent) {
|
|
|
this.$parent.$parent.visible = true
|
|
|
}
|
|
|
}
|
|
|
@@ -99,60 +108,63 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang='scss' scoped>
|
|
|
-.add-keyword-container{
|
|
|
+<style lang="scss" scoped>
|
|
|
+.add-keyword-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
padding-top: 12px;
|
|
|
margin-left: 16px;
|
|
|
- box-sizing:border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
::v-deep {
|
|
|
- .add-keyword-input{
|
|
|
- width:auto;
|
|
|
- .el-input__inner{
|
|
|
+ .add-keyword-input {
|
|
|
+ width: auto;
|
|
|
+ .el-input__inner {
|
|
|
width: 368px;
|
|
|
height: 36px;
|
|
|
line-height: 30px;
|
|
|
font-size: 14px !important;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
border-radius: 4px;
|
|
|
- color: #1D1D1D !important;
|
|
|
+ color: #1d1d1d !important;
|
|
|
}
|
|
|
}
|
|
|
.el-tag {
|
|
|
+ white-space: normal;
|
|
|
.el-tag__close {
|
|
|
color: #aaa;
|
|
|
font-weight: 700;
|
|
|
- background-color:rgba(255, 255, 255, 0);
|
|
|
+ background-color: rgba(255, 255, 255, 0);
|
|
|
}
|
|
|
&:hover {
|
|
|
.el-tag__close {
|
|
|
background-color: transparent;
|
|
|
- color: #2CB7CA;
|
|
|
+ color: #2cb7ca;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-tag {
|
|
|
+ max-width: 408px;
|
|
|
margin-top: 6px;
|
|
|
- height: 24px;
|
|
|
+ height: unset;
|
|
|
+ min-height: 24px;
|
|
|
line-height: 22px;
|
|
|
padding: 0 8px;
|
|
|
- background: #F5F6F7;
|
|
|
- border: 1px solid #ECECEC;
|
|
|
+ background: #f5f6f7;
|
|
|
+ border: 1px solid #ececec;
|
|
|
border-radius: 4px;
|
|
|
margin-right: 16px;
|
|
|
- color: #1D1D1D;
|
|
|
+ color: #1d1d1d;
|
|
|
font-size: 14px;
|
|
|
margin-left: 0;
|
|
|
- &:hover{
|
|
|
- color: #2CB7CA;
|
|
|
- border: 1px solid #2ABED1;
|
|
|
+ &:hover {
|
|
|
+ color: #2cb7ca;
|
|
|
+ border: 1px solid #2abed1;
|
|
|
background: #fff;
|
|
|
}
|
|
|
- .el-icon-close{
|
|
|
- background: transparent;
|
|
|
+ .el-icon-close {
|
|
|
+ background: transparent;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
@@ -166,19 +178,19 @@ export default {
|
|
|
}
|
|
|
.el-icon-close::before {
|
|
|
display: block;
|
|
|
- content: "\e6db";
|
|
|
+ content: '\e6db';
|
|
|
}
|
|
|
}
|
|
|
.el-icon-close:before {
|
|
|
- content: "\e6db";
|
|
|
+ content: '\e6db';
|
|
|
}
|
|
|
- .add-keyword-tags{
|
|
|
- max-width:440px;
|
|
|
+ .add-keyword-tags {
|
|
|
+ max-width: 440px;
|
|
|
width: 100%;
|
|
|
margin-top: 10px;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
- .add-keyword-btn{
|
|
|
+ .add-keyword-btn {
|
|
|
margin-left: 8px;
|
|
|
font-size: 14px;
|
|
|
line-height: 22px;
|
zhangsiya