@gmcb/uv-ui 0.2.26

package/components/uv-keyboard-car/uv-keyboard-car.vue

@@ -0,0 +1,347 @@
+<template>
+	<view
+		class="uv-keyboard"
+		@touchmove.stop.prevent="noop"
+	>
+		<view
+			v-for="(group, i) in abc ? engKeyBoardList : areaList"
+			:key="i"
+			class="uv-keyboard__button"
+			:index="i"
+			:class="[i + 1 === 4 && 'uv-keyboard__button--center']"
+		>
+			<view
+				v-if="i === 3"
+				class="uv-keyboard__button__inner-wrapper"
+			>
+				<view
+					class="uv-keyboard__button__inner-wrapper__left"
+					hover-class="uv-hover-class"
+					:hover-stay-time="200"
+					@tap="changeCarInputMode"
+				>
+					<slot>
+						<template v-if="!customabc">
+							<text
+								class="uv-keyboard__button__inner-wrapper__left__lang"
+								:class="[!abc && 'uv-keyboard__button__inner-wrapper__left__lang--active']"
+							>中</text>
+							<text class="uv-keyboard__button__inner-wrapper__left__line">/</text>
+							<text
+								class="uv-keyboard__button__inner-wrapper__left__lang"
+								:class="[abc && 'uv-keyboard__button__inner-wrapper__left__lang--active']"
+							>英</text>
+						</template>
+					</slot>
+				</view>
+			</view>
+			<view
+				class="uv-keyboard__button__inner-wrapper"
+				v-for="(item, j) in group"
+				:key="j"
+			>
+				<view
+					:class="['uv-keyboard__button__inner-wrapper__inner',{'uv-keyboard__button__inner-wrapper__inner--disabled': isDisabled(i,j)}]"
+					:hover-stay-time="200"
+					@tap="carInputClick(i, j)"
+					:hover-class="isDisabled(i,j)?'none':'uv-hover-class'"
+				>
+					<text class="uv-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
+				</view>
+				<view class="uv-keyboard__button__inner-wrapper__disabled--mask" v-if="isDisabled(i,j)"></view>
+			</view>
+			<view
+				v-if="i === 3"
+				@touchstart="backspaceClick"
+				@touchend="clearTimer"
+				class="uv-keyboard__button__inner-wrapper"
+			>
+				<view
+					class="uv-keyboard__button__inner-wrapper__right"
+					hover-class="uv-hover-class"
+					:hover-stay-time="200"
+				>
+					<uv-icon
+						size="28"
+						name="backspace"
+						color="#303133"
+					></uv-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * keyboard 键盘组件
+	 * @description 此为uvui自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
+	 * @tutorial https://www.uvui.cn/components/keyboard.html
+	 * @property {Boolean} random 是否打乱键盘的顺序
+	 * @event {Function} change 点击键盘触发
+	 * @event {Function} backspace 点击退格键触发
+	 * @example <uv-keyboard ref="uKeyboard" mode="car" v-model="show"></uv-keyboard>
+	 */
+	export default {
+		name: "uv-keyboard",
+		mixins: [mpMixin, mixin, props],
+		emits: ['backspace','change','changeCarInputMode'],
+		data() {
+			return {
+				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+				abc: false
+			};
+		},
+		computed: {
+			areaList() {
+				let data = [
+					'京',
+					'沪',
+					'粤',
+					'津',
+					'冀',
+					'豫',
+					'云',
+					'辽',
+					'黑',
+					'湘',
+					'皖',
+					'鲁',
+					'苏',
+					'浙',
+					'赣',
+					'鄂',
+					'桂',
+					'甘',
+					'晋',
+					'陕',
+					'蒙',
+					'吉',
+					'闽',
+					'贵',
+					'渝',
+					'川',
+					'青',
+					'琼',
+					'宁',
+					'挂',
+					'藏',
+					'港',
+					'澳',
+					'新',
+					'使',
+					'学'
+				];
+				let tmp = [];
+				// 打乱顺序
+				if (this.random) data = this.$uv.randomArray(data);
+				// 切割成二维数组
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			},
+			engKeyBoardList() {
+				let data = [
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					0,
+					'Q',
+					'W',
+					'E',
+					'R',
+					'T',
+					'Y',
+					'U',
+					'I',
+					'O',
+					'P',
+					'A',
+					'S',
+					'D',
+					'F',
+					'G',
+					'H',
+					'J',
+					'K',
+					'L',
+					'Z',
+					'X',
+					'C',
+					'V',
+					'B',
+					'N',
+					'M'
+				];
+				let tmp = [];
+				if (this.random) data = this.$uv.randomArray(data);
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			},
+			isDisabled(i,j) {
+				return (i,j)=>{
+					let value = '';
+					if (this.abc) value = this.engKeyBoardList[i][j];
+					else value = this.areaList[i][j];
+					return this.disKeys.indexOf(value) > -1;
+				}
+			}
+		},
+		methods: {
+			// 点击键盘按钮
+			carInputClick(i, j) {
+				if(this.isDisabled(i,j)) return;
+				let value = '';
+				// 不同模式，获取不同数组的值
+				if (this.abc) value = this.engKeyBoardList[i][j];
+				else value = this.areaList[i][j];
+				// 如果允许自动切换，则将中文状态切换为英文
+				if (!this.abc && this.autoChange) this.$uv.sleep(200).then(() => this.abc = true)
+				this.$emit('change', value);
+			},
+			// 修改汽车牌键盘的输入模式，中文|英文
+			changeCarInputMode() {
+				this.abc = !this.abc;
+				this.$emit('changeCarInputMode',this.abc);
+			},
+			// 点击退格键
+			backspaceClick() {
+				this.$emit('backspace');
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					this.$emit('backspace');
+				}, 250);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$show-hover: 1;
+	@import '../../libs/css/variable.scss';
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-car-keyboard-background-color: rgb(224, 228, 230) !default;
+	$uv-car-keyboard-padding:6px 0 6px !default;
+	$uv-car-keyboard-button-inner-width:64rpx !default;
+	$uv-car-keyboard-button-inner-background-color:#FFFFFF !default;
+	$uv-car-keyboard-button-height:80rpx !default;
+	$uv-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
+	$uv-car-keyboard-button-border-radius:4px !default;
+	$uv-car-keyboard-button-inner-margin:8rpx 5rpx !default;
+	$uv-car-keyboard-button-text-font-size:16px !default;
+	$uv-car-keyboard-button-text-color:$uv-main-color !default;
+	$uv-car-keyboard-center-inner-margin: 0 4rpx !default;
+	$uv-car-keyboard-special-button-width:134rpx !default;
+	$uv-car-keyboard-lang-font-size:16px !default;
+	$uv-car-keyboard-lang-color:$uv-main-color !default;
+	$uv-car-keyboard-active-color:$uv-primary !default;
+	$uv-car-keyboard-line-font-size:15px !default;
+	$uv-car-keyboard-line-color:$uv-main-color !default;
+	$uv-car-keyboard-line-margin:0 1px !default;
+	$uv-car-keyboard-uv-hover-class-background-color:#BBBCC6 !default;
+
+	.uv-keyboard {
+		@include flex(column);
+		justify-content: space-around;
+		background-color: $uv-car-keyboard-background-color;
+		align-items: stretch;
+		padding: $uv-car-keyboard-padding;
+
+		&__button {
+			@include flex;
+			justify-content: center;
+			flex: 1;
+			/* #ifndef APP-NVUE */
+			/* #endif */
+
+			&__inner-wrapper {
+				position: relative;
+				box-shadow: $uv-car-keyboard-button-inner-box-shadow;
+				margin: $uv-car-keyboard-button-inner-margin;
+				border-radius: $uv-car-keyboard-button-border-radius;
+				
+				&__disabled--mask {
+					position: absolute;
+					left: 0;
+					top: 0;
+					bottom: 0;
+					right: 0;
+					width: $uv-car-keyboard-button-inner-width;
+					height: $uv-car-keyboard-button-height;
+				}
+
+				&__inner {
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					width: $uv-car-keyboard-button-inner-width;
+					background-color: $uv-car-keyboard-button-inner-background-color;
+					height: $uv-car-keyboard-button-height;
+					border-radius: $uv-car-keyboard-button-border-radius;
+					
+					&--disabled {
+						opacity: 0.5;
+					}
+
+					&__text {
+						font-size: $uv-car-keyboard-button-text-font-size;
+						color: $uv-car-keyboard-button-text-color;
+					}
+				}
+
+				&__left,
+				&__right {
+					border-radius: $uv-car-keyboard-button-border-radius;
+					width: $uv-car-keyboard-special-button-width;
+					height: $uv-car-keyboard-button-height;
+					background-color: $uv-car-keyboard-uv-hover-class-background-color;
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					box-shadow: $uv-car-keyboard-button-inner-box-shadow;
+				}
+
+				&__left {
+					&__line {
+						font-size: $uv-car-keyboard-line-font-size;
+						color: $uv-car-keyboard-line-color;
+						margin: $uv-car-keyboard-line-margin;
+					}
+
+					&__lang {
+						font-size: $uv-car-keyboard-lang-font-size;
+						color: $uv-car-keyboard-lang-color;
+
+						&--active {
+							color: $uv-car-keyboard-active-color;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.uv-hover-class {
+		background-color: $uv-car-keyboard-uv-hover-class-background-color;
+	}
+</style>

package/components/uv-keyboard-number/props.js

@@ -0,0 +1,19 @@
+export default {
+	props: {
+		// 键盘的类型，number-数字键盘，card-身份证键盘
+		mode: {
+			type: String,
+			default: 'number'
+		},
+		// 是否显示键盘的"."符号
+		dotDisabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否打乱键盘按键的顺序
+		random: {
+			type: Boolean,
+			default: false
+		}
+	}
+}

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

@@ -0,0 +1,201 @@
+<template>
+	<view
+		class="uv-keyboard"
+		@touchmove.stop.prevent="noop"
+	>
+		<view
+			class="uv-keyboard__button-wrapper"
+			v-for="(item, index) in numList"
+			:key="index"
+		>
+			<view
+				class="uv-keyboard__button-wrapper__button"
+				:style="[itemStyle(index)]"
+				@tap="keyboardClick(item)"
+				hover-class="uv-hover-class"
+				:hover-stay-time="200"
+			>
+				<text class="uv-keyboard__button-wrapper__button__text">{{ item }}</text>
+			</view>
+		</view>
+		<view
+			class="uv-keyboard__button-wrapper"
+		>
+			<view
+				class="uv-keyboard__button-wrapper__button uv-keyboard__button-wrapper__button--gray"
+				hover-class="uv-hover-class"
+				:hover-stay-time="200"
+				@touchstart.stop="backspaceClick"
+				@touchend="clearTimer"
+			>
+				<uv-icon
+					name="backspace"
+					color="#303133"
+					size="28"
+				></uv-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * keyboard 键盘组件
+	 * @description
+	 * @tutorial
+	 * @property {String}	mode		键盘的类型，number-数字键盘，card-身份证键盘
+	 * @property {Boolean}	dotDisabled	是否显示键盘的"."符号
+	 * @property {Boolean}	random		是否打乱键盘按键的顺序
+	 * @event {Function} change		点击键盘触发
+	 * @event {Function} backspace	点击退格键触发
+	 * @example
+	 */
+	export default {
+		mixins: [mpMixin, mixin, props],
+		emits: ['backspace','change'],
+		data() {
+			return {
+				backspace: 'backspace', // 退格键内容
+				dot: '.', // 点
+				timer: null, // 长按多次删除的事件监听
+				cardX: 'X' // 身份证的X符号
+			};
+		},
+		computed: {
+			// 键盘需要显示的内容
+			numList() {
+				let tmp = [];
+				if (this.dotDisabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+					} else {
+						return this.$uv.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
+					}
+				} else if (!this.dotDisabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
+					} else {
+						return this.$uv.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
+					}
+				} else if (this.mode == 'card') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
+					} else {
+						return this.$uv.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
+					}
+				}
+			},
+			// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+			itemStyle() {
+				return index => {
+					let style = {};
+					if (this.mode == 'number' && this.dotDisabled && index == 9) style.width = '464rpx';
+					return style;
+				};
+			},
+			// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
+			btnBgGray() {
+				return index => {
+					if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this
+							.dotDisabled))) return true;
+					else return false;
+				};
+			},
+		},
+		created() {
+
+		},
+		methods: {
+			// 点击退格键
+			backspaceClick() {
+				this.$emit('backspace');
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					this.$emit('backspace');
+				}, 250);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+			// 获取键盘显示的内容
+			keyboardClick(val) {
+				// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
+				if (!this.dotDisabled && val != this.dot && val != this.cardX) val = Number(val);
+				this.$emit('change', val);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$show-hover: 1;
+	@import '../../libs/css/variable.scss';
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-number-keyboard-background-color:rgb(224, 228, 230) !default;
+	$uv-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
+	$uv-number-keyboard-button-width:222rpx !default;
+	$uv-number-keyboard-button-margin:4px 6rpx !default;
+	$uv-number-keyboard-button-border-top-left-radius:4px !default;
+	$uv-number-keyboard-button-border-top-right-radius:4px !default;
+	$uv-number-keyboard-button-border-bottom-left-radius:4px !default;
+	$uv-number-keyboard-button-border-bottom-right-radius:4px !default;
+	$uv-number-keyboard-button-height: 90rpx!default;
+	$uv-number-keyboard-button-background-color:#FFFFFF !default;
+	$uv-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
+	$uv-number-keyboard-text-font-size:20px !default;
+	$uv-number-keyboard-text-font-weight:500 !default;
+	$uv-number-keyboard-text-color:$uv-main-color !default;
+	$uv-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
+	$uv-number-keyboard-uv-hover-class-background-color: #BBBCC6 !default;
+
+	.uv-keyboard {
+		@include flex;
+		flex-direction: row;
+		justify-content: space-around;
+		background-color: $uv-number-keyboard-background-color;
+		flex-wrap: wrap;
+		padding: $uv-number-keyboard-padding;
+
+		&__button-wrapper {
+			box-shadow: $uv-number-keyboard-button-box-shadow;
+			margin: $uv-number-keyboard-button-margin;
+			border-top-left-radius: $uv-number-keyboard-button-border-top-left-radius;
+			border-top-right-radius: $uv-number-keyboard-button-border-top-right-radius;
+			border-bottom-left-radius: $uv-number-keyboard-button-border-bottom-left-radius;
+			border-bottom-right-radius: $uv-number-keyboard-button-border-bottom-right-radius;
+
+			&__button {
+				width: $uv-number-keyboard-button-width;
+				height: $uv-number-keyboard-button-height;
+				background-color: $uv-number-keyboard-button-background-color;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+				border-top-left-radius: $uv-number-keyboard-button-border-top-left-radius;
+				border-top-right-radius: $uv-number-keyboard-button-border-top-right-radius;
+				border-bottom-left-radius: $uv-number-keyboard-button-border-bottom-left-radius;
+				border-bottom-right-radius: $uv-number-keyboard-button-border-bottom-right-radius;
+
+				&__text {
+					font-size: $uv-number-keyboard-text-font-size;
+					font-weight: $uv-number-keyboard-text-font-weight;
+					color: $uv-number-keyboard-text-color;
+				}
+
+				&--gray {
+					background-color: $uv-number-keyboard-gray-background-color;
+				}
+			}
+		}
+	}
+
+	.uv-hover-class {
+		background-color: $uv-number-keyboard-uv-hover-class-background-color;
+	}
+</style>

package/components/uv-line/props.js

@@ -0,0 +1,34 @@
+export default {
+	props: {
+		color: {
+			type: String,
+			default: '#d6d7d9'
+		},
+		// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等
+		length: {
+			type: [String, Number],
+			default: '100%'
+		},
+		// 线条方向，col-竖向，row-横向
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		// 是否显示细边框
+		hairline: {
+			type: Boolean,
+			default: true
+		},
+		// 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px"
+		margin: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否虚线，true-虚线，false-实线
+		dashed: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.line
+	}
+}

package/components/uv-line/uv-line.vue

@@ -0,0 +1,60 @@
+<template>
+	<view
+	    class="uv-line"
+	    :style="[lineStyle]"
+	>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * line 线条
+	 * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
+	 * @tutorial https://www.uvui.cn/components/line.html
+	 * @property {String}			color		线条的颜色 ( 默认 '#d6d7d9' )
+	 * @property {String | Number}	length		长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 ( 默认 '100%' )
+	 * @property {String}			direction	线条的方向，row-横向，col-竖向 (默认 'row' )
+	 * @property {Boolean}			hairline	是否显示细线条 (默认 true )
+	 * @property {String | Number}	margin		线条与上下左右元素的间距，字符串形式，如"30px"  (默认 0 )
+	 * @property {Boolean}			dashed		是否虚线，true-虚线，false-实线 (默认 false )
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @example <uv-line color="red"></uv-line>
+	 */
+	export default {
+		name: 'uv-line',
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			lineStyle() {
+				const style = {}
+				style.margin = this.margin
+				// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+				if (this.direction === 'row') {
+					// 此处采用兼容分开写，兼容nvue的写法
+					style.borderBottomWidth = '1px'
+					style.borderBottomStyle = this.dashed ? 'dashed' : 'solid'
+					style.width = this.$uv.addUnit(this.length)
+					if (this.hairline) style.transform = 'scaleY(0.5)'
+				} else {
+					// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+					style.borderLeftWidth = '1px'
+					style.borderLeftStyle = this.dashed ? 'dashed' : 'solid'
+					style.height = this.$uv.addUnit(this.length)
+					if (this.hairline) style.transform = 'scaleX(0.5)'
+				}
+				style.borderColor = this.color
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uv-line {
+		/* #ifndef APP-NVUE */
+		vertical-align: middle;
+		/* #endif */
+	}
+</style>

package/components/uv-line-progress/props.js

@@ -0,0 +1,29 @@
+export default {
+	props: {
+		// 激活部分的颜色
+		activeColor: {
+			type: String,
+			default: '#19be6b'
+		},
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 进度百分比，数值
+		percentage: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否在进度条内部显示百分比的值
+		showText: {
+			type: Boolean,
+			default: true
+		},
+		// 进度条的高度，单位px
+		height: {
+			type: [String, Number],
+			default: 12
+		},
+		...uni.$uv?.props?.lineProgress
+	}
+}