2024年6月12日发(作者：)

},

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}