在uni-app项目中自定义角标数字键盘弹窗的实现方案

<template>
	<!-- 底部弹窗容器，使用 uni-popup 实现弹窗基础功能 -->
	<uni-popup 
		ref="popup" 
		type="bottom" 
		background-color="#fff" 
		borderRadius="60rpx 60rpx 0 0"
	>
		<!-- 键盘容器，支持自定义高度和内边距 -->
		<view 
			class="w-p-100 mt-30 pr-15 pl-15 pb-15 border-box overflow-y" 
			:style="{height:height}"
		>
			<!-- 键盘按钮区域，使用 grid 布局实现6列均匀分布 -->
			<view class="keyboard-content h-p-100">
				<view 
					v-for="item in charts" 
					:key="item.id" 
					class="key-item"  
					@click="handleInput(item.value)"
				>
					{{item.value}}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue'

	// 弹窗实例引用，用于控制弹窗打开/关闭
	const popup = ref(null)

	// 组件 props 定义
	const props = defineProps({
		// 弹窗高度，默认 400rpx
		height: {
			type: String,
			default: '400rpx'
		},
	})

	// 角标键盘数据（上标数字 + 上标负号）
	const charts = [
		{ id: 1, value: '¹', type: 'up' },
		{ id: 2, value: '²', type: 'up' },
		{ id: 3, value: '³', type: 'up' },
		{ id: 4, value: '⁴', type: 'up' },
		{ id: 5, value: '⁵', type: 'up' },
		{ id: 6, value: '⁶', type: 'up' },
		{ id: 7, value: '⁷', type: 'up' },
		{ id: 8, value: '⁸', type: 'up' },
		{ id: 9, value: '⁹', type: 'up' },
		{ id: 10, value: '⁰', type: 'up' },
		{ id: 11, value: '⁻', type: 'up' } // 上标负号
	]

	// 定义组件事件，用于向父组件传递输入结果
	const emit = defineEmits(['handleInput'])

	// 记录当前操作的属性（可选，用于父组件区分多个输入场景）
	const attrbuteHandle = ref('')

	/**
	 * 打开弹窗
	 * @param {String} attrbute - 可选参数，标识当前操作的输入字段
	 */
	const open = (attrbute) => {
		attrbuteHandle.value = attrbute
		popup.value.open()
	}

	/**
	 * 关闭弹窗
	 */
	const close = () => {
		popup.value.close()
	}

	/**
	 * 处理键盘点击事件
	 * @param {String} value - 选中的角标字符
	 */
	const handleInput = (value) => {
		// 向父组件发射事件，传递选中的字符和当前操作的属性
		emit('handleInput', value, attrbuteHandle.value)
	}

	// 暴露组件方法，允许父组件调用 open 和 close
	defineExpose({
		open,
		close
	})
</script>

<style scoped>
	/* 键盘容器样式：网格布局 + 背景色 + 边框圆角 */
	.keyboard-content {
		background-color: #f5f5f5;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* 6列均匀分布 */
		border: 1px solid #ccc;
		border-radius: 10rpx;
	}

	/* 键盘按钮样式：居中对齐 + 边框 + 圆角 + 间距 */
	.key-item {
		box-sizing: border-box;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		margin: 20rpx;
		background-color: #fff;
		transition: background-color 0.2s;
	}

	/* 按钮点击反馈 */
	.key-item:active {
		background-color: #e8f4f8;
		border-color: #409eff;
	}

	/* 辅助样式（适配 UniApp 尺寸单位） */
	.w-p-100 { width: 100%; }
	.h-p-100 { height: 100%; }
	.mt-30 { margin-top: 30rpx; }
	.pr-15 { padding-right: 15rpx; }
	.pl-15 { padding-left: 15rpx; }
	.pb-15 { padding-bottom: 15rpx; }
	.border-box { box-sizing: border-box; }
</style>

<template>
	<view class="container">
		<!-- 示例：输入框 + 打开键盘按钮 -->
		<view class="input-group">
			<input 
				v-model="inputValue" 
				placeholder="点击下方按钮输入角标"
				class="input"
			/>
			<button @click="openSubscriptKeyboard">打开角标键盘</button>
		</view>

		<!-- 引入角标键盘组件 -->
		<subscript-keyboard 
			ref="subscriptKeyboard" 
			height="450rpx"  <!-- 自定义弹窗高度 -->
			@handleInput="handleSubscriptInput"
		/>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	// 引入组件（根据实际文件路径调整）
	import SubscriptKeyboard from '@/components/SubscriptKeyboard/SubscriptKeyboard.vue'

	const inputValue = ref('')
	const subscriptKeyboard = ref(null)

	/**
	 * 打开角标键盘
	 */
	const openSubscriptKeyboard = () => {
		// 可传递参数标识当前操作的输入字段（如多个输入框时使用）
		subscriptKeyboard.value.open('inputValue')
	}

	/**
	 * 处理角标输入回调
	 * @param {String} value - 选中的角标字符
	 * @param {String} attr - 当前操作的属性名
	 */
	const handleSubscriptInput = (value, attr) => {
		// 将选中的角标字符拼接到输入框
		inputValue.value += value
		// 如需自动关闭弹窗，可添加：subscriptKeyboard.value.close()
	}
</script>

<style scoped>
	.container {
		padding: 50rpx;
	}
	.input-group {
		margin-bottom: 30rpx;
	}
	.input {
		border: 1px solid #ccc;
		border-radius: 8rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}
	button {
		background-color: #409eff;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 15rpx;
	}
</style>

// 扩展 charts 数据
const charts = [
	// 上标数字
	{ id: 1, value: '¹', type: 'up' },
	// ... 其他上标数据
	// 下标数字
	{ id: 12, value: '₁', type: 'down' },
	// ... 其他下标数据
]

// 添加 Prop 控制显示类型
const props = defineProps({
	// ... 原有 props
	type: {
		type: String,
		default: 'up', // up-上标，down-下标
		validator: (value) => ['up', 'down'].includes(value)
	}
})

// 渲染时根据 type 过滤数据
const displayCharts = computed(() => {
	return charts.filter(item => item.type === props.type)
})