vue-slim-loading

💇 开箱即用的 vue 加载组件,改造于 ElementUI/Loading

Usage no npm install needed!

<script type="module">
  import vueSlimLoading from 'https://cdn.skypack.dev/vue-slim-loading';
</script>

README

vue-slim-loading

✨ 特性

  • 开箱即用/极简使用
  • 体积:6k

🐠 示例&文档

Demo

Demo 源码

🚀 快速开始

  1. 安装
yarn add vue-slim-loading # 或 npm i -S vue-slim-loading
  1. 引入
// main.js
import Loading from 'vue-slim-loading'
Vue.use(Loading)
  1. 使用,请参考Demo 源码
<!-- 任意元素中使用指令 v-loading -->
<section v-loading="true">瀑布的水逆流而上</section>

🔌 API

Directives

指令 说明 类型 默认值
v-loading 是否显示 Boolean false

Options

选项 说明 类型 默认值
text 文本显示 String null
color 颜色 String '#409EFF'
maskClass 遮罩样式类 Array null
loadingClass 加载样式类 Array null
textClass 文本样式类 Array null
// main.js
import Loading from 'vue-slim-loading'
Vue.use(Loading, { text: '加载中', color: 'green' })

Attributes

Attribute 将会覆盖 Option

属性 说明 类型 默认值
loading-text 文本显示 String null
loading-color 颜色 String '#409EFF'
<section v-loading="true" loading-text="加载中">瀑布的水逆流而上</section>

Slots

名称 说明
default loading 内容


😉😘 如果它对你有所帮助,可以点一下 ⭐️Star ~

License

MIT

Copyright (c) 2018-present, momoko