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

http://www.lryc.cn/news/382021.html

相关文章:

  • Jetpack Compose_Alignment对其+Arrangement排列
  • Vue进阶之Vue无代码可视化项目(五)
  • 【Linux进程】Linux下的---七大进程状态(什么是进程状态?Linux下有哪些进程状态?)
  • Linux的dev/ 和 sys/ 和 proc/ 目录
  • 代码随想录算法训练营day64 | 98. 所有可达路径
  • php上传zip压缩包到服务器并解压,解析压缩包内excel表格数据导入到数据库
  • 48-5 内网渗透 - JuicyPotato、Pipe Potato提权
  • Windows C++ 应用软件开发从入门到精通详解
  • Leetcode 3195. Find the Minimum Area to Cover All Ones I
  • ONLYOFFICE8.1版本桌面编辑器测评
  • 线性代数|机器学习-P15矩阵A的低秩变换下的逆矩阵
  • 强强联合 极光推送(JPush)成为华为生态市场首家推送类SDK服务商
  • 防止在 Qt 中触发信号
  • 【UML用户指南】-17-对基本行为建模-交互
  • Java中的类加载器与热部署技术详解
  • 【事件总线】EventBus
  • LeetCode 热题100 --双指针
  • 从《深入设计模式》一书中学到的编程智慧
  • Redis 基本配置
  • 【C++庖丁解牛】函数栈帧的创建与销毁
  • Java基础16(集合框架 List ArrayList容器类 ArrayList底层源码解析及扩容机制)
  • 数组:移除元素
  • 胡说八道(24.6.22)——通信杂谈(完结)
  • 设计模式原则——里氏替换原则
  • 详解 ClickHouse 的 SQL 操作
  • WPF与Winform,你的选择是?
  • 基于SpringBoot的实习管理系统设计与实现
  • 编程用什么电脑不卡的:深度解析与推荐
  • 优先级队列模拟实现
  • 记一次服务器崩溃事件