add Modal component

add Modal component

local/routers/index.vue

@@ -2,32 +2,59 @@
 
 </style>
 <template>
-    <div>welcome</div>
-    <Checkbox-group :model.sync="fruit">
-        <Checkbox value="香蕉"></Checkbox>
-        <Checkbox value="苹果"></Checkbox>
-        <Checkbox value="西瓜"></Checkbox>
-    </Checkbox-group>
-    {{ fruit | json }}
-    <Button @click="update">update fruit</Button>
+    <Button @click="info">info</Button>
+    <Button @click="success">success</Button>
+    <Button @click="warning">warning</Button>
+    <Button @click="error">error</Button>
+    <Button @click="confirm">confirm</Button>
+
 </template>
 <script>
-    import { Checkbox, Icon, Button } from 'iview';
-    const CheckboxGroup = Checkbox.Group;
+    import { Modal, Button, Message } from 'iview';
 
     export default {
-        components: { Checkbox, CheckboxGroup, Icon, Button },
+        components: { Modal, Button },
         props: {
         
         },
         data () {
             return {
-                fruit: ['苹果']
+
             }        
         },
         methods: {
-            update () {
-                this.fruit = ['香蕉', '西瓜']
+            info () {
+                Modal.info({
+                    title: '这是对话框标题',
+                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
+                });
+            },
+            success () {
+                Modal.success();
+            },
+            warning () {
+                Modal.warning();
+            },
+            error () {
+                Modal.error();
+            },
+            confirm () {
+                Modal.confirm({
+//                    okText: 'OK',
+//                    cancelText: 'Cancel',
+                    title: '删除提示',
+                    content: '删除后将不可找回，您确定要删除吗？',
+                    onCancel () {
+                        Message.info('cancel it');
+                    },
+                    onOk () {
+                        setTimeout(() => {
+                            Modal.remove();
+                            Message.success('OK!');
+                        }, 2000);
+                    },
+                    loading: true
+                });
             }
         }
     }

local/routers/msg.vue

@@ -5,14 +5,25 @@
     <Button @click="warning">warning</Button>
     <Button @click="loading">手动消失</Button>
     <Button @click="destroy">destroy</Button>
+    <Alert closable>消息提示文案</Alert>
+    <Alert type="success" show-icon closable>
+        成功提示文案
+        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
+    </Alert>
+    <Card :bordered="false">
+        <p slot="title">无边框标题</p>
+        <p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
+    </Card>
 </template>
 <script>
-    import { Message, Button } from 'iview';
+    import { Message, Button, Alert, Card } from 'iview';
 
     export default {
         components: {
             Message,
-            Button
+            Button,
+            Alert,
+            Card
         },
         props: {