ant-degin-vue的input框内输入内容回车或离开input框,输入的内容变成tag标签必须在input框内并且最多只能输入十个标签,超过十个则不能输入任何东西
时间: 2024-03-01 11:49:42 浏览: 101
你可以使用Ant Design Vue提供的`Input`和`Tag`组件来实现这个功能。下面是一个简单的例子:
```vue
<template>
<div>
<a-tag
v-for="(tag, index) in tags"
:key="index"
closable
@close="handleClose(tag)"
>
{{ tag }}
</a-tag>
<a-input
ref="input"
v-model="inputValue"
@keydown.enter="handleEnter"
@blur="handleBlur"
/>
</div>
</template>
<script>
export default {
data() {
return {
tags: [],
inputValue: ""
};
},
methods: {
handleClose(tag) {
this.tags = this.tags.filter(t => t !== tag);
},
handleEnter() {
const tag = this.inputValue.trim();
if (tag && this.tags.length < 10) {
this.tags.push(tag);
this.inputValue = "";
}
},
handleBlur() {
this.handleEnter();
if (this.tags.length === 10) {
this.$refs.input.$el.blur();
}
}
}
};
</script>
```
在上面的例子中,我们使用了`v-for`指令来渲染已选择的标签,使用`closable`属性来显示关闭按钮。我们使用`v-model`指令来双向绑定输入框的值,使用`@keydown.enter`事件来处理回车事件,使用`@blur`事件来处理失去焦点事件。
在`handleEnter`方法中,我们首先获取输入框的值,并去除首尾的空格。然后判断输入框的值是否为空,以及已选择的标签数量是否超过了10个。如果满足条件,就将输入框的值添加到已选择的标签中,并清空输入框的值。
在`handleBlur`方法中,我们首先调用`handleEnter`方法来处理输入框的值。然后判断已选择的标签数量是否达到了10个,如果是,就让输入框失去焦点。
这样,就实现了在输入框内输入内容回车或离开input框,输入的内容变成tag标签,并且最多只能输入十个标签,超过十个则不能输入任何东西的功能。
阅读全文