MessageBox弹出框中加入DatePicker日期选择器

news2024/9/23 19:24:43

效果:

在这里插入图片描述

代码片段

重点是open函数中,使用了h函数来写dom。关于h函数的解释可见一下博文点击跳转博文:解析h函数
在element-ui的官方文档中,对这种方式有清晰的解释。点击跳转官网可见

<template>
     <div>
        <el-button type="text" @click="open">点击打开 Message Box</el-button>
     </div>
</template>
methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('el-date-picker',{ vModel:"value1",type:"date",placeholder:"选择日期"})
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      }
    }
};

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

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

相关文章

appium介绍

移动自动化测试工具appium。appium目前在移动UI自动化测试领域占有重要地位&#xff0c;不仅支持Android和IOS两大平台&#xff0c;还支持多种编程&#xff0c;因而得到广泛的应用。 移动应用类型 移动应用类型主要分为以下几类 Native App&#xff1a;原生应用。Mobile Web…

Android性能优化之游戏收敛线程,减少OOM发生(epic 检测线程调用/booster减少常驻线程超时销毁)

先来了解下一个空白app的进程中线程数量&#xff1a; 分析迷你世界中app线程之前&#xff0c;先来了解下空白app &#xff0c;中线程情况&#xff1a; 一个空白app的线程大概是27个&#xff1a; 一个空白的的app&#xff0c;包含FinalizerDaemon线程、FinalizerWatchd线程、R…

GitHub Copilot:让开发编程变得像说话一样简单

引用&#xff1a; 人类天生就梦想、创造、创新。但今天&#xff0c;我们花太多时间被繁重的工作所消耗&#xff0c;花在消耗我们时间、创造力和精力的任务上。为了重新连接我们工作的灵魂&#xff0c;我们不仅需要一种更好的方式来做同样的事情&#xff0c;更需要一种全新的工…

“从世界第一黑客到顶级安全咨询专家” 凯文·米特尼克去世

一、人物简介 凯文米特尼克&#xff08;英语&#xff1a;Kevin David Mitnick&#xff0c;1963年8月6日—2023年7月16日&#xff09;&#xff0c;是美国计算机安全顾问&#xff0c;作家和黑客。他拥有“世界头号黑客”&#xff0c;“世界上最著名的黑客”、“地狱黑客”、“头号…

SPI通信

文章目录 SPI通信简介硬件电路移位示意图SPI时序基本单元1.起始条件2.终止条件模式1模式0模式2模式3 SPI时序 SPI通信简介 四根通信线&#xff1a; SCK"串行时钟线 MOSI:主机输出从机输入 MISO:主机输入从机输出 SS:从机选择 通信方式&#xff1a;同步&#xff0c;全双工…

向量数据库Milvus的四个版本

目录 MilvusLite版 单机版 分布式版 Milvus Cloud版 Milvus是一个功能强大的向量数据库管理系统,提供了多种版本,以满足不同用户的需求。以下是关于Milvus四个版本的具体介绍。 MilvusLite版 MilvusLite版是Milvus的轻量级版本,适合于小规模数据集和高性能计算场景。…

使用for循环输出左上三角、右上三角、左下三角、右下三角、上下三角

1、输出如下图形&#xff1a; #include<stdio.h> int main() {/*输出图形 666666666666666*/for(int i1;i<5;i){for(int j1;j<i;j){putchar(6);}printf("\n"); } return 0; } 2、输出如下图形&#xff1a; #include<stdio.h> int main() {/*输出图…

合作客户销售数据可视化分析

以一个案例进行实际分析&#xff1a; 数据来源&#xff1a;【地区数据分析】 以此数据来制作报表。 技巧一&#xff1a;词云图 以城市名称来显示合同金额的分布&#xff0c;合同金额越大&#xff0c;则城市文字显示越大。 2 2 2 2 2 2

【MySQL数据库备份】

目录 一、概述 二、数据备份的重要性 1. 数据保护 2. 灾难恢复 3. 数据完整性 4. 合规性要求 三、造成数据丢失的原因 1. 硬件故障 2. 人为错误 3. 黑客攻击 4. 自然灾害 5. 软件故障 四、备份类型 1.物理与逻辑角度 1.1 概念 1.2 物理备份 1.2.1 冷备份 1.2…

php-golang-jsonrpc2.0 rpc-codec/jsonrpc2和tivoka/tivoka实践

golang代码&#xff1a; package main import ( "context" "net" "net/rpc" "github.com/powerman/rpc-codec/jsonrpc2" ) type App struct{} type Res struct { Code int json:"code" Msg string json:"msg&quo…

kafka集群

目录 broker ZooKeeper consumer group&#xff08;消费者组&#xff09; 分区&#xff08;Partitions&#xff09; 副本&#xff08;Replicas&#xff09; 主题&#xff08;Topic&#xff09; 偏移量&#xff08;offset&#xff09; broker 一个kafka进程就是一个broker…

C++ 名字空间namespace

在C中支持三种域&#xff1a;局部域、名字空间域和类域。 名字空间域是随标准C而引入的。它相当于一个更加灵活的文件域&#xff08;全局域&#xff09;&#xff0c;可以用花括号把文件的一部分括起来&#xff0c;并以关键字namespace开头给它起一个名字&#xff1a; namespac…

多线程与高并发(17)——多线程总结(很全)

总结并复习了一下之前写的多线程的知识&#xff0c;见下图。 不够清楚可私信或者processOn。

983. 最低票价;1911. 最大子序列交替和;894. 所有可能的真二叉树

983. 最低票价 核心思想&#xff1a;对于365天中的一天&#xff0c;如果它不在旅行的日子&#xff0c;我们在这一天可以不花钱&#xff1b;如果它在旅行的日期&#xff0c;那么要么这一天花钱&#xff0c;要么在前面花钱的时间范围内。所以想到了动态规划&#xff0c;对于dp[x…

深入篇【C++】【容器适配器】:(stack)(queue)(priority_queue)模拟实现(详细剖析底层实现原理)

深入篇【C】【容器适配器】: (stack&#xff09;&& (queue&#xff09;&& (priority_queue&#xff09;模拟实现(详细剖析底层实现原理&#xff09; Ⅰ.容器适配器Ⅱ.认识dequeⅢ.stack模拟实现Ⅳ.queue模拟实现Ⅴ.priority_queue模拟实现1.priority_queue()2.…

深度学习入门(一):神经网络基础

一、深度学习概念 1、定义 通过训练多层网络结构对位置数据进行分类或回归&#xff0c;深度学习解决特征工程问题。 2、深度学习应用 图像处理语言识别自然语言处理 在移动端不太好&#xff0c;计算量太大了&#xff0c;速度可能会慢 eg.医学应用、自动上色 3、例子 使用…

ARM将常数加载到寄存器方法之LDR伪指令

一、是什么&#xff1f; LDR Rd,const伪指令可在单个指令中构造任何32位数字常数,使用伪指令可以生成超过MOV和MVN指令 允许范围的常数. 实现原理: (1)如果可以用MOV或MVN指令构造该常数,则汇编程序会生成适当的指令 (2)如果不能用MOV或MVN指令构造该常数,则汇编程序会执行下列…

C++中一些常见的运算符重载代码模板

可重载和不可重载的运算符 C中可重载的运算符如下&#xff1a; 而不可重载的运算符如下&#xff1a; 运算符重载的代码模板 下面是代码中形参的统一解释&#xff1a; lhs: 左操作数&#xff0c;通常为运算符左侧的对象或值。 rhs: 右操作数&#xff0c;通常为运算符右侧的对象…

性能测试、负载测试、压力测试-之间的差异

性能测试、负载测试、压力测试-之间的差异 目录 1、什么是性能测试2、什么是负载测试3、什么是压力测试4、性能测试 vs 负载测试 vs 压力测试5、为什么要进行性能测试6、为什么要进行负载测试7、为什么要进行压力测试8、什么时候使用性能测试9、什么时候使用负载测试10、什么时…

【数据结构】实验七:字符串

实验七 字符串实验报告 一、实验目的与要求 1&#xff09;巩固对串的理解&#xff1b; 2&#xff09;掌握串的基本操作实现&#xff1b; 3&#xff09;掌握 BF 和 KMP 算法思想。 二、实验内容 1. 给定一个字符串ababcabcdabcde和一个子串abcd,查找字串是否在主串中出现。…