美文网首页
vue 实现粘贴复制

vue 实现粘贴复制

作者: 华华00526 | 来源:发表于2019-05-27 17:56 被阅读0次

    1.下载clipboard.js

    cnpm install clipboard --save

    2.引入,可以在mian.js中全局引入也可以在单个vue中引入

    import Clipboard from 'clipboard'; 

    3,在组件中使用

    <van-list>

          <van-cell v-for="item in list" :key="item" :title="item">

            <van-button class="tag-read" :data-clipboard-text="item" @click="copy" size="mini">点击复制</van-button>

          </van-cell>

        </van-list>

    js:

    methods: {

        //

        copy() {

          var clipboard = new Clipboard(".tag-read");

          clipboard.on("success", e => {

            this.$toast("复制成功"); //这里你如果引入了elementui的提示就可以用,没有就注释即可

            // 释放内存

            clipboard.destroy();

          });

          clipboard.on("error", e => {

            // 不支持复制

            this.$toast("该浏览器不支持自动复制");

            // 释放内存

            clipboard.destroy();

          });

        },}

    相关文章

      网友评论

          本文标题:vue 实现粘贴复制

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