锚点列表插件

src/components/app-list-anchor/app-list-anchor.less

+.anchor {
+	.anchor-list {
+		padding-right: 10px;
+		position: fixed;
+		right: 0;
+		top: 50%;
+		margin-top: -50%;
+		text-align: center;
+		.anchor-item {
+			position: relative;
+			margin-bottom: 10px;
+		}
+	}
+	.main-list {
+		.anchor-point {
+			width: 100%;
+			height: 30px;
+			line-height: 30px;
+			padding-left: 10px;
+			color: #8a8a8a;
+			background-color: #e8e8e8;
+		}
+		.detail {
+			width: 100%;
+			height: 40px;
+			border-bottom: 1px solid #e8e8e8;
+			padding-left: 10px;
+			line-height: 40px;
+			font-size: 14px;
+		}
+	}
+}

src/components/app-list-anchor/app-list-anchor.vue

+<template>
+  <div class="anchor">
+    <div v-for="(item,showItemIndex) in showItems" :key="showItemIndex+'a'" class="main-list">
+      <div v-if="item.isAnchor" class="anchor-point">
+        <span v-if="item.group" :id="item.group">{{item.group}}</span>
+      </div>
+      <div class="detail" @click="termClick(item)">
+        <span>{{item.mobordername}}</span>
+      </div>
+    </div>
+    <div v-for="(item,unSetIndex) in unSetGroupList" :key="unSetIndex+'b'" class="main-list">
+      <div v-if="unSetIndex === 0" class="anchor-point" id="notGrouped">#</div>
+      <div class="detail" @click="termClick(item)">
+        <span>{{item.mobordername}}</span>
+      </div>
+    </div>
+    <div class="anchor-list">
+      <div v-for="(anchor,anchorIndex) in anchorList" :key="anchorIndex+'c'" class="anchor-item" @click="jump(anchor)">
+        <span>{{anchor}}</span>
+      </div>
+      <div class="anchor-item" @click="jump('notGrouped')">#</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  Vue,
+  Component,
+  Prop,
+  Provide,
+  Emit,
+  Watch,
+} from "vue-property-decorator";
+@Component({
+  components: {},
+})
+export default class AppQuickGroupTab extends Vue {
+  /**
+   * 数据项集合
+   *
+   * @type {string}
+   * @memberof Mob
+   */
+  @Prop() protected items?: any;
+
+  /**
+   * UI数据项集合
+   *
+   * @type {string}
+   * @memberof Mob
+   */
+  public showItems: Array<any> = [];
+
+  /**
+   * 分组项集合
+   *
+   * @type {string}
+   * @memberof Mob
+   */
+  public anchorList: Array<any> = [];
+
+  /**
+   * 分组项集合
+   *
+   * @type {string}
+   * @memberof Mob
+   */
+  public unSetGroupList: Array<any> = [];
+
+  /**
+   * 监控items变化
+   *
+   * @memberof AppQuickGroup
+   */
+  @Watch("items", { immediate: true })
+  public itemsWatch(newVal: any, oldVal: any): void {
+    if (newVal) {
+      // 清空当前ui数组
+      this.showItems.length = 0;
+      this.unSetGroupList.length = 0;
+      this.$forceUpdate();
+      
+      // 根据分组属性进行排序
+      this.showItems.push(...this.items);
+      this.reSort(this.showItems);
+
+      // 没有分组的单独处理
+      this.unSetGroupHandled();
+
+      // 处理锚点列表数据
+      this.anchorListHandled(newVal);
+
+      // 设置锚点
+      this.setAnchor();
+    }
+  }
+
+  // item_click(item)
+
+  /**
+   * 监控items变化
+   *
+   * @memberof AppQuickGroup
+   */
+  public anchorListHandled(array:any) {
+    // 赋值锚点列表
+    array.forEach((item: any) => {
+      if (item.group) {
+        this.anchorList.push(item.group);
+      }
+    });
+    // 锚点列表去重
+    this.anchorList = this.anchorList.filter((anchor: any, index: any) => {
+      return this.anchorList.indexOf(anchor, 0) === index;
+    });
+    // 锚点列表排序
+      this.reSort(this.anchorList);
+  }
+
+  public termClick(item:any) {
+    this.$emit("termClick",item)
+  }
+
+  /**
+   * 监控items变化
+   *
+   * @memberof AppQuickGroup
+   */
+  public unSetGroupHandled() {
+    this.showItems.forEach((item:any,index:any) => {
+      if (!item.group) {
+        this.unSetGroupList.push(item)
+        this.showItems.splice(index,1)
+      }
+    })
+  }
+
+  /**
+   * 监控items变化
+   *
+   * @memberof AppQuickGroup
+   */
+  public reSort(array:any) {
+    array.sort((prev: any, next: any) => {
+        let x:any = prev;
+        let y:any = next;
+        if (x < y) {return -1}
+        if (x > y) {return 1}
+        return 0;
+      });
+  }
+
+  /**
+   * 监控items变化
+   *
+   * @memberof AppQuickGroup
+   */
+  public setAnchor() {
+    if (this.anchorList.length > 0) {
+      this.anchorList.forEach((anchor: any) => {
+        let index = this.showItems.findIndex((item: any) => {
+          if (item.group) {
+            return item.group === anchor;
+          }
+        });
+        if (index !== -1) {
+          this.showItems[index].isAnchor = true;
+        }
+      });
+    }
+  }
+
+  /**
+   * 监控items变化
+   *
+   * @memberof AppQuickGroup
+   */
+  public jump(id:string) {
+    let target:any = document.querySelector(`#${id}`);
+    if (target) {
+      target.scrollIntoView(true);
+      this.$toast({
+        duration:750,
+        message:`${id}`,
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import "./app-mob-anchor-list.less";
+</style>
\ No newline at end of file