第一步:引入clipboard.js
<script src="${appRoot}/global/scripts/clipboard.min.js" type="text/javascript"></script>
第二步:设置标签
<span class="publicate font-blue" title="复制" data-toggle="tooltip" data-placement="bottom" data-clipboard-text="${(appInfo.url)!}"><i class="fa fa-clone"></i></span>
设置data-clipboard-text的值为要复制的内容;
第三步:在js中进行复制逻辑编写:
$(function(){
$("[data-toggle='tooltip']").tooltip();
$(".publicate").click(function(){
toastr.options = {
"closeButton": false,
"debug": false,
"positionClass": "toast-top-right",
"onclick": null,
"showDuration": "1000",
"hideDuration": "1000",
"timeOut": "2000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
toastr.success('复制成功!');
});
new ClipboardJS('.publicate');//复制到剪切板插件
})
在这里需要引入两个文件toastr插件的css和js,
<link href="/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
<script src="/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
点击复制按钮,就会复制成功: