<template>
<div style="background-color: #F1F3F8;box-sizing: border-box; padding:8px;display: flex;height: 100vh">
<div style="flex: 1;background-color: #ffffff;margin-right: 4px;height: 100%">
<div v-for="item in tags" :key="item.id"
:style="{borderBottom:'2px solid #F1F3F8',cursor:'pointer',lineHeight:'48px',paddingLeft:'8px',color:item.isClick?'#fff':'#000',backgroundColor:item.isClick?'#448EF7':'#fff'}"
@click="tagClick(item)"
>
{{ item.name }}
</div>
</div>
<div style="flex: 5;background-color: #ffffff;overflow-y: scroll">
<div id="div1" style="height: 500px;background-color: #0a76a4"></div>
<div id="div2" style="height: 1000px;background-color: #d50e20"></div>
<div id="div3" style="height: 500px;background-color: #2d10e7"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: [
{
id:'div1',
name: "1",
isClick: true
},
{
id:'div2',
name: "2",
isClick: false
},
{
id:'div3',
name: "3",
isClick: false
}
]
}
},
methods: {
tagClick(item) {
this.tags.forEach(e => {
e.isClick = false
})
item.isClick = true
var anchor = document.getElementById(item.id);
anchor.scrollIntoView();
},
},
}
</script>
