first commit

uni_modules/tdesign-uniapp/components/skeleton/skeleton.vue

@@ -0,0 +1,211 @@
+<template>
+  <view>
+    <view
+      v-if="isShow"
+      :style="tools._style([customStyle])"
+      :class="[classPrefix + ' ', tClass]"
+    >
+      <view
+        v-if="parsedRowCols.length"
+        :class="classPrefix + '__content'"
+      >
+        <view
+          v-for="(row, index) in parsedRowCols"
+          :key="index"
+          :class="[
+            classPrefix + '__row ',
+            tClassRow
+          ]"
+        >
+          <view
+            v-for="(col, index1) in row"
+            :key="index1"
+            :class="[col.class + ' ', tClassCol]"
+            :style="tools._style(col.style)"
+          />
+        </view>
+      </view>
+    </view>
+    <view
+      v-else
+      :class="classPrefix + '__content'"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { classNames } from '../common/utils';
+import { isInteger, isNumeric } from '../common/validator';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-skeleton`;
+
+
+const ThemeMap = {
+  avatar: [{
+    type: 'circle',
+    size: '96rpx',
+  }],
+  image: [{
+    type: 'rect',
+    size: '144rpx',
+  }],
+  text: [[{
+    width: '24%',
+    height: '32rpx',
+    marginRight: '32rpx',
+  }, {
+    width: '76%',
+    height: '32rpx',
+  }], 1],
+  paragraph: [1, 1, 1, {
+    width: '55%',
+  }],
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-col`,
+    `${prefix}-class-row`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      parsedRowCols: [],
+      isShow: false,
+      tools,
+      timer: null,
+    };
+  },
+  watch: {
+    rowCol: {
+      handler() {
+        this.init();
+      },
+      immediate: true,
+    },
+    loading: 'isShowSkeleton',
+    delay: 'isShowSkeleton',
+  },
+  mounted() {
+    this.init();
+    this.isShowSkeleton();
+  },
+  beforeUnMount() {
+    this.clearTimer();
+  },
+  methods: {
+    init() {
+      const { theme, rowCol } = this;
+      const rowCols = [];
+
+      if (rowCol &&  rowCol.length) {
+        rowCols.push(...rowCol);
+      } else {
+        rowCols.push(...ThemeMap[theme || 'text']);
+      }
+
+      const parsedRowCols = rowCols.map((item) => {
+        if (isInteger(item) && item >= 0) {
+          return new Array(item).fill({
+            class: this.getColItemClass({ type: 'text' }),
+            style: {},
+          });
+        }
+
+        if (Array.isArray(item)) {
+          return item.map(col => ({
+            ...col,
+            class: this.getColItemClass(col),
+            style: this.getColItemStyle(col),
+          }));
+        }
+
+        const nItem = item;
+        return [
+          {
+            ...nItem,
+            class: this.getColItemClass(nItem),
+            style: this.getColItemStyle(nItem),
+          },
+        ];
+      });
+
+      this.parsedRowCols = parsedRowCols;
+    },
+
+    getColItemClass(obj) {
+      return classNames([
+        `${name}__col`,
+        `${name}--type-${obj.type || 'text'}`,
+        `${name}--animation-${this.animation}`,
+      ]);
+    },
+
+    getColItemStyle(obj) {
+      const styleName = [
+        'width',
+        'height',
+        'marginRight',
+        'marginLeft',
+        'margin',
+        'size',
+        'background',
+        'backgroundColor',
+        'borderRadius',
+      ];
+      const style = {};
+      styleName.forEach((name) => {
+        if (name in obj) {
+          const px = isNumeric(obj[name]) ? `${obj[name]}px` : obj[name];
+          if (name === 'size') {
+            [style.width, style.height] = [px, px];
+          } else {
+            style[name] = px;
+          }
+        }
+      });
+      return style;
+    },
+
+    clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    },
+
+    isShowSkeleton() {
+      this.clearTimer();
+
+      const { loading, delay } = this;
+
+      if (!loading || delay === 0) {
+        this.isShow = loading;
+        return;
+      }
+
+      this.timer = setTimeout(() => {
+        this.isShow = this.loading;
+      }, delay);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './skeleton.css';
+</style>