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'
      textarea.style.position = 'absolute'
      textarea.style.left = '-99999x'
      textarea.value = el.$value
      document.body.appendChild(textarea)
      textarea.select()
      textarea.setSelectionRange(0, textarea.value.length)
      const result = document.execCommand('Copy')
      if (result) {
        Message({
          message: '复制成功',
          type: 'success'
        })
      }
      document.body.removeChild(textarea)
    }
    el.addEventListener('click', el.handel)
  },
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handel)
  }
}

export default vCopy

directives.js 文件：

import copy from './v-copy'

// 自定义指令
const directives = {
  copy
}
// 批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach(key => {
      Vue.directive(key, directives[key])
    })
  }
}

直接在vue页面中v-copy使用即可： role.vue

<template>
  <div>
    <el-button v-copy="copyValue" round class="copy-btn">复制</el-button>
    <el-button round class="copy-btn clear-btn" @click="clear">清空 </el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      copyValue: ''
    }
  },
  created() {
    this.convertResFile()
  },

  methods: {
    async convertResFile() {
      try {
        const res = await getVexConvertRes()
        if (res.code === 200) {
          this.copyValue = res.data
        }
      } catch (error) {
        this.$message.error(error)

        this.copyValue = ''
      }
    },
    clear() {
      this.copyValue = ''
    }
  }
}
</script>