如何使用vue的渲染函数 API：h函数创建一个el-select弹出框_h('el-select

效果示例图

示例代码

const h = this.$createElement;
this.$msgbox({
		title: '是否发送短信？',
		message: h('el-select',
			{
					ref: 'sendMsg',
					attrs: {
						value: '',
						placeholder: '请选择是否发送短信？'
					},
					on: {
						change: event => {
							this.$refs['sendMsg'].value = event;
						}
					}
			},
			[
				h('el-option', {
					attrs: {
						value: 0,
						label: '发送'
					}
				}),
				h('el-option', {
					attrs: {
						value: 1,
						label: '不发送'
					}
				})
			]
		)
})
.then(() => {
	console.log('[是否发送短信]', this.$refs['sendMsg'].value);
							
})
.catch(() => {
	console.log('[不发送]');
						
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

h()：创建虚拟 DOM 节点 (vnode)。

function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode
第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。
第二个参数是要传递的 prop，
第三个参数是子节点。
1
2
3
4
5
6
7
8

createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中 attribute 对应的数据对象。可选。
  {
    // 接受一个字符串、对象或字符串和对象组成的数组
    'class': {
      foo: true,
      bar: false
    },
    // 与 `v-bind:style` 的 API 相同，
    // 接受一个字符串、对象，或对象组成的数组
    style: {
      color: 'red',
      fontSize: '14px'
    },
    // 普通的 HTML attribute
    attrs: {
      id: 'foo'
    },
    // 组件 prop
    props: {
      myProp: 'bar'
    },
    // DOM property
    domProps: {
      innerHTML: 'baz'
    },
    // 事件监听器在 `on` 内
    on: {
      click: this.clickHandler
    },
    ...
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
[
createElement()
]
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45