需求
- 输入键值对
key="value"
- 可搜索
- 回车生成标签
效果图
代码实现
edit-search.vue
<style scoped lang="scss">
.edit-search {
position: relative;
&__container {
position: relative;
display: inline-flex;
flex-wrap: wrap;
align-items: flex-start;
vertical-align: middle;
width: 100%;
height: auto;
padding: 0 20px 0 10px;
outline: none;
background: $white;
user-select: none;
border: $border-base;
border-radius: 4px;
overflow: hidden;
transition: border ease .2s, box-shadow ease .2s;
&.error {
border: 1px solid #f00;
}
.edit-search__tags {
flex-shrink: 0;
font-size: 12px;
line-height: 12px;
margin-right: 4px;
margin-top: 4px;
border-radius: 3px;
border: $border-base;
background: $bg-base;
padding: 4px 6px;
display: inline-block;
&--close {
font-size: 12px;
margin-left: 5px;
color: $text-placeholder;
&:hover {
color: $text-regular;
}
}
}
.edit-search__input {
height: 30px;
width: 0;
min-width: 30px;
flex: 1;
color: $text-regular;
cursor: default;
&::placeholder {
color: $text-placeholder;
}
&::-moz-placeholder {
color: $text-placeholder;
opacity: 1;
}
}
}
.change-label__popper {
position: absolute;
background: $white;
box-shadow: 0 2px 12px 0 #0000000F;
border: 1px solid #DCE2E6;
border-radius: 4px;
font-size: 14px;
margin-top: 5px;
left: 0;
top: 27px;
z-index: 10;
cursor: auto;
li {
color: $text-secondary;
line-height: 32px;
}
}
.slid-e