mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-11-01 02:38:43 +08:00 
			
		
		
		
	多模块重构 12:修改项目名字,按照新的规则
This commit is contained in:
		| @@ -0,0 +1,145 @@ | ||||
| <template> | ||||
| 	<view | ||||
| 	    class="u-loadmore" | ||||
| 	    :style="[ | ||||
| 			$u.addStyle(customStyle), | ||||
| 			{ | ||||
| 				backgroundColor: bgColor, | ||||
| 				marginBottom: $u.addUnit(marginBottom), | ||||
| 				marginTop: $u.addUnit(marginTop), | ||||
| 				height: $u.addUnit(height), | ||||
| 			}, | ||||
| 		]" | ||||
| 	> | ||||
| 		<u-line | ||||
| 		    length="140rpx" | ||||
| 		    color="#E6E8EB" | ||||
| 		    :hairline="false" | ||||
| 			v-if="line" | ||||
| 		></u-line> | ||||
| 		<!-- 加载中和没有更多的状态才显示两边的横线 --> | ||||
| 		<view | ||||
| 		    :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" | ||||
| 		    class="u-loadmore__content" | ||||
| 		> | ||||
| 			<view | ||||
| 			    class="u-loadmore__content__icon-wrap" | ||||
| 			    v-if="status === 'loading' && icon" | ||||
| 			> | ||||
| 				<u-loading-icon | ||||
| 				    :color="iconColor" | ||||
| 				    size="17" | ||||
| 				    :mode="loadingIcon" | ||||
| 				></u-loading-icon> | ||||
| 			</view> | ||||
| 			<!-- 如果没有更多的状态下,显示内容为dot(粗点),加载特定样式 --> | ||||
| 			<text | ||||
| 			    class="u-line-1" | ||||
| 			    :style="[loadTextStyle]" | ||||
| 			    :class="[(status == 'nomore' && isDot == true) ? 'u-loadmore__content__dot-text' : 'u-loadmore__content__text']" | ||||
| 			    @tap="loadMore" | ||||
| 			>{{ showText }}</text> | ||||
| 		</view> | ||||
| 		<u-line | ||||
| 		    length="140rpx" | ||||
| 		    color="#E6E8EB" | ||||
| 			:hairline="false" | ||||
| 			v-if="line" | ||||
| 		></u-line> | ||||
| 	</view> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| 	import props from './props.js'; | ||||
|  | ||||
| 	/** | ||||
| 	 * loadmore 加载更多 | ||||
| 	 * @description 此组件一般用于标识页面底部加载数据时的状态。 | ||||
| 	 * @tutorial https://www.uviewui.com/components/loadMore.html | ||||
| 	 * @property {String}			status			组件状态(默认 'loadmore' ) | ||||
| 	 * @property {String}			bgColor			组件背景颜色,在页面是非白色时会用到(默认 'transparent' ) | ||||
| 	 * @property {Boolean}			icon			加载中时是否显示图标(默认 true ) | ||||
| 	 * @property {String | Number}	fontSize		字体大小(默认 14 ) | ||||
| 	 * @property {String}			color			字体颜色(默认 '#606266' ) | ||||
| 	 * @property {String}			loadingIcon		加载前的提示语(默认 'circle' ) | ||||
| 	 * @property {String}			loadmoreText	加载前的提示语(默认 '加载更多' ) | ||||
| 	 * @property {String}			loadingText		加载中提示语(默认 '正在加载...' ) | ||||
| 	 * @property {String}			nomoreText		没有更多的提示语(默认 '没有更多了' ) | ||||
| 	 * @property {Boolean}			isDot			到上一个相邻元素的距离 (默认 false ) | ||||
| 	 * @property {String}			iconColor		加载中图标的颜色 (默认 '#b7b7b7' ) | ||||
| 	 * @property {String | Number}	marginTop		上边距 (默认 10 ) | ||||
| 	 * @property {String | Number}	marginBottom	下边距 (默认 10 ) | ||||
| 	 * @property {String | Number}	height			高度,单位px (默认 'auto' ) | ||||
| 	 * @property {Boolean}			line			是否显示左边分割线  (默认 false ) | ||||
| 	 * @event {Function} loadmore status为loadmore时,点击组件会发出此事件 | ||||
| 	 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" /> | ||||
| 	 */ | ||||
| 	export default { | ||||
| 		name: "u-loadmore", | ||||
| 		mixins: [uni.$u.mpMixin, uni.$u.mixin,props], | ||||
| 		data() { | ||||
| 			return { | ||||
| 				// 粗点 | ||||
| 				dotText: "●" | ||||
| 			} | ||||
| 		}, | ||||
| 		computed: { | ||||
| 			// 加载的文字显示的样式 | ||||
| 			loadTextStyle() { | ||||
| 				return { | ||||
| 					color: this.color, | ||||
| 					fontSize: uni.$u.addUnit(this.fontSize), | ||||
| 					lineHeight: uni.$u.addUnit(this.fontSize), | ||||
| 					backgroundColor: this.bgColor, | ||||
| 				} | ||||
| 			}, | ||||
| 			// 显示的提示文字 | ||||
| 			showText() { | ||||
| 				let text = ''; | ||||
| 				if (this.status == 'loadmore') text = this.loadmoreText | ||||
| 				else if (this.status == 'loading') text = this.loadingText | ||||
| 				else if (this.status == 'nomore' && this.isDot) text = this.dotText; | ||||
| 				else text = this.nomoreText; | ||||
| 				return text; | ||||
| 			} | ||||
| 		}, | ||||
| 		methods: { | ||||
| 			loadMore() { | ||||
| 				// 只有在“加载更多”的状态下才发送点击事件,内容不满一屏时无法触发底部上拉事件,所以需要点击来触发 | ||||
| 				if (this.status == 'loadmore') this.$emit('loadmore'); | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| 	@import "../../libs/css/components.scss"; | ||||
|  | ||||
| 	.u-loadmore { | ||||
| 		@include flex(row); | ||||
| 		align-items: center; | ||||
| 		justify-content: center; | ||||
| 		flex: 1; | ||||
|  | ||||
| 		&__content { | ||||
| 			margin: 0 15px; | ||||
| 			@include flex(row); | ||||
| 			align-items: center; | ||||
| 			justify-content: center; | ||||
|  | ||||
| 			&__icon-wrap { | ||||
| 				margin-right: 8px; | ||||
| 			} | ||||
|  | ||||
| 			&__text { | ||||
| 				font-size: 14px; | ||||
| 				color: $u-content-color; | ||||
| 			} | ||||
|  | ||||
| 			&__dot-text { | ||||
| 				font-size: 15px; | ||||
| 				color: $u-tips-color; | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user
	 YunaiV
					YunaiV