3种实现文本复制功能的方法

复制功能的实现方式

一、vue-clipboard

npm install vue-clipboard2 --save

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

使用：

<template>
  <div class="container">
    <input type="text" v-model="content" />
    <button
      v-clipboard:copy="content"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >
      点击复制
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
    };
  },
  methods: {
    onCopy: function(e) {
      console.log("复制成功,复制的内容为：", e.text);
    },
    onError: function(e) {
      console.log("复制失败");
    },
  },
};
</script>

二、navigation.clipboard

---

navigator.clipboard.writeText() 将指定字符串写入剪切板中，返回一个promise对象

往输入框内输入内容后点击复制，就可以复制了

    <input type="text" id="ipt" />
    <input type="button" id="btn" value="点击复制" />
    <script>
      document.querySelector("#btn").addEventListener("click", function() {
        navigator.clipboard
          .writeText(document.querySelector("#ipt").value)
          .then(() => {
            alert("复制成功");
          })
          .catch(() => {
            alert("复制失败");
          });
      });

问题：本地没问题，但是当嵌入到iframe中，复制直接报错了；

cannot read properties of undefined (reading writeText)

只有在用户事先授予网站或应用对剪切板的访问许可之后，才能使用异步剪切板读写方法

解决方法：给iframe添加allow属性

<iframe allow="clipboard-write" src="http://127.0.0.1:5500/src/views/copy.html" />

三、execCommand

如果是input的话可以用，普通的元素不能用，而且select会选中内容，有选中的效果

 <input type="text" v-model="content" ref="ipt" />
    copyContent() {
      this.$refs.ipt.select();
      document.execCommand("copy");
    }

这种方法不建议使用，已过时