navigator.clipboard实现复制粘贴功能异常总结

今天发现在项目上，有一个SQL编辑的功能，使用的codemirror编辑器,同事加了一个右键菜单功能，在本地环境用着没问题，但是部署到测试环境后使用就出问题了，如下图展示的

最后查阅资料发现，这个api因为浏览器安全策略，使用有限制

因此，复制功能通过使用vue-clipboard2插件实现复制功能，兼容性好一些，使用方式如下

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

export default {
    methods: {
        handleCopy(copyValue) {
            this.$copyText(copyValue).then(function (e) {
                console.log("文本已经成功复制到剪切板");
              }, function (err) {
                console.error('Failed to read clipboard contents: ', err);
            })
        }
    }
}

粘贴功能，好像没其他的api好用的，还是用这个，因为浏览器限制，例如https站点就正常使用，不是的话，就给出提示，使用组合键'ctrl+v'，去实现粘贴效果

  try {
    navigator.clipboard.readText()
    .then((text) => {
      console.log('Pasted content: ', text);
      // ToDo 拿到剪贴板的内容就可以去添加到要粘贴的地方了
    })
    .catch(err => {
      console.error('Failed to read clipboard contents: ', err);
    });
  } catch (error) {
    this.$message.info(`浏览器不支持,请使用 'Ctrl + v'`)
  }

参考资料：

Clipboard - Web API 接口参考 | MDN (mozilla.org)

安全上下文 - Web 安全 | MDN (mozilla.org)