@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/indexes/indexes.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="classPrefix + ' ' + tClass"
     disable-scroll
   >
@@ -14,7 +14,7 @@
       <view
         v-for="(item, index) in innerIndexList"
         :key="index"
-        :class="tools.cls(classPrefix + '__sidebar-item', [['active', dataCurrent === item]]) + ' ' + tClassSidebarItem"
+        :class="[classPrefix + '__sidebar-item', dataCurrent === item ? classPrefix + '__sidebar-item' + '--active' : '', tClassSidebarItem]"
         :data-index="index"
         @click.stop="onClick(item, index)"
       >
@@ -37,9 +37,7 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import TCell from '../cell/cell';
-import TCellGroup from '../cell-group/cell-group';
+
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
 import props from './props';
@@ -53,317 +51,316 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-indexes`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'current',
-      event: 'change',
-    },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-sidebar`,
-    `${prefix}-class-sidebar-item`,
-  ],
-  mixins: [
-    pageScrollMixin(),
-    ParentMixin(RELATION_MAP.IndexesAnchor),
-  ],
+export default {
   components: {
-    TIcon,
-    TCell,
-    TCellGroup,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'change',
-    'select',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      innerHeight: 0,
-      innerIndexList: [],
-      scrollTop: 0,
-      activeAnchor: this.current,
-      showTips: false,
-
-      tools,
-
-      timer: null,
-      groupTop: [],
-      sidebar: null,
-      currentTouchAnchor: null,
-
-      dataCurrent: this.current,
-    };
-  },
-  watch: {
-    indexList: {
-      handler(v, pre) {
-        const cb = () => {
-          this.setIndexList(v);
-          this.setHeight(this.innerHeight);
-        };
-        if (!pre?.length) {
-          // 防止抖音小程序报错
-          setTimeout(() => {
-            cb();
-          }, 33);
-        } else {
-          cb();
-        }
-      },
-      immediate: true,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    height(v) {
-      this.setHeight(v);
+    controlledProps: [
+      {
+        key: 'current',
+        event: 'change',
+      },
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-sidebar`,
+      `${prefix}-class-sidebar-item`,
+    ],
+    mixins: [
+      pageScrollMixin(),
+      ParentMixin(RELATION_MAP.IndexesAnchor),
+    ],
+    props: {
+      ...props,
     },
-    stickyOffset() {
-      this.setAnchorByCurrent(this.dataCurrent, 'update', true);
+    emits: [
+      'change',
+      'select',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        innerHeight: 0,
+        innerIndexList: [],
+        scrollTop: 0,
+        activeAnchor: this.current,
+        showTips: false,
+
+        tools,
+
+        timer: null,
+        groupTop: [],
+        sidebar: null,
+        currentTouchAnchor: null,
+
+        dataCurrent: this.current,
+      };
     },
+    watch: {
+      indexList: {
+        handler(v, pre) {
+          const cb = () => {
+            this.setIndexList(v);
+            this.setHeight(this.innerHeight);
+          };
+          if (!pre?.length) {
+          // 防止抖音小程序报错
+            setTimeout(() => {
+              cb();
+            }, 33);
+          } else {
+            cb();
+          }
+        },
+        immediate: true,
+      },
+      height(v) {
+        this.setHeight(v);
+      },
+      stickyOffset() {
+        this.setAnchorByCurrent(this.dataCurrent, 'update', true);
+      },
 
-    current: {
-      handler(val) {
-        this.dataCurrent = val;
+      current: {
+        handler(val) {
+          this.dataCurrent = val;
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    dataCurrent: {
-      handler(e) {
-        if (e && this.activeAnchor && e !== this.activeAnchor) {
-          this.setAnchorByCurrent(e, 'update');
-        }
+      dataCurrent: {
+        handler(e) {
+          if (e && this.activeAnchor && e !== this.activeAnchor) {
+            this.setAnchorByCurrent(e, 'update');
+          }
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    this.timer = null;
-    this.groupTop = [];
-    this.sidebar = null;
-
-    if (this.innerHeight === 0) {
-      this.setHeight();
-    }
-
-    if (this.indexList === null) {
-      this.setIndexList();
-    }
-  },
-  methods: {
-    getFirstCharacter,
-    setHeight(height) {
-      if (!height) {
-        const { windowHeight } = systemInfo;
-        height = windowHeight;
+    mounted() {
+      this.timer = null;
+      this.groupTop = [];
+      this.sidebar = null;
+
+      if (this.innerHeight === 0) {
+        this.setHeight();
       }
-      this.innerHeight = height;
 
-      setTimeout(() => {
-        this.getAllRect();
-      });
+      if (this.indexList === null) {
+        this.setIndexList();
+      }
     },
+    methods: {
+      getFirstCharacter,
+      setHeight(height) {
+        if (!height) {
+          const { windowHeight } = systemInfo;
+          height = windowHeight;
+        }
+        this.innerHeight = height;
 
-    setIndexList(list) {
-      if (!list) {
-        const start = 'A'.charCodeAt(0);
-        const alphabet = [];
+        setTimeout(() => {
+          this.getAllRect();
+        });
+      },
 
-        for (let i = start, end = start + 26; i < end; i += 1) {
-          alphabet.push(String.fromCharCode(i));
-        }
+      setIndexList(list) {
+        if (!list) {
+          const start = 'A'.charCodeAt(0);
+          const alphabet = [];
 
-        this.innerIndexList = alphabet;
-      } else {
-        this.innerIndexList = list;
-      }
-    },
+          for (let i = start, end = start + 26; i < end; i += 1) {
+            alphabet.push(String.fromCharCode(i));
+          }
 
-    getAllRect() {
-      this.getAnchorsRect().then(() => {
-        this.groupTop.forEach((item, index) => {
-          const next = this.groupTop[index + 1];
-          item.totalHeight = (next?.top || Infinity) - item.top;
-        });
+          this.innerIndexList = alphabet;
+        } else {
+          this.innerIndexList = list;
+        }
+      },
 
-        const current = this.dataCurrent || this.innerIndexList[0];
-        this.setAnchorByCurrent(current, 'init');
-      })
-        .catch((err) => {
-          console.log('err', err);
-        });
-      this.getSidebarRect();
-    },
+      getAllRect() {
+        this.getAnchorsRect().then(() => {
+          this.groupTop.forEach((item, index) => {
+            const next = this.groupTop[index + 1];
+            item.totalHeight = (next?.top || Infinity) - item.top;
+          });
 
-    getAnchorsRect() {
-      return Promise.all((this.children || [])
-        .map(child => getRect(child, `.${name}-anchor`)
-          .then((rect) => {
-            this.groupTop.push({
-              height: rect.height,
-              top: rect.top,
-              anchor: child.index,
-            });
-          })
+          const current = this.dataCurrent || this.innerIndexList[0];
+          this.setAnchorByCurrent(current, 'init');
+        })
           .catch((err) => {
-            console.log('err', err);
-          })));
-    },
+            console.warn('err', err);
+          });
+        this.getSidebarRect();
+      },
 
-    getSidebarRect() {
-      getRect(this, `#id-${name}__bar`).then((rect) => {
-        const { top, height } = rect;
-        const { length } = this.innerIndexList;
+      getAnchorsRect() {
+        return Promise.all((this.children || [])
+          .map(child => getRect(child, `.${name}-anchor`)
+            .then((rect) => {
+              this.groupTop.push({
+                height: rect.height,
+                top: rect.top,
+                anchor: child.index,
+              });
+            })
+            .catch((err) => {
+              console.warn('err', err);
+            })));
+      },
 
-        this.sidebar = {
-          top,
-          height,
-          itemHeight: (height - (length - 1) * 2) / length, // margin = 2px
-        };
-      })
-        .catch((err) => {
-          console.log('err', err);
-        });
-    },
+      getSidebarRect() {
+        getRect(this, `#id-${name}__bar`).then((rect) => {
+          const { top, height } = rect;
+          const { length } = this.innerIndexList;
+
+          this.sidebar = {
+            top,
+            height,
+            itemHeight: (height - (length - 1) * 2) / length, // margin = 2px
+          };
+        })
+          .catch((err) => {
+            console.warn('err', err);
+          });
+      },
 
-    toggleTips(flag) {
-      if (!flag) {
-        clearInterval(this.timer);
-        this.timer = setTimeout(() => {
-          this.showTips = false;
-        }, 300);
-      } else {
-        this.showTips = true;
-      }
-    },
+      toggleTips(flag) {
+        if (!flag) {
+          clearInterval(this.timer);
+          this.timer = setTimeout(() => {
+            this.showTips = false;
+          }, 300);
+        } else {
+          this.showTips = true;
+        }
+      },
 
-    setAnchorByCurrent(current, source, force) {
-      const { stickyOffset } = this;
+      setAnchorByCurrent(current, source, force) {
+        const { stickyOffset } = this;
 
-      if (this.activeAnchor !== null && this.activeAnchor === current && !force) return;
+        if (this.activeAnchor !== null && this.activeAnchor === current && !force) return;
 
-      const target = this.groupTop.find(item => item.anchor === current);
+        const target = this.groupTop.find(item => item.anchor === current);
 
-      if (target) {
-        const scrollTop = target.top - stickyOffset;
+        if (target) {
+          const scrollTop = target.top - stickyOffset;
 
-        this.setAnchorOnScroll(scrollTop);
-        uni.pageScrollTo({
-          scrollTop,
-          duration: 0,
-        });
+          this.setAnchorOnScroll(scrollTop);
+          uni.pageScrollTo({
+            scrollTop,
+            duration: 0,
+          });
 
-        if (['click', 'touch'].includes(source)) {
-          this.toggleTips(true);
-          this.$emit('select', { index: current });
+          if (['click', 'touch'].includes(source)) {
+            this.toggleTips(true);
+            this.$emit('select', { index: current });
+          }
         }
-      }
-    },
-
-    onClick(current) {
-      this.setAnchorByCurrent(current, 'click');
-    },
+      },
 
-    onTouchMove(e) {
-      this.onAnchorTouch(e);
-    },
+      onClick(current) {
+        this.setAnchorByCurrent(current, 'click');
+      },
 
-    onTouchCancel() {
-      this.toggleTips(false);
-    },
+      onTouchMove(e) {
+        this.onAnchorTouch(e);
+      },
 
-    onTouchEnd(e) {
-      this.toggleTips(false);
-      this.onAnchorTouch(e);
-    },
+      onTouchCancel() {
+        this.toggleTips(false);
+      },
 
-    onAnchorTouch: throttle(function (e) {
-      const getAnchorIndex = (clientY) => {
-        const offsetY = clientY - this.sidebar.top;
-        const max = this.innerIndexList.length - 1;
+      onTouchEnd(e) {
+        this.toggleTips(false);
+        this.onAnchorTouch(e);
+      },
 
-        if (offsetY <= 0) {
-          return 0;
-        }
+      onAnchorTouch: throttle(function (e) {
+        const getAnchorIndex = (clientY) => {
+          const offsetY = clientY - this.sidebar.top;
+          const max = this.innerIndexList.length - 1;
 
-        if (offsetY > this.sidebar.height) {
-          return max;
-        }
+          if (offsetY <= 0) {
+            return 0;
+          }
 
-        return Math.min(max, Math.floor(offsetY / this.sidebar.itemHeight));
-      };
-      const index = getAnchorIndex(e.changedTouches[0].clientY);
+          if (offsetY > this.sidebar.height) {
+            return max;
+          }
 
-      this.setAnchorByCurrent(this.innerIndexList[index], 'touch');
-    }, 1000 / 30), // 30 frame
+          return Math.min(max, Math.floor(offsetY / this.sidebar.itemHeight));
+        };
+        const index = getAnchorIndex(e.changedTouches[0].clientY);
 
-    setAnchorOnScroll(scrollTop) {
-      if (!this.groupTop) {
-        return;
-      }
+        this.setAnchorByCurrent(this.innerIndexList[index], 'touch');
+      }, 1000 / 30), // 30 frame
 
-      const { sticky, stickyOffset } = this;
+      setAnchorOnScroll(scrollTop) {
+        if (!this.groupTop) {
+          return;
+        }
 
-      scrollTop += stickyOffset;
+        const { sticky, stickyOffset } = this;
 
-      const curIndex = this.groupTop.findIndex(group => scrollTop >= group.top - group.height && scrollTop <= group.top + group.totalHeight - group.height);
+        scrollTop += stickyOffset;
 
-      if (curIndex === -1) return;
+        const curIndex = this.groupTop.findIndex(group => scrollTop >= group.top - group.height && scrollTop <= group.top + group.totalHeight - group.height);
 
-      const curGroup = this.groupTop[curIndex];
+        if (curIndex === -1) return;
 
-      this.activeAnchor = curGroup.anchor;
-      setTimeout(() => {
-        this._trigger('change', { index: curGroup.anchor, current: curGroup.anchor });
-      });
+        const curGroup = this.groupTop[curIndex];
 
-      if (sticky) {
-        const offset = curGroup.top - scrollTop;
-        const betwixt = offset < curGroup.height && offset > 0 && scrollTop > stickyOffset;
+        this.activeAnchor = curGroup.anchor;
+        setTimeout(() => {
+          this._trigger('change', { index: curGroup.anchor, current: curGroup.anchor });
+        });
 
-        this.children.forEach((child, index) => {
-          if (index === curIndex) {
-            const sticky = scrollTop > stickyOffset;
-            const anchorStyle = `transform: translate3d(0, ${betwixt ? offset : 0}px, 0); top: ${stickyOffset}px`;
-            if (anchorStyle !== child.anchorStyle || sticky !== child.sticky) {
-              child.sticky = sticky;
-              child.active = true;
-              child.dataStyle = `height: ${curGroup.height}px`;
-              child.anchorStyle = anchorStyle;
-            }
-          } else if (index + 1 === curIndex) {
+        if (sticky) {
+          const offset = curGroup.top - scrollTop;
+          const betwixt = offset < curGroup.height && offset > 0 && scrollTop > stickyOffset;
+
+          this.children.forEach((child, index) => {
+            if (index === curIndex) {
+              const sticky = scrollTop > stickyOffset;
+              const anchorStyle = `transform: translate3d(0, ${betwixt ? offset : 0}px, 0); top: ${stickyOffset}px`;
+              if (anchorStyle !== child.anchorStyle || sticky !== child.sticky) {
+                child.sticky = sticky;
+                child.active = true;
+                child.dataStyle = `height: ${curGroup.height}px`;
+                child.anchorStyle = anchorStyle;
+              }
+            } else if (index + 1 === curIndex) {
             // 两个 anchor 同时出现时的上一个
-            const anchorStyle = `transform: translate3d(0, ${
-              betwixt ? offset - curGroup.height : 0
-            }px, 0); top: ${stickyOffset}px`;
-            if (anchorStyle !== child.anchorStyle) {
-              child.sticky = true;
-              child.active = true;
-              child.dataStyle = `height: ${curGroup.height}px`;
-              child.anchorStyle = anchorStyle;
+              const anchorStyle = `transform: translate3d(0, ${
+                betwixt ? offset - curGroup.height : 0
+              }px, 0); top: ${stickyOffset}px`;
+              if (anchorStyle !== child.anchorStyle) {
+                child.sticky = true;
+                child.active = true;
+                child.dataStyle = `height: ${curGroup.height}px`;
+                child.anchorStyle = anchorStyle;
+              }
+            } else {
+              child.active = false;
+              child.sticky = false;
+              child.dataStyle = '';
+              child.anchorStyle = '';
             }
-          } else {
-            child.active = false;
-            child.sticky = false;
-            child.dataStyle = '';
-            child.anchorStyle = '';
-          }
-        });
-      }
-    },
+          });
+        }
+      },
 
-    onScroll({ scrollTop }) {
-      this.setAnchorOnScroll(scrollTop);
+      onScroll({ scrollTop }) {
+        this.setAnchorOnScroll(scrollTop);
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./indexes.css"></style>