yz-clipboard v1.0.3

示例

// 先全局配置复制成功和复制失败的回调方法
// main.js
import { clipConfig } from 'yz-clipboard'
clipConfig({
  successText: '复制成功！',
  errorText: '复制失败'
  success: msg => console.log(msg)
  error: msg => console.log(msg)
})

// 复制
// demo.vue
<template>
  <div>
    <p>{{ text }}</p>
    <button @click="onCopy">复制</button>
    <button @click="onCustomCopy">复制（定制提示信息）</button>
  </div>
</template>

<script>
  import { clipCopy } from 'yz-clipboard'
  export default {
    name: 'demo',
    data() {
      return { text: 'hello world' }
    },
    methods: {
      onCopy(event) {
        clipCopy({
          event,
          data: this.text
        })
      },
      onCustomCopy(event) {
        clipCopy({
          event,
          data: this.text,
          successText: '订单号复制成功',
          success() {
            // 复制成功后的业务逻辑
          },
          error() {
            // 复制失败后的业务逻辑
          }
        })
      }
    }
  }
</script>

文档

这个包仅仅是对clipboard.js的上层封装。对外暴露两个方法，一个是配置方法clipConfig，一个是复制方法clipCopy。

clipConfig参数

clipCopy参数