change sync to loading

梁灏
1 parent 325243d3
Showing 5 changed files with 36 additions and 46 deletions Show diff stats
examples/routers/input.vue
examples/routers/message.vue
src/components/input/input.vue
src/components/message/index.js
src/styles/common/iconfont/_ionicons-font.less
@@ -14,7 +14,17 @@
             <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
         </FormItem>
         <br><br>
+        <Icon class="ivu-load-loop" type="loading" size="14" color="#ff6600" />
+
+        <Icon class="ivu-load-loop" type="loading" size="12" color="#ff6600" />
+        <Icon class="ivu-load-loop" type="loading" size="13" color="#ff6600" />
+
+        <Icon class="ivu-load-loop" type="loading" size="16" color="#ff6600" />
+        <Icon class="ivu-load-loop" type="loading" size="18" color="#ff6600" />
+        <Icon class="ivu-load-loop" type="loading" size="20" color="#ff6600" />
         <Icon class="ivu-load-loop" type="loading" size="30" color="#ff6600" />
+        <Icon class="ivu-load-loop" type="loading" size="30" color="#ff6600" />
+
         <Icon type="ios-alert" size="30" color="#ff6600" />
         <Icon class="ivu-load-loop" type="ios-sync" size="30" color="#ff6600" />
     </Form>
 <template>
-    <div>
-        <i-button @click.native="info">显示普通提示</i-button>
-        <i-button @click.native="success">显示成功提示</i-button>
-        <i-button @click.native="warning">显示警告提示</i-button>
-        <i-button @click.native="error">显示错误提示</i-button>
-        <i-button @click.native="destroy">销毁提示</i-button>
-    </div>
+    <Button @click="loading">Display loading...</Button>
 </template>
 <script>
     export default {
         methods: {
-            info () {
-//                this.$Message.info('这是一条普通提示');
-                this.$Message.success({
-                    content: '这是一条普通提示2',
-                    duration: 500,
-                    onClose () {
-//                        console.log(123)
-                    },
-                    closable: true,
-                    render (h) {
-                        return h('Button',{
-                            props: {
-                                type: 'primary'
-                            }
-                        }, '这是render出来的');
-                    }
-                })
-            },
-            success () {
-                this.$Message.success({
-                    content: '这是一条成功的提示',
-                    duration: 4
+            loading () {
+                const msg = this.$Message.loading({
+                    content: 'Loading...',
+                    duration: 0
                 });
+                setTimeout(msg, 103000);
             },
-            warning () {
-                this.$Message.warning('这是一条警告的提示');
-            },
-            error () {
-                this.$Message.error('对方不想说话，并且向你抛出了一个异常');
-            },
-            destroy () {
-                this.$Message.destroy();
-            }
-        },
-        mounted () {
-//            this.$Message.config({
-//                top: 50,
-//                duration: 3
-//            });
         }
     }
 </script>
@@ -5,7 +5,7 @@
             <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
             <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
             <transition name="fade">
-                <i class="ivu-icon ivu-icon-ios-sync ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
+                <i class="ivu-icon ivu-icon-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
             </transition>
             <input
                 :id="elementId"
@@ -17,7 +17,7 @@ const iconTypes = {
     'success': 'ios-checkmark-circle',
     'warning': 'ios-alert',
     'error': 'ios-close-circle',
-    'loading': 'ios-sync'
+    'loading': 'loading'
 };
  
 function getMessageInstance () {
@@ -28,4 +28,22 @@
  
 .ivu-icon {
     .ivu-icon();
+}
+
+.ivu-icon-loading{
+    position: relative;
+    &::before{
+        content: "\F1F6";
+    }
+    &::after{
+        content: "";
+        display: block;
+        width: 50%;
+        height: 50%;
+        background: #fff;
+        position: absolute;
+        top: 1px;
+        left: 50%;
+    }
+
 }
 \ No newline at end of file