Arco弹窗封装
vue
运行指定动画
vue
1<template>
2 <div class="business-modal-wrapper">
3 <a-modal :render-to-body="false" :visible="open" v-bind="defaultProps" @cancel="$emit('close')"
4 :on-before-cancel="cannelDispatch" :draggable="draggable" :closable="false"
5 @close="$emit('close')" @ok="$emit('ok')" :fullscreen="fullscreen">
6 <template #title>
7 <div class="business-modal-header">
8 <div class="title">{{ props.title }}</div>
9 <div class="actions">
10 <a-space size="small">
11 <div class="action-tool" v-if="fullscreen" @click="toggleFullscreen">
12 <icon-fullscreen-exit/>
13 </div>
14 <div class="action-tool" v-else @click="toggleFullscreen">
15 <icon-fullscreen/>
16 </div>
17 <div class="action-tool" @click="toggleDraggable">
18 <icon-drag-arrow/>
19 </div>
20 <div class="action-tool" @click="$emit('close')">
21 <icon-close/>
22 </div>
23 </a-space>
24 </div>
25 </div>
26 </template>
27 <slot/>
28 </a-modal>
29 </div>
30</template>
31
32<script setup lang="ts">
33import {ModalConfig} from "@arco-design/web-vue";
34
35const open = defineModel();
36
37const props = defineProps({
38 title: {
39 type: String,
40 default: '订单'
41 }
42})
43
44const defaultProps: Partial<ModalConfig> = {
45 titleAlign: 'start',
46 width: '60vw',
47 title: '',
48 modalAnimationName: 'business-modal',
49}
50
51const fullscreen = ref(false)
52
53const draggable = ref(false);
54
55const emits = defineEmits(['close', 'ok']);
56
57const toggleDraggable = () => {
58 draggable.value = !draggable.value
59}
60
61const toggleFullscreen = () => {
62 fullscreen.value = !fullscreen.value
63}
64
65const cannelDispatch = () => {
66 // open.value = false
67 if (fullscreen.value) {
68 console.log('cannelDispatch')
69 fullscreen.value = false
70 return false;
71 } else {
72 console.log('cannelDispatch')
73 emits('close')
74 return true;
75 }
76}
77
78
79</script>
80
81<style scoped lang="less">
82
83.business-modal-wrapper {
84
85 :deep(.business-modal-enter-active) {
86 animation-name: fadeIn;
87 animation-duration: 0.3s;
88 animation-fill-mode: forwards;
89 }
90
91
92 :deep(.business-modal-leave-active) {
93 animation-name: fadeOut;
94 animation-duration: 0.6s;
95 animation-fill-mode: forwards;
96 }
97
98 .business-modal-header {
99 width: 100%;
100 display: flex;
101 justify-content: space-between;
102 padding-right: 20px
103 }
104
105 .action {
106 margin-left: -12px;
107 }
108
109 .action-tool {
110 cursor: pointer;
111 position: relative;
112 transition: background-color 0.3s cubic-bezier(0, 0, 1, 1);
113 border-radius: var(--border-radius-circle);
114 width: 18px;
115 height: 18px;
116 font-size: 12px;
117 line-height: 12px;
118 color: var(--color-text-1);
119 text-align: center;
120 display: flex;
121 justify-content: center;
122 align-items: center;
123
124 &:hover {
125 background-color: var(--color-fill-2);
126 }
127 }
128
129
130}
131</style>
132