• Vue中使用clipboard实现复制功能


    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="/new_website/scripts/layui/css/layui.css" rel="stylesheet" />
        <script src="../../new_website/scripts/jquery1.8.3/jquery-1.8.3.js"></script>
        <script src="/new_website/scripts/layui/layui.all.js"></script>
        <script src="/new_website/scripts/vue/vue.js"></script>
        <script src="../../new_website/scripts/common/clipboard.min.js"></script>
    </head>
    <body>
        <p>
            <span>{{logisticsNumber}}</span>
            <span class="layui-btn-normal btnCopy" :data-clipboard-text="logisticsNumber">复制单号</span>
        </p>
    
    
        <script type="text/javascript">
            //复制操作
            var clipboard = new ClipboardJS(".btnCopy");
            clipboard.on('success', function (e) {
                layer.msg('复制成功');
                e.clearSelection();
                //console.log(e);
            });
            clipboard.on('error', function (e) {
                layer.msg('复制失败');
                //console.log(e);
            });
        </script>
    </body>
    </html>

  • 相关阅读:
    Tomcat December 31,2019
    XML
    Java
    mysql8.0.16安装(补) September 24,2019
    乱码中的编码和解码
    idea优化
    新版web.xml
    重定向和请求转发
    web下载文件设置的头信息
    响应状态码
  • 原文地址:https://www.cnblogs.com/zhaoyl9/p/15076069.html
Copyright © 2020-2023  润新知