[JavaScript知识库]vue学习demo

vue 之复制文本

1. packages.js中引入依赖
   

2. utils包中新建clipboard.js文件，内容如下

import Vue from "vue"
import Clipboard from "clipboard"

/**
 * @param {*}
 * @return {*}
 * @author: 刘恋
 * @Date: 2021-09-03 23:49:46
 * @description: 复制成功
 */

function clipboardSuccess() {
  Vue.prototype.$message({
    message: "复制成功！",
    type: "success",
    duration: 1500,
  })
}
/**
 * @param {*}
 * @return {*}
 * @author: 刘恋
 * @Date: 2021-09-03 23:51:58
 * @description: 复制失败
 */
function clipboardError() {
  Vue.prototype.$message({
    message: "复制失败！",
    type: "error",
  })
}

/**
 * @param {*} text
 * @param {*} event
 * @return {*}
 * @author: 刘恋
 * @Date: 2021-09-03 23:56:25
 * @description: 复制
 */
export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text,
  })
  clipboard.on("success", () => {
    clipboardSuccess()
    clipboard.destroy()
  })
  clipboard.on("error", () => {
    clipboardError()
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

4. 开始使用

<!--
* @description 复制剪切页面
* @fileName Clipboard.vue
* @author liulian
* @date 2021/09/03 23:43:11
!-->
<template>
  <div>
    <div @click="handleClipboard(data,$event)">{{data}}</div>
  </div>
</template>

<script>
import clipboard from "@/utils/clipboard"
export default {
  name: 'Clipboard',
  components: {},
  data() {
    return {
      data: '点击复制文本'
    }
  },
  computed: {},
  created() {

  },
  mounted() { },
  methods: {
    /**
     * @param {*}
     * @return {*}
     * @author: 刘恋
     * @Date: 2021-09-03 23:59:20
     * @description: 点击事件
     */
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}
</script>

<style scoped lang="scss">
</style>