如何动态添加和删除按钮
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
要实现的效果见下图,先在带+号的button里输入要添加的值,鼠标离开控件后,该控件变为可删除的button,带+号的button移到后面以便后续添加
3 回复
好像不行,感觉是值没有push到list里,每次点击 【添加】的button之后,界面又重新刷新了回到了初始状态
你怎么写的?
贴一下代码吧
在elementUI的官方文档里找到了现成的控件,好吧,是我自己没仔细看文档
实现代码如下:
template:
<el-tag
v-for="(item,index) in freqlist"
:key="index"
:disable-transitions="false"
closable
@close="_delete(index)">
{{ item }}
</el-tag>
<el-input
v-if="inputVisible"
ref="saveTagInput"
v-model="freq"
class="input-new-tag"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" @click="showInput">+ 频点</el-button>
script:
data() {
return {
deviceid: 'ZDK2AD001',
carrierid: 3,
resulttimer: '',
inputVisible: false,
freq: '',
value: '',
freqlist: [],
}}
methods: {
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
_delete(index) {
this.freqlist.splice(index, 1)
},
handleInputConfirm() {
const inputValue = this.freq
if (inputValue) {
this.freqlist.push(inputValue)
}
this.inputVisible = false
this.freq = ''
},
}
style:
<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
background-color: #409eff;
color: #fff;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>