1. vue-slim-loading
💇 开箱即用的 vue 加载组件,改造于 ElementUI/Loading
vue-slim-loading
Package: vue-slim-loading
Created by: wannaxiao
Last modified: Mon, 23 May 2022 18:53:38 GMT
Version: 1.1.1
License: MIT
Downloads: 9
Repository: https://github.com/wannaxiao/vue-slim-loading

Install

npm install vue-slim-loading
yarn add vue-slim-loading

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin