update Modal & Notice style

梁灏
1 parent 21ff0303
Showing 3 changed files with 37 additions and 31 deletions Show diff stats
examples/routers/modal.vue
src/styles/components/modal.less
src/styles/components/notice.less
 <template>
     <div>
-        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
-        <Modal
-                v-model="modal1"
-                title="Common Modal dialog box title"
-                @on-ok="ok"
-                @on-cancel="cancel">
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-        </Modal>
+        <Button @click="instance('info')">Info</Button>
+        <Button @click="instance('success')">Success</Button>
+        <Button @click="instance('warning')">Warning</Button>
+        <Button @click="instance('error')">Error</Button>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                modal1: false
-            }
-        },
         methods: {
-            ok () {
-                this.$Message.info('Clicked ok');
-            },
-            cancel () {
-                this.$Message.info('Clicked cancel');
+            instance (type) {
+                const title = 'Title';
+                const content = '<p>Content of dialog</p><p>Content of dialog</p>';
+                switch (type) {
+                    case 'info':
+                        this.$Modal.info({
+                            title: title,
+                            content: content
+                        });
+                        break;
+                    case 'success':
+                        this.$Modal.success({
+                            title: title,
+                            content: content
+                        });
+                        break;
+                    case 'warning':
+                        this.$Modal.warning({
+                            title: title,
+                            content: content
+                        });
+                        break;
+                    case 'error':
+                        this.$Modal.error({
+                            title: title,
+                            content: content
+                        });
+                        break;
+                }
             }
         }
     }
@@ -144,7 +144,7 @@
             font-size: 28px;
             vertical-align: middle;
             position: relative;
-            top: 3px;
+            top: -2px;
             &-info {
                 color: @primary-color;
@@ -89,7 +89,7 @@
     &-icon {
         position: absolute;
-        left: 16px;
+        top: -2px;
         font-size: @font-size-large;
         &-success {
@@ -107,17 +107,10 @@
     }
     &-with-desc &-icon{
         font-size: 36px;
+        top: -6px;
     }
     &-custom-content{
-        &:after{
-            content: "";
-            display: block;
-            width: 4px;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-        }
+        position: relative;
     }
 }
 \ No newline at end of file