// 如果没有配置项,则可以省略不写 {}
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
)
])
参考:vue2.x的h函数(createElement)与vue3中的h函数
vue使用render函数渲染table表格某一列的数组数据