mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-07 01:18:54 +08:00
ce11f50942
- fix(editor): 修复点击返回页面列表 autoSaveTimer is not defined 运行时错误，优化回退逻辑 - feat(hotzone): PC 端热区图接入可视化组件，支持拖拽画框、拉伸缩放与百分比自适应 - fix(floor-height): 商品宫格、宫格楼层、横幅楼层、商品条等默认行高改为自适应撑开，防止商品溢出截断 - fix(video): 修正视频组件默认行高与播放器高度对齐为 450px，避免底部遮挡 - fix(freelayout): 统一自由排版默认高度与后台画布高度为 450px，消除底部空白 - feat(adaptive): 频道宫格、品牌墙、优惠券等集合类组件支持动态行高与 autoCompTypes 弹性包裹 - refactor(preset): 优化双端 double11Preset 预设模板，清理遗留固定行高
88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="flag"
|
||
:width="width"
|
||
:close-on-click-modal="false"
|
||
title="绘制热区"
|
||
top="120px"
|
||
destroy-on-close
|
||
@close="clickClose"
|
||
>
|
||
<template v-if="flag && hotzoneRes">
|
||
<hotzone
|
||
ref="hotzoneRef"
|
||
@change="changeHotzone"
|
||
:zonesInit="hotzoneRes.zoneInfo"
|
||
:image="hotzoneRes.img"
|
||
></hotzone>
|
||
</template>
|
||
<template #footer>
|
||
<el-button @click="clickClose">取消</el-button>
|
||
<el-button type="primary" @click="clickOK">确定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import hotzone from "./components/Hotzone.vue";
|
||
|
||
const props = defineProps({
|
||
width: {
|
||
type: String,
|
||
default: "800px",
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(["changeZone", "closeFlag"]);
|
||
|
||
const flag = ref(false);
|
||
const hotzoneRes = ref(null);
|
||
|
||
// hotzoneRef：模板 ref 与组件 import 同名，改名避免互相覆盖
|
||
const hotzoneRef = ref(null);
|
||
|
||
function changeHotzone(info) {
|
||
if (hotzoneRes.value) {
|
||
hotzoneRes.value.zoneInfo = info;
|
||
}
|
||
emit("changeZone", info);
|
||
}
|
||
|
||
function clickClose() {
|
||
flag.value = false;
|
||
hotzoneRes.value = null;
|
||
emit("closeFlag", false);
|
||
}
|
||
|
||
function clickOK() {
|
||
clickClose();
|
||
}
|
||
|
||
function open(val) {
|
||
hotzoneRes.value = val || null;
|
||
if (hotzoneRes.value && !hotzoneRes.value.zoneInfo) {
|
||
hotzoneRes.value.zoneInfo = [];
|
||
}
|
||
flag.value = true;
|
||
}
|
||
|
||
function close() {
|
||
flag.value = false;
|
||
hotzoneRes.value = null;
|
||
}
|
||
|
||
// decorate.vue 通过 hotzoneRef.value.open(val) 调用
|
||
defineExpose({ open, close });
|
||
</script>
|
||
<style scoped lang="scss">
|
||
:deep(.el-dialog) {
|
||
overflow: hidden;
|
||
height: 650px !important;
|
||
}
|
||
:deep(.el-dialog__body) {
|
||
width: 100%;
|
||
height: 500px;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|