在后台各种数据列表中，有时候我们需要去让用户点击一个按钮
然后就去操纵用户的剪贴板，例如商品列表的链接
clipboard是一个非常简单易用，并且只有几kb大小的操纵用户剪贴板的js
用法很简单，给需要点击的按钮一个类
然后给这个按钮加上data-clipboard-text属性，属性的值就是为要复制的值
然后我们在js里new Clipboard('.按钮的类名'); 就可以完成点击就复制按钮属性data-clipboard-text的值的功能
但是为了用户体验，我们还需要给用户一个提示，告诉他已经复制成功了
layui的layer是一款非常好用的弹出层插件
可以很方便的给用户弹提示信息
在线js引用
<script src="https://cdn.nikm.cn/js/jquery.js"></script>
<script src="https://cdn.nikm.cn/js/clipboard.js"></script>
<script src="https://cdn.nikm.cn/js/layui/layui.js"></script>demo如下
<body>
<button class="url" data-clipboard-text="https://www.baidu.com">测试1</button>
<button class="url" data-clipboard-text="https://www.baidu.com">测试2</button>
<button class="url" data-clipboard-text="https://www.baidu.com">测试3</button>
<button class="url" data-clipboard-text="https://www.baidu.com">测试4</button>
<button class="url" data-clipboard-text="https://www.baidu.com">测试5</button>
</body>
<script src="https://cdn.nikm.cn/js/jquery.js"></script>
<script src="https://cdn.nikm.cn/js/clipboard.js"></script>
<script src="https://cdn.nikm.cn/js/layui/layui.js"></script>
<script>
$(function(){
new Clipboard('.url');
layui.use(['layer'], function(){
var layer = layui.layer;
});
})
$('.url').click(function(){
layer.msg('复制成功');
})
</script>版权属于：本文是原创文章，版权归 吾梦小站 所有。
本文链接：https://nikm.cn/archives/24.html
本站所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。
