动态设置月报编辑页的右侧树形焦点

src/views/monthlyReport/childrenPage/editReport/index.vue

@@ -1,51 +1,57 @@
 <template>
-  <div ref="pageWrapper" class="page-wrapper" @click="setInit">
+  <div ref='pageWrapper' class='page-wrapper' @click='setInit'>
     <!--    :target="() => $refs.pageWrapper"-->
     <!--    <Affix :offset-top="30" :target="() => $refs.pageWrapper.parentNode">-->
     <!--      <el-button type="danger" size="small">测试</el-button>-->
     <!--    </Affix>-->
     <!--  header  -->
-    <headerCom title="月报" sub-title="新建月报" />
+    <headerCom title='月报' sub-title='新建月报' />
 
     <!--  content  -->
-    <el-row class="content-wrapper" :gutter="20">
-      <el-col :span="20">
-        <el-button size="small">默认按钮</el-button>
-        <el-button type="primary" size="small">主要按钮</el-button>
-        <el-button type="success" size="small">成功按钮</el-button>
-        <el-button type="info" size="small">信息按钮</el-button>
-        <el-button type="warning" size="small">警告按钮</el-button>
-        <el-button type="danger" size="small"> 危险按钮</el-button>
-        <div v-for="i in 70" :key="i">
-          <el-button type="danger" size="small">测试</el-button>
+    <div class='content-wrapper'>
+      <div class='left-wrapper'>
+        <el-button size='small'>默认按钮</el-button>
+        <el-button type='primary' size='small'>主要按钮</el-button>
+        <el-button type='success' size='small'>成功按钮</el-button>
+        <el-button type='info' size='small'>信息按钮</el-button>
+        <el-button type='warning' size='small'>警告按钮</el-button>
+        <el-button type='danger' size='small'> 危险按钮</el-button>
+        <div id='user_0'>user_0</div>
+        <div v-for='i in 70' :key='i'>
+          <el-button type='danger' size='small'>测试</el-button>
         </div>
-        <div id="user_2_2_0">user_2_2_0</div>
-        <div v-for="i in 70" :key="`${i}btn`">
-          <el-button size="small">默认按钮</el-button>
-          <el-button type="primary" size="small">主要按钮</el-button>
-          <el-button type="success" size="small">成功按钮</el-button>
-          <el-button type="info" size="small">信息按钮</el-button>
-          <el-button type="warning" size="small">警告按钮</el-button>
+        <div id='user_2_2_0'>user_2_2_0</div>
+        <div v-for='i in 70' :key='`${i}btn`'>
+          <el-button size='small'>默认按钮</el-button>
+          <el-button type='primary' size='small'>主要按钮</el-button>
+          <el-button type='success' size='small'>成功按钮</el-button>
+          <el-button type='info' size='small'>信息按钮</el-button>
+          <el-button type='warning' size='small'>警告按钮</el-button>
         </div>
-      </el-col>
-      <el-col :span="4" style="padding-right: 0">
-        <Affix :offset-top="103" :target="() => $refs.pageWrapper.parentNode">
+      </div>
+      <div class='right-wrapper'>
+        <Affix :listen-time='100' :userFun='userFun' :offset-top='103' :target='() => $refs.pageWrapper.parentNode'>
           <Anchor
-            :list="list"
-            :active="anchorActive"
-            @change="anchorChange"
-            @openMenu="openMenu"
+            :list='list'
+            :active='anchorActive'
+            @change='anchorChange'
+            @openMenu='openMenu'
           />
-          <Menu ref="menu" :menu-data="menuData">
-            <div>测试线上</div>
+          <Menu ref='menu' :menu-data='menuData'>
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+            <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item>
           </Menu>
         </Affix>
-      </el-col>
-    </el-row>
+      </div>
+
+    </div>
   </div>
 </template>
 
-<script type="text/javascript">
+<script type='text/javascript'>
 import headerCom from '../../components/header'
 import Affix from '@/components/affix/affix'
 import Anchor from '../../components/anchor'
@@ -104,6 +110,7 @@ export default {
         { name: '本月优秀', key: 'user_3' }
       ],
       anchorActive: '',
+      scrollTop: 0,
       menuData: null
     }
   },
@@ -126,6 +133,30 @@ export default {
       //   this.$refs.menu.show = true
       //   console.log(127)
       // })
+    },
+    userFun() {
+      const getOffsetTop = (id) => {
+        return document.getElementById(id).offsetTop
+      }
+      console.log(136)
+      const list = [
+        {
+          key: 'user_0',
+          offsetTop: getOffsetTop('user_0')
+        }, {
+          key: 'user_2_2_0',
+          offsetTop: getOffsetTop('user_2_2_0')
+
+        }]
+      // console.log(this.$refs.pageWrapper.parentElement.scrollTop)
+      this.scrollTop = this.$refs.pageWrapper.parentElement.scrollTop
+      this.anchorActive = ''
+      list.forEach(elm => {
+        console.log(Math.abs(this.scrollTop - elm.offsetTop), 145)
+        if (Math.abs(this.scrollTop - elm.offsetTop) < 100) {
+          this.anchorActive = elm.key
+        }
+      })
     }
   }
   // destroyed() {
@@ -135,6 +166,20 @@ export default {
   // }
 }
 </script>
-<style scoped lang="less">
+<style scoped lang='less'>
 @import '../../style';
+
+.content-wrapper {
+  display: flex;
+
+  .left-wrapper {
+    flex: 1;
+    width: 100%;
+  }
+
+  .right-wrapper {
+    flex: 1 1 0;
+    display: contents;
+  }
+}
 </style>

src/views/monthlyReport/components/anchor.vue

@@ -1,40 +1,41 @@
 <template>
-  <div v-if="list.length" class="anchor-wrapper">
-    <div v-if="list.length > 1" class="line" />
-    <div v-for="(item, index) in list" :key="item.key" class="title-wrapper">
+  <div v-if='list.length' class='anchor-wrapper'>
+    <div v-if='list.length > 1' class='line' />
+    <div v-for='(item, index) in list' :key='item.key' class='title-wrapper'>
       <div
-        v-if="index === 0 || index === list.length - 1"
-        class="radius"
-        :class="{
+        v-if='index === 0 || index === list.length - 1'
+        class='radius'
+        :class='{
           down: list.length > 1 && index === list.length - 1,
           center: list.length === 1
-        }"
+        }'
       />
-
       <el-tooltip
-        class="item"
-        effect="dark"
-        :enterable="false"
-        :content="item.name"
-        placement="top-start"
+        class='item'
+        effect='dark'
+        :enterable='true'
+        :content='item.name'
+        placement='top-start'
       >
         <div
-          class="mi"
-          @contextmenu.prevent="openMenu($event, item)"
-          @click="change(item)"
-          @mousemove="mouseMoveItem({ event: $event, item })"
+          class='mi'
+          @contextmenu.prevent='openMenu($event, item)'
+          @click='change(item)'
+          @mousemove='mouseMoveItem({ event: $event, item })'
         >
-          <span class="title"> {{ item.name }}</span>
+          <span class='title' :class='{ active: active === item.key }'>
+            {{ item.name }}</span
+          >
         </div>
       </el-tooltip>
 
-      <span v-if="item.children && item.children.length">
+      <span v-if='item.children && item.children.length'>
         <Anchor
-          :active="active"
-          :list="item.children"
-          @change="(item) => change(item)"
-          @mouseMoveItem="mouseMoveItem"
-          @openMenu="(val) => openMenu(val.event, val.item)"
+          :active='active'
+          :list='item.children'
+          @change='(item) => change(item)'
+          @mouseMoveItem='mouseMoveItem'
+          @openMenu='(val) => openMenu(val.event, val.item)'
         />
       </span>
     </div>
@@ -80,7 +81,7 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang='less'>
 .anchor-wrapper {
   background-color: #ffffff;
   position: relative;