微信小程序实现输入车牌号码的功能vue版（附效果图）

已于 2023-01-07 16:59:56 修改
阅读量9.4k 收藏 8
点赞数 2
分类专栏： 前端 文章标签： vue.js html5 Powered by 金山文档
于 2023-01-07 15:56:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyhua/article/details/128591771
版权

1，车牌第一位时选择录入图：

2，输入车牌第二位及后面的号码选择图

3 ，换普通车牌图

下面是完整代码

<template>
    <view class="container">
        <!-- 车牌号码输入框 -->
        <view class="carNumber" style="margin-top: 50rpx;">
            <view class="weui-cells__title"></view>
            <view v-if="showNewPower" class="title-row"><span class="btn-to-title">新能源车牌</span><span class="btn-to"
                    @click="showNewPower=false">切换</span></view>
            <view v-if="!showNewPower" class="title-row"><span class="btn-to-title">普通车牌</span><span class="btn-to"
                    @click="showNewPower=true">切换</span></view>
            <view class="carNumber-items">
                <view class="carNumber-items-box" @click='openKeyboard'>
                    <view class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</view>
                    <view class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</view>
                </view>
             
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[2] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[3] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[4] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[5] || ''}}</view>
                <view class="carNumber-item" @click='openKeyboard'>{{carnum[6] || ''}}</view>

                <!-- 新能源 -->
                <view v-if="!showNewPower" class="carNumber-item carNumber-item-newpower" @click='showPowerBtn'>
                    <view class="carNumber-newpower-add">+</view>
                    <view>新能源</view>
                </view>
                <view v-if="showNewPower" class="carNumber-item" @click='openKeyboard'>
                    {{carnum[7]||''}}
             </view>

            </view>

        </view>

        <!-- 提交车牌 -->
        <button class="carNumberBtn bgColor" @click='submitNumber' type="default">确定</button>

        <!-- 虚拟键盘 -->
        <view class="keyboard" v-show='KeyboardState'>
            <view class="keyboardClose">
                <view class="keyboardClose_btn" @click='closeKeyboard'>关闭</view>
            </view>
            <!-- 省份简写键盘 -->
            <view class="keyboard-item" v-show="!carnum[0]">
                <view class="keyboard-line" v-for="(item,index) in provinces" :key="index">

                    <view v-if="index==0" style="text-align: left;padding-left: 3%;">
                        <text>常用</text>&emsp;
                        <view class="keyboard-btn" v-for="(item,index2) in item" :key="index2" :data-val="item"
                            @click='bindChoose'>{{item}}</view>

                    </view>
                    <view v-if="index>0" class="keyboard-btn" v-for="(item,index2) in item" :key="index2"
                        :data-val="item" @click='bindChoose'>{{item}}</view>

                </view>
                <view class="keyboard-del" @click='bindDelChoose'>
                    <text>删除</text>
                </view>
            </view>
            <!-- 车牌号码选择键盘 -->
            <view class="keyboard-item iscarnumber" v-show="carnum[0]">
                <view class="keyboard-line" v-for="(item,index) in numbers" :key="index">
                    <view v-if="index==0" style="text-align: left;padding-left: 3%;">
                        <text>常用</text>&emsp;
                        <view class="keyboard-btn" v-for="(item,index2) in item" :key="index2" :data-val="item"
                            @click='bindChoose'>{{item}}</view>
                    </view>
                    <view v-if="index>0" class="keyboard-btn" v-for="(item,index2) in item" :key="index2"
                        :data-val="item" @click='bindChoose'>{{item}}</view>
                </view>
                <view class="keyboard-del" @click='bindDelChoose'>
                    <text>删除</text>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import comm from '../../static/data/commFunc.js'
    import cfg from '../../static/data/config.js'
    var r = cfg.router;
    export default {
        data() {
            return {
                plateNo: "",
                // 省份简写
                provinces: [
                    ['粤'],
                    ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
                    ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
                    ['桂', '琼', '渝', '川', '贵', '云', '藏'],
                    ['陕', '甘', '青', '宁', '新'],
                ],
                // 车牌输入
                numbers: [
                    ["S", "B", "L", "A"],
                    ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
                    ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
                    ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],
                    ["W", "X", "Y", "Z", "港", "澳", "学"]
                ],
                carnum: [],
                showNewPower: true,
                KeyboardState: true,
            };
        },
        onShareAppMessage(res) {
            return {
                title: 'xxx',
                path: '/pages/pages/home'
            }
        },
        onShow() {
            let memberPlateNo = comm.getCache("memberPlateNo")
            if (memberPlateNo) {
                this.plateNo = memberPlateNo;
                this.carnum = memberPlateNo.split('', 8);
                if (this.carnum.length == 7) {
                    this.showNewPower = false;
                } else if (this.carnum.length == 8) {
                    this.showNewPower = true;
                }

            }
        },
        methods: {
            bindChoose(e) {

                if (!this.carnum[7]) {
                    var arr = [];
                    arr[0] = e.target.dataset.val;
                    this.carnum = this.carnum.concat(arr)

                }
            },
            bindDelChoose() {
                if (this.carnum.length != 0) {
                    if (this.carnum.length > 0) {
                        let p = this.carnum.length - 1;
                        let carArr = [];
                        for (var i = 0; i < p; i++) {
                            carArr.push(this.carnum[i]);
                        }
                        this.carnum = carArr;
                    }
                }
            },
            showPowerBtn() {
                this.showNewPower = true;
                this.KeyboardState = true;
            },
            closeKeyboard() {
                this.KeyboardState = false;
            },
            openKeyboard() {
                this.KeyboardState = true;
            },
            importPlateNo(e) {
                this.plateNo = e.detail.value
            },
            submitNumber() {
                var that = this;
                if (that.carnum[6]) {
                    wx.showLoading();
                    var number;
                    if (!that.showNewPower) {
                        if (that.carnum[6]) {
                            number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] +
                                that.carnum[5] + that.carnum[6];
                            that.plateNo = number;
                            that.summit();
                        } else {
                            wx.showToast({
                                title: '请填写完整的车牌号码',
                                duration: 2000
                            })
                        }
                    } else {
                     if (that.carnum[7]) {
                            number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] +
                                that.carnum[5] + that.carnum[6] + that.carnum[7];
                            that.plateNo = number;
                         that.summit();
                        } else {
                            wx.showToast({
                                title: '请填写完整的车牌号码',
                                duration: 2000
                            })
                        }
                    }
                } else {
                    wx.showToast({
                        title: '请填写完整的车牌号码',
                        duration: 2000
                    })
                }
            },
            summit() {
                let plateNo = this.plateNo;
                let data = {
                    plateNo: plateNo
                }
                 // 调用后台，需要根据实际情况替换。
                comm.request("POST", "/xxx/xxx", data, (res) => {
                    wx.hideLoading();
                    if (res.data.ret_code == 200) {
                        comm.setCache("memberPlateNo", plateNo);
                        wx.showModal({
                            content: '绑定成功',
                            showCancel: false,
                            success() {
                                wx.navigateBack()
                            }
                        })
                    } else {
                        wx.showModal({
                            content: res.data.ret_msg,
                            showCancel: false,
                            success() {

                            }
                        })
                    }

                })

            }
        }
    }
</script>

<style lang="less">
    .my_car {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 250rpx;
    }

    .my_car image {
        width: 364rpx;
        height: 334rpx;
    }

    .add_car_btn {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50rpx;
    }

    .add_car_btn image {
        width: 324rpx;
        height: 112rpx;
    }

    .add_car {
        width: 92%;
        margin-left: 4%;
        background-color: #F5F5F5;
        display: flex;
        align-items: center;
    }

    .page {
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .weui-cells__title {
        margin-top: .77em;
        margin-bottom: .3em;
        padding-left: 15px;
        padding-right: 15px;
        color: #999;
        font-size: 14px;

    }

    /* 虚拟键盘 */
    .keyboard {
        height: auto;
        background: #d1d5d9;
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
    }

    .keyboard-item {
        padding: 10rpx 0 5rpx 0;
        position: relative;
        display: block;
    }

    /* 关闭虚拟键盘 */
    .keyboardClose {
        height: 70rpx;
        background-color: #f7f7f7;
        overflow: hidden;
    }

    .keyboardClose_btn {
        float: right;
        line-height: 70rpx;
        font-size: 15px;
        padding-right: 30rpx;
    }

    /* 虚拟键盘-省缩写 */

    /* 虚拟键盘-行 */
    .keyboard-line {
        margin: 0 auto 30rpx;
        text-align: center;
    }

    .iscarnumber .keyboard-line {
        text-align: left;
        margin-left: 5rpx;
    }

    /* 虚拟键盘-单个按钮 */
    .keyboard-btn {
        font-size: 17px;
        color: #333333;
        background: #fff;
        display: inline-block;
        padding: 18rpx 0;
        width: 63rpx;
        text-align: center;
        box-shadow: 0 2rpx 0 0 #999999;
        border-radius: 10rpx;
        margin: 5rpx 6rpx;
    }

    /* 虚拟键盘-删除按钮 */
    .keyboard-del {
        font-size: 17px;
        color: #333333;
        background: #A7B0BC;
        display: inline-block;
        padding: 15rpx 55rpx;
        box-shadow: 0 2rpx 0 0 #999999;
        border-radius: 10rpx;
        margin: 5rpx;
        position: absolute;
        bottom: 37rpx;
        right: 6rpx;
    }

    .keyboard-del-font {
        font-size: 25px;
        width: 40rpx;
        height: 40rpx;
        display: block;
    }

    /* 车牌号码 */
    .carNumber-items {
        text-align: center;
    }

    .carNumber-items-box {
        width: 158rpx;
        height: 90rpx;
        border: 2rpx solid #CCCCCC;
        border-radius: 4rpx;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 30rpx;
    }

    .carNumber-items-box-list {
        width: 76rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        display: inline-block;
        font-size: 18px;
        margin: 10rpx 0;
        vertical-align: middle;
    }

    .carNumber-items-province {
        border-right: 1rpx solid #ccc;
    }

    .carNumber-items-box::after {
        content: "";
        width: 6rpx;
        height: 6rpx;
        position: absolute;
        right: -22rpx;
        top: 40rpx;
        border-radius: 50%;
        background-color: #ccc;
    }

    .carNumber-item {
        width: 76rpx;
        height: 90rpx;
        font-size: 18px;
        text-align: center;
        border: 2rpx solid #CCCCCC;
        border-radius: 4rpx;
        line-height: 90rpx;
        display: inline-block;
        margin: 0 4rpx;
        vertical-align: middle;
    }

    /* 新能源 */
    .carNumber-item-newpower {
        border: 2rpx dashed #A8BFF3;
        background-color: #F6F9FF;
        color: #A8BFF3;
        font-size: 12px;
        line-height: 45rpx;
    }
    /* 新能源 +号 */
    .carNumber-newpower-add {
        font-size: 18px;
    }

    /* 确认按钮 */
    .carNumberBtn {
        background: #5CC78F !important;
        color: #fff !important;
        border-radius: 40rpx;
        margin: 30px auto;
        width: 290px;
        height: 43px;
        line-height: 43px;
        border-radius: 21.5px;
        text-align: center;
        font-size: 18px;
    }

    /* 切换车牌按钮 */
    .btn-to {
        text-align: left;
        margin-left: 3%;
        color: #A8BFF3;
        font-size: 20px;
        border: 2rpx solid #A8BFF3;
        border-radius: 10rpx;

    }

    /* 切换车牌标题 */
    .btn-to-title {
        text-align: left;
        padding-left: 3%;
        font-size: 20px;
    }

    /* 切换车牌行 */
    .title-row {
        margin-bottom: 20px;
    }
</style>
qyhua
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
carplate:用Javascript来生成小汽车车牌的预览效果图
07-13
Carplate 用Javascript来生成小汽车车牌的预览效果图 Eric SHI longwosion#gmail.com 文字和图片，参照《GA36--2007》相关说明和尺寸 目前只支持小汽车牌照生成，不考虑支持更多的牌照，不考虑支持导出功能 支持汉字如下：京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新港澳使领学警 支持字母如下：ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
微信小程序实现图片选择并预览功能
12-29
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码，供大家参考，具体内容如下 (一)、功能说明 做的是一个意见反馈，用户发表意见和上传图片，限制了最多只能上传三张图片。 其他要点：textarea使用，底部保存按钮固定 (二）、小程序接口说明 wx.chooseLocation(Object object) 从本地相册选择图片或使用相机拍照。 (三)、效果图 效果如下：   (四)、代码展示 WXML页面： <textarea name
基于springboot+vue的机动车号牌管理系统
最新发布
weixin_mtyeducation
03-25 758
本系统项目代码工整，结构清晰，适合选题：机动车、号牌管理、前后端分离等。系统采用springboot+vue整合开发，前端主要使用了element-ui框架、项目后端主要使用了springboot，数据层采用mybatis。
微信小程序车牌号输入功能页demo完整源码下载.zip
04-16
微信小程序车牌代码（包含新能源）
php车牌输入,微信小程序车牌号码模拟键盘输入功能的实现代码
weixin_39843677的博客
03-11 365
先来一波预览图。预览图片一：预览图二：预览图三：预览图四：预览图五：大概的效果就和原来图差不多。思路解析：车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码，(注：其中的八位数的车牌号码为能源车的车牌号码。)大概的逻辑思维，不包含代码获取值什么的或者验证其...
微信小程序实现输入车牌号码的功能（附效果图）
Missbelover的博客
10-06 1万+
微信小程序实现输入车牌号码的功能
微信小程序 车牌 键盘
weixin_45102016的博客
10-20 294
微信小程序 车牌 键盘 如图： 源码：keyboard.js Component({ externalClasses: ['v-panel'], properties: { isShow: { type: Boolean, value: false, }, buttonBorder: { type: String, value: "1px solid #ccc" }
html5车牌效果,快速输入车牌号效果
weixin_33518565的博客
06-03 1万+
HtmlCssJs点击下面任意方框京沪浙苏粤鲁晋冀豫川渝辽吉黑皖鄂津贵云桂琼青新藏蒙宁甘陕闽赣清空关闭1234567890QWERTYUPASDFGHJKLZXCVBNMCdelOK#key1,#key2 {border:solid hsla(213,13%,83%,1.00) 1px;margin-top:10px;background-color:hsla(213,13%,83%,1.00);...
微信小程序 自助停车，输入车牌号功能实现
elanbom的博客
11-15 3754
微信小程序 自助停车，输入车牌号功能实现 话不多说，先上效果图 效果图 功能列表 1.根据输入位置自动显示下方键盘为候选地区或数字字母 2.输入位置后自动跳转至下一位 3.删除号码后自动返回上一位 4.点击可选填新能源号码 代码复现 3.1 html结构 <view class="root"> <view class="title">请输入要授权的车牌号<text class="gray f-26">（新能源车辆选填）</text&g
车牌输入法 车牌号快捷输入法 支持普通车牌&新能源车牌
qq_33415990的博客
01-27 3335
车牌输入法 车牌号快捷输入法 支持普通车牌&新能源车牌 效果图如下 上代码 前提：import plateInput from ‘@/components/uni-plate-input/uni-plate-input.vue’; 下载1：uni-plate-input.less 下载2：uni-plate-input.css 下载2：uni-plate-input.vue 头部搜索框添加 再到相关页面添加车牌输入法控件（注意默认隐藏） 设置头部搜索框触发车牌输入法 将车牌输入法键
微信小程序自定义车牌号输入键盘效果-案例
JackieDYH的博客
11-13 3948
自定义车牌号输入键盘 <!--pages/text/index.wxml--> <mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="键盘" back="{{true}}"></mp-navigation-bar> <view class="y.
【微信小程序】实现聊天功能完整实例代码附效果图和注释
03-29
(此图片来源于网络，如有侵权，请联系删除! ) 下面是完整代码，可以实现发送以后自动把屏幕的焦点放在最后一条信息\nclass='tab'> class='lan'>{{tabdata.title}} class='tent'> {{tabdata.attribute_attribute}} class='fl_r '>{{tabdata.num}} class='xiahuaxian1'> class='fabu'>发布时间: {{tabdata.time_agree}}\nclass='news'> class='xiahuaxian1 xiahuaxi
微信小程序车牌号码模拟键盘输入功能的实现代码
10-17
主要介绍了微信小程序车牌号码模拟键盘输入功能的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 车牌号输入专用键盘
04-19
vue 车牌号输入专用键盘， 提供输入框自定义插槽、只读等功能
【微信小程序源码】车牌号输入、地图标注功能demo
02-12
能学到什么：怎么在地图上标注用户头像、设计完好的车牌输入功能（包括新能源车） 阅读建议：下载后解压，然后用微信开发者工具打开即可运行。需要有一定的js、html基础，如果不会也没关系，拿来即可使用。
在线合成车牌照片【模拟车牌，用于车牌识别项目测试】
热门推荐
lzl640的博客
06-16 10万+
在线合成车牌照片，用于车牌识别项目测试
Android自定义输入车牌号键盘、车牌简称 | 数字 | 字母键盘
上辈子作恶多端，这辈子写前端。
08-31 4307
为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘，而不是使用系统的键盘输入，上效果图： 横屏效果 竖屏效果 一、首先我们要来分析一下需要做哪些东西 默认展示车牌的省份简称 特殊车牌（使、领、警、港、澳） 删除键 切换为数字和字母按键 车牌号中是没有I、O字母的（容易与1、0）分混淆，故不需要这两个按键 I、O这两个按键的位置正好使用学、挂来填充 二、根据效果图可以看出键盘就...
vue h5 车牌键盘 输入插件
S_m_r的博客
03-24 4001
接下来带大家用一个键盘输入车牌号的的使用 看下效果图 首先在compoents里引入写好的插件 <template> <view class="keyboard-wrap" v-if="kbShow"> <view class="head"> <view class="done" @tap="done"> 完成 <text class="iconfont iconxiala-"></text> </v
车牌效果预览_澳洲那些亮瞎眼的个性车牌
weixin_39894104的博客
12-13 3853
走在澳洲街头，你经常会发现一些特立独行，甚至闪瞎眼的个性车牌。普通车牌应该是这样的然后你会发现有的车是这样的车牌更炫的可能是这样或者是这样土豪们则可能是这样实际上在澳洲，车牌都是可定制的，只要缴纳费用，没有重复就可以。我所在的墨尔本，也就是维州，个性车牌都是一次付费即可，而且除了特定的土豪版本，大多数还都不贵让我们来瞅瞅维州都有哪些车牌可供选择。维州个性车牌购买网站是 https://vplate...
微信小程序实现回复自动刷新功能
06-10
微信小程序实现回复自动刷新功能，可以通过以下步骤实现： 1. 在小程序页面中添加一个下拉刷新组件，可以使用`<scroll-view>`组件，并设置`enablePullDownRefresh`属性为`true`。 2. 在页面的`onPullDownRefresh`事件中，编写请求数据的代码，并在请求成功后调用`wx.stopPullDownRefresh()`方法停止下拉刷新。 3. 在发送回复成功后，手动触发下拉刷新事件，即调用`wx.startPullDownRefresh()`方法，使页面自动刷新。 4. 可以使用`setData()`方法更新页面数据，以便在页面刷新后展示最新的回复数据。 实现以上步骤可以让微信小程序实现回复自动刷新功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qyhua

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值