<template>
<div class="scroll" :style="{'width':width,'height':height}" id="suScroll">
<i v-show="btn" class="el-icon-arrow-left circle-icon arrow-left" :class="{'disabled':lbtnDisabled}" @click="arrowClick('left')" :style="{'width':arrowWidth,'height':arrowWidth}" id="suScrollArrowLeft"></i>
<i v-show="btn" class="el-icon-arrow-right circle-icon arrow-right" :class="{'disabled':rbtnDisabled}" @click="arrowClick('right')" :style="{'width':arrowWidth,'height':arrowWidth}" id="suScrollArrowRight"></i>
<div class="show-window" id="showWindow">
<div class="content-wrapper" id="contentWrapper">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default{
name:'su-scroll',
props:{
width:{
type:String,
default:'100%'
},
height:{
type:String,
default:'100%'
},
arrowWidth:{
type:String,
default:'40px'
},
step:{
type:Number,
default:100
},
gutter:{
type:Number,
default:15
}
},
data(){
return{
btn:true,
lbtnDisabled:true,
rbtnDisabled:false
}
},
mounted(){
this.$nextTick(()=>{
const $suScroll = document.getElementById('suScroll')
const $suScrollArrowLeft = document.getElementById('suScrollArrowLeft')
const $suScrollArrowRight = document.getElementById('suScrollArrowRight')
const $showWindow = document.getElementById('showWindow')
const $contentWrapper = document.getElementById('contentWrapper')
const suScrollWidth = $suScroll.offsetWidth
const suScrollHeight = $suScroll.offsetHeight
const suScrollArrowLeftWidth = $suScrollArrowLeft.offsetWidth
const suScrollArrowLeftHeight = $suScrollArrowLeft.offsetHeight
// 设置插入元素间距
$contentWrapper.children.forEach(item=>{
item.style.paddingRight = this.gutter + 'px'
})
// 设置显示窗口宽度
$showWindow.style.width = suScrollWidth - 2*suScrollArrowLeftWidth + 'px'
// 设置箭头高度
$suScrollArrowLeft.style.top = suScrollHeight/2 + 'px'
$suScrollArrowRight.style.top = suScrollHeight/2 + 'px'
$suScrollArrowLeft.style.marginTop = -suScrollArrowLeftHeight/2 + 'px'
$suScrollArrowRight.style.marginTop = -suScrollArrowLeftHeight/2 + 'px'
// 获取每个插入元素的宽度
const length = Array.prototype.reduce.call($contentWrapper.children,(a,b)=>{
return a+b.offsetWidth
},0)
// 设置整体宽度
$contentWrapper.style.width = length + 'px'
// 根据宽高度设置左右按钮箭头大小
$suScrollArrowLeft.style.fontSize = $suScrollArrowLeft.offsetWidth*0.8 + 'px'
// 若整体<=显示窗口,隐藏按钮
if ($contentWrapper.offsetWidth <= $showWindow.offsetWidth) {
this.btn = false
$contentWrapper.style.width = suScrollWidth + 'px'
$showWindow.style.width = suScrollWidth + 'px'
$contentWrapper.style.display = 'flex'
$contentWrapper.style.justifyContent = 'space-between'
}
})
},
methods:{
arrowClick(type){
const $showWindow = document.getElementById('showWindow')
const $contentWrapper = document.getElementById('contentWrapper')
if (type==='left') {
$showWindow.scrollLeft -= this.step
}else{
$showWindow.scrollLeft += this.step
}
// 设置滚动尽头按钮颜色变浅
this.lbtnDisabled = parseFloat($showWindow.scrollLeft)===0
this.rbtnDisabled = parseFloat($showWindow.scrollLeft)+parseFloat($showWindow.offsetWidth) >= parseFloat($contentWrapper.style.width)
}
}
}
</script>
<style scoped lang="scss">
.scroll{
position: relative;
.show-window{
overflow-x: scroll;
white-space: nowrap;
margin: 0 auto;
height: 100%;
padding: 5px 10px;
box-sizing: border-box;
.content-wrapper{
&>div{
display: inline-block;
// padding-right: 15px;
}
&>div:last-child{
padding-right: 0;
}
}
}
.arrow-left,.arrow-right{
position: absolute;
z-index: 100;
top: 127px;
cursor: pointer;
}
.arrow-left{
left: 0;
}
.arrow-right{
right: 0;
}
::-webkit-scrollbar{
display: none; /*ChromeSafari*/
}
.circle-icon{
background: #85C4FB;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
}
.disabled{
opacity: 0.4;
}
</style>
vue橱窗横向滚动组件
最新推荐文章于 2024-08-22 15:31:06 发布