vue自定义键盘

news2024/12/23 18:08:49

在这里插入图片描述

<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.coloradmin.cn/o/957422.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OpenCV（一）：Android studio jni配置OpenCV（亲测有效，保姆级）

OpenCV（一）：Android studio jni配置OpenCV（亲测有效，保姆级）

目录 1.下载OpenCV的SDK 2.创建Android Native C项目 3.Android项目中导入OpenCV工程 4.导入OpenCV的库文件 5.实现opencv高斯模糊图像处理的demo 要在Android Studio中配置使用OpenCV库的C方法&#xff0c;需要完成以下步骤&#xff1a; 1.下载OpenCV的SDK 首先&#x…
阅读更多...
SpringBoot项目配置文件数据库用户名密码加密

SpringBoot项目配置文件数据库用户名密码加密

1、需求 在使用SpringBoot开发过程中&#xff0c;会将一些敏感信息配置到SpringBoot项目的配置文件中(不考虑使用配置中心的情况 )&#xff0c;例如数据库的用户名和密码、Redis的密码等。为了保证敏感信息的安全&#xff0c;我们需要将此类数据进行加密配置。 2、操作步骤 …
阅读更多...
＜Linux＞《SHELL脚本在crontab环境下执行失败问题处理》＞＞ 探索SHELL运行模式和加载环境变量【实践+实验】

＜Linux＞《SHELL脚本在crontab环境下执行失败问题处理》＞＞ 探索SHELL运行模式和加载环境变量【实践+实验】

《SHELL脚本在crontab环境下执行失败问题处理》>> 探索SHELL运行模式和加载环境变量【实践实验】 1 现象描述2 分析3 解决方法4 深层研究4.1 shell4.2 shell脚本的环境变量4.3 shell脚本四种执行方法4.4 source 、.、./、bash 的区别4.5 shell常用的一些参数4.6 shell常见…
阅读更多...
Netty源码NioEventLoop解析

Netty源码NioEventLoop解析

带着问题源码 Netty 的 NioEventLoop 是如何实现的&#xff1f;它为什么能够保证 Channel 的操作是线程安全的&#xff1f;Netty 如何解决 JDK epoll 空轮询 Bug&#xff1f;NioEventLoop 是如何实现无锁化的&#xff1f; 一、作用与设计原理 Netty的NioEventLoop并不是一个存…
阅读更多...
基于Spring Boot的住院病人管理系统设计与实现（Java+spring boot+MySQL）

基于Spring Boot的住院病人管理系统设计与实现（Java+spring boot+MySQL）

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的住院病人管理系统设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spring…
阅读更多...
JavaScript基础04

JavaScript基础04

JavaScript 基础 文章目录 JavaScript 基础函数声明和调用声明&#xff08;定义&#xff09;调用 参数形参和实参 返回值作用域全局作用域局部作用域 匿名函数函数表达式立即执行函数 理解封装的意义&#xff0c;能够通过函数的声明实现逻辑的封装&#xff0c;知道对象数据类型…
阅读更多...
大数据项目实战（安装Hive）

大数据项目实战（安装Hive）

一&#xff0c;搭建大数据集群环境 1.3 安装Hive 1.3.1 Hive的安装 1.安装MySQL服务 1&#xff09;检查是否安装MySQL&#xff0c;如安装将其卸载。卸载命令 rpm -qa | grep mysql 2&#xff09;搜索MySQL文件夹&#xff0c;如存在则删除 find / -name mysql rm -rf /etc/s…
阅读更多...
低代码赋能| 绿色智慧矿山解决方案

低代码赋能| 绿色智慧矿山解决方案

在世界能源日趋紧张的背景下&#xff0c;能源产业的数字化升级是大势所趋。矿山行业作为国家能源安全的“压舱石”&#xff0c;也必须进行产业升级。一直以来&#xff0c;国家都在大力推动智慧矿山建设。通过大数据、GIS、物联网、云计算、人工智能等新兴技术&#xff0c;实现矿…
阅读更多...
Leetcode 461.汉明距离

Leetcode 461.汉明距离

两个整数之间的 汉明距离 指的是这两个数字对应二进制位不同的位置的数目。 给你两个整数 x 和 y&#xff0c;计算并返回它们之间的汉明距离。 示例 1&#xff1a; 输入&#xff1a;x 1, y 4 输出&#xff1a;2 解释&#xff1a; 1 (0 0 0 1) 4 (0 1 0 0)↑ ↑ 上面的…
阅读更多...
Mysql redolog

Mysql redolog

一、redolog 是啥 数据库的ACID&#xff1a;A原子性&#xff0c;C一致性&#xff0c;I隔离性&#xff0c;D持久性&#xff1b; redolog&#xff1a;保证 持久性&#xff1b; redolog: 系统奔溃重启时需要按照上述内容所记录的步骤重新更新数据页&#xff0c;特点&#xff1a…
阅读更多...
微服务架构七种模式

微服务架构七种模式

微服务架构七种模式 目录概述需求&#xff1a; 设计思路实现思路分析 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,challenge Survive.…
阅读更多...
软件架构设计(三) B/S架构风格-层次架构（一）

软件架构设计(三) B/S架构风格-层次架构（一）

层次架构风格从之前的两层C/S到三层C/S，然后演化为三层B/S架构，三层B/S架构之后仍然在往后面演化，我们来看一下层次架构演化过程中都有了哪些演化的架构风格呢？ 而我们先简单了解一下之前的层次架构风格中分层的各个层次的作用。 表现层：由于用户进行交互，比如MVC，MVP,…
阅读更多...
iOS脱壳之frida-ios-dump

iOS脱壳之frida-ios-dump

frida-ios-dump介绍 该工具基于frida提供的强大功能通过注入js实现内存dump然后通过python自动拷贝到电脑生成ipa文件&#xff0c;适合现iOS11版本之后的越狱手机使用。 下载 https://github.com/AloneMonkey/frida-ios-dump环境安装 电脑环境安装 win和Mac 环境一样都是…
阅读更多...
Metinfo6.0.0任意文件读取漏洞复现

Metinfo6.0.0任意文件读取漏洞复现

漏洞原理 在\MetInfo6.0.0\app\system\include\module\的old_thumb.class.php文件 可以看到这里对./进行了严格的过滤&#xff0c;但是却忽略了在Windows下还可以用…\来跳转目录 环境搭建 下载Metinfo6.0.0 配置随便写&#xff0c;自己记住就行 这里前面已经审计过代码了&a…
阅读更多...
linux离线环境安装redis

linux离线环境安装redis

先检查gcc版本&#xff0c;使用gcc --version进行检查&#xff0c;版本在5以下的&#xff0c;安装redis要安装redis6以下的版本 如果没有gcc命令&#xff0c;要先安装gcc命令。因为是离线环境&#xff0c;yum命令什么的用不了。为了安装gcc&#xff0c;进行了几种尝试。 1、下…
阅读更多...
Java设计模式：四、行为型模式-06：观察者模式

Java设计模式：四、行为型模式-06：观察者模式

文章目录 一、定义&#xff1a;观察者模式二、模拟场景&#xff1a;观察者模式2.1 观察者模式2.2 引入依赖2.3 工程结构2.4 模拟摇号2.4.1 摇号服务接口2.4.2 摇号返回结果类 三、违背方案&#xff1a;观察者模式3.0 引入依赖3.1 工程结构3.2 添加摇号接口和实现3.2.1 摇号服务…
阅读更多...
Nuxt 菜鸟入门学习笔记五：CSS 样式

Nuxt 菜鸟入门学习笔记五：CSS 样式

文章目录 本地样式表在组件内导入通过 Nuxt 配置 CSS 属性导入使用字体导入通过 NPM 发布的样式表 外部样式表动态添加样式表【高级】使用 Nitro 插件修改渲染的头部 使用预处理器单文件组件 SFC 样式类和样式绑定使用 v-bind 的动态样式Scoped StylesCSS Modules预处理器支持 …
阅读更多...
vue3中axios的使用方法

vue3中axios的使用方法

在Vue 3中使用axios发送HTTP请求的方法与Vue 2中基本相同。首先&#xff0c;需要安装axios库&#xff1a; npm install axios然后&#xff0c;在Vue组件中引入axios&#xff1a; import axios from axios;接下来&#xff0c;可以在Vue组件的方法中使用axios发送HTTP请求。例如…
阅读更多...
基于金豺算法优化的BP神经网络（预测应用） - 附代码

基于金豺算法优化的BP神经网络（预测应用） - 附代码

基于金豺算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于金豺算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.金豺优化BP神经网络2.1 BP神经网络参数设置2.2 金豺算法应用 4.测试结果&#xff1a;5.Matlab代码 摘要…
阅读更多...
USRP 简介，对于NI软件无线电你所需要了解的一切

USRP 简介，对于NI软件无线电你所需要了解的一切

什么是 USRP 通用软件无线电外设( USRP ) 是由 Ettus Research 及其母公司National Instruments设计和销售的一系列软件定义无线电。USRP 产品系列由Matt Ettus领导的团队开发&#xff0c;被研究实验室、大学和业余爱好者广泛使用。 大多数 USRP 通过以太网线连接到主机&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023