介绍

加载指令，绑定在需要加载动画的dom上，可传参控制加载动画的显隐，也可以设置loading-text、loading-icon、loading-run、loading-custom-style属性。

提示：本指令目前只适用于vue2，后续更新多框架版本。

安装

npm i tiger-loading

使用

全局引入

//在mian.js文件中添加以下语句

import loading from 'tiger-loading'
Vue.use(loading) //或者loading(Vue)

模板使用

<template>
  <div>
      <div class="box" v-loading="loading"></div>
      <button @click="loadingSwitch">控制加载组件显隐的按钮</button>
  </div>
</template>
<script>
export default {
  data(){
    return{
      loading:true
    }
  },
  methods:{
    loadingSwitch(){
      this.loading=!this.loading
    }
  }
}
</script>
<style scoped>
.box{
  width:500px;
  height:500px;
}
</style>

loading-text 文字内容

string类型

<template>
  <div>
      <div class="box" v-loading="loading" loading-text="拼命加载中"></div>
      <button @click="loadingSwitch">控制加载的显隐按钮</button>
  </div>
</template>

loading-icon 加载图标

string类型，支持ElementUI/Font class

<template>
  <div>
      <div class="box" v-loading="loading" loading-icon="el-icon-loading" ></div>
     <!-- <div class="box" v-loading="loading" loading-icon="iconfont icon-tiger-loading1" ></div> -->
      <button @click="loadingSwitch">控制加载的显隐按钮</button>
  </div>
</template>

loading-run 是否开启图标动画

boolean类型，开启后图标将无限旋转

<template>
  <div>
      <div class="box" v-loading="loading" :loading-run="true" ></div>
      <button @click="loadingSwitch">控制加载的显隐按钮</button>
  </div>
</template>

loading-custom-style 自定义样式

string类型

<template>
  <div>
      <div class="box" v-loading="loading" :loading-custom-style="JSON.stringify(customStyle)" ></div>
      <button @click="loadingSwitch">控制加载的显隐按钮</button>
  </div>
</template>
<script>
export default {
  data(){
    return{
      loading:true,
      customStyle: { backgroundColor: 'rgba(0,0,0,0.6)',color:'white' }
    }
  },
  methods:{
    loadingSwitch(){
      this.loading=!this.loading
    }
  }
}
</script>