uni-app 项目（关于自定义数字键盘组件）

最新推荐文章于 2024-07-08 09:13:09 发布

惠惠子~

最新推荐文章于 2024-07-08 09:13:09 发布

阅读量1.6k

点赞数 1

文章标签： uni-app vue.js javascript

本文链接：https://blog.csdn.net/Gao_Chuanhui/article/details/115076387

版权

这篇博客介绍了如何根据业务需求，使用uni-app框架封装一个自定义的数字键盘组件，该组件允许用户输入和修改金额，同时显示当前操作的项目及输入数值。内容涵盖了组件的UI设计、逻辑处理以及在实际页面中的应用。

摘要由CSDN通过智能技术生成

业务需求：金额，数字可以进行修改，自定义数字键盘组件，输入数字的同时可以显示正在修改的项目以及输入的数字大小
本质上还是组件的封装，以及组件间传值

页面：
在这里插入图片描述
封装组件：component/kx-numberKey/kx-numberKey.vue

UI部分：

<template>
	<view name='kxNumKey'>
	<--本质还是引入Uni-popup组件-->
		<uni-popup ref="popup" type="bottom">
			<view class="kxbottom">
				<block v-if="!kxbut">
				<--第一部分“取消，确认”部分-->
					<view class="kxbut">
						<text @click="close">取消</text>
						<text @click="ok">确定</text>
					</view>
					<--第二部：显示修改的项目和数字-->
					<view class="kxinput">
						<text>{
   {
   textS}}</text>
						<text v-if="data">{
   {
   data}}</text>
						<text class="default" v-else>{
   {
   placeholder||def}}</text>
						<text>{
   {
   textE}}</text>
					</view>
				</block>
				<--第三部分：数字按钮部分，包含“后退”和小数点-->
				<view class="kxnumcon">
					<view class=