init

uni_modules/nutui-uni/components/empty/empty.ts

@@ -0,0 +1,21 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumericProp, makeStringProp } from '../_utils'
+
+export const emptyProps = {
+  ...commonProps,
+  /**
+   * @description 图片类型，可选值为 `empty`、`error`、`network`，支持传入图片 `URL`
+   */
+  image: makeStringProp<'empty' | 'error' | 'network' | (string & {})>('empty'),
+
+  /**
+   * @description 图片大小，单位为 `px`
+   */
+  imageSize: makeNumericProp(''),
+
+  /**
+   * @description 图片下方的描述文字
+   */
+  description: makeStringProp(''),
+}
+export type EmptyProps = ExtractPropTypes<typeof emptyProps>

uni_modules/nutui-uni/components/empty/empty.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass, pxCheck } from '../_utils'
+import { useTranslate } from '../../locale'
+import { emptyProps } from './empty'
+
+const props = defineProps(emptyProps)
+interface statusOptions {
+  [key: string]: string
+}
+
+const defaultStatus: statusOptions = {
+  empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
+  error: 'https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png',
+  network: 'https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png',
+}
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+const style = computed(() => {
+  if (props.imageSize) {
+    return {
+      width: pxCheck(props.imageSize),
+      height: pxCheck(props.imageSize),
+    }
+  }
+  return {}
+})
+const isHttpUrl
+      = props.image.startsWith('https://') || props.image.startsWith('http://') || props.image.startsWith('//')
+const src = isHttpUrl ? props.image : defaultStatus[props.image]
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-empty`
+const { translate } = useTranslate(componentName)
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <view class="nut-empty__box" :style="style">
+      <slot name="image">
+        <image v-if="src" class="nut-empty__box--img" :src="src" />
+      </slot>
+    </view>
+
+    <slot name="description">
+      <view class="nut-empty__description">
+        {{ description || translate('noData') }}
+      </view>
+    </slot>
+
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/empty/index.scss

@@ -0,0 +1,38 @@
+.nut-theme-dark {
+  .nut-empty {
+    background: $dark-background;
+  }
+}
+
+.nut-empty {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $empty-padding;
+
+  &__box {
+    width: $empty-image-size;
+    height: $empty-image-size;
+
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+
+    // 兼容小程序标签和img-slot
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__description {
+    padding: $empty-description-padding;
+    margin-top: $empty-description-margin-top;
+    font-size: $empty-description-font-size;
+    line-height: $empty-description-line-height;
+    color: $empty-description-color;
+  }
+}

uni_modules/nutui-uni/components/empty/index.ts

@@ -0,0 +1 @@
+export type * from './empty'