65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<script setup>
|
|
import Modal from '@/components/Modal.vue';
|
|
const showLayerSettingListModal = ref(null);
|
|
const showLayerSettingSaveModal = ref(null);
|
|
|
|
function openLayerSettingList() {
|
|
showLayerSettingListModal.value = {
|
|
component: 'viewer/LayerSettingList',
|
|
title: 'Chọn thiết lập layer',
|
|
width: '400px',
|
|
height: 'auto',
|
|
};
|
|
}
|
|
|
|
function openLayerSettingSave() {
|
|
showLayerSettingSaveModal.value = {
|
|
component: 'viewer/LayerSettingSave',
|
|
title: 'Lưu thiết lập layer',
|
|
width: '400px',
|
|
height: 'auto',
|
|
};
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="is-flex is-gap-1">
|
|
<button
|
|
class="button is-small p-2 is-white"
|
|
title="Mở thiết lập"
|
|
@click="openLayerSettingList"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'folder.svg', type: 'primary', size: 20 }" />
|
|
</button>
|
|
<button
|
|
class="button is-small p-2 is-white"
|
|
title="Lưu thiết lập"
|
|
@click="openLayerSettingSave"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 20 }" />
|
|
</button>
|
|
</div>
|
|
<Modal
|
|
v-bind="showLayerSettingListModal"
|
|
v-if="showLayerSettingListModal"
|
|
@close="showLayerSettingListModal = null"
|
|
/>
|
|
<Modal
|
|
v-bind="showLayerSettingSaveModal"
|
|
v-if="showLayerSettingSaveModal"
|
|
@close="showLayerSettingSaveModal = null"
|
|
/>
|
|
</template>
|
|
<style>
|
|
#layerSettingSFCContainer {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 75px;
|
|
height: 50px;
|
|
z-index: 1;
|
|
|
|
display: flex;
|
|
padding: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
</style> |