河畔的风

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  62 随笔 :: 0 文章 :: 0 评论 :: 15362 阅读
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

vNode 只是用来描述DOM,自身不维护状态,messageBox只是利用vNode渲染DOM,要想实现messageBox内容响应式,需要提供Vue实例(组件):

写一个这样的组件

  1. 新建组件(customRadioGroup.js):
复制代码
import Vue from "vue";

const CustomInput = Vue.component("CustomRadioGroup", {
  props: ["value"],
  data() {
    return {
      internalValue: this.value,
    };
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    },
  },
  render(h) {
    return h(
      "el-input",
      {
        props: { value: this.internalValue },
        on: {
          input: (value) => {
            this.internalValue = value;
            this.$emit("input", value);
          },
        },
      },
     
    );
  },
});

export default CustomInput;
复制代码

 

然后这样引用

复制代码
import CustomInput from "./CustomInput.js"


 this.$msgbox({
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            title:`订正${item.checkingItemName}`,
            message: h(CustomInput, {
              props: { value: this.password },
              on: {
                input: (value) => {
                  this.password = value;
                },
              },
            }),
          }).then(() => {
            console.log(this.password);
            
          }).catch(() => {
            console.log('取消保存');
          });
复制代码

 

posted on   河畔的风  阅读(11)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示