n20-common-lib 1.2.2 → 1.2.3

package/src/components/Anchor/index.vue

@@ -1,185 +1,185 @@
-<template>
-  <el-scrollbar id="page-scrollbar" style="height: 100%">
-    <div ref="Anchor">
-      <slot></slot>
-      <ul class="n20-anchor">
-        <li
-          v-for="(item, index) in AnchorNavList"
-          :key="index"
-          :class="[
-            'n20-anchor-item',
-            value === item.id ? 'n20-anchor-activit' : ''
-          ]"
-          @click="getAnchorItem(item.id, index)"
-        >
-          {{ item.title }}
-        </li>
-      </ul>
-    </div>
-  </el-scrollbar>
-</template>
-
-<script>
-import {
-  getScrollContainer,
-  vueDebounce
-} from '../../utils/getScrollContainer.js'
-
-export default {
-  name: 'Anchor',
-  props: {
-    scrollDom: {
-      type: String,
-      default: ''
-    },
-    // 默认选中tab按钮
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      AnchorNavList: [], // 按钮数据
-      AnchorNavMap: {}, // 楼层高度的映射
-      scrollDisabled: false, //禁止滚动函数执行
-      valueType: 1, //当前楼层改变的类型，1是组件传递、按钮直达改变，2是通过滚动监听自动改变
-      scrollFunDebounceFun: vueDebounce('scrollFun', 100)
-    }
-  },
-  computed: {
-    scrollWrap() {
-      if (this.scrollDom) {
-        return document.querySelector(this.scrollDom)
-      } else {
-        return getScrollContainer(this.$refs.Anchor, true)
-      }
-    }
-  },
-  watch: {
-    // 监听楼层变化，当为父组件传递，或者按钮直达时，手动滚动到当前楼层
-    value: function (val) {
-      this.valueType === 1 && this.scrollDomFun(this.AnchorNavMap[val])
-    }
-  },
-  async mounted() {
-    await this.init()
-    // 如果传了当前楼层，直接到达对应的高度
-    if (this.value) {
-      this.scrollWrap.scrollTop = this.AnchorNavMap[this.value]
-    } else {
-      //没有传楼层，则根据当前高度自动获取
-      this.getAnchorValue(this.scrollWrap.scrollTop)
-    }
-    this.scrollWrap.addEventListener('scroll', this.scrollFunDebounce)
-  },
-  beforeDestroy() {
-    this.scrollWrap.removeEventListener('scroll', this.scrollFunDebounce)
-  },
-  methods: {
-    // 初始化，获取电梯按钮数据，获取楼层高度映射
-    init() {
-      let parentTop =
-        this.$refs.Anchor.getBoundingClientRect().top -
-        this.scrollWrap.getBoundingClientRect().top
-      let list = this.$children[0].$children.map((item) => {
-        let rect = item.$el.getBoundingClientRect()
-        let itemScrollTop = item.$el.offsetTop
-        this.AnchorNavMap[item.id] = itemScrollTop
-        return {
-          scrollTop: itemScrollTop,
-          top: rect.top - parentTop,
-          bottom: rect.bottom - parentTop,
-          height: rect.height,
-          title: item.title,
-          id: item.id
-        }
-      })
-      // 去掉多余的节点
-      this.AnchorNavList = list.filter(
-        (val) => val.id !== undefined && val.title !== undefined
-      )
-    },
-    //滚动的函数
-    scrollFun(e) {
-      this.getAnchorValue(e.target.scrollTop)
-    },
-    scrollFunDebounce(e) {
-      !this.scrollDisabled && this.scrollFunDebounceFun(e)
-    },
-    // 根据当前高度获取楼层位置
-    getAnchorValue(scrollTop) {
-      let arr = []
-      for (let i = 0; i < this.AnchorNavList.length; i++) {
-        let item = this.AnchorNavList[i]
-        let height = this.scrollWrap.getBoundingClientRect().height + scrollTop
-        let value = 0
-        if (scrollTop <= item.top) {
-          value = height - item.top
-          if (value > item.height) {
-            value = item.height
-          } else if (value < 0) {
-            value = 0
-          }
-        } else if (scrollTop > item.top && scrollTop <= item.bottom) {
-          value = item.bottom - scrollTop
-        }
-        value = value / item.height
-        arr.push(value)
-      }
-      let max = Math.max(...arr)
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i] === max) {
-          this.valueType = 2
-          this.$emit('input', this.AnchorNavList[i].id)
-          break
-        }
-      }
-    },
-    getAnchorItem(id, i) {
-      //直达楼层
-      if (id === this.value || this.scrollDisabled) {
-        return
-      }
-      this.$children[0].$children[i].show = true
-      this.valueType = 1
-      this.$emit('input', id)
-    },
-    // 模拟滚动
-    scrollDomFun(itemScrollTop) {
-      this.scrollDisabled = true //模拟滚动过程中，禁用直达楼层和监听的滚动事件
-      let speed = 50
-      let scrollTop = this.scrollWrap.scrollTop
-      if (itemScrollTop > scrollTop) {
-        // 向下滚动
-        let timer = setInterval(() => {
-          scrollTop += speed
-          if (scrollTop < itemScrollTop) {
-            this.scrollWrap.scrollTop = scrollTop
-          } else {
-            this.scrollWrap.scrollTop = itemScrollTop
-            clearInterval(timer)
-            setTimeout(() => {
-              this.scrollDisabled = false
-            }, 100)
-          }
-        }, 20)
-      } else {
-        // 向上滚动
-        let timer = setInterval(() => {
-          scrollTop -= speed
-          if (scrollTop >= itemScrollTop) {
-            this.scrollWrap.scrollTop = scrollTop
-          } else {
-            this.scrollWrap.scrollTop = itemScrollTop
-            clearInterval(timer)
-            setTimeout(() => {
-              this.scrollDisabled = false
-            }, 100)
-          }
-        }, 20)
-      }
-    }
-  }
-}
-</script>
+<template>
+  <el-scrollbar id="page-scrollbar" style="height: 100%">
+    <div ref="Anchor">
+      <slot></slot>
+      <ul class="n20-anchor">
+        <li
+          v-for="(item, index) in AnchorNavList"
+          :key="index"
+          :class="[
+            'n20-anchor-item',
+            value === item.id ? 'n20-anchor-activit' : ''
+          ]"
+          @click="getAnchorItem(item.id, index)"
+        >
+          {{ item.title }}
+        </li>
+      </ul>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script>
+import {
+  getScrollContainer,
+  vueDebounce
+} from '../../utils/getScrollContainer.js'
+
+export default {
+  name: 'Anchor',
+  props: {
+    scrollDom: {
+      type: String,
+      default: ''
+    },
+    // 默认选中tab按钮
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      AnchorNavList: [], // 按钮数据
+      AnchorNavMap: {}, // 楼层高度的映射
+      scrollDisabled: false, //禁止滚动函数执行
+      valueType: 1, //当前楼层改变的类型，1是组件传递、按钮直达改变，2是通过滚动监听自动改变
+      scrollFunDebounceFun: vueDebounce('scrollFun', 100)
+    }
+  },
+  computed: {
+    scrollWrap() {
+      if (this.scrollDom) {
+        return document.querySelector(this.scrollDom)
+      } else {
+        return getScrollContainer(this.$refs.Anchor, true)
+      }
+    }
+  },
+  watch: {
+    // 监听楼层变化，当为父组件传递，或者按钮直达时，手动滚动到当前楼层
+    value: function (val) {
+      this.valueType === 1 && this.scrollDomFun(this.AnchorNavMap[val])
+    }
+  },
+  async mounted() {
+    await this.init()
+    // 如果传了当前楼层，直接到达对应的高度
+    if (this.value) {
+      this.scrollWrap.scrollTop = this.AnchorNavMap[this.value]
+    } else {
+      //没有传楼层，则根据当前高度自动获取
+      this.getAnchorValue(this.scrollWrap.scrollTop)
+    }
+    this.scrollWrap.addEventListener('scroll', this.scrollFunDebounce)
+  },
+  beforeDestroy() {
+    this.scrollWrap.removeEventListener('scroll', this.scrollFunDebounce)
+  },
+  methods: {
+    // 初始化，获取电梯按钮数据，获取楼层高度映射
+    init() {
+      let parentTop =
+        this.$refs.Anchor.getBoundingClientRect().top -
+        this.scrollWrap.getBoundingClientRect().top
+      let list = this.$children[0].$children.map((item) => {
+        let rect = item.$el.getBoundingClientRect()
+        let itemScrollTop = item.$el.offsetTop
+        this.AnchorNavMap[item.id] = itemScrollTop
+        return {
+          scrollTop: itemScrollTop,
+          top: rect.top - parentTop,
+          bottom: rect.bottom - parentTop,
+          height: rect.height,
+          title: item.title,
+          id: item.id
+        }
+      })
+      // 去掉多余的节点
+      this.AnchorNavList = list.filter(
+        (val) => val.id !== undefined && val.title !== undefined
+      )
+    },
+    //滚动的函数
+    scrollFun(e) {
+      this.getAnchorValue(e.target.scrollTop)
+    },
+    scrollFunDebounce(e) {
+      !this.scrollDisabled && this.scrollFunDebounceFun(e)
+    },
+    // 根据当前高度获取楼层位置
+    getAnchorValue(scrollTop) {
+      let arr = []
+      for (let i = 0; i < this.AnchorNavList.length; i++) {
+        let item = this.AnchorNavList[i]
+        let height = this.scrollWrap.getBoundingClientRect().height + scrollTop
+        let value = 0
+        if (scrollTop <= item.top) {
+          value = height - item.top
+          if (value > item.height) {
+            value = item.height
+          } else if (value < 0) {
+            value = 0
+          }
+        } else if (scrollTop > item.top && scrollTop <= item.bottom) {
+          value = item.bottom - scrollTop
+        }
+        value = value / item.height
+        arr.push(value)
+      }
+      let max = Math.max(...arr)
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i] === max) {
+          this.valueType = 2
+          this.$emit('input', this.AnchorNavList[i].id)
+          break
+        }
+      }
+    },
+    getAnchorItem(id, i) {
+      //直达楼层
+      if (id === this.value || this.scrollDisabled) {
+        return
+      }
+      this.$children[0].$children[i].show = true
+      this.valueType = 1
+      this.$emit('input', id)
+    },
+    // 模拟滚动
+    scrollDomFun(itemScrollTop) {
+      this.scrollDisabled = true //模拟滚动过程中，禁用直达楼层和监听的滚动事件
+      let speed = 50
+      let scrollTop = this.scrollWrap.scrollTop
+      if (itemScrollTop > scrollTop) {
+        // 向下滚动
+        let timer = setInterval(() => {
+          scrollTop += speed
+          if (scrollTop < itemScrollTop) {
+            this.scrollWrap.scrollTop = scrollTop
+          } else {
+            this.scrollWrap.scrollTop = itemScrollTop
+            clearInterval(timer)
+            setTimeout(() => {
+              this.scrollDisabled = false
+            }, 100)
+          }
+        }, 20)
+      } else {
+        // 向上滚动
+        let timer = setInterval(() => {
+          scrollTop -= speed
+          if (scrollTop >= itemScrollTop) {
+            this.scrollWrap.scrollTop = scrollTop
+          } else {
+            this.scrollWrap.scrollTop = itemScrollTop
+            clearInterval(timer)
+            setTimeout(() => {
+              this.scrollDisabled = false
+            }, 100)
+          }
+        }, 20)
+      }
+    }
+  }
+}
+</script>