102 lines
3.7 KiB
Vue
102 lines
3.7 KiB
Vue
<template>
|
|
<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 v-model="scheme.visible"/>
|
|
</div>
|
|
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
|
|
<span>是否禁用</span>
|
|
<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;"/>
|
|
</div>
|
|
</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 {watch, defineProps, computed, ref, onMounted} from 'vue';
|
|
import {IPageComponent} from '@/type/IPageComponent';
|
|
import {useSchemeStore} from '../stores/useSchemeStore'
|
|
|
|
import {IComponent} from "@/type/IComponent.ts";
|
|
|
|
const props = defineProps<{
|
|
scheme: IPageComponent
|
|
}>();
|
|
|
|
|
|
const store = useSchemeStore()
|
|
|
|
const selectedOption = ref('property');
|
|
const scheme = computed<IPageComponent>(() => props.scheme || {} as IPageComponent);
|
|
|
|
// 使用 deep 选项来深度监听对象的变化
|
|
watch(scheme, (value, oldValue) => {
|
|
// console.log("scheme Changed", value);
|
|
if (value)
|
|
store.updateScheme(value.id, value as IComponent);
|
|
}, {deep: true});
|
|
|
|
onMounted(() => {
|
|
// 初始化时的逻辑
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.arco-collapse-item-content) {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
:deep(.arco-input-wrapper) {
|
|
z-index: 1;
|
|
background-color: var(--color-bg-2);
|
|
border-color: rgb(var(--gray-4));
|
|
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
|
}
|
|
</style> |