7.从0做一个vue键盘组件

Kelvin写代码2024-05-27 22:03

文章目录

  • [1. 从0做一个键盘组件](#1. 从0做一个键盘组件)
    • [1.1. 最终效果](#1.1. 最终效果)
    • [1.2. 分析](#1.2. 分析)
    • [1.3. 实现](#1.3. 实现)
    • [1.4. 如何引用](#1.4. 如何引用)

1. 从0做一个键盘组件

首先是why的问题：为什么需要做键盘组件？

我们目前可知的场景：

  1. 在新增账单的时候，需要用到键盘
  2. 在比如从账单列表页，进行行项目编辑某笔账单的时候，也需要用到键盘

如果都是每个vue页面自己写键盘的话，就比较尴尬了，回头需要优化的时候，就要多处维护。

所以，我们需要定义一个键盘组件。

1.1. 最终效果

或者是编辑的时候：

1.2. 分析

  1. 主要是显示：item_name账单类目名称、bill_money账单金额、账单日期选择、提交账单、删除账单
  2. 如果是新增账单，就不显示"删除账单"按钮；如果是编辑账单，展示"删除账单"按钮。

1.3. 实现

整体的键盘样式都比较简单，可以直接通过布局来绘制。

直接上代码：

vue 复制代码 
<template>
	<view class="keyboardbox">
		<view style="display: flex; font-size: 50rpx; justify-content: space-between; padding: 20rpx 20rpx;">
			<view style="font-size: 40rpx;">{{item_name}}</view>
			<view color = '#bbb' >{{bill_money}}</view>
		</view>
		<u-input
		    placeholder="备注: 点击填写备注"
		    :border="true"
			v-model="bill_desc"
		    clearable
		></u-input>
		<view class="numkeyboard">
			<view class="num-area">
				<view class="row" v-for="(item,index) in numKeybordList" :key="index">
					<view class="item"
						v-for="(ite,idx) in item" hover-class="active" :hover-start-time="0"
						:hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
				</view>
			</view>
			<view class="btn-area">
				<view :class="['item','dateChoose']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
					@tap="dateVal">
						<view class="uni-input">{{choosedDateShow}}</view>
				</view>
				<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
					@tap="deleteVal">
					<u-icon name="arrow-leftward"></u-icon>
				</view>
				<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
					@tap="submit">
					完成
				</view>
				<view v-if="add_or_update=='编辑账单'" class="deletebill item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
					@tap="deleteBill">
					删除账单
				</view>
			</view>
		</view>
	</view>
	
	<u-picker mode="time"
		:default-time="date_picker_date" 
		v-model="date_picker_show" 
		:params="date_picker_params"
		@confirm="date_pick_ok"
		>
	</u-picker>
	
	<!-- <u-modal v-model="showDeleteBillModal" :content="content" negative-top=500></u-modal> -->
</template>



<script setup>
	import {
		ref, defineProps, defineEmits, watch, defineModel, computed
	} from 'vue';
	import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
	
	
	
	onLoad((e)=>{
		
	});
	
	const add_or_update = defineModel("add_or_update", { type: String, default: '' });
	const bill_id = defineModel("bill_id", { type: String, default: '' });
	const item_name = defineModel("item_name", { type: String, default: '' });
	const bill_money = defineModel("bill_money", { type: String, default: '' });
	const bill_desc = defineModel("bill_desc", { type: String, default: '' });
	const date_picker_date = defineModel("date_picker_date", {type: String, default: ''})
	
	console.log(add_or_update.value);
	console.log(date_picker_date.value);
	console.log(bill_id.value);
		
	const numKeybordList = ref([  // 键盘数值
		[1, 2, 3],
		[4, 5, 6],
		[7, 8, 9],
		[0, '.']
	]);
	
	// 默认不显示时间选择组件。在点击了"今天"之后，可以进行选择其他日期
	const date_picker_show = ref(false);
	// 选择时间时候的时间选择组件，仅展示年月日
	const date_picker_params = ref({
		year: true,
		month: true,
		day: true,
		hour: false,
		minute: false,
		second: false
	});
	
	// 监听contentId
	// watch(()=>props.item_name,(newValue, oldValue)=>{
	// 	console.log(newValue);
	//    item_name.value = newValue
	// },{ deep: true, immediate:true})
	
	
	/**
	 * 按键
	 * @param {Object}
	 */
	// const clickInfo = () => {
	const input = (val) => {
	// input(val) {
		let money = bill_money.value;
		if (money.length >= 10) {
			uni.showToast({
				title: '金额过大',
				icon: 'error'
			})
			return;
		}
		let arr = money.split('.');
		if (money == '0.00' && val != null) {
			money = val.toString();
		} else {
			let arr = money.split('.');
			if (val == '.' && arr.length > 1) {
		
			} else if (arr.length <= 1 || (arr.length > 1 && arr[1].length <= 1)) {
				if (money == '0' && val != '.') {
					money = val.toString();
				} else if (money != '0' || val != '0')
					money += val;
			}
		}
		bill_money.value = money;
		
	};
	/**
	 * 删除
	 */
	const deleteVal = () => {
	// deleteVal() {
		let money = bill_money.value; 
		console.log(money.length);
		if (money != '0.00' && money.length > 0)
			money = money.substring(0, money.length - 1)
		if (money.length <= 0)
			money = '0.00';
			
		bill_money.value = money;
	};
	const date_pick_ok = (callback_data) => {
	// date_pick_ok(callback_data) {
		date_picker_date.value = callback_data.year + '-' + callback_data.month + '-'  + callback_data.day;
		console.log('选择了:' + date_picker_date.value);
	};
	
	const dateVal = () => {
		date_picker_show.value = true;
	};
	
	const emit = defineEmits(['submit', 'deleteBill']);
	
	const submit = () => {
		emit(
		'submit',
		{
			bill_money: bill_money.value,
			bill_desc: bill_desc.value,
			date_picker_date: date_picker_date.value
		},
		(res)=>{
			//回调函数的方法体.处理自己的业务.
			console.log("获取到父组件执行结果的回调");
			console.log(res);
		 }
		);
	};
	
	const deleteBill = () => {
		
		uni.showModal({
			title: '提示',
			content: '确定要删除此账单吗？',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					emit(
					'deleteBill',
					{
						bill_id: bill_id.value
					},
					(res)=>{
						//回调函数的方法体.处理自己的业务.
						console.log("获取到父组件执行结果的回调");
						console.log(res);
					 }
					);
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		
		
		
	};
	
	const getTodayDateTime = () => {
		var date = new Date();
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
		var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
		var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
		var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
		var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
		return Y+M+D+h+m+s;
	};
	
	// 一个计算属性 ref
	const choosedDateShow = computed(() => {
		if (date_picker_date.value == getTodayDateTime().substring(0, 10)) {
			return '今天';
		}
		else {
			return date_picker_date.value;
		}
	})
	
</script>

<style lang="scss">
.keyboardbox {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
	
		.numkeyboard {
			height: 432rpx;
			display: flex;
			background-color: #ebedf0;
	
			.btn-area {
				width: 180rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
	
				.item {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-grow: 1;
				}
	
				.del {
					background-color: #ebedf0;
					color: #333;
	
					&.active {
						background-color: #f1f3f5;
					}
				}
	
				.confirem {
					background-color: #4fae70;
					color: #FFFFFF;
	
					&.active {
						background-color: #4fae70;
					}
				}
				
				.deletebill {
					background-color: #e94d26;
					color: #333;
				}
				
				.dateChoose {
					background-color: #f9db56;
					color: #2d2d2d;
						
					&.active {
						background-color: #f9db56;
					}
				}
			}
	
			.num-area {
				flex-grow: 1;
				display: flex;
				flex-wrap: wrap;
	
				.row {
					width: 100%;
					height: 25%;
					display: flex;
					margin-top: 1px;
	
					.item {
						flex-grow: 1;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
						border-right: 1px solid #ebedf0;
						width: 33.33%;
	
						&.active {
							background-color: #ebedf0;
						}
	
						&.z {
							flex-grow: 2;
							width: 66.66%;
						}
	
						&.disabled {
							background: #FFFFFF;
							color: #B9B9B9;
						}
					}
				}
	
			}
		}
	}
</style>

1.4. 如何引用

我们选择在父组件里面，通过一个u-popup来包裹此键盘组件，并在显示之前，把要传递进去显示的数据用v-model进行绑定：

  • 如果是添加账单的场景：父组件传值给子组件；子组件要调用父组件的submit方法；子组件要知道父组件submit方法的执行结果。
vue 复制代码 
<u-popup v-model="popup_show" mode="bottom" border-radius="14" height="600rpx">
		<keyboard-info 
		:item_name="item_name" 
		:bill_money="bill_money" 
		:bill_desc="bill_desc"
		:date_picker_date="date_picker_date"
		:add_or_update="'添加账单'"
		@submit="submit"
		>
		</keyboard-info>
	</u-popup>
js 复制代码 
// 上面的item_name、bill_money、bill_desc、date_picker_date要自行处理赋值。
selectItem(index) {
  this.bill_money = '0.00';// 点击弹出的金额默认还原为0
  this.bill_desc = '';// 理由同上
  this.select_item = index;
  this.popup_show = true;  // 展示u-popup，也就能展示出来键盘子组件了。
  if (this.current_type == 0) {
    this.item_name = this.expenditure_list[index-1].text
    this.item_img_path = this.expenditure_list[index-1].icon
    this.item_id = this.expenditure_list[index-1].id
  }
  else {
    this.item_name = this.income_list[index-1].text
    this.item_img_path = this.income_list[index-1].icon
    this.item_id = thisincome_list[index-1].id
  }
},
// submit方法，主要是用来给键盘组件在点击键盘的"提交"按钮时，将键盘组件录入的数据回传到父组件的submit方法中
// 这里要再说一下callback参数，其实是键盘组件为了获取到父组件执行了submit方法之后的返回值，以便在成功执行操作之后，将键盘隐藏或引导页面跳转
submit(data, callback) {
  console.log('收到键盘子组件触发submit方法');
  console.log(data);
  if (this.direction == '支出') {
    data.bill_money = -data.bill_money;
  }
  // console.log('bill_add.vue的 submit() 方法被调用');
  let bill_detail = {
    bill_id: this.direction + this.getTodayDateTime(),
    direction: this.direction,
    year: parseInt(this.date_picker_date.substring(0, 4)),
    month: parseInt(this.date_picker_date.substring(5,7)),
    day: parseInt(this.date_picker_date.substring(8,10)),
    week: this.getWeek(this.date_picker_date),
    item_name: this.item_name,
    item_img_path: this.item_img_path,
    item_id: parseInt(this.item_id),
    add_time: this.getTodayDateTime(),
    update_time: this.getTodayDateTime(),
    // 下面3个，是从键盘组件回调来的值
    bill_desc: data.bill_desc,
    bill_date: data.date_picker_date,
    bill_money: parseFloat(data.bill_money)
  }
  console.log(bill_detail);
  callback(true);
},

  • 如果是编辑账单的场景

    vue 复制代码 
    <u-popup v-model="popup_show" mode="bottom" border-radius="14" height="600rpx">
			<keyboard-info 
			:item_name="item_name" 
			:bill_money="bill_money" 
			:bill_desc="bill_desc"
			:date_picker_date="date_picker_date"
			:add_or_update="'编辑账单'"
			:bill_id="bill_id"
			@submit="submit"
			@deleteBill="deleteBill"
			>
			</keyboard-info>
		</u-popup>

    跟之前的分析是类似的。

相关推荐
燃先生._.17 分钟前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
2401_857600953 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600953 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL4 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
轻口味4 小时前
Vue.js 核心概念：模板、指令、数据绑定
vue.js
2402_857583494 小时前
基于 SSM 框架的 Vue 电脑测评系统：照亮电脑品质之路
前端·javascript·vue.js
java_heartLake5 小时前
Vue3之性能优化
javascript·vue.js·性能优化
ddd君317746 小时前
组件的声明、创建、渲染
vue.js
前端没钱6 小时前
从 Vue 迈向 React：平滑过渡与关键注意点全解析
前端·vue.js·react.js
顽疲7 小时前
springboot vue 会员收银系统 含源码 开发流程
vue.js·spring boot·后端
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程