直接上代码:
HTML
<template>
<view>
<view class="shurukuang">
<textarea
placeholder-style="color:#646464;
font-size:24rpx"
placeholder="请在这里输入文字介绍下你的商品"
@input="descInput" maxlength="200"
v-model="dataInfo" />
<text
style="position: absolute;
right: 60rpx;bottom: 20rpx;
font-size:24rpx;
color: #646464;">{{ start }}/200</text>
</view>
</view>
</template>
JS:
export default {
data() {
return {
start: 0,
dataInfo: ''
};
},
methods: {
descInput() {
let txtVal = this.dataInfo.length;
this.start = txtVal;
}
}
};
CSS:
.shurukuang textarea {
width: 86%;
height: 320rpx;
background-color: #f0f0f0;
border-radius: 10rpx;
padding: 20rpx;
margin: 0 auto;
}
.shurukuang {
position: relative;
top: 120rpx;
width: 100%;
height: 420rpx;
}
自己项目直接运行,小心样式冲突。