<template>
|
<el-row class="wrap">
|
<el-col span="2">
|
<el-row>
|
<CardButton
|
name="网格样式"
|
direction="left"
|
@click="() => (show = !show)"
|
></CardButton>
|
</el-row>
|
</el-col>
|
<el-col span="2">
|
<BaseCard v-show="show" direction="right" borderless="r">
|
<template #content>
|
<div class="content-wrap">
|
<div v-for="(g, i) in gridStore.gridClzList" :key="i">
|
<div>
|
<el-text>g.name</el-text>
|
</div>
|
<el-row>
|
<el-text>网格</el-text>
|
<el-switch
|
v-model="gridVisible"
|
width="60"
|
inline-prompt
|
active-text="显示"
|
inactive-text="隐藏"
|
/>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
</BaseCard>
|
</el-col>
|
</el-row>
|
</template>
|
<script setup>
|
/**
|
* 网格样式控制工具
|
*/
|
import { ref } from 'vue';
|
import { useGridStore } from '@/stores/grid-info';
|
|
const gridStore = useGridStore();
|
|
const show = ref(true);
|
|
const gridVisible = ref(false);
|
const rankVisible = ref(false);
|
const dataVisible = ref(false);
|
const isStandardColor = ref(true);
|
const isOpacity = ref(false);
|
const opacityValue = ref(0.7);
|
|
const emits = defineEmits([
|
'showRank',
|
'showData',
|
'changeColor',
|
'changeOpacity'
|
]);
|
|
function handleRankClick() {
|
rankVisible.value = !rankVisible.value;
|
emits('showRank', rankVisible.value);
|
}
|
|
function handleDataClick() {
|
dataVisible.value = !dataVisible.value;
|
emits('showData', dataVisible.value);
|
}
|
|
function handleColorClick() {
|
isStandardColor.value = !isStandardColor.value;
|
emits('changeColor', isStandardColor.value);
|
}
|
|
function handleOpacityClick() {
|
// isOpacity.value = !isOpacity.value;
|
// emits('changeOpacity', isOpacity.value);
|
}
|
|
function handleOpacityChange(value) {
|
emits('changeOpacity', value);
|
}
|
</script>
|
<style scoped>
|
.content-wrap {
|
min-width: 300px;
|
min-height: 600px;
|
}
|
</style>
|
