如何使用vue的渲染函数 API:h函数创建一个el-select弹出框
如何使用vue的渲染函数 API:h函数创建一个el-select弹出框
·
如何使用vue的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('[不发送]');
});
h():创建虚拟 DOM 节点 (vnode)。
function h(
type: string | Component,
props?: object | null,
children?: Children | Slot | Slots
): VNode
第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。
第二个参数是要传递的 prop,
第三个参数是子节点。
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()
]
)
更多推荐
所有评论(0)