1.解决清空后双向绑定失效的问题

v1.0.0
sws 2024-09-06 18:42:00 +08:00
parent 03faa015e4
commit 1c28ed6347
3 changed files with 27 additions and 9 deletions

View File

@ -1,11 +1,11 @@
<template>
<el-dialog v-model="dialog_visible" class="radius-lg" width="1168" draggable :close-on-click-modal="false" append-to-body>
<el-dialog v-model="dialog_visible" class="radius-lg diy-preview" width="1168" :close-on-click-modal="false" append-to-body>
<template #header>
<div class="title re">
<div class="middle size-16 fw">预览</div>
</div>
</template>
<div class="flex-row pt-16 iframe-content">
<div class="flex-row iframe-content">
<iframe :src="new_link" width="100%" height="100%" frameborder="0"></iframe>
</div>
</el-dialog>
@ -47,6 +47,8 @@ watch(
</script>
<style lang="scss" scoped>
.iframe-content {
height: 60rem;
height: 80rem;
width: calc(100% + 3.2rem);
margin: 0 -1.6rem -1.6rem -1.6rem;
}
</style>

View File

@ -212,3 +212,17 @@ p {
font-size: 1.2rem;
}
}
//
.diy-preview.el-dialog {
--el-dialog-margin-top: 0;
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}

View File

@ -4,13 +4,15 @@
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(com, i) in components" :key="i" :title="com.name" :name="com.key">
<VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
<div v-for="item in com.data" :key="item.key" class="item">
<div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
<div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
<img class="img radius-xs" :src="url_computer(item.key)" />
<div>{{ item.name }}</div>
<template v-if="com.data.length > 0">
<div v-for="item in com.data" :key="item.key" class="item">
<div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
<div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
<img class="img radius-xs" :src="url_computer(item.key)" />
<div>{{ item.name }}</div>
</div>
</div>
</div>
</template>
</VueDraggable>
</el-collapse-item>
</el-collapse>