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-inputplaceholder="備注: 點擊填寫備注":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;};// 一個計算屬性 refconst 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方法的執行結果。

<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>

// 上面的item_name、bill_money、bill_desc、date_picker_date要自行處理賦值。
selectItem(index) {this.bill_money = '0.00';// 點擊彈出的金額默認還原為0this.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].textthis.item_img_path = this.expenditure_list[index-1].iconthis.item_id = this.expenditure_list[index-1].id}else {this.item_name = this.income_list[index-1].textthis.item_img_path = this.income_list[index-1].iconthis.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);
},

• 如果是編輯賬單的場景

  <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>
  

  跟之前的分析是類似的。