other / 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
@@ -48,4 +48,6 @@ class 改为 className @@ -48,4 +48,6 @@ class 改为 className
48 ### DatePicker 48 ### DatePicker
49 使用 v-model 49 使用 v-model
50 ### LoadingBar 50 ### LoadingBar
51 -部分 prop 移至 data  
52 \ No newline at end of file 51 \ No newline at end of file
  52 +部分 prop 移至 data
  53 +### Modal
  54 +visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试
53 \ No newline at end of file 55 \ No newline at end of file
@@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
39 - [x] Card 39 - [x] Card
40 - [ ] Message 40 - [ ] Message
41 - [ ] Notice 41 - [ ] Notice
42 -- [ ] Modal 42 +- [x] Modal
43 - [x] Progress 43 - [x] Progress
44 - [x] Badge 44 - [x] Badge
45 - [x] Collapse 45 - [x] Collapse
@@ -51,6 +51,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -51,6 +51,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
51 <li><router-link to="/form">Form</router-link></li> 51 <li><router-link to="/form">Form</router-link></li>
52 <li><router-link to="/table">Table</router-link></li> 52 <li><router-link to="/table">Table</router-link></li>
53 <li><router-link to="/loading-bar">LoadingBar</router-link></li> 53 <li><router-link to="/loading-bar">LoadingBar</router-link></li>
  54 + <li><router-link to="/modal">Modal</router-link></li>
54 </ul> 55 </ul>
55 </nav> 56 </nav>
56 <router-view></router-view> 57 <router-view></router-view>
@@ -168,6 +168,10 @@ const router = new VueRouter({ @@ -168,6 +168,10 @@ const router = new VueRouter({
168 { 168 {
169 path: '/loading-bar', 169 path: '/loading-bar',
170 component: require('./routers/loading-bar.vue') 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,7 +6,7 @@
6 </transition> 6 </transition>
7 </template> 7 </template>
8 <script> 8 <script>
9 - import { oneOf } from '../../utils/assist'; 9 +// import { oneOf } from '../../utils/assist';
10 10
11 const prefixCls = 'ivu-loading-bar'; 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,18 +17,18 @@ Modal.newInstance = properties =&gt; {
17 17
18 const div = document.createElement('div'); 18 const div = document.createElement('div');
19 div.innerHTML = ` 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 <div class="${prefixCls}"> 21 <div class="${prefixCls}">
22 <div class="${prefixCls}-head"> 22 <div class="${prefixCls}-head">
23 - <div class="${prefixCls}-head-title">{{{ title }}}</div> 23 + <div class="${prefixCls}-head-title" v-html="title"></div>
24 </div> 24 </div>
25 <div class="${prefixCls}-body"> 25 <div class="${prefixCls}-body">
26 <div :class="iconTypeCls"><i :class="iconNameCls"></i></div> 26 <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
27 - {{{ body }}} 27 + <div v-html="body"></div>
28 </div> 28 </div>
29 <div class="${prefixCls}-footer"> 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 </div> 32 </div>
33 </div> 33 </div>
34 </Modal> 34 </Modal>
@@ -68,7 +68,7 @@ Modal.newInstance = properties =&gt; { @@ -68,7 +68,7 @@ Modal.newInstance = properties =&gt; {
68 }, 68 },
69 methods: { 69 methods: {
70 cancel () { 70 cancel () {
71 - this.visible = false; 71 + this.$children[0].visible = false;
72 this.buttonLoading = false; 72 this.buttonLoading = false;
73 this.onCancel(); 73 this.onCancel();
74 this.remove(); 74 this.remove();
@@ -77,7 +77,7 @@ Modal.newInstance = properties =&gt; { @@ -77,7 +77,7 @@ Modal.newInstance = properties =&gt; {
77 if (this.loading) { 77 if (this.loading) {
78 this.buttonLoading = true; 78 this.buttonLoading = true;
79 } else { 79 } else {
80 - this.visible = false; 80 + this.$children[0].visible = false;
81 this.remove(); 81 this.remove();
82 } 82 }
83 this.onOk(); 83 this.onOk();
@@ -89,7 +89,7 @@ Modal.newInstance = properties =&gt; { @@ -89,7 +89,7 @@ Modal.newInstance = properties =&gt; {
89 }, 89 },
90 destroy () { 90 destroy () {
91 this.$destroy(); 91 this.$destroy();
92 - document.body.removeChild(div); 92 + document.body.removeChild(this.$el);
93 this.onRemove(); 93 this.onRemove();
94 }, 94 },
95 onOk () {}, 95 onOk () {},
src/components/modal/modal.vue
  Show/Hide comments   View file @6259471
1 <template> 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 </div> 24 </div>
19 - </div> 25 + </transition>
20 </div> 26 </div>
21 - </div> 27 + </span>
22 </template> 28 </template>
23 <script> 29 <script>
24 import Icon from '../icon'; 30 import Icon from '../icon';
@@ -31,7 +37,7 @@ @@ -31,7 +37,7 @@
31 export default { 37 export default {
32 components: { Icon, iButton }, 38 components: { Icon, iButton },
33 props: { 39 props: {
34 - visible: { 40 + value: {
35 type: Boolean, 41 type: Boolean,
36 default: false 42 default: false
37 }, 43 },
@@ -66,7 +72,7 @@ @@ -66,7 +72,7 @@
66 type: Boolean, 72 type: Boolean,
67 default: false 73 default: false
68 }, 74 },
69 - style: { 75 + styles: {
70 type: Object 76 type: Object
71 }, 77 },
72 className: { 78 className: {
@@ -87,7 +93,8 @@ @@ -87,7 +93,8 @@
87 prefixCls: prefixCls, 93 prefixCls: prefixCls,
88 wrapShow: false, 94 wrapShow: false,
89 showHead: true, 95 showHead: true,
90 - buttonLoading: false 96 + buttonLoading: false,
  97 + visible: this.value
91 }; 98 };
92 }, 99 },
93 computed: { 100 computed: {
@@ -106,14 +113,14 @@ @@ -106,14 +113,14 @@
106 classes () { 113 classes () {
107 return `${prefixCls}`; 114 return `${prefixCls}`;
108 }, 115 },
109 - styles () { 116 + mainStyles () {
110 let style = {}; 117 let style = {};
111 118
112 const styleWidth = { 119 const styleWidth = {
113 width: `${this.width}px` 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 Object.assign(style, styleWidth, customStyle); 125 Object.assign(style, styleWidth, customStyle);
119 126
@@ -123,6 +130,7 @@ @@ -123,6 +130,7 @@
123 methods: { 130 methods: {
124 close () { 131 close () {
125 this.visible = false; 132 this.visible = false;
  133 + this.$emit('input', false);
126 this.$emit('on-cancel'); 134 this.$emit('on-cancel');
127 }, 135 },
128 mask () { 136 mask () {
@@ -143,6 +151,7 @@ @@ -143,6 +151,7 @@
143 this.buttonLoading = true; 151 this.buttonLoading = true;
144 } else { 152 } else {
145 this.visible = false; 153 this.visible = false;
  154 + this.$emit('input', false);
146 } 155 }
147 this.$emit('on-ok'); 156 this.$emit('on-ok');
148 }, 157 },
@@ -182,14 +191,14 @@ @@ -182,14 +191,14 @@
182 this.resetScrollBar(); 191 this.resetScrollBar();
183 } 192 }
184 }, 193 },
185 - ready () { 194 + mounted () {
186 if (this.visible) { 195 if (this.visible) {
187 this.wrapShow = true; 196 this.wrapShow = true;
188 } 197 }
189 198
190 let showHead = true; 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 showHead = false; 202 showHead = false;
194 } 203 }
195 204
@@ -203,6 +212,10 @@ @@ -203,6 +212,10 @@
203 this.removeScrollEffect(); 212 this.removeScrollEffect();
204 }, 213 },
205 watch: { 214 watch: {
  215 + value (val) {
  216 + this.visible = val;
  217 + console.log(this.visible)
  218 + },
206 visible (val) { 219 visible (val) {
207 if (val === false) { 220 if (val === false) {
208 this.buttonLoading = false; 221 this.buttonLoading = false;
@@ -22,7 +22,7 @@ import InputNumber from &#39;./components/input-number&#39;; @@ -22,7 +22,7 @@ import InputNumber from &#39;./components/input-number&#39;;
22 import LoadingBar from './components/loading-bar'; 22 import LoadingBar from './components/loading-bar';
23 import Menu from './components/menu'; 23 import Menu from './components/menu';
24 // import Message from './components/message'; 24 // import Message from './components/message';
25 -// import Modal from './components/modal'; 25 +import Modal from './components/modal';
26 // import Notice from './components/notice'; 26 // import Notice from './components/notice';
27 import Page from './components/page'; 27 import Page from './components/page';
28 import Poptip from './components/poptip'; 28 import Poptip from './components/poptip';
@@ -81,7 +81,7 @@ const iview = { @@ -81,7 +81,7 @@ const iview = {
81 MenuItem: Menu.Item, 81 MenuItem: Menu.Item,
82 Submenu: Menu.Sub, 82 Submenu: Menu.Sub,
83 // Message, 83 // Message,
84 - // Modal, 84 + Modal,
85 // Notice, 85 // Notice,
86 iOption: Option, 86 iOption: Option,
87 OptionGroup, 87 OptionGroup,
@@ -123,7 +123,7 @@ const install = function (Vue, opts = {}) { @@ -123,7 +123,7 @@ const install = function (Vue, opts = {}) {
123 123
124 Vue.prototype.$Loading = LoadingBar; 124 Vue.prototype.$Loading = LoadingBar;
125 // Vue.prototype.$Message = Message; 125 // Vue.prototype.$Message = Message;
126 - // Vue.prototype.$Modal = Modal; 126 + Vue.prototype.$Modal = Modal;
127 // Vue.prototype.$Notice = Notice; 127 // Vue.prototype.$Notice = Notice;
128 }; 128 };
129 129