Nihilism Philisophy Major

    vue-loading-spin

    0.0.4 • Public • Published

    vue-loading-spin

    vue-loading-spin是基于VUE实现的插件,同时也支持作为组件来使用。默认加载的图标是一个svg旋转的菊花,它用的是vue的默认插槽,也可以根据实际的业务需要自定义其他图标。

    运行项目

    clone项目到本地,进入项目文件夹,安装依赖

    git clone https://github.com/yujinjin/vue-loading-spin.git
    cd loading
    npm install

    运行demo,会自动打开浏览器地址运行

    npm run demo

    编译打包项目

    npm run compile

    NPM

    npm install vue-loading-spin

    依赖

    • VUE

    使用

    作为插件

    import Vue from 'vue'
    import Loading from 'vue-loading-spin'
    import 'vue-loading-spin/dist/loading.css'
     
    // VUE use
    Vue.use(Loading);
    // or with options
    Vue.use(Loading, {
        isFixed: true, // 是否固定位置,默认为true
        isComponent: true, // 是否自动注册为全局组件,如果设置为false就不会注册成组件来使用
        isShowAnimation: true // 是否显示动画效果,默认为true
    });
     
    作为JS 对象
    ```javascript
    import Loading from 'vue-loading-spin'
    import 'vue-loading-spin/dist/loading.css'
    
    let loading = Loading.get({});
    loading.showLoading();
    loading.hideLoading();
    loading.showNetTimeout();
    

    配置选项

    名称 描述 默认值 可选项
    isFixed 是否生成绝对定位的元素,相对于浏览器窗口进行定位。 全局属性时是:true,全局组件时是:false Boolean
    isShowMask 是否显示遮罩背景 false Boolean
    autoRefresh 是否(点击)自动刷新 false Boolean
    isShowAnimation 是否显示动画(fadeIn)效果 false Boolean
    indicatorText 提示文案 加载中... String

    API

    1. 默认实例方法

    默认实例方法,有三个参数,可以一个都不传。默认三个参数:isShowMask = false, autoRefresh=false, indicatorText="加载中..."

    this.$showLoading();

    示例:

    image

    2. 带有白色背景

    有白色背景的遮罩层

    this.$showLoading(true);

    示例:

    image

    3. 加载超时

    网络请求超时,轻触自动刷新。默认实例方法有三个参数,也可以一个都不穿。默认三个参数:isShowMask = true, autoRefresh=true, indicatorText="网络请求超时啦,轻触自动刷新"

    this.$showNetTimeout();

    示例:

    image

    4. 自定义组件

    作为组件来使用,其配置见文档中的“配置选项”。

    <loading v-model="isShow" :options="{'indicatorText': '列表数据正在加载中,请稍后...'}"></loading>

    示例: image

    5. 隐藏

    隐藏加载的实例方法。

    this.$hideLoading()

    弹窗dom结构

    为了了解弹窗dom结构,这里把弹窗的源码贴出来,方便样式定义。

    <div class="loading" :class="{'mask': isShowMask, 'show': isShow, 'fadeIn': isShowAnimation, 'fixed': isFixed}" @touchmove.stop.prevent @click.stop.prevent="loadingFadeClick">
        <div class="loading-content">
            <slot>
            <span class="loading-icon progress">
                <svg viewBox="0 0 64 64">
                    <g stroke-width="4" stroke-linecap="round">
                        <line y1="17" y2="29" transform="translate(32,32) rotate(180)">
                            <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(210)">
                            <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(240)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(270)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(300)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(330)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(0)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(30)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(60)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(90)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(120)">
                            <animate attributeName="stroke-opacity" dur="750ms" values=".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85" repeatCount="indefinite"></animate>
                        </line>
                        <line y1="17" y2="29" transform="translate(32,32) rotate(150)">
                            <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate>
                        </line>
                    </g>
                </svg>
            </span>
            </slot>
            <div class="indicator-text" v-html="indicatorText" v-if="indicatorText"></div>
        </div>
    </div>

    最后

    • 如果喜欢一定要 star哈!!!(谢谢!!)

    • 如果有意见和问题 请在 lssues提出,我会在线解答。

    Keywords

    Install

    npm i vue-loading-spin

    DownloadsWeekly Downloads

    4

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    402 kB

    Total Files

    22

    Last publish

    Collaborators

    • yujinjin