vue实用指令

import copy from ‘./copy‘

const directives = {
    copy
}

const install = function (Vue) {
    Object.keys(directives).forEach((key) => {
        Vue.directive(key, directives[key])
    })
}

export default install

import Vue from ‘vue‘
import Directives from ‘@/directives/index‘
Vue.use(Directives)

/*
 * 实现思路
 * 动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
 * 将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
 * 选中值 textarea 并复制
 * 将 body 中插入的 textarea 移除
 * 在第一次调用时绑定事件，在解绑时移除事件
 */
const copy = {
    bind(el, binding) {
        const value = binding.value
        el.$value = value
        const abc = () => {
            if (!el.$value) {
                // 值为空时
                console.log(‘无复制内容！‘)
                return
            }
            // 动态创建textarea标签
            const textarea = document.createElement(‘textarea‘)
            // 将该textarea设为readonly防止ios下自动唤起键盘，同时将textarea移出可视区域
            textarea.readOnly = ‘readonly‘
            textarea.style.position = ‘absolute‘
            textarea.style.left = ‘-9999px‘
            // 将要copy的值赋值给textarea标签的value属性
            textarea.value = el.$value
            // 将textarea插入到body中
            document.body.appendChild(textarea)
            // 选中值
            textarea.select()
            // 将选中的值复制并赋值给result
            const result = document.execCommand(‘Copy‘)
            if (result) {
                console.log(‘复制成功！‘)
            }
            document.body.removeChild(textarea)
        }
        // 绑定点击事件
        el.addEventListener(‘click‘, abc)
    },
    // 当传进来的值更新的时候触发
    componentUpdated(el, { value }) {
        el.$value = value
    },
    // 指令与元素解绑的时候，移除事件绑定
    unbind(el) {
        el.removeEventListener(‘click‘, el.handler)
    }
}

export default copy

<template>
  <div>
      <p v-copy="copyText">复制</p>
  </div>
</template>

<script>
export default {
  name: ‘Test‘,
  data() {
    return {
      copyText: ‘a copy directives‘
    }
  },
  methods: {}
}
</script>

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