60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { ref, Ref } from 'vue'
|
||
import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/PageConfig/config'
|
||
import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
|
||
import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
|
||
|
||
export interface DiyComponent<T> {
|
||
id: string
|
||
name: string
|
||
icon: string
|
||
property: T
|
||
}
|
||
|
||
export interface DiyComponentLibrary {
|
||
name: string
|
||
extended: boolean
|
||
components: string[]
|
||
}
|
||
|
||
// 页面配置
|
||
export interface PageConfig {
|
||
// 页面属性
|
||
page: PageConfigProperty
|
||
// 顶部导航栏属性
|
||
navigationBar: NavigationBarProperty
|
||
// 底部导航菜单属性
|
||
tabBar: TabBarProperty
|
||
// 页面组件列表
|
||
components: PageComponent[]
|
||
}
|
||
// 页面组件,只保留组件ID,组件属性
|
||
export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> {}
|
||
|
||
// 属性表单监听
|
||
export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: Ref<T> } {
|
||
const formData = ref<T>()
|
||
// 监听属性数据变动
|
||
watch(
|
||
() => modelValue,
|
||
() => {
|
||
formData.value = modelValue
|
||
},
|
||
{
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
)
|
||
// 监听表单数据变动
|
||
watch(
|
||
() => formData.value,
|
||
() => {
|
||
emit('update:modelValue', formData.value)
|
||
},
|
||
{
|
||
deep: true
|
||
}
|
||
)
|
||
|
||
return { formData }
|
||
}
|