iview中Modal的render模式JSX写法

继续在iview中使用jsx

因为要用到自定义弹窗，所以得用到render，但官方提供的render只是一个比较简单的写法。写一个简单点的弹框，按官方的搞法代码也会变得特别的长比如实现如下的弹框

如果是使用默认的方式，那么代码就是

render: (h) => {
            return h('div', {
              style: {
                // styles
              }
            }, [
              h('div', {
                style: {}
              }, [
                h('Icon', { style: {} }),
                h('p', { style: {} }, '操作成功!')
              ]),
              h('div', {}, [
                h('Checkbox', {}, '不再显示该弹窗')
              ])
            ])
          }

配合样式，还有其它的属性，真的很长很长。。。。
但如果用jsx去实现呢？

this.$Modal.confirm({
  render: (h) => {
    return <div style="display:flex;flexDirection:column;justifyContent:flex-start;alignItems:center;">
      <div style="width: 100%;display:flex;flexDirection:row;justifyContent:flex-start;alignItems:flex-start;">
        <icon type="checkmark-circled" size="30" color="#19be6b"></icon>
        <p style="fontSize:15px;lineHeight:27px;textIndent:10px;">操作成功!</p>
      </div>
      <div style="width: 100%;paddingLeft:30px;">
        <checkbox style="marginTop:25px;" value={this.check} onOn-change={this.bindModal.bind(this)}>
          不再显示该弹窗
        </checkbox>
      </div>
    </div>
  },
  onOk: () => {
    this.$Message.success('确定')
    // do
  },
  onCancel: () => {
    this.$Message.warning('取消')
  }
})

PS: 虽然我没抽出样式，但是这样可阅读性就好多了。。

说一下这里的默认事件
原本在ivew中的on-click on-change这种在jsx中都会变成onOn-click onOn-change，是绑定在dom上的，
但在modal中，render提供的渲染只支持内容本身，所以如果要监听组件所提供的on-ok, on-cancel方法。只能在参数对象中，按官方非render写法的来（这里需要注意：官方文档中本身没有说到modal的render渲染时事件的监听，但实际这么写是可行的）

最后git地址