快捷導(dǎo)航

lottie實現(xiàn)vue自定義loading指令及常用指令封裝詳解

更新時間：2022年09月15日 08:29:02 作者：做什么夢呢

這篇文章主要為大家介紹了lottie實現(xiàn)vue自定義loading指令及常用指令封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、前言

本文主要介紹使用lottie動畫實現(xiàn)vue自定義loading的指令方法。另外本篇文章還會介紹其他幾個常用的自定義指令實現(xiàn)方式（點擊指定區(qū)域外監(jiān)聽指令）。

lottie是一款由airbnb開源的跨平臺動畫渲染庫，支持Android,iOS,Web,Windows平臺。是專門用于解析從AE(Adobe After Effects)中通過Bodymovin插件導(dǎo)出的JSON文件，直接渲染動畫。

二、實現(xiàn)方式

1.v-loading

這個指令是我們在開發(fā)過程中經(jīng)常遇到的場景，這里我們分兩步做，第一步我們先創(chuàng)建一個loading的組件。

這里我們要先引入lottie插件

npm install lottie-web
// or
yarn add lottie-web

之后在loading組件中引入

// loading.vue
<template>
  <div class="loading-wrap">
    <div id="loadingImg" />
  </div>
</template>
<script>
import lottie from "lottie-web"
// 在網(wǎng)上下載的lottie動畫，這里我是在iconfont上找的
import animationData from "./loading.json"
export default {
  mounted() {
    // 解決json動畫找不到dom不渲染問題
    window.requestAnimationFrame(this.loadImg);
  },
  methods: {
    loadImg () {
      lottie.loadAnimation({
        container: document.getElementById('loadingImg'),
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: animationData
      });
    }
  }
};
</script>
<style lang="less" scoped>
.loading-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1800;
}
</style>

然后去在創(chuàng)建一個js文件去寫指令

import Vue from 'vue'
import Loading from './loading.vue'
/**
 * Vue.extend 接受參數(shù)并返回一個構(gòu)造器，new 該構(gòu)造器可以返回一個組件實例
 * 當(dāng)我們 new Mask() 的時候，把該組件實例掛載到一個 div 上
 **/
const Mask = Vue.extend(Loading)
// 更新是否顯示
const toggleLoading = (el, binding) => {
  if (binding.value) {
    Vue.nextTick(() => {
      // 獲取父元素的定位信息
      const isStatic = window.getComputedStyle(el).position === 'static'
      if (isStatic) {
        el.style.position = 'relative'
      }
      // 插入到目標元素
      insertDom(el, el, binding)
    })
  } else {
    removeDom(el, el, binding)
  }
}
// 插入到目標元素
const insertDom = (parent, el) => {
  parent.appendChild(el.mask)
}
// 從目標元素中移除
const removeDom = (parent, el) => {
  parent.removeChild(el.mask)
}
export default {
  // 第一次綁定到元素時調(diào)用
  bind: function (el, binding) {
    const mask = new Mask({
      el: document.createElement('div')
    })
    // 用一個變量接住mask實例
    el.instance = mask
    el.mask = mask.$el
    el.maskStyle = {}
    binding.value && toggleLoading(el, binding)
  },
  // 所在組件的 VNode 更新時調(diào)用--比較更新前后的值
  update: function (el, binding) {
    if (binding.oldValue !== binding.value) {
      toggleLoading(el, binding)
    }
  },
  // 指令與元素解綁時調(diào)用
  unbind: function (el) {
    el.instance && el.instance.$destroy()
  }
}

然后我們再去main.js中，全局注冊一下

import Directive from './directives'
Vue.use(Directive)

最后，在使用的時候，就可以這樣

 // App.vue
 <template>
  <div id="app" v-loading="isLoading">
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      isLoading: true
    }
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
}
</script>

以上我們就封裝好了一個lottie的自定義loading。

2.v-click-outside

這個指令是點擊目標區(qū)域以外的地方的監(jiān)聽。在日常開發(fā)中，我們可能會遇到自定義的一些彈窗效果，這個時候，這個指令就派上用場了。

// clickoutside.js
export default {
  bind (el, binding, vnode) {
    function documentHandler (e) {
      if (el.contains(e.target)) {
        return false
      }
      if (binding.expression) {
        binding.value(e)
      }
    }
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update () {
  },
  unbind (el, binding) {
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}

之后是使用方法，如下

<template>
  <div id="app">
    <img  v-click-outside="handleOutSide" src="./assets/logo.png" >
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    handleOutSide () {
      console.log('到外面了')
    }
  }
}
</script>

最后記得在index.js中將兩個指令定義一下，再去main.js中注冊到全局。

import Loading from './loading'
import clickoutside from './clickoutside'
export default {
  install (Vue) {
    Vue.directive('loading', Loading),
    Vue.directive('click-outside', clickoutside)
  }
}

目錄結(jié)構(gòu)如圖