vuejs如何實現復制功能

這篇文章主要講解了“vuejs如何實現復制功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vuejs如何實現復制功能”吧！

vuejs實現復制功能的方法：1、創建一個copyComm.js的文件；2、創建一個directives.js文件來注冊所有的全局指令；3、通過“return{copyText:'...'}”實現復制即可。

本文操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vuejs怎么實現復制功能？

vue.js實現一鍵copy功能

1，首先建一個copyComm.js的文件

const vCopy = { // 名字愛取啥取啥
  /*
    bind 鉤子函數，第一次綁定時調用，可以在這里做初始化設置
    el: 作用的 dom 對象
    value: 傳給指令的值，也就是我們要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一個全局屬性來存傳進來的值，因為這個值在別的鉤子函數里還會用到
    el.handler = () => {
      if (!el.$value) {
        // 值為空的時候，給出提示，我這里的提示是用的 ant-design-vue 的提示，你們隨意
       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();
      textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy');
      if (result) {
        console.log('復制成功');
      }
      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 vCopy;

2，在建一個directives.js文件來注冊所有的全局指令

import copy from './copyComm.js';
// 自定義指令
const directives = {
  copy,
};
// 這種寫法可以批量注冊指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

3，在main.js注冊

import Vue from 'vue';
import Directives from './directives';
Vue.use(Directives);

4，vue文件使用

<template>
  <div >
    <button v-copy="copyText">拷貝</button>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        copyText:'要copy的內容'
      }
    },
    methods: {
      init () {
      },
    },
    watch: {},
    props: [],
    components: {},
    computed: {},
    mounted () {
      _this = this;
      _this.init();
    },
  }
</script>

感謝各位的閱讀，以上就是“vuejs如何實現復制功能”的內容了，經過本文的學習后，相信大家對vuejs如何實現復制功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！