@gmcb/uv-ui 0.2.26

package/components/uv-datetime-picker/uv-datetime-picker.vue

@@ -0,0 +1,355 @@
+<template>
+	<uv-picker
+		ref="picker"
+		:closeOnClickOverlay="closeOnClickOverlay"
+		:closeOnClickConfirm="closeOnClickConfirm"
+		:columns="columns"
+		:title="title"
+		:itemHeight="itemHeight"
+		:showToolbar="showToolbar"
+		:visibleItemCount="visibleItemCount"
+		:defaultIndex="innerDefaultIndex"
+		:cancelText="cancelText"
+		:confirmText="confirmText"
+		:cancelColor="cancelColor"
+		:confirmColor="confirmColor"
+		:round="round"
+		@close="close"
+		@cancel="cancel"
+		@confirm="confirm"
+		@change="change"
+	>
+	</uv-picker>
+</template>
+<script>
+	function times(n, iteratee) {
+		let index = -1
+		const result = Array(n < 0 ? 0 : n)
+		while (++index < n) {
+			result[index] = iteratee(index)
+		}
+		return result
+	}
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	import dayjs from '../../libs/util/dayjs.js'
+	/**
+	 * DatetimePicker 时间日期选择器
+	 * @description 此选择器用于时间日期
+	 * @tutorial https://www.uvui.cn/components/datetimePicker.html
+	 * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
+	 * @property {String | Number}	value				绑定值
+	 * @property {String}			title				顶部标题
+	 * @property {String}			mode				展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( 默认 ‘datetime )
+	 * @property {Number}			maxDate				可选的最大时间  默认值为后10年
+	 * @property {Number}			minDate				可选的最小时间  默认值为前10年
+	 * @property {Number}			minHour				可选的最小小时，仅mode=time有效   ( 默认 0 )
+	 * @property {Number}			maxHour				可选的最大小时，仅mode=time有效	  ( 默认 23 )
+	 * @property {Number}			minMinute			可选的最小分钟，仅mode=time有效	  ( 默认 0 )
+	 * @property {Number}			maxMinute			可选的最大分钟，仅mode=time有效   ( 默认 59 )
+	 * @property {Function}			filter				选项过滤函数
+	 * @property {Function}			formatter			选项格式化函数
+	 * @property {Boolean}			loading				是否显示加载中状态   ( 默认 false )
+	 * @property {String | Number}	itemHeight			各列中，单个选项的高度   ( 默认 44 )
+	 * @property {String}			cancelText			取消按钮的文字  ( 默认 '取消' )
+	 * @property {String}			confirmText			确认按钮的文字  ( 默认 '确认' )
+	 * @property {String}			cancelColor			取消按钮的颜色  ( 默认 '#909193' )
+	 * @property {String}			confirmColor		确认按钮的颜色  ( 默认 '#3c9cff' )
+	 * @property {String | Number}	visibleItemCount	每列中可见选项的数量  ( 默认 5 )
+	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器  ( 默认 true )
+	 * @property {String | Number}	round	圆角  ( 默认 0 )
+	 * @event {Function} close 关闭选择器时触发
+	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
+	 * @event {Function} change 当选择值变化时触发
+	 * @event {Function} cancel 点击取消按钮
+	 * @example  <uv-datetime-picker ref="datetimepicker" :value="value1"  mode="datetime" ></uv-datetime-picker>
+	 */
+	export default {
+		name: 'uv-datetime-picker',
+		emits: ['close', 'cancel', 'confirm', 'input', 'change', 'update:modelValue'],
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				columns: [],
+				innerDefaultIndex: [],
+				innerFormatter: (type, value) => value
+			}
+		},
+		watch: {
+			propsChange() {
+				this.init()
+			}
+		},
+		computed: {
+			// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
+			propsChange() {
+				const propsValue = this.value || this.modelValue;
+				return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, propsValue]
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.getValue();
+				this.updateColumnValue(this.innerValue)
+			},
+			getValue() {
+				const propsValue = this.value || this.modelValue;
+				this.innerValue = this.correctValue(propsValue)
+			},
+			// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+			setFormatter(e) {
+				this.innerFormatter = e
+			},
+			open() {
+				this.$refs.picker.open();
+				this.getValue();
+				this.updateColumnValue(this.innerValue);
+			},
+			close() {
+				this.$emit('close');
+			},
+			// 点击工具栏的取消按钮
+			cancel() {
+				this.$emit('cancel')
+			},
+			// 点击工具栏的确定按钮
+			confirm() {
+				this.$emit('confirm', {
+					value: this.innerValue,
+					mode: this.mode
+				})
+				if(!this.clearDate) {
+					this.$emit('input', this.innerValue)
+					this.$emit('update:modelValue', this.innerValue)
+				}
+			},
+			//用正则截取输出值,当出现多组数字时,抛出错误
+			intercept(e, type) {
+				let judge = e.match(/\d+/g)
+				//判断是否掺杂数字
+				if (judge.length > 1) {
+					this.$uv.error("请勿在过滤或格式化函数时添加数字")
+					return 0
+				} else if (type && judge[0].length == 4) { //判断是否是年份
+					return judge[0]
+				} else if (judge[0].length > 2) {
+					this.$uv.error("请勿在过滤或格式化函数时添加数字")
+					return 0
+				} else {
+					return judge[0]
+				}
+			},
+			// 列发生变化时触发
+			change(e) {
+				const { indexs, values } = e
+				let selectValue = ''
+				if (this.mode === 'time') {
+					// 根据value各列索引，从各列数组中，取出当前时间的选中值
+					selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
+				} else if (this.mode === 'year') {
+					const year = parseInt(this.intercept(values[0][indexs[0]], 'year'));
+					selectValue = Number(new Date(year, 0));
+				} else {
+					// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
+					const year = parseInt(this.intercept(values[0][indexs[0]], 'year'))
+					const month = parseInt(this.intercept(values[1][indexs[1]]))
+					let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
+					let hour = 0,
+						minute = 0
+					// 此月份的最大天数
+					const maxDate = dayjs(`${year}-${month}`).daysInMonth()
+					// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
+					if (this.mode === 'year-month') {
+						date = 1
+					}
+					// 不允许超过maxDate值
+					date = Math.min(maxDate, date)
+					if (this.mode === 'datetime') {
+						hour = parseInt(this.intercept(values[3][indexs[3]]))
+						minute = parseInt(this.intercept(values[4][indexs[4]]))
+					}
+					// 转为时间模式
+					selectValue = Number(new Date(year, month - 1, date, hour, minute))
+				}
+				// 取出准确的合法值，防止超越边界的情况
+				selectValue = this.correctValue(selectValue)
+				this.innerValue = selectValue
+				this.updateColumnValue(selectValue)
+				// 发出change时间，value为当前选中的时间戳
+				this.$emit('change', {
+					value: selectValue,
+					mode: this.mode
+				})
+			},
+			// 更新各列的值，进行补0、格式化等操作
+			updateColumnValue(value) {
+				this.innerValue = value
+				this.updateColumns()
+				this.updateIndexs(value)
+			},
+			// 更新索引
+			updateIndexs(value) {
+				let values = []
+				const formatter = this.formatter || this.innerFormatter;
+				if (this.mode === 'time') {
+					// 将time模式的时间用:分隔成数组
+					const timeArr = value.split(':')
+					// 使用formatter格式化方法进行管道处理
+					values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
+				} else {
+					const date = new Date(value)
+					values = [
+						formatter('year', `${dayjs(value).year()}`),
+						// 月份补0
+						formatter('month', this.$uv.padZero(dayjs(value).month() + 1))
+					]
+					if (this.mode === 'date') {
+						// date模式，需要添加天列
+						values.push(formatter('day', this.$uv.padZero(dayjs(value).date())))
+					}
+					if (this.mode === 'datetime') {
+						// 数组的push方法，可以写入多个参数
+						values.push(formatter('day', this.$uv.padZero(dayjs(value).date())), formatter('hour', this.$uv.padZero(dayjs(value).hour())), formatter('minute', this.$uv.padZero(dayjs(value).minute())))
+					}
+				}
+				// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
+				const indexs = this.columns.map((column, index) => {
+					// 通过取大值，可以保证不会出现找不到索引的-1情况
+					return Math.max(0, column.findIndex(item => item === values[index]))
+				})
+				this.$nextTick(()=>{
+					this.$uv.sleep(100).then(res=>{
+						this.$refs.picker.setIndexs(indexs,true);
+					})
+				})
+			},
+			// 更新各列的值
+			updateColumns() {
+				const formatter = this.formatter || this.innerFormatter
+				// 获取各列的值，并且map后，对各列的具体值进行补0操作
+				const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
+				this.columns = results
+			},
+			getOriginColumns() {
+				// 生成各列的值
+				const results = this.getRanges().map(({ type, range }) => {
+					let values = times(range[1] - range[0] + 1, (index) => {
+						let value = range[0] + index
+						value = type === 'year' ? `${value}` : this.$uv.padZero(value)
+						return value
+					})
+					// 进行过滤
+					if (this.filter) {
+						values = this.filter(type, values)
+					}
+					return { type, values }
+				})
+				return results
+			},
+			// 通过最大值和最小值生成数组
+			generateArray(start, end) {
+				return Array.from(new Array(end + 1).keys()).slice(start)
+			},
+			// 得出合法的时间
+			correctValue(value) {
+				const isDateMode = this.mode !== 'time'
+				if (isDateMode && !this.$uv.test.date(value)) {
+					// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
+					value = this.minDate
+				} else if (!isDateMode && !value) {
+					// 如果是时间类型，而又没有默认值的话，就用最小时间
+					value = `${this.$uv.padZero(this.minHour)}:${this.$uv.padZero(this.minMinute)}`
+				}
+				// 时间类型
+				if (!isDateMode) {
+					if (String(value).indexOf(':') === -1) return this.$uv.error('时间错误，请传递如12:24的格式')
+					let [hour, minute] = value.split(':')
+					// 对时间补零，同时控制在最小值和最大值之间
+					hour = this.$uv.padZero(this.$uv.range(this.minHour, this.maxHour, Number(hour)))
+					minute = this.$uv.padZero(this.$uv.range(this.minMinute, this.maxMinute, Number(minute)))
+					return `${ hour }:${ minute }`
+				} else {
+					// 如果是日期格式，控制在最小日期和最大日期之间
+					value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
+					value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
+					return value
+				}
+			},
+			// 获取每列的最大和最小值
+			getRanges() {
+				if (this.mode === 'time') {
+					return [{
+						type: 'hour',
+						range: [this.minHour, this.maxHour],
+					}, {
+						type: 'minute',
+						range: [this.minMinute, this.maxMinute],
+					}, ];
+				}
+				const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
+				const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
+				const result = [{
+					type: 'year',
+					range: [minYear, maxYear],
+				}, {
+					type: 'month',
+					range: [minMonth, maxMonth],
+				}, {
+					type: 'day',
+					range: [minDate, maxDate],
+				}, {
+					type: 'hour',
+					range: [minHour, maxHour],
+				}, {
+					type: 'minute',
+					range: [minMinute, maxMinute],
+				}, ];
+				if (this.mode === 'date') result.splice(3, 2);
+				if (this.mode === 'year-month') result.splice(2, 3);
+				if (this.mode === 'year') result.splice(1, 4);
+				return result;
+			},
+			// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
+			getBoundary(type, innerValue) {
+				const value = new Date(innerValue)
+				const boundary = new Date(this[`${type}Date`])
+				const year = dayjs(boundary).year()
+				let month = 1
+				let date = 1
+				let hour = 0
+				let minute = 0
+				if (type === 'max') {
+					month = 12
+					// 月份的天数
+					date = dayjs(value).daysInMonth()
+					hour = 23
+					minute = 59
+				}
+				// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
+				if (dayjs(value).year() === year) {
+					month = dayjs(boundary).month() + 1
+					if (dayjs(value).month() + 1 === month) {
+						date = dayjs(boundary).date()
+						if (dayjs(value).date() === date) {
+							hour = dayjs(boundary).hour()
+							if (dayjs(value).hour() === hour) {
+								minute = dayjs(boundary).minute()
+							}
+						}
+					}
+				}
+				return {
+					[`${type}Year`]: year,
+					[`${type}Month`]: month,
+					[`${type}Date`]: date,
+					[`${type}Hour`]: hour,
+					[`${type}Minute`]: minute
+				}
+			},
+		},
+	}
+</script>

package/components/uv-divider/props.js

@@ -0,0 +1,45 @@
+export default {
+	props: {
+		// 是否虚线
+		dashed: {
+			type: Boolean,
+			default: false
+		},
+		// 是否细线
+		hairline: {
+			type: Boolean,
+			default: true
+		},
+		// 是否以点替代文字，优先于text字段起作用
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		// 内容文本的位置，left-左边，center-中间，right-右边
+		textPosition: {
+			type: String,
+			default: 'center'
+		},
+		// 文本内容
+		text: {
+			type: [String, Number],
+			default: ''
+		},
+		// 文本大小
+		textSize: {
+			type: [String, Number],
+			default: 14
+		},
+		// 文本颜色
+		textColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 线条颜色
+		lineColor: {
+			type: String,
+			default: '#dcdfe6'
+		},
+		...uni.$uv?.props?.divider
+	}
+}

package/components/uv-divider/uv-divider.vue

@@ -0,0 +1,113 @@
+<template>
+	<view 
+		class="uv-divider"
+		:style="[$uv.addStyle(customStyle)]"
+		@tap="click"
+		>
+		<uv-line 
+			:color="lineColor"
+			:customStyle="leftLineStyle"
+			:hairline="hairline"
+			:dashed="dashed"></uv-line>
+		<text 
+			v-if="dot"
+			class="uv-divider__dot"
+		>●</text>
+		<text 
+			v-else-if="text"
+			class="uv-divider__text"
+			:style="[textStyle]"
+		>{{text}}</text>
+		<uv-line 
+			:color="lineColor"
+			:customStyle="rightLineStyle"
+			:hairline="hairline"
+			:dashed="dashed"
+		></uv-line>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * divider 分割线
+	 * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+	 * @tutorial https://www.uvui.cn/components/divider.html
+	 * @property {Boolean}			dashed			是否虚线 （默认 false ）
+	 * @property {Boolean}			hairline		是否细线 （默认  true ）
+	 * @property {Boolean}			dot				是否以点替代文字，优先于text字段起作用 （默认 false ）
+	 * @property {String}			textPosition	内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
+	 * @property {String | Number}	text			文本内容
+	 * @property {String | Number}	textSize		文本大小 （默认 14）
+	 * @property {String}			textColor		文本颜色 （默认 '#909399' ）
+	 * @property {String}			lineColor		线条颜色 （默认 '#dcdfe6' ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 *
+	 * @event {Function}	click	divider组件被点击时触发
+	 * @example <uv-divider :color="color">锦瑟无端五十弦</uv-divider>
+	 */
+	export default {
+		name: 'uv-divider',
+		mixins: [mpMixin, mixin, props],
+		emits: ['click'],
+		computed: {
+			textStyle() {
+				const style = {}
+				style.fontSize = this.$uv.addUnit(this.textSize)
+				style.color = this.textColor
+				return style
+			},
+			// 左边线条的的样式
+			leftLineStyle() {
+				const style = {}
+				// 如果是在左边，设置左边的宽度为固定值
+				if (this.textPosition === 'left') {
+					style.width = '80rpx'
+				} else {
+					style.flex = 1
+				}
+				return style
+			},
+			// 右边线条的的样式
+			rightLineStyle() {
+				const style = {}
+				// 如果是在右边，设置右边的宽度为固定值
+				if (this.textPosition === 'right') {
+					style.width = '80rpx'
+				} else {
+					style.flex = 1
+				}
+				return style
+			}
+		},
+		methods: {
+			// divider组件被点击时触发
+			click() {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	$uv-divider-margin: 15px 0 !default;
+	$uv-divider-text-margin: 0 15px !default;
+	$uv-divider-dot-font-size: 12px !default;
+	$uv-divider-dot-margin: 0 12px !default;
+	$uv-divider-dot-color: #c0c4cc !default;
+	.uv-divider {
+		@include flex;
+		flex-direction: row;
+		align-items: center;
+		margin: $uv-divider-margin;
+		&__text {
+			margin: $uv-divider-text-margin;
+		}
+		&__dot {
+			font-size: $uv-divider-dot-font-size;
+			margin: $uv-divider-dot-margin;
+			color: $uv-divider-dot-color;
+		}
+	}
+</style>

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

@@ -0,0 +1,135 @@
+<template>
+	<uv-sticky :disabled="!isSticky">
+		<view ref="dropDownRef" class="uv-drop-down" :style="[$uv.addStyle(customStyle)]">
+			<slot></slot>
+		</view>
+	</uv-sticky>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js';
+	import mixin from '../../libs/mixin/mixin.js';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	/**
+	 * DropDown 下拉框
+	 * @description 下拉筛选
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
+	 * @property {String | Number} sign 组件唯一标识，需要手动传
+	 * @property {Boolean} is-sticky = [true|false] 是否吸顶
+	 * @property {Array} default-value 默认值，表示参数value属于这里面的值，就说明是未选中即是默认展示的值。eg：上面示例中的{label: '全部',value: 'all'} 即是默认值。后续处理逻辑也可以根据是否是其中值进行过滤。
+	 * @property {String} textSize 每项字体大小
+	 * @property {String} textColor 每项文本颜色
+	 * @property {String} textActiveSize 每项选中状态字体大小
+	 * @property {String} textActiveColor 每项选中状态文本颜色
+	 * @property {Object} extraIcon 每项右侧图标
+	 * @property {Object} extraActiveIcon 每项选中后右侧图标
+	 */
+	export default {
+		name: 'uv-drop-down',
+		mixins: [mpMixin, mixin],
+		emits: ['click'],
+		props: {
+			isSticky: {
+				type: Boolean,
+				default: true
+			},
+			sign: {
+				type: [String, Number],
+				default: 'UVDROPDOWN'
+			},
+			defaultValue: {
+				type: Array,
+				default: () => [0, '0', 'all']
+			},
+			textSize: {
+				type: String,
+				default: '30rpx'
+			},
+			textColor: {
+				type: String,
+				default: '#333'
+			},
+			textActiveSize: {
+				type: String,
+				default: '30rpx'
+			},
+			textActiveColor: {
+				type: String,
+				default: '#3c9cff'
+			},
+			extraIcon: {
+				type: Object,
+				default () {
+					return {
+						name: 'arrow-down',
+						size: '30rpx',
+						color: '#333'
+					}
+				}
+			},
+			extraActiveIcon: {
+				type: Object,
+				default () {
+					return {
+						name: 'arrow-up',
+						size: '30rpx',
+						color: '#3c9cff'
+					}
+				}
+			}
+		},
+		computed: {
+			parentData() {
+				return [this.defaultValue, this.textSize, this.textColor, this.textActiveColor, this.textActiveSize, this.extraIcon, this.extraActiveIcon, this.sign, this.clickHandler];
+			}
+		},
+		mounted() {
+			this.init();
+		},
+		methods: {
+			init() {
+				uni.$emit(`${this.sign}_CLICKMENU`, {
+					show: false
+				});
+				this.$nextTick(async () => {
+					const rect = await this.queryRect();
+					uni.$emit(`${this.sign}_GETRECT`, rect);
+				})
+			},
+			// 查询内容高度
+			queryRect() {
+				// #ifndef APP-NVUE
+				// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uvGetRect(`.uv-drop-down`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs.dropDownRef, res => {
+						res.size.top = res.size.top <= 0 ? 0 : res.size.top;
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			clickHandler(data) {
+				this.$emit('click', data);
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	@import '../../libs/css/components.scss';
+	.uv-drop-down {
+		@include flex;
+		justify-content: space-between;
+		background-color: #fff;
+		border-bottom: 1px solid #dadbde;
+	}
+</style>