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 | <template> | 1 | <template> |
| 2 | <div> | 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 | </div> | 17 | </div> |
| 8 | </template> | 18 | </template> |
| 9 | <script> | 19 | <script> |
| 10 | export default { | 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 | methods: { | 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 | </script> | 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