介绍
本文档主要用于描述 ShadcnDataBuilder 组件的一些功能和用法。
用法
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const items = ref([
{
group: 'Basic Components',
children: [
{type: 'text', label: 'Text'},
{type: 'image', label: 'Image'},
{type: 'chart', label: 'Chart'},
]
}
])宽高 (width & height)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" :width="800" :height="600"/>
</template>工具栏 (show-toolbar)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" :show-toolbar="false" :width="800" :height="600" />
</template>显示网格 (show-grid)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" :show-grid="false" :width="800" :height="600" />
</template>对齐网格 (snap-to-grid)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" :snap-to-grid="false" :width="800" :height="600" />
</template>居中 (is-center)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" is-center />
</template>重置尺寸 (resize)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" :resize="false" />
</template>画布样式 (canvas-style)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items":canvas-style="{backgroundColor: '#e01a1a'}" />
</template>辅助线 (show-guidelines)
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" show-guidelines />
</template>自定义面板插槽
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" :config-width="300" @update-config="console.log($event)">
<template #panel-label="{ item }">
{{ item.label }} - {{ item.type }}
</template>
<template #text="{ configure, isSelected }">
<ShadcnText type="h1" :class="isSelected ? 'text-blue-600' : 'text-gray-900'">
{{ getConfigValue(configure, 'text', 'Text Component') }}
</ShadcnText>
</template>
</ShadcnDataBuilderEditor>
</template>
<script setup lang="ts">
const getConfigValue = (configure, groupKey, label) => {
if (!configure) {
return null
}
const group = configure.find(g => g.key === groupKey)
if (!group) {
return null
}
const item = group.items?.find(item => item.label === label)
return item?.value
}
</script>自定义面板样式
查看代码
vue
<template>
<ShadcnDataBuilderEditor :items="items" :config-width="300" @update-config="console.log($event)">
<template #panel-label="{ item }">
{{ item.label }} - {{ item.type }}
</template>
<template #text="{ configure, isSelected }">
<ShadcnText type="h1" :class="isSelected ? 'text-blue-600' : 'text-gray-900'">
{{ getConfigValue(configure, 'text', 'Text Component') }}
</ShadcnText>
</template>
</ShadcnDataBuilderEditor>
</template>
<script setup lang="ts">
const getConfigValue = (configure, groupKey, label) => {
if (!configure) {
return null
}
const group = configure.find(g => g.key === groupKey)
if (!group) {
return null
}
const item = group.items?.find(item => item.label === label)
return item?.value
}
</script>数据构建视图
查看代码
vue
<template>
<ShadcnDataBuilderView :width="style.width"
:height="style.height"
:items="items"
:canvas-style="style.canvasStyle">
<template #text="{ configure, isSelected }">
<ShadcnText type="h1" :class="isSelected ? 'text-blue-600' : 'text-gray-900'">
{{ getConfigValue(configure, 'text', 'Text Component') }}
</ShadcnText>
</template>
</ShadcnDataBuilderView>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { fnToFunction } from 'view-shadcn-ui'
const getConfigValue = (configure, groupName, label) => {
if (!configure) {
return null
}
const group = configure.find(g => g.key === groupName)
if (!group) {
return null
}
const item = group.items?.find(item => item.label === label)
return item?.value
}
const style = ref({
'width': 1920,
'height': 1080,
'canvasStyle': { 'backgroundColor': '#ffffff', backgroundImage: 'https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg', opacity: 1 },
'items': [{
'id': 1732028258612,
'type': 'text',
'label': 'Text',
'x': 240,
'y': 120,
'width': 520,
'height': 300,
'zIndex': 1,
'configure': [{
'group': 'Style Group',
'key': 'style',
'items': [{ 'type': 'text', 'label': 'Background Color', 'key': 'backgroundColor', 'description': 'Description', 'value': '#FFF333' },
{ 'type': 'number', 'label': 'Border Radius', 'key': 'borderRadius', 'value': '12', 'min': 0, 'max': 100, 'formatter': '(value) => `${value}px`' }]
}, {
'group': 'Text Group',
'key': 'text',
'items': [{ 'type': 'text', 'label': 'Text Component', 'description': 'This is a long description', 'value': 'Hello, View Shadcn UI' }]
}]
}]
})
const items = computed(() => {
return style.value.items?.map(item => ({
...item,
configure: item.configure?.map(group => ({
...group,
items: group.items?.map(configItem => ({
...configItem,
formatter: typeof configItem.formatter === 'string'
? (fnToFunction(configItem.formatter) ?? (() => undefined))()
: configItem.formatter
}))
}))
}))
})
</script>数据构建 (Data Builder) 属性
WARNING
让我们从一个例子开始：
json
{
type: 'text', label: 'Text', configure: [
{
group: 'Style Group',
key: 'style',
items: [
{ type: 'text', label: 'Background Color', key: 'backgroundColor', description: 'Description', value: '#FFF333' },
{ type: 'number', label: 'Border Radius', key: 'borderRadius', value: '12', min: 0, max: 100, formatter: (value) => `${ value }px` }
]
}
]
}有一个特殊的组 key=style 主要用于样式配置，默认自动生效。
items 中的项配置如下：
- type：组件类型（参考当前支持的所有表单组件）
- label：组件显示的名称
- description：组件显示的描述
有关其他属性，请参阅组件支持的配置。
如果是样式组，则必须配置以下内容才能生效：
- key：对应 CSS 属性的名称
- value：对应 CSS 属性的值
- formatter：用于格式化配置的函数