可以自己试试:
<template>
<div>
<div class="input" id="anchor-first">
<div>
<el-button type="primary" @click="goAnchor('#anchor-'+first)">用户管理</el-button>
<el-button @click="goAnchor('#anchor-'+second)">配置管理 </el-button>
<el-button @click="goAnchor('#anchor-'+third)">角色管理</el-button>
</div>
<el-input v-model="input1" placeholder="用户管理"></el-input>
</div>
<div class="input" id="anchor-second">
<div>
<el-button @click="goAnchor('#anchor-'+first)">用户管理</el-button>
<el-button type="primary" @click="goAnchor('#anchor-'+second)">配置管理 </el-button>
<el-button @click="goAnchor('#anchor-'+third)">角色管理</el-button>
</div>
<el-input v-model="input2" placeholder="配置管理"></el-input>
</div>
<div class="input" id="anchor-third">
<div>
<el-button @click="goAnchor('#anchor-'+first)">用户管理</el-button>
<el-button @click="goAnchor('#anchor-'+second)">配置管理 </el-button>
<el-button type="primary" @click="goAnchor('#anchor-'+third)">角色管理</el-button>
</div>
<el-input v-model="input3" placeholder="角色管理"></el-input>
</div>
</div>
</template>
<script>
export default {
data() {
return {
first:'first',
second:'second',
third:'third',
input1: '',
input2: '',
input3: '',
}
},
methods:{
goAnchor(selector) {
// 拿到DOM元素
var anchor = this.$el.querySelector(selector)
document.documentElement.scrollTop = anchor.offsetTop
}
}
}
</script>
<style scoped>
.input{
height: 500px;
}
</style>