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

1. 从0做一个键盘组件

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

我们目前可知的场景：

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

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

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

1.1. 最终效果

或者是编辑的时候：

1.2. 分析

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

1.3. 实现

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

直接上代码：

<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