chenhaodong / mew-iview

Commit 6259471f4c353587a730ae945ea2bbb1a9541539

Authored by 梁灏
1 parent f97e5bb0

support Modal 

support Modal
Showing 9 changed files with 153 additions and 39 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @6259471
... ... @@ -48,4 +48,6 @@ class 改为 className
48 48 ### DatePicker
49 49 使用 v-model
50 50 ### LoadingBar
51   -部分 prop 移至 data
52 51 \ No newline at end of file
  52 +部分 prop 移至 data
  53 +### Modal
  54 +visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试
53 55 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @6259471
... ... @@ -39,7 +39,7 @@
39 39 - [x] Card
40 40 - [ ] Message
41 41 - [ ] Notice
42   -- [ ] Modal
  42 +- [x] Modal
43 43 - [x] Progress
44 44 - [x] Badge
45 45 - [x] Collapse
... ...
examples/app.vue
  Show/Hide comments   View file @6259471
... ... @@ -51,6 +51,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
51 51 <li><router-link to="/form">Form</router-link></li>
52 52 <li><router-link to="/table">Table</router-link></li>
53 53 <li><router-link to="/loading-bar">LoadingBar</router-link></li>
  54 + <li><router-link to="/modal">Modal</router-link></li>
54 55 </ul>
55 56 </nav>
56 57 <router-view></router-view>
... ...
examples/main.js
  Show/Hide comments   View file @6259471
... ... @@ -168,6 +168,10 @@ const router = new VueRouter({
168 168 {
169 169 path: '/loading-bar',
170 170 component: require('./routers/loading-bar.vue')
  171 + },
  172 + {
  173 + path: '/modal',
  174 + component: require('./routers/modal.vue')
171 175 }
172 176 ]
173 177 });
... ...
examples/routers/modal.vue 0 → 100644
  Show/Hide comments   View file @6259471
  1 +<template>
  2 + <div>
  3 + <i-button @click.native="instance('info')">消息</i-button>
  4 + <i-button @click.native="instance('success')">成功</i-button>
  5 + <i-button @click.native="instance('warning')">警告</i-button>
  6 + <i-button @click.native="instance('error')">错误</i-button>
  7 + </div>
  8 +</template>
  9 +<script>
  10 + export default {
  11 + methods: {
  12 + instance (type) {
  13 + const title = '对话框的标题';
  14 + const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
  15 + switch (type) {
  16 + case 'info':
  17 + this.$Modal.info({
  18 + title: title,
  19 + content: content
  20 + });
  21 + break;
  22 + case 'success':
  23 + this.$Modal.success({
  24 + title: title,
  25 + content: content
  26 + });
  27 + break;
  28 + case 'warning':
  29 + this.$Modal.warning({
  30 + title: title,
  31 + content: content
  32 + });
  33 + break;
  34 + case 'error':
  35 + this.$Modal.error({
  36 + title: title,
  37 + content: content
  38 + });
  39 + break;
  40 + }
  41 + }
  42 + }
  43 + }
  44 +</script>
  45 +
  46 +
  47 +<!--<template>-->
  48 + <!--<div>-->
  49 + <!--<i-button @click.native="confirm">标准</i-button>-->
  50 + <!--<i-button @click.native="custom">自定义按钮文字</i-button>-->
  51 + <!--<i-button @click.native="async">异步关闭</i-button>-->
  52 + <!--</div>-->
  53 +<!--</template>-->
  54 +<!--<script>-->
  55 + <!--export default {-->
  56 + <!--methods: {-->
  57 + <!--confirm () {-->
  58 + <!--this.$Modal.confirm({-->
  59 + <!--title: '确认对话框标题',-->
  60 + <!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',-->
  61 + <!--onOk: () => {-->
  62 + <!--console.log('确定');-->
  63 +<!--// this.$Message.info('点击了确定');-->
  64 + <!--},-->
  65 + <!--onCancel: () => {-->
  66 + <!--console.log('取消');-->
  67 +<!--// this.$Message.info('点击了取消');-->
  68 + <!--}-->
  69 + <!--});-->
  70 + <!--},-->
  71 + <!--custom () {-->
  72 + <!--this.$Modal.confirm({-->
  73 + <!--title: '确认对话框标题',-->
  74 + <!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',-->
  75 + <!--okText: 'OK',-->
  76 + <!--cancelText: 'Cancel'-->
  77 + <!--});-->
  78 + <!--},-->
  79 + <!--async () {-->
  80 + <!--this.$Modal.confirm({-->
  81 + <!--title: '确认对话框标题',-->
  82 + <!--content: '<p>对话框将在 2秒 后关闭</p>',-->
  83 + <!--loading: true,-->
  84 + <!--onOk: () => {-->
  85 + <!--setTimeout(() => {-->
  86 + <!--this.$Modal.remove();-->
  87 +<!--// this.$Message.info('异步关闭了对话框');-->
  88 + <!--}, 2000);-->
  89 + <!--}-->
  90 + <!--});-->
  91 + <!--}-->
  92 + <!--}-->
  93 + <!--}-->
  94 +<!--</script>-->
... ...
src/components/loading-bar/loading-bar.vue
  Show/Hide comments   View file @6259471
... ... @@ -6,7 +6,7 @@
6 6 </transition>
7 7 </template>
8 8 <script>
9   - import { oneOf } from '../../utils/assist';
  9 +// import { oneOf } from '../../utils/assist';
10 10  
11 11 const prefixCls = 'ivu-loading-bar';
12 12  
... ...
src/components/modal/confirm.js
  Show/Hide comments   View file @6259471
... ... @@ -17,18 +17,18 @@ Modal.newInstance = properties =&gt; {
17 17  
18 18 const div = document.createElement('div');
19 19 div.innerHTML = `
20   - <Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
  20 + <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
21 21 <div class="${prefixCls}">
22 22 <div class="${prefixCls}-head">
23   - <div class="${prefixCls}-head-title">{{{ title }}}</div>
  23 + <div class="${prefixCls}-head-title" v-html="title"></div>
24 24 </div>
25 25 <div class="${prefixCls}-body">
26 26 <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
27   - {{{ body }}}
  27 + <div v-html="body"></div>
28 28 </div>
29 29 <div class="${prefixCls}-footer">
30   - <i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
31   - <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
  30 + <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ cancelText }}</i-button>
  31 + <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
32 32 </div>
33 33 </div>
34 34 </Modal>
... ... @@ -68,7 +68,7 @@ Modal.newInstance = properties =&gt; {
68 68 },
69 69 methods: {
70 70 cancel () {
71   - this.visible = false;
  71 + this.$children[0].visible = false;
72 72 this.buttonLoading = false;
73 73 this.onCancel();
74 74 this.remove();
... ... @@ -77,7 +77,7 @@ Modal.newInstance = properties =&gt; {
77 77 if (this.loading) {
78 78 this.buttonLoading = true;
79 79 } else {
80   - this.visible = false;
  80 + this.$children[0].visible = false;
81 81 this.remove();
82 82 }
83 83 this.onOk();
... ... @@ -89,7 +89,7 @@ Modal.newInstance = properties =&gt; {
89 89 },
90 90 destroy () {
91 91 this.$destroy();
92   - document.body.removeChild(div);
  92 + document.body.removeChild(this.$el);
93 93 this.onRemove();
94 94 },
95 95 onOk () {},
... ...
src/components/modal/modal.vue
  Show/Hide comments   View file @6259471
1 1 <template>
2   - <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
3   - <div :class="wrapClasses" @click="handleWrapClick">
4   - <div :class="classes" :style="styles" v-show="visible" transition="ease">
5   - <div :class="[prefixCls + '-content']">
6   - <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
7   - <slot name="close">
8   - <Icon type="ios-close-empty"></Icon>
9   - </slot>
10   - </a>
11   - <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
12   - <div :class="[prefixCls + '-body']"><slot></slot></div>
13   - <div :class="[prefixCls + '-footer']" v-if="!footerHide">
14   - <slot name="footer">
15   - <i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
16   - <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
17   - </slot>
  2 + <span>
  3 + <transition name="fade">
  4 + <div :class="maskClasses" v-show="visible" @click="mask"></div>
  5 + </transition>
  6 + <div :class="wrapClasses" @click="handleWrapClick">
  7 + <transition name="ease">
  8 + <div :class="classes" :style="mainStyles" v-show="visible">
  9 + <div :class="[prefixCls + '-content']">
  10 + <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
  11 + <slot name="close">
  12 + <Icon type="ios-close-empty"></Icon>
  13 + </slot>
  14 + </a>
  15 + <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
  16 + <div :class="[prefixCls + '-body']"><slot></slot></div>
  17 + <div :class="[prefixCls + '-footer']" v-if="!footerHide">
  18 + <slot name="footer">
  19 + <i-button type="text" size="large" @click.native="cancel">{{ cancelText }}</i-button>
  20 + <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
  21 + </slot>
  22 + </div>
  23 + </div>
18 24 </div>
19   - </div>
  25 + </transition>
20 26 </div>
21   - </div>
  27 + </span>
22 28 </template>
23 29 <script>
24 30 import Icon from '../icon';
... ... @@ -31,7 +37,7 @@
31 37 export default {
32 38 components: { Icon, iButton },
33 39 props: {
34   - visible: {
  40 + value: {
35 41 type: Boolean,
36 42 default: false
37 43 },
... ... @@ -66,7 +72,7 @@
66 72 type: Boolean,
67 73 default: false
68 74 },
69   - style: {
  75 + styles: {
70 76 type: Object
71 77 },
72 78 className: {
... ... @@ -87,7 +93,8 @@
87 93 prefixCls: prefixCls,
88 94 wrapShow: false,
89 95 showHead: true,
90   - buttonLoading: false
  96 + buttonLoading: false,
  97 + visible: this.value
91 98 };
92 99 },
93 100 computed: {
... ... @@ -106,14 +113,14 @@
106 113 classes () {
107 114 return `${prefixCls}`;
108 115 },
109   - styles () {
  116 + mainStyles () {
110 117 let style = {};
111 118  
112 119 const styleWidth = {
113 120 width: `${this.width}px`
114 121 };
115 122  
116   - const customStyle = this.style ? this.style : {};
  123 + const customStyle = this.styles ? this.styles : {};
117 124  
118 125 Object.assign(style, styleWidth, customStyle);
119 126  
... ... @@ -123,6 +130,7 @@
123 130 methods: {
124 131 close () {
125 132 this.visible = false;
  133 + this.$emit('input', false);
126 134 this.$emit('on-cancel');
127 135 },
128 136 mask () {
... ... @@ -143,6 +151,7 @@
143 151 this.buttonLoading = true;
144 152 } else {
145 153 this.visible = false;
  154 + this.$emit('input', false);
146 155 }
147 156 this.$emit('on-ok');
148 157 },
... ... @@ -182,14 +191,14 @@
182 191 this.resetScrollBar();
183 192 }
184 193 },
185   - ready () {
  194 + mounted () {
186 195 if (this.visible) {
187 196 this.wrapShow = true;
188 197 }
189 198  
190 199 let showHead = true;
191 200  
192   - if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
  201 + if (this.$slots.head === undefined && !this.title) {
193 202 showHead = false;
194 203 }
195 204  
... ... @@ -203,6 +212,10 @@
203 212 this.removeScrollEffect();
204 213 },
205 214 watch: {
  215 + value (val) {
  216 + this.visible = val;
  217 + console.log(this.visible)
  218 + },
206 219 visible (val) {
207 220 if (val === false) {
208 221 this.buttonLoading = false;
... ...
src/index.js
  Show/Hide comments   View file @6259471
... ... @@ -22,7 +22,7 @@ import InputNumber from &#39;./components/input-number&#39;;
22 22 import LoadingBar from './components/loading-bar';
23 23 import Menu from './components/menu';
24 24 // import Message from './components/message';
25   -// import Modal from './components/modal';
  25 +import Modal from './components/modal';
26 26 // import Notice from './components/notice';
27 27 import Page from './components/page';
28 28 import Poptip from './components/poptip';
... ... @@ -81,7 +81,7 @@ const iview = {
81 81 MenuItem: Menu.Item,
82 82 Submenu: Menu.Sub,
83 83 // Message,
84   - // Modal,
  84 + Modal,
85 85 // Notice,
86 86 iOption: Option,
87 87 OptionGroup,
... ... @@ -123,7 +123,7 @@ const install = function (Vue, opts = {}) {
123 123  
124 124 Vue.prototype.$Loading = LoadingBar;
125 125 // Vue.prototype.$Message = Message;
126   - // Vue.prototype.$Modal = Modal;
  126 + Vue.prototype.$Modal = Modal;
127 127 // Vue.prototype.$Notice = Notice;
128 128 };
129 129  
... ...