1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| /**
| * 弹出框混入功能
| */
| import { Observable, Subscription, BehaviorSubject } from 'rxjs';
| import {
| Component,
| Prop,
| Vue,
| Emit,
| Model,
| Watch,
| } from 'vue-property-decorator';
|
| export interface IModalMixin {
| /**
| * 弹出框是否显示
| */
| visible: boolean;
| /**
| * 弹出框监听者
| */
| subject$: BehaviorSubject<any>;
| /**
| * 显示弹出框
| */
| show(): void;
| /**
| * 关闭弹出框
| */
| close(): void;
| /**
| * 确定按钮处理
| */
| handleOk(): void;
| /**
| * 取消按钮处理
| */
| handleCancel(): void;
| }
|
| @Component({})
| export default class ModalMixin extends Vue implements IModalMixin {
|
| public visible: boolean = false;
|
| @Prop({
| type: Object,
| default() {
| return new BehaviorSubject<any>({});
| },
| })
| public subject$!: BehaviorSubject<any>;
|
| public handleOk(): void {
| this.visible = false;
| this.subject$.next({});
| }
|
| public handleCancel(): void {
| this.visible = false;
| this.subject$.error({
| isCancel: true,
| });
| }
|
| public show() {
| this.visible = true;
| }
|
| public close() {
| this.visible = false;
| }
|
| private mounted(): void {
| this.visible = true;
| }
| }
|
|
