Copy

此模板为一键安装导入，不建议手动修改。

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

简单说明

版本：1.0

说明：点击复制

使用方式

引入Widget:copy在需要复制的元素类样式加入“copy-text”标签

{{#Widget:copy}}
<div class="copy-text" style="width: 50%; height:300px;">我是要复制的内容</div>

我是要复制的内容

作者

congeal_plume

+关注

标签

标签：widget

标签：方法

依赖页面

• Widget:copy

<script type="text/javascript" src="https://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script> <script language="javaScript"> (window.RLQ = window.RLQ || []).push([["jquery"], function () { $(function () { console.log("点击复制加载成功");           $(".copy-text").prepend('<div class="copy-svg" title="点击复制"><svg width="1em" height="1em"viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H20C20.5304 0 21.0391 0.210714 21.4142 0.585786L31.4142 10.5858C31.7893 10.9609 32 11.4696 32 12V36C32 38.2091 30.2091 40 28 40H4C1.79086 40 0 38.2091 0 36V4ZM27.1716 12H20V4.82843L27.1716 12ZM16 4V14C16 15.1046 16.8954 16 18 16H28V36H4V4L16 4ZM8 22C8 20.8954 8.89543 20 10 20H22C23.1046 20 24 20.8954 24 22C24 23.1046 23.1046 24 22 24H10C8.89543 24 8 23.1046 8 22ZM8 30C8 28.8954 8.89543 28 10 28H22C23.1046 28 24 28.8954 24 30C24 31.1046 23.1046 32 22 32H10C8.89543 32 8 31.1046 8 30Z" fill="currentColor" /></svg></div>') $(".copy-svg").click(function (e) { $(this) var content = $(this).parent(".copy-text").text() var clipboard = new Clipboard('.copy-svg', { text: function () { return content; } }); clipboard.on('success', function (e) { $("body").append("<div class='copy-hint'><i><svg width='1em' height='1em' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20ZM29.3287 13.5052C30.1543 14.239 30.2287 15.5032 29.4948 16.3287L18.8282 28.3287C18.4486 28.7557 17.9046 29 17.3333 29C16.7621 29 16.2181 28.7557 15.8385 28.3287L10.5052 22.3287C9.77135 21.5032 9.84571 20.239 10.6713 19.5052C11.4968 18.7713 12.761 18.8457 13.4948 19.6713L17.3333 23.9896L26.5052 13.6713C27.239 12.8457 28.5032 12.7713 29.3287 13.5052Z' fill='#42c02e'/></svg> 复制成功！</i></div> ") setTimeout('$(".copy-hint").remove()', 1500) }); clipboard.on('error', function (e) {                   $("body").append('<div class="copy-hint"><i><svg width="1em" height="1em" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4ZM0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20Z" fill="#d53236"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 24C18.8954 24 18 23.1046 18 22L18 10C18 8.89543 18.8954 8 20 8C21.1046 8 22 8.89543 22 10L22 22C22 23.1046 21.1046 24 20 24Z" fill="#d53236"/><path d="M17 29C17 27.3431 18.3431 26 20 26C21.6569 26 23 27.3431 23 29C23 30.6569 21.6569 32 20 32C18.3431 32 17 30.6569 17 29Z" fill="#d53236"/></svg> 复制失败！</i></div>') setTimeout('$(".copy-hint").remove()', 1500) }); }) }) } ]) </script> <style> .copy-hint { width: 100%; display: flex; justify-content: center; transition: 0.4s; } .copy-hint>i { position: fixed; top: 20%; font-size: 18px; font-weight: bold; padding: 10px 40px; border-radius: 10px; background-color: #fff; box-shadow: 2px 2px 14px -2px #bbbbbb; display: flex; align-items: center; z-index: 1000; } .copy-text { position: relative; } .copy-svg { color: #fff; background: #3c3c3c; box-sizing: content-box; padding: 6px 10px; border-radius: 10px; position: absolute; top: 10px; right: 20px; opacity: 0; transition: 0.4s ease-in-out; cursor: pointer; } .copy-text:hover>.copy-svg { opacity: 1; transition: 0.4s ease-in-out; } </style>

更新日志

1.0