other / mew-iview

Commit f4273043c248a64a75846d0f34d4f5e24ab21060

Authored by 梁灏
1 parent 9edded49

update $Modal style

Showing 3 changed files with 70 additions and 73 deletions   Show diff stats
Inline Side-by-side
examples/routers/modal.vue
  Show/Hide comments   View file @f427304
1 1 <template>
2 2 <div>
3   - <Button type="primary" @click="modal1 = true">Display dialog box</Button>
4   - <Button type="primary" @click="modal2 = true">Display dialog box</Button>
5   - <Button @click="hc">Click Me</Button>
6   - <Modal
7   - v-model="modal1"
8   - title="Common Modal dialog box title"
9   - dragable
10   - @on-ok="ok"
11   - @on-cancel="cancel">
12   - <p>Content of dialog</p>
13   - <p>Content of dialog</p>
14   - <p>Content of dialog</p>
15   - </Modal>
16   - <Modal
17   - v-model="modal2"
18   - title="Common Modal dialog box title2"
19   - dragable
20   - @on-ok="ok"
21   - @on-cancel="cancel">
22   - <p>Content of dialog</p>
23   - <p>Content of dialog</p>
24   - <p>Content of dialog</p>
25   - </Modal>
  3 + <Button @click="instance('info')">Info</Button>
  4 + <Button @click="instance('success')">Success</Button>
  5 + <Button @click="instance('warning')">Warning</Button>
  6 + <Button @click="instance('error')">Error</Button>
26 7 </div>
27 8 </template>
28 9 <script>
29 10 export default {
30   - data () {
31   - return {
32   - modal1: false,
33   - modal2: false
34   - }
35   - },
36 11 methods: {
37   - ok () {
38   - this.$Message.info('Clicked ok');
39   - },
40   - cancel () {
41   - this.$Message.info('Clicked cancel');
42   - },
43   - hc () {
44   - this.$Message.info('Hello');
  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 + }
45 41 }
46 42 }
47 43 }
... ...
src/components/modal/confirm.js
  Show/Hide comments   View file @f427304
... ... @@ -64,13 +64,6 @@ Modal.newInstance = properties =&gt; {
64 64 }
65 65 }, [
66 66 h('div', {
67   - class: this.iconTypeCls
68   - }, [
69   - h('i', {
70   - class: this.iconNameCls
71   - })
72   - ]),
73   - h('div', {
74 67 domProps: {
75 68 innerHTML: this.body
76 69 }
... ... @@ -104,6 +97,13 @@ Modal.newInstance = properties =&gt; {
104 97 }
105 98 }, [
106 99 h('div', {
  100 + class: this.iconTypeCls
  101 + }, [
  102 + h('i', {
  103 + class: this.iconNameCls
  104 + })
  105 + ]),
  106 + h('div', {
107 107 attrs: {
108 108 class: `${prefixCls}-head-title`
109 109 },
... ... @@ -124,8 +124,8 @@ Modal.newInstance = properties =&gt; {
124 124 computed: {
125 125 iconTypeCls () {
126 126 return [
127   - `${prefixCls}-body-icon`,
128   - `${prefixCls}-body-icon-${this.iconType}`
  127 + `${prefixCls}-head-icon`,
  128 + `${prefixCls}-head-icon-${this.iconType}`
129 129 ];
130 130 },
131 131 iconNameCls () {
... ...
src/styles/components/modal.less
  Show/Hide comments   View file @f427304
... ... @@ -138,33 +138,13 @@
138 138 .@{confirm-prefix-cls} {
139 139 padding: 0 4px;
140 140 &-head {
141   -
142   - &-title {
143   - display: inline-block;
144   - font-size: @font-size-base;
145   - color: @title-color;
146   - font-weight: 700;
147   - }
148   - }
149   -
150   - &-body{
151   - margin-top: 6px;
152   - padding-left: 48px;
153   - padding-top: 18px;
154   - font-size: @font-size-small;
155   - color: @text-color;
156   - position: relative;
157   -
158   - &-render{
159   - margin: 0;
160   - padding: 0;
161   - }
162   -
  141 + padding: 0 12px 0 0;
163 142 &-icon {
164   - font-size: 36px;
165   - position: absolute;
166   - top: 0;
167   - left: 0;
  143 + display: inline-block;
  144 + font-size: 28px;
  145 + vertical-align: middle;
  146 + position: relative;
  147 + top: 3px;
168 148  
169 149 &-info {
170 150 color: @primary-color;
... ... @@ -182,10 +162,31 @@
182 162 color: @warning-color;
183 163 }
184 164 }
  165 +
  166 + &-title {
  167 + display: inline-block;
  168 + vertical-align: middle;
  169 + margin-left: 12px;
  170 + font-size: @font-size-large;
  171 + color: @title-color;
  172 + font-weight: 700;
  173 + }
  174 + }
  175 +
  176 + &-body{
  177 + padding-left: 42px;
  178 + font-size: @font-size-base;
  179 + color: @text-color;
  180 + position: relative;
  181 +
  182 + &-render{
  183 + margin: 0;
  184 + padding: 0;
  185 + }
185 186 }
186 187  
187 188 &-footer{
188   - margin-top: 40px;
  189 + margin-top: 20px;
189 190 text-align: right;
190 191  
191 192 button + button {
... ...