zoukankan      html  css  js  c++  java
  • vue 一键复制文本内容 clipboard

    一、安装clipboard

    npm install clipboard --save 

    二、引入

    1、全局引入

    import Clipboard from 'clipboard'; 
    
    Vue.prototype.Clipboard=Clipboard;

    2、单页面引入

    import Clipboard from "clipboard";

    3、:data-clipboard-text 中即为要复制的内容

    4、完整代码

    <template>
      <div class="clipboard-wrap">
        <!-- copyText是要复制的内容 -->
        <p class="copy-btn" @click="copyUrl" :data-clipboard-text="copyText">【复制链接】</p>
        <p>{{copyText}}</p>
      </div>
    </template>
    
    <script>
    import Clipboard from 'clipboard';  // 点击复制文本
    export default {
      data() {
        return {
          copyText: '骑上我的小摩托'
        }
      },
      methods: {
        // 复制链接
        copyUrl() {
          // 填写点击事件绑定的class名
          let clipboard = new Clipboard(".copy-btn");
          clipboard.on("success", e => {
            this.$toast('复制成功!');
            // 释放内存
            clipboard.destroy();
          });
        },
      }
    }
    </script>
  • 相关阅读:
    线段树
    2016.9.4
    使用CSS代码修改博客模板
    爬虫
    PHP初学[DAY2]
    2016.8.23
    一个自动设置游戏房间的脚本
    可逆矩阵生成
    #2284. 接水果(fruit)
    #3762. 有趣的数(number)
  • 原文地址:https://www.cnblogs.com/zjianfei/p/14850650.html
Copyright © 2011-2022 走看看