更改网格颜色设置ui
This commit is contained in:
parent
09f20b4123
commit
1e19299d1f
|
@ -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,20 +54,35 @@
|
|||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<style scoped>
|
||||
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue