util.ts 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import { ref, Ref } from 'vue'
  2. import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/PageConfig/config'
  3. import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
  4. import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
  5. export interface DiyComponent<T> {
  6. id: string
  7. name: string
  8. icon: string
  9. property: T
  10. }
  11. export interface DiyComponentLibrary {
  12. name: string
  13. extended: boolean
  14. components: string[]
  15. }
  16. // 页面配置
  17. export interface PageConfig {
  18. // 页面属性
  19. page: PageConfigProperty
  20. // 顶部导航栏属性
  21. navigationBar: NavigationBarProperty
  22. // 底部导航菜单属性
  23. tabBar: TabBarProperty
  24. // 页面组件列表
  25. components: PageComponent[]
  26. }
  27. // 页面组件,只保留组件ID,组件属性
  28. export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> {}
  29. // 属性表单监听
  30. export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: Ref<T> } {
  31. const formData = ref<T>()
  32. // 监听属性数据变动
  33. watch(
  34. () => modelValue,
  35. () => {
  36. formData.value = modelValue
  37. },
  38. {
  39. deep: true,
  40. immediate: true
  41. }
  42. )
  43. // 监听表单数据变动
  44. watch(
  45. () => formData.value,
  46. () => {
  47. emit('update:modelValue', formData.value)
  48. },
  49. {
  50. deep: true
  51. }
  52. )
  53. return { formData }
  54. }