|
@@ -0,0 +1,149 @@
|
|
|
|
+/**
|
|
|
|
+ * @description 复制文字内容到剪切板,更多内容参见:https://www.zhangxinxu.com/wordpress/?p=10150
|
|
|
|
+ * @author zhangxinxu(.com)
|
|
|
|
+ * @created 2021-10-22
|
|
|
|
+ */
|
|
|
|
+
|
|
|
|
+ var copyText = function (button, content, success) {
|
|
|
|
+ if (!button) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (typeof content == 'function') {
|
|
|
|
+ success = content;
|
|
|
|
+ content = null;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ success = success || function () {};
|
|
|
|
+
|
|
|
|
+ // 是否降级使用
|
|
|
|
+ var isFallback = !navigator.clipboard;
|
|
|
|
+
|
|
|
|
+ if (typeof button == 'string' && !content) {
|
|
|
|
+ if (content === false) {
|
|
|
|
+ isFallback = true;
|
|
|
|
+ }
|
|
|
|
+ content = button;
|
|
|
|
+ button = null;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ var eleTextarea = document.querySelector('#tempTextarea');
|
|
|
|
+ if (!eleTextarea && isFallback) {
|
|
|
|
+ eleTextarea = document.createElement('textarea');
|
|
|
|
+ eleTextarea.style.width = 0;
|
|
|
|
+ eleTextarea.style.position = 'fixed';
|
|
|
|
+ eleTextarea.style.left = '-999px';
|
|
|
|
+ eleTextarea.style.top = '10px';
|
|
|
|
+ eleTextarea.setAttribute('readonly', 'readonly');
|
|
|
|
+ document.body.appendChild(eleTextarea);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ var funCopy = function (text, callback) {
|
|
|
|
+ callback = callback || function () {};
|
|
|
|
+
|
|
|
|
+ if (!isFallback) {
|
|
|
|
+ navigator.clipboard.writeText(text).then(function () {
|
|
|
|
+ callback();
|
|
|
|
+ // 成功回调
|
|
|
|
+ success(text);
|
|
|
|
+ }, function() {
|
|
|
|
+ // 禁止写入剪切板后使用兜底方法
|
|
|
|
+ copyText(text, false);
|
|
|
|
+ callback();
|
|
|
|
+ // 成功回调
|
|
|
|
+ success(text);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ eleTextarea.value = text;
|
|
|
|
+ eleTextarea.select();
|
|
|
|
+ document.execCommand('copy', true);
|
|
|
|
+
|
|
|
|
+ callback();
|
|
|
|
+ // 成功回调
|
|
|
|
+ success(text);
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ if (!button) {
|
|
|
|
+ funCopy(content);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 事件绑定
|
|
|
|
+ button.addEventListener('click', function (event) {
|
|
|
|
+ var strCopy = content;
|
|
|
|
+ if (content && content.tagName) {
|
|
|
|
+ strCopy = content.textContent || content.value;
|
|
|
|
+ }
|
|
|
|
+ // 复制的文字内容
|
|
|
|
+ if (!strCopy) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ funCopy(strCopy, function () {
|
|
|
|
+ // 复制成功提示
|
|
|
|
+ var eleTips = document.createElement('span');
|
|
|
|
+ eleTips.className = 'text-popup';
|
|
|
|
+ eleTips.innerHTML = '复制成功';
|
|
|
|
+ document.body.appendChild(eleTips);
|
|
|
|
+ // 事件
|
|
|
|
+ eleTips.addEventListener('animationend', function() {
|
|
|
|
+ eleTips.parentNode.removeChild(eleTips);
|
|
|
|
+ });
|
|
|
|
+ // For IE9
|
|
|
|
+ if (!history.pushState) {
|
|
|
|
+ setTimeout(function () {
|
|
|
|
+ eleTips.parentNode.removeChild(eleTips);
|
|
|
|
+ }, 1000);
|
|
|
|
+ }
|
|
|
|
+ eleTips.style.left = (event.pageX - eleTips.clientWidth / 2) + 'px';
|
|
|
|
+ eleTips.style.top = (event.pageY - eleTips.clientHeight) + 'px';
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ var strStyle = '.text-popup { animation: textPopup 1s both; -ms-transform: translateY(-20px); color: #01cf97; user-select: none; white-space: nowrap; position: absolute; z-index: 99; }@keyframes textPopup {0%, 100% { opacity: 0; } 5% { opacity: 1; } 100% { transform: translateY(-50px); }}'
|
|
|
|
+
|
|
|
|
+ var eleStyle = document.querySelector('#popupStyle');
|
|
|
|
+ if (!eleStyle) {
|
|
|
|
+ eleStyle = document.createElement('style');
|
|
|
|
+ eleStyle.id = 'popupStyle';
|
|
|
|
+ eleStyle.innerHTML = strStyle;
|
|
|
|
+ document.head.appendChild(eleStyle);
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+/**
|
|
|
|
+ * 输入文字到剪切板
|
|
|
|
+ * @param {string} content
|
|
|
|
+ * @returns
|
|
|
|
+ */
|
|
|
|
+function copyText (content){
|
|
|
|
+ return new Promise((resolve,reject)=>{
|
|
|
|
+ // 判断是否支持 clipboard api 复制
|
|
|
|
+ try {
|
|
|
|
+ if (navigator.clipboard) {
|
|
|
|
+ navigator.clipboard.writeText(content).then(resolve).catch(reject);
|
|
|
|
+ } else {
|
|
|
|
+ let textarea = document.createElement('textarea');
|
|
|
|
+ // 隐藏此输入框
|
|
|
|
+ textarea.style.position = 'fixed';
|
|
|
|
+ textarea.style.opacity = '0';
|
|
|
|
+ textarea.style.top = '20px';
|
|
|
|
+ document.body.appendChild(textarea);
|
|
|
|
+ // 赋值
|
|
|
|
+ textarea.value = content;
|
|
|
|
+ // 选中
|
|
|
|
+ textarea.select();
|
|
|
|
+ // 复制
|
|
|
|
+ document.execCommand('copy', true);
|
|
|
|
+ // 移除输入框
|
|
|
|
+ document.body.removeChild(textarea);
|
|
|
|
+ }
|
|
|
|
+ resolve('ok');
|
|
|
|
+ } catch (error) {
|
|
|
|
+ reject(error);
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+}
|