ant-degin-vue的input框内输入你想要的标签,然后回车就会创建出来一个标签 ,这个标签也是在这个输入框的里面的。
时间: 2024-03-22 13:41:14 浏览: 74
在输入框回车添加标签
要在 Ant Design Vue 的输入框内输入标签并回车创建标签,可以使用`<a-input>`和`<a-tag>`组件结合使用。具体实现方法如下:
首先,定义一个数组`tags`来存储标签,使用`v-for`指令渲染标签列表:
```html
<template>
<div>
<a-input v-model="inputValue" @pressEnter="createTag()" />
<div>
<a-tag v-for="(tag, index) in tags" :key="index" closable @close="removeTag(index)">
{{ tag }}
</a-tag>
</div>
</div>
</template>
```
然后,实现添加标签的方法`createTag`和删除标签的方法`removeTag`:
```javascript
<script>
export default {
data() {
return {
inputValue: '',
tags: []
};
},
methods: {
createTag() {
if (this.inputValue) {
this.tags.push(this.inputValue);
this.inputValue = '';
}
},
removeTag(index) {
this.tags.splice(index, 1);
}
}
};
</script>
```
在`createTag`方法中,首先判断输入框中是否有值,如果有,就将该值添加到`tags`数组中,并清空输入框的值。在`removeTag`方法中,根据索引值从`tags`数组中删除对应的标签。
这样,就可以在 Ant Design Vue 的输入框内输入标签并回车创建标签了。需要注意的是,这里使用了`@pressEnter`事件来监听回车键的按下,同时使用了`closable`属性和`@close`事件来实现标签的删除。
阅读全文