config.vue
4.27 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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<template>
<collapse-item name="按钮配置" :expanded="true">
<setting-item-box name="默认值" :alone="true">
<n-select size="small" v-model:value="optionData.buttonType" :options="buttonTypeOptions" />
</setting-item-box>
<setting-item-box name="虚线">
<setting-item name="是否开启">
<n-switch v-model:value="optionData.buttonDashed" />
</setting-item>
</setting-item-box>
<setting-item-box name="透明">
<setting-item name="是否开启">
<n-switch v-model:value="optionData.buttonGhost" />
</setting-item>
</setting-item-box>
<setting-item-box name="颜色">
<setting-item name="">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>
</setting-item>
<setting-item>
<n-button size="small" @click="optionData.buttonColor=''">
恢复默认
</n-button>
</setting-item>
</setting-item-box>
<setting-item-box name="文字颜色">
<setting-item name="">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonTextColor"></n-color-picker>
</setting-item>
<setting-item>
<n-button size="small" @click="optionData.buttonTextColor='white'">
恢复默认
</n-button>
</setting-item>
</setting-item-box>
<setting-item-box name="文字大小">
<setting-item name="">
<n-input-number v-model:value="optionData.buttonTextSize" />
</setting-item>
<setting-item>
<n-button size="small" @click="optionData.buttonTextSize='16'">
恢复默认
</n-button>
</setting-item>
</setting-item-box>
<setting-item-box :alone="true">
<setting-item name="按钮文字" :alone="true">
<n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="文字加粗">
<setting-item name="">
<n-input-number :step="200" v-model:value="optionData.buttonTextBold" />
</setting-item>
<setting-item>
<n-button size="small" @click="optionData.buttonTextBold=100">
恢复默认
</n-button>
</setting-item>
</setting-item-box>
<setting-item-box :alone="true">
<template #name>
<n-text>目标</n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<span class="help-span">{{ targetHelpMessgae }}</span>
</n-tooltip>
</template>
<n-select
style="width: 13.5vw"
placeholder="请选择目标项"
multiple
filterable
v-model:value="optionData.selectTargetItems"
:options="selectTargetItemOptions"
/>
</setting-item-box>
</collapse-item>
</template>
<script lang="ts" setup>
import { PropType, ref, onMounted } from 'vue'
import { CollapseItem, SettingItemBox ,SettingItem} from '@/components/Pages/ChartItemSetting'
import { option } from './config'
import { icon } from '@/plugins'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const chartEditStore = useChartEditStore()
const { HelpOutlineIcon } = icon.ionicons5
const targetHelpMessgae = ref(`勾选目标项,支持多个`)
const buttonTypeOptions = [
{
label: 'default',
value: 'default'
},
{
label: 'primary',
value: 'primary'
},
{
label: 'tertiary',
value: 'tertiary'
},
{
label: 'info',
value: 'info'
},
{
label: 'success',
value: 'success'
},
{
label: 'warning',
value: 'warning'
},
{
label: 'error',
value: 'error'
}
]
const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
onMounted(() => {
const componentList = chartEditStore.getComponentList.map(item => ({
label: item.chartConfig?.title,
value: item.id
}))
selectTargetItemOptions.value = componentList
})
</script>
<style lang="scss" scoped>
.help-span {
display: flex;
flex-wrap: wrap;
width: 8vw;
color: white;
}
</style>