Vue 自定义指令v-copy复制

vue自定义指令 copy

在vue 的项目里，可以通过点击按钮直接复制想要的内容。

新建一个项目 按照以下方式把对应的文件改造下就可以了 (cv即食)

使用自定义指令 v-copy 其实就是把我们想要复制的内容赋值给cotpyTexts 这个变量，点击复制按钮的时候就把需要复制的内容复制过来了。

第一步，src/directives下面新建两个文件directives.js 和 v-copy.js

v-copy.js文件代码：

import {
    Message } from 'element-ui'
const vCopy = {
   
  /**
   * bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
   * el: 作用的 dom 对象
   * value: 传给指令的值，要 copy 的值
   */
  bind(el) {
   
    el.handel = () => {
   
      if (!el.$value) {
   
        Message({
   
          message: '无复制内容',
          type: 'warning'
        })
        return
      }
      const textarea = document.createElement('textarea')
      textarea.readOnly = 'readonly'