更改网格颜色设置ui

This commit is contained in:
shefengchun 2023-02-03 09:28:29 +08:00
parent 09f20b4123
commit 1e19299d1f
1 changed files with 46 additions and 18 deletions

View File

@ -24,11 +24,29 @@
<div class="row" style="min-height: 40px;">
<div class="col-4"></div>
<div class="col-4 q-pt-sm">
<div class="row">
<div class="col-4"><span>{{ $t('line color') }}</span></div>
<div class="col-8 border" @click="isshowhex = true; index = 0"
:style="{ 'background-color': color[0] }"></div>
</div>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("line color") }}
</q-item-section>
<q-item-section>
<q-input
v-model="color[0]"
:rules="['anyColor']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer" @click="index = 0">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="color[0]" @change="submit" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
</div>
</div>
</div>
@ -36,19 +54,34 @@
<div class="row" style="min-height: 40px;">
<div class="col-4"></div>
<div class="col-4 q-pt-sm">
<div class="row">
<div class="col-4"><span>{{ $t('background color') }}</span></div>
<div class="col-8 border" @click="isshowhex = true; index = 1"
:style="{ 'background-color': color[1] }"></div>
</div>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("background color") }}
</q-item-section>
<q-item-section>
<q-input
v-model="color[1]"
:rules="['anyColor']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer" @click="index = 1">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="color[1]" @change="submit" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
</div>
</div>
</div>
</div>
</div>
<div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs no-footer
v-model="color[index]" class="my-picker" /> <q-btn style="margin-top: 0.5rem;" color="white" @click="submit"
class=" q-pt-sm" text-color="black" :label="$t('submit')" /></div>
</div>
</template>
@ -76,14 +109,11 @@ export default defineComponent({
let $store = useStore();
let $t = useI18n();
const RowsColumns = reactive([false, false, false, false]);
const hex = ref("")
const isshowhex = ref(false);
const index = ref(0);
const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
let model = reactive([20, 40]);
let options = ref([10, 20, 30, 40, 50]);
const submit = () => {
isshowhex.value = false
switch (index.value) {
case 0:
set?.SetBlendingOption("blending_grids_line_color", color[index.value]);
@ -169,10 +199,8 @@ export default defineComponent({
return {
model,
options,
hex,
submit,
RowsColumns,
isshowhex,
index,
color,
update_row_col,