@gmcb/uv-ui 0.2.26

package/components/uv-drop-down-item/uv-drop-down-item.vue

@@ -0,0 +1,169 @@
+<template>
+	<view class="uv-drop-down-item" @click="clickHandler">
+		<uv-text :text="label" :size="getTextStyle.size" :color="getTextStyle.color" lines="1" :custom-style="{marginRight: '10rpx',maxWidth:'200rpx'}"></uv-text>
+		<uv-icon :name="getDownIcon.name" :size="getDownIcon.size" :color="getDownIcon.color" v-if="[1,'1'].indexOf(type)==-1"></uv-icon>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js';
+	import mixin from '../../libs/mixin/mixin.js';
+	/**
+	 * DropDown 下拉框
+	 * @description 下拉筛选
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
+	 * @property {String | Number} name 字段标识
+	 * @property {String | Number} type 类型 1 没有筛选项，直接进行选中和不选中  2 有多个选项
+	 * @property {String | Number} label 筛选项的文本
+	 * @property {Boolean} isDrop 该项是否打开
+	 */
+	export default {
+		name: 'uv-drop-down-item',
+		mixins: [mpMixin, mixin],
+		emits: ['click'],
+		props: {
+			name: {
+				type: [String, Number],
+				default: ''
+			},
+			// 类型 1 没有筛选项，直接进行选中和不选中  2 有多个选项
+			type: {
+				type: [String, Number],
+				default: '2'
+			},
+			// 筛选的文本
+			label: {
+				type: [String],
+				default: ''
+			},
+			// 筛选值
+			value: {
+				type: [String, Number, null],
+				default: ''
+			},
+			// 是否下拉菜单打开
+			isDrop: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				parentData: {
+					defaultValue: [0, '0', 'all'],
+					textSize: '30rpx',
+					textColor: '#333',
+					textActiveSize: '30rpx',
+					textActiveColor: '#3c9cff',
+					extraIcon: {},
+					extraActiveIcon: {},
+					sign: '',
+					clickHandler: Function
+				},
+				active: false,
+				isDroped: false,
+				elId: ''
+			}
+		},
+		watch: {
+			isDrop: {
+				handler(newVal) {
+					this.isDroped = newVal;
+				},
+				immediate: true
+			},
+			value: {
+				handler(newVal) {
+					this.$nextTick(()=>{
+						this.active = this.parentData.defaultValue.indexOf(newVal) == -1;
+					})
+				},
+				immediate: true
+			}
+		},
+		computed: {
+			getDownIcon() {
+				const style = {
+					size: '30rpx',
+					color: '#333',
+					...this.parentData.extraIcon
+				}
+				if (this.active || this.isDroped) {
+					style.color = this.parentData.extraActiveIcon?.color ? this.parentData.extraActiveIcon?.color : '#3c9cff';
+					style.size = this.parentData.extraActiveIcon?.size ? this.parentData.extraActiveIcon?.size : '30rpx';
+				}
+				if (this.isDroped) {
+					style.name = this.parentData.extraActiveIcon?.name;
+				}
+				return style;
+			},
+			getTextStyle() {
+				const style = {
+					size: this.parentData.textSize,
+					color: this.parentData.textColor
+				};
+				if (this.active || this.isDroped) {
+					style.size = this.parentData.textActiveSize;
+					style.color = this.parentData.textActiveColor;
+				}
+				return style;
+			}
+		},
+		created() {
+			this.init();
+		},
+		methods: {
+			init() {
+				this.elId = this.$uv.guid();
+				this.getParentData('uv-drop-down');
+				if (!this.parent) {
+					this.$uv.error('uv-drop-down必须搭配uv-drop-down-item组件使用');
+				}
+				uni.$on('HANDLE_DROPDOWN_ONE', id => {
+					if (this.isDroped && this.elId != id) {
+						this.isDroped = false;
+					}
+				})
+				uni.$on(`${this.parentData.sign}_CLOSEPOPUP`, async () => {
+					if (this.isDroped) {
+						this.isDroped = false;
+					}
+				})
+			},
+			async clickHandler() {
+				let data = {};
+				uni.$emit('HANDLE_DROPDOWN_ONE', this.elId);
+				switch (+this.type) {
+					case 1:
+						this.active = !this.active;
+						data = {
+							name: this.name,
+							active: this.active,
+							type: this.type
+						};
+						break;
+					case 2:
+						this.isDroped = !this.isDroped;
+						data = {
+							name: this.name,
+							active: this.isDroped,
+							type: this.type
+						};
+						break;
+				}
+				this.parentData.clickHandler(data);
+				this.$emit('click', data);
+				uni.$emit(`${this.parentData.sign}_CLICKMENU`, {
+					show: +this.type > 1 && this.isDroped
+				});
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	@import '../../libs/css/components.scss';
+	.uv-drop-down-item {
+		@include flex;
+		align-items: center;
+		padding: 20rpx;
+	}
+</style>

package/components/uv-drop-down-popup/uv-drop-down-popup.vue

@@ -0,0 +1,242 @@
+<template>
+	<view class="uv-drop-down-popup">
+		<uv-transition :show="show" mode="fade" :duration="300" :custom-style="overlayStyle" @click="clickOverlay">
+			<view class="uv-dp__container" ref="uvDPContainer" :style="{height: `${height}px`}" @click.stop="blockClick">
+				<view class="uv-dp__container__list" ref="uvDPList">
+					<slot>
+						<view class="uv-dp__container__list--item" v-for="(item,index) in list" :key="index" @click="clickHandler(item,index)" :style="[itemCustomStyle(index)]">
+							<uv-text :text="item[keyName]" :size="getTextSize(index)" :color="getTextColor(index)"></uv-text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</uv-transition>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js';
+	import mixin from '../../libs/mixin/mixin.js';
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation');
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	/**
+	 * DropDownPopup 下拉框
+	 * @description 下拉筛选框
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
+	 * @property {String | Number} name 字段标识
+	 * @property {String | Number} zIndex 弹出层的层级
+	 * @property {String | Number} opacity 遮罩层的透明度
+	 * @property {Boolean} clickOverlayOnClose 是否允许点击遮罩层关闭弹窗
+	 * @property {Object} currentDropItem 当前下拉筛选菜单对象
+	 * @property {String} keyName 指定从当前下拉筛选菜单对象元素中读取哪个属性作为文本展示
+	 */
+	export default {
+		name: 'uv-drop-down-popup',
+		mixins: [mpMixin, mixin],
+		props: {
+			sign: {
+				type: [String, Number],
+				default: 'UVDROPDOWN'
+			},
+			zIndex: {
+				type: [Number, String],
+				default: 999
+			},
+			opacity: {
+				type: [Number, String],
+				default: 0.5
+			},
+			clickOverlayOnClose: {
+				type: Boolean,
+				default: true
+			},
+			// 当前下拉选项对象
+			currentDropItem: {
+				type: Object,
+				default () {
+					return {
+						activeIndex: 0,
+						child: []
+					}
+				}
+			},
+			keyName: {
+				type: String,
+				default: 'label'
+			}
+		},
+		data() {
+			return {
+				show: false,
+				rect: {},
+				height: 0
+			}
+		},
+		computed: {
+			overlayStyle() {
+				let { height = 0, top = 0 } = this.rect;
+				// #ifdef H5
+				top += this.$uv.sys().windowTop;
+				// #endif
+				const style = {
+					position: 'fixed',
+					top: `${top+height}px`,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			},
+			list() {
+				try {
+					return Array.isArray(this.currentDropItem.child) ? this.currentDropItem.child : [];
+				} catch (e) {
+					return [];
+				}
+			},
+			getTextColor(index) {
+				return index => {
+					const active = this.currentDropItem.activeIndex == index;
+					const color = this.currentDropItem.color;
+					const activeColor = this.currentDropItem.activeColor;
+					if (active) {
+						return activeColor ? activeColor : '#3c9cff';
+					}
+					return color ? color : '#333';
+				}
+			},
+			getTextSize(index) {
+				return index => {
+					const active = this.currentDropItem.activeIndex == index;
+					const size = this.currentDropItem.size;
+					const activeSize = this.currentDropItem.activeSize;
+					if (active) {
+						return activeSize ? activeSize : '30rpx';
+					}
+					return size ? size : '30rpx';
+				}
+			},
+			itemCustomStyle() {
+				return index => {
+					const active = this.currentDropItem.activeIndex == index;
+					const style = {};
+					if (active && this.currentDropItem.itemActiveCustomStyle) {
+						return this.$uv.deepMerge(style, this.$uv.addStyle(this.currentDropItem.itemActiveCustomStyle));
+					}
+					if (this.currentDropItem.itemCustomStyle) {
+						return this.$uv.deepMerge(style, this.$uv.addStyle(this.currentDropItem.itemCustomStyle))
+					}
+					return style;
+				}
+			}
+		},
+		created() {
+			this.init();
+		},
+		methods: {
+			blockClick() {},
+			clickHandler(item, index) {
+				this.currentDropItem.activeIndex = index;
+				this.$emit('clickItem', item);
+				this.close();
+			},
+			init() {
+				uni.$off(`${this.sign}_GETRECT`);
+				uni.$on(`${this.sign}_GETRECT`, rect => {
+					this.rect = rect;
+				})
+				uni.$off(`${this.sign}_CLICKMENU`);
+				uni.$on(`${this.sign}_CLICKMENU`, async res => {
+					if (res.show) {
+						this.open();
+					} else {
+						this.close();
+					}
+				})
+			},
+			open() {
+				this.show = true;
+				this.$nextTick(async () => {
+					// #ifndef H5 || MP-WEIXIN
+					await this.$uv.sleep(60);
+					// #endif
+					const res = await this.queryRect();
+					// #ifndef APP-NVUE
+					this.height = res.height;
+					// #endif
+					// #ifdef APP-NVUE
+					this.animation(res.height);
+					// #endif
+					this.$emit('popupChange', { show: true });
+				})
+			},
+			close() {
+				if(!this.show) return;
+				this.height = 0;
+				// #ifndef APP-NVUE
+				this.height = 0;
+				// #endif
+				// #ifdef APP-NVUE
+				this.animation(0);
+				// #endif
+				this.show = false;
+				uni.$emit(`${this.sign}_CLOSEPOPUP`);
+				this.$emit('popupChange', { show: false });
+			},
+			clickOverlay() {
+				if (this.clickOverlayOnClose) {
+					this.close();
+				}
+			},
+			// 查询内容高度
+			queryRect() {
+				// #ifndef APP-NVUE
+				// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uvGetRect(`.uv-dp__container__list`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs.uvDPList, res => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			// nvue下设置高度
+			animation(height, duration = 200) {
+				// #ifdef APP-NVUE
+				const ref = this.$refs['uvDPContainer'];
+				animation.transition(ref, {
+					styles: {
+						height: `${height}px`
+					},
+					duration
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	.uv-dp__container {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		transition: all .15s;
+		/* #endif */
+		background-color: #fff;
+	}
+	.uv-dp__container__list {
+		&--item {
+			padding: 20rpx 60rpx;
+		}
+	}
+</style>

package/components/uv-empty/props.js

@@ -0,0 +1,60 @@
+export default {
+	props: {
+		// 内置图标名称，或图片路径，建议绝对路径
+		icon: {
+			type: String,
+			default: ''
+		},
+		// 提示文字
+		text: {
+			type: String,
+			default: ''
+		},
+		// 文字颜色
+		textColor: {
+			type: String,
+			default: '#c0c4cc'
+		},
+		// 文字大小
+		textSize: {
+			type: [String, Number],
+			default: 14
+		},
+		// 图标的颜色
+		iconColor: {
+			type: String,
+			default: '#c0c4cc'
+		},
+		// 图标的大小
+		iconSize: {
+			type: [String, Number],
+			default: 90
+		},
+		// 选择预置的图标类型
+		mode: {
+			type: String,
+			default: 'data'
+		},
+		//  图标宽度，单位px
+		width: {
+			type: [String, Number],
+			default: 160
+		},
+		// 图标高度，单位px
+		height: {
+			type: [String, Number],
+			default: 160
+		},
+		// 是否显示组件
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 组件距离上一个元素之间的距离，默认px单位
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		...uni.$uv?.props?.empty
+	}
+}

package/components/uv-empty/uv-empty.vue

@@ -0,0 +1,126 @@
+<template>
+	<view
+	  class="uv-empty"
+	  :style="[emptyStyle]"
+	  v-if="show"
+	>
+		<uv-icon
+		  v-if="!isImg"
+		  :name="mode === 'message' ? 'chat' : `empty-${mode}`"
+		  :size="iconSize"
+		  :color="iconColor"
+		  margin-top="14"
+		></uv-icon>
+		<image
+		  v-else
+		  :style="{
+				width: $uv.addUnit(width),
+				height: $uv.addUnit(height)
+			}"
+		  :src="icon"
+		  mode="widthFix"
+		></image>
+		<text
+		  class="uv-empty__text"
+		  :style="[textStyle]"
+		>{{text ? text : icons[mode]}}</text>
+		<view class="uv-empty__wrap">
+			<slot />
+		</view>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * empty 内容为空
+	 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
+	 * @tutorial https://www.uvui.cn/components/empty.html
+	 * @property {String}			icon		内置图标名称，或图片路径，建议绝对路径
+	 * @property {String}			text		提示文字
+	 * @property {String}			textColor	文字颜色 (默认 '#c0c4cc' )
+	 * @property {String | Number}	textSize	文字大小 （默认 14 ）
+	 * @property {String}			iconColor	图标的颜色 （默认 '#c0c4cc' ）
+	 * @property {String | Number}	iconSize	图标的大小 （默认 90 ）
+	 * @property {String}			mode		选择预置的图标类型 （默认 'data' ）
+	 * @property {String | Number}	width		图标宽度，单位px （默认 160 ）
+	 * @property {String | Number}	height		图标高度，单位px （默认 160 ）
+	 * @property {Boolean}			show		是否显示组件 （默认 true ）
+	 * @property {String | Number}	marginTop	组件距离上一个元素之间的距离，默认px单位 （默认 0 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 * @example <uv-empty text="所谓伊人，在水一方" mode="list"></uv-empty>
+	 */
+	export default {
+		name: "uv-empty",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				icons: {
+					car: '购物车为空',
+					page: '页面不存在',
+					search: '没有搜索结果',
+					address: '没有收货地址',
+					'wifi-off': '没有WiFi',
+					order: '订单为空',
+					coupon: '没有优惠券',
+					favor: '暂无收藏',
+					permission: '无权限',
+					history: '无历史记录',
+					news: '无新闻列表',
+					message: '消息列表为空',
+					list: '列表为空',
+					data: '数据为空',
+					comment: '暂无评论',
+				}
+			}
+		},
+		computed: {
+			// 组件样式
+			emptyStyle() {
+				const style = {}
+				style.marginTop = this.$uv.addUnit(this.marginTop)
+				// 合并customStyle样式，此参数通过mixin中的props传递
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			},
+			// 文本样式
+			textStyle() {
+				const style = {}
+				style.color = this.textColor
+				style.fontSize = this.$uv.addUnit(this.textSize)
+				return style
+			},
+			// 判断icon是否图片路径
+			isImg() {
+				const isBase64 = this.icon.indexOf('data:') > -1 && this.icon.indexOf('base64') > -1;
+				return this.icon.indexOf('/') !== -1 || isBase64;
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	$uv-empty-text-margin-top: 20rpx !default;
+	$uv-empty-slot-margin-top: 20rpx !default;
+	.uv-empty {
+		@include flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		&__text {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			margin-top: $uv-empty-text-margin-top;
+		}
+	}
+	.uv-slot-wrap {
+		@include flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: $uv-empty-slot-margin-top;
+	}
+</style>

package/components/uv-form/props.js

@@ -0,0 +1,46 @@
+export default {
+	props: {
+		// 当前form的需要验证字段的集合
+		model: {
+			type: Object,
+			default: () => ({})
+		},
+		// 验证规则
+		rules: {
+			type: [Object, Function, Array],
+			default: () => ({})
+		},
+		// 有错误时的提示方式，message-提示信息，toast-进行toast提示
+		// border-bottom-下边框呈现红色，none-无提示
+		errorType: {
+			type: String,
+			default: 'message'
+		},
+		// 是否显示表单域的下划线边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// label的位置，left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: 'left'
+		},
+		// label的宽度，单位px
+		labelWidth: {
+			type: [String, Number],
+			default: 45
+		},
+		// lable字体的对齐方式
+		labelAlign: {
+			type: String,
+			default: 'left'
+		},
+		// lable的样式，对象形式
+		labelStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		...uni.$uv?.props?.form
+	}
+}