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

美化属性面板

Browse Source
This commit is contained in:
lhj
2024-10-09 00:54:27 +08:00
parent 3f589622a8
commit af73b52d90
1 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/PropertyEditor.vue
View File

@ -1,21 +1,64 @@
<template>
<div>
<a-radio-group type="button">
<a-radio value="Beijing">Beijing</a-radio>
<a-radio value="Shanghai">Shanghai</a-radio>
<a-radio value="Guangzhou">Guangzhou</a-radio>
<a-radio value="Shenzhen">Shenzhen</a-radio>
</a-radio-group>
<div style="background-color: #ffffff;padding-left: 16px;padding-right: 16px;">
<!-- 属性选择器 -->
<div style="display: flex;justify-content: center;padding-top: 8px;width: 100%">
<a-radio-group size="large" type="button" v-model="selectedOption"
style="width: 100%;justify-content: center;text-align: center">
<a-radio style="width: 100%;" value="property" default-checked>属性</a-radio>
<a-radio style="width: 100%;" value="style">样式</a-radio>
<a-radio style="width: 100%;" value="interaction">交互</a-radio>
</a-radio-group>
</div>
<!-- tabpannel -->
<div style="margin-top: 16px;">
<!-- 属性面板 -->
<div>
<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;" />
</div>
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>是否可见</span>
<a-switch />
</div>
<a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
<a-collapse-item header="基本配置" key="1">
</a-collapse-item>
</a-collapse>
<a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
<a-collapse-item header="循环" key="1">
</a-collapse-item>
</a-collapse>
<a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
<a-collapse-item header="插槽" key="1">
</a-collapse-item>
</a-collapse>
<a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
<a-collapse-item header="HTML属性" key="1">
</a-collapse-item>
</a-collapse>
<a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
<a-collapse-item header="高级属性" key="1">
</a-collapse-item>
</a-collapse>
</a-space>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { defineProps, computed, ref } from 'vue';
const props = defineProps({
scheme: Object
});
const selectedOption = ref('property')
const scheme = computed(() => props.scheme || '');
</script>