Vue 实现复制内容到剪贴板功能ios中复制无效怎么解决

note

Vue通过vue-clipboard2实现一键复制内容到剪贴板功能

安装插件

npm install vue-clipboard2 --save

main.js中全局注入

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

使用方式一

<template><div class="file-list">    <p>{{copyInfo}}</p>    <span v-clipboard:copy="copyInfo" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span></div></template><script>    export default {        data() {            return {              copyInfo:"要复制的内容"            }        },        methods: {            onCopy: function (e) {                alert('You just copied: ' + e.value)            },            onError: function (e) {                console.log(e)                alert('Failed to copy texts')            }        }    }</script>

使用方式二

使用方式一在ios中会出现值不会复制到粘贴板的情况，但是可以在onCopy中拿到的情况，使用第二种情况可以避免

<template>  <div class="container">     <button class="fs12" @click="copyCode(copyInfo)">复制</button>  </div></template><script>  export default {    data() {      return {        copyInfo:"要复制的内容"      }    },    methods: {    copyCode(copyInfo) {    this.$copyText(copyInfo).then(                res => {                  alert('You just copied: ' + e.value)                },                err => {                  alert('Failed to copy texts')                }              )            }    }  }</script>