refactor: Result prop change

vueComponent · Apr 11, 2019 · 24e036d · 24e036d
1 parent 8b88af4
commit 24e036d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/src/components/Result/Result.vue b/src/components/Result/Result.vue
@@ -1,38 +1,57 @@
 <template>
   <div class="result">
     <div>
-      <a-icon :class="{ 'icon': true, 'success': isSuccess, 'error': !isSuccess }" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
+      <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/>
     </div>
-    <div class="title" v-if="title">{{ title }}</div>
-    <div class="description" v-if="description">{{ description }}</div>
-    <div class="content" v-if="content">
+    <div class="title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+    <div class="description">
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </div>
+    <div class="extra" v-if="$slots.default">
       <slot></slot>
     </div>
-    <div class="action">
+    <div class="action" v-if="$slots.action">
       <slot name="action"></slot>
     </div>
   </div>
 </template>
 
 <script>
+const resultEnum = ['success', 'error']
+
 export default {
   name: 'Result',
   props: {
+    /** @Deprecated */
     isSuccess: {
       type: Boolean,
       default: false
     },
+    type: {
+      type: String,
+      default: resultEnum[0],
+      validator (val) {
+        return (val) => resultEnum.includes(val)
+      }
+    },
     title: {
       type: String,
       default: ''
     },
     description: {
       type: String,
       default: ''
-    },
-    content: {
-      type: Boolean,
-      default: true
+    }
+  },
+  computed: {
+    localIsSuccess: function () {
+      return this.type === resultEnum[0]
     }
   }
 }
@@ -69,7 +88,7 @@ export default {
       color: rgba(0, 0, 0, 0.45);
       margin-bottom: 24px;
     }
-    .content {
+    .extra {
       background: #fafafa;
       padding: 24px 40px;
       border-radius: 2px;

diff --git a/src/views/result/Error.vue b/src/views/result/Error.vue
@@ -1,6 +1,6 @@
 <template>
-  <a-card :bordered="false">
-    <result :is-success="false" :title="title" :description="description">
+  <a-card :bordered="false" style="margin: -24px -24px 0px;">
+    <result type="error" :title="title" :description="description">
       <template slot="action">
         <a-button type="primary" >返回修改</a-button>
       </template>

diff --git a/src/views/result/Success.vue b/src/views/result/Success.vue
@@ -1,6 +1,6 @@
 <template>
-  <a-card :bordered="false">
-    <result :is-success="true" :description="description" :title="title">
+  <a-card :bordered="false" style="margin: -24px -24px 0px;">
+    <result type="success" :description="description" :title="title">
       <template slot="action">
         <a-button type="primary">返回列表</a-button>
         <a-button style="margin-left: 8px">查看项目</a-button>