Clipboard

clipboard，复制到剪贴板，兼容H5，APP和小程序依然使用平台自带api

组件脚本

  1.  /**
  2.   * 复制文本 兼容H5
  3.   * 来自 ThorUI  www.thorui.cn | 文档地址： www.donarui.com
  4.   * @author echo.
  5.   * @version 1.0.0
  6.   **/
  7.  // #ifdef H5
  8.  import ClipboardJS from "@/components/utils/clipboard.min.js"
  9.  // #endif
  10.  const thorui = {
  11.      getClipboardData: function(data, callback) {
  12.          // #ifdef APP-PLUS || MP
  13.          uni.setClipboardData({
  14.              data: data,
  15.              success(res) {
  16.                  uni.getClipboardData({
  17.                      success(res) {
  18.                          ("function" == typeof callback) && callback(true)
  19.                      },
  20.                      fail(res) {
  21.                          ("function" == typeof callback) && callback(false)
  22.                      }
  23.                  })
  24.              },
  25.              fail(res) {
  26.                  ("function" == typeof callback) && callback(false)
  27.              }
  28.          })
  29.          // #endif
  31.          // #ifdef H5
  32.          let event = window.event || {}
  33.          let clipboard = new ClipboardJS("", {
  34.              text: () => data
  35.          })
  36.          clipboard.on('success', (e) => {
  37.              ("function" == typeof callback) && callback(true)
  38.              clipboard.off('success')
  39.              clipboard.off('error')
  40.              clipboard.destroy()
  41.          });
  42.          clipboard.on('error', (e) => {
  43.              ("function" == typeof callback) && callback(false)
  44.              clipboard.off('success')
  45.              clipboard.off('error')
  46.              clipboard.destroy()
  47.          });
  48.          clipboard.onClick(event)
  49.          // #endif
  50.      }
  51.  };
  53.  module.exports = {
  54.      getClipboardData: thorui.getClipboardData
  55.  };

使用示例

  1. <script>
  2.     const thorui = require("@/components/utils/clipboard.thorui.js")
  3.     export default {
  4.         components: {
  5.         },
  6.         data() {
  7.             return {
  9.             }
  10.         },
  11.         methods: {
  12.             clipboard: function(data) {
  13.                 thorui.getClipboardData(data, (res) => {
  14.                     // #ifdef H5
  15.                     if (res) {
  16.                         this.tui.toast("复制成功")
  17.                     } else {
  18.                         this.tui.toast("复制失败")
  19.                     }
  20.                     // #endif
  21.                 })
  22.             }
  23.         }
  24.     }
  25. </script>

预览图

clipboard 复制到剪贴板 - 图1