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

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

1. 功能概述

  • 功能描述:在父组件中放置一个键盘图标,点击后弹出特殊字符集,用户点击字符后,字符将被插入到输入框中。

  • 技术栈:Uniapp + Vue3 + uni-popup组件。

2. 实现步骤

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

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

javascript 复制代码
<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 在父组件中使用特殊字符弹出框

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

javascript 复制代码
<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中点击键盘图标弹出特殊字符集,并将选中的字符插入到输入框中的功能。这种方式不仅提升了用户体验,还使得代码结构更加清晰,便于维护。

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

相关推荐
白柚Y3 分钟前
小程序跳转H5或者其他小程序
前端·小程序
一袋米扛几楼986 分钟前
【前端】macOS 的 Gatekeeper 安全机制阻止你加载 bcrypt_lib.node 文件 如何解决
前端·安全·macos
_CodePencil_21 分钟前
CSS专题之层叠上下文
前端·javascript·css·html·css3·html5
monkey_slh27 分钟前
JS逆向案例—喜马拉雅xm-sign详情页爬取
android·开发语言·javascript
刘玲醉酒29 分钟前
offset三大家族
javascript
海天胜景31 分钟前
vue3 el-input type=“textarea“ 字体样式 及高度设置
javascript·vue.js·elementui
萌萌哒草头将军42 分钟前
🚀🚀🚀这几个为 vue 设计的 vite 插件,你一定要知道!
前端·vue.js·vite
知识分享小能手1 小时前
Typescript学习教程,从入门到精通,TypeScript 配置管理与编译器详解(19)
前端·javascript·学习·typescript·前端框架·ecmascript·jquery
比特森林探险记1 小时前
深入解析Go语言数据类型:从底层到高级应用
java·前端·golang
神秘敲码人1 小时前
CSS篇-2
前端·css