自定义指令v-loading

自定义指令由生命周期钩子的对象来定义，然后这个钩子会接收指令绑定的对象作为参数。

export default{
  directives:{
  //局部
}

app.directive('loading',{
  //全局
})

el代表指令绑定的元素，可以通过它直接操作DOM。

基础版

在mounted阶段，在el上挂载loading实例。

import { createApp } from "vue"
        const loadingDirective = {
            mounted(el, binding) {
                const app = createApp(loading)
                //instance使用该组件的实例
                const instance = app.mount(document.createElement('div'))
                el.instance = instance

                if (binding.value) {
                    append(el)
                }
            },
            updated(el, binding) {
                if (binding.value !== binding.oldvalue) {
                    binding.value ? append(el) : remove(el)
                }
            },
        }

        function append(el) {
            el.appendChild(el.instance.$el)
        }
        function remove(el) {
            el.removeChild(el.instance.$el)
        }

升级

需要考虑，loading使用的限制。loading依赖于它作用的组件，需要absolute,fixed,relative样式。
在append时，添加样式，在remove时，删除样式。

思考

如何局部显示loading？