创新互联小程序教程:微信小程序扩展组件·可选文本组件

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
    })
  }

})

属性列表

属性 类型 默认值 必填 说明
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 })
  }
})

文章题目:创新互联小程序教程:微信小程序扩展组件·可选文本组件
本文URL:http://www.csdahua.cn/qtweb/news0/233400.html

网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网