阅读(122)
赞(0)
微信小程序 扩展组件·可选文本组件
2020-07-27 15:14:04 更新
select-text
可选文本组件。该组件有两种使用模式:长按出现选区,与浏览器默认效果一致;长按出现复制按钮,点击复制拷贝全部内容至剪贴板,常见于聊天对话框等场景。
需注意的时,为实现点击其它区域隐藏复制按钮,开发者可在页面最外层监听 tap 事件,并将 evt 对象赋值给 on-document-tap。
<view bind:tap="handleTap">
<view class="demo-block">
<block wx:for="{{arr}}" wx:key="placement">
<view class="list-item">
<mp-select-text
show-copy-btn
placement="{{item.placement}}"
value="{{item.value}}"
data-id="{{index}}"
bindcopy="onCopy"
on-document-tap="{{evt}}"
>
</mp-select-text>
</view>
</block>
<view class="list-item">
<mp-select-text value="默认的长按效果与浏览器一致"></mp-select-text>
</view>
</view>
</view>
Page({
data: {
arr: [{
value: '长按,上侧复制',
placement: 'top'
}, {
value: '长按,右侧复制',
placement: 'right'
}, {
value: '长按,左侧复制',
placement: 'left'
}, {
value: '长按,下侧复制',
placement: 'bottom'
}]
},
onLoad() {
},
onCopy(e) {
console.log('onCopy', e)
},
handleTouchStart(e) {
console.log('@@ touchstart', e)
},
handleTap(e) {
console.log('@@ tap', e)
this.setData({
evt: e
})
}
})
Page({
data: {
arr: [{
value: '长按,上侧复制',
placement: 'top'
}, {
value: '长按,右侧复制',
placement: 'right'
}, {
value: '长按,左侧复制',
placement: 'left'
}, {
value: '长按,下侧复制',
placement: 'bottom'
}]
},
onLoad() {
},
onCopy(e) {
console.log('onCopy', e)
},
handleTouchStart(e) {
console.log('@@ touchstart', e)
},
handleTap(e) {
console.log('@@ tap', e)
this.setData({
evt: e
})
}
})
属性列表
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | String | 是 | 文本组件内容 | |
space | String | 否 | 显示连续空格 | |
decode | Boolean | false | 否 | 是否解码 |
show-copy-btn | Boolean | false | 否 | 长按显示复制按钮 |
z-index | Number | 99 | 否 | 复制按钮的层级 |
active-bg-color | String | #DEDEDE | 否 | 长按复制时文本区背景色 |
on-document-tap | Object | 否 | 否 | 页面监听事件 |
space 的合法值
属性 | 类型 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
代码演示
在开发者工具中预览效果
<view bind:tap="handleTap">
<view class="demo-block">
<block wx:for="{{arr}}" wx:key="placement">
<view class="list-item">
<mp-select-text
show-copy-btn
placement="{{item.placement}}"
value="{{item.value}}"
data-id="{{index}}"
on-document-tap="{{evt}}"
>
</mp-select-text>
</view>
</block>
<view class="list-item">
<mp-select-text value="默认的长按效果与浏览器一致"></mp-select-text>
</view>
</view>
</view>
Page({
data: {
arr: [{
value: '长按,上侧复制',
placement: 'top'
},
{
value: '长按,右侧复制',
placement: 'right'
},
{
value: '长按,左侧复制',
placement: 'left'
},
{
value: '长按,下侧复制',
placement: 'bottom'
}]
},
handleTap(e) {
this.setData({ evt: e })
}
})