继续在iview中使用jsx
因为要用到自定义弹窗，所以得用到render，但官方提供的render只是一个比较简单的写法。写一个简单点的弹框，按官方的搞法代码也会变得特别的长比如实现如下的弹框
image.png
如果是使用默认的方式，那么代码就是
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地址
