我的解决思路希望能帮到大家
解决方案: 写一个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})
}
}
})