select-text

Optional text components. There are two modes of use for this component: press and hold the selection, which is consistent with the browser default effect, and press and hold the copy button, click copying all the contents to the clipboard, commonly found in scenes such as chat dialog boxes.

Note that in order to click on the other areas to hide the copy button, developers can listen to tap events at the outerst layer of the page and assign the evt object to 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
    })
  }

})

The list of properties

The legal value of space

Code demo

Preview the effect in the developer tool

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