fs-uni-template/components/fs-keyboard/fs-keyboard.vue

<template>
	<view>
		<keyboardCar
			v-if="mode === 'car'"
			:index="index"
			v-model="visible"
			@change="handleChange"
			@close="handleClose"
		></keyboardCar>

		<keyboardNum
			v-if="mode === 'number'"
			:index="index"
			v-model="visible"
			@change="handleChange"
			@close="handleClose"
		/>
	</view>
</template>

<script>
/**
 * 键盘组件
 * @description 键盘组件
 * @property {String} mode 键盘模式
 * @property {Number} index 激活项index
 * @event {Function} change 键盘项变化事件
 * @event {Function} close 键盘关闭事件
 */
export default {
	name: 'fs-keyboard'
}
</script>

<script setup>
import keyboardCar from './car.vue'
import keyboardNum from './number.vue'

const props = defineProps({
	modelValue: Boolean,
	mode: {
		type: String,
		default: 'car'
	},
	index: {
		type: Number,
		default: 0
	}
})
const emits = defineEmits(['update:modelValue', 'change', 'close'])

const visible = computed({
	get: () => props.modelValue,
	set: value => emits('update:modelValue', value)
})

const handleChange = item => {
	emits('change', item)
}

const handleClose = () => {
	emits('update:modelValue', false)
	emits('close')
}
</script>

<style lang="scss"></style>