All files / src/components/u-copy.vue v-copy.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
 
 
 
 
 
7x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import Vue from 'vue';
import { copy } from '../../utils/edit/clipboard';
 
/**
 * 给任意元素添加`<u-copy>`工具提示效果
 * @value 需要绑定的内容
 */
const directive = {
    handle(binding) {
        const data = {
            value: binding.value,
            placement: 'bottom',
            successText: '已复制',
            disabled: false,
            hideDelay: +binding.arg || 3000,
            feedback: 'tooltip',
        };
 
        Object.keys(binding.modifiers).forEach((key) => {
            if (/^(top|bottom|left|right)(-start|-end)?$/.test(key))
                data.placement = key;
            if (/^(tooltip|toast)?$/.test(key))
                data.feedback = key;
        });
 
        return data;
    },
    bind(el, binding) {
        const data = el['v-copy'] = Object.assign(el['v-copy'] || {}, directive.handle(binding));
 
        const UTooltip = Vue.component('UTooltip') || Vue.component('u-tooltip');
        el.tooltipVM = new UTooltip({
            propsData: {
                content: data.successText,
                trigger: 'manual',
                placement: data.placement,
                reference: el,
            },
        }).$mount();
 
        el.onClick = () => {
            const disabled = el.getAttribute('disabled');
            if (disabled !== null)
                return;
            const data = el['v-copy'];
            const success = copy(data.value);
            if (success) {
                if (data.feedback === 'toast') {
                    Vue.prototype.$toast.show(data.successText, data.hideDelay);
                } else {
                    el.tooltipVM.open();
                    clearTimeout(el.timeoutId);
                    el.timeoutId = setTimeout(() => {
                        el.tooltipVM.close();
                    }, data.hideDelay);
                }
            }
        };
        el.addEventListener('click', el.onClick);
    },
    update(el, binding) {
        el['v-copy'] = Object.assign(el['v-copy'] || {}, directive.handle(binding));
    },
    unbind(el, binding) {
        el.tooltipVM && el.tooltipVM.$destroy();
        el.removeEventListener('click', el.onClick);
        clearTimeout(el.timeoutId);
    },
};
 
export default directive;