element-plus 日期选择添加确定按钮

需求:选择日期后,点击确定按钮关闭面板

思路:

  1. 使用shortcuts自定义确定和取消按钮
  2. 选择日期后使用handleOpen()强制开启面板
  3. 点击确定后使用handleClose()关闭面板

<template><el-date-pickerref="pickerRef"v-model="dateValue"type="daterange"range-separator="To"start-placeholder="Start date"end-placeholder="End date":shortcuts="shortcuts"@change="dateChange"@focus="focusChange"/>
</template><script setup>import { ref, nextTick } from 'vue'import { ElButton, ElDatePicker } from 'element-plus'const dateValue = ref('')const pickerRef = ref(null)let isClickPicker = falseconst shortcuts = ref([{text: '取消',onClick(picker) {console.log('点击取消')isClickPicker = truepickerRef.value && pickerRef.value.handleClose()setTimeout(() => {dateValue.value = ''}, 10)}},{text: '确定',onClick(picker) {// 关闭面板isClickPicker = trueconsole.log('点击确定')if(!dateValue.value) {// message.warning('请选择日期!')console.log('请选择日期!')return false}pickerRef.value && pickerRef.value.handleClose()}}])const dateChange = (date) => {pickerRef.value && pickerRef.value.handleOpen()}const focusChange = () => {// 点击确定后聚焦,强制关闭面板if (isClickPicker) {pickerRef.value && pickerRef.value.handleClose()isClickPicker = false}}
</script><style>.el-picker-panel__body-wrapper {height: 108%;border: 1px solid #e4e4e4;width: 100%;}.el-date-picker.has-sidebar {width: 330px !important;}.el-picker-panel__sidebar {right: 0px;top: 310px !important;width: 150px;display: flex;}.el-picker-panel__body {padding-bottom: 20px;margin-left: 0px !important;}
</style>

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

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

相关文章

【Android11】开机启动日志捕捉服务

一、前言 制作这个功能的原因是客户想要自动的记录日志中的报错和警告到设备的内存卡里面。虽然开发者模式中有一个“bug report” 会在/data/user_de/0/com.android.shell/files/bugreports/目录下生成一个zip包记录了日志。但是客户觉得这个日志很难获取到他们需要的信息&am…

基于盲信号处理的声音分离——基于自然梯度的ICA算法

基于自然梯度的ICA算法主要利用相互独立的随机信号的联合概率密度是各自概率密度的乘积这一特性&#xff0c;建立了等独立性度量原则&#xff0c;具体实现如下。 首先&#xff0c;输出信号 相互独立&#xff0c;则其概率密度满足 上式中 表示 的概率密度函数&#xff0c;可以…

怎么扫描图片变成pdf格式?办公人士值得收藏的宝藏工具

将图片扫描并转换为PDF格式可以通过多种途径实现&#xff0c;无论是使用专业的扫描仪还是智能手机&#xff0c;都有相应的方法。 PDF 是什么&#xff1f; PDF&#xff0c;全称为 Portable Document Format&#xff08;便携式文档格式&#xff09;&#xff0c;是由Adobe System…

12,SPI

Flash芯片&#xff1a;W25Q64&#xff0c;可以看成一个储存器 W25Q64芯片和单片机之间的通信方式是SPI SPI:串行同步全双工&#xff0c;主从通信 判断一个设备是不是SPI通信&#xff0c;看是否有这几个线&#xff1a;SCK&#xff0c;CS&#xff0c;MISO&#xff0c;MOSI SCK…

Altium Designer软件下载安装「PCB设计软件」安装包资源获取

Altium Designer作为一款集成化的电子产品开发系统&#xff0c;它主要适用于Windows操作系统&#xff0c;为电子设计工程师们提供了一个高效、便捷的工作平台。 在Altium Designer中&#xff0c;原理图设计、电路仿真、PCB绘制编辑、拓扑逻辑自动布线、信号完整性分析和设计输出…

vuex的学习

vuex vuex是个插件&#xff0c;用于多个组件操作共享变量 引入&#xff1a;数字操作案例 基于组件自定义事件而实现的操作数字案例如下&#xff1a; App.vue <template><div id"app"><input class"num_input" type"text" v…

LeeCode 994. 腐烂的橘子

原题链接994. 腐烂的橘子 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;采用bfs遍历图&#xff0c;将烂橘子加入队列&#xff0c;然后将被烂橘子感染的橘子也加入队列&#xff0c;bfs的具体细节就不多说了&#xff0c;可以自己去搜&#xff0c;很简单&#xff0c;…

560.滑动窗口最大值

滑动窗口最大值 239. 滑动窗口最大值 - 力扣&#xff08;LeetCode&#xff09; 题目大意&#xff0c;返回每个窗口内的最大值。 思路-优先队列 优先队列&#xff08;堆&#xff09;&#xff0c;其中的大根堆可以实时维护一系列元素中的最大值。 每当我们向右移动窗口时&#…

地形沉降测量仪器静力水准仪应用全攻略

在地形监测和地质勘探的领域中&#xff0c;地形沉降测量是一项至关重要的工作。它不仅能够及时揭示地质结构的变化&#xff0c;还能为城市规划和基础工程建设提供宝贵的数据支持。在众多测量工具中&#xff0c;静力水准仪以其高精度、高效率的特点&#xff0c;成为地形沉降测量…

AI绘画生成人物的关键词怎么写?手把手教你学会

AI绘画生成人物的关键词怎么写&#xff1f;随着人工智能技术的不断发展&#xff0c;AI绘画已成为艺术领域的一股新势力。特别是在生成人物绘画方面&#xff0c;AI技术以其独特的优势和无限的可能性&#xff0c;为我们带来了全新的创作体验。下面&#xff0c;本文将分享AI绘画生…

svn怎么新建分支,切换分支

在当前分支下&#xff0c;点svn右键&#xff0c;选择分支/标记 在选择远端地址时&#xff0c;点右边更多选项&#xff0c;打开远端版本库。找到对应的分支上级位置&#xff0c;点击确定 填写新分支名称&#xff0c;我这儿是将分支建在了branches下&#xff0c;分支名称为V1.1 填…

【MLP-BEV(7)】深度的计算。针孔相机和鱼眼相机对于深度depth的采样一个是均匀采样,一个是最大深度均匀采样

文章目录 1.1 问题提出1.1 看看DD3D 的深度是怎么处理的给出代码示例 1.2 我们看看BEVDepth的代码 1.1 问题提出 针孔相机和鱼眼相机的投影模型和畸变模型不一样&#xff0c;如果对鱼眼的模型不太了解可以到我的这篇博客【鱼眼镜头11】Kannala-Brandt模型和Scaramuzza多项式模…

vscode刷LeetCode算法题环境配置

首先&#xff0c;下载nodejs 在vscode中安装LeetCode插件 安装好进行配置 选择leetcode-cn 填上刚才下载node.exe的路径 完成之后重启一下vscode 重启之后登陆LeetCode 完成之后就可以看到题目了 点击 code now 就可以开始刷题了

【Linux】进程优先级 | 环境变量

目录 Ⅰ. 进程优先级&#xff08;Process Priority&#xff09; 1. 什么是进程优先级&#xff1f; 2. 查看系统进程 3. 修改进程优先级 4.优先级调度原理 Ⅱ. 进程的切换&#xff08;Process Switch&#xff09; 1. 竞争与独立 2. 并行与并发 3. 进程抢占 4.实现切换…

鸿蒙期末项目(完结)

两天仅睡3个小时的努力奋斗之下&#xff0c;终于写完了这个无比拉跨的项目&#xff0c;最后一篇博客总体展示一下本项目运行效果兼测试&#xff0c;随后就是答辩被同学乱沙&#xff08;悲 刚打开软件&#xff0c;会看到如下欢迎界面&#xff0c;介绍本app的功能和优点 随后我们…

在线开发、实时交互 | 三维天地低代码开发平台助力提高项目交付速度

1.什么是低代码开发平台? 低代码开发平台基于北京三维天地科技股份有限公司自研原生技术架构研发。三维天地作为国内知名的检验检测信息化领域软件开发服务商,拥有多项自主知识产权及自主研发核心技术,致力于为客户提供信息化整体解决方案及相关软件产品与服务。 三维天地低…

【包邮送书】深度学习与信号处理

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

视觉震撼背后:带宽对渲染农场的重要性

在这个注重视觉体验的时代&#xff0c;无论是电影、电子游戏还是虚拟现实&#xff08;VR&#xff09;&#xff0c;令人印象深刻的视觉效果都依赖于渲染农场的强大能力。而带宽&#xff0c;则是确保这些画面能够迅速且以高清晰度传递给我们的核心要素。 一、核心概念&#xff1a…

1.2章节input输入函数语法使用和示例

在Python中&#xff0c;input() 函数用于从用户获取输入。这个函数会等待用户输入一行文本&#xff0c;然后按回车键&#xff0c;最后将输入的文本作为字符串返回。 一、基本语法 当你运行上面的代码时&#xff0c;它会打印出 "请输入一些文字: "&#xff0c;然后等…

工商银行:低息差下的挣扎

时隔四年&#xff0c;市值再度超越贵州茅台成为A股“股王”。 今天要说的就是“宇宙行”——中国工商银行 虽然茅台的信仰开始崩塌&#xff0c;但各大银行股巨头们今年也不好过。2024年一季度六大行业绩集体受挫&#xff0c;息差普遍收窄超过20个基点。其中&#xff0c;包括工…