提交 | 用户 | age
|
ebf7c8
|
1 |
<template> |
V |
2 |
<div :class="getClass"> |
|
3 |
<template v-if="canFullscreen"> |
|
4 |
<FullscreenExitOutlined role="full" @click="handleFullScreen" v-if="fullScreen" /> |
|
5 |
<FullscreenOutlined role="close" @click="handleFullScreen" v-else /> |
|
6 |
</template> |
|
7 |
<CloseOutlined @click="handleCancel" /> |
|
8 |
</div> |
|
9 |
</template> |
|
10 |
<script lang="ts"> |
|
11 |
import { defineComponent, computed } from 'vue'; |
|
12 |
import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'; |
|
13 |
import { useDesign } from '/@/hooks/web/useDesign'; |
|
14 |
|
|
15 |
export default defineComponent({ |
|
16 |
name: 'ModalClose', |
|
17 |
components: { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined }, |
|
18 |
props: { |
1c1755
|
19 |
canFullscreen: { type: Boolean, default: true }, |
V |
20 |
fullScreen: { type: Boolean }, |
ebf7c8
|
21 |
}, |
V |
22 |
emits: ['cancel', 'fullscreen'], |
|
23 |
setup(props, { emit }) { |
|
24 |
const { prefixCls } = useDesign('basic-modal-close'); |
|
25 |
|
|
26 |
const getClass = computed(() => { |
|
27 |
return [ |
|
28 |
prefixCls, |
|
29 |
`${prefixCls}--custom`, |
|
30 |
{ |
|
31 |
[`${prefixCls}--can-full`]: props.canFullscreen, |
|
32 |
}, |
|
33 |
]; |
|
34 |
}); |
|
35 |
|
de12ba
|
36 |
function handleCancel(e: Event) { |
无 |
37 |
emit('cancel', e); |
ebf7c8
|
38 |
} |
1c1755
|
39 |
|
ebf7c8
|
40 |
function handleFullScreen(e: Event) { |
V |
41 |
e?.stopPropagation(); |
|
42 |
e?.preventDefault(); |
|
43 |
emit('fullscreen'); |
|
44 |
} |
|
45 |
|
|
46 |
return { |
|
47 |
getClass, |
|
48 |
prefixCls, |
|
49 |
handleCancel, |
|
50 |
handleFullScreen, |
|
51 |
}; |
|
52 |
}, |
|
53 |
}); |
|
54 |
</script> |
|
55 |
<style lang="less"> |
|
56 |
@prefix-cls: ~'@{namespace}-basic-modal-close'; |
|
57 |
.@{prefix-cls} { |
|
58 |
display: flex; |
|
59 |
height: 95%; |
|
60 |
align-items: center; |
|
61 |
|
|
62 |
> span { |
|
63 |
margin-left: 48px; |
|
64 |
font-size: 16px; |
|
65 |
} |
|
66 |
|
|
67 |
&--can-full { |
|
68 |
> span { |
|
69 |
margin-left: 12px; |
|
70 |
} |
|
71 |
} |
|
72 |
|
|
73 |
&:not(&--can-full) { |
|
74 |
> span:nth-child(1) { |
|
75 |
&:hover { |
|
76 |
font-weight: 700; |
|
77 |
} |
|
78 |
} |
|
79 |
} |
|
80 |
|
|
81 |
& span:nth-child(1) { |
|
82 |
display: inline-block; |
|
83 |
padding: 10px; |
|
84 |
|
|
85 |
&:hover { |
|
86 |
color: @primary-color; |
|
87 |
} |
|
88 |
} |
|
89 |
|
|
90 |
& span:nth-child(2) { |
|
91 |
&:hover { |
|
92 |
color: @error-color; |
|
93 |
} |
|
94 |
} |
|
95 |
} |
|
96 |
</style> |