1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- import Vue from "vue";
- import message from 'ant-design-vue/es/message';
- // 注册一个全局自定义复制指令 `v-copyText`
- Vue.directive("copyText", {
- bind(el, { value }) {
- el.$value = value;
- el.handler = () => {
- el.style.position = 'relative';
- if (!el.$value) {
- // 值为空的时候,给出提示
- message.info('无复制内容');
- return
- }
- // 动态创建 textarea 标签
- const textarea = document.createElement('textarea');
- // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
- textarea.readOnly = 'readonly';
- textarea.style.position = 'absolute';
- textarea.style.top = '0px';
- textarea.style.left = '-9999px';
- textarea.style.zIndex = '-9999';
- // 将要 copy 的值赋给 textarea 标签的 value 属性
- textarea.value = el.$value
- // 将 textarea 插入到 el 中
- el.appendChild(textarea);
- // 兼容IOS 没有 select() 方法
- if (textarea.createTextRange) {
- textarea.select(); // 选中值并复制
- } else {
- textarea.setSelectionRange(0, el.$value.length);
- textarea.focus();
- }
- const result = document.execCommand('Copy');
- if (result) message.info('复制成功');
- el.removeChild(textarea);
- }
- el.addEventListener('click', el.handler); // 绑定点击事件
- },
- // 当传进来的值更新的时候触发
- componentUpdated(el, { value }) {
- el.$value = value;
- },
- // 指令与元素解绑的时候,移除事件绑定
- unbind(el) {
- el.removeEventListener('click', el.handler);
- },
- });
|