mp-license-plate
介紹
- mp-license-plate是一款基于微信小程序的車牌號輸入控件匠抗。
vue2版本
vue3版本
項目中使用
- 1檀葛、拷貝 /components/mp-license-plate 到你的項目中
- 2粥帚、全局或使用頁面中引入組件
"usingComponents": {
"mp-license-plate":"../../components/mp-license-plate/index"
}
- 3键兜、在需要的頁面中使用
<mp-license-plate
value="川A00001"
bindchange="change"
autoShow="{{true}}"
borderColor="red"
borderActiveColor="blue"
borderRadius="12"
borderWidth="4"
fontColor="black"
fontSize="32"/>
change(event) {
const val = event.detail;
console.log(val.array) //數(shù)組形式
console.log(val.value) //字符串形式
console.log(val.pass) //是否驗證通過
}
- 4岖赋、自定義展示車牌號碼巧还，設置useSlot為true
<mp-license-plate value="{{licensePlate}}" bindchange="change" autoShow="{{false}}" useSlot="{{true}}">
<view class="custom">
{{licensePlate}}
</view>
</mp-license-plate>
//自定義時 borderColor borderActiveColor borderWidth borderRadius fontColor fontSize 無效
//自定義時點擊事件根據(jù)當前長度計算鞭莽，即默認選中最后一位
- 展示如下
s1.jpeg
API
Props
| 名字 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| value | String | "" | 默認車牌號 |
| autoShow | Boolean | false | 自動展示鍵盤 |
| borderColor | String | #79aef3 | 輸入框邊框顏色 |
| borderActiveColor | String | #330aec | 輸入框選中的邊框顏色 |
| borderWidth | Number | 1 | 邊框?qū)挾?/td> |
| borderRadius | Number | 6 | 邊框圓角 |
| fontColor | String | #333333 | 文字顏色 |
| fontSize | Number | 16 | 文字大小 |
Events
| 名字 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| @change | 輸入改變時觸發(fā) | event.detail = {array:[],value:string,pass:false} |
Change Log
- 1.0.0
首次發(fā)版
完整代碼
- 小程序版本 mp-license-plate
- vue2版本 vue-license-plate
- vue3版本 vue3-license-plate
