【学习记录24】vue3自定义指令

一、在单vue文件中直接使用

1、html部分

<template>
  <div
    style="height: 100%;"
    v-loading="loading"
  >
    <ul>
      <li v-for="item in data">{{item}} - {{item * 2}}</li>
    </ul>
  </div>
</template>

?2、js部分

<script setup>
  import {ref} from 'vue'
  // loading图片路径
  import imgSrc from '@/views/loading.gif'

  const data = ref(1)
  // 定义loading初始值为true，插入loading
  const loading = ref(true)

  // 单页面自定义指令直接使用v开头驼峰命名变量，如下
  const vLoading = {
    // dom加载完，在使用v-loading指令的html节点里添加dom
    mounted (el, binding) {
      const div =  document.createElement('div')
      div.className = 'loading'
      const img = document.createElement('img')
      img.src = imgSrc
      img.width = 40
      div.appendChild(img)
      el.appendChild(div)
    },
    updated(el, binding) {
      // 当值loading绑定的值为false的时候删除dom
      if (!binding.value) {
        const loadingDom = document.querySelector('.loading')
        el.removeChild(loadingDom)
      }
    }
  }

  // 模拟异步数据，2秒后loading值为false
  setTimeout(() => {
    loading.value = false
    data.value = 50
  }, 2000)
</script>

3、实现效果

二、全局注册使用

1、html部分

<template>
  <div
    style="height: 100%;"
    v-loading="loading"
  >
    <ul>
      <li v-for="item in data">{{item}} - {{item * 2}}</li>
    </ul>
  </div>
</template>

2、js部分

在components下创建loading文件夹，在loading文件夹里创建directive.js?

// direcitve.js

import imgSrc from "@/views/loading.gif";

const loadingDirective = {
  mounted(el, binding) {
    const div = document.createElement('div')
    div.className = 'loading'
    const img = document.createElement('img')
    img.src = imgSrc
    img.width = 40
    div.appendChild(img)
    el.appendChild(div)
  },
  updated(el, binding) {
    if (!binding.value) {
      const loadingDom = document.querySelector('.loading')
      el.removeChild(loadingDom)
    }
  }
}
export default loadingDirective

在main.js中全局注册指令

// 引入loading
import loadingDirective from './components/loading/directive'


let app = createApp(App)

app.use(ElementPlus).use(router)
app.directive('loading', loadingDirective) // 全局注册
app.mount('#app')

三、使用vue组件文件实现自定义指令

1、在components下创建loading文件夹，在loading文件夹里创建directive.js

2、在loading文件夹里创建loading.vue

3、在loading文件夹里放入一张GIF图（loading.gif）

?

?1、loading.vue文件源码

// loading.vue

<template>
  <div class="loading">
    <div class="loading-content">
      <img src="./loading.gif" width="24" height="24" alt="">
      <p class="desc">{{title}}</p>
    </div>
  </div>
</template>

<script setup>
  // vue3 写法
  import { ref, defineExpose } from 'vue'

  const title = ref('正在加载...')
  const setTitle = (t) => {
    title.value = t
  }

  // 导出setTitle方法
  defineExpose({
    setTitle
  })

  // vue2 写法
  // export default {
  //   name: 'loading',
  //   data() {
  //     return {
  //       title: '正在加载...'
  //     }
  //   },
  //   methods: {
  //     setTitle(title) {
  //       this.title = title
  //     }
  //   }
  // }
</script>

<style scoped lang="scss">
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    .loading-content {
      text-align: center;
      .desc {
        line-height: 20px;
        font-size: $font-size-small;
        color: $color-text-l;
      }
    }
  }
</style>

2、js部分（directive.js）?

// directive.js

// 引入vue方法createApp
import {createApp} from 'vue'
// 引入添加dom和删除dom的方法
import {addClass, removeClass} from '@/assets/js/dom'

const relativeCls = 'g-relative'
const loadingDirective = {
  mounted (el, binding) {
    // 创建一个loading的vue实例
    const app = createApp(Loading)
    // 挂载loading.vue 到div DOM上
    const instance = app.mount(document.createElement('div'))
    // 把instance挂到要用指令的element下
    el.instance = instance
    const title = binding.arg
    // 如果传了title就重新设置title的值
    if (typeof title !== 'undefined') {
      instance.setTitle(title)
    }
    // 指令绑定的值为true把自定义的vue实例下的dom节点$el添加到el下
    if (binding.value) {
      append(el)
    }
  },
  // 指令绑定的值更新以后
  updated (el, binding) {
    const title = binding.arg
    if (typeof title !== 'undefined') {
      el.instance.setTitle(title)
    }
    if (binding.value !== binding.oldValue) {
      // 指令绑定的值为true添加指令dom，否则删除指令的dom
      binding.value ? append(el) : remove(el)
    }
  }
}

function append(el) {
  const style = getComputedStyle(el)
  // 如果要绑定的dom没有定位就添加一个有定位的classi
  if (!['absolute', 'fixed', 'relative'].includes(style.position)) {
    addClass(el, relativeCls)
  }
  el.appendChild(el.instance.$el)
}

function remove(el) {
  removeClass(el, relativeCls)
  el.removeChild(el.instance.$el)
}

export default loadingDirective

?3、@/assets/js/dom.js源码

export function addClass(el, className) {
  if (!el.classList.contains(className)) {
    el.classList.add(className)
  }
}

export function removeClass(el, className) {
  el.classList.remove(className)
}

4、main.js源码?

// 引入loading
import loadingDirective from './components/loading/directive'


let app = createApp(App)

app.use(ElementPlus).use(router)
app.directive('loading', loadingDirective) // 全局注册
app.mount('#app')

四、进阶（有多个自定义指令）

1、封装一个通用的js

把自定义组件的方法拎出来单独弄一个js文件，我习惯放在src/assets/js/create-my-like-directive.js

// create-my-like-directive.js

import { createApp } from 'vue'
import { addClass, removeClass } from '@/assets/js/dom'

const relativeCls = 'g-relative'

export default function createMyLikeDirective (Comp) { // 改动的地方，变成可传参的方法
  return {
    mounted (el, binding) {
      const app = createApp(Comp)  // 传入变动参数
      const instance = app.mount(document.createElement('div'))
      const name = Comp.name
      if (!el[name]) {
        el[name] = {}
      }
      // 把实例挂载到dom的name下，防止多个自定义指令互相影响干扰出现bug
      el[name].instance = instance
      const title = binding.arg
      if (title) {
        instance.setTitle(title)
      }

      if (binding.value) {
        append(el)
      }
    },
    updated (el, binding) {
      const title = binding.arg
      const name = Comp.name
      if (title) {
        el[name].instance.setTitle(title)
      }
      if (binding.value !== binding.oldValue) {
        binding.value ? append(el) : remove(el)
      }
    }
  }

  function append (el) {
    const style = getComputedStyle(el)
    const name = Comp.name
    if (!['absolute', 'fixed', 'relative'].includes(style.position)) {
      addClass(el, relativeCls)
    }
    el.appendChild(el[name].instance.$el)
  }

  function remove (el) {
    const name = Comp.name
    removeClass(el, relativeCls)
    el.removeChild(el[name].instance.$el)
  }
}

2、directive.js修改

import Loading from './loading.vue'
import createMyLikeDirective from '@/assets/js/create-my-like-directive'
// 如果有不同的自定义好的vue文件，Loading变为别的vue文件即可
const loadingDirective = createMyLikeDirective(Loading)

export default loadingDirective

?3、main.js修改

// 引入loading
import loadingDirective from './components/loading/directive'

// 引入其他的
import AAAA from './components/AAAA/directive'
import BBBB from './components/BBBB/directive'


let app = createApp(App)

app.use(ElementPlus).use(router)
app.directive('loading', loadingDirective) // 全局注册
app.directive('aaaa', AAAA) // 全局注册
app.directive('bbbb', BBBB) // 全局注册
app.mount('#app')