当前位置: 首页 > 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;}

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

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

相关文章:

  • OC 实现手指滑动拖动View
  • 多级缓存之实现多级缓存
  • React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass less】(十三)
  • 在gitlab中指定自定义 CI/CD 配置文件
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • 浅谈设计模式
  • 企业年会/年终活动如何邀请媒体记者报道?
  • C语言如何执行HTTP GET请求
  • .Net 6 Nacos日志控制台疯狂发输出+Log4Net日志过滤
  • Libra R-CNN: Towards Balanced Learning for Object Detection(2019.4)
  • Redis的内存淘汰策略分析
  • git命令之遭遇 ignore罕见问题解决
  • torch DDP多卡训练教程记录
  • Jenkins CICD过程常见异常
  • Java11新增特性
  • 安卓常见设计模式13------过滤器模式(Kotlin版)
  • 使用spark进行递归的可行方案
  • Spring -Spring之依赖注入源码解析(下)--实践(流程图)
  • 前端设计模式之【单例模式】
  • 设备零部件更换ar远程指导系统加强培训效果
  • 文本生成高精准3D模型,北京智源AI研究院等出品—3D-GPT
  • Netty入门指南之NIO 网络编程
  • LeetCode(6)轮转数组【数组/字符串】【中等】
  • 华为云Ascend310服务器使用
  • 【poi导出excel模板——通过建造者模式+策略模式+函数式接口实现】
  • 自适应模糊PID控制器在热交换器温度控制中的应用
  • 【系统救援】 Ubuntu重启失败,报错:UNEXPECTED INCONSISTENCY; RUN fsck MANUALLY
  • 【数据结构】树与二叉树(八):二叉树的中序遍历(非递归算法NIO)
  • 第九章 排序【数据结构】【精致版】
  • 基于element-plus定义表格行内编辑配置化