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选中伪类