props定义接口

This commit is contained in:
lhj
2024-10-10 00:44:14 +08:00
parent 729a2dc7d5
commit 9b8dbe97a8
2 changed files with 16 additions and 9 deletions

View File

@ -37,7 +37,7 @@
</div> </div>
<!-- 测试区域 --> <!-- 测试区域 -->
<div class="test-area"> <div class="test-area">
<!-- {{ store.scheme }} --> {{ store.scheme }}
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,6 +1,5 @@
<template> <template>
<div style="background-color: #ffffff;padding-left: 16px;padding-right: 16px;"> <div style="background-color: #ffffff;padding-left: 16px;padding-right: 16px;">
<!-- 属性选择器 --> <!-- 属性选择器 -->
<div style="display: flex;justify-content: center;padding-top: 8px;width: 100%"> <div style="display: flex;justify-content: center;padding-top: 8px;width: 100%">
<a-radio-group size="large" type="button" v-model="selectedOption" <a-radio-group size="large" type="button" v-model="selectedOption"
@ -29,7 +28,7 @@
<a-collapse-item header="基本配置" key="1"> <a-collapse-item header="基本配置" key="1">
<div style="display: flex;justify-content: space-between;vertical-align: middle;"> <div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>内容</span> <span>内容</span>
<a-input style="width: 150px;" /> <a-input v-model="scheme.text" style="width: 150px;" />
</div> </div>
</a-collapse-item> </a-collapse-item>
</a-collapse> </a-collapse>
@ -57,19 +56,27 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, computed, ref } from 'vue'; import { defineProps, computed, ref, onMounted } from 'vue';
import { IPageComponent } from '../type/IPageComponent';
const props = defineProps<{
scheme: IPageComponent
}>();
const props = defineProps({
scheme: Object
});
const selectedOption = ref('property') const selectedOption = ref('property')
const scheme = computed(() => props.scheme || ''); const scheme = computed(() => props.scheme || '');
onMounted(() => {
})
</script> </script>
<style scoped> <style scoped>
:deep(.arco-collapse-item-content) { :deep(.arco-collapse-item-content) {
background-color: #ffffff; background-color: #ffffff;
} }
:deep(.arco-input-wrapper) { :deep(.arco-input-wrapper) {
z-index: 1; z-index: 1;
background-color: var(--color-bg-2); background-color: var(--color-bg-2);