v1.0.0-beta 源码正式开源

2026-06-12 13:19:31 +08:00 · 2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
@@ -0,0 +1,119 @@
+<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>