• AI创作!更聪明、更完整、原创作!
  • 一款基于BingBot的超级AI机器人,问答、聊天、创作、写文案,更高效便捷的获取信息、知识和灵感!
🔥点击使用 - AI问答专业版

请帮我用uni-h5写一个 textarea 旁边带一个button,button紧挨着textarea,并且输入内容过多时button高度随着改变

时间2023-09-19 22:09:56 提问来自 重庆市 的网友 分类AI文字 浏览251 热度0
可以使用uni-app的组件和布局,来实现一个具有textarea和动态高度button的页面。以下是一个示例代码: ```vue <template> <view class="container"> <textarea v-model="content" @input="adjustButtonHeight"></textarea> <button :style="{height: buttonHeight + 'px'}">{{ buttonText }}</button> </view> </template> <script> export default { data() { return { content: '', // 输入框的内容 buttonHeight: 30, // 初始按钮高度 buttonText: '提交' // 按钮上的文字 }; }, methods: { adjustButtonHeight() { // 文本行数超过3行时,增加按钮高度 const textareaRows = this.content.split('\n').length; this.buttonHeight = textareaRows > 3 ? this.buttonHeight + 10 : 30; } } }; </script> <style> .container { display: flex; flex-direction: row; } textarea { flex-grow: 1; height: 200px; padding: 10px; } button { margin-left: 10px; padding: 6px 12px; border-radius: 4px; background-color: #007aff; color: #fff; font-size: 16px; line-height: 1; border: none; } </style> ``` 通过上述代码,在uni-app中创建了一个容器 `container`,其中包含了一个textarea输入框和一个button按钮。通过绑定`v-model`来获取textarea的内容,监听`@input`事件来动态调整按钮的高度。当输入内容行数超过3行时,通过改变`buttonHeight`属性来增加按钮的高度。 注意:上述代码中使用了flex布局,使得textarea和button在同一行,并且可以自适应宽度。样式部分可以根据实际需求进行调整。

内容创作(普通版)

内容创作(高级版)

AI智能问答网 免责声明:
以上内容除特别注明外均来源于网友提问,创作工场回答,未经许可,严谨转载。
点击这里>>使用创作工场,更聪明、更完整、更原创!

上一篇 请问,东欧音乐之父是肖邦还是格林卡 下一篇 女人阴唇内测都是小肉芽,是什么?会传染给男性吗?