fusions-ui 1.2.7 → 1.2.8

package/components/fu-picker/fu-picker.vue

@@ -1,347 +0,0 @@
-<template>
-	<fu-popup ref="popup" 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="cancel">{{ cancelText || '' }}</view>
-					<view class="fu-picker__toolbar__title">{{ title || '' }}</view>
-					<view class="fu-picker__toolbar__view fu-picker__toolbar__view--confirm" :style="confirmStyle" @tap="confirm">{{ 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="changeHandler">
-			<!-- #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="changeHandler">
-			<!-- #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>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	/**
-	 * Picker 选择器
-	 * @description 此组件选择器用于单列、多列联动的的选择场景。
-	 * @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 当选择值变化时触发 
-	 */
-	export default {
-		name:"FuPicker",
-		emits: ['confirm', 'cancel', 'close', 'change'],
-		mixins: [mpMixin, props],
-		data() {
-			return {
-				// 上一次选择的列索引
-				lastIndex: [],
-				// 索引值 ，对应picker-view的value
-				innerIndex: [],
-				// 各列的值
-				innerColumns: [],
-				// 上一次的变化列索引
-				columnIndex: 0
-			};
-		},
-		computed: {
-			// 为了解决支付宝不生效
-			textStyle(){
-				return (index,index1) => {
-					const style = {};
-					// #ifndef APP-NVUE 
-					style.display = 'block';
-					// #endif
-					if(this.color) {
-						style.color = this.color;
-					}
-					if(this.activeColor && index1 === this.innerIndex[index]) {
-						style.color = this.activeColor;
-					}
-					return style;
-				}
-			},
-			cancelStyle() {
-				return `color: ${this.cancelColor};fontSize：${this.$fu.addStyle(this.cancelSize)};`
-			},
-			titleStyle() {
-				return `color: ${this.titleColor};fontSize：${this.$fu.addUnit(this.titleSize)};`
-			},
-			confirmStyle() {
-				return `color: ${this.confirmColor};fontSize：${this.$fu.addUnit(this.confirmSize)};`
-			}
-		},
-		methods: {
-			// 点击工具栏的取消按钮
-			cancel() {
-				this.close()
-				setTimeout(() => {
-					this.$emit('cancel')
-				}, 10)
-			},
-			// 点击工具栏的确定按钮
-			confirm() {
-				this.close()
-				// 在这里使用deepClone拷贝后，vue3会自动转换成原始对象，这样处理是因为cli项目可能出现不返回值的情况
-				this.$emit('confirm', this.$fu.deepClone({
-					indexs: this.innerIndex,
-					value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
-					values: this.innerColumns
-				}))
-			},
-			
-			// 打开
-			open() {
-				this.$refs.popup.open()
-			},
-			
-			// 关闭
-			close() {
-				this.$refs.popup.close()
-			},
-			
-			// 获取item需要显示的文字，判别为对象还是文本
-			getItemText(item) {
-				if (this.$fu.isObject(item)) {
-					return item[this.keyName]
-				} else {
-					return item
-				}
-			},
-			
-			// 选择器某一列的数据发生变化时触发
-			changeHandler(e) {
-				const { value } = e.detail;
-				let index = 0, columnIndex = 0;
-				// 通过对比前后两次的列索引，得出当前变化的是哪一列
-				for (let i = 0; i < value.length; i++) {
-					let item = value[i]
-					if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
-						// 设置columnIndex为当前变化列的索引
-						columnIndex = i
-						// index则为变化列中的变化项的索引
-						index = item
-						break // 终止循环，即使少一次循环，也是性能的提升
-					}
-				}
-				this.columnIndex = columnIndex
-				const values = this.innerColumns
-				// 将当前的各项变化索引，设置为"上一次"的索引变化值
-				this.setLastIndex(value)
-				this.setIndexs(value)
-				this.$emit('change', {
-					// #ifndef MP-WEIXIN
-					// 微信小程序不能传递this，会因为循环引用而报错
-					picker: this,
-					// #endif
-					value: this.innerColumns.map((item, index) => item[value[index]]),
-					index,
-					indexs: value,
-					// values为当前变化列的数组内容
-					values,
-					columnIndex
-				})
-			},
-			
-			// 设置index索引，此方法可被外部调用设置
-			setIndexs(index, setLastIndex) {
-				this.innerIndex = this.$fu.deepClone(index)
-				if (setLastIndex) {
-					this.setLastIndex(index)
-				}
-			},
-			
-			// 设置整体各列的columns的值
-			setColumns(columns) {
-				this.innerColumns = this.$fu.deepClone(columns);
-				// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
-				if (this.innerIndex.length === 0) {
-					this.innerIndex = new Array(columns.length).fill(0);
-				}
-			},
-			
-			// 记录上一次的各列索引位置
-			setLastIndex(index) {
-				// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
-				// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
-				this.lastIndex = this.$fu.deepClone(index)
-			},
-			
-			// 设置对应列选项的所有值
-			setColumnValues(columnIndex, values) {
-				// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
-				this.innerColumns.splice(columnIndex, 1, values)
-				// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
-				let tmpIndex = this.$fu.deepClone(this.innerIndex)
-				for (let i = 0; i < this.innerColumns.length; i++) {
-					if (i > this.columnIndex) {
-						tmpIndex[i] = 0
-					}
-				}
-				// 一次性赋值，不能单个修改，否则无效
-				this.setIndexs(tmpIndex)
-			},
-			
-			// 获取对应列的所有选项
-			getColumnValues(columnIndex) {
-				// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
-				// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
-				(async () => {
-					await this.$fu.sleep()
-				})()
-				return this.innerColumns[columnIndex]
-			},
-			
-			// 获取各列选中值对应的索引
-			getIndexs() {
-				return this.innerIndex
-			},
-			
-			// 获取各列选中的值
-			getValues() {
-				// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
-				// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
-				(async () => {
-					await this.$fu.sleep()
-				})()
-				return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
-			}
-		},
-		watch: {
-			// 监听默认索引的变化，重新设置对应的值
-			defaultIndex: {
-				immediate: true,
-				handler(n) {
-					this.setIndexs(n, true)
-				}
-			},
-			// 监听columns参数的变化
-			columns: {
-				deep: true,
-				immediate: true,
-				handler(n) {
-					this.setColumns(n)
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
-	
-	.fu-picker {
-		position: relative;
-		
-		&__toolbar {
-			@include flex;
-			align-items: center;
-			height: 48px;
-			
-			&__view {
-				width: 120rpx;
-				height: 66rpx;
-				@include flex;
-				align-items: center;
-				justify-content: center;
-				/* #ifndef APP-NVUE */
-				flex-shrink: 0;
-				/* #endif */
-				
-				&--confirm {
-					color: $fu-primary;
-				}
-			}
-			
-			&__title {
-				flex: 1;
-				padding: 0 15px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				text-align: center;
-			}
-		}
-		
-		&__view {
-			
-			&__column {
-				@include flex;
-				flex: 1;
-				justify-content: center;
-				
-				&__item {
-					@include 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/fu-picker/props.js

@@ -1,150 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @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
-		}
-	}
-}