admin 管理员组文章数量: 1086019
2024年3月14日发(作者:moveit2group找不到)
},
computed: {
navStyle () {
return {
transform: `translateX(-${set}px)`
}
}
},
methods: {
scrollPrev () {
const containerSize = this.$Width
const currentOffset = set
if (!currentOffset) return
const newOffset =
currentOffset > containerSize ? currentOffset - containerSize : 0
set = newOffset
},
scrollNext () {
const navSize = this.$Width
const containerSize = this.$Width
const currentOffset = set
if (navSize - currentOffset <= containerSize) return
const newOffset =
navSize - currentOffset > containerSize * 2
? currentOffset + containerSize
: navSize - containerSize
set = newOffset
},
scrollToActiveTab () {
if (!able) return
const nav = this.$
const activeTab = this.$elector('.is-active')
if (!activeTab) return
const navScroll = this.$oll
const activeTabBounding = ndingClientRect()
const navScrollBounding = ndingClientRect()
const maxOffset = Width -
const currentOffset = set
let newOffset = currentOffset
if ( < ) {
newOffset =
currentOffset - ( - )
}
if ( > ) {
newOffset =
currentOffset + -
}
newOffset = (newOffset, 0)
set = (newOffset, maxOffset)
},
update () {
if (!this.$) return
const navSize = this.$Width
= this.$Height
const containerSize = this.$Width
const currentOffset = set
if (containerSize < navSize) {
const currentOffset = set
able = able || {}
= currentOffset
= currentOffset + containerSize < navSize
if (navSize - currentOffset < containerSize) {
set = navSize - containerSize
}
} else {
able = false
if (currentOffset > 0) {
set = 0
}
}
}
},
updated () {
()
},
render () {
const { navStyle, scrollable, scrollNext, scrollPrev, height, width } = this
const lineHeight = {
'line-height': height + 'px'
}
const scrollBtn = scrollable
? [
class={['scrollView__nav-prev', ? '' : 'is-disabled']} on-click={scrollPrev} > style={lineHeight} class="el-icon-arrow-left">
class={['scrollView__nav-next', ? '' : 'is-disabled']} on-click={scrollNext} > class="el-icon-arrow-right">
]
: null
return (
class={[
'scrollView__nav-wrap',
scrollable ? 'is-scrollable' : ''
]}
style={{ width }}
>
{scrollBtn}
class="scrollView__nav-scroll"
ref="navScroll"
>
class="scrollView__nav"
ref="nav"
style={navStyle}
>
{this.$t}
)
},
mounted () {
addResizeListener(this.$el, )
},
beforeDestroy () {
if (this.$el && ) removeResizeListener(this.$el, )
}
}
.scrollView__nav-wrap {
display: inline-block;
overflow: hidden;
margin-bottom: -1px;
position: relative;
vertical-align: middle;
}
.scrollView__-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.scrollView__nav-wrap::after {
display: none;
}
.scrollView__nav-scroll {
overflow: hidden;
}
.scrollView__nav {
white-space: nowrap;
position: relative;
transition: transform 0.3s, -webkit-transform 0.3s;
float: left;
z-index: 2;
}
.scrollView__nav-prev {
left: 0;
}
.scrollView__nav-next {
right: 0;
}
.scrollView__nav-next,
.scrollView__nav-prev {
position: absolute;
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #909399;
}
版权声明:本文标题:[vue]滚动视图解决ElementUINavMenu导航菜单过长显示的问题 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/p/1710347109a568856.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论