• 智能AI问答!更聪明、更完整、原创作!
  • 一款基于GPT的超级AI机器人,可以回答问题、聊天、创作、写文案!

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

发布于 2023-09-19 22:09:49

可以使用uni-app的组件和布局,来实现一个具有textarea和动态高度button的页面。以下是一个示例代码:

<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在同一行,并且可以自适应宽度。样式部分可以根据实际需求进行调整。

0 条评论

发布
问题

在线
客服