web_dist/src/directives/v-el-btn.ts

import sleep from "../utils/sleep";

const loadingName: string = 'xc-loading'

const VElBtn = {
    created(el: HTMLHtmlElement, binding, vnode, prevVnode) {
        /**
         * 这里有个 bug 如果使用了 v-loading 的话有问题
         * 这个函数一定要是 promise 函数
         * 如果这个函数需要参数的话，需要：
         * <el-button v-el-btn="{
         *     func : a ,
         *     value: true
         *   }">测试 </el-button> 这样写
         *
         *   无参函数：
         *   <el-button v-el-btn="a">测试</el-button>
         *
         * @param ev 事件
         */
        el.addEventListener('click', async (ev: Event) => {
            ev.stopPropagation();
            let startTime: Date = new Date();

            async function finallyFunc() {
                let endTime = new Date()
                if (endTime.getTime() - startTime.getTime() < 1000) {
                    await sleep(500)
                }
                el.setAttribute(loadingName, 'false')
                vnode.ref.i.props.loading = false
            }

            vnode.ref.i.props.loading = true
            el.setAttribute(loadingName, 'true')
            try {
                await binding.value.func ? binding.value.func(binding.value.value) : binding.value()
            } finally {
                await finallyFunc()
            }
        });
    },
    updated(el: HTMLHtmlElement, binding, vnode, prevVnode) {
        let loading: string | boolean = el.getAttribute(loadingName)
        if (loading) {
            loading = loading === 'true'
            vnode.ref.i.props.loading = loading
        }
    },

}

export default VElBtn