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 | <template> | 1 | <template> |
| 2 | <div> | 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 | </div> | 13 | </div> |
| 8 | </template> | 14 | </template> |
| 9 | <script> | 15 | <script> |
| 10 | export default { | 16 | export default { |
| 17 | + data () { | ||
| 18 | + return { | ||
| 19 | + modal1: false | ||
| 20 | + } | ||
| 21 | + }, | ||
| 11 | methods: { | 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,7 +9,7 @@ | ||
| 9 | <div :class="[prefixCls + '-content']"> | 9 | <div :class="[prefixCls + '-content']"> |
| 10 | <a :class="[prefixCls + '-close']" v-if="closable" @click="close"> | 10 | <a :class="[prefixCls + '-close']" v-if="closable" @click="close"> |
| 11 | <slot name="close"> | 11 | <slot name="close"> |
| 12 | - <Icon type="ios-close-empty"></Icon> | 12 | + <Icon type="ios-close"></Icon> |
| 13 | </slot> | 13 | </slot> |
| 14 | </a> | 14 | </a> |
| 15 | <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div> | 15 | <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div> |