此组件为 loading 组件，基于vue封装的右键菜单组件，目前已上传npm和git，可直接安装/下载使用。 如有其他需求，请联系作者进行扩展和修改。

1.安装

npm i e6loading

2.用法一：组件 （用在全屏loading 的情况）

main.js 中进行导入和使用：

import E6Loading from 'e6loading'  
Vue.use(E6Loading);  

局部引用：

import E6Loading from 'e6loading'  

<script>
export default {
    components:{
        E6Loading
    }
}
</script>

对应页面中，直接使用，方式如下：

<e6-loading
     type="rect-1"
     mask="light"
     fill="#333"
     text="123"
     timeout="3"
     ref="loading">
</e6-loading>

    this.$refs.loading.show()

    this.$refs.loading.hide()

|参数|类型|是否必须|默认值|说明| |:---|:---|:---|:---|:---| |type|String|否|'rect-1'|loading 类型【'circle','p-circle','rect-1','rect-2','3D'】| |mask|String|否|'light'|背景遮罩类型【'light','dark'】| |fill|String|否|'#35AAE6'|图标颜色| |size|Number|否|35|icon支持的大小| |text|String|否|''|文字| |timeout|Number|否|0|自动关闭延时，单位秒| |ref|String|否|无|loading对象|

3.用法二：指令 （用在局部loading的情况）

main.js 中：

import 'e6loading/directive' ;

使用时，在对应的模板标签中：

<div v-eloading="loading"></div>

<script>
    export default {
        data(){
            loading:{
                show:false,     // 是否显示loading层， Boolean ，默认 false ,初始化给 false，当需要显示的时候，改变为 true即可，需要隐藏时，改变为false   
                mask:'dark',    // 遮罩层样式，目前仅支持 ‘light’ 和 ‘dark’ 两种配色，默认 dark
                fill:'#35AAE6', // icon图标的填充色，可自定义，默认 ‘#35AAE6’
                type:'rect-1',  // icon支持的类型，‘circle’、‘rect-1’、‘rect-2’、‘3D’, ‘p-circle’
                size:12,        // icon支持的大小，数值类型，默认 35，在需要遮罩的面积过小的时候，无法自使用，需手动传入size，‘p-circle’ 下 size无效
                timeout:3,      // 默认关闭延时 ，单位 秒
                text:'加载中'    // loading过程中显示的文字，默认 ‘’，如果loading区域太小，请不要传入text
            }
        }
    }
</script>