120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<template>
|
||
<view @click="$emit('click',$event)" class="tm-loadding flex-center vertical-align-middle">
|
||
<!-- 加载中。 -->
|
||
<view style="line-height: 0;" v-if="model=='load'" class="tm-loadding-load d-inline-block vertical-align-middle">
|
||
<tm-icons dense :name="icon?icon:'icon-loading'" :color="color?color:'grey'"></tm-icons>
|
||
</view>
|
||
<view style="line-height: 0;" v-if="model=='fail'" class="tm-loadding-error d-inline-block vertical-align-middle">
|
||
<tm-icons dense :name="icon?icon:'icon-wind-cry'" :color="color?color:'red'"></tm-icons>
|
||
</view>
|
||
<view style="line-height: 0;" v-if="model=='success'" class="tm-loadding-error d-inline-block vertical-align-middle">
|
||
<tm-icons dense :name="icon?icon:'icon-wind-smile'" :color="color?color:'green'"></tm-icons>
|
||
</view>
|
||
<text class="text-size-s pl-12" :class="['text-'+(color?color:text[model].color)]">{{label?label:text[model].text}}</text>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 加载状态
|
||
* @description 为了方便管理数据加载提示。在全为true时，fail最先展示 ，其次success,其次load.
|
||
* @property {Boolean} load = [true|false] 默认true,优先级最低。
|
||
* @property {Boolean} success = [true|false] 默认false,优先级高于load。
|
||
* @property {Boolean} fail = [true|false] 默认false,优先级高于success。
|
||
* @property {String} label = [] 默认 '',自定义文本
|
||
* @property {String} icon = [] 默认 '',自定义图标
|
||
* @property {String} color = [] 默认 '',自定义主题
|
||
* @property {Function} click 点击事件
|
||
* @example <tm-loadding ></tm-loadding>
|
||
*/
|
||
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
||
export default {
|
||
components:{tmIcons},
|
||
name:"tm-loadding",
|
||
props:{
|
||
|
||
// 优先级最低。
|
||
load:{
|
||
type:Boolean,
|
||
default:true
|
||
},
|
||
//优先级最高。
|
||
fail:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
//优先级高于load
|
||
success:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
label:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
icon:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
color:{
|
||
type:String,
|
||
default:''
|
||
}
|
||
},
|
||
computed:{
|
||
model:function(){
|
||
|
||
if(this.fail) return 'fail';
|
||
if(this.success) return 'success';
|
||
if(this.load) return 'load';
|
||
return 'load';
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
text:{
|
||
load:{
|
||
text:"加载中...",
|
||
color:"grey"
|
||
},
|
||
fail:{
|
||
text:"加载失败...",
|
||
color:"red"
|
||
},
|
||
success:{
|
||
text:"加载成功...",
|
||
color:"green"
|
||
},
|
||
loadmore:{
|
||
text:"上拉加载更多",
|
||
color:"grey"
|
||
},
|
||
nomore:{
|
||
text:"没有更多了哦",
|
||
color:"grey"
|
||
}
|
||
}
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tm-loadding{
|
||
.tm-loadding-load{
|
||
animation: xhRote 0.8s infinite linear;
|
||
}
|
||
}
|
||
|
||
@keyframes xhRote{
|
||
0%{
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100%{
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|