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 19 <Modal${props} :visible.sync="visible" :width="width">
20 20 <div class="${prefixCls}">
21 21 <div class="${prefixCls}-head">
22   - <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
23 22 <div class="${prefixCls}-head-title">{{{ title }}}</div>
24 23 </div>
25 24 <div class="${prefixCls}-body">
  25 + <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
26 26 {{{ body }}}
27 27 </div>
28 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 30 <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
31 31 </div>
32 32 </div>
... ... @@ -53,8 +53,8 @@ Modal.newInstance = properties =&gt; {
53 53 computed: {
54 54 iconTypeCls () {
55 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 60 iconNameCls () {
... ...
src/components/modal/modal.vue
  Show/Hide comments   View file @6699373
... ... @@ -12,7 +12,7 @@
12 12 <div :class="[prefixCls + '-body']"><slot></slot></div>
13 13 <div :class="[prefixCls + '-footer']" v-if="!footerHide">
14 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 16 <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
17 17 </slot>
18 18 </div>
... ...
src/components/poptip/poptip.vue
  Show/Hide comments   View file @6699373
... ... @@ -21,7 +21,7 @@
21 21 <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
22 22 </div>
23 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 25 <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
26 26 </div>
27 27 </div>
... ...
src/styles/components/button.less
  Show/Hide comments   View file @6699373
... ... @@ -66,10 +66,6 @@
66 66 .btn-color(@info-color);
67 67 }
68 68  
69   - //&-dashed {
70   - // .btn-dashed;
71   - //}
72   -
73 69 &-circle,
74 70 &-circle-outline {
75 71 .btn-circle(@btn-prefix-cls);
... ...
src/styles/components/modal.less
  Show/Hide comments   View file @6699373
... ... @@ -79,15 +79,30 @@
79 79 }
80 80  
81 81 .@{confirm-prefix-cls} {
82   - padding: 10px 25px 20px;
  82 + padding: 0 4px;
83 83 &-head {
84   - &-icon {
  84 +
  85 + &-title {
85 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 107 &-info {
93 108 color: @primary-color;
... ... @@ -105,24 +120,10 @@
105 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 125 &-footer{
125   - margin-top: 20px;
  126 + margin-top: 40px;
126 127 text-align: right;
127 128  
128 129 button + button {
... ...
src/styles/mixins/button.less
  Show/Hide comments   View file @6699373
... ... @@ -222,7 +222,7 @@
222 222  
223 223 // Text
224 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 227 // for disabled
228 228 &.disabled,
... ...
test/routers/button.vue
  Show/Hide comments   View file @6699373
... ... @@ -7,7 +7,7 @@
7 7 <i-button type="info">按钮</i-button>
8 8 <i-button icon="ios-search" type="success"></i-button>
9 9 <br><br>
10   - <div style="width:400px;height:200px;">
  10 + <div style="width:400px">
11 11 <i-button type="error" long size="small">按钮</i-button>
12 12 </div>
13 13 <br><br>
... ...
test/routers/message.vue
  Show/Hide comments   View file @6699373
1 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 5 </template>
7 6 <script>
8 7 export default {
9 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 }
... ...