vue 页面导航组件

快速到达指定的面板。当页面内容太多时，可以用此组件
效果图
html部分

<div class="float-nemu-wrapper">
				<span class="el-icon-arrow-left" v-if="!show" @mouseover="more" style="width:30px;height:30px;line-height:30px;background:#7a6e6e;border-radius:2px;color:#fff;vertical-align:top"></span>
				<ul @click.stop v-if="show" @mouseout="less" @mouseover="more">
					<li class="float-menu-item" v-for="item in list" :key="item.id" :class="{\'active\':index === item.id}" @click="select(item)">
						{{item.name}}
					</li>
				</ul>
			<div/>

js部分

    props: {
            // 导航配置数据
            data: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            // 容器
            container: {
                type: String,
                default: 'content-container'
            },
            // 子元素索引
            el: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            // 是否在弹出框中使用
            isDialog: {
                type: Boolean,
                default: false
            }
        },
 data: function () {
            return {
                // 子集列表
                list: [],
                // 被选中元素
                index: '',
                // 容器
                content: null,
                // Todo 废弃
                id: '',
                // 是否展示所有选项
                show: false
            }
        },
       created: function () {
            var _this = this,
                index
            this.list = this.data;
            if (this.list.length > 0) {
                index = this.index = this.list[0].id;
                this.$nextTick(function () {
                    _this.content = !_this.isDialog ? document.querySelector('#' + _this.container) : closest(_this.el[index].$el, '.el-dialog__wrapper');
                    console.log(_this.content)
                });
            }
        },
        methods: {
            /**
             * 选中
             */
            select: function (obj) {
                var index = obj.id,
                    item = this.el[index],
                    offsetTop = item.$el.offsetTop
                this.index = index
                this.content.scrollTop = offsetTop
            },
            more: function () {
                this.show = true
            },
            less: function () {
                this.show = false
            }
        }

css部分

.float-nemu-wrapper {
    position: fixed;
    right: 30px;
    background: rgba(238,241,246,.6);
    line-height: 2.2em;
    /*z-index: 2002;*/
    z-index: 2000;
    text-align: center;
    border-radius: 2px;
    top: 60px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
	  color: #303133;
}
.float-menu-item {
    padding: 0 6px;
    min-width: 3em;
}
.float-menu-item.active {
    background: #DBE6F0;
    color: #FFFFFF;
}

普通页面代码示例：

<tp-float-menu :el="$refs" :data="floatData"></tp-float-menu>

floatData: [{
name: 'item1',
id: 'item1'
}, {
name: 'item2',
id: 'item2'
}]

isDialog属性可以加在dialog页面