如何渲染滚动条

v0.7.1+, 需要先注册 Scrollbar 插件

滚动条分为水平和垂直滚动条，所以你需要创建如下模板：

html

<!-- 垂直 -->
<div class="scrollbar verticalScrollbar" ref="verticalScrollbarRef" @click="onVerticalScrollbarClick">
    <div
        class="scrollbarInner"
        :style="verticalScrollbarStyle"
        @click.stop
        @mousedown="onVerticalScrollbarMousedown"
    ></div>
</div>

<!-- 水平 -->
<div class="scrollbar horizontalScrollbar" ref="horizontalScrollbarRef" @click="onHorizontalScrollbarClick">
    <div
        class="scrollbarInner"
        :style="horizontalScrollbarStyle"
        @click.stop
        @mousedown="onHorizontalScrollbarMousedown"
    ></div>
</div>

外层元素为滚动条容器元素，内层为滚动条元素。

内层滚动条元素一般需要设置成绝对定位，样式示例如下：

css

.scrollbar {
    position: relative;
    background-color: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;

    &.verticalScrollbar {
        width: 10px;
        height: 500px;

        .scrollbarInner {
            width: 10px;
            left: 0;
        }
    }

    &.horizontalScrollbar {
        width: 500px;
        height: 10px;

        .scrollbarInner {
            height: 10px;
            top: 0;
        }
    }

    .scrollbarInner {
        position: absolute;
        background-color: #ccc;
        border-radius: 10px;
    }
}

垂直滚动条的top和height、水平滚动条的left和width值需要根据插件返回的数据进行设置。

首先你需要调用setScrollBarWrapSize方法传递你的滚动条容器的宽和高：

// 水平滚动条容器的宽度
const { width } = this.$refs.horizontalScrollbarRef.getBoundingClientRect()
// 垂直滚动条容器的高度
const { height } = this.$refs.verticalScrollbarRef.getBoundingClientRect()
mindMap.scrollbar.setScrollBarWrapSize(width, height)

如果容器大小发生了改变需要再次调用该方法传递改变后的大小。

然后你需要监听scrollbar_change方法来获取滚动条大小和位置数据：

mindMap.on('scrollbar_change', this.updateScrollbar)

// 根据事件返回的滚动条数据更新滚动条元素：
{
    updateScrollbar(data) {
        const {
            vertical,
            horizontal
        } = data
        this.verticalScrollbarStyle = {
            top: vertical.top + '%',
            height: vertical.height + '%'
        }
        this.horizontalScrollbarStyle = {
            left: horizontal.left + '%',
            width: horizontal.width + '%'
        }
    }
}

事件返回数据的是百分比数值，所以需要添加%。

最后，需要给滚动条元素绑定mousedown事件，并且调用插件的onMousedown方法：

// 垂直滚动条元素
mindMap.scrollbar.onMousedown(e, 'vertical')

// 水平滚动条元素
mindMap.scrollbar.onMousedown(e, 'horizontal')

这样就能实现鼠标拖动滚动条更新画布位置的功能。

如果你还需要实现点击滚动条容器元素实现滚动条位置的跳变功能，那么需要给滚动条元素绑定点击事件，并且调用插件的onClick方法：

// 垂直滚动条元素
mindMap.scrollbar.onClick(e, 'vertical')

// 水平滚动条元素
mindMap.scrollbar.onClick(e, 'horizontal')

以上就是实现滚动条渲染的全部步骤。

如何渲染滚动条 ​

如何渲染滚动条