乐趣区

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

我的项目需要
  • 点击文字实现复制粘贴性能
我的项目筹备
  • vue
我的项目代码
  1. 不应用插件:尽管几行代码就能够实现,不过官网文档显示 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>
  2. 应用插件
    待更 …
相干链接
  • MDN 文档: https://developer.mozilla.org…
退出移动版