关于javascript:vue-复制粘贴功能

32次阅读

共计 732 个字符，预计需要花费 2 分钟才能阅读完成。

我的项目需要

点击文字实现复制粘贴性能

我的项目筹备

vue

我的项目代码

不应用插件：尽管几行代码就能够实现，不过官网文档显示 execCommand 根本被弃用，不举荐应用

  <template id="test">
   <el-button v-for="item in copiedData" :key="id" type="text" size="mini" @click="copy(item.id)"> 复制 ID</el-button>
   <span @click="copy" v-text="data[0].name" ref="copiedElement"></span>
 </template>
  <script>
 export default {
   el: "#test",
   data() {
     return {
       copiedID:'',
       copiedData: [{ id: 1, name: "a"},
         {id: 2, name: "b"},
         {id: 3, name: "c"},
       ],
         };
   },
   methods: {copy(item) {
         this.copiedID = item? item.id:this.$refs.copiedElement.innerText;
         const input = document.createElement("input");
         input.value = this.copiedID;
         document.body.appendChild(input);
         input.select();
         document.execCommand("Copy");
         document.body.removeChild(input);
     },
   },
 }
  </script>