update Modal、Poptip

update Modal、Poptip

src/components/modal/confirm.js

@@ -19,14 +19,14 @@ Modal.newInstance = properties => {
         <Modal${props} :visible.sync="visible" :width="width">
             <div class="${prefixCls}">
                 <div class="${prefixCls}-head">
-                    <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
                     <div class="${prefixCls}-head-title">{{{ title }}}</div>
                 </div>
                 <div class="${prefixCls}-body">
+                    <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
                     {{{ body }}}
                 </div>
                 <div class="${prefixCls}-footer">
-                    <i-button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
+                    <i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
                     <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
                 </div>
             </div>
@@ -53,8 +53,8 @@ Modal.newInstance = properties => {
         computed: {
             iconTypeCls () {
                 return [
-                    `${prefixCls}-head-icon`,
+                    `${prefixCls}-body-icon`,
-                    `${prefixCls}-head-icon-${this.iconType}`
+                    `${prefixCls}-body-icon-${this.iconType}`
                 ]
             },
             iconNameCls () {

src/components/modal/modal.vue

@@ -12,7 +12,7 @@
                 <div :class="[prefixCls + '-body']"><slot></slot></div>
                 <div :class="[prefixCls + '-footer']" v-if="!footerHide">
                     <slot name="footer">
-                        <i-button type="ghost" size="large" @click="cancel">{{ cancelText }}</i-button>
+                        <i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
                         <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
                     </slot>
                 </div>

src/components/poptip/poptip.vue

@@ -21,7 +21,7 @@
                         <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
                     </div>
                     <div :class="[prefixCls + '-footer']">
-                        <i-button type="ghost" size="small" @click="cancel">{{ cancelText }}</i-button>
+                        <i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
                         <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
                     </div>
                 </div>

src/styles/components/button.less

@@ -66,10 +66,6 @@
         .btn-color(@info-color);
     }
 
-    //&-dashed {
-    //    .btn-dashed;
-    //}
-
     &-circle,
     &-circle-outline {
         .btn-circle(@btn-prefix-cls);

src/styles/components/modal.less

@@ -79,15 +79,30 @@
 }
 
 .@{confirm-prefix-cls} {
-    padding: 10px 25px 20px;
+    padding: 0 4px;
     &-head {
-        &-icon {
+
+        &-title {
             display: inline-block;
-            font-size: 28px;
+            font-size: @font-size-base;
-            margin-right: 5px;
+            color: @title-color;
-            padding: 0 1px;
+            font-weight: 700;
-            position: relative;
+        }
-            top: 5px;
+    }
+
+    &-body{
+        margin-top: 6px;
+        padding-left: 48px;
+        padding-top: 18px;
+        font-size: @font-size-small;
+        color: @text-color;
+        position: relative;
+
+        &-icon {
+            font-size: 36px;
+            position: absolute;
+            top: 0;
+            left: 0;
 
             &-info {
                 color: @primary-color;
@@ -105,24 +120,10 @@
                 color: @warning-color;
             }
         }
-
-        &-title {
-            display: inline-block;
-            font-size: @font-size-base;
-            color: @text-color;
-            font-weight: 700;
-        }
-    }
-
-    &-body{
-        margin-left: 35px;
-        margin-top: 8px;
-        font-size: 12px;
-        color: @text-color;
     }
 
     &-footer{
-        margin-top: 20px;
+        margin-top: 40px;
         text-align: right;
 
         button + button {

src/styles/mixins/button.less

@@ -222,7 +222,7 @@
 
 // Text
 .btn-text() {
-    .button-variant(@link-color, @btn-ghost-bg, transparent);
+    .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);
 
     // for disabled
     &.disabled,

test/routers/button.vue

@@ -7,7 +7,7 @@
     <i-button type="info">按钮</i-button>
     <i-button icon="ios-search" type="success"></i-button>
     <br><br>
-    <div style="width:400px;height:200px;">
+    <div style="width:400px">
         <i-button type="error" long size="small">按钮</i-button>
     </div>
     <br><br>

test/routers/message.vue

@@ -1,41 +1,43 @@
 <template>
-    <i-button @click="instance('info')">消息</i-button>
+    <i-button @click="confirm">标准</i-button>
-    <i-button @click="instance('success')">成功</i-button>
+    <i-button @click="custom">自定义按钮文字</i-button>
-    <i-button @click="instance('warning')">警告</i-button>
+    <i-button @click="async">异步关闭</i-button>
-    <i-button @click="instance('error')">错误</i-button>
 </template>
 <script>
     export default {
         methods: {
-            instance (type) {
+            confirm () {
-                const title = '对话框的标题';
+                this.$Modal.confirm({
-                const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
+                    title: '确认对话框标题',
-                switch (type) {
+                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    case 'info':
+                    onOk: () => {
-                        this.$Modal.info({
+                        this.$Message.info('点击了确定');
-                            title: title,
+                    },
-                            content: content
+                    onCancel: () => {
-                        });
+                        this.$Message.info('点击了取消');
-                        break;
+                    }
-                    case 'success':
+                });
-                        this.$Modal.success({
+            },
-                            title: title,
+            custom () {
-                            content: content
+                this.$Modal.confirm({
-                        });
+                    title: '确认对话框标题',
-                        break;
+                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    case 'warning':
+                    okText: 'OK',
-                        this.$Modal.warning({
+                    cancelText: 'Cancel'
-                            title: title,
+                });
-                            content: content
+            },
-                        });
+            async () {
-                        break;
+                this.$Modal.confirm({
-                    case 'error':
+                    title: '确认对话框标题',
-                        this.$Modal.error({
+                    content: '<p>对话框将在 2秒 后关闭</p>',
-                            title: title,
+                    loading: true,
-                            content: content
+                    onOk: () => {
-                        });
+                        setTimeout(() => {
-                        break;
+                            this.$Modal.remove();
-                }
+                            this.$Message.info('异步关闭了对话框');
+                        }, 2000);
+                    }
+                });
             }
         }
     }