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 = trueif (index > 0) {shwoProvinceFlag.value = false} else {shwoProvinceFlag.value = true}activeCursor.value = index
}
// 省份修改
const changeProvince = (item) => {activeCursor.value = 0;carNumList[0] = item;shwoProvinceFlag.value = falseactiveCursor.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.rhkb.cn/news/115445.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter实现StackView

1.让界面之间可以嵌套且执行动画。 2.界面的添加遵循先进后出原则。 3.需要使用AnimateView&#xff0c;请看我上一篇博客。 演示&#xff1a; 代码&#xff1a; Stack: import package:flutter/cupertino.dart;///栈&#xff0c;先进后出 class KqWidgetStack {final Lis…

敏捷开发要点

敏捷开发是一种以人为核心&#xff0c;迭代、增量式的软件开发方法。它强调团队成员的自我管理、面对变化时的快速适应能力&#xff0c;以及持续的沟通和协作。 以下是敏捷开发的几个要点&#xff1a; 敏捷宣言&#xff1a;敏捷开发遵循敏捷宣言&#xff0c;其中包括四个价值声…

Power BI 连接 MySQL 数据库

Power Query 或 Power BI 只提供了对 SQL Server 的直接连接&#xff0c;而不支持其它数据库的直连。所以第一次连接 MySQL 数据库时&#xff0c;就出现下面的错误信。 这就需要我们自己去安装一个连接器组件。https://downloads.mysql.com/archives/c-net/ 错误解决方案 我一…

LNMP 平台搭建(四十)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 搭建LNMP 一、安装Nginx 二、安装Mysql 三、安装PHP 四、部署应用 前言 LNMP平台指的是将Linux、Nginx、MySQL和PHP&#xff08;或者其他的编程语言&#xff0c;如…

现浇钢筋混泥土楼板施工岗前安全VR实训更安全高效

建筑行业天天与钢筋混凝土砼在&#xff0c;安全施工便成了企业发展的头等大事。 当今社会&#xff0c;人人都奉行生命无价&#xff0c;安全至上。可工地安全事故频繁发生&#xff0c;吞噬掉多少宝贵生命。破坏了多小个家庭?痛定死痛&#xff0c;为了提高施工人员的安全意识。 …

软考:中级软件设计师:数据库恢复与备份,故障与恢复,反规范化

软考&#xff1a;中级软件设计师:数据库恢复与备份 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备…

ubuntu学习(五)----读取文件以及光标的移动

1、读取文件函数原型介绍 ssize_t read(int fd,void*buf,size_t count) 参数说明&#xff1a; fd: 是文件描述符 buf:为读出数据的缓冲区&#xff1b; count: 为每次读取的字节数&#xff08;是请求读取的字节数&#xff0c;读上来的数据保存在缓冲区buf中&#xff0c;同时文…

C++设计模式_02_面向对象设计原则

文章目录 1. 面向对象设计&#xff0c;为什么&#xff1f;2. 重新认识面向对象3. 面向对象设计原则3.1 依赖倒置原则(DIP)3.2 开放封闭原则(OCP )3.3 单一职责原则( SRP )3.4 Liskov 替换原则 ( LSP )3.5 接口隔离原则 ( ISP )3.6 优先使用对象组合&#xff0c;而不是类继承3.7…

从零学算法(剑指 Offer 36)

123.输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的循环双向链表。要求不能创建任何新的节点&#xff0c;只能调整树中节点指针的指向。 为了让您更好地理解问题&#xff0c;以下面的二叉搜索树为例&#xff1a; 我们希望将这个二叉搜索树转化为双向循环链表。…

Windows-docker集成SRS服务器的部署和使用

Windows-docker集成SRS服务器的部署和使用 一、Windows Docker安装 Docker Desktop 官方下载地址&#xff1a; https://docs.docker.com/desktop/install/windows-install/ 下载windows版本的就可以了。 注意&#xff1a;此方法仅适用于 Windows 10 操作系统专业版、企业版、…

【Unity3D】UI Toolkit容器

1 前言 UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery&#xff0c;本文将介绍 UI Toolkit 中的容器&#xff0c;主要包含 VisualElement、ScrollView、ListView、UI Toolkit&#xff0c;官方介绍详见→UXML elements reference。 2 VisualElement&#xff08;空容器&…

打造成功的砍价营销大解析,销量飙升

砍价活动是吸引顾客的一种有效方式&#xff0c;可以帮助提高销量和提升品牌知名度。在乔拓云平台上&#xff0c;我们提供了一套简单易用的工具&#xff0c;让您能够轻松地制作一个成功的砍价活动。下面&#xff0c;我将详细介绍具体步骤&#xff0c;让您能够轻松上手。 第一步&…

编写c语言程序调用openssl编译出的动态链接库

文章目录 一、编译生成链接库二、示例一&#xff1a;调用RAND_bytes函数三、示例二&#xff1a;调用SHA256 一、编译生成链接库 下载安装openssl并编译生成链接库的过程在我的另一篇文章中已经详细说明了&#xff1a;Ubuntu中安装OpenSSL 此外&#xff0c;我们还需要提前了解…

北京已收录2023开学了《乡村振兴战略下传统村落文化旅游设计》中国建筑出版传媒许少辉八一新书

北京已收录2023开学了《乡村振兴战略下传统村落文化旅游设计》中国建筑出版传媒许少辉八一新书

PMP项目管理主要学习内容是什么?

PMP项目管理是指根据美国项目管理学会(Project Management Institute&#xff0c;简称PMI)制定的项目管理知识体系和方法论进行项目管理的一种认证。PMP主要关注项目的规划、执行和控制等方面的知识和技能。 下面是PMP项目管理《PMBOK指南》第六版的主要学习内容&#xff1a; …

DSP_TMS320F28377D_算法加速方法3_使用TMU库加速

继上两篇方法 DSP_TMS320F28377D_算法加速方法1_拷贝程序到RAM运行_江湖上都叫我秋博的博客-CSDN博客 DSP_TMS320F28377D_算法加速方法2_添加浮点运算快速补充库rts2800_fpu32_fast_supplement.lib_江湖上都叫我秋博的博客-CSDN博客 之后&#xff0c;本文继续讨论第三种DSP算法…

砍价活动制作秘籍,打造抢购风潮

砍价活动作为一种吸引用户参与、提高销售量的营销手段&#xff0c;已经成为了电商行业的热门选择。在如今竞争激烈的市场环境下&#xff0c;如何制作出成功的砍价活动&#xff0c;成为了每位电商从业者亟需解决的问题。在本文中&#xff0c;我们将为大家揭秘一种制作成功砍价活…

大数据之hadoop入门

大数据概念 大数据&#xff1a;无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合&#xff0c;是需要新处理模式才能具有更强的决策力、洞察发现李和流程优化能力的海量、高增长率和多样化的信息资产。 大的概念是相对来说的&#xff1a;目前来说&#xff0…

教程i.MX8MPlus开发板SPI转CAN操作

飞凌嵌入式OKMX8MP-C核心板有两路原生CAN总线&#xff0c;但用户在开发产品时可能需要用到更多的CAN&#xff0c;这该如何解决呢&#xff1f;今天小编将为大家介绍一种SPI转CAN的方法&#xff0c;供各位工程师小伙伴参考。 说明 OKMX8MP-C核心板有两路原生的SPI总线&#xff0c…

简单了解IPv4编址

目录 一、IPv4地址 二、进制转换 三、有类IPv4 四、无类IPv4 3.1 子网掩码 3.2 地址规划 3.3 VLSM可变长子网掩码 五、私有IPv4地址 六、IPv4报文格式 七、IP地址解析 一、IPv4地址 IPv4地址由“网络位主机位”构成&#xff0c;所谓的网络位就是我们通常所指的网段区…