微信小程序textarea层级太高,导致其他modal弹出框内容出现textarea中的内容。

我的解决思路希望能帮到大家

解决方案: 写一个my-textarea组件

思路: 设计一个容器view来装textarea中的内容,当点击这个容器时,将textarea显示出来。并且让其获取焦点,当值改变时,要实时更新父组件的方法,当textarea失去焦点时,再隐藏textarea, 将之前的容器view显示textarea的内容。

代码如下:

wxml:  

<view class="textarea">
  <view class="my-textarea" bindblur='onblur' bindtap="showTextareaEvent" wx:if='{{ !textareaIsShow }}'>{{value}}</view>
  <textarea maxlength='300' bindinput="bindinput" focus wx:else value="{{value}}" placeholder-class="crm-placeholder" class="my-textarea" type='textarea' placeholder="输入备注信息">  </textarea>
</view>
 
js:
// components/crmTextarea/CrmTextarea.js
Component({
/**
* 组件的属性列表
*/
properties: {
textareaValue: {
type: String,
value: ''
},
},

attached() {
console.log(this.data.textareaValue)
this.setData({
value: this.data.textareaValue
})
},
observers() {

},
/**
* 组件的初始数据
*/
data: {
textareaIsShow: false,
value: ''
},

/**
* 组件的方法列表
*/
methods: {
// 显示text输入框
showTextareaEvent() {
this.setData({
textareaIsShow: true
})
},
onblur() {
this.setData({
textareaIsShow: false
})
},
bindinput({detail}) {
const {value} = detail
this.triggerEvent('updatevalue', {value})
}
}
})

猜你喜欢

转载自www.cnblogs.com/zuowang/p/13391090.html
今日推荐