Vue3中使用ant design vue的textarea时的坑

最新推荐文章于 2024-08-13 23:37:23 发布

lee_amazing

最新推荐文章于 2024-08-13 23:37:23 发布

阅读量5.6k

点赞数 3

分类专栏： vue前端小问题

本文链接：https://blog.youkuaiyun.com/lee_amazing/article/details/119029636

版权

vue前端小问题专栏收录该内容

16 篇文章

订阅专栏

在Vue3项目中，为实现文本区域的高度自适应，本文介绍了如何利用Ant Design Vue的Input组件的TextArea功能。通过导入Input组件并重命名为InputTextArea，避免了标签冲突的问题。在组件中使用v-model和auto-size属性，可以轻松创建一个根据内容自动调整高度的输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vue3时，想要使用ant design vue的input组件里的textarea来适应文本高度。

坑：可是直接使用textarea标签的话是获取到的vue中的textarea标签。而ant组件的textarea只需要import Input组件即可，所以此时可以通过重新命名的方式避免标签重名的错误。如下：

// 导入Input组件即可
import { Input } from 'ant-design-vue'

// 组件注册重新命名
components: { InputTextArea: Input.TextArea },

// 使用标签
<InputTextArea v-model:value="value" auto-size />