stellar-ui-v2 1.35.3

package/components/ste-number-keyboard/keyboard.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="number-keyboard" :style="[cmpRootStyle]">
+		<view class="number-keyboard-left">
+			<block v-for="(num, index) in list" :key="num">
+				<view
+					class="number-keyboard-item"
+					:class="{
+						span3: list.length % 3 == 1 && index === list.length - 1,
+						span2: list.length % 3 == 2 && index === list.length - 2,
+						clear: num === 'clear',
+					}"
+					@click="onChange(num)"
+				>
+					<view v-if="['backspace', 'clear'].indexOf(num) !== -1">
+						<ste-icon v-if="num === 'backspace'" code="&#xe6a7;" :color="textColor" :size="textSize" />
+						<text v-else-if="num === 'clear'">清除</text>
+					</view>
+					<view v-else>
+						{{ num }}
+					</view>
+				</view>
+			</block>
+		</view>
+		<view class="number-keyboard-right" v-if="rightKeys">
+			<view class="number-keyboard-item" @click="onChange('backspace')">
+				<ste-icon code="&#xe6a7;" :color="textColor" :size="textSize" />
+			</view>
+			<view class="number-keyboard-item clear" v-if="showClear" @click="onChange('clear')">清除</view>
+			<view class="number-keyboard-item confirm" :class="{ disabled }" @click="onChange('confirm')">
+				{{ confirmText }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		list: { type: [Array, null] },
+		confirmText: { type: String },
+		disabled: { type: Boolean },
+		showClear: { type: Boolean },
+		textColor: { type: String },
+		textSize: { type: [Number, String] },
+		rightKeys: { type: Boolean },
+	},
+	computed: {
+		cmpRootStyle() {
+			let width = 8,
+				height = 5;
+			if (!this.rightKeys) {
+				width = 7;
+				height = 3;
+			}
+			// 向上取整，保证每行至少有3个按钮
+			const rows = Math.ceil(this.list.length / 3);
+			const w = width * (this.rightKeys ? 4 : 3);
+			const h = height * rows;
+			return {
+				'--ste-number-keyboard-aspect': `${w} / ${h}`,
+				'--ste-number-keyboard-columns': this.rightKeys ? '3fr 1fr' : '1fr',
+				'--ste-number-keyboard-rows': `repeat(${rows}, 1fr)`,
+				'--ste-number-keyboard-confirm-rows': `span ${this.showClear ? rows - 2 : rows - 1}`,
+			};
+		},
+	},
+	methods: {
+		onChange(v) {
+			if (v === 'confirm' && this.disabled) return;
+			this.$emit('change', v);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.number-keyboard {
+	width: 100%;
+	aspect-ratio: var(--ste-number-keyboard-aspect);
+	grid-template-columns: var(--ste-number-keyboard-columns);
+	display: grid;
+	background-color: #f9f9f9;
+	column-gap: 16rpx;
+	.number-keyboard-left {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 16rpx;
+	}
+	.number-keyboard-right {
+		display: grid;
+		row-gap: 16rpx;
+		grid-template-rows: var(--ste-number-keyboard-rows);
+	}
+	.number-keyboard-item {
+		background-color: #fff;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-family: DIN, DIN;
+		font-weight: bold;
+		font-size: var(--ste-number-keyboard-text-size);
+		color: var(--ste-number-keyboard-text-color);
+		border-radius: 8rpx;
+
+		&:active {
+			background-color: #f1f1f1;
+		}
+
+		&.clear {
+			font-size: var(--ste-number-keyboard-clear-text-size);
+		}
+
+		&.confirm {
+			flex-direction: column;
+			grid-row: var(--ste-number-keyboard-confirm-rows);
+			font-size: var(--ste-number-keyboard-confirm-text-size);
+			background: var(--ste-number-keyboard-confirm-bg);
+			color: #fff;
+			&:active {
+				background-color: var(--ste-number-keyboard-confirm-bg-active);
+			}
+
+			&.disabled {
+				background: rgba(238, 238, 238, 0.4) !important;
+			}
+		}
+		&.span2 {
+			grid-column: span 2;
+		}
+		&.span3 {
+			grid-column: span 3;
+		}
+	}
+}
+</style>

package/components/ste-number-keyboard/ste-number-keyboard.vue

@@ -0,0 +1,240 @@
+<template>
+	<view class="ste-number-keyboard-root" :style="[cmpRootStyle]">
+		<block v-if="mode === 'popup'">
+			<ste-popup :show.sync="dataShow" @close="onClose" position="bottom" :show-close="false" @open="onOpen">
+				<view style="padding: 30rpx 30rpx 60rpx 30rpx; background-color: #f5f5f5">
+					<view class="keyboard-popup-head">
+						<view></view>
+						<view class="keyboard-title">
+							<slot>数字键盘</slot>
+						</view>
+						<view class="keyboard-close" @click="onClose">
+							<ste-icon code="&#xe676;" size="36" />
+						</view>
+					</view>
+					<keyboard
+						:list="cmpNumbers"
+						:confirmText="confirmText"
+						:disabled="confirmDisabled"
+						:showClear="showClear"
+						:textColor="textColor"
+						:textSize="textSize"
+						:rightKeys="rightKeys"
+						@change="onChange"
+					/>
+				</view>
+			</ste-popup>
+		</block>
+		<block v-else>
+			<keyboard
+				:list="cmpNumbers"
+				:confirmText="confirmText"
+				:disabled="confirmDisabled"
+				:showClear="showClear"
+				:textColor="textColor"
+				:textSize="textSize"
+				:rightKeys="rightKeys"
+				@change="onChange"
+			/>
+		</block>
+	</view>
+</template>
+
+<script>
+import keyboard from './keyboard.vue';
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-number-keyboard 数字键盘
+ * @description 数字键盘
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-number-keyboard
+ * @property {String} mode 键盘模式，默认 popup弹窗模式
+ * @value popup 弹窗模式（默认）
+ * @value page 在dom文档流中直接展示
+ * @property {String} value 输入值，支持v-model双向绑定
+ * @property {Number,String} maxlength 输入最大长度
+ * @property {String} show 是否显示键盘，支持.sync绑定，mode="popup"时生效
+ * @property {Boolean} rightKeys 是否显示右侧功能键，默认true
+ * @property {Boolean} randomKeys 按键是否随机排列，默认false
+ * @property {String} confirmText 右侧确认按钮文本，默认'确认'
+ * @property {Boolean} confirmDisabled 右侧确认是否禁用，默认false
+ * @property {Array<String>} customKeys 自定义按键，建议数量不大于2
+ * @property {Boolean} showClear 是否显示清空按钮，默认true
+ * @property {String} textColor 按键文字颜色，默认#000000
+ * @property {String|Number} textSize 按键文字大小，默认48,单位rpx
+ * @property {String} confirmBg 确认按钮背景颜色，默认#0090FF
+ * @property {String} confirmColor 确认按钮文字颜色，默认#FFFFFF
+
+ * @event {Function} change 输入值改变时触发
+ * @event {Function} clear 清空按钮点击事件
+ * @event {Function} backspace 删除按钮点击事件
+ * @event {Function} confirm 确认按钮点击事件
+ * @event {Function} click 点击功能键(确认/删除/清除)之外的键盘触发
+ * @event {Function} beforeinput 输入之前触发，功能键之外的键盘点击时为输入（参数1为当前点击的按钮，参数2为开启等待的回调函数，参数3为执行后续操作的回调函数，参数4为阻止后续执行的回调函数）
+ * @event {Function} close 关闭弹窗键盘触发
+ * @event {Function} open 打开弹窗键盘触发
+ */
+
+export default {
+	group: '展示组件',
+	title: 'NumberKeyboard 数字键盘',
+	name: 'ste-number-keyboard',
+	components: { keyboard },
+	props: {
+		mode: { type: [String, null], default: () => 'popup' },
+		value: { type: [String, null], default: () => '' },
+		maxlength: { type: [Number, String, null], default: () => null },
+		show: { type: [Boolean, null], default: () => false },
+		rightKeys: { type: [Boolean, null], default: () => true },
+		randomKeys: { type: [Boolean, null], default: () => false },
+		confirmText: { type: [String, null], default: () => '确定' },
+		confirmDisabled: { type: [Boolean, null], default: () => false },
+		customKeys: { type: [Array, null], default: () => [] },
+		showClear: { type: [Boolean, null], default: () => true },
+		textColor: { type: [String, null], default: () => '#000' },
+		textSize: { type: [Number, String, null], default: () => 48 },
+		confirmBg: { type: [String, null], default: () => '' },
+		confirmColor: { type: [String, null], default: () => '#fff' },
+	},
+	data() {
+		return {
+			dataValue: '',
+			dataShow: false,
+		};
+	},
+	computed: {
+		cmpNumbers() {
+			let keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+			if (this.randomKeys) {
+				utils.randomArray(keys, this.dataShow);
+			}
+
+			if (Array.isArray(this.customKeys)) {
+				keys.push(...this.customKeys);
+			}
+
+			if (!this.rightKeys) {
+				if (!this.showClear) {
+					keys.push('backspace');
+					return;
+				}
+				const d = keys.length % 3;
+				if (d === 1) {
+					const end = keys.pop();
+					keys.push('clear', end, 'backspace');
+				} else {
+					keys.push('clear', 'backspace');
+				}
+			}
+
+			return keys;
+		},
+
+		cmpRootStyle() {
+			const fontsize = utils.formatPx(this.textSize, 'num');
+			return {
+				'--ste-number-keyboard-text-color': this.textColor,
+				'--ste-number-keyboard-text-size': isNaN(fontsize) ? fontsize : `${fontsize}px`,
+				'--ste-number-keyboard-clear-text-size': isNaN(fontsize) ? fontsize : `${fontsize - 8}px`,
+				'--ste-number-keyboard-confirm-text-size': isNaN(fontsize) ? fontsize : `${fontsize - 3}px`,
+				'--ste-number-keyboard-confirm-bg': this.confirmBg ? this.confirmBg : color.getColor().steThemeColor,
+				'--ste-number-keyboard-confirm-bg-active': utils.Color.formatColor(
+					this.confirmBg ? this.confirmBg : color.getColor().steThemeColor,
+					0.8
+				),
+				'--ste-number-keyboard-confirm-color': this.confirmColor,
+			};
+		},
+	},
+	watch: {
+		show: {
+			handler(v) {
+				this.dataShow = v;
+			},
+			immutable: true,
+		},
+		value: {
+			handler(v) {
+				if (v === null || v === undefined) this.dataValue = '';
+				else if (typeof v === 'string') this.dataValue = v;
+				else this.dataValue = String(v);
+			},
+			immutable: true,
+		},
+	},
+
+	methods: {
+		async onChange(v) {
+			try {
+				if (v === 'confirm') {
+					this.$emit('confirm', this.dataValue);
+					this.onClose();
+					return;
+				}
+				switch (v) {
+					case 'backspace':
+						this.dataValue = this.dataValue.slice(0, this.dataValue.length - 1);
+						this.$emit('backspace');
+						break;
+					case 'clear':
+						this.dataValue = '';
+						this.$emit('clear');
+						break;
+					default:
+						await this.beforInput(v);
+						this.$emit('click', v);
+						if (this.maxlength && this.dataValue.length >= this.maxlength) return;
+						this.dataValue += v;
+						break;
+				}
+				this.$emit('input', this.dataValue);
+				this.$emit('change', this.dataValue);
+				this.$emit('update:value', this.dataValue);
+			} catch (e) {
+				if (e) console.error(e);
+			}
+		},
+		onClose() {
+			this.dataShow = false;
+			this.$emit('update:show', false);
+			this.$emit('close');
+		},
+		onOpen() {
+			this.$emit('open');
+		},
+		async beforInput(v) {
+			let next = true;
+			const stop = new Promise((resolve, reject) => {
+				this.$emit(
+					'beforeinput',
+					v,
+					() => (next = false),
+					() => resolve(),
+					() => reject()
+				);
+			});
+			if (!next) {
+				await stop;
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-number-keyboard-root {
+	.keyboard-popup-head {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		padding-bottom: 30rpx;
+		color: #888;
+		.keyboard-close {
+			&:active {
+				background: rgba(200, 200, 200, 0.5);
+			}
+		}
+	}
+}
+</style>

package/components/ste-picker/ste-picker.vue

@@ -0,0 +1,258 @@
+<template>
+	<view class="ste-picker-root" :class="[rootClass]">
+		<view class="ste-picker-toolbar" v-if="showToolbar">
+			<text @click="cancel" class="cancel" :style="{ color: cancelColor }">{{ cancelText }}</text>
+			<text class="title">{{ title }}</text>
+			<text @click="confirm" class="confirm" :style="{ color: confirmColor }">{{ confirmText }}</text>
+		</view>
+		<picker-view
+			@change="change"
+			:indicatorStyle="cmpIndicatorStyle"
+			class="ste-picker-view"
+			:style="[cmpPickerViewStyle]"
+			:value="innerIndex"
+		>
+			<picker-view-column v-for="(col, key) in innerColumns" :key="key" class="ste-picker-column">
+				<view class="item" v-for="(item, index) in col" :key="index" :style="[cmpPickerItemStyle]">
+					{{ item }}
+				</view>
+			</picker-view-column>
+		</picker-view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-picker
+ * @description 选择器
+ * @property {Boolean}			show				是否显示picker弹窗（默认 false ）
+ * @property {Boolean}			showToolbar			是否显示顶部的操作栏（默认 true ）
+ * @property {String}			title				顶部标题
+ * @property {Array}			columns				对象数组，设置每一列的数据
+ * @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	每列中可见选项的数量（默认 6 ）
+ * @property {String}			keyName				选项对象中，需要展示的属性键名（默认 'text' ）
+ * @property {Array}			defaultIndex		各列的默认索引
+ * @event {Function} close		关闭选择器时触发
+ * @event {Function} cancel		点击取消按钮触发
+ * @event {Function} change		当选择值变化时触发
+ * @event {Function} confirm	点击确定按钮，返回当前选择的值
+ */
+export default {
+	props: {
+		columns: {
+			type: [Array, null],
+			default: () => [],
+		},
+		itemHeight: {
+			type: [String, Number, null],
+			default: 44,
+		},
+		visibleItemCount: {
+			type: [Number, null],
+			default: 5,
+		},
+		showToolbar: {
+			type: [Boolean, null],
+			default: true,
+		},
+		title: {
+			type: [String, null],
+			default: '',
+		},
+		cancelText: {
+			type: [String, null],
+			default: '取消',
+		},
+		cancelColor: {
+			type: [String, null],
+			default: '#969799',
+		},
+		confirmText: {
+			type: [String, null],
+			default: '确认',
+		},
+		confirmColor: {
+			type: [String, null],
+			default: '#0090FF',
+		},
+		defaultIndex: {
+			type: [Array, null],
+			default: () => [],
+		},
+		rootClass: {
+			type: [String, null],
+			default: '',
+		},
+	},
+	data() {
+		return {
+			// 上一次选择的列索引
+			lastIndex: [],
+			// 索引值 ，对应picker-view的value
+			innerIndex: [],
+			// 各列的值
+			innerColumns: [],
+			// 上一次的变化列索引
+			columnIndex: 0,
+		};
+	},
+	computed: {
+		cmpIndicatorStyle() {
+			// let style = `height: ${utils.addUnit(this.itemHeight)}`;
+			let style = `height: ${this.itemHeight}px`;
+			return style;
+		},
+		cmpPickerViewStyle() {
+			let borderRadius = utils.formatPx('12rpx');
+			let style = {
+				// height: utils.addUnit(this.visibleItemCount * this.itemHeight),
+				height: this.visibleItemCount * this.itemHeight + 'px',
+				'--border-radius': this.showToolbar ? `0 0 ${borderRadius} ${borderRadius}` : borderRadius,
+			};
+			return style;
+		},
+		cmpPickerItemStyle() {
+			let style = {
+				// height: utils.addUnit(this.itemHeight),
+				height: this.itemHeight + 'px',
+			};
+			return style;
+		},
+	},
+	watch: {
+		// 监听默认索引的变化，重新设置对应的值
+		defaultIndex: {
+			immediate: true,
+			handler(n) {
+				this.setIndexs(n, true);
+			},
+		},
+		// 监听columns参数的变化
+		columns: {
+			immediate: true,
+			handler(n) {
+				this.setColumns(n);
+			},
+		},
+	},
+	methods: {
+		addUnit: utils.addUnit,
+		change(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);
+
+			const changeObj = {
+				value: this.innerColumns.map((item, index) => item[value[index]]),
+				index,
+				indexs: value,
+				values,
+				columnIndex, // 变化的列的索引
+			};
+			this.$emit('change', changeObj);
+		},
+		// 设置index索引，此方法可被外部调用设置
+		setIndexs(index, setLastIndex) {
+			this.innerIndex = utils.deepClone(index);
+			if (setLastIndex) {
+				this.setLastIndex(index);
+			}
+		},
+		// 记录上一次的各列索引位置
+		setLastIndex(index) {
+			// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
+			// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
+			this.lastIndex = utils.deepClone(index);
+		},
+		// 设置整体各列的columns的值
+		setColumns(columns) {
+			this.innerColumns = utils.deepClone(columns);
+			// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
+			if (this.innerIndex.length === 0) {
+				this.innerIndex = new Array(columns.length).fill(0);
+			}
+		},
+		cancel() {
+			this.$emit('cancel');
+		},
+		confirm() {
+			this.$emit('confirm');
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-picker-root {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 12rpx;
+
+	&.ste-date-picker-view {
+		padding: 0 38rpx;
+		.ste-picker-toolbar {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+
+	.ste-picker-view {
+		width: 100%;
+		border-radius: var(--border-radius);
+		/deep/ .uni-picker-view-wrapper {
+			border-radius: var(--border-radius);
+		}
+		/deep/ .ste-picker-column {
+			border-radius: var(--border-radius);
+		}
+	}
+	.ste-picker-toolbar {
+		padding: 30rpx 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 28rpx;
+		.cancel {
+			cursor: pointer;
+		}
+
+		.title {
+			font-size: 32rpx;
+		}
+
+		.confirm {
+			cursor: pointer;
+		}
+	}
+	.item {
+		font-size: 26rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>