chenhaodong / mew-iview

Commit 669937325bb16602b8dfbcd190e0ec809158ddf6

Authored by 梁灏
1 parent 71d9fc8e

update Modal、Poptip 

update Modal、Poptip
Showing 8 changed files with 66 additions and 67 deletions   Show diff stats
Inline Side-by-side
src/components/modal/confirm.js
  Show/Hide comments   View file @6699373
@@ -19,14 +19,14 @@ Modal.newInstance = properties => { @@ -19,14 +19,14 @@ Modal.newInstance = properties => {
19 <Modal${props} :visible.sync="visible" :width="width"> 19 <Modal${props} :visible.sync="visible" :width="width">
20 <div class="${prefixCls}"> 20 <div class="${prefixCls}">
21 <div class="${prefixCls}-head"> 21 <div class="${prefixCls}-head">
22 - <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>  
23 <div class="${prefixCls}-head-title">{{{ title }}}</div> 22 <div class="${prefixCls}-head-title">{{{ title }}}</div>
24 </div> 23 </div>
25 <div class="${prefixCls}-body"> 24 <div class="${prefixCls}-body">
  25 + <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
26 {{{ body }}} 26 {{{ body }}}
27 </div> 27 </div>
28 <div class="${prefixCls}-footer"> 28 <div class="${prefixCls}-footer">
29 - <i-button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button> 29 + <i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
30 <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button> 30 <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
31 </div> 31 </div>
32 </div> 32 </div>
@@ -53,8 +53,8 @@ Modal.newInstance = properties =&gt; { @@ -53,8 +53,8 @@ Modal.newInstance = properties =&gt; {
53 computed: { 53 computed: {
54 iconTypeCls () { 54 iconTypeCls () {
55 return [ 55 return [
56 - `${prefixCls}-head-icon`,  
57 - `${prefixCls}-head-icon-${this.iconType}` 56 + `${prefixCls}-body-icon`,
  57 + `${prefixCls}-body-icon-${this.iconType}`
58 ] 58 ]
59 }, 59 },
60 iconNameCls () { 60 iconNameCls () {
src/components/modal/modal.vue
  Show/Hide comments   View file @6699373
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 <div :class="[prefixCls + '-body']"><slot></slot></div> 12 <div :class="[prefixCls + '-body']"><slot></slot></div>
13 <div :class="[prefixCls + '-footer']" v-if="!footerHide"> 13 <div :class="[prefixCls + '-footer']" v-if="!footerHide">
14 <slot name="footer"> 14 <slot name="footer">
15 - <i-button type="ghost" size="large" @click="cancel">{{ cancelText }}</i-button> 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> 16 <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
17 </slot> 17 </slot>
18 </div> 18 </div>
src/components/poptip/poptip.vue
  Show/Hide comments   View file @6699373
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div> 21 <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
22 </div> 22 </div>
23 <div :class="[prefixCls + '-footer']"> 23 <div :class="[prefixCls + '-footer']">
24 - <i-button type="ghost" size="small" @click="cancel">{{ cancelText }}</i-button> 24 + <i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
25 <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button> 25 <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
26 </div> 26 </div>
27 </div> 27 </div>
src/styles/components/button.less
  Show/Hide comments   View file @6699373
@@ -66,10 +66,6 @@ @@ -66,10 +66,6 @@
66 .btn-color(@info-color); 66 .btn-color(@info-color);
67 } 67 }
68 68
69 - //&-dashed {  
70 - // .btn-dashed;  
71 - //}  
72 -  
73 &-circle, 69 &-circle,
74 &-circle-outline { 70 &-circle-outline {
75 .btn-circle(@btn-prefix-cls); 71 .btn-circle(@btn-prefix-cls);
src/styles/components/modal.less
  Show/Hide comments   View file @6699373
@@ -79,15 +79,30 @@ @@ -79,15 +79,30 @@
79 } 79 }
80 80
81 .@{confirm-prefix-cls} { 81 .@{confirm-prefix-cls} {
82 - padding: 10px 25px 20px; 82 + padding: 0 4px;
83 &-head { 83 &-head {
84 - &-icon { 84 +
  85 + &-title {
85 display: inline-block; 86 display: inline-block;
86 - font-size: 28px;  
87 - margin-right: 5px;  
88 - padding: 0 1px;  
89 - position: relative;  
90 - top: 5px; 87 + font-size: @font-size-base;
  88 + color: @title-color;
  89 + font-weight: 700;
  90 + }
  91 + }
  92 +
  93 + &-body{
  94 + margin-top: 6px;
  95 + padding-left: 48px;
  96 + padding-top: 18px;
  97 + font-size: @font-size-small;
  98 + color: @text-color;
  99 + position: relative;
  100 +
  101 + &-icon {
  102 + font-size: 36px;
  103 + position: absolute;
  104 + top: 0;
  105 + left: 0;
91 106
92 &-info { 107 &-info {
93 color: @primary-color; 108 color: @primary-color;
@@ -105,24 +120,10 @@ @@ -105,24 +120,10 @@
105 color: @warning-color; 120 color: @warning-color;
106 } 121 }
107 } 122 }
108 -  
109 - &-title {  
110 - display: inline-block;  
111 - font-size: @font-size-base;  
112 - color: @text-color;  
113 - font-weight: 700;  
114 - }  
115 - }  
116 -  
117 - &-body{  
118 - margin-left: 35px;  
119 - margin-top: 8px;  
120 - font-size: 12px;  
121 - color: @text-color;  
122 } 123 }
123 124
124 &-footer{ 125 &-footer{
125 - margin-top: 20px; 126 + margin-top: 40px;
126 text-align: right; 127 text-align: right;
127 128
128 button + button { 129 button + button {
src/styles/mixins/button.less
  Show/Hide comments   View file @6699373
@@ -222,7 +222,7 @@ @@ -222,7 +222,7 @@
222 222
223 // Text 223 // Text
224 .btn-text() { 224 .btn-text() {
225 - .button-variant(@link-color, @btn-ghost-bg, transparent); 225 + .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);
226 226
227 // for disabled 227 // for disabled
228 &.disabled, 228 &.disabled,
test/routers/button.vue
  Show/Hide comments   View file @6699373
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 <i-button type="info">按钮</i-button> 7 <i-button type="info">按钮</i-button>
8 <i-button icon="ios-search" type="success"></i-button> 8 <i-button icon="ios-search" type="success"></i-button>
9 <br><br> 9 <br><br>
10 - <div style="width:400px;height:200px;"> 10 + <div style="width:400px">
11 <i-button type="error" long size="small">按钮</i-button> 11 <i-button type="error" long size="small">按钮</i-button>
12 </div> 12 </div>
13 <br><br> 13 <br><br>
test/routers/message.vue
  Show/Hide comments   View file @6699373
1 <template> 1 <template>
2 - <i-button @click="instance('info')">消息</i-button>  
3 - <i-button @click="instance('success')">成功</i-button>  
4 - <i-button @click="instance('warning')">警告</i-button>  
5 - <i-button @click="instance('error')">错误</i-button> 2 + <i-button @click="confirm">标准</i-button>
  3 + <i-button @click="custom">自定义按钮文字</i-button>
  4 + <i-button @click="async">异步关闭</i-button>
6 </template> 5 </template>
7 <script> 6 <script>
8 export default { 7 export default {
9 methods: { 8 methods: {
10 - instance (type) {  
11 - const title = '对话框的标题';  
12 - const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';  
13 - switch (type) {  
14 - case 'info':  
15 - this.$Modal.info({  
16 - title: title,  
17 - content: content  
18 - });  
19 - break;  
20 - case 'success':  
21 - this.$Modal.success({  
22 - title: title,  
23 - content: content  
24 - });  
25 - break;  
26 - case 'warning':  
27 - this.$Modal.warning({  
28 - title: title,  
29 - content: content  
30 - });  
31 - break;  
32 - case 'error':  
33 - this.$Modal.error({  
34 - title: title,  
35 - content: content  
36 - });  
37 - break;  
38 - } 9 + confirm () {
  10 + this.$Modal.confirm({
  11 + title: '确认对话框标题',
  12 + content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
  13 + onOk: () => {
  14 + this.$Message.info('点击了确定');
  15 + },
  16 + onCancel: () => {
  17 + this.$Message.info('点击了取消');
  18 + }
  19 + });
  20 + },
  21 + custom () {
  22 + this.$Modal.confirm({
  23 + title: '确认对话框标题',
  24 + content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
  25 + okText: 'OK',
  26 + cancelText: 'Cancel'
  27 + });
  28 + },
  29 + async () {
  30 + this.$Modal.confirm({
  31 + title: '确认对话框标题',
  32 + content: '<p>对话框将在 2秒 后关闭</p>',
  33 + loading: true,
  34 + onOk: () => {
  35 + setTimeout(() => {
  36 + this.$Modal.remove();
  37 + this.$Message.info('异步关闭了对话框');
  38 + }, 2000);
  39 + }
  40 + });
39 } 41 }
40 } 42 }
41 } 43 }