当前位置: 首页 > 工具软件 > PopTip View > 使用案例 >

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

庄子平
2023-12-01

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’

 类似资料: