创新互联小程序教程:微信小程序扩展组件·可选文本组件
select-text
可选文本组件。该组件有两种使用模式:长按出现选区,与浏览器默认效果一致;长按出现复制按钮,点击复制拷贝全部内容至剪贴板,常见于聊天对话框等场景。

创新互联是一家集网站建设,琼海企业网站建设,琼海品牌网站建设,网站定制,琼海网站建设报价,网络营销,网络优化,琼海网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
需注意的时,为实现点击其它区域隐藏复制按钮,开发者可在页面最外层监听 tap 事件,并将 evt 对象赋值给 on-document-tap。
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 | 根据字体设置的空格大小 |
代码演示
在开发者工具中预览效果
Page({
data: {
arr: [{
value: '长按,上侧复制',
placement: 'top'
},
{
value: '长按,右侧复制',
placement: 'right'
},
{
value: '长按,左侧复制',
placement: 'left'
},
{
value: '长按,下侧复制',
placement: 'bottom'
}]
},
handleTap(e) {
this.setData({ evt: e })
}
}) 网站题目:创新互联小程序教程:微信小程序扩展组件·可选文本组件
路径分享:http://www.jxjierui.cn/article/codsjeh.html


咨询
建站咨询
