zhangxiao
2024-08-26 57b66478e7e335379435b31c20da4619bd1411f5
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
/**
 * 功能描述:自定义复制指令
 * 参数说明 Options:
 *  @param {string} value 需要复制的内容
 * @param {string} onSuccess 【非必传】成功的回调,回调参数: {e}  注:默认使用vant Toast 轻提示,该方法里面可以自定义交互
 * @param {string} onError 【非必传】失败的回调,回调参数: {e}  注:默认使用vant Toast 轻提示,该方法里面可以自定义交互
 *  使用方法:v-copy="Options"
 */
import { ObjectDirective } from "vue";
import typeHelper from "@/utils/helper/type/index";
import handlerCopy from "@/utils/tools/copy";
import { Message } from "@arco-design/web-vue";
 
// 注册一个全局自定义复制指令 `v-copy`
const CopyHookFunction: ObjectDirective = {
    mounted: function (el, binding) {
        const { value = null, onSuccess = null, onError = null } = { ...binding.value };
        el.$value = value; //el实例上存放传给指令的值
        el.copyHandler = (): void => {
            handlerCopy(el.$value)
                .then((res: any) => {
                    if (typeHelper.isFunction(onSuccess)) {
                        onSuccess(res);
                    } else {
                        Message.success(res);
                    }
                })
                .catch((err: any) => {
                    if (typeHelper.isFunction(onError)) {
                        onError(err);
                    } else {
                        Message.error(err);
                    }
                });
        };
        el.addEventListener("click", el.copyHandler); // 绑定点击事件
    },
    // 当传进来的值更新的时候触发
    updated(el: any, binding) {
        const { value = null } = { ...binding.value };
        el.$value = value;
    },
    // 指令与元素解绑的时候,移除事件绑定
    unmounted(el: any) {
        el.removeEventListener("click", el.copyHandler);
    }
};
 
export default CopyHookFunction;