vue自定义键盘

在这里插入图片描述

<template>
    <div class="mark" @click="isOver"></div>
    <div class="mycar">
        <div class="mycar_list">
            <div class="mycar_list_con">
                <p class="mycar_list_p">车牌号</p>
                <div class="mycar_list_carnum">
                    <span class="mycar_list_div_span" v-for="(item, index) in carNumList"
                        :class="{ active: item, active_cursor: activeCursor == index, lastCursor: activeCursor == 7, first_style_name: item == '省' }"
                        @click="changeCarNum(item, index)" :key="index">{{ item }}</span>
                </div>
            </div>
        </div>
        <div class="mycar_list_numlist">
            <span class="mycar_list_numlist_cancel" :class="{ mycar_list_numlist_more: !shwoProvinceFlag }" @click="isOver">取消</span>
            <span class="mycar_list_numlist_confirm" :class="{ mycar_list_numlist_more: !shwoProvinceFlag }" @click="addCar">确定</span>
            <div class="mycar_list_numlist_province" v-if="shwoProvinceFlag">
                <span class="mycar_list_numlist_province_span" v-for="(item, index) in province" :key="index"
                    @click="changeProvince(item)">{{ item }}</span>
                <span class="mycar_list_numlist_province_span province_span_last">
                    <image src="https://file.wonder-link.net/81da6b97794e456db5c135aa3e620cce.png"></image>
                </span>
            </div>
            <div class="mycar_list_numlist_letterList" v-else>
                <div class="mycar_list_numlist_letterList_div">
                    <span class="mycar_list_numlist_letterList_div_span" v-for="(item, index) in numList"
                        :class="{ numlistStyle: activeCursor == 1 }" :key="index" @click="getNum(item)">{{ item }}</span>
                </div>
                <div class="mycar_list_numlist_letterList_div letterList_list">
                    <span class="mycar_list_numlist_letterList_div_span type_class_span" v-for="(item, index) in letterList"
                        :key="index" :class="{ type_class_disabled: (item == 'O' || item == 'I') }"
                        @click="changeLetter(item, index)">{{ item }}</span>
                    <span class="mycar_list_numlist_letterList_div_span province_span_last" style="flex: 0.5;"
                        @click="deleteCarNum">
                        <image src="https://file.wonder-link.net/81da6b97794e456db5c135aa3e620cce.png"></image>
                    </span>
                </div>
                <div class="mycar_list_numlist_letterList_div letterList_typeList">
                    <span class="mycar_list_numlist_letterList_div_span type_class_span" v-for="(item, index) in typeList"
                        :class="{ type_class_disabled: activeCursor != 6 }" :key="index" @click="getTypeCar(item, index)">{{
                            item
                        }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue';

const emit = defineEmits(['complete']);
const carNumList = reactive(["省", "", "", "", "", "", "", "新"])
const province = ["京", "沪", "浙", "苏", "粤", "鲁", "晋", "冀",
    "豫", "川", "渝", "辽", "吉", "黑", "皖", "鄂",
    "津", "贵", "云", "桂", "琼", "青", "新", "藏",
    "蒙", "宁", "甘", "陕", "闽", "赣", "湘", "使", "领", "警", "学", "港", "澳"
];
const numList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
const letterList = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M']
const typeList = ["学", "警", "港", "澳"]
const plateNo = ref('');
const isOverFlag = ref(true)
const disabled = ref(true)
const shwoProvinceFlag = ref(true)
const activeCursor = ref(0); // 光标 index

// 监控车牌
watch(carNumList, (list) => {
    let flagDisabled = list.every((item) => item.trim().length > 0)
    disabled.value = !flagDisabled || list[0] == '省'
})

// 车牌改变 光标
const changeCarNum = (item, index) => {
    isOverFlag.value = true
    if (index > 0) {
        shwoProvinceFlag.value = false
    } else {
        shwoProvinceFlag.value = true
    }
    activeCursor.value = index
}
// 省份修改
const changeProvince = (item) => {
    activeCursor.value = 0;
    carNumList[0] = item;
    shwoProvinceFlag.value = false
    activeCursor.value = 1;
}

// 车牌数字输入
const getNum = (item) => {
    if (activeCursor.value == 1) {
        return false
    }
    carNumList.splice(activeCursor.value, 1, item);
    if (activeCursor.value <= 6) {
        activeCursor.value += 1
    }
}

// 字母输入
const changeLetter = (item, index) => {
    if (item == 'O' || item == 'I') {
        return
    }
    carNumList.splice(activeCursor.value, 1, item);
    if (activeCursor.value <= 6) {
        activeCursor.value += 1
    }
}

// 车牌类型
const getTypeCar = (item, index) => {
    if (activeCursor.value != 6) {
        return false;
    }
    carNumList.splice(6, 1, item);
}

// 删除
const deleteCarNum = () => {
    if (activeCursor.value > 0) {
        if (carNumList[activeCursor.value].trim().length == 0) {
            activeCursor.value -= 1
        } else if (carNumList[activeCursor.value] == '新') {
            activeCursor.value = 6
        }
    }
    if (activeCursor.value == 0) {
        carNumList.splice(activeCursor.value, 1, "省");
        shwoProvinceFlag.value = true
    } else if (activeCursor.value == 7) {
        carNumList.splice(activeCursor.value, 1, "新");
        shwoProvinceFlag.value = false
    } else {
        carNumList.splice(activeCursor.value, 1, "");
        shwoProvinceFlag.value = false
    }

}
// 点击取消
const isOver = () => {
    emit('complete')
}
// 按钮确认添加
const addCar = async () => {
    let arr = [] as any;
    arr = arr.concat(carNumList)
    plateNo.value = arr[7] == "新" ? arr.splice(0, 7).join('') : arr.join('');
    console.log("车牌-->", plateNo.value);
    emit('complete', plateNo.value);
}
onMounted(() => {

})
</script>
<style lang="scss" scoped>
.mark {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
}

.mycar {
    position: fixed;
    width: 100%;
    height: 60vh;
    bottom: 0;
    z-index: 100;
    background: #fff;

    .mycar_list {
        height: 205rpx;

        >.mycar_list_con {
            background-color: #fff;
            padding: 30rpx 24rpx 44rpx;

            >.mycar_list_p {
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #222222;
                line-height: 42rpx;
                margin-bottom: 19rpx;
            }

            >.mycar_list_carnum {
                display: flex;
                align-items: center;
                justify-content: space-between;

                >.mycar_list_div_span {
                    text-align: center;
                    line-height: 70rpx;
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 6rpx;
                    border: 2rpx solid #A6A6A6;

                    &.active {
                        border: 2rpx solid #333333;
                    }

                    &.active_cursor {
                        border: 2rpx solid #FF6634;

                        &:last-child {
                            border: 2rpx dashed #FF6634;

                            &.lastCursor {
                                color: #000;
                            }
                        }
                    }

                    &:last-child {
                        border: 2rpx dashed #FF6634;
                        color: #ccc;
                    }

                    &.first_style_name {
                        color: #ccc;
                    }
                }
            }
        }
    }

    .mycar_list_numlist {
        >.mycar_list_numlist_cancel {
            position: absolute;
            left: 20rpx;
            bottom: 444rpx;
            color: #333;
            z-index: 10;

            &.mycar_list_numlist_more {
                bottom: 494rpx;
            }
        }

        >.mycar_list_numlist_confirm {
            position: absolute;
            right: 20rpx;
            bottom: 444rpx;
            color: #FF6634;
            z-index: 10;

            &.mycar_list_numlist_more {
                bottom: 494rpx;
            }
        }

        >.mycar_list_numlist_province {
            position: absolute;
            bottom: 0rpx;
            flex-wrap: wrap;
            text-align: center;
            padding-top: 100rpx;
            padding-bottom: 20rpx;
            background: rgba(210, 213, 219, 0.9);

            >.mycar_list_numlist_province_span {
                width: 60rpx;
                height: 80rpx;
                background-color: #fff;
                text-align: center;
                line-height: 80rpx;
                display: inline-block;
                margin: 10rpx 6rpx;
                box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.35);
                border-radius: 10rpx;

                &.province_span_last {
                    box-sizing: border-box;
                    width: 90rpx;
                    position: relative;

                    >image {
                        position: relative;
                        top: 5rpx;
                        left: 0rpx;
                        height: 34rpx;
                        width: 46rpx;
                    }
                }
            }
        }

        .mycar_list_numlist_letterList {
            position: absolute;
            bottom: 0rpx;
            padding-top: 100rpx;
            padding-bottom: 20rpx;
            background: rgba(210, 213, 219, 0.9);

            >.mycar_list_numlist_letterList_div {
                text-align: center;

                >.mycar_list_numlist_letterList_div_span {
                    width: 60rpx;
                    height: 70rpx;
                    background-color: #fff;
                    text-align: center;
                    line-height: 70rpx;
                    display: inline-block;
                    margin: 10rpx 6rpx;
                    box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.35);
                    border-radius: 10rpx;

                    &.type_class_span {
                        &.type_class_disabled {
                            color: #ccc;
                        }
                    }

                    &.numlistStyle {
                        color: #ccc;
                    }
                }

                &.letterList_list {
                    // padding: 0 36rpx;
                    padding: 0 20rpx;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    >.province_span_last {
                        width: 90rpx;
                        position: relative;

                        >image {
                            position: relative;
                            top: 5rpx;
                            left: 0rpx;
                            height: 34rpx;
                            width: 46rpx;
                        }
                    }
                }

                &.letterList_typeList {
                    padding: 0 10px;
                    display: flex;
                    justify-content: space-between;

                    >.mycar_list_numlist_letterList_div_span {
                        width: 160rpx;
                    }
                }
            }
        }
    }
}</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/99703.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

浪潮云海护航省联社金融上云，“一云多芯”赋能数字农业

浪潮云海护航省联社金融上云，“一云多芯”赋能数字农业

农村金融是现代金融体系的重要组成部分&#xff0c;是农业农村发展的重要支撑力量&#xff0c;而统管全省农商行及农信社的省级农村信用社联合社&#xff08;以下简称&#xff1a;省联社&#xff09;在我国金融系统中占据着举足轻重的地位。省联社通常采用“大平台小法人”的发…
阅读更多...
稳定性建设框架 | 京东物流技术团队

稳定性建设框架 | 京东物流技术团队

一、为什么要做稳定性建设 1、从熵增定律引出稳定性建设的必要性 物理学上&#xff0c;用“熵”来描述一个体系的混乱程度。卡尔弗里德曼提出熵增定律&#xff0c;他认为在一个封闭的系统内&#xff0c;如果没有外力的作用&#xff0c;一切物质都会从有序状态向无序状态发展。…
阅读更多...
第一课：使用C++实现图片去水印

第一课：使用C++实现图片去水印

1.功能概述 实现图片去水印的方法有很多，下面提供一种基于OpenCV库的C++实现方法。主要思路是利用图像中不同水印区域之间的差异，进行区域提取、重构和合成，从而实现去除水印的效果。 2.具体实现 2.1.导入OpenCV库和头文件 #include <iostream> #include <o…
阅读更多...
Vue2向Vue3过度Vuex核心概念getters

Vue2向Vue3过度Vuex核心概念getters

目录 1 核心概念 - getters1.定义getters2.使用getters2.1原始方式-$store2.2辅助函数 - mapGetters 2 使用小结 1 核心概念 - getters 除了state之外&#xff0c;有时我们还需要从state中筛选出符合条件的一些数据&#xff0c;这些数据是依赖state的&#xff0c;此时会用到get…
阅读更多...
【Golang 接口自动化05】使用yml管理自动化用例

【Golang 接口自动化05】使用yml管理自动化用例

目录 YAML 基本语法 对象&#xff1a;键值对的集合(key:value) 数组&#xff1a;一组按顺序排列的值 字面量&#xff1a;单个的、不可再分的值&#xff08;数字、字符串、布尔值&#xff09; yml 格式的测试用例 定义yml文件 创建结构体 读取yml文件中的用例数据 调试…
阅读更多...
unity pivot and center

unity pivot and center

一般采用pivot即默认的模式 选中物体的轴心 Center中心 选中多个物体&#xff0c;两咱情况下旋转的效果也不一样 围绕各自中心旋转 Center 围绕中心旋转
阅读更多...
使用kafka还在依赖Zookeeper，kraft模式了解下

使用kafka还在依赖Zookeeper，kraft模式了解下

Kafka的Kraft模式 概述 ​ Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。其核心组件包含Producer、Broker、Consumer&#xff0c;以及依赖的Zookeeper集群。其中Zookeeper集群是Kafka用来负责集群元数据的管理、控制器…
阅读更多...
【Qt专栏】实现单例程序，禁止程序多开的几种方式

【Qt专栏】实现单例程序，禁止程序多开的几种方式

目录 一&#xff0c;简要介绍 二&#xff0c;实现示例&#xff08;Windows&#xff09; 1.使用系统级别的互斥机制 2.通过共享内存&#xff08;进程间通信-IPC&#xff09; 3.使用命名互斥锁&#xff08;不推荐&#xff09; 4.使用文件锁 5.通过网络端口检测 一&#xf…
阅读更多...
通过 Jetbrains GateWay实现Remote Development

通过 Jetbrains GateWay实现Remote Development

本次环境准备 环境准备&#xff1a;win10、一台安装有树莓派系统的树莓派&#xff08;也可以是其他的服务器&#xff09; 第一步&#xff1a;通过官网下载JetBrains Gateway 官网地址&#xff1a;https://www.jetbrains.com/remote-development/gateway/ 第二步&#xff1a;安装…
阅读更多...
【Hadoop】HDFS读写流程和客户端命令使用

【Hadoop】HDFS读写流程和客户端命令使用

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的…
阅读更多...
论文阅读_变分自编码器_VAE

论文阅读_变分自编码器_VAE

英文名称: Auto-Encoding Variational Bayes 中文名称: 自编码变分贝叶斯 论文地址: http://arxiv.org/abs/1312.6114 时间: 2013 作者: Diederik P. Kingma, 阿姆斯特丹大学 引用量: 24840 1 读后感 VAE 变分自编码&#xff08;Variational Autoencoder&#xff09;是一种生…
阅读更多...
【精算研究01/10】 计量经济学的性质和范围

【精算研究01/10】 计量经济学的性质和范围

一、说明 计量经济学是使用统计方法来发展理论或测试经济学或金融学中的现有假设。计量经济学依赖于回归模型和零假设检验等技术。计量经济学也可以用来预测未来的经济或金融趋势。 图片来源&#xff1a;https://marketbusinessnews.com 二、 计量经济之简介 计量经济学是对经济…
阅读更多...
Unity关键概念

Unity关键概念

Unity是一款跨平台的游戏引擎和开发工具&#xff0c;用于创建2D和3D游戏、交互式内容和应用程序。它提供了一个强大的开发环境&#xff0c;使开发者能够轻松地设计、开发和部署高质量的游戏和应用程序。 以下是Unity的几个关键概念&#xff1a; 游戏对象&#xff08;Game Obj…
阅读更多...
JS中方法、函数、属性是一个东西吗

JS中方法、函数、属性是一个东西吗

在 JavaScript 中&#xff0c;方法、函数和属性是相关但不完全相同的概念。 方法&#xff08;Method&#xff09;&#xff1a;在对象中&#xff0c;方法是对象的属性&#xff0c;但它的值是一个函数。方法可以通过对象来调用&#xff0c;并且可以访问对象的属性和其他方法。 …
阅读更多...
Android 编译系统(Build System)剖析

Android 编译系统(Build System)剖析

Android Build System剖析 Android预构建应用是如何制作的&#xff0c;背后的构建系统又是什么&#xff1f; 本文旨在分享关于Android构建系统以及与原始设备制造商&#xff08;OEM&#xff09;集成的知识&#xff0c;简化理解AOSP复杂机制的过程。与手动查阅各种文件及其内部…
阅读更多...
jmeter做接口压力测试_jmeter接口性能测试

jmeter做接口压力测试_jmeter接口性能测试

jmeter是apache公司基于java开发的一款开源压力测试工具&#xff0c;体积小&#xff0c;功能全&#xff0c;使用方便&#xff0c;是一个比较轻量级的测试工具&#xff0c;使用起来非常简单。因为jmeter是java开发的&#xff0c;所以运行的时候必须先要安装jdk才可以。jmeter是免…
阅读更多...
3D开发工具HOOPS Publish如何快速创建交互式3D PDF文档？

3D开发工具HOOPS Publish如何快速创建交互式3D PDF文档？

HOOPS Publish是一款功能强大的SDK&#xff0c;可以创作丰富的工程数据并将模型文件导出为各种行业标准格式&#xff0c;包括PDF、STEP、JT和3MF。HOOPS Publish核心的3D数据模型是经过ISO认证的PRC格式(ISO 14739-1:2014)&#xff0c;它为装配树、拓扑和几何、产品制造信息和视…
阅读更多...
【Cookie和Session的那些事儿】

【Cookie和Session的那些事儿】

&#x1f320;作者&#xff1a;TheMythWS. &#x1f386;专栏&#xff1a;《集合与数据结构》 &#x1f387;座右铭&#xff1a;不走心的努力都是在敷衍自己&#xff0c;让自己所做的选择&#xff0c;熠熠发光。 目录 认识Cookie和Session Cookie Cookie对象的特点 Cookie对…
阅读更多...
学习 使用pandas库 DataFrame 使用

学习 使用pandas库 DataFrame 使用

1 、 数据排序 sort_values()函数 by:要排序的名称或名称列表&#xff0c; sorted_df df.sort_values(byAge,ascendingFalse) 由大到小排序&#xff1b; sorted_df df.sort_values(byAge) 由小到大排序&#xff1b; # 创建一个示例数据帧 data {Name: [Tom, Nick, John…
阅读更多...
【附安装包】Eplan2022安装教程

【附安装包】Eplan2022安装教程

软件下载 软件&#xff1a;Eplan版本&#xff1a;2022语言&#xff1a;简体中文大小&#xff1a;1.52G安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.5GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨64位下载链接&#xff1a;https://pan.baidu.co…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站