wardrobe/tm-vuetify/components/tm-loadding/tm-loadding.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>