vue2+elementui使用MessageBox 弹框$msgbox自定义VNode内容:实现radio

虽说实现下面的效果,用el-dialog很轻松就能搞定。但是这种简单的交互,我更喜欢使用MessageBox。
话不多说,直接上代码~

在这里插入图片描述

<el-button  type="primary" size="mini" @click="handleApply()" >处理申请</el-button>
handleApply() {
      const h = this.$createElement;
      let _this = this;
      _this.statu = '1';
      if (document.getElementById('radio1')) {
        // 默认按钮选中同意,否则下次打开对话框按钮值为上次选中的值
        document.getElementById('radio1').checked = true;
      }
      this.$msgbox({
        title: '提示',
        message:
          h('div', null, [
            h('span', null, '是否同意撤回申请: '),
            h('span', {
              style: {
                marginRight: '20px'
              }
            },
              [h('input', {
                style: {
                  cursor: 'pointer',
                },
                attrs: {
                  // 添加属性
                  type: "radio",
                  name: "Radio",
                  value: "1",
                  id: "radio1",
                  checked: _this.statu === '1',
                },
                on: {
                  change: () => {
                    _this.statu = '1'
                  }
                }
              }, []), h('span', {
                class: 'el-radio__label',
              }, `同意`)]),
            h('span', null,
              [h('input', {
                style: {
                  cursor: 'pointer',
                },
                attrs: {
                  type: "radio",
                  name: "Radio",
                  value: "0",
                  id: "radio2",
                  checked: _this.statu === '0',
                },
                on: {
                  change: () => {
                    _this.statu = '0'
                  }
                }
              }, []), h('span', { class: 'el-radio__label' }, `不同意`)]),
          ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(action => {
          axios.$post(
            `/xxx/xxxxx/${_this.statu}`
          ).then((res) => {
            if (res.success) {
              this.$message.success("操作成功");
            }
          });
      })
    },
  • 这一步还是比较重要的,因为不是el-radio自动绑定,所以通过加入id属性,使用document来操作
if (document.getElementById('radio1')) {
    // 默认按钮选中同意,否则下次打开对话框按钮值为上次选中的值
    document.getElementById('radio1').checked = true;
  }

可能实现的不够完美,欢迎指正与补充。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫爬取家纺数据并分析

因为时间的原因&#xff0c;没法写一个详细的教程&#xff0c;但是我可以提供一个基本的框架。你需要根据实际情况进行修改和扩展。以下是使用Python的requests库和BeautifulSoup库来爬取网页内容的基本步骤&#xff1a; # 导入所需的库 import requests from bs4 import Beaut…

k8s二进制(ETCD的部署安装)

角色ip组件k8s-master192.168.11.169kube-apiserver,kube-controller-manager,kube-scheduler,etcdk8s-node1192.168.11.164kubelet,kube-proxy,docker,etcdk8s-node2192.168.11.166kubelet,kube-proxy,docker,etcd 1、为etcd签发证书 1、证书的下载(任意机器上执行都可以) …

Linux:权限篇 (彻底理清权限逻辑!)

shell命令以及运行原理&#xff1a; Linux严格意义上说的是一个操作系统&#xff0c;我们称之为“核心&#xff08;kernel&#xff09;“ &#xff0c;但我们一般用户&#xff0c;不能直接使用kernel。而是通过kernel的“外壳”程序&#xff0c;也就是所谓的shell&#xff0c;来…

故障诊断模型 | Maltab实现RF随机森林的故障诊断

效果一览 文章概述 故障诊断模型 | Maltab实现RF随机森林的故障诊断 模型描述 RF善于处理高维数据,特征遗失数据,和不平衡数据 (1)训练可以并行化,速度快 (2)对高维数据集的处理能力强,它可以处理成千上万的输入变量,并确定最重要的变量,因此被认为是一个不错的降…

【论文阅读】NeROIC:在线图像集合中对象的神经渲染

论文连接&#xff1a; NeROIC: Neural Rendering of Objects from Online Image Collections introduction 从在线图像集合中获取对象表示的新颖方法&#xff0c;从具有不同相机、照明和背景的照片中捕获任意对象的高质量几何形状和材料属性。这使得各种以对象为中心的渲染应…

Mysql数据库 14.SQL语言 视图

一、视图的概念 视图&#xff1a;就是由数据库中一张或多张表根据特定的条件查询出的数据狗造成的虚拟表 二、视图的作用 安全性&#xff0c;简单性 三、视图的语法 语法 create view 视图表 as select_statement; 代码实现 #创建视图 将查询结果创建称为视图&#x…

聊聊测试左移到需求阶段

这是鼎叔的第七十九篇原创文章。行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 欢迎关注本公众号《敏捷测试转型》&#xff0c;星标收藏&#xff0c;大量原创思考文章陆续推出。本人新书《无测试组织-测试团队的敏捷转型》​​​​​​​已出版&#xff08;机械工业出版…

JAVA集合学习和源码分析

一、结构 List和Set继承了Collection接口&#xff0c;Collection继承了Iterable Object类是所有类的根类&#xff0c;包括集合类&#xff0c;集合类中的元素通常是对象&#xff0c;继承了Object类中的一些基本方法&#xff0c;例如toString()、equals()、hashCode()。 Collect…

云计算、大数据技术的智慧工地,实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式

智慧工地是利用物联网、云计算、大数据等技术&#xff0c;实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式。 智慧工地架构&#xff1a; 1、终端层&#xff1a; 充分利用物联网技术、移动应用、智能硬件设备提高现场管控能力。通过RFID、传感器、摄像头、手机等终…

Sectigo SSL

Sectigo&#xff08;前身为ComodoCA&#xff09;是全球在线安全解决方案提供商和全球最大的证书颁发机构。为了强调其在SSL产品之外的扩张&#xff0c;Comodo在2018年更名为Sectigo。新名称减少了市场混乱&#xff0c;标志着公司向创新的全方位网络安全解决方案提供商过渡。 S…

RVS—面向目标硬件的软件性能测试工具

产品概述 Rapita Verification Suite&#xff08;简称&#xff1a;RVS&#xff09;&#xff0c;为美国Danlaw公司提供的一款嵌入式系统在板测试套件&#xff0c;主要应用于汽车领域。其产品符合ISO-26262、DO178B/C、IEC-61508等行业标准&#xff0c;兼容Vxworks、Linux、SYSBI…

Windows 安装 JDK 8 和 JDK 17 和多版本JDK切换

下载 JDK JDK 8 下载地址&#xff1a;https://www.aliyundrive.com/s/koYe1SVRg76 JDK 17 下载地址&#xff1a; https://www.aliyundrive.com/s/tBcbUtAHTbg 安装 JDK 点击可执行文件 jdk-8u291-windows-x64.exe 进行安装 如果需要更改JDK安装目录&#xff0c;根据个人偏好…

从零开始搭建React+TypeScript+webpack开发环境-基于lerna的webpack项目工程化改造

项目背景 在实际项目中&#xff0c;我们的前端项目往往是一个大型的Webpack项目&#xff0c;结构较为复杂。项目根目录下包含了各种配置文件、源代码、以及静态资源&#xff0c;整体布局相对扁平。Webpack的配置文件分散在不同的部分&#xff0c;包括入口文件、输出目录、加载…

无需公网IP!部署Apache服务器与内网穿透实现公网访问

Apache服务安装配置与结合内网穿透实现公网访问 文章目录 Apache服务安装配置与结合内网穿透实现公网访问前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpo…

html与django实现多级数据联动

html与django实现多级数据联动 1、流程 1、进入页面后先获取年级数据 2、选择年级后获取院级数据 3、选择院级后获取层次数据 4、选择层次数据后获取专业数据 2、html代码 <p style"margin-top: 10px;"><label>年级</label><select id"…

ARM 基础学习记录 / 异常与GIC介绍

GIC概念 念课本&#xff08;以下内容都是针对"通用中断控制器&#xff08;GIC&#xff09;"而言&#xff0c;直接摘录的&#xff0c;有的地方可能不符人类的理解方式&#xff09;&#xff1a; 通用中断控制器&#xff08;GIC&#xff09;架构提供了严格的规范&…

常见排序算法之插入排序类

插入排序&#xff0c;是一种简单直观的排序算法&#xff0c;工作原理是将一个记录插入到已经排好序的有序表中&#xff0c;从而形成一个新的、记录数增1的有序表。在实现过程中&#xff0c;它使用双层循环&#xff0c;外层循环对除了第一个元素之外的所有元素&#xff0c;内层循…

RK3399平台开发系列讲解(内存篇)free 命令查看内存占用情况介绍

🚀返回专栏总目录 文章目录 一、free的使用二、free的内容📢free 指令会显示内存的使用情况,包括实体内存,虚拟的交换文件内存,共享内存区段,以及系统核心使用的缓冲区等。 一、free的使用 -b  以 Byte 为单位显示内存使用情况。-k  以 KB 为单位显示内存使用情况。…

Clickhouse表引擎

前言&#xff1a; 有关Clickhouse的前置知识详见&#xff1a; 1.ClickHouse的安装启动_clickhouse后台启动_THE WHY的博客-CSDN博客 2.ClickHouse目录结构_clickhouse 目录结构-CSDN博客 Cickhouse创建表时必须指定表引擎 表引擎&#xff08;即表的类型&#xff09;决定了&…

Java语言基础(上)

Java 语言的特点 面对对象&#xff1a;Java 中所有的数据和方法都封装在对象中跨平台性&#xff1a;Java 通过 Java 虚拟机&#xff0c;可以在不同的操作系统上运行相同的程序自动内存管理&#xff1a;Java 提供垃圾回收机制&#xff0c;不需要手动管理内存强类型语言&#xf…