Commit 2ac208b99d49f66705f2aabcc8a28e1359604e50
1 parent
fabe29a7
fixed #407
fixed #407
Showing
2 changed files
with
31 additions
and
84 deletions
Show diff stats
examples/routers/modal.vue
| 1 | 1 | <template> |
| 2 | 2 | <div> |
| 3 | - <i-button @click.native="instance('info')">消息</i-button> | |
| 4 | - <i-button @click.native="instance('success')">成功</i-button> | |
| 5 | - <i-button @click.native="instance('warning')">警告</i-button> | |
| 6 | - <i-button @click.native="instance('error')">错误</i-button> | |
| 3 | + <i-button @click.native="modal2 = true">自定义页头和页脚</i-button> | |
| 4 | + <Modal v-model="modal2" width="360"> | |
| 5 | + <p slot="header" style="color:#f60;text-align:center"> | |
| 6 | + <Icon type="information-circled"></Icon> | |
| 7 | + <span>删除确认</span> | |
| 8 | + </p> | |
| 9 | + <div style="text-align:center"> | |
| 10 | + <p>此任务删除后，下游 10 个任务将无法执行。</p> | |
| 11 | + <p>是否继续删除？</p> | |
| 12 | + </div> | |
| 13 | + <div slot="footer"> | |
| 14 | + <i-button type="error" size="large" long :loading="modal_loading" @click.native="del">删除</i-button> | |
| 15 | + </div> | |
| 16 | + </Modal> | |
| 7 | 17 | </div> |
| 8 | 18 | </template> |
| 9 | 19 | <script> |
| 10 | 20 | export default { |
| 21 | + data () { | |
| 22 | + return { | |
| 23 | + modal2: false, | |
| 24 | + modal_loading: false, | |
| 25 | + modal3: false, | |
| 26 | + modal4: false, | |
| 27 | + modal5: false | |
| 28 | + } | |
| 29 | + }, | |
| 11 | 30 | methods: { |
| 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 | - } | |
| 31 | + del () { | |
| 32 | + this.modal_loading = true; | |
| 33 | + setTimeout(() => { | |
| 34 | + this.modal_loading = false; | |
| 35 | + this.modal2 = false; | |
| 36 | + this.$Message.success('删除成功'); | |
| 37 | + }, 2000); | |
| 41 | 38 | } |
| 42 | 39 | } |
| 43 | 40 | } |
| 44 | 41 | </script> |
| 45 | - | |
| 46 | - | |
| 47 | -<!--<template>--> | |
| 48 | - <!--<div>--> | |
| 49 | - <!--<i-button @click.native="confirm">标准</i-button>--> | |
| 50 | - <!--<i-button @click.native="custom">自定义按钮文字</i-button>--> | |
| 51 | - <!--<i-button @click.native="async">异步关闭</i-button>--> | |
| 52 | - <!--</div>--> | |
| 53 | -<!--</template>--> | |
| 54 | -<!--<script>--> | |
| 55 | - <!--export default {--> | |
| 56 | - <!--methods: {--> | |
| 57 | - <!--confirm () {--> | |
| 58 | - <!--this.$Modal.confirm({--> | |
| 59 | - <!--title: '确认对话框标题',--> | |
| 60 | - <!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',--> | |
| 61 | - <!--onOk: () => {--> | |
| 62 | - <!--console.log('确定');--> | |
| 63 | -<!--// this.$Message.info('点击了确定');--> | |
| 64 | - <!--},--> | |
| 65 | - <!--onCancel: () => {--> | |
| 66 | - <!--console.log('取消');--> | |
| 67 | -<!--// this.$Message.info('点击了取消');--> | |
| 68 | - <!--}--> | |
| 69 | - <!--});--> | |
| 70 | - <!--},--> | |
| 71 | - <!--custom () {--> | |
| 72 | - <!--this.$Modal.confirm({--> | |
| 73 | - <!--title: '确认对话框标题',--> | |
| 74 | - <!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',--> | |
| 75 | - <!--okText: 'OK',--> | |
| 76 | - <!--cancelText: 'Cancel'--> | |
| 77 | - <!--});--> | |
| 78 | - <!--},--> | |
| 79 | - <!--async () {--> | |
| 80 | - <!--this.$Modal.confirm({--> | |
| 81 | - <!--title: '确认对话框标题',--> | |
| 82 | - <!--content: '<p>对话框将在 2秒 后关闭</p>',--> | |
| 83 | - <!--loading: true,--> | |
| 84 | - <!--onOk: () => {--> | |
| 85 | - <!--setTimeout(() => {--> | |
| 86 | - <!--this.$Modal.remove();--> | |
| 87 | -<!--// this.$Message.info('异步关闭了对话框');--> | |
| 88 | - <!--}, 2000);--> | |
| 89 | - <!--}--> | |
| 90 | - <!--});--> | |
| 91 | - <!--}--> | |
| 92 | - <!--}--> | |
| 93 | - <!--}--> | |
| 94 | -<!--</script>--> | ... | ... |
src/components/modal/modal.vue