Modal support global setting

梁灏
1 parent 737894de
Showing 4 changed files with 21 additions and 28 deletions Show diff stats
examples/main.js
examples/routers/modal.vue
src/components/modal/modal.vue
src/index.js
@@ -12,7 +12,7 @@ import locale from &#39;../src/locale/lang/zh-CN&#39;;
 Vue.use(VueRouter);
 Vue.use(iView, {
     locale,
-    transfer: true,
+    transfer: false,
     size: 'small'
 });
  
 <template>
     <div>
-        <p>
-            Name: {{ value }}
-    </p>
-        <p>
-            <Button @click="handleRender">Custom content</Button>
-        </p>
+        <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>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                value: ''
+                modal1: false
             }
         },
         methods: {
-            handleRender () {
-                this.$Modal.confirm({
-                    title: '真不错呀',
-                    render: (h) => {
-                        return h('Input', {
-                            props: {
-                                value: this.value,
-                                autofocus: true,
-                                placeholder: 'Please enter your name...'
-                            },
-                            on: {
-                                input: (val) => {
-                                    this.value = val;
-                                }
-                            }
-                        })
-                    }
-                })
+            ok () {
+                this.$Message.info('Clicked ok');
+            },
+            cancel () {
+                this.$Message.info('Clicked cancel');
             }
         }
     }
@@ -99,7 +99,9 @@
             },
             transfer: {
                 type: Boolean,
-                default: true
+                default () {
+                    return this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
+                }
             },
             fullscreen: {
                 type: Boolean,
@@ -166,7 +166,7 @@ const install = function(Vue, opts = {}) {
  
     Vue.prototype.$IVIEW = {
         size: opts.size || '',
-        transfer: opts.transfer || ''
+        transfer: 'transfer' in opts ? opts.transfer : ''
     };
  
     Vue.prototype.$Loading = LoadingBar;