美文网首页
vue中实现复制功能

vue中实现复制功能

作者: DreamerGo | 来源:发表于2021-11-24 21:39 被阅读0次

    第一步:安装依赖

    cnpm install --save vue-clipboard2

    第二步:在main.js中导入依赖

    import VueClipboard from 'vue-clipboard2'

    Vue.use(VueClipboard)

    第三步:页面中使用复制功能

    <template>

    <i class="el-icon-document-copy "@click="onCopy('text')" />

    </template>

    <script>

    export default { 

        data() { 

            return { }

        } 

         methods: { 

             onCopy(txt) { 

                 this.$copyText(txt).then(() => { 

                     this.$message.success({message:"已成功复制到剪切板"}) 

                 }).catch(() => { 

                     this.$message.error({message:"复制失败"}) 

                 })

             } 

     }}

    </script>

    相关文章

      网友评论

          本文标题:vue中实现复制功能

          本文链接:https://www.haomeiwen.com/subject/nfeotrtx.html