uniapp添加車牌組件的實現(xiàn)與使用
更新時間：2022年05月09日 10:54:03 作者：可樂1028
uniapp是2019年火爆的一個Dcloud開發(fā)跨平臺前端工具,下面這篇文章主要給大家介紹了關(guān)于uniapp添加車牌組件的實現(xiàn)與使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
1.先看效果
2.插件實現(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">確認</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: '學',
isShow: false
},
{
code: '領(lǐng)',
isShow: false
}
],
}
},
computed: {
isShowProvinceSelect() {
return this.currentIndex === 0
},
isShowBrandSelect() {
return this.currentIndex > 0;
}
},
created() {},
methods: {
// 校驗車牌
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掛學警港澳使領(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 ===
'學') { //處理選擇了 港澳領(lǐng)學
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 === '學') {
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 === '學' ||
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)文章
silverlight線程與基于事件驅(qū)動javascript引擎（實現(xiàn)軌跡回放功能）
前一段時間一直在重構(gòu)工作站軌跡回放功能,一開始我覺得很簡單,但是后面引發(fā)了一系列奇怪的問題,讓我很疼,所以不得不寫個總結(jié)加深記憶,2011-08-08
這篇文章主要介紹了JS前端基于canvas給圖片添加水印,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
javascript 翻頁測試頁(動態(tài)創(chuàng)建標簽并自動翻頁)
javascript 翻頁測試頁(動態(tài)創(chuàng)建標簽并自動翻頁)，需要的朋友可以參考下。2009-12-12
關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)
在傳統(tǒng)面向?qū)ο笳Z言中，this關(guān)鍵字是個很乖的小孩，從不亂跑，該是誰的就是誰的?？墒窃贘avaScript中，我們發(fā)現(xiàn)它不那么乖，有時甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對它稍微做個總結(jié)。2010-10-10
這篇文章主要介紹了js 實現(xiàn)碰撞檢測的示例，幫助大家更好的制作js特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
本文通過三種方法給大家介紹js數(shù)組去除重復的方法，實用性非常高，感興趣的朋友一起學習吧2016-04-04
這篇文章主要介紹了JavaScript 聲明私有變量的兩種方式，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以了解下2021-02-02
javascript實現(xiàn)的全國省市縣無刷新多級關(guān)聯(lián)菜單效果代碼
這篇文章主要介紹了javascript實現(xiàn)的全國省市縣無刷新多級關(guān)聯(lián)菜單效果代碼,涉及javascript針對頁面元素的遍歷與屬性的動態(tài)操作技巧,需要的朋友可以參考下2016-08-08
我們在進行圖片保存的時候經(jīng)常會發(fā)現(xiàn)圖片跨域了,下面下面這篇文章主要給大家介紹了關(guān)于html2canvas圖片跨域問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了公眾號SVG動畫交互實戰(zhàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05