fusions-ui 1.2.7 → 1.2.8

package/components/picker/index.ts

@@ -0,0 +1 @@
+export * from './src/picker'

package/components/picker/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './picker-custom'
+export * from './use-picker'

package/components/picker/src/composables/picker-custom.ts

@@ -0,0 +1,40 @@
+import { Ref, computed } from 'vue';
+import type { PickerProps } from '../picker';
+
+export const usePickerCustomStyle = (props: PickerProps, innerIndex: Ref<any>) => {
+	// 为了解决支付宝不生效
+	const textStyle = computed(() => {
+		return (index: number, index1: number) => {
+			const style: Record<string, any> = {};
+			// #ifndef APP-NVUE 
+			style.display = 'block';
+			// #endif
+			if(props.color) {
+				style.color = props.color;
+			}
+			if(props.activeColor && index1 === innerIndex.value[index]) {
+				style.color = props.activeColor;
+			}
+			return style;
+		}
+	});
+	
+	const cancelStyle = computed(() => {
+		return `color: ${props.cancelColor};fontSize：${uni.$fu.addStyle(props.cancelSize)};`
+	});
+	
+	const titleStyle = computed(() => {
+		return `color: ${props.titleColor};fontSize：${uni.$fu.addUnit(props.titleSize)};`
+	});
+	
+	const confirmStyle = computed(() => {
+		return `color: ${props.confirmColor};fontSize：${uni.$fu.addUnit(props.confirmSize)};`
+	});
+	
+	return {
+		textStyle,
+		cancelStyle,
+		titleStyle,
+		confirmStyle
+	}
+}

package/components/picker/src/composables/use-picker.ts

@@ -0,0 +1,179 @@
+import { getCurrentInstance, ref, watch, type SetupContext } from 'vue';
+import type { PickerProps, PickerEmits } from '../picker';
+
+export const usePicker = (props: PickerProps, $emit: SetupContext<PickerEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const popupRef = ref();
+	// 上一次选择的列索引
+	const lastIndex = ref<number[]>([]);
+	// 索引值 ，对应picker-view的value
+	const innerIndex = ref<number[]>([]);
+	// 各列的值
+	const innerColumns = ref([]);
+	// 上一次的变化列索引
+	const columnIndex = ref(0);
+	
+	// 点击工具栏的取消按钮
+	const handleCancel = () => {
+		close()
+		setTimeout(() => {
+			$emit('cancel')
+		}, 10)
+	};
+	
+	// 点击工具栏的确定按钮
+	const handleConfirm = () => {
+		close()
+		// 在这里使用deepClone拷贝后，vue3会自动转换成原始对象，这样处理是因为cli项目可能出现不返回值的情况
+		$emit('confirm', uni.$fu.deepClone({
+			indexs: innerIndex.value,
+			value: innerColumns.value.map((item, index) => item[innerIndex.value[index]]),
+			values: innerColumns.value
+		}))
+	};
+	
+	// 打开
+	const open = () => {
+		popupRef.value.open()
+	};
+	
+	// 关闭
+	const close = () => {
+		popupRef.value.close()
+	};
+	
+	// 获取item需要显示的文字，判别为对象还是文本
+	const getItemText = (item: any) => {
+		if (uni.$fu.isObject(item)) {
+			return item[props.keyName]
+		} else {
+			return item
+		}
+	};
+	
+	// 选择器某一列的数据发生变化时触发
+	const handleChange = (e: any) => {
+		const { value } = e.detail;
+		let index = 0, changeColumnIndex = 0;
+		// 通过对比前后两次的列索引，得出当前变化的是哪一列
+		for (let i = 0; i < value.length; i++) {
+			let item = value[i]
+			if (item !== (lastIndex.value[i] || 0)) { // 把undefined转为合法假值0
+				// 设置columnIndex为当前变化列的索引
+				changeColumnIndex = i;
+				// index则为变化列中的变化项的索引
+				index = item;
+				break // 终止循环，即使少一次循环，也是性能的提升
+			}
+		}
+		columnIndex.value = changeColumnIndex;
+		const values = innerColumns.value;
+		// 将当前的各项变化索引，设置为"上一次"的索引变化值
+		setLastIndex(value)
+		setIndexs(value)
+		$emit('change', {
+			// #ifndef MP-WEIXIN
+			// 微信小程序不能传递instance，会因为循环引用而报错
+			picker: instance?.proxy,
+			// #endif
+			value: innerColumns.value.map((item, index) => item[value[index]]),
+			index,
+			indexs: value,
+			// values为当前变化列的数组内容
+			values,
+			columnIndex: changeColumnIndex
+		})
+	};
+	
+	// 设置index索引，此方法可被外部调用设置
+	const setIndexs = (index: number[], _setLastIndex?: boolean) => {
+		innerIndex.value = uni.$fu.deepClone(index)
+		if (_setLastIndex) {
+			setLastIndex(index)
+		}
+	};
+	
+	// 设置整体各列的columns的值
+	const setColumns = (columns: any) => {
+		innerColumns.value = uni.$fu.deepClone(columns);
+		// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
+		if (innerIndex.value.length === 0) {
+			innerIndex.value = new Array(columns.length).fill(0);
+		}
+	};
+	
+	// 记录上一次的各列索引位置
+	const setLastIndex = (index: number[]) => {
+		// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为handleChange中
+		// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
+		lastIndex.value = uni.$fu.deepClone(index)
+	};
+	
+	// 设置对应列选项的所有值
+	const setColumnValues = (colIndex: number, values: any) => {
+		// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
+		innerColumns.value.splice(colIndex, 1, values)
+		// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
+		let tmpIndex = uni.$fu.deepClone(innerIndex.value)
+		for (let i = 0; i < innerColumns.value.length; i++) {
+			if (i > columnIndex.value) {
+				tmpIndex[i] = 0
+			}
+		}
+		// 一次性赋值，不能单个修改，否则无效
+		setIndexs(tmpIndex)
+	};
+	
+	// 获取对应列的所有选项
+	const getColumnValues = (columnIndex: number) => {
+		// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
+		// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
+		(async () => {
+			await uni.$fu.sleep()
+		})()
+		return innerColumns.value[columnIndex]
+	};
+	
+	// 获取各列选中值对应的索引
+	const getIndexs = () => {
+		return innerIndex.value
+	};
+	
+	// 获取各列选中的值
+	const getValues = () => {
+		// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
+		// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
+		(async () => {
+			await uni.$fu.sleep()
+		})()
+		return innerColumns.value.map((item, index) => item[innerIndex.value[index]])
+	};
+	
+	// 监听默认索引的变化，重新设置对应的值
+	watch(() => props.defaultIndex, (newVal) => {
+		setIndexs(newVal as number[], true)
+	}, { immediate: true });
+	
+	// 监听columns参数的变化
+	watch(() => props.columns, (newVal) => {
+		setColumns(newVal)
+	}, { immediate: true, deep: true });
+	
+	return {
+		popupRef,
+		innerIndex,
+		innerColumns,
+		handleCancel,
+		handleConfirm,
+		open,
+		close,
+		getItemText,
+		handleChange,
+		setIndexs,
+		setLastIndex,
+		setColumnValues,
+		getColumnValues,
+		getIndexs,
+		getValues
+	}
+}

package/components/picker/src/picker.ts

@@ -0,0 +1,172 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const pickerProps = {
+	/**
+	 * @description 背景颜色
+	 * @default '#FFFFFF'
+	 */
+	bgColor: {
+		type: String,
+		default: '#FFFFFF'
+	},
+	/**
+	 * @description 标题
+	 */
+	title: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 标题字体大小
+	 * @default 15
+	 */
+	titleSize: {
+		type: [String, Number],
+		default: 15
+	},
+	/**
+	 * @description 标题字体颜色
+	 * @default '#333333'
+	 */
+	titleColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 确定按钮文本
+	 * @default '确定'
+	 */
+	confirmText: {
+		type: String,
+		default: '确定'
+	},
+	/**
+	 * @description 确定按钮字体大小
+	 * @default 13
+	 */
+	confirmSize: {
+		type: [String, Number],
+		default: 13
+	},
+	/**
+	 * @description 确认按钮文本颜色
+	 */
+	confirmColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 取消按钮文本
+	 * @default '取消'
+	 */
+	cancelText: {
+		type: String,
+		default: '取消'
+	},
+	/**
+	 * @description 取消按钮字体大小
+	 * @default 13
+	 */
+	cancelSize: {
+		type: [String, Number],
+		default: 13
+	},
+	/**
+	 * @description 取消按钮文本颜色
+	 * @default '#888888'
+	 */
+	cancelColor: {
+		type: String,
+		default: '#888888'
+	},
+	/**
+	 * @description 各列中，单个选项的高度
+	 * @default 44
+	 */
+	itemHeight: {
+		type: [String, Number],
+		default: 44
+	},
+	/**
+	 * @description 对象数组，设置每一列的数据
+	 */
+	columns: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 文字颜色
+	 */
+	color: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 选中文字的颜色
+	 */
+	activeColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 每列中可见选项的数量
+	 * @default 5
+	 */
+	visibleItemCount: {
+		type: [String, Number],
+		default: 5
+	},
+	/**
+	 * @description 选项对象中，需要展示的属性键名
+	 * @default 'value'
+	 */
+	keyName: {
+		type: String,
+		default: 'value'
+	},
+	/**
+	 * @description 各列的默认索引
+	 */
+	defaultIndex: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否允许点击遮罩关闭选择器
+	 * @default true
+	 */
+	maskClosable: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
+	 * @default true
+	 */
+	immediateChange: {
+		type: Boolean,
+		default: true
+	}
+};
+
+export const pickerEmits = {
+	/**
+	 * @description 点击确定按钮时触发
+	 */
+	confirm: (_e : any) => true,
+	/**
+	 * @description 点击取消按钮时触发
+	 */
+	cancel: () => true,
+	/**
+	 * @description 关闭选择器时触发
+	 */
+	close: () => true,
+	/**
+	 * @description 当选择值变化时触发
+	 */
+	change: (_e : any) => true
+};
+
+export type PickerProps = ExtractPropTypes<typeof pickerProps>;
+export type PickerEmits = typeof pickerEmits;

package/components/picker/src/picker.vue

@@ -0,0 +1,197 @@
+<template>
+	<fu-popup ref="popupRef" mode="bottom" :bgColor="bgColor" :isMaskClick="maskClosable">
+		<view class="fu-picker">
+			<slot>
+				<view class="fu-picker__toolbar">
+					<view class="fu-picker__toolbar__view" :style="cancelStyle" @tap="handleCancel">{{ cancelText || '' }}</view>
+					<view class="fu-picker__toolbar__title">{{ title || '' }}</view>
+					<view class="fu-picker__toolbar__view fu-picker__toolbar__view--confirm" :style="confirmStyle" @tap="handleConfirm">{{ confirmText || '' }}</view>
+				</view>
+			</slot>
+			
+			<!-- #ifdef MP-TOUTIAO -->
+			<picker-view 
+				class="fu-picker__view" 
+				:indicatorStyle="`height: ${$fu.addUnit(itemHeight)}`" 
+				:value="innerIndex" 
+				:immediateChange="immediateChange" 
+				:style="{
+					height: `${$fu.addUnit(visibleItemCount * itemHeight)}`
+				}"
+				@pickend="handleChange">
+			<!-- #endif -->
+			<!-- #ifndef MP-TOUTIAO -->
+			<picker-view 
+				class="fu-picker__view" 
+				:indicatorStyle="`height: ${$fu.addUnit(itemHeight)}`" 
+				:value="innerIndex" 
+				:immediateChange="immediateChange" 
+				:style="{
+					height: `${$fu.addUnit(visibleItemCount * itemHeight)}`
+				}"
+				@change="handleChange">
+			<!-- #endif -->
+				<picker-view-column class="fu-picker__view__column" v-for="(item, index) in innerColumns" :key="index">
+					<text 
+						class="fu-picker__view__column__item"
+						:style="[
+							{
+						 	height: $fu.addUnit(itemHeight),
+						 	lineHeight: $fu.addUnit(itemHeight),
+						 	fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
+							},
+							textStyle(index,index1)
+						]"
+						v-for="(item1, index1) in item" :key="index1" 
+						v-if="$fu.isArray(item)">{{ getItemText(item1) }}</text>
+				</picker-view-column>
+			</picker-view>
+		</view>
+	</fu-popup>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Picker 选择器
+	 * @description 此组件选择器用于单列、多列联动的的选择场景。
+	 * @tutorial http://www.fusions.top/components/picker.html
+	 * @property {String} bgColor 定义背景色  默认#FFFFFF
+	 * @property {String} title 定义标题  不传不显示
+	 * @property {String | Number} titleSize 标题字体大（默认 15）
+	 * @property {String} titleColor 标题字体颜色
+	 * @property {String} confirmText 确认按钮文本
+	 * @property {String | Number} confirmSize 确认按钮字体大小（默认 13）
+	 * @property {String} confirmColor 确认按钮文本颜色
+	 * @property {String} cancelText 取消按钮文本
+	 * @property {String | Number} cancelSize 取消按钮字体大小（默认 13）
+	 * @property {String} cancelColor 取消按钮文本颜色（默认 '#888888'）
+	 * @property {Array} columns 对象数组，设置每一列的数据
+	 * @property {String} color 文字颜色
+	 * @property {String} activeColor 选中文字的颜色
+	 * @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5）
+	 * @property {String} keyName 选项对象中，需要展示的属性键名（默认 'value'）
+	 * @property {Array} defaultIndex  各列的默认索引（默认[]）
+	 * @property {Boolean} maskClosable = [true|false]  是否允许点击遮罩关闭选择器（默认 true）
+	 * @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44）
+	 * @property {Boolean} immediateChange = [true|false] 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
+	 * 
+	 * @event {Function} confirm 点击确定按钮时触发，返回当前选择的值
+	 * @event {Function} cancel 点击取消按钮时触发
+	 * @event {Function} close 关闭选择器时触发
+	 * @event {Function} change 当选择值变化时触发
+	 */
+	import { pickerEmits, pickerProps } from './picker';
+	import { usePicker, usePickerCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuPicker', options: { virtualHost: true } });
+	
+	const props = defineProps(pickerProps);
+	const $emit = defineEmits(pickerEmits);
+	
+	const {
+		popupRef,
+		innerIndex,
+		innerColumns,
+		handleCancel,
+		handleConfirm,
+		open,
+		close,
+		getItemText,
+		handleChange,
+		setIndexs,
+		setLastIndex,
+		setColumnValues,
+		getColumnValues,
+		getIndexs,
+		getValues
+	} = usePicker(props, $emit);
+	
+	const {
+		textStyle,
+		cancelStyle,
+		titleStyle,
+		confirmStyle
+	} = usePickerCustomStyle(props, innerIndex);
+	
+	// 暴露方法
+	defineExpose({
+		open,
+		close,
+		setIndexs,
+		setLastIndex,
+		setColumnValues,
+		getColumnValues,
+		getIndexs,
+		getValues
+	});
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+	
+	.fu-picker {
+		position: relative;
+		
+		&__toolbar {
+			@include components.flex;
+			align-items: center;
+			height: 48px;
+			
+			&__view {
+				width: 120rpx;
+				height: 66rpx;
+				@include components.flex;
+				align-items: center;
+				justify-content: center;
+				/* #ifndef APP-NVUE */
+				flex-shrink: 0;
+				/* #endif */
+				
+				&--confirm {
+					color: $fu-color-primary;
+				}
+			}
+			
+			&__title {
+				flex: 1;
+				padding: 0 15px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				text-align: center;
+			}
+		}
+		
+		&__view {
+			
+			&__column {
+				@include components.flex;
+				flex: 1;
+				justify-content: center;
+				
+				&__item {
+					@include components.flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 16px;
+					text-align: center;
+					/* #ifndef APP-NVUE */
+					display: block;
+					/* #endif */
+					color: #303133;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					text-align: center;
+				
+					&--disabled {
+						/* #ifndef APP-NVUE */
+						cursor: not-allowed;
+						/* #endif */
+						opacity: 0.35;
+					}
+				}
+			}
+		}
+	}
+</style>

package/components/popup/index.ts

@@ -0,0 +1 @@
+export * from './src/popup'

package/components/popup/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-popup'