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

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

相关推荐
故事与他64510 分钟前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
莫的感情44 分钟前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥1 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python1 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_1 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
武天1 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js
Github项目推荐1 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊1 小时前
C语言bsearch的使用
java·c语言·前端
云枫晖1 小时前
Webapck系列-初识Webpack
前端·javascript
慧一居士1 小时前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端