用ant-degin-vue实现一个盒子左边是tag标签,右边是input输入框,最开始左边tag标签的不存在,当右边的input输入框输入内容并回车时左边的tag标签才会出现
时间: 2024-03-26 11:39:19 浏览: 70
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
可以使用Ant Design Vue的Tag和Input组件来实现这个功能,具体代码如下:
```vue
<template>
<div>
<a-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</a-tag>
<a-input v-model="inputValue" @pressEnter="addTag" :placeholder="placeholder" />
</div>
</template>
<script>
export default {
data() {
return {
tags: [],
inputValue: '',
placeholder: '请输入内容并按回车'
}
},
methods: {
addTag() {
if (this.inputValue.trim() !== '') {
this.tags.push(this.inputValue.trim())
this.inputValue = ''
this.placeholder = '继续输入并按回车'
}
}
}
}
</script>
```
首先,初始化组件的数据,包括标签数组`tags`、输入框的值`inputValue`和输入框的占位符`placeholder`。在模板中,使用`v-for`指令遍历`tags`数组,动态渲染标签。输入框使用`v-model`指令双向绑定`inputValue`的值,当用户按下回车键时,触发`pressEnter`事件,并调用`addTag`方法。`addTag`方法首先判断输入框的值是否为空,如果不为空,则将输入框的值添加到`tags`数组中,并清空输入框的值和更新占位符提示语。这样就可以实现用户输入内容并回车后才显示标签的功能了。
阅读全文