Rumah > hujung hadapan web > View.js > Bagaimana untuk melaksanakan fungsi salin dalam vuejs

Bagaimana untuk melaksanakan fungsi salin dalam vuejs

藏色散人
Lepaskan: 2021-11-02 14:03:40
asal
3222 orang telah melayarinya

Cara melaksanakan fungsi salin dalam vuejs: 1. Buat fail copyComm.js; 2. Buat fail directives.js untuk mendaftarkan semua arahan global; '}" boleh disalin.

Bagaimana untuk melaksanakan fungsi salin dalam vuejs

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk melaksanakan fungsi salin dalam vuejs?

vue.js melaksanakan fungsi salinan satu klik

Bagaimana untuk melaksanakan fungsi salin dalam vuejs

1. Mula-mula buat fail 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;
Salin selepas log masuk

2, mencipta fail directives.js untuk mendaftarkan semua arahan global

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

3, mendaftar dalam main.js

import Vue from 'vue';
import Directives from './directives';
Vue.use(Directives);
Salin selepas log masuk

4, vue Penggunaan fail

<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>
Salin selepas log masuk

Disyorkan: "5 pilihan tutorial video vue.js terkini"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi salin dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan