繼續(xù)在iview中使用jsx
因為要用到自定義彈窗兽泄，所以得用到render者吁，但官方提供的render只是一個比較簡單的寫法萎攒。寫一個簡單點(diǎn)的彈框勒极，按官方的搞法代碼也會變得特別的長比如實(shí)現(xiàn)如下的彈框
image.png
如果是使用默認(rèn)的方式是掰，那么代碼就是
render: (h) => {
return h('div', {
style: {
// styles
}
}, [
h('div', {
style: {}
}, [
h('Icon', { style: {} }),
h('p', { style: {} }, '操作成功!')
]),
h('div', {}, [
h('Checkbox', {}, '不再顯示該彈窗')
])
])
}
配合樣式，還有其它的屬性辱匿，真的很長很長键痛。。匾七。絮短。
但如果用jsx去實(shí)現(xiàn)呢？
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: 雖然我沒抽出樣式昨忆，但是這樣可閱讀性就好多了丁频。。
說一下這里的默認(rèn)事件
原本在ivew中的on-click on-change這種在jsx中都會變成onOn-click onOn-change，是綁定在dom上的席里，
但在modal中叔磷，render提供的渲染只支持內(nèi)容本身，所以如果要監(jiān)聽組件所提供的on-ok, on-cancel方法奖磁。只能在參數(shù)對象中改基，按官方非render寫法的來（這里需要注意：官方文檔中本身沒有說到modal的render渲染時事件的監(jiān)聽，但實(shí)際這么寫是可行的）
最后git地址
