1.0.7 • Published 5 years ago
e6loading v1.0.7
此组件为 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>