Vue iview tree鼠标移动使用气泡显示完整文字

该博客展示了如何使用HTML、CSS和JavaScript实现一个具有自定义样式和事件处理的树形组件。通过引入iView库,实现了节点的悬停提示,调整了提示框的样式和位置,并提供了在节点选择时触发的on-check-change事件处理函数,打印当前选中项和选中数组。示例代码包括HTML结构、CSS样式和JavaScript逻辑,以及用于测试的数据结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现效果:
在这里插入图片描述
html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="iview.css" rel="stylesheet" />
    <style>
        #app {
            padding: 32px;
        }

        .demo-tree-render .ivu-tree-title {
            width: 100%;
        }

        .ivu-poptip-inner {
            opacity: 0.7;
            background-color: #000;
            color: #fff;
        }

        .ivu-poptip-popper[x-placement^=bottom] .ivu-poptip-arrow:after {
            border-bottom-color: #000;
            opacity: 0.7;
        }

        .ivu-poptip-popper[x-placement^=bottom] .ivu-poptip-arrow {
            top: 2px;
        }

        .ivu-poptip-popper[x-placement^=top] .ivu-poptip-arrow:after {
            border-top-color: #000;
            opacity: 0.7;
        }

        .ivu-poptip-popper[x-placement^=top] .ivu-poptip-arrow {
            bottom: 2px;
        }

        .treePoptipClass {
            min-width: 100px;
        }

        .ivu-poptip-body-content-word-wrap {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <tree :data="data5" :render="renderContent" class="demo-tree-render" @on-check-change="treeCheck" show-checkbox></tree>
    </div>
</body>
</html>
<script src="vue.min.js"></script>
<script src="iview.min.js"></script>
<script src="test.js"></script>

js代码:

var Main = {
    data() {
        return {
            data5: [
                {
                    title: 'parent-1',
                    expand: true,
                    children: [
                        {
                            title: 'child 1-1',
                            expand: true,
                            children: [
                                {
                                    title: 'leaf 1-1-1',
                                    expand: true
                                },
                                {
                                    title: 'leaf 1-1-2',
                                    expand: true
                                }
                            ]
                        },
                        {
                            title: 'child 1-2',
                            expand: true,
                            children: [
                                {
                                    title: 'leaf 1-2-1',
                                    expand: true
                                },
                                {
                                    title: 'leaf 1-2-1',
                                    expand: true
                                }
                            ]
                        }
                    ]
                }
            ],
            buttonProps: {
                type: 'default',
                size: 'small',
            }
        }
    },
    methods: {
        renderContent(h, { root, node, data }) {
            return h('poptip', {
                props: {
                    trigger: 'hover',
                    'popper-class': 'treePoptipClass',
                    placement: 'top',
                    transfer: true,
                    'word-wrap': true,
                }
            }, [
                h('span', data.title),
                h('span', {
                    slot: 'content'
                }, data.title)
            ])
        },
        treeCheck(thisCheckData, item) {
            console.log('当前选中项:', item);
            console.log('选中的数组:', thisCheckData);
        }
    }
}
var Component = Vue.extend(Main)
new Component().$mount('#app')

查看效果:
在这里插入图片描述
资源下载地址:https://download.csdn.net/download/huqngqing/35389694

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值