home1022

2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
@@ -0,0 +1,131 @@
+<template>
+	<view class="u-page">
+		<u-navbar
+			title="键盘"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></u-navbar>
+		<u-gap height="20" bgColor="#fff"></u-gap>
+		<u-cell-group>
+			<u-cell
+			    :titleStyle="{fontWeight: 500}"
+			    @click="openKeyboard(index)"
+			    :title="item.title"
+			    v-for="(item, index) in list"
+			    :key="index"
+			    isLink
+			>
+				<image
+				    slot="icon"
+				    class="u-cell-icon"
+				    :src="item.iconUrl"
+				    mode="widthFix"
+				></image>
+			</u-cell>
+		</u-cell-group>
+		<u-keyboard
+		    :mode="keyData.mode"
+		    :dotDisabled="keyData.dotDisabled"
+		    :random='keyData.random'
+		    :show="show"
+		    @close="close"
+			@cancel="cancel"
+			@confirm="confirm"
+			@change="change"
+			@backspace="backspace"
+		></u-keyboard>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				input: '',
+				keyData: {
+					mode: '',
+					dotDisabled: false,
+					random: false,
+				},
+				list: [{
+						title: '车牌号键盘',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/car.png'
+					},
+					{
+						title: '数字键盘',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/number.png'
+					},
+					{
+						title: '身份证键盘',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/IdCard.png'
+					},
+					{
+						title: '隐藏键盘"."符号',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/dot.png'
+					},
+					{
+						title: '打乱键盘按键的顺序',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/order.png'
+					},
+				],
+				show: false
+			}
+		},
+		methods: {
+			navigateBack() {
+				uni.navigateBack();
+			},
+			// 点击展示不同的键盘
+			openKeyboard(indexNum) {
+				this.keyData = {
+					mode: '',
+					dotDisabled: false,
+					random: false,
+				}
+				if (indexNum == 0) {
+					this.keyData.mode = ''
+				} else if (indexNum == 1) {
+					this.keyData.mode = 'number'
+				} else if (indexNum == 2) {
+					this.keyData.mode = 'card'
+				} else if (indexNum == 3) {
+					this.keyData.mode = 'number'
+					this.keyData.dotDisabled = true
+				} else if (indexNum == 4) {
+					this.keyData.mode = 'number'
+					this.keyData.random = true
+				}
+				this.input = ''
+				this.show = true
+			},
+			change(e) {
+				// console.log('change');
+				this.input += e
+			},
+			close() {
+				// console.log('close');
+				this.show = false
+			},
+			cancel() {
+				// console.log('cancel');
+				this.show = false
+			},
+			confirm() {
+				// console.log('confirm');
+				this.show = false
+			},
+			backspace() {
+				this.input = this.input.slice(0, -1)
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+</style>