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

在开发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 = attrbutepopup.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>

2.3 样式调整

根据项目需求，可以进一步调整弹出框的样式，使其更符合整体UI设计。

3. 总结

通过封装SpecialCharPopup组件，我们实现了在Uniapp中点击键盘图标弹出特殊字符集，并将选中的字符插入到输入框中的功能。这种方式不仅提升了用户体验，还使得代码结构更加清晰，便于维护。

希望本文对你有所帮助，欢迎在评论区留言讨论！