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(); // 移除焦点});
}

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

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

相关文章

【前端项目笔记】3 用户管理

用户管理相关功能实现 涉及表单、对话框、Ajax数据请求 基本页面 用户列表开发 在router.js中导入Users.vue 解决用户列表小问题 选中&#xff08;激活&#xff09;子菜单后刷新不显示高亮 给二级菜单绑定单击事件&#xff0c;点击链接时把对应的地址保存到sessionSto…

vlan技术--交换机实现局域网分割(Access模式trunk模式)

自作笔记... 目录 vlan技术--交换机连接pc实现局域网分割(Access模式) PC SW1 结果 vlan技术--交换机连接pc实现局域网分割(trunk模式) vlan技术--交换机连接pc实现局域网分割(Access模式) 交换机先创建vlan. 交换机分别进入接口 (配置好连接模式, 连接的vlan) PC SW1 …

Set集合系列——Set、HashSet、LinkedHashset、TreeSet

Set系列的公共特点&#xff1a;无重复、无索引&#xff0c;不可用普通for循环&#xff0c;API和Collection重复 HashSet&#xff1a;采取哈希表存取数据 哈希表组成&#xff1f; JDk8之前&#xff1a;数组链表&#xff0c; JDK8以后&#xff1a;数组链表红黑树 哈希值&#…

简单高效的盈利策略,昂首资本推荐价格行为交易

有没有这样一种简单高效的盈利策略&#xff0c;不仅易于新手掌握&#xff0c;也是专业人士的常用利器?当然有了&#xff0c;就是Anzo Capital昂首资本今天推荐的价格行为交易。价格行为交易以其透明清晰的市场视角受到交易员的青睐&#xff0c;它如实反映了市场的真实动态&…

Ubuntu下安装docker

一、docker安装说明 解决官方源无法下载的问题 二、使用步骤 1.更新软件包索引 sudo apt-get update2.安装必要的软件包&#xff0c;以允许apt通过HTTPS使用仓库 sudo apt-get install apt-transport-https ca-certificates curl software-properties-common3.添加Docker的…

功能测试 之 单模块测试----购物车模块

1.需求分析 &#xff08;1&#xff09;购物车显示 1.若未登录&#xff0c;提示登录&#xff0c;提示文案“购物车内暂时没有商品&#xff0c;登录后将显示您之前加入的商品” 2.若已登录&#xff0c;购物车没有商品&#xff0c;提示去购物。 未登录状态 已登录状态 3.购物车有…

CVPR2024|UniPAD:一种自动驾驶的统一的预训练范式

本文章仅用于学术分享 论文标题丨 UniPAD: A Universal Pre-training Paradigm for Autonomous Driving 论文地址丨 https://arxiv.org/abs/2310.08370 代码地址 | https://github.com/Nightmare-n/UniPAD 关注「AI前沿速递」公众号&#xff0c;获取更多前沿资讯 01总览 这…

Spring Clude 是什么?

目录 认识微服务 单体架构 集群和分布式架构 集群和分布式 集群和分布式区别和联系 微服务架构 分布式架构&微服务架构 微服务的优势和带来的挑战 微服务解决方案- Spring Cloud 什么是 Spring Cloud Spring Cloud 版本 Spring Cloud 和 SpringBoot 的关系 Sp…

「51媒体」食品展览展会活动,媒体邀约资源有哪些?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 食品展览展会活动在媒体邀约方面拥有丰富的资源&#xff0c;可以吸引各类媒体的关注和报道。以下是一些常见的媒体邀约资源&#xff1a; 1. 行业媒体&#xff1a; 专业食品杂志&#xff…

可编程非线性RCD负载原理与应用

可编程非线性RCD负载&#xff08;Resistor-Capacitor-Diode&#xff09;是一种电子元件&#xff0c;其电阻、电容和二极管的特性可以通过编程进行控制和调整。这种负载广泛应用于电力系统、通信设备、电子设备等领域&#xff0c;具有很高的实用价值。 RCD负载的基本原理是利用电…

超声波清洗机的优势到底有哪些?四款精良爆品总结安利,质量放心

眼镜是现代人生活中的必备物品&#xff0c;但是很多人可能对于如何正确清洗眼镜感到困惑。传统的清洗方法可能会在清洗过程中对眼镜造成损坏&#xff0c;例如使用普通肥皂或清水清洗时容易划伤镜片。为了解决这个问题&#xff0c;家用眼镜超声波清洗机应运而生。超声波清洗机利…

[华为北向网管NCE开发教程(6)消息订阅

1.作用 之前介绍的都是我们向网管NCE发起请求获取数据&#xff0c;消息订阅则反过来&#xff0c;是网管NCE系统给我们推送信息。其原理和MQ&#xff0c;JMS这些差不多&#xff0c;这里不过多累述。 2.场景 所支持订阅的场景有如下&#xff0c;以告警通知为例&#xff0c;当我…

Talk|北京大学张嘉曌:NaVid - 视觉语言导航大模型

本期为TechBeat人工智能社区第602期线上Talk。 北京时间6月20日(周四)20:00&#xff0c;北京大学博士生—张嘉曌的Talk已经准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “NaVid - 视觉语言导航大模型”&#xff0c;NaVid是首个专为视觉语言导航&#xf…

深入理解Java并发锁

在Java中&#xff0c;并发锁是用来控制多个线程对共享资源的访问&#xff0c;确保数据的一致性和完整性。Java提供了多种并发锁机制&#xff0c;包括内置锁&#xff08;synchronized&#xff09;、显示锁&#xff08;如ReentrantLock&#xff09;、原子变量、并发容器以及一些高…

计算机考研|20所超高性价比院校,别错过!

这题我太会了&#xff0c;给大家推荐20所性价比非常高的计算机考研院校&#xff01; 985和211都有&#xff0c;这些学校不搞歧视&#xff0c;公平竞争&#xff0c;非常有能力的同学报考。 ✅厦门大学 (985)&#xff1a;不歧视双非&#xff0c;全靠实力&#xff0c;校园环境还…

vscode安装所需插件 个人记录版

vscode安装所需插件 个人记录版 仅做参考 设置

通信系统的最佳线性均衡器(2)---自适应滤波算法

本篇文章是博主在通信等领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对通信等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章分类在通信领域笔记&#xff1a;…

好用的便签是什么 电脑桌面上好用的便签

作为一名文字工作者&#xff0c;我经常需要在繁杂的思绪中捕捉灵感&#xff0c;记录下那些一闪而过的想法。在寻找一款适合电脑桌面的便签应用时&#xff0c;我偶然发现了敬业签便签软件简直是为我量身定制的&#xff0c;它不仅界面简洁&#xff0c;操作便捷&#xff0c;更重要…

`THREE.PointsMaterial` 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性,比如颜色、大小和透明度。

demo案例 THREE.PointsMaterial 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性&#xff0c;比如颜色、大小和透明度。下面是对其构造函数的参数、属性和方法的详细讲解。 构造函数 const material new THREE.PointsMaterial(parameters);参数&am…

阿里AI图片编辑新项目,人人都可做设计师。MimicBrush本地一键整合包下载

最近阿里巴巴联合香港大学开源了一个创新图像编辑工具&#xff1a;MimicBrush&#xff0c;这个工具相当于是一个局部重绘工具。它通过先进的AI技术&#xff0c;能够将一张图片的某一部分融合到另一张图片上。 MimicBrush&#xff0c;一款颠覆传统的图像编辑神器&#xff0c;不过…