uniapp添加車牌組件的實(shí)現(xiàn)與使用
更新時間：2022年05月09日 10:54:03 作者：可樂1028
uniapp是2019年火爆的一個Dcloud開發(fā)跨平臺前端工具,下面這篇文章主要給大家介紹了關(guān)于uniapp添加車牌組件的實(shí)現(xiàn)與使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.先看效果
2.插件實(shí)現(xiàn)
<!--
* @Author: dfh
* @Date: 2022-04-20 09:43:44
* @LastEditors: dfh
* @Modified By: dfh
* @describe:
-->
<template>
<view class='dialog-license-container' @click='cancelHandler'>
<view class="dialog-license-box" @click.stop="">
<text class="dialog-title">添加車牌</text>
<text class="dialog-sub-title">請輸入您的車牌號</text>
<view class="dialog-row-license-box">
<template v-for="(item,index) in brand">
<text v-if="item=='新能源'" :key='index' class="dialog-license new-energy" @click.stop="onBrandClick"
:data-index='index'>{{item}}</text>
<text v-else :key='index' class="dialog-license" :class="{'dialog-active': currentIndex===index}"
@click.stop="onBrandClick" :data-index='index'>{{item}}</text>
</template>
</view>
<button type="primary" class="dialog-add-license" @click.stop="submitHandler">確認(rèn)</button>
</view>
<!-- 省份 -->
<view class="dialog-province-box" v-if="isShowProvinceSelect" @click.stop="">
<view class="dialog-header">
<text class="dialog-cancel" @click.stop='cancelHandler'> 取消</text>
<text @click.stop="submitHandler">完成</text>
</view>
<view class="dialog-grid-box">
<text v-for="(item,index) in province" :key='index' @click.stop="provinceClick"
:data-item="item">{{item}}</text>
<view class="dialog-close-box" @click.stop="clearHandler">
<image src="../../static/add_car_delete.png" mode="widthFix" style="width:60rpx;height:60rpx" />
</view>
</view>
</view>
<!-- 車牌 -->
<view class="dialog-province-box" v-if="isShowBrandSelect" @click.stop="">
<view class="dialog-header">
<text class="dialog-cancel" @click.stop='cancelHandler'>取消</text>
<text @click.stop="submitHandler">完成</text>
</view>
<view class="dialog-grid-box">
<text v-for="(item,index) in brand_code" :key='index' @click.stop="brandCodeHandler" :data-item="item"
:class="{'dialog-gray-text':!item.isShow}">{{item.code}}</text>
<text @click.stop="clearHandler" class="dialog-close">刪除</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
onCancel: {
type: Function
},
onOk: {
type: Function
}
},
data() {
return {
isEnd: false, //是否可以結(jié)束輸入
isNotEnergy: true,
brand: ['', '', '', '', '', '', '', '新能源'],
currentIndex: 0,
province: ['京', '津', '滬', '渝', '冀', '豫', '云', '遼', '黑', '湘', '皖', '魯', '新', '蘇', '浙', '贛', '鄂', '桂', '甘',
'晉', '蒙', '陜', '吉', '閩', '貴', '粵', '青', '藏', '川', '寧', '瓊', '使', '無'
],
brand_code: [{
code: '1',
isShow: true
},
{
code: '2',
isShow: true
},
{
code: '3',
isShow: true
},
{
code: '4',
isShow: true
},
{
code: '5',
isShow: true
},
{
code: '6',
isShow: true
},
{
code: '7',
isShow: true
},
{
code: '8',
isShow: true
},
{
code: '9',
isShow: true
},
{
code: '0',
isShow: true
},
{
code: 'Q',
isShow: true
},
{
code: 'W',
isShow: true
},
{
code: 'E',
isShow: true
},
{
code: 'R',
isShow: true
},
{
code: 'T',
isShow: true
},
{
code: 'Y',
isShow: true
},
{
code: 'U',
isShow: true
},
{
code: 'O',
isShow: false
},
{
code: 'P',
isShow: true
},
{
code: '港',
isShow: false
},
{
code: 'A',
isShow: true
},
{
code: 'S',
isShow: true
},
{
code: 'D',
isShow: true
},
{
code: 'F',
isShow: true
},
{
code: 'G',
isShow: true
},
{
code: 'H',
isShow: true
},
{
code: 'J',
isShow: true
},
{
code: 'K',
isShow: true
},
{
code: 'L',
isShow: true
},
{
code: '澳',
isShow: false
},
{
code: 'Z',
isShow: true
},
{
code: 'X',
isShow: true
},
{
code: 'C',
isShow: true
},
{
code: 'V',
isShow: true
},
{
code: 'B',
isShow: true
},
{
code: 'N',
isShow: true
},
{
code: 'M',
isShow: true
},
{
code: '學(xué)',
isShow: false
},
{
code: '領(lǐng)',
isShow: false
}
],
}
},
computed: {
isShowProvinceSelect() {
return this.currentIndex === 0
},
isShowBrandSelect() {
return this.currentIndex > 0;
}
},
created() {},
methods: {
// 校驗(yàn)車牌
isVehicleNumber(vehicleNumber){
let result = false;
const express =
/^(([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9掛學(xué)警港澳使領(lǐng)]))$/;
result = express.test(vehicleNumber);
return result;
},
onBrandClick(e) {
console.log(e.currentTarget.dataset.index);
this.currentIndex = e.currentTarget.dataset.index;
},
provinceClick(e) {
console.log(e.currentTarget.dataset.item);
let {
brand,
currentIndex
} = this;
brand[currentIndex++] = e.currentTarget.dataset.item;
this.brand = brand;
this.currentIndex = currentIndex === brand.length ? currentIndex - 1 : currentIndex;
this.resetKeyboard();
this.brandIsEnd();
},
brandCodeHandler(e) {
console.log(e.currentTarget.dataset.item);
if (!e.currentTarget.dataset.item.isShow) return;
const item = e.currentTarget.dataset.item;
let {
brand_code,
currentIndex,
brand
} = this;
if (currentIndex === 6 && item.code === '澳' || item.code === '港' || item.code === '領(lǐng)' || item.code ===
'學(xué)') { //處理選擇了 港澳領(lǐng)學(xué)
brand[currentIndex] = item.code;
this.isNotEnergy = false; //設(shè)置最后一個味是否為灰色
} else {
brand[currentIndex++] = item.code;
this.isNotEnergy = true; //
}
this.brand = brand;
this.brand_code = [...brand_code];
this.currentIndex = currentIndex === brand.length ? currentIndex - 1 : currentIndex;
this.resetKeyboard();
this.brandIsEnd();
},
//判斷時候結(jié)束
brandIsEnd() {
let {
brand
} = this;
this.isEnd = !brand.includes('');
},
//重新設(shè)置鍵盤
resetKeyboard() {
let {
brand_code,
currentIndex
} = this;
if (currentIndex === 1) {
brand_code = brand_code.map(item => {
if (item.code === '澳' || item.code === '港' || item.code === '領(lǐng)' || item.code === '學(xué)') {
console.log('currentIndex', currentIndex)
return {
...item,
isShow: false
}
} else {
return {
...item,
isShow: true
}
}
})
} else if (currentIndex === 6) {
brand_code = brand_code.map(item => {
if (item.code === 'O') {
console.log('currentIndex', currentIndex)
return {
...item,
isShow: false
}
} else {
return {
...item,
isShow: true
}
}
})
} else {
brand_code = brand_code.map(item => {
if (item.code === '澳' || item.code === '港' || item.code === '領(lǐng)' || item.code === '學(xué)' ||
item.code === 'O') {
return {
...item,
isShow: false
}
} else {
return {
...item
}
}
})
}
this.brand_code = brand_code;
},
clearHandler() {
let {
brand,
currentIndex
} = this;
if (currentIndex <= 0) return;
console.log(currentIndex)
brand[currentIndex--] = currentIndex === 6 ? '新能源' : '';
this.brand = brand;
this.currentIndex = currentIndex;
this.resetKeyboard();
this.brandIsEnd();
},
submitHandler() {
const brand = [...this.brand];
if (brand[brand.length - 1] === '新能源') {
brand.pop();
}
console.log(brand)
const licensePlate = brand.join('');
const checked = this.isVehicleNumber(licensePlate);
if (checked) {
this.$emit('onOk', licensePlate);
this.cancelHandler();
} else {
console.log('請輸入正確的車牌號碼');
uni.showToast({
title: '請輸入正確的車牌號碼',
icon: 'none'
})
}
},
cancelHandler() {
this.isEnd = false; //是否可以結(jié)束輸入
this.isNotEnergy = true;
this.brand = ['', '', '', '', '', '', '', '新能源'];
this.currentIndex = 0;
this.$emit('onCancel');
}
}
}
</script>
<style lang="less">
page {
width: 100%;
height: 100%;
.dialog-license-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999 !important;
background-color: rgba(0, 0, 0, .3);
display: flex;
flex-direction: column;
align-items: center;
.dialog-license-box {
width: 650rpx;
height: 487rpx;
background: #FFFFFF;
border-radius: 35rpx;
margin-top: 170rpx;
display: flex;
flex-direction: column;
align-items: center;
.dialog-title {
margin-top: 50rpx;
font-size: 35rpx;
font-weight: 500;
color: #323233;
line-height: 49rpx;
}
.dialog-sub-title {
margin-top: 11rpx;
font-size: 24rpx;
font-weight: 400;
color: #979899;
line-height: 33rpx;
}
.dialog-row-license-box {
margin-top: 65rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: space-between;
// padding: 0 10rpx;
.dialog-license {
width: 64rpx;
height: 78rpx;
border-radius: 16rpx;
border: 2rpx solid #DEDEDE;
line-height: 84rpx;
text-align: center;
box-sizing: border-box;
font-size: 38rpx;
color: black;
line-height: 78rpx;
margin: 0 6rpx;
&.dialog-active {
border: 2rpx solid #80ADEB;
color: #007AFF;
}
&.new-energy {
background: rgba(18, 191, 145, 0.04);
border: 2rpx solid rgba(23, 186, 142, 0.46);
font-size: 18rpx;
color: #12BF91;
border: 2rpx solid #80ADEB;
}
}
}
.dialog-add-license {
margin-top: 65rpx;
width: 400rpx;
height: 78rpx;
line-height: 78rpx;
}
}
.dialog-province-box {
width: 100%;
height: 460rpx;
position: absolute;
bottom: 0;
left: 0;
border-top: 1rpx solid #e7e8ea;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-bottom: 30rpx;
background: #e7e8ea;
.dialog-header {
width: 100%;
height: 60rpx;
background: white;
box-sizing: border-box;
padding: 0 30rpx;
display: flex;
justify-content: space-between;
line-height: 60rpx;
font-size: 32rpx;
color: #0F5BFF;
.dialog-cancel {
color: gray;
}
}
.dialog-grid-box {
flex: 1;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
padding-right: 1%;
align-items: center;
margin-top: 20rpx;
>text {
width: 9%;
margin-left: 1%;
background: white;
text-align: center;
height: 70rpx;
line-height: 70rpx;
border-radius: 8rpx;
}
.dialog-gray-text {
color: #e7e8ea;
}
.dialog-close-box {
position: absolute;
bottom: 38rpx;
right: 10rpx;
width: 80rpx;
height: 70rpx;
background: #cfd0d4;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
}
.dialog-close {
background: #cfd0d4;
font-size: 24rpx;
}
}
}
}
}
</style>插件已發(fā)布uni-app插件市場，可以直接在插件市場搜索車牌號添加組件找到
3.插件使用
<template>
<view class="content">
<button type="default" @click="addLicenseDialog">添加車牌</button>
<cowain-add-license v-if="showLicenseDialog" @onCancel='cancelLicenseDialog' @onOk='okLicense'>
</cowain-add-license>
</view>
</template>
<script>
export default {
data() {
return {
showLicenseDialog: false, //是否顯示添加車牌的dialog
}
},
onLoad() {
},
methods: {
//顯示添加車牌
addLicenseDialog() {
this.showLicenseDialog = true;
},
//取消添加車牌
cancelLicenseDialog() {
this.showLicenseDialog = false;
},
//添加車牌成功
okLicense(license) {
console.log(license);
},
}
}
</script>總結(jié)
到此這篇關(guān)于uniapp添加車牌組件的文章就介紹到這了,更多相關(guān)uniapp添加車牌組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄约悍庋b的一個原生JS拖動方法(推薦)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
這篇文章主要介紹了Flash圖片上傳組件 swfupload使用方法及示例，swfupload的使用范圍十分的廣泛，功能也很強(qiáng)大，今天我們就先來簡單的通過范例來學(xué)習(xí)下。2015-03-03
這篇文章主要介紹了測量JavaScript函數(shù)的性能各種方式對比，對性能感興趣的同學(xué)，可以多實(shí)驗(yàn)一下2021-04-04
這篇文章主要給大家介紹了關(guān)于JavaScript對象詳解之js對象屬性的添加的相關(guān)資料,在JavaScript中對象是通過鍵值對來存儲數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過直接給對象添加屬性的方式來增加對象的屬性,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了小程序new Date()方法失效問題解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錄音功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
微信小程序?qū)崿F(xiàn)頁面下拉刷新和上拉加載功能詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面下拉刷新和上拉加載功能,結(jié)合實(shí)例形式分析了微信小程序頁面下拉刷新和上拉加載相關(guān)事件監(jiān)聽與功能實(shí)現(xiàn)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家介紹了JavaScript中的原型和原型鏈，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
js 多種變量定義(對象直接量，數(shù)組直接量和函數(shù)直接量)
js 多種變量定義(對象直接量，數(shù)組直接量和函數(shù)直接量),大家可以參考下，對于以后學(xué)習(xí)js 面向?qū)τ谂cjson操作會有幫助。2010-05-05
Chrome插件(擴(kuò)展)開發(fā)全攻略(完整demo)
Chrome插件是一個用Web技術(shù)開發(fā)、用來增強(qiáng)瀏覽器功能的軟件，它其實(shí)就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx后綴的壓縮包，本文給大家分享一個Chrome插件(擴(kuò)展)開發(fā)全攻略完整demo，感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05