uniapp添加车牌组件的实现与使用
短信预约 -IT技能 免费直播动态提醒
1.先看效果
2.插件实现
<!--
* @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 class="lazy" data-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, //是否可以结束输入
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: '领',
isShow: false
}
],
}
},
computed: {
isShowProvinceSelect() {
return this.currentIndex === 0
},
isShowBrandSelect() {
return this.currentIndex > 0;
}
},
created() {},
methods: {
// 校验车牌
isVehicleNumber(vehicleNumber){
let result = false;
const express =
/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
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 === '领' || item.code ===
'学') { //处理选择了 港澳领学
brand[currentIndex] = item.code;
this.isNotEnergy = false; //设置最后一个味是否为灰色
} 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();
},
//判断时候结束
brandIsEnd() {
let {
brand
} = this;
this.isEnd = !brand.includes('');
},
//重新设置键盘
resetKeyboard() {
let {
brand_code,
currentIndex
} = this;
if (currentIndex === 1) {
brand_code = brand_code.map(item => {
if (item.code === '澳' || item.code === '港' || item.code === '领' || 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 === '领' || 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; //是否可以结束输入
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>插件已发布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>总结
到此这篇关于uniapp添加车牌组件的文章就介绍到这了,更多相关uniapp添加车牌组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
