在Uniapp中实现特殊字符弹出框并插入输入框

news2025/3/9 22:29:53

在开发Uniapp项目时，我们经常会遇到需要用户输入特殊字符的场景。为了提升用户体验，我们可以封装一个特殊字符弹出框，用户点击键盘图标后弹出该字符集，选择字符后自动插入到输入框中。本文将详细介绍如何实现这一功能。

1. 功能概述

功能描述：在父组件中放置一个键盘图标，点击后弹出特殊字符集，用户点击字符后，字符将被插入到输入框中。
技术栈：Uniapp + Vue3 + uni-popup组件。

2. 实现步骤

2.1 创建特殊字符弹出框组件

首先，我们创建一个名为SpecialCharPopup.vue的组件，用于显示特殊字符集并处理字符选择事件。

<template>
	<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}">
			<view class="keyboard-content h-p-100">
				<view v-for="item in charts" :key="item.id" :class="item.type == 'up'? 'key-item-up':'key-item'"  @click="handleInput(item.value)">{{item.value}}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const popup = ref(null)
	const props = defineProps({
		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'
		},
		{
			id:12,
			value: '𝑈ᵣₑₗ',
			type:'italic'
		},
		{
			id:13,
			value: '𝑘',
			type:'italic'
		}
	]
	const emit = defineEmits(['handleInput'])
	
	// 打开弹窗
	const attrbuteHandle = ref('')
	const open = (attrbute) => {
		// 操作的data属性值
		attrbuteHandle.value = attrbute
		popup.value.open()
	}
	
	// 关闭弹窗
	const close = () => {
		popup.value.close()
	}
	
	const handleInput = (value) => {
		emit('handleInput',value,attrbuteHandle.value)
	}
	
	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-up {
		box-sizing: border-box;
		/* width: 70rpx; */
		height: 70rpx;
		text-align: right;
		padding-right: 10rpx;
		line-height: 40rpx;
		border:1px solid #dcdfe6;
		border-radius: 4px;
		margin:20rpx;
	}
	.key-item{
		box-sizing: border-box;
		/* width: 70rpx; */
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border:1px solid #dcdfe6;
		border-radius: 4px;
		margin:20rpx;
	}
</style>

2.2 在父组件中使用特殊字符弹出框

在父组件中，我们可以通过点击键盘图标来打开特殊字符弹出框，并处理字符插入逻辑。

<template>
	<view>
		<input v-model="data.name" placeholder="请输入内容" />
		<view @click="openPopup">键盘图标</view>
		<SpecialCharPopup ref="specialCharPopup" @handleInput="handleInput" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import SpecialCharPopup from '@/components/SpecialCharPopup.vue';
	
	const data= ref({});
	const specialCharPopup = ref(null);
	
	const openPopup = () => {
		specialCharPopup.value.open('name');
	}
	
	const handleInput = (value, attrbute) => {
		data.value[attrbute] += value;
	}
</script>