wj-loading-vue

当前为2.X文档。（1.X文档）

基于wj-loading构建的vue指令，兼容vue2和vue3，支持自定义指令名及多种动画。

• 演示
• wj-loading-vue
• wj-loading

安装

• npm install wj-loading-vue
• yarn add wj-loading-vue

引入

vue3

import {createApp} from 'vue'
import App from './App.vue'
// 引入样式
import 'wj-loading-vue/dist/wj-loading-vue.css'
import Loading from 'wj-loading-vue'

createApp(App).use(Loading).mount('#app')

vue2

import Vue from 'vue'
import App from './App.vue'
// 引入样式
import 'wj-loading-vue/dist/wj-loading-vue.css'
import Loading from 'wj-loading-vue'

Vue.use(Loading)

new Vue({
  render: h => h(App),
}).$mount('#app')

自定义指令名

import {createApp} from 'vue'
// 引入样式
import 'wj-loading-vue/dist/wj-loading-vue.css'
import Loading from 'wj-loading-vue'

// 默认指令名为loading
createApp(App).use(Loading, {name: 'wj-loading'})

指令名冲突

若引入了element ui等组件可能会导致相同指令名冲突，解决办法：

• 后引入的指令会覆盖先引入的指令
• 自定义指令名

示例

示例一

<template>
  <div style="width: 500px; height: 500px;" v-loading:[arg]="loading"></div>
</template>

<script setup>

  import {ref} from 'vue';

  const arg = ref('BounceLoading')
  const loading = ref(true)

  setTimeout(() => {
    loading.value = false
  }, 2000)

</script>

arg支持wj-loading中定义的动画类型，支持动态修改动画类型，缺省值为BounceLoading，支持驼峰，v-loading:CubesLoading和v-loading:cubesLoading 效果相同。

当绑定的值为布尔类型时，会使用对应动画类型的默认参数，若想自定义参数可以参考示例二和示例三，动画类型和对应支持的参数请查看wj-loading。

示例二

<template>
  <div style="width: 500px; height: 500px;" v-loading:CmSpinnerLoading="loading"></div>
</template>

<script setup>
  import {ref} from "vue";

  const loading = ref({
    enable: true, // 动画开关
    option: { // 对应动画参数请查看wj-loading文档
      background: 'rgba(0,0,0,.5)',
    }
  })

  setTimeout(() => {
    // loading.value = {...loading.value, enable: false}
    loading.value = {
      enable: false, // 动画开关
      option: { // 对应动画参数请查看wj-loading文档
        background: 'rgba(255,255,255,.5)',
      }
    }
  }, 2000)

</script>

当前这种使用方式，参数更新时需对整个对象重新赋值，否则指令无法监听到改变。

示例三

<template>
  <div style="width: 500px; height: 500px" v-loading:CmSpinnerLoading="{
    enable: loading,
    option: {
      background: background,
      zIndex: 666
    }
  }"></div>
</template>

<script setup>
  import {ref} from "vue";

  const loading = ref(true)
  const background = ref('rgba(0,0,0,0.5)')

  setTimeout(() => {
    background.value = 'rgba(255,255,255,0.5)'
  }, 2000)

  setTimeout(() => {
    loading.value = false
  }, 5000)

</script>

示例四

import 'wj-loading-vue/dist/wj-loading-vue.css'
import {Loading} from 'wj-loading-vue'

new Loading.TextLoading({
  element: document.body,
  background: 'rgba(255, 255, 255, .8)',
  immediate: true
})

支持wj-loading原生使用方法。