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结构如下