render和h函数的使用

			// 如果没有配置项,则可以省略不写 {}
			h("div", [
                h('h-tooltip', // 在tooltip中进行改造
                // ----- h-tooltip 的配置项 -----Start
                  {
                    props: {
                      placement: "top-start",
                      // content: '提示内容',
                      transfer: true
                    },
                    style: {
                      'overflow': 'hidden',
                      'text-overflow': 'ellipsis',
                      'white-space': 'nowrap',
                      'display': 'inline-block',
                      'width': '200px'
                    }
                  },
                  // ----- h-tooltip 的配置项 -----End
                  
                  // ----- h-tooltip 的主要内容 -----Start
                  [
                  	// ----- h-tooltip 作为插槽,鼠标上移后的提示内容 -----Start
                    h('div', {
                        slot: 'content' // 设置为提示内容插槽
                      }, [
                      // ----- h-tooltip 提示内容文字前的图标 -----Start
                      h('span', {
                      	// ----- h-tooltip 点击图标触发事件
                        on: {
                          click: () => {
                            console.log('--------------触发事件')
                          }
                        }
                      }, [
                      	// ----- h-tooltip 图标
                        h('i', {
                          class: 'el-icon-document-copy'
                        })
                      ]),
                      // ----- h-tooltip 提示内容文字前的图标 -----End
                      // ----- h-tooltip 提示内容的文字 -----Start
                      h('p', {
                        style: {
                          display: "inline-block",
                          marginLeft: "3px"
                        }
                      }, '提示的内容')
                      // ----- h-tooltip 提示内容的文字 -----End
                    ]),
                    // ----- h-tooltip 作为插槽,鼠标上移后的提示内容 -----End
                    
                    // ----- h-tooltip 要展示的内容 -----Start
                    h('p', {
                      style: {
                        'overflow': 'hidden',
                        'text-overflow': 'ellipsis',
                        'white-space': 'nowrap',
                        'display': 'inline-block',
                        'width': '200px'
                      }
                    }, '一个需要鼠标上移后出现提示的内容')
                    // ----- h-tooltip 要展示的内容 -----End
                    
                  ]
                  // ----- h-tooltip 的主要内容 -----End
                )
              ])

render和h函数的使用_第1张图片

参考:vue2.x的h函数(createElement)与vue3中的h函数
vue使用render函数渲染table表格某一列的数组数据

你可能感兴趣的:(vue.js,javascript,前端)