实践:自定义指令 - 局部loading

mt-loading

自定义指令 - 局部loading


npm仓库地址 : 自定义指令 - 局部loading

咋装下呢?

yarn add mt-loading 或者使用 npm i mt-loading

看下到底是个啥

mt-loading.gif


用起来!兄弟萌!

使用咋装下呢?中的命令将该插件安装到你的项目之后,就可以在main.js中使用import引入,然后使用Vue.use(XXX)使用即可。

import mtLoading from 'mt-loading'

Vue.use(mtLoading)

// 作为指令使用
<div v-mt-loading='true'></div>


参数都有啥

有三个状态
1. 默认(竖条纹loading)
<div v-mt-loading='true'></div>

2. 圆形loading
<div v-mt-loading.bounce='true'></div>

3. 竖条纹loading
<div v-mt-loading.move='true'></div>


修改默认颜色

例: 修改背景色
.mt-loading-bg-color{
  background-color: rgba(100,100,100,0.3) !important;
}

例: 修改icon颜色
.mt-loading-icon-color{
  background-color: red !important;
}