Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Kopierfunktion in VueJS

So implementieren Sie die Kopierfunktion in VueJS

藏色散人
藏色散人Original
2021-11-02 14:03:403188Durchsuche

So implementieren Sie die Kopierfunktion in vuejs: 1. Erstellen Sie eine copyComm.js-Datei. 2. Erstellen Sie eine Directives.js-Datei, um alle globalen Anweisungen zu registrieren. „Kopieren Sie es einfach.

So implementieren Sie die Kopierfunktion in VueJS

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie implementiert man die Kopierfunktion in Vuejs?

vue.js implementiert die Ein-Klick-Kopierfunktion

So implementieren Sie die Kopierfunktion in VueJS

1. Erstellen Sie zunächst eine copyComm.js-Datei

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. Erstellen Sie nun eine Directives.js-Datei, um alle globalen Anweisungen zu registrieren

import copy from './copyComm.js';
// 自定义指令
const directives = {
  copy,
};
// 这种写法可以批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

3. Registrieren Sie sich in main.js

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

4, Vue-Dateinutzung

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

Empfohlen: „Die neuesten 5 vue.js-Video-Tutorial-Auswahlen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kopierfunktion in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn