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...