feat(alert): 添加一个 alert 的 loading 状态

examples/routers/alert.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="demo-container">
+      <button class="dao-btn blue" @click="alertSimple()">简单用法</button>
+      <br>
+      <br>
+      <button class="dao-btn blue" @click="alertCheckbox()">下次不再提醒</button>
+      <br>
+      <br>
+      <button class="dao-btn blue" @click="alertCustom()">自定义模板</button>
+      <br>
+      <br>
+      <button class="dao-btn blue" @click="alertDelay()">延迟打开</button>
+      <br>
+      <br>
+      <button class="dao-btn blue" @click="alertTimeout()">自动关闭</button>
+      <br>
+      <br>
+      <button class="dao-btn blue" @click="alertQueue()">队列</button>
+      <br>
+      <br>
+      <button class="dao-btn blue" @click="loadingBeforeClose()">Loading 后关闭</button>
+      <br>
+      <br>
+      <button class="dao-btn blue" @click="alertDelete()">取消某个 Alert</button>
+      <br>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      alertSimple() {
+        this.$daoAlert('这是一个 Alert', 'Alert Title').show();
+      },
+      alertCustom() {
+        this.$daoAlert('自定义 title', '<h3 style="color: red;">可以是 html</h3>')
+          .theme('red')
+          .confirmText('自定义确认')
+          .cancelText('自定义取消')
+          .show();
+      },
+      alertDelay() {
+        this.$daoAlert('提示', '延迟 2 秒打开')
+          .delay(2000)
+          .show();
+      },
+      alertTimeout() {
+        this.$daoAlert('提示', '2 秒后自动关闭')
+          .timeout(2000)
+          .show();
+      },
+      alertQueue() {
+        this.$daoAlert('提示1', '这是第一个 alert')
+          .show();
+        this.$daoAlert('提示2', '这是第二个 alert')
+          .show();
+        this.$daoAlert('提示3', '这是第三个 alert, <p style="color: red; margin: 0;">注意 3 秒后自动关闭, 并且自动打开第四个 alert</p>')
+          .timeout(3000)
+          .show();
+        this.$daoAlert('提示4', '这是第四个 alert')
+        .show();
+      },
+      alertDelete() {
+        const confirmAlert = this.$daoAlert('提示', '您真的想好了要删除这个应用吗？').theme('red');
+        this.$daoAlert('提示', '您确定要删除这个应用？')
+          .theme('red')
+          .show(() => {
+            console.log('confirm');
+          }, () => {
+            console.log('cancel');
+            confirmAlert.remove();
+          });
+        confirmAlert.show();
+      },
+      alertCheckbox() {
+        this.$daoAlert('这是一个 Alert', 'Alert Title')
+          .checkbox('下次不再提醒')
+          .show((res) => {
+            console.log('confirm:', res);
+          });
+      },
+      loadingBeforeClose() {
+        this.$daoAlert('这个对话框点击确认后会 loading 之后再关闭', 'loading Alert')
+          .loadingText('loading...')
+          .show((res) => {
+            console.log('confirm:', res);
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                console.log('inner loading timer');
+                resolve();
+              }, 3000);
+            });
+          });
+      },
+      doSometing() {
+        console.log('doSometing');
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+.demo-container {
+  margin-bottom: 30px;
+}
+</style>

project/dao-alert.md

@@ -49,11 +49,10 @@ daoAlert | Function | 该方法作为入口函数, 第一个参数是 alert 的
 theme | Function | 传入参数为 dao-button 的类名，可以更改 comfirm button 的颜色 | 'blue' | 否
 confirmText | Function | 传入参数用于设置 comfirm button 的文本 | '确定' | 否
 cancelText | Function | 传入参数用于设置 cancel button 的文本 | '取消' | 否
+loadingText | Function | 传入参数用于设置 loading button 的文本 | '加载中...' | 否
 timeout | Function | 传入参数用于设置自动关闭 alert | 无 | 否
 delay | Function | 传入参数用于设置延迟打开 alert | 0 | 否
-show | Function | 该方法接受两个回调函数作为参数, 调用该方法显示 alert (只有调用了该方法，alert 实例才会被推入队列) | 无 | 是
+show | Function | 该方法接受两个回调函数作为参数, 调用该方法显示 alert (只有调用了该方法，alert 实例才会被推入队列), 第一个参数为 resolve 函数, 若函数有返回值，且返回值是一个 Promise 或返回 Promise 的函数, 则会在这个 Promise resolve 之前显示 loading 状态, 之后再关闭对话框 | 无 | 是
 checkbox | Function | 调用该方法并且传入一个参数作为复选框的文字 即显示复选框 | 无 | 否
 callback | Function | 该方法接受两个回调函数作为参数，可以多次调用注册多个回调函数 | 无 | 是
 remove | Function | 取消显示，从队列中删除某个 alert （在 show 函数之前调用无效） | 无 | 是
-
-```

src/components/common.scss

@@ -65,3 +65,12 @@ svg.icon {
     vertical-align: middle;
   }
 }
+
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/dao-message-box/dao-message.vue

@@ -19,7 +19,11 @@
         </div>
         <div>
           <button class="dao-btn ghost" @click="onCancel">{{ cancelText }}</button>
-          <button :class="confirmClass" @click="onConfirm">{{ confirmText }}</button>
+          <button v-if="!loading" :class="confirmClass" @click="onConfirm">{{ confirmText }}</button>
+          <button v-else class="dao-btn ghost" disabled="true">
+            <svg class="icon loading"><use xlink:href="#icon_status-progress-circle"></use></svg>
+            {{ loadingText }}
+          </button>
         </div>
       </div>
 
@@ -39,6 +43,7 @@
           width: '600px',
         },
         checkboxChecked: false,
+        loading: false,
       };
     },
     props: {
@@ -70,6 +75,10 @@
         type: String,
         default: '取消',
       },
+      loadingText: {
+        type: String,
+        default: '加载中...',
+      },
       checkboxText: String,
       cancel: {
         type: Function,
@@ -80,6 +89,25 @@
       this.$on('visible', (newVal) => {
         this.visible = newVal;
       });
+      this.$on('loading', (timer) => {
+        this.loading = true;
+        let timerPromise = null;
+        const timerType = Object.prototype.toString
+          .call(timer).slice(8, -1);
+        if (timerType === 'Promise') {
+          timerPromise = timer;
+        }
+        if (timerType === 'Function') {
+          timerPromise = timer();
+        }
+        if (!timerPromise.then) {
+          this.visible = false;
+        } else {
+          timerPromise.then(() => {
+            this.visible = false;
+          });
+        }
+      });
     },
     computed: {
       header() {
@@ -112,8 +140,13 @@
       onConfirm() {
         this.$emit('confirm', {
           checked: this.checkboxChecked,
+        }, (timer) => {
+          if (timer) {
+            this.$emit('loading', timer);
+          } else {
+            this.visible = false;
+          }
         });
-        this.visible = false;
       },
       onCancel() {
         this.$emit('cancel');
@@ -142,6 +175,9 @@
     .alert-dialog-footer{
       display: flex;
       justify-content: space-between;
+      .loading {
+        animation: loading 1.5s linear infinite;
+      }
       .checkbox-wrap{
         display: flex;
         align-items: center;

src/components/dao-message-box/index.js

@@ -49,6 +49,11 @@ class Alert {
     return this;
   }
 
+  loadingText(loadingText) {
+    this.props.loadingText = loadingText;
+    return this;
+  }
+
   timeout(timeout) {
     this.props.timeout = timeout;
     return this;
@@ -80,7 +85,6 @@ class Alert {
     if (alertQueue.length === 1) {
       this.execute();
     }
-    return this;
   }
 
   hide() {
@@ -134,8 +138,14 @@ class Alert {
       }
     }, this.props.delay);
 
-    this.alert.$on('confirm', (res) => {
-      this.props.callback.resolves.map(cb => cb(res));
+    this.alert.$on('confirm', (res, afterConfirm) => {
+      this.props.callback.resolves.forEach((cb, i) => {
+        const timer = cb(res);
+        // 只取最后一个函数的返回值作为确认后回调的参数
+        if (i === this.props.callback.resolves.length - 1) {
+          afterConfirm(timer);
+        }
+      });
     });
     this.alert.$on('cancel', () => {
       this.props.callback.rejects.map(cb => cb());

src/components/dao-select/dao-select.scss

@@ -7,14 +7,6 @@ $select-border-color: $grey-light;
 $select-bg-img: linear-gradient(to top, rgba(61, 68, 79, .05) 0%, rgba(61, 68, 79, 0) 100%);
 $select-bg-color: $white-light;
 $select-disabled-color: $grey-light;
-@keyframes loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 
 .dao-select {
   display: inline-block;