|
|
<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>
|