当前位置: 首页 > news >正文

Vue3 + Ant-Design 中 a-date-picke 实现选择切换年份 没有鼠标光标,输入框内自带‘年’

效果图:

效果图

<a-date-picker ref="datePicker" v-model:value="year" picker="year" value-format="YYYY年" format="YYYY年" :bordered="false" :allowClear="false" inputReadOnly @change="changeTime" ><template #suffixIcon><caret-down-outlined  style="color:#88909B;font-size:16px"/></template>
</a-date-picker>

1、输入框内自带’年‘字:value-format="YYYY年" format="YYYY年"

2、点击下拉的时候,就不会有光标:inputReadOnly

3、自定义图标:加一个插槽,代码如上<template></template>

4、时间改变的时候,输入框内还会有鼠标光标(获得了焦点):changeTime方法中的blur()

const datePicker = ref(null); //ref="datePicker" 日期组件得加ref对应上
const changeTime = (date)=>{nextTick(() => {datePicker.value.blur(); // 移除焦点});
}

相关文章:

Vue3 + Ant-Design 中 a-date-picke 实现选择切换年份 没有鼠标光标,输入框内自带‘年’

效果图&#xff1a; 效果图 <a-date-picker ref"datePicker" v-model:value"year" picker"year" value-format"YYYY年" format"YYYY年" :bordered"false" :allowClear"false" inputReadOnly change&…...

Jetpack Compose_Alignment对其+Arrangement排列

文章目录 1.Alignment 对齐1.1Alignment 对齐方式1.2AbsoluteAlignment 绝对对齐1.3BiasAlignment 偏差对齐1.4BiasAbsoluteAlignment偏差绝对对齐 2.Arrangement 排列2.1Arrangement 排列方式2.2Arrangement.Horizontal2.3Arrangement.Vertical 1.Alignment 对齐 1.1Alignmen…...

Vue进阶之Vue无代码可视化项目(五)

Vue无代码可视化项目 编排引擎smooth-dndLeftPanel.vueLayoutView.vuestores/debug.tsstores/editor.tsAppNavigator.vue添加-左侧栏添加到中间部分LayoutView.vuestore/editor.tsLeftPanel.vue移动-中间部分区域的位置更改新建文件夹utils、文件array.tsarray.tsLayoutView.vu…...

【Linux进程】Linux下的---七大进程状态(什么是进程状态?Linux下有哪些进程状态?)

目录 一、前言 二、什么是进程状态&#xff1f; 三、操作系统(OS)下的 --- 进程状态 &#x1f525;运行状态&#x1f525; &#x1f525;阻塞状态&#x1f525; &#x1f525;挂起状态&#x1f525; 四、Linux下的7种进程状态 &#x1f525;运行状态 -- R&#x1f525;…...

Linux的dev/ 和 sys/ 和 proc/ 目录

linux精神&#xff1a; 一切设备皆文件。 设备被抽象成文件 1、 /dev : 该目录放的设备文件&#xff0c;是应用程序和内核的交互文件&#xff0c;应用程序对这些文件的读写控制可以直接访问到实际的设备 应用程序通过mknod创建的文件&#xff0c;如果底层驱动对mknod的设备号…...

代码随想录算法训练营day64 | 98. 所有可达路径

图论理论基础 1、图的种类 整体上一般分为 有向图 和 无向图。 加权有向图&#xff0c;就是图中边是有权值的&#xff0c;加权无向图也是同理。 2、度 无向图中有几条边连接该节点&#xff0c;该节点就有几度 在有向图中&#xff0c;每个节点有出度和入度。出度&#xff…...

php上传zip压缩包到服务器并解压,解析压缩包内excel表格数据导入到数据库

需求: 1.需要管理后台将excel表格中的每条单词数据导入到数据库中. 2.每条单词数据对应的图片和音频文件需要上传到服务器中. 为了让客户上传数据方便,考虑了一下决定通过后台上传压缩包的方式实现 测试压缩包: 压缩包的目录结构 管理后台导入教材 public function upload…...

48-5 内网渗透 - JuicyPotato、Pipe Potato提权

Juicy Potato Juicy Potato 与 Rotten Potato(烂土豆) 的原理几乎完全相同,只是在后者的基础上做了扩展,以便更灵活地利用 Rotten Potato。Juicy Potato 不再像 Rotten Potato 那样依赖于一个现有的 Meterpreter,并且可以自定义 COM 对象加载的端口,以及根据系统版本更换…...

Windows C++ 应用软件开发从入门到精通详解

目录 1、引言 2、IDE 开发环境介绍 2.1、Visual Studio 2.2、Qt Creator 3、 C语言特性 3.1、熟悉泛型编程 3.2、了解C/C异常处理 3.3、熟练使用STL容器 3.4、熟悉C11新特性 4、Windows 平台的编程技术与调试技能 4.1、需要掌握的若干编程技术和基础知识 4.2、需…...

Leetcode 3195. Find the Minimum Area to Cover All Ones I

Leetcode 3195. Find the Minimum Area to Cover All Ones I 1. 解题思路2. 代码实现 题目链接&#xff1a;3195. Find the Minimum Area to Cover All Ones I 1. 解题思路 这一题还是挺简单的&#xff0c;只要找到所有1所在的元素的上下左右4个边界&#xff0c;作为目标矩形…...

ONLYOFFICE8.1版本桌面编辑器测评

目录 一、引言 二、界面设计&#xff1a;简洁大方&#xff0c;操作便捷 三、功能评测&#xff1a;全面升级&#xff0c;满足多样需求 四、性能评测&#xff1a;稳定流畅&#xff0c;高效运行 五、总结与展望 ONLYOFFICE官网链接&#xff1a;ONLYOFFICE - 企业在线办公应用…...

线性代数|机器学习-P15矩阵A的低秩变换下的逆矩阵

文章目录 1. 单位矩阵的秩1变换1.1 功能说明1.2 证明 2. 单位矩阵 I n I_n In​的秩k变换3. 一般矩阵A的秩k变换4. 公式用途4.1 求解方程4.2 卡曼滤波 1. 单位矩阵的秩1变换 1.1 功能说明 假设我们有一个单位矩阵I&#xff0c;列向量u,v那么当我们对单位向量I减去秩为1的矩阵…...

强强联合 极光推送(JPush)成为华为生态市场首家推送类SDK服务商

近日&#xff0c;中国领先的客户互动和营销科技服务商&#xff0c;极光&#xff08;Aurora Mobile&#xff0c;纳斯达克股票代码&#xff1a;JG&#xff09;的核心产品极光推送&#xff08;JPush&#xff09;顺利通过华为开发者联盟的多项测试及审核&#xff0c;成为首家在Harm…...

防止在 Qt 中触发信号

在 Qt 中工作时&#xff0c;有时我们需要暂时阻止某些信号的触发。以下是一个经典场景&#xff1a;我们有一个 QCheckBox 对象&#xff0c;当用户勾选或取消勾选时&#xff0c;需要调用一个函数&#xff0c;因此我们将这个函数连接到 stateChanged(int state) 信号。然而&#…...

【UML用户指南】-17-对基本行为建模-交互

目录 1、消息的可视化表示 2、对象与角色 3、链和连接件 4、消息 5、序列 6、创建、修改和撤销 7、表示法 8、常用建模技术 8.1、对控制流建模 8.1.1、基于时间的控制流 8.1.2、基于结构的控制流 在任何有意义的系统中&#xff0c;对象都不是孤立存在的&#xff0c;…...

Java中的类加载器与热部署技术详解

Java中的类加载器与热部署技术详解 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在软件开发中&#xff0c;特别是在大型应用和服务的开发过程中&#xff0c;类…...

【事件总线】EventBus

文章目录 概述如何使用如何发布消息如何进行消息监听 来源 概述 事件总线是对发布-订阅模式&#xff08;观察者&#xff09;的一种实现&#xff0c;是一种集中式事件处理机制&#xff0c;允许不同的组件之间进行彼此通信而又不需要相互依赖&#xff0c;达到一种解耦的目的。 …...

LeetCode 热题100 --双指针

双指针 b站UP主蜜糖&#xff1a;由于数据特征的有序性&#xff08;大小或者正负&#xff09;&#xff0c;所以可以证明当前节点一定是优于过往节点&#xff0c;从而可以通过数据的维度数量的指针&#xff0c;逐步的迭代收敛最终找到最优解。 283.移动零 相关标签 &#xff1a;…...

从《深入设计模式》一书中学到的编程智慧

软件设计原则 优秀设计的特征 在开始学习实际的模式前&#xff0c;让我们来看看软件架构的设计过程&#xff0c;了解一下需要达成目标与需要尽量避免的陷阱。 代码复用 无论是开发何种软件产品&#xff0c;成本和时间都最重要的两个维度。较短的开发时间意味着可比竞争对…...

Redis 基本配置

Redis的配置文件通常位于 /etc/redis/redis.conf。以下是一些常见的Redis配置选项和它们的说明&#xff1a; 基本配置 1. 绑定地址 bind 127.0.0.1默认情况下&#xff0c;Redis只监听本地接口。如果需要远程访问&#xff0c;可以修改成bind 0.0.0.0&#xff0c;不过这会带来…...

从百兆到千兆:RJ45网口背后的技术演进与协议优化全解析

从百兆到千兆&#xff1a;RJ45网口背后的技术演进与协议优化全解析 当你拿起一根普通的网线连接电脑时&#xff0c;可能不会想到这根看似简单的线缆背后隐藏着怎样的技术革命。从最初的10Mbps到如今的千兆以太网&#xff0c;RJ45接口承载了网络通信技术的巨大飞跃。本文将带你深…...

无GPU方案:星图平台OpenClaw镜像+百川2-13B-4bits的云端沙盒体验

无GPU方案&#xff1a;星图平台OpenClaw镜像百川2-13B-4bits的云端沙盒体验 1. 为什么选择云端沙盒方案 作为一个长期折腾本地AI部署的技术爱好者&#xff0c;我最近遇到了一个典型困境&#xff1a;想体验最新的OpenClaw智能体框架&#xff0c;但手头的MacBook Pro只有集成显…...

Logisim-Evolution完全指南:从入门到精通数字电路仿真

Logisim-Evolution完全指南&#xff1a;从入门到精通数字电路仿真 【免费下载链接】logisim-evolution Digital logic design tool and simulator 项目地址: https://gitcode.com/gh_mirrors/lo/logisim-evolution 开源电路仿真软件Logisim-Evolution是一款功能强大的数…...

Apache-Guacamole实战:用Docker三分钟搞定Windows11远程控制环境搭建

Apache-Guacamole实战&#xff1a;三分钟Docker部署Windows11远程控制环境 远程办公和跨平台协作已成为现代开发者的日常需求。想象一下这样的场景&#xff1a;你正在咖啡馆用MacBook调试代码&#xff0c;突然需要访问办公室的Windows11开发环境&#xff1b;或是团队需要共享一…...

解决QGIS 3.22.4编译后启动报错:从‘dll未加载’到‘plugins缺失’的实战排错记录

QGIS 3.22.4编译后启动报错的深度排查与解决方案 当你终于完成了QGIS 3.22.4的源码编译&#xff0c;满怀期待地双击qgis.exe时&#xff0c;却遭遇了"qgis_app.dll无法加载"的报错。这就像跑完马拉松却在终点线前摔倒一样令人沮丧。但别担心&#xff0c;这些问题其实都…...

深度学习项目训练环境多场景落地:自动驾驶小车图像识别项目快速启动

深度学习项目训练环境多场景落地&#xff1a;自动驾驶小车图像识别项目快速启动 你是不是也遇到过这样的问题&#xff1f;想跑一个深度学习项目&#xff0c;光是配环境就花了大半天&#xff0c;各种版本冲突、依赖报错&#xff0c;好不容易装好了&#xff0c;一运行又提示缺这…...

lychee-rerank-mm与LangChain整合:构建智能文档检索系统

lychee-rerank-mm与LangChain整合&#xff1a;构建智能文档检索系统 1. 引言 想象一下这样的场景&#xff1a;你在一家律师事务所工作&#xff0c;每天需要从成千上万份法律文书中快速找到与当前案件相关的资料。传统的全文搜索只能帮你找到包含关键词的文档&#xff0c;但无…...

Drone流水线进阶玩法:用.drone.yml实现多阶段构建+钉钉通知(2023最新版)

Drone流水线进阶实战&#xff1a;多阶段构建与智能通知全链路设计 当你的团队从单体架构转向微服务时&#xff0c;CI/CD流水线会突然变得复杂起来。上周我接手的一个电商项目就遇到了典型问题&#xff1a;每次代码提交后需要同时处理Java后端的Maven构建、前端Node.js打包、Doc…...

别再只用四线制SPI了!用菊花链连接多个传感器,Arduino引脚不够的救星

菊花链SPI&#xff1a;突破Arduino引脚限制的多传感器连接方案 当你在智能温室项目中需要同时监测温度、湿度和光照强度&#xff0c;却发现Arduino Uno的GPIO引脚已经捉襟见肘时&#xff0c;传统四线制SPI的局限性就暴露无遗。每个新增的传感器都意味着多占用一个宝贵的片选引…...

高效智能的百度网盘提取码查询工具:baidupankey使用指南

高效智能的百度网盘提取码查询工具&#xff1a;baidupankey使用指南 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 在数字化时代&#xff0c;百度网盘已成为我们存储和分享文件的重要平台。然而&#xff0c;加密分享链接的提…...