vue用render函數實現一個iview自定義內容的modal

iview的Modal組件為我們提供了自定義內容的api，是基於Vue的render函數實現，那么我們就用render函數來實現一個如下圖的自定義Modal

 

 

 想要用render函數實現之前首先要對render函數有所了解，先來認識一下render函數。

1.render函數是做什么的？

render函數和template一樣，是用來創建html模板的, 一些特殊場景用template創建模板代碼會冗長，此時用render函數寫就會簡單很多。

例：Vue官網案例：https://cn.vuejs.org/v2/guide/render-function.html

2.render函數具體怎么用？

• 返回值: render函數返回值是一個虛擬節點Vnode，也就是我們要渲染的節點
• 參數：render函數的參數是createElement，createElement本身也是一個函數，其參數有三個（官方推薦createElement可以簡寫成 h 代替）

1. 第一個參數：要創建的節點: (必填) { string | object | function }，可以是要創建的HTML標簽名稱，也可以是組件對象，也可以是解析上述任何一種的一個異步函數
2. 第二個參數：標簽中的屬性: (可選) { object }
3. 第三個參數：子虛擬節點: (可選) { string | array } 由createElement()構建而成，可以使用字符串來生成“文本虛擬節點

<template>
　　<p>
　　　　<Button @click="handleRender">Custom content</Button>
　　</p>
</template>
<script>
export default {
　　data () {
　　　　return {}
　　},
　　methods: {
　　　　handleRender () {
　　　　　　this.$Modal.confirm({
　　　　　　　　render: (h) => {
　　　　　　　　　　return h('div', [
　　　　　　　　　　　　h('div', {
　　　　　　　　　　　　　　class: { 'modal-title': true },
　　　　　　　　　　　　　　style: {
　　　　　　　　　　　　　　　　display: 'flex',
　　　　　　　　　　　　　　　　height: '42px',
　　　　　　　　　　　　　　　　alignItems: 'center'
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}, [
　　　　　　　　　　　　　h('Icon', {
　　　　　　　　　　　　　　　　props: {
　　　　　　　　　　　　　　　　　　type: 'ios-alert'
　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　style: {
　　　　　　　　　　　　　　　　　　width: '28px',
　　　　　　　　　　　　　　　　　　height: '28px',
　　　　　　　　　　　　　　　　　　fontSize: '28px',
　　　　　　　　　　　　　　　　　　color: '#f90'
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　}),
　　　　　　　　　　　　　h('span', {
　　　　　　　　　　　　　　　　style: {
　　　　　　　　　　　　　　　　　　marginLeft: '12px',
　　　　　　　　　　　　　　　　　　fontSize: '16px',
　　　　　　　　　　　　　　　　　　color: '#17233d',
　　　　　　　　　　　　　　　　　　fontWeight: 500
　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　domProps: { innerHTML: '提示' }
　　　　　　　　　　　　　})

　　　　　　　　　　　　]),
　　　　　　　　　　　　h('div', { // 創建內容區div節點，設置樣式
　　　　　　　　　　　　　　class: { 'modal-content': true },
　　　　　　　　　　　　　　style: { paddingLeft: '40px' }
　　　　　　　　　　　　}, [
　　　　　　　　　　　　　　h('p', { // 創建content的子節點 p標簽、label標簽、RadioGroup
　　　　　　　　　　　　　　　　style: { marginBottom: '15px' },
　　　　　　　　　　　　　　　　domProps: { innerHTML: `這是一條內容` }
　　　　　　　　　　　　　　}),
　　　　　　　　　　　　　　h('label', {
　　　　　　　　　　　　　　　　style: { marginRight: '10px' },
　　　　　　　　　　　　　　　　domProps: { innerHTML: '解綁任務' }
　　　　　　　　　　　　　　}),
　　　　　　　　　　　　　　h('RadioGroup', {
　　　　　　　　　　　　　　　　props: { value: '是' }, // 設置RadioGroup初始值
　　　　　　　　　　　　　　　　on: {
　　　　　　　　　　　　　　　　　　input: (val) => {
　　　　　　　　　　　　　　　　　　　　console.log(val)
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}, [
　　　　　　　　　　　　　　　h('Radio', { // 創建兩個radio
　　　　　　　　　　　　　　　　　　props: { label: '是' }
　　　　　　　　　　　　　　　}),
　　　　　　　　　　　　　　　h('Radio', {
　　　　　　　　　　　　　　　　　　props: { label: '否' }
　　　　　　　　　　　　　　　})
　　　　　　　　　　　　　　])
　　　　　　　　　　　　])
　　　　　　　　　　])
　　　　　　　　},
　　　　　　　　onOk: () => {// do sth}
　　　　　　})
　　　　}
　　}
}
</script>

// 至此，一個自定義modal已經實現了，預覽效果：https://run.iviewui.com/preview/gEC2IMAU

整體dom結構如下