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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
| <template>
| <div v-if="!isSelect">
| <div class="attr-item-box">
| <!-- <h3>{{ $t('bgSeting.color') }}</h3> -->
| <Divider plain orientation="left">
| <h4>{{ $t('bgSeting.color') }}</h4>
| </Divider>
| <Form :label-width="0">
| <FormItem prop="name">
| <ColorPicker v-model="color" @on-change="setThisColor" alpha />
| </FormItem>
| </Form>
| <!-- <Divider plain></Divider> -->
| </div>
| <div class="attr-item-box">
| <!-- <h3>{{ $t('bgSeting.colorMacthing') }}</h3> -->
| <Divider plain orientation="left">
| <h4>{{ $t('bgSeting.colorMacthing') }}</h4>
| </Divider>
| <div class="color-list">
| <template v-for="(item, i) in colorList" :key="item + i">
| <span :style="`background:${item}`" @click="setColor(item)"></span>
| </template>
| </div>
| </div>
|
| <!-- <div>
| <Divider plain orientation="left">
| <h4>蒙版</h4>
| </Divider>
|
| <workspaceMask />
| </div> -->
| </div>
| </template>
|
| <script setup name="BgBar">
| // import workspaceMask from './workspaceMask.vue';
| import { ref } from 'vue';
| import useSelect from '@/hooks/select';
| const { isSelect, canvasEditor } = useSelect();
|
| const colorList = ref([
| '#5F2B63',
| '#B23554',
| '#F27E56',
| '#FCE766',
| '#86DCCD',
| '#E7FDCB',
| '#FFDC84',
| '#F57677',
| '#5FC2C7',
| '#98DFE5',
| '#C2EFF3',
| '#DDFDFD',
| '#9EE9D3',
| '#2FC6C8',
| '#2D7A9D',
| '#48466d',
| '#61c0bf',
| '#bbded6',
| '#fae3d9',
| '#ffb6b9',
| '#ffaaa5',
| '#ffd3b6',
| '#dcedc1',
| '#a8e6cf',
| ]);
|
| const color = ref('rgba(255, 255, 255, 1)');
| // 背景颜色设置
| const setThisColor = () => {
| setColor(color.value);
| };
| // 背景颜色设置
| function setColor(c) {
| const workspace = canvasEditor.canvas.getObjects().find((item) => item.id === 'workspace');
| workspace.set('fill', c);
| canvasEditor.canvas.renderAll();
| color.value = c;
| }
|
| // 加载模板时回显颜色值
| const handleChangeColor = () => {
| const workspace = canvasEditor.canvas.getObjects().find((item) => item.id === 'workspace');
| color.value = workspace.fill;
| };
|
| onMounted(() => {
| canvasEditor.on('loadJson', handleChangeColor);
| });
|
| onUnmounted(() => {
| canvasEditor.off('loadJson', handleChangeColor);
| });
| </script>
|
| <style scoped lang="less">
| :deep(.ivu-form-item) {
| margin-bottom: 0;
| .ivu-color-picker {
| display: unset;
| }
| }
| .color-list {
| display: flex;
| flex-wrap: wrap;
| span {
| height: 30px;
| width: 30px;
| border-radius: 15px;
| border: 3px solid #fff;
| vertical-align: middle;
| cursor: pointer;
| }
| }
| </style>
|
|
