如何使用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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值