first commit

uni_modules/tdesign-uniapp/components/back-top/back-top.vue

@@ -0,0 +1,122 @@
+<template>
+  <view
+    v-if="!hidden"
+    :style="tools._style([customStyle])"
+    :class="tClass + ' ' + tools.cls(classPrefix, [['fixed', fixed], theme])"
+    aria-role="button"
+    @click="toTop"
+  >
+    <view
+      :class="classPrefix + '__icon'"
+      aria-hidden
+    >
+      <slot name="icon" />
+      <block
+        v-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="tClassIcon"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+          @click="_icon.click || ''"
+        />
+      </block>
+    </view>
+    <view
+      v-if="!!text"
+      :class="classPrefix + '__text--' + theme + ' ' + tClassText"
+    >
+      {{ text }}
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-back-top`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-text`,
+  ],
+  mixins: [
+    ChildrenMixin(RELATION_MAP.BackTop),
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'to-top',
+  ],
+  watch: {
+    icon() {
+      this.setIcon();
+    },
+    scrollTop: {
+      handler(value) {
+        const { visibilityHeight } = this;
+        this.hidden = value < visibilityHeight;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    const { icon } = this;
+    this.setIcon(icon);
+  },
+  methods: {
+    setIcon(v) {
+      this._icon = calcIcon(v, 'backtop');
+    },
+
+    toTop() {
+      this.$emit('to-top');
+      if (this[RELATION_MAP.BackTop]) {
+        this[RELATION_MAP.BackTop]?.scrollToTop();
+        this.hidden = true;
+      } else {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 300,
+        });
+      }
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _icon: null,
+      hidden: true,
+      tools,
+    };
+  },
+});
+</script>
+<style scoped>
+@import './back-top.css';
+</style>