lc-loading

加载提示组件,让用户知道页面正在加载,在某些特定场景下,提供有意义的文案,帮助用户明白哪个任务正在进行中

效果

使用方法


<template>
<div class="wxc-demo">
<scroller class="scroller">
<title title="lc-loading"></title>
<category title="局部Loading配置"></category>
<div class="demo">
<lc-part-loading :show="partShow"
:width="width"
:height="height"></lc-part-loading>
</div>
<lc-cell :has-top-border="true"
:auto-accessible="false"
label="开启局部Loading">
<switch :checked="partShow"
slot="value"
@change="partShow= !partShow"></switch>
</lc-cell>
<lc-cell :has-top-border="false"
label="长度">
<input class="input"
slot="value"
placeholder="局部Loading长度,默认36"
v-model="width"
@input="width=$event.value"/>
</lc-cell>
<lc-cell :has-top-border="false"
label="高度">
<input class="input"
slot="value"
placeholder="局部Loading高度,默认36"
v-model="height"
@input="height=$event.value"/>
</lc-cell>
<div class="blank"></div>
<category title="页面Loading配置"></category>
<lc-cell :has-top-border="false"
:auto-accessible="false"
label="开启Loading">
<switch :checked="isShow"
slot="value"
@change="isShow= !isShow"></switch>
</lc-cell>
<lc-cell :has-top-border="false"
:auto-accessible="false"
label="自定义Loading">
<switch :checked="type === 'trip'"
slot="value"
@change="type=(type === 'trip'? 'default' : 'trip')"></switch>
</lc-cell>
<lc-cell :has-top-border="false"
:has-arrow="true"
@LcCellClicked="openIntervalLoading"
label="延迟加载"></lc-cell>

<lc-cell :has-top-border="false"
label="配置文案">
<input class="input"
slot="value"
placeholder="配置文案,默认无"
v-model="loadingText"
@input="loadingText=$event.value"/>
</lc-cell>
</scroller>
<lc-loading :show="isShow" :needMask="false" @LcLoadingMaskClicked="LcLoadingMaskClicked"
:type="type" :mask-style="maskStyle"
:loading-text="loadingText"
:interval="interval"></lc-loading>
</div>
</template>

<script>
import Title from 'lighting-ui/packages/_mods/title.vue';
import Category from 'lighting-ui/packages/_mods/category.vue';
import LcCell from 'lighting-ui/packages/lc-cell'
import LcLoading from 'lighting-ui/packages/lc-loading'
import LcPartLoading from 'lighting-ui/packages/lc-part-loading'

export default {
components: { Title, Category, LcLoading, LcCell, LcPartLoading },
data () {
return {
width: '36',
height: '36',
partShow: true,
isShow: true,
interval: 0,
type: 'default',
loadingText: '',
maskStyle:{ backgroundColor:'rgba(0, 0, 0, 0.3)'}
};
},
methods: {
LcLoadingMaskClicked(){
console.log(1)
},
openLoading () {
this.isShow = !this.isShow;
this.interval = 0;
},
openTripLoading () {
const { type } = this;
this.type = (type === 'trip') ? 'default' : 'trip';
},
openIntervalLoading () {
this.isShow = false;
setTimeout(() => {
// 正常使用时候直接设置即可,不需setTimeout
this.interval = 1000;
this.isShow = true;
}, 10)
},
openTextLoading () {
this.interval = 0;
this.loadingText = this.loadingText ? '' : '正在加载中';
}
}
};
</script>

<style scoped>

.wxc-demo {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #fff;
}

.scroller {
flex: 1;
}

.input {
width: 500px;
text-align: right;
font-size: 28px;
}

.demo {
padding-top: 20px;
padding-bottom: 20px;
align-items: center;
height: 80px;
justify-content: center;
}

.blank {
height: 80px;
}
</style>

可配置参数

页面Loading

Prop Type Required Default Description
show Bool Y false 是否显示
loading-text String N - 配置文案的显示
interval Number N 0 延迟毫秒数显示,用于体验优化
type String N default 图案类别default/fliggy
need-mask Bool N false 加载时候是否需要一个蒙层用于防止误点
mask-style Object N {} 蒙层样式覆盖

事件回调

@LcLoadingMaskClicked="maskClicked"

局部Loading

Prop Type Required Default Description
show Bool Y false 是否显示
width Number N 36 局部加载的宽度
height Number N 36 局部加载的高度