iview中Modal的render模式下使用JSX

默认写法

export default {
  data() {
    return {
      value: 'jack'
    }
  },
  methods: {
    this.$Modal.confirm({
      title: "<b style='color:red;'>自定义标题</b>",
      width: 500,
      render: (h) => {
        // 默认写法：若内容较多时写起来会很麻烦
        return h("Input", {
          props: {
            value: this.value,
            autofocus: true,
            placeholder: "Please enter your name...",
          },
          on: {
            input: (val) => {
              this.value = val;
            },
          },
        });
      },
      onOk: () => {
        console.log("ok");
      },
    });
  }
}

JSX写法

使用vuecli创建的项目默认支持jsx，不需要额外安装插件

export default {
  data() {
    return {
      value: 'jack'
    }
  },
  methods: {
    handleBeforeSubmit() {
      this.$Modal.confirm({
        // title: "<b style='color:red;'>自定义标题</b>",
        width: 500,
        render: (h) => {
          // jsx写法：挺方便
          return (
            <div>
              <h2 style={{ textAlign: "center" }}>自定义标题</h2>
              <MyComponent>
                <div slot="my-slot">人生得意须尽欢，莫使金樽空对月。</div>
              </MyComponent>
              <Input vModel={this.value} placeholder="请输入内容" />
              <Input
                value={this.value}
                vOn:on-change={(e) => {
                  this.handleChange(e.target.value);
                }}
                placeholder="请输入内容"
              />
            </div>
          );
        },
        onOk: () => {
          console.log("ok");
        },
      });
    },
    handleChange(value) {
      console.log(value);
    }
  }
}