当前位置: 首页 > 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(); // 移除焦点});
}

相关文章:

  • leetcode27移除元素
  • 无版权图片素材搜索网站,解决无版权图片查找问题
  • 逆向学习 MFC 篇:视图分割和在 C++ 的 Windows 窗口程序中添加图标的方法
  • [贪心算法]忍者道具
  • Redis精要
  • yolov8训练中出现问题
  • Linux 一键部署 Nginx1.26.1 + ModSecurity3
  • Docker的常见问题
  • LoRa126X系列LoRa模块:专为物联网设计而生
  • adb 截屏和录屏命令
  • nginx安装教程
  • Python 学习 第四册 第8章 结构化的文本文件
  • 【LeetCode热题 100】三数之和
  • Python日志管理利器:如何高效管理平台日志
  • 【机器学习】智能创意工厂:机器学习驱动的AIGC,打造未来内容新生态
  • 《用数据讲故事》作者Cole N. Knaflic:消除一切无效的图表
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • android图片蒙层
  • CentOS 7 修改主机名
  • interface和setter,getter
  • Java到底能干嘛?
  • js 实现textarea输入字数提示
  • MySQL几个简单SQL的优化
  • Redis 中的布隆过滤器
  • Service Worker
  • tweak 支持第三方库
  • Webpack入门之遇到的那些坑,系列示例Demo
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 警报:线上事故之CountDownLatch的威力
  • 聚类分析——Kmeans
  • 一天一个设计模式之JS实现——适配器模式
  • 白色的风信子
  • ​一文看懂数据清洗:缺失值、异常值和重复值的处理
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • #Linux(权限管理)
  • ( )的作用是将计算机中的信息传送给用户,计算机应用基础 吉大15春学期《计算机应用基础》在线作业二及答案...
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (20)docke容器
  • (C语言)二分查找 超详细
  • (Windows环境)FFMPEG编译,包含编译x264以及x265
  • (八十八)VFL语言初步 - 实现布局
  • (六)Hibernate的二级缓存
  • (十三)Flink SQL
  • (五)网络优化与超参数选择--九五小庞
  • (一)WLAN定义和基本架构转
  • (转)jdk与jre的区别
  • **《Linux/Unix系统编程手册》读书笔记24章**
  • **PHP二维数组遍历时同时赋值
  • .equal()和==的区别 怎样判断字符串为空问题: Illegal invoke-super to void nio.file.AccessDeniedException
  • .net core Redis 使用有序集合实现延迟队列
  • .Net IOC框架入门之一 Unity
  • .NET Micro Framework初体验
  • .NET 快速重构概要1
  • .net 使用ajax控件后如何调用前端脚本
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题