vue函数式组件中的render函数如何添加伪类样式

Question

问题描述export default {    functional: true,    props: {        data: {            type: String,            default() {                return '';            }        },        depth: {            type: Number        }    },    render: (h, ctx) => {        return h('div', {            class: ['treeitem'],            style: {                ':hover': {                    background: 'yellow'  // 希望在div这个元素上添加一个伪类的样式，但是没有效果                },                height: '40px',                lineHeight: '40px',                border: '1px solid #f0f0f0',                'marginLeft': ctx.props.depth*20 + 'px'            },            on: {                click: () => {                },                mouseover: () => {                }            }        }, [            h('Icon', {                props: {                    type: 'arrow-right-b',                },                style: {                    marginLeft: '20px',                    display: 'inline-block',                    width: '40px',                    hight: '40px'                }            }),            h('span',{                style: {                }            }, ctx.props.data),            h('Button', {                props: {                    icon: 'ios-gear-outline'                },                style: {                    float: 'right'                 },                on: {                    click: () => {                    }                }            })        ]);    }}问题出现的环境背景及自己尝试过哪些方法尝试为div元素添加class,但是作为函数式组件，这个是js文件，style该写在哪里？相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

这不是 vue 的问题，目前行内样式是不支持写伪类的

可以尝试在 head 中添加一个 style 标签

const styleEl = document.createElement('style')

styleEl.innerHTML = `

  .treeitem:hover{

    background: yellow;

  }

`

document.head.appendChild(styleEl)

Answer 2

推荐绑定到class上

Answer 3

推荐通过class来操作，然后通过class选中伪类