# 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

# space Legal value

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">
        <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 = "The default long press is the same as the browser"></mp-select-text>
    </view>
  </view>
</view>

Page({
  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 })
  }
})