快速到达指定的面板。当页面内容太多时,可以用此组件
效果图
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页面