liuhuajie/lowcode-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:完善组件删除功能

Browse Source
This commit is contained in:
lhj
2024-11-14 23:59:18 +08:00
parent 63b95b3607
commit 670e71cd7b
5 changed files with 126 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/PropertyEditor.vue
View File

@ -14,25 +14,25 @@
<div style="margin-top: 16px;">
<!-- 属性面板 -->
<div>
<a-input-search placeholder="Please enter something" />
<a-input-search placeholder="Please enter something"/>
<a-space direction="vertical" fill style="margin-top: 8px;">
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>组件ID</span>
<a-input style="width: 150px;" />
<a-input style="width: 150px;"/>
</div>
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>是否可见</span>
<a-switch v-model="scheme.visible" />
<a-switch v-model="scheme.visible"/>
</div>
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>是否禁用</span>
<a-switch v-model="scheme.disable" />
<a-switch v-model="scheme.disable"/>
</div>
<a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
<a-collapse-item header="基本配置" key="1">
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>内容</span>
<a-input v-model="scheme.text" style="width: 150px;" />
<a-input v-model="scheme.text" style="width: 150px;"/>
</div>
</a-collapse-item>
</a-collapse>
@ -60,9 +60,9 @@
</template>
<script setup lang="ts">
import { watch, defineProps, computed, ref, onMounted } from 'vue';
import { IPageComponent } from '@/type/IPageComponent';
import { useSchemeStore } from '../stores/useSchemeStore'
import {watch, defineProps, computed, ref, onMounted} from 'vue';
import {IPageComponent} from '@/type/IPageComponent';
import {useSchemeStore} from '../stores/useSchemeStore'
import {IComponent} from "@/type/IComponent.ts";
@ -79,8 +79,9 @@ const scheme = computed<IPageComponent>(() => props.scheme || {} as IPageCompone
// 使用 deep 选项来深度监听对象的变化
watch(scheme, (value, oldValue) => {
console.log("scheme Changed", value);
store.updateScheme(value.id,value as IComponent);
}, { deep: true });
if (value)
store.updateScheme(value.id, value as IComponent);
}, {deep: true});
onMounted(() => {
// 初始化时的逻辑