zoukankan      html  css  js  c++  java
  • 在vue中使用vue-clipboard2实现点击复制功能

    1.安装

    npm install --save vue-clipboard2

    2.在main.js中引入

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

    3.1方法一(复制链接“https://www.cnblogs.com/wu-hen/”)

    <template>
      <div id="home">
        <van-nav-bar title="个人博客分享" />
        <div class="twoCode">
          <img src="../../static/img/boke_erweima.png" alt="">
        </div>
        <input type="text" readonly="readonly" v-model="twoCodes" @click="copy">
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          twoCodes:'https://www.cnblogs.com/wu-hen/'
        }
      },
      methods:{
        copy(){
          this.$copyText(this.twoCodes).then(e=>{
              this.$toast('复制成功')
            }, e=> {
              this.$toast('复制失败')
            })
        }
      }
    };
    </script>

    3.2方法二(复制链接“https://www.cnblogs.com/wu-hen/”)

    <template>
      <div id="home">
        <van-nav-bar title="个人博客分享" />
        <div class="twoCode">
          <img src="../../static/img/boke_erweima.png" alt="" />
        </div>
        <input
          type="text"
          readonly="readonly"
          v-model="twoCodes"
          v-clipboard:copy="twoCodes"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        />
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          twoCodes: "https://www.cnblogs.com/wu-hen/"
        };
      },
      methods: {
        onCopy(e) {
          this.$toast("复制成功");
        },
        onError(e) {
          this.$toast("复制失败");
        }
      }
    };
    </script>

    4.效果展示,我是点击页面中链接进行链接复制,点击的元素可以写在其他元素上!

  • 相关阅读:
    git命令
    Java开发中的23种设计模式详解
    Linux下简单基本操作【备查】
    微信|公众平台开发者平台
    MyEclipse老是弹出problem occurred窗口
    spring 工具包怎么下载
    MyEclipse8.6启动后提示内存不足的解决方案(亲测,完美解决)
    bzoj2440,luoguP4318 完全平方数
    hdu5528
    CF1076E Vasya and a Tree
  • 原文地址:https://www.cnblogs.com/wu-hen/p/12797523.html
Copyright © 2011-2022 走看看