AzTea
commented
4 years ago Repository (仓库地址)：https://github.com/zenorocha/clipboard.js Gain (收获) : iOS复制兼容问题
1.为什么引入该库
原复制代码(在iOS12.4无法复制)
let url = data;
let oInput = document.createElement("input");
oInput.value = url;
document.body.appendChild(oInput);
oInput.select(); // 选择对象;
console.log(oInput.value);
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.remove();
2.使用
官网demo(input)
<!-- Target -->
<input id="foo" type="text" value="hello">
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
从btn点击到复制，走了三步：trigger > target > copy
3.源码分析
clipboardjs源码包含两个核心文件clipboard.js、clipboard-action.js以及tiny-emitter.js
3.1 tiny-emitter.js
tiny-emitter.js是一个事件发射器，从demo中可以看到定义了事件以及在触发事件之后success和error的标识，clipboard用tiny-emitter.js的on和emit方法来处理复制的回调
// clipboard-action.js(emit方法)
handleResult(succeeded) {
this.emitter.emit(succeeded ? 'success' : 'error', {
action: this.action,
text: this.selectedText,
trigger: this.trigger,
clearSelection: this.clearSelection.bind(this)
});
}
3.2 clipboard.js
clipboard.js负责接收参数并封装
import ClipboardAction from './clipboard-action';
import Emitter from 'tiny-emitter';
import listen from 'good-listener';
/**
* Base class which takes one or more elements, adds event listeners to them,
* and instantiates a new `ClipboardAction` on each click.
*/
class Clipboard extends Emitter {
/**
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
* @param {Object} options
*/
constructor(trigger, options) {
super();
//定义属性
this.resolveOptions(options);
//定义事件
this.listenClick(trigger);
}
/**
* Defines if attributes would be resolved using internal setter functions
* or custom functions that were passed in the constructor.
* @param {Object} options
*/
resolveOptions(options = {}) {
//事件行为
this.action = (typeof options.action === 'function') ? options.action : this.defaultAction;
//复制目标
this.target = (typeof options.target === 'function') ? options.target : this.defaultTarget;
//复制内容
this.text = (typeof options.text === 'function') ? options.text : this.defaultText;
//包含元素
this.container = (typeof options.container === 'object') ? options.container : document.body;
}
/**
* Adds a click event listener to the passed trigger.
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
*/
listenClick(trigger) {
this.listener = listen(trigger, 'click', (e) => this.onClick(e));
}
/**
* Defines a new `ClipboardAction` on each click event.
* @param {Event} e
*/
onClick(e) {
const trigger = e.delegateTarget || e.currentTarget;
if (this.clipboardAction) {
this.clipboardAction = null;
}
this.clipboardAction = new ClipboardAction({
action : this.action(trigger),
target : this.target(trigger),
text : this.text(trigger),
container : this.container,
trigger : trigger,
emitter : this
});
}
/**
* Default `action` lookup function.
* @param {Element} trigger
*/
defaultAction(trigger) {
return getAttributeValue('action', trigger);
}
/**
* Default `target` lookup function.
* @param {Element} trigger
*/
defaultTarget(trigger) {
const selector = getAttributeValue('target', trigger);
if (selector) {
return document.querySelector(selector);
}
}
/**
* Returns the support of the given action, or all actions if no action is
* given.
* @param {String} [action]
*/
static isSupported(action = ['copy', 'cut']) {
const actions = (typeof action === 'string') ? [action] : action;
let support = !!document.queryCommandSupported;
actions.forEach((action) => {
support = support && !!document.queryCommandSupported(action);
});
return support;
}
/**
* Default `text` lookup function.
* @param {Element} trigger
*/
defaultText(trigger) {
return getAttributeValue('text', trigger);
}
/**
* Destroy lifecycle.
*/
destroy() {
this.listener.destroy();
if (this.clipboardAction) {
this.clipboardAction.destroy();
this.clipboardAction = null;
}
}
}
/**
* Helper function to retrieve attribute value.
* @param {String} suffix
* @param {Element} element
*/
function getAttributeValue(suffix, element) {
const attribute = `data-clipboard-${suffix}`;
if (!element.hasAttribute(attribute)) {
return;
}
return element.getAttribute(attribute);
}
export default Clipboard;
从clipboard.js中的resolveOptions可以极为清晰的看到格式化了4个参数：action、target、text、container。格式化时判断是否传递了相应的参数，传递了就使用，没有的话就从trigger元素中通过属性获取（data-clipboard-xxx）
3.3 clipboard-action.js
核心代码initSelection：初始化选择(使用哪一种策觉取决于提供的text和target)
initSelection() {
if (this.text) {
this.selectFake();
}
else if (this.target) {
this.selectTarget();
}
}
selectTarget(实现了浏览器复制的步骤：点击 - 选中 - 复制)。selectTarget中调用的select方法，选中之后，进行复制操作(copyText方法)
function select(element) {
var selectedText;
// target为select时
if (element.nodeName === 'SELECT') {
// 选中
element.focus();
// 记录值
selectedText = element.value;
}
// target为input或者textarea时
else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
var isReadOnly = element.hasAttribute('readonly');
// 如果属性为只读，不能选中
if (!isReadOnly) {
element.setAttribute('readonly', '');
}
// 选中target
element.select();
// 设置选中target的范围
element.setSelectionRange(0, element.value.length);
if (!isReadOnly) {
element.removeAttribute('readonly');
}
// 记录值
selectedText = element.value;
}
else {
if (element.hasAttribute('contenteditable')) {
element.focus();
}
// 创建getSelection，用来选中除input、testarea、select元素
var selection = window.getSelection();
// 创建createRange，用来设置getSelection的选中范围
var range = document.createRange();
// 选中范围设置为target元素
range.selectNodeContents(element);
// 清空getSelection已选中的范围
selection.removeAllRanges();
// 把target元素设置为getSelection的选中范围
selection.addRange(range);
// 记录值
selectedText = selection.toString();
}
return selectedText;
}
/**
* 对目标执行复制操作
*/
copyText() {
let succeeded;
try {
succeeded = document.execCommand(this.action);
}
catch (err) {
succeeded = false;
}
this.handleResult(succeeded);
}
scorpioLh
webfansplz
wenfeihuazha
diandiantong
rxyshww
Share your knowledge and repository sources from Github . ♥️
2020/11/16 - 2020/11/22 ～