我这边的情况是罩层出来, placeholder里面的内容“请输入”会跑到罩层上面,如图所示。
因为只有placeholder内容会上来,所以写个假的placeholder解决。
下面贴出方法,以便自己记录。让原来的placeholder为空,写一个加的placeholder
<u-form-item label-width="139" label="备注说明" class="textarea-wrap" prop="remark">
<u-input :border="border" @input="areaInput" @blur="areaBlur" type="textarea" :clearable="false" :height="35" placeholder=" " v-model="form.remark" />
<view class="placeholder" v-show="showTextarea">
请输入
</view>
</u-form-item>
显示假的placeholder
data() {
return {
showTextarea: true,
这里是css
.textarea-wrap {
position: relative;
.placeholder {
position: absolute;
color: #c0c4cc;
top: 16px;
}
}
一个输入事件
一个去除焦点事件
用来模拟placeholder
areaInput() {
if (!this.form.remark) {
this.showTextarea = true;
} else {
this.showTextarea = false
}
},
areaBlur() {
if (!this.form.remark) {
this.showTextarea = true;
}
},
完啦!
看下效果
可以,可以哈哈哈