From 9627da3f8cbfe1490dfa501e2cc5cee2bde8f5d0 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 25 Aug 2020 11:19:24 +0800
Subject: [PATCH] refactor(Empty): use setup

---
 src/empty/index.js | 56 +++++++++++++++++++---------------------------
 1 file changed, 23 insertions(+), 33 deletions(-)

diff --git a/src/empty/index.js b/src/empty/index.js
index a59d4de40..e99e1bd78 100644
--- a/src/empty/index.js
+++ b/src/empty/index.js
@@ -3,7 +3,7 @@ import Network from './Network';
 
 const [createComponent, bem] = createNamespace('empty');
 
-const PRESETS = ['error', 'search', 'default'];
+const PRESET_IMAGES = ['error', 'search', 'default'];
 
 export default createComponent({
   props: {
@@ -14,56 +14,46 @@ export default createComponent({
     },
   },
 
-  methods: {
-    genImageContent() {
-      const slots = this.$slots.image?.();
-
-      if (slots) {
-        return slots;
+  setup(props, { slots }) {
+    const renderImage = () => {
+      if (slots.image) {
+        return slots.image();
       }
 
-      if (this.image === 'network') {
+      let { image } = props;
+
+      if (image === 'network') {
         return <Network />;
       }
 
-      let { image } = this;
-
-      if (PRESETS.indexOf(image) !== -1) {
+      if (PRESET_IMAGES.indexOf(image) !== -1) {
         image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`;
       }
 
       return <img src={image} />;
-    },
+    };
 
-    genImage() {
-      return <div class={bem('image')}>{this.genImageContent()}</div>;
-    },
-
-    genDescription() {
-      const description = this.$slots.description
-        ? this.slot.description()
-        : this.description;
+    const renderDescription = () => {
+      const description = slots.description
+        ? slots.description()
+        : props.description;
 
       if (description) {
         return <p class={bem('description')}>{description}</p>;
       }
-    },
+    };
 
-    genBottom() {
-      const slot = this.$slots.default?.();
-
-      if (slot) {
-        return <div class={bem('bottom')}>{slot}</div>;
+    const renderBottom = () => {
+      if (slots.default) {
+        return <div class={bem('bottom')}>{slots.default()}</div>;
       }
-    },
-  },
+    };
 
-  render() {
-    return (
+    return () => (
       <div class={bem()}>
-        {this.genImage()}
-        {this.genDescription()}
-        {this.genBottom()}
+        <div class={bem('image')}>{renderImage()}</div>
+        {renderDescription()}
+        {renderBottom()}
       </div>
     );
   },