first commit

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

@@ -0,0 +1,140 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="[
+      tClass,
+      classPrefix
+    ]"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__thumb'"
+    >
+      <t-image
+        v-if="image"
+        :t-class="tClassImage"
+        :src="image"
+        mode="aspectFit"
+      />
+      <block
+        v-else-if="iconName || tools.isNoEmptyObj(iconData)"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="iconData.style || ''"
+          :t-class="iconTClass"
+          :class="iconClass"
+          :prefix="iconData.prefix"
+          :name="iconName || iconData.name"
+          :size="iconData.size"
+          :color="iconData.color"
+          :aria-hidden="!!iconData.ariaHidden"
+          :aria-label="iconData.ariaLabel"
+          :aria-role="iconData.ariaRole"
+        />
+      </block>
+      <slot
+        v-else
+        name="image"
+      />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__description ',
+        tClassDescription
+      ]"
+    >
+      <block v-if="description">
+        {{ description }}
+      </block>
+      <slot name="description" />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__actions ',
+        tClassActions
+      ]"
+    >
+      <slot name="action" />
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { setIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { canUseVirtualHost } from '../common/version';
+
+
+const name = `${prefix}-empty`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-description`,
+    `${prefix}-class-image`,
+    `${prefix}-class-actions`,
+  ],
+  components: {
+    TIcon,
+    TImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+
+      iconName: '',
+      iconData: {},
+
+      tools,
+    };
+  },
+  computed: {
+    iconTClass() {
+      return canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconClass() {
+      return !canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconRealClass() {
+      const { classPrefix, iconData } = this;
+      return `${classPrefix}__icon ${classPrefix}__icon--${iconData.activeIdx == iconData.index ? 'active ' : ' '}`;
+    },
+  },
+  watch: {
+    icon: {
+      handler(t) {
+        const obj = setIcon('icon', t, '');
+
+        Object.keys(obj).forEach((key) => {
+          this[key] = obj[key];
+        });
+      },
+      immediate: true,
+    },
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+});
+</script>
+<style scoped>
+@import './empty.css';
+</style>