vue中el-input使用el-tag
时间: 2024-01-19 20:15:05 浏览: 180
vue中el-input绑定键盘按键(按键修饰符)
可以使用vue的slot来实现这个功能。具体步骤如下:
1. 在el-input组件中添加一个slot,用于显示el-tag组件。
```
<el-input v-model="inputValue">
<template slot="suffix">
<el-tag>{{ tagValue }}</el-tag>
</template>
</el-input>
```
2. 在data中定义inputValue和tagValue两个变量,并在methods中添加一个addTag方法,用于将inputValue的值添加到tagValue中。
```
data() {
return {
inputValue: '',
tagValue: ''
}
},
methods: {
addTag() {
if (this.inputValue) {
this.tagValue = this.inputValue;
this.inputValue = '';
}
}
}
```
3. 在el-input组件中添加一个按键事件,当用户按下回车键时,调用addTag方法。
```
<el-input v-model="inputValue" @keyup.enter.native="addTag">
<template slot="suffix">
<el-tag>{{ tagValue }}</el-tag>
</template>
</el-input>
```
阅读全文