vue自定义指令 v-copy 复制

vue自定义指令 copy

在vue 的项目里 当我们想直接在标签上加入 v-copy 就可以复制想要复制的内容该怎么做？

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

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

<template>
  <div>
    <button v-copy="copyTexts">复制</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      copyTexts: "复制的内容",
    };
  },

  methods: {},
};
</script>

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

自定义复制指令内容 src/directive/modules/copy.js

const copy = {
  bind(el, {
    value
  }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值为空的时候，给出提示。可根据项目UI仔细设计
        console.log('无复制内容')
        return
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      textarea.style.width = 0
      textarea.style.height = 0

      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      const result = document.execCommand('Copy')

      if (result) {
        console.log('复制成功:', textarea.value) // 可根据项目UI仔细设计
      }
      document.body.removeChild(textarea)
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, {
    value
  }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

export default copy

在src/directive/index.js里面引入 把 copy.js 引入

import Vue from 'vue'
import copy from './modules/copy.js'
// 方式1
const files = require.context('./modules', false, /.+\.js$/)
// 按模块引入
// files.keys(): 打印出来为['./focus.js','/loadmore.js']
files.keys().forEach(fileName => {
  const directiveConfig = files(fileName) // 获取指令函数
  const directiveName = fileName // 获取指令名
    .replace(/^\.\//, '') // 去除开头的'./'
    .replace(/\.\w+$/, '') // 去除文件扩展名
  Vue.directive(directiveName, directiveConfig.default || directiveConfig)
})


// 方式2
// Vue.directive('copy', copy)

把自定义指令引入到main.js里面 src/main.js

import '@/directive/index.js' 

import App from './App.vue'
import Vue from 'vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')