komomoo/vue-slim-loading

💇‍♀️ 简洁易用的 vue 加载组件，改造于 ElementUI/Loading

vue-slim-loading

✨ 特性

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

🐠 示例&文档

Demo

Demo 源码

🚀 快速开始

1. 安装

yarn add vue-slim-loading # 或 npm i -S vue-slim-loading

2. 引入

// main.js
import Loading from 'vue-slim-loading'
Vue.use(Loading)

3. 使用，请参考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, komo