# select-text

Optional text component. This component has two usage modes: Long press the selection to appear, consistent with the browser default effectLong press the copy on, click Copy to copy all content to the clipboard, common in chat dialog box and other scenes.

Note that in order to hide the copy on by clicking on other areas, the developer can listen on the outermost layer of the page tap Event, and will optionally Object is assigned to on-document-tap

# install

npm install @ miniprogram-component-plus/select-text

On the page page.json in

// page.json
    "usingComponents": {
        "mp-select-text": @ miniprogram-component-plus/select-text"

# sample code

# List of properties

attribute type Default values Required Introductions
value String yes Text component content
space String no Show continuous spaces
decode Boolean false no Whether to decode
show-copy-btn Boolean false no Long press the display copy on
z-index Number 99 no Level of Copy Buttons
active-bg-color String #DEDEDE no Long press to copy text area background color
on-document-tap Object no no Page Listening Event
attribute type
ensp Chinese character space half size
emsp Chinese character space size
nbsp Space size set by font

# Code demonstration

Preview with Developer Tool

<view bind:tap="handleTap">
  <view class="demo-block">
    <block wx:for="{{arr}}" wx:key="placement">
      <view class="list-item">
    <view class="list-item">
      <mp-select-text Value = "The default long press is the same as the browser"></mp-select-text>
  data: {
    arr: [{
      value: 'Long press, top copy ',
      placement: 'top'
      value: 'Long press, copy right, '
      placement: 'right'
      value: "Long press, copy left."
      placement: 'left'
      value: "Long press, copy the bottom side"
      placement: 'bottom'

  handleTap(and) {
    this.setData({ if any: and })