ant-design · jc9702507 · Dec 17, 2022 · Dec 17, 2022
diff --git a/demo/pages/Empty/index.acss b/demo/pages/Empty/index.acss
@@ -1,17 +1,3 @@
 page {
-  padding: 24rpx;
-}
-
-.demo-empty-btn {
-  margin-top: 40rpx;
-}
-
-.demo-empty-btn-main,
-.demo-empty-btn-sub {
-  margin: 0 12rpx;
-}
-
-.demo-empty-container-image {
-  width: 200rpx;
-  height: 170rpx;
+  padding: 12px;
 }
diff --git a/demo/pages/Empty/index.axml b/demo/pages/Empty/index.axml
@@ -1,60 +1,24 @@
-<radio-group  
-  position="horizontal"
-  options="{{modeList}}"
-  onChange="handleChangeMode"
-/>
+<container title="基础样式">
+  <empty title="这里什么也没有" message="看看其它吧" />
+</container>
 
-<empty a:if="{{mode==='page'}}" title="这里什么都没有" message="看看其它的吧">
-  <view class="demo-empty-btn" slot="extra">
-    <button class="demo-empty-btn-sub" type='primary' fill="outline" inline onTap="onSubBtnClick">
-      操作1
-    </button>
-    <button class="demo-empty-btn-main" inline onTap="onMainBtnClick">
-      操作2
-    </button>
-  </view>
-</empty>
+<container title="添加操作按钮组">
+  <empty title="这里什么也没有" message="看看其它吧">
+    <view slot="extra">
+      <button size="small" inline>
+        操作1
+      </button>
+      <button type="primary" size="small" inline style="margin-left: 12px;">
+        操作2
+      </button>
+    </view>
+  </empty>
+</container>
 
-<view a:else>
-  <container title="基础样式" class="demo-empty-container">
-    <empty mode="section" message="这里什么也没有"/>
-  </container>
-
-  <container title="添加操作按钮组" class="demo-empty-container">
-    <empty 
-      mode="section" 
-      message="这里什么也没有"
-    >
-      <view class="demo-empty-btn" slot="extra">
-        <button class="demo-empty-btn-sub" type='primary' fill="outline" inline onTap="onSubBtnClick">
-          操作1
-        </button>
-        <button class="demo-empty-btn-main" type='primary' inline onTap="onMainBtnClick">
-          操作2
-        </button>
-      </view>
-    </empty>
-  </container>
-
-  <container title="只有一个按钮" class="demo-empty-container">
-    <empty 
-      mode="section" 
-      message="这里什么也没有"
-    >
-      <view class="demo-empty-btn" slot="extra">
-        <button class="demo-empty-btn-sub" type='primary' fill="outline" inline onTap="onSubBtnClick">
-          操作1
-        </button>
-      </view>
-    </empty>
-  </container>
-
-  <container title="自定义图片" class="demo-empty-container">
-    <empty 
-      mode="section"
-      message="没有找到你需要的东西" 
-    >
-      <image slot="image" src="{{imageUrl}}" class="demo-empty-container-image"/>
-    </empty>
-  </container>
-</view>
+<container title="自定义图片">
+  <empty
+    title="这里什么也没有"
+    message="看看其它吧"
+    image="https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ"
+  />
+</container>
diff --git a/demo/pages/Empty/index.js b/demo/pages/Empty/index.js
@@ -10,19 +10,4 @@ Page({
       value: 'section',
     }]
   },
-  onSubBtnClick() {
-    my.alert({
-      title: '你点击了按钮1',
-    });
-  },
-  onMainBtnClick() {
-    my.alert({
-      title: '你点击了按钮2',
-    });
-  },
-  handleChangeMode(v) {
-    this.setData({
-      mode: v
-    })
-  }
 });
diff --git a/src/Empty/index.axml b/src/Empty/index.axml
@@ -1,16 +1,24 @@
 <view class="ant-empty {{className || ''}}" style="{{style || ''}}">
-  <view class="ant-empty-{{mode}}">
-    <slot name='image'>
-      <view class="ant-empty-{{mode}}-image" />
-    </slot>
-    <view a:if="{{title || message}}" class="ant-empty-{{mode}}-text">
-      <view a:if="{{title}}" class="ant-empty-{{mode}}-text-main">
-        {{title}}
+  <view class="ant-empty">
+    <view class="ant-empty-image">
+      <slot name="image">
+        <image src="{{image || 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*0AaRRrYlVDkAAAAAAAAAAAAAARQnAQ'}}" />
+      </slot>
+    </view>
+    <view class="ant-empty-text">
+      <view class="ant-empty-text-main">
+        <slot name="title">
+          {{title}}
+        </slot>
       </view>
-      <view a:if="{{message}}" class="ant-empty-{{mode}}-text-sub">
-        {{message}}
+      <view class="ant-empty-text-sub">
+        <slot name="message">
+          {{message}}
+        </slot>
       </view>
     </view>
-    <slot name="extra"></slot>
+    <view class="ant-empty-extra">
+      <slot name="extra" />
+    </view>
   </view>
-</view>
+</view>
diff --git a/src/Empty/index.less b/src/Empty/index.less
@@ -3,59 +3,34 @@
 @emptyPrefix: ant-empty;
 
 .@{emptyPrefix} {
-  &-page {
-    text-align: center;
-    padding-top: 25vh;
+  text-align: center;
+  margin-top: @empty-margin-large;
 
-    &-image {
-      margin: 0 auto;
-      width: 400 * @rpx;
-      height: 340 * @rpx;
-      background: url(@empty-image-url) no-repeat;
-      background-size: contain;
-    }
-
-    &-text {
-      margin-top: @empty-margin-large;
-
-      &-main {
-        color: @COLOR_TEXT_PRIMARY;
-        font-size: @empty-font-size-large;
-      }
-
-      &-sub {
-        color: @COLOR_TEXT_ASSIST;
-        font-size: @empty-font-size-common;
-        margin-top: @v-spacing-standard;
-      }
-    }
-  }
-
-  &-section {
-    text-align: center;
-    margin-top: @empty-margin-large;
-
-    &-image {
-      margin: 0 auto;
+  &-image {
+    display: flex;
+    justify-content: center;
+    image {
       width: 200 * @rpx;
       height: 170 * @rpx;
-      background: url(@empty-image-url) no-repeat;
-      background-size: contain;
     }
+  }
 
-    &-text {
-      margin-top: @v-spacing-large;
+  &-text {
+    margin-top: @v-spacing-large;
 
-      &-main {
-        color: @COLOR_TEXT_PRIMARY;
-        font-size: @empty-font-size-large;
-      }
+    &-main {
+      color: @COLOR_TEXT_PRIMARY;
+      font-size: @empty-font-size-large;
+    }
 
-      &-sub {
-        color: @COLOR_TEXT_ASSIST;
-        font-size: @empty-font-size-common;
-        margin-top: @v-spacing-standard;
-      }
+    &-sub {
+      color: @COLOR_TEXT_ASSIST;
+      font-size: @empty-font-size-common;
+      margin-top: @v-spacing-standard;
     }
   }
+
+  &-extra {
+    padding-top: 20px;
+  }
 }
diff --git a/src/Empty/index.md b/src/Empty/index.md
@@ -21,11 +21,9 @@ toc: 'content'
 | 属性 | 说明 | 类型 | 默认值 |
 | -----|-----|-----|----- |
 | className | 根节点类名 |  string | - | 
-| title | 标题文案 | string | - | 
-| image | 图片区内容 | slot | - | 
-| mode |  空状态模式，`page`(整页空状态) `section`(局部空状态) | string | `page` |
-| message | 描述文案 | string | - | 
+| title | 标题文案 | string \| slot | - | 
+| image | 图片，可传入字符串作为图片地址 | string \| slot | - | 
+| message | 描述文案 | string \| slot | - | 
 | style | 样式 | string | - | 
 
 
-
diff --git a/src/Empty/props.d.ts b/src/Empty/props.d.ts
@@ -7,21 +7,13 @@ import { IBaseProps } from '../_base';
 export interface IEmptyProps extends IBaseProps {
   /**
    * @description 主文案
-   * @default '这里什么都没有'
    */
-  mainText: string;
-
-  /**
-   * @description 空状态模式, 'page'表示整页空状态，'section'表示局部空状态
-   * @default 'page'
-   */
-  mode: 'page' | 'section';
+  title?: string;
 
   /**
    * @description 副文案
-   * @default '看看其它的吧'
    */
-  subText: string;
+  message?: string;
 }
 
 export declare const EmptyDefaultProps: Partial<IEmptyProps>;
diff --git a/src/Empty/props.js b/src/Empty/props.js
@@ -1,4 +1,4 @@
 export const EmptyDefaultProps = {
-  mode: 'page',
+
 };