说明：
当标签不够或者是在最两边的标签在可视区范围，点击以上标签则
滚到可是区内部，如果是其他的标签则滚动到可视区中间显示
效果如下
代码如下：
<template>
<div class="app">
<div>
<div class="buttonAdd" @click="addOneTag">前边添加一个</div>
<div class="buttonSub" @click="subOneTag">前边减去一个</div>
<div class="box" >
<div class="left" @click="clickLeft">左</div>
<div class="outWrap">
<div class="content"
v-for="(item,index) in dataList"
:key="item"
@click="contentClick(index,$event)"
>
{{item}}
</div>
</div>
<div class="right" @click="clickRight">右</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
dataList:[],
}
},
methods:{
contentClick(index,e){
let outWrap = document.querySelector(".outWrap")
console.log("e.target.offsetLeft",e.target.offsetLeft)
let outWrapOffsetWidth = outWrap.offsetWidth
let outWrapScrollWidth = outWrap.scrollWidth
let centerWidth = outWrapOffsetWidth/2
// 为啥要减个36，这个36是咋来的，这个36是第一个标签的offsetLeft
// 更准确的说是.outWrap这个标签没有滚动之前的offsetLeft
let clickPoint = e.target.offsetLeft-36+e.target.offsetWidth/2
if(clickPoint<centerWidth){
outWrap.scrollLeft = 0
}else if(clickPoint>outWrapScrollWidth-centerWidth){
outWrap.scrollLeft = outWrapScrollWidth
}else {
outWrap.scrollLeft = clickPoint-centerWidth
}
},
// 点击滚到最左边
clickLeft(){
let outWrap = document.querySelector(".outWrap")
outWrap.scrollLeft = 0
},
// 点击滚到最右边
clickRight(){
let outWrap = document.querySelector(".outWrap")
outWrap.scrollLeft = outWrap.offsetWidth+300
},
// 添加一个tag标签
addOneTag(){
let timeStamp = new Date().getTime()
this.dataList.splice(0,0,"content"+timeStamp)
},
// 删除一个tag标签
subOneTag(){
if(this.dataList.length>0){
this.dataList.splice(0,1)
}
},
}
}
</script>
<style lang="less" scoped>
.buttonAdd,.buttonSub{
background-color: yellowgreen;
width: 200px;
height: 50px;
float: left;
margin-top: 300px;
text-align: center;
line-height: 50px;
}
.buttonSub{
background-color: pink;
}
.box{
width: 100%;
height: 50px;
background-color: pink;
/*为了更好的表达效果，就是滚动条不显示出来
就必需在父标签上hidden了*/
overflow: hidden;
border: 1px solid black;
.left{
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
}
.outWrap{
float: left;
width: calc(100% - 100px);
/*这个高度为啥是72，原因是overflow-x: auto;则会
产生一个横向的滚动条，但是我们不想要这个滚动条就
需要将此滚动条给超出内容区然后在父标签上给hidden了*/
height: 72px;
/*text-align: center;*/
line-height: 50px;
background-color: greenyellow;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
.content{
display: inline-block;
width: 400px;
text-align: center;
height: 50px;
border-left: 1px solid black;
border-right: 1px solid black;
}
}
.right{
float: right;
width: 50px;
height: 50px;
border: 1px solid black;
}
}
</style>
改进后：
<template>
<div class="tags">
<div>
<!-- <div class="buttonAdd" @click="addOneTag">前边添加一个</div>-->
<!-- <div class="buttonSub" @click="subOneTag">前边减去一个</div>-->
<div class="box" >
<div class="left" @click="clickLeft">左</div>
<div class="outWrap">
<div class="content"
v-for="(item,index) in dataList"
:key="item+index"
@click="contentClick(index,$event)"
>
{{item}}
</div>
</div>
<div class="right" @click="clickRight">右</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "tags",
props: {
dataList: {
type: Array,
default: () => {
return []
}
},
},
data(){
return {
// dataList:[],
}
},
methods:{
contentClick(index,e){
let outWrap = document.querySelector(".outWrap")
// let box = document.querySelector(".box")
// console.log("e.target.offsetLeft",e.target.offsetLeft)
// console.log("e.target.clientWidth",e.target.clientWidth)
// console.log("e.target.offsetWidth",e.target.offsetWidth)
// console.log("e.target.width",e.target.width)
// let targetWidth = e.target.clientWidth
let outWrapOffsetWidth = outWrap.offsetWidth
let outWrapScrollWidth = outWrap.scrollWidth
// let boxClientWidth = box.clientWidth
// console.log("outWrap.offsetWidth",outWrap.offsetWidth)
// console.log("outWrap.offsetLeft",outWrap.offsetLeft)
// console.log("outWrap.scrollWidth",outWrap.scrollWidth)
// console.log("box.clientWidth",boxClientWidth)
let centerWidth = outWrapOffsetWidth/2
// 为啥要减个36，这个36是咋来的，这个36是第一个标签的offsetLeft
// 更准确的说是.outWrap这个标签没有滚动之前的offsetLeft
let clickPoint = e.target.offsetLeft-36 - outWrap.offsetLeft+e.target.offsetWidth/2
if(clickPoint<centerWidth){
outWrap.scrollLeft = 0
}else if(clickPoint>outWrapScrollWidth-centerWidth){
outWrap.scrollLeft = outWrapScrollWidth
}else {
outWrap.scrollLeft = clickPoint-centerWidth
}
},
// 点击滚到最左边
clickLeft(){
let outWrap = document.querySelector(".outWrap")
outWrap.scrollLeft = 0
},
// 点击滚到最右边
clickRight(){
let outWrap = document.querySelector(".outWrap")
// scrollWidth 可见区宽度+超出隐藏的宽度
outWrap.scrollLeft = outWrap.scrollWidth
},
// 添加一个tag标签
addOneTag(){
let timeStamp = new Date().getTime()
this.dataList.splice(0,0,"content"+timeStamp)
},
// 删除一个tag标签
subOneTag(){
if(this.dataList.length>0){
this.dataList.splice(0,1)
}
},
}
}
</script>
<style lang="less" scoped>
.buttonAdd,.buttonSub{
background-color: yellowgreen;
width: 200px;
height: 50px;
float: left;
/*margin-top: 300px;*/
text-align: center;
line-height: 50px;
}
.buttonSub{
background-color: pink;
}
.box{
width: 100%;
height: 50px;
background-color: pink;
/*为了更好的表达效果，就是滚动条不显示出来
就必需在父标签上hidden了*/
overflow: hidden;
border: 1px solid black;
.left{
float: left;
width: 30px;
height: 50px;
border: 1px solid black;
}
.outWrap{
float: left;
width: calc(100% - 60px);
/*这个高度为啥是72，原因是overflow-x: auto;则会
产生一个横向的滚动条，但是我们不想要这个滚动条就
需要将此滚动条给超出内容区然后在父标签上给hidden了*/
height: 72px;
/*text-align: center;*/
line-height: 50px;
background-color: greenyellow;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
.content{
display: inline-block;
/*width: 400px;*/
text-align: center;
padding: 0 20px;
margin-right: 10px;
height: 50px;
border-left: 1px solid black;
border-right: 1px solid black;
}
}
.right{
float: right;
width: 30px;
height: 50px;
border: 1px solid black;
}
}
</style>
