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

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

话不多说,直接上代码~

html 复制代码
<el-button  type="primary" size="mini" @click="handleApply()" >处理申请</el-button>
javascript 复制代码
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来操作
javascript 复制代码
if (document.getElementById('radio1')) {
    // 默认按钮选中同意,否则下次打开对话框按钮值为上次选中的值
    document.getElementById('radio1').checked = true;
  }

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

相关推荐
用户4582031531711 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
用户516816614584111 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
libraG11 小时前
Jenkins打包问题
前端·npm·jenkins
前端康师傅11 小时前
JavaScript 作用域
前端·javascript
前端缘梦11 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
我是天龙_绍12 小时前
使用 TypeScript (TS) 结合 JSDoc
前端
云枫晖12 小时前
JS核心知识-事件循环
前端·javascript
Simon_He12 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
eason_fan12 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
无羡仙12 小时前
JavaScript 迭代器
前端