Commit f4273043c248a64a75846d0f34d4f5e24ab21060
1 parent
9edded49
update $Modal style
Showing
3 changed files
with
70 additions
and
73 deletions
Show diff stats
examples/routers/modal.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 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 | </div> | 7 | </div> |
| 27 | </template> | 8 | </template> |
| 28 | <script> | 9 | <script> |
| 29 | export default { | 10 | export default { |
| 30 | - data () { | ||
| 31 | - return { | ||
| 32 | - modal1: false, | ||
| 33 | - modal2: false | ||
| 34 | - } | ||
| 35 | - }, | ||
| 36 | methods: { | 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
| @@ -64,13 +64,6 @@ Modal.newInstance = properties => { | @@ -64,13 +64,6 @@ Modal.newInstance = properties => { | ||
| 64 | } | 64 | } |
| 65 | }, [ | 65 | }, [ |
| 66 | h('div', { | 66 | h('div', { |
| 67 | - class: this.iconTypeCls | ||
| 68 | - }, [ | ||
| 69 | - h('i', { | ||
| 70 | - class: this.iconNameCls | ||
| 71 | - }) | ||
| 72 | - ]), | ||
| 73 | - h('div', { | ||
| 74 | domProps: { | 67 | domProps: { |
| 75 | innerHTML: this.body | 68 | innerHTML: this.body |
| 76 | } | 69 | } |
| @@ -104,6 +97,13 @@ Modal.newInstance = properties => { | @@ -104,6 +97,13 @@ Modal.newInstance = properties => { | ||
| 104 | } | 97 | } |
| 105 | }, [ | 98 | }, [ |
| 106 | h('div', { | 99 | h('div', { |
| 100 | + class: this.iconTypeCls | ||
| 101 | + }, [ | ||
| 102 | + h('i', { | ||
| 103 | + class: this.iconNameCls | ||
| 104 | + }) | ||
| 105 | + ]), | ||
| 106 | + h('div', { | ||
| 107 | attrs: { | 107 | attrs: { |
| 108 | class: `${prefixCls}-head-title` | 108 | class: `${prefixCls}-head-title` |
| 109 | }, | 109 | }, |
| @@ -124,8 +124,8 @@ Modal.newInstance = properties => { | @@ -124,8 +124,8 @@ Modal.newInstance = properties => { | ||
| 124 | computed: { | 124 | computed: { |
| 125 | iconTypeCls () { | 125 | iconTypeCls () { |
| 126 | return [ | 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 | iconNameCls () { | 131 | iconNameCls () { |
src/styles/components/modal.less
| @@ -138,33 +138,13 @@ | @@ -138,33 +138,13 @@ | ||
| 138 | .@{confirm-prefix-cls} { | 138 | .@{confirm-prefix-cls} { |
| 139 | padding: 0 4px; | 139 | padding: 0 4px; |
| 140 | &-head { | 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 | &-icon { | 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 | &-info { | 149 | &-info { |
| 170 | color: @primary-color; | 150 | color: @primary-color; |
| @@ -182,10 +162,31 @@ | @@ -182,10 +162,31 @@ | ||
| 182 | color: @warning-color; | 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 | &-footer{ | 188 | &-footer{ |
| 188 | - margin-top: 40px; | 189 | + margin-top: 20px; |
| 189 | text-align: right; | 190 | text-align: right; |
| 190 | 191 | ||
| 191 | button + button { | 192 | button + button { |