当前位置: 首页 > news >正文

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;}

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

相关文章:

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

虽说实现下面的效果&#xff0c;用el-dialog很轻松就能搞定。但是这种简单的交互&#xff0c;我更喜欢使用MessageBox。 话不多说&#xff0c;直接上代码~ <el-button type"primary" size"mini" click"handleApply()" >处理申请</el-b…...

OC 实现手指滑动拖动View

RPReplay_Final1699613924 实现手指滑动拖动View 支持手势移动的控件 支持 Masonry frame 布局 使用富文本 也支持自动高度 核心代码 - (void)handlePanGesture:(UIPanGestureRecognizer *)p {CGPoint panPoint [p locationInView:self.view];CGPoint currentViewPoint _dr…...

多级缓存之实现多级缓存

多级缓存的实现离不开Nginx编程&#xff0c;而Nginx编程又离不开OpenResty。 1. OpenResty快速入门 我们希望达到的多级缓存架构如图&#xff1a; 其中&#xff1a; windows上的nginx用来做反向代理服务&#xff0c;将前端的查询商品的ajax请求代理到OpenResty集群 OpenRest…...

React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass less】(十三)

文件目录 Proxying in Development http-proxy-middleware fetch_get fetch 是否成功 axios 全局处理 antd UI库 更改主题 使用css module的情况下修改第三方库的样式 支持sass & less Proxying in Development 在开发模式下&#xff0c;如果客户端所在服务器跟后…...

在gitlab中指定自定义 CI/CD 配置文件

文章目录 1. 介绍2. 配置操作3. 配置场景3.1 CI/CD 配置文件在当前项目step1&#xff1a;在当前项目中创建目录&#xff0c;编写流水线文件存放在该目录中step2&#xff1a;在当前项目中配置step3&#xff1a;运行流水线测试 3.2 CI/CD 配置文件位于外部站点上step1&#xff1a…...

(论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking

文献阅读笔记 简介 题目 Learning a Deep Compact Image Representation for Visual Tracking 作者 N Wang, DY Yeung 原文链接 Learning a Deep Compact Image Representation for Visual Tracking (neurips.cc) 关键词 Object tracking、DLT、SDAE 研究问题 track…...

浅谈设计模式

文章目录 一、单例模式 1.饿汉模式 2.懒汉模式 二、工厂模式 三、建造者模式 四、代理模式 设计模式是前辈们对代码开发的总结&#xff0c;是解决特定问题的一系列套路。它不是语法规定&#xff0c;而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解…...

企业年会/年终活动如何邀请媒体记者报道?

​媒体邀约是企业或组织进行宣传的重要手段之一。通过邀请媒体参加活动&#xff0c;可以增加活动的曝光度和知名度&#xff0c;吸引更多的关注和参与。同时&#xff0c;媒体报道还可以提高企业或组织的权威性和可信度&#xff0c;从而让公众更容易接受其传达的信息。 企业年会或…...

C语言如何执行HTTP GET请求

在现代互联网时代&#xff0c;网络数据的获取和分析变得越来越重要。无论是为了研究市场趋势&#xff0c;还是为了收集信息进行数据分析&#xff0c;编写一个网络爬虫可以帮助我们自动化这一过程。在这篇文章中&#xff0c;我们将使用C语言和libcurl库来编写一个简单的网络爬虫…...

.Net 6 Nacos日志控制台疯狂发输出+Log4Net日志过滤

我们的项目配置了Log4Net 作为日志输出工具&#xff0c;在引入Nacos后&#xff0c;控制台和日志里疯狂输出nacos心跳日志和其他相关信息&#xff0c;导致自己记录的信息被淹没了&#xff0c;找了很多解决办法&#xff1a; 1、提高nacos日志级别&#xff0c;然后再屏蔽相应级别…...

Libra R-CNN: Towards Balanced Learning for Object Detection(2019.4)

文章目录 AbstractIntroduction引入问题1&#xff09; Sample level imbalance2) Feature level imbalance3) Objective level imbalance进行解决贡献 Related Work&#xff08;他人的work&#xff0c;捎带与我们的对比&#xff09;Model architectures for object detection&a…...

Redis的内存淘汰策略分析

概念 LRU 是按访问时间排序&#xff0c;发生淘汰的时候&#xff0c;把访问时间最久的淘汰掉。LFU 是按频次排序&#xff0c;一个数据被访问过&#xff0c;把它的频次 1&#xff0c;发生淘汰的时候&#xff0c;把频次低的淘汰掉。 几种LRU策略 以下集中LRU测率网上有很多&am…...

git命令之遭遇 ignore罕见问题解决

我先来讲讲背景 我的一些文件在ignore了&#xff0c;不会被提交到远程仓库&#xff0c;这时候我的远程仓库中是没有这几个文件的&#xff0c;这时候我如果使用 git reset 的话这时候除了那几个 ignore 的文件以外都被更新的&#xff0c;但是如果我不需要这几个被 ignore 的文件…...

torch DDP多卡训练教程记录

参考 简明教程看这里 --> pytorch分布式训练 和这篇&#xff1a; [PyTorch]> DDP系列第一篇&#xff1a;入门教程 --》 详细解答了pipeline DDP原理篇 --> DDP系列第二篇&#xff1a;实现原理与源代码解析 --》 主要讲 all_reduce 和 sample 的实现 减少GPU占用看这里…...

Jenkins CICD过程常见异常

1 Status [126] Exception when publishing, exception message [Exec exit status not zero. Status [126] 1.1 报错日志 SSH: EXEC: STDOUT/STDERR from command [/app/***/publish.sh] ... bash: /app/***/publish.sh: Permission denied SSH: EXEC: completed after 200…...

Java11新增特性

前言 在前面的文章中&#xff0c;我们已经介绍了 Java9的新增特性 和 Java10的新增特性 ,下面我们书接上文&#xff0c;来介绍一下Java11的新增特性 版本简介 Java 11 是 Java 平台的最新版本&#xff0c;于2018年9月25日发布。这个版本是自Java 8以来最重要的更新之一&…...

安卓常见设计模式13------过滤器模式(Kotlin版)

W1 是什么&#xff0c;什么是过滤器模式&#xff1f;​ 过滤器模式&#xff08;Filter Pattern&#xff09;是一种常用的结构型设计模式&#xff0c;用于根据特定条件过滤和筛选数据。 2. W2 为什么&#xff0c;为什么需要使用过滤器模式&#xff0c;能给我们编码带来什么好处…...

使用spark进行递归的可行方案

在实际工作中会遇到&#xff0c;最近有需求将产品炸开bom到底层&#xff0c;但是ERP中bom数据在一张表中递归存储的&#xff0c;不循环展开&#xff0c;是无法知道最底层原材料是什么。 在ERP中使用pl/sql甚至sql是可以进行炸BOM的&#xff0c;但是怎么使用spark展开&#xff0…...

Spring -Spring之依赖注入源码解析(下)--实践(流程图)

IOC依赖注入流程图 注入的顺序及优先级&#xff1a;type-->Qualifier-->Primary-->PriOriry-->name...

前端设计模式之【单例模式】

文章目录 前言介绍实现单例模式优缺点&#xff1f;后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端设计模式 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...