Vue 實現仿大衆點評買單的自定義鍵盤

wc-keyboard

基於 vue 封裝的一個自定義數字鍵盤 + 輸入框, 仿照大衆點評閃惠買單.

why?

1. 剛開始選用 input type = tel, 發現移動端沒有辦法輸入小數

2. 換成 input type = text, 發現喚起的鍵盤不是數字鍵盤

3. 最終選擇 input type = number, 又發現驗證規則有部分實現不了

效果

更新

後來我想了下, 能夠經過監聽鍵盤點擊事件, 而後拿到輸入值的 keyCode 從而進行值的驗證.
可是這樣缺乏一個自定義的輸入框, 輸入框沒法實現相似大衆點評那般.

感謝

xwpongithub/better-keyboard

使用方法

npm i wc-keyboard --save

import wcKeyBoard from 'wc-keyboard'
import 'wc-keyboard/style.css'
Vue.use(wcKeyBoad);

<wc-keyboard
    v-model="value"   // 輸入框的值
    inter="5"         // 限制整數位數
    decimal="2"       // 小數位數
    placeholder="詢問服務員後輸入"
    label="消費金額"/>

項目地址

項目地址