FlowBL/src/components/DiyEditor/util.ts
2023-10-29 22:03:24 +08:00

60 lines
1.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 }
}