support Modal

support Modal

CHANGE.md

@@ -48,4 +48,6 @@ class 改为 className
 ### DatePicker
 使用 v-model
 ### LoadingBar
-部分 prop 移至 data
+部分 prop 移至 data
+### Modal
+visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试

README.md

@@ -39,7 +39,7 @@
 - [x] Card
 - [ ] Message
 - [ ] Notice
-- [ ] Modal
+- [x] Modal
 - [x] Progress
 - [x] Badge
 - [x] Collapse

examples/app.vue

@@ -51,6 +51,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/form">Form</router-link></li>
                 <li><router-link to="/table">Table</router-link></li>
                 <li><router-link to="/loading-bar">LoadingBar</router-link></li>
+                <li><router-link to="/modal">Modal</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -168,6 +168,10 @@ const router = new VueRouter({
         {
             path: '/loading-bar',
             component: require('./routers/loading-bar.vue')
+        },
+        {
+            path: '/modal',
+            component: require('./routers/modal.vue')
         }
     ]
 });

examples/routers/modal.vue

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

src/components/loading-bar/loading-bar.vue

@@ -6,7 +6,7 @@
     </transition>
 </template>
 <script>
-    import { oneOf } from '../../utils/assist';
+//    import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-loading-bar';
 

src/components/modal/confirm.js

@@ -17,18 +17,18 @@ Modal.newInstance = properties => {
 
     const div = document.createElement('div');
     div.innerHTML = `
-        <Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
+        <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
             <div class="${prefixCls}">
                 <div class="${prefixCls}-head">
-                    <div class="${prefixCls}-head-title">{{{ title }}}</div>
+                    <div class="${prefixCls}-head-title" v-html="title"></div>
                 </div>
                 <div class="${prefixCls}-body">
                     <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
-                    {{{ body }}}
+                    <div v-html="body"></div>
                 </div>
                 <div class="${prefixCls}-footer">
-                    <i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
+                    <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ cancelText }}</i-button>
-                    <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
+                    <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
                 </div>
             </div>
         </Modal>
@@ -68,7 +68,7 @@ Modal.newInstance = properties => {
         },
         methods: {
             cancel () {
-                this.visible = false;
+                this.$children[0].visible = false;
                 this.buttonLoading = false;
                 this.onCancel();
                 this.remove();
@@ -77,7 +77,7 @@ Modal.newInstance = properties => {
                 if (this.loading) {
                     this.buttonLoading = true;
                 } else {
-                    this.visible = false;
+                    this.$children[0].visible = false;
                     this.remove();
                 }
                 this.onOk();
@@ -89,7 +89,7 @@ Modal.newInstance = properties => {
             },
             destroy () {
                 this.$destroy();
-                document.body.removeChild(div);
+                document.body.removeChild(this.$el);
                 this.onRemove();
             },
             onOk () {},

src/components/modal/modal.vue

@@ -1,24 +1,30 @@
 <template>
-    <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
+    <span>
-    <div :class="wrapClasses" @click="handleWrapClick">
+        <transition name="fade">
-        <div :class="classes" :style="styles" v-show="visible" transition="ease">
+            <div :class="maskClasses" v-show="visible" @click="mask"></div>
-            <div :class="[prefixCls + '-content']">
+        </transition>
-                <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
+        <div :class="wrapClasses" @click="handleWrapClick">
-                    <slot name="close">
+            <transition name="ease">
-                        <Icon type="ios-close-empty"></Icon>
+                <div :class="classes" :style="mainStyles" v-show="visible">
-                    </slot>
+                    <div :class="[prefixCls + '-content']">
-                </a>
+                        <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
-                <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
+                            <slot name="close">
-                <div :class="[prefixCls + '-body']"><slot></slot></div>
+                                <Icon type="ios-close-empty"></Icon>
-                <div :class="[prefixCls + '-footer']" v-if="!footerHide">
+                            </slot>
-                    <slot name="footer">
+                        </a>
-                        <i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
+                        <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
-                        <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
+                        <div :class="[prefixCls + '-body']"><slot></slot></div>
-                    </slot>
+                        <div :class="[prefixCls + '-footer']" v-if="!footerHide">
+                            <slot name="footer">
+                                <i-button type="text" size="large" @click.native="cancel">{{ cancelText }}</i-button>
+                                <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
+                            </slot>
+                        </div>
+                    </div>
                 </div>
-            </div>
+            </transition>
         </div>
-    </div>
+    </span>
 </template>
 <script>
     import Icon from '../icon';
@@ -31,7 +37,7 @@
     export default {
         components: { Icon, iButton },
         props: {
-            visible: {
+            value: {
                 type: Boolean,
                 default: false
             },
@@ -66,7 +72,7 @@
                 type: Boolean,
                 default: false
             },
-            style: {
+            styles: {
                 type: Object
             },
             className: {
@@ -87,7 +93,8 @@
                 prefixCls: prefixCls,
                 wrapShow: false,
                 showHead: true,
-                buttonLoading: false
+                buttonLoading: false,
+                visible: this.value
             };
         },
         computed: {
@@ -106,14 +113,14 @@
             classes () {
                 return `${prefixCls}`;
             },
-            styles () {
+            mainStyles () {
                 let style = {};
 
                 const styleWidth = {
                     width: `${this.width}px`
                 };
 
-                const customStyle = this.style ? this.style : {};
+                const customStyle = this.styles ? this.styles : {};
 
                 Object.assign(style, styleWidth, customStyle);
 
@@ -123,6 +130,7 @@
         methods: {
             close () {
                 this.visible = false;
+                this.$emit('input', false);
                 this.$emit('on-cancel');
             },
             mask () {
@@ -143,6 +151,7 @@
                     this.buttonLoading = true;
                 } else {
                     this.visible = false;
+                    this.$emit('input', false);
                 }
                 this.$emit('on-ok');
             },
@@ -182,14 +191,14 @@
                 this.resetScrollBar();
             }
         },
-        ready () {
+        mounted () {
             if (this.visible) {
                 this.wrapShow = true;
             }
 
             let showHead = true;
 
-            if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
+            if (this.$slots.head === undefined && !this.title) {
                 showHead = false;
             }
 
@@ -203,6 +212,10 @@
             this.removeScrollEffect();
         },
         watch: {
+            value (val) {
+                this.visible = val;
+                console.log(this.visible)
+            },
             visible (val) {
                 if (val === false) {
                     this.buttonLoading = false;

src/index.js

@@ -22,7 +22,7 @@ import InputNumber from './components/input-number';
 import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
 // import Message from './components/message';
-// import Modal from './components/modal';
+import Modal from './components/modal';
 // import Notice from './components/notice';
 import Page from './components/page';
 import Poptip from './components/poptip';
@@ -81,7 +81,7 @@ const iview = {
     MenuItem: Menu.Item,
     Submenu: Menu.Sub,
     // Message,
-    // Modal,
+    Modal,
     // Notice,
     iOption: Option,
     OptionGroup,
@@ -123,7 +123,7 @@ const install = function (Vue, opts = {}) {
 
     Vue.prototype.$Loading = LoadingBar;
     // Vue.prototype.$Message = Message;
-    // Vue.prototype.$Modal = Modal;
+    Vue.prototype.$Modal = Modal;
     // Vue.prototype.$Notice = Notice;
 };