zoukankan      html  css  js  c++  java
  • vue 点击复制文本

    1.下载clipboard.js   
    npm install clipboard --save 

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

    单页面引用:
    import Clipboard from "clipboard";

    main.js中全局引入:

    import Clipboard from 'clipboard';

    Vue.prototype.Clipboard=Clipboard;

    3.使用,:data-clipboard-text中即为你要复制的内容

    <div class="item">
       <span>收货地址:</span>
       {{orderInfo.address.provinceName ||''}}{{orderInfo.address.districtName||'' }}{{orderInfo.address.address }}
        <el-button
        type="text"
        class="btn"
        :data-clipboard-text="orderInfo.address.address"
        @click="copy"
        >【复制】</el-button>
    </div>

    4、在methods中调用copy事件

    methods: {
        copy: function() {
          var _this = this;
          var clipboard = new Clipboard(".btn"); //单页面引用
       var clipboard = new this.Clipboard(".btn"); //在main.js中引用
          clipboard.on("success", e => {
            // 释放内存
            clipboard.destroy();
          });
          clipboard.on("error", e => {
            // 不支持复制
            Message({
              message: "该浏览器不支持自动复制",
              type: "warning"
            });
            // 释放内存
            clipboard.destroy();
          });
        },   
    }
  • 相关阅读:
    java工程师面试总结
    多线程面试题
    冒个泡
    给大家简单介绍一下:Elasticsearch
    单点登录
    (jQuery)Cookie记住用户名和密码
    我们需要循序渐进的代码重构
    Java序列化(Serialization)的理解
    Java对象序列化
    【武】做一个有自控力的人,开始你的时间规划吧!
  • 原文地址:https://www.cnblogs.com/xiao-ling-zi/p/11725176.html
Copyright © 2011-2022 走看看