js逻辑_复制文本

需求描述

如下图，点击复制会复制左边的链接；

原生实现

copyUrl(url){
      //创建input框
      var input = document.createElement("input"); 
      // 将需要复制的内容填充到input框之中
      input.value = url; 
      document.body.appendChild(input); 
      // 选中内容
      input.select(); 
      // 复制 --  若是复制成功返回true,否则返回false
      if(document.execCommand("Copy")){ 
        this.$message.success('复制成功')
      }else{
        this.$message.error('复制失败')
      }
      // 移除元素
      document.body.removeChild(input); 
    }

vue2插件实现

npm install --save vue-clipboard2

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)

全局注册之后，会在Vue原型链上添加一个$copyText方法用于复制文本

Vue.prototype.$copyText = function(){...}

举例如下：

this.$copyText(this.value).then(
  function() {
    alert("复制成功!");
  },
  function(e) {
    alert("此浏览器禁止复制!");
 }
);

vue3插件实现

<script setup>
import { getCurrentInstance } from 'vue'
import useClipboard from 'vue-clipboard3'

const { proxy } = getCurrentInstance()
const { toClipboard } = useClipboard()

const copy = async (text) => {
  try {
    await toClipboard(text)
    proxy.toast('复制成功', 'text', false)
  } catch (e) {
    proxy.toast('复制失败', 'text', false)
  }
}

</script>