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