vue模態(tài)框實現(xiàn)動態(tài)錨點

更新時間：2022年07月05日 12:57:30 作者：crystal.xj

這篇文章主要為大家詳細介紹了vue模態(tài)框實現(xiàn)動態(tài)錨點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue模態(tài)框實現(xiàn)動態(tài)錨點的具體代碼，供大家參考，具體內(nèi)容如下

參考：vue中實現(xiàn)錨點跳轉及滾動監(jiān)聽的簡便方法

效果圖：

代碼：

// html代碼
<template>
? <div id="app">
? ? <el-dialog
? ? ? ? class="abow_dialog"
? ? ? ? title="增加內(nèi)容"
? ? ? ? :visible.sync="DialogVisible"
? ? ? ? width="80%"
? ? ? ? center
? ? ? ? >
? ? ? ? <div class="steps">
? ? ? ? ? <ul>
? ? ? ? ? ? <li v-for="(item,index) in title_list" :key="index">
? ? ? ? ? ? ? <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'}" @click="jump(index)">
? ? ? ? ? ? ? ? <i class="el-icon-thumb"></i>{{item.title}}
? ? ? ? ? ? ? </span>
? ? ? ? ? ? </li>
? ? ? ? ? </ul>
? ? ? ? </div>

? ? ? ? <div class="result" @scroll="onScroll" >
? ? ? ? ? <div class="scroll-item"><span>第一項項</span></div>
? ? ? ? ? <div class="scroll-item"><span>第二項項</span></div>
? ? ? ? ? <div class="scroll-item"><span>第三項項</span></div>
? ? ? ? ? <div class="scroll-item"><span>第四項項</span></div>
? ? ? ? ? <div class="scroll-item"><span>第五項項</span></div>
? ? ? ? ? <div class="scroll-item"><span>第六項項</span></div>
? ? ? ? </div>

? ? ? ? <span slot="footer" class="dialog-footer" text-align="right">
? ? ? ? ? <el-button @click="DialogVisible = false">取 消</el-button>
? ? ? ? ? <el-button type="primary" @click="DialogVisible = false">確 定</el-button>
? ? ? ? </span>
? ? ? </el-dialog>
? </div>
</template>

// js代碼
<script>
? export default {
? ? name: 'dialogandmaod',
? ? data() {
? ? ? return {
? ? ? ? DialogVisible: true, //一般默認是false，為了方便查看就設置成了true
? ? ? ? activeStep :0,
? ? ? ? title_list:[
? ? ? ? ? {title:'第一項項'},
? ? ? ? ? {title:'第二項項'}, ? ? ? ?
? ? ? ? ? {title:'第三項項'},
? ? ? ? ? {title:'第四項項'},
? ? ? ? ? {title:'第五項項'},
? ? ? ? ? {title:'第六項項'},
? ? ? ? ]
? ? ? }
? ? },
? ? methods:{
? ? ? jump(index) {
? ? ? ? var items = document.querySelectorAll(".scroll-item");
? ? ? ? for (var i = 0; i < items.length; i++) {
? ? ? ? ? if (index === i) {
? ? ? ? ? ? items[i].scrollIntoView({
? ? ? ? ? ? ? block: "start",//默認跳轉到頂部
? ? ? ? ? ? ? behavior: "smooth"http://滾動的速度
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? }
? ? ? },
? ? ? onScroll(e) {
? ? ? ? let scrollItems = document.querySelectorAll(".scroll-item");
? ? ? ? for (let i = scrollItems.length - 1; i >= 0; i--) {
? ? ? ? ? // 判斷滾動條滾動距離是否大于當前滾動項可滾動距離
? ? ? ? ? let judge =
? ? ? ? ? ? e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop;
? ? ? ? ? if (judge) {
? ? ? ? ? ? this.activeStep = i;
? ? ? ? ? ? break;
? ? ? ? ? }
? ? ? ? }
? ? ? } ? ?
? ? }
? }
</script>

// css代碼
<style lang="scss">
.el-dialog--center .el-dialog__footer {
? text-align: right !important;
}
.abow_dialog {
? display: flex;
? justify-content: center;
? align-items: Center;
? overflow: hidden;
? .el-dialog {
? ? margin: 0 auto !important;
? ? height: 90%;
? ? overflow: hidden;
? ? .steps{
? ? ? background-color: #fff;
? ? ? max-height: calc(-16px + 100vh);
? ? ? position: fixed;
? ? ? width: 98px;
? ? ? top: 90px;
? ? ? right: 2%;
? ? ? ul {
? ? ? ? list-style: none;
? ? ? ? padding-left: 5px;
? ? ? ? margin: 12px 0;
? ? ? }
? ? ? li {
? ? ? ? margin: 7px 5px;
? ? ? ? span{
? ? ? ? ? cursor:pointer;
? ? ? ? ? &:hover{
? ? ? ? ? ? color: #88bcec !important;
? ? ? ? ? }
? ? ? ? ? i{
? ? ? ? ? ? margin-right: 5px;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? ? .result {
? ? ? position: absolute;
? ? ? left: 10px;
? ? ? top: 54px;
? ? ? bottom: 70px;
? ? ? right: 0;
? ? ? padding: 0;
? ? ? overflow-y: scroll;
? ? ? .scroll-item {
? ? ? ? width: 100%;
? ? ? ? height: 500px;
? ? ? ? margin-top:20px;
? ? ? ? background: rgb(137, 238, 238);
? ? ? ? >span {
? ? ? ? ? font-size: 20px;
? ? ? ? }
? ? ? ? &:first-child {
? ? ? ? ? margin-top: 0;
? ? ? ? }
? ? ? ? &:last-child {
? ? ? ? ? height: 500px;
? ? ? ? }
? ? ? }
? ? }
? ? .el-dialog__footer{
? ? ? position: absolute;
? ? ? left: 0;
? ? ? right: 0;
? ? ? bottom: 0;
? ? }
? }
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: