Commit 06a4433d86a4fbe5599c583284f31b635f5cf52a
1 parent
36e46e5a
update Modal Icons
Showing
2 changed files
with
21 additions
and
35 deletions
Show diff stats
examples/routers/modal.vue
| 1 | 1 | <template> |
| 2 | 2 | <div> |
| 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> | |
| 3 | + <Button type="primary" @click="modal1 = true">Display dialog box</Button> | |
| 4 | + <Modal | |
| 5 | + v-model="modal1" | |
| 6 | + title="Common Modal dialog box title" | |
| 7 | + @on-ok="ok" | |
| 8 | + @on-cancel="cancel"> | |
| 9 | + <p>Content of dialog</p> | |
| 10 | + <p>Content of dialog</p> | |
| 11 | + <p>Content of dialog</p> | |
| 12 | + </Modal> | |
| 7 | 13 | </div> |
| 8 | 14 | </template> |
| 9 | 15 | <script> |
| 10 | 16 | export default { |
| 17 | + data () { | |
| 18 | + return { | |
| 19 | + modal1: false | |
| 20 | + } | |
| 21 | + }, | |
| 11 | 22 | methods: { |
| 12 | - instance (type) { | |
| 13 | - const title = 'Title'; | |
| 14 | - const content = '<p>Content of dialog</p><p>Content of dialog</p>'; | |
| 15 | - switch (type) { | |
| 16 | - case 'info': | |
| 17 | - this.$Modal.info({ | |
| 18 | - title: title, | |
| 19 | - content: content, | |
| 20 | - closable: true | |
| 21 | - }); | |
| 22 | - break; | |
| 23 | - case 'success': | |
| 24 | - this.$Modal.success({ | |
| 25 | - title: title, | |
| 26 | - content: content | |
| 27 | - }); | |
| 28 | - break; | |
| 29 | - case 'warning': | |
| 30 | - this.$Modal.warning({ | |
| 31 | - title: title, | |
| 32 | - content: content | |
| 33 | - }); | |
| 34 | - break; | |
| 35 | - case 'error': | |
| 36 | - this.$Modal.error({ | |
| 37 | - title: title, | |
| 38 | - content: content | |
| 39 | - }); | |
| 40 | - break; | |
| 41 | - } | |
| 23 | + ok () { | |
| 24 | + this.$Message.info('Clicked ok'); | |
| 25 | + }, | |
| 26 | + cancel () { | |
| 27 | + this.$Message.info('Clicked cancel'); | |
| 42 | 28 | } |
| 43 | 29 | } |
| 44 | 30 | } | ... | ... |
src/components/modal/modal.vue
| ... | ... | @@ -9,7 +9,7 @@ |
| 9 | 9 | <div :class="[prefixCls + '-content']"> |
| 10 | 10 | <a :class="[prefixCls + '-close']" v-if="closable" @click="close"> |
| 11 | 11 | <slot name="close"> |
| 12 | - <Icon type="ios-close-empty"></Icon> | |
| 12 | + <Icon type="ios-close"></Icon> | |
| 13 | 13 | </slot> |
| 14 | 14 | </a> |
| 15 | 15 | <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div> | ... | ... |