iview中使用render函数渲染poptip,poptip使用插槽插入组件,简单实现组件渲染

iview的table中使用render函数可以渲染iview中的各种插件,

如气泡提示等功能,如果继续使用render渲染dom,会提高代码的复杂度。所以可以直接使用插槽,把组件独立出来。

首先熟悉render的格式

render: (h, params) => {
return h('Poptip', {
			class: 'xxx',
			 props: {
			   placement: 'left-start',
			 },    
			 on: {
                'on-popper-hide': () => {
                  this.xxxx= []
                }
             },
             nativeOn: {
                click: () => {
                }
              }
              // 以上是Poptip 属性设置
       	}, [
       	// 此处插入数组,数组内的值可以理解为Poptip的操作dom,如h('p', params.row.xxxxxx)
			h('p', params.row.xxxxxx),h('p', params.row.xxxxxx),
			//此时可以用slot插槽将自定义组件Component插入Poptip
			h(Component, {
              slot: 'content',
              props: {
                xxxxxxxxx
              },
              on: {
                'wayid': val => {
                  xxxxxxxxxxxx
                }
              }
              // 以上是Component属性设置
            })
			])}

最后引入Component即可
import Componentfrom ‘./xxxxxxx’

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值