header.vue
2.37 KB
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
78
79
80
81
82
83
84
85
86
87
88
89
90
<template>
<section class="header-tools">
<div
v-for="(item, index) in items"
:class="item.enabled ? 'button' : 'button disabled'"
:key="index"
@click="onClick(item.key)"
>
<div class="img-wrapper" :id="item.key">
<img :src="item.icon" alt="" />
</div>
<span> {{ $t(`${item.key}`) }}</span>
</div>
</section>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useCanvasHeaderToolsStore } from '@/views/stores/header/useCanvasHeaderToolsStore';
import { useEditorStore } from '@/views/stores/useEditorStore';
const store = useCanvasHeaderToolsStore();
const { setUploadModalVisible, items } = store;
const { isUploadModalVisible, isCanUndo, isCanRedo } = storeToRefs(store);
const editorStore = useEditorStore();
const { setUndo, setRedo } = editorStore;
const onClick = (key) => {
switch (key) {
case 'uploadfile':
setUploadModalVisible(!isUploadModalVisible.value);
break;
case 'undo':
setUndo();
break;
case 'redo':
setRedo();
break;
default:
break;
}
};
</script>
<style lang="less">
.header-tools {
display: flex;
margin-left: 40px;
gap: 24px;
.button {
all: unset;
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 8px 8px 6px;
border-radius: 4px;
pointer-events: initial;
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, 0.08);
}
span {
font-size: 14px;
font-weight: 550;
letter-spacing: -0.05px;
color: rgb(51, 51, 51);
text-align: center;
margin-top: 1px;
margin-left: 4px;
}
.img-wrapper {
display: inline-block;
overflow: hidden;
width: 18px;
height: 18px !important;
}
&.disabled {
overflow: hidden;
pointer-events: none;
span {
color: #b3bac1;
}
img {
transform: translateX(-100%);
filter: drop-shadow(18px 0 @color-button-disabled) !important;
}
cursor: default;
}
}
}
</style>