!664 【代码优化】MALL: 修复模板装修时组件属性响应式丢失的问题

Merge pull request !664 from puhui999/dev

Author: YunaiV

src/components/DiyEditor/components/ComponentContainerProperty.vue

@@ -51,7 +51,8 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentStyle, usePropertyForm } from '@/components/DiyEditor/util'
+import { ComponentStyle } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 /**
  * 组件容器属性：目前右边部分
@@ -61,7 +62,7 @@ defineOptions({ name: 'ComponentContainer' })
 
 const props = defineProps<{ modelValue: ComponentStyle }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 const treeData = [
   {

src/components/DiyEditor/components/mobile/Carousel/property.vue

@@ -93,14 +93,14 @@
 
 <script setup lang="ts">
 import { CarouselProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' })
 
 const props = defineProps<{ modelValue: CarouselProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/CouponCard/property.vue

@@ -73,7 +73,7 @@
 
 <script setup lang="ts">
 import { CouponCardProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
 import { floatToFixed2 } from '@/utils'
 import { PromotionDiscountTypeEnum } from '@/utils/constants'
@@ -84,7 +84,7 @@ defineOptions({ name: 'CouponCardProperty' })
 
 const props = defineProps<{ modelValue: CouponCardProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 优惠券列表
 const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])

src/components/DiyEditor/components/mobile/Divider/property.vue

@@ -45,12 +45,12 @@
 
 <script setup lang="ts">
 import { DividerProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'DividerProperty' })
 const props = defineProps<{ modelValue: DividerProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 //线类型
 const BORDER_TYPES = [

src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue

@@ -31,14 +31,14 @@
 
 <script setup lang="ts">
 import { FloatingActionButtonProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 悬浮按钮属性面板
 defineOptions({ name: 'FloatingActionButtonProperty' })
 
 const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/HotZone/property.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { HotZoneProperty } from '@/components/DiyEditor/components/mobile/HotZone/config'
 import HotZoneEditDialog from './components/HotZoneEditDialog/index.vue'
 
@@ -29,7 +29,7 @@ defineOptions({ name: 'HotZoneProperty' })
 
 const props = defineProps<{ modelValue: HotZoneProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 热区编辑对话框
 const editDialogRef = ref()

src/components/DiyEditor/components/mobile/ImageBar/property.vue

@@ -21,14 +21,14 @@
 
 <script setup lang="ts">
 import { ImageBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' })
 
 const props = defineProps<{ modelValue: ImageBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/MagicCube/property.vue

@@ -56,15 +56,15 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
 
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' })
 
 const props = defineProps<{ modelValue: MagicCubeProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 选中的热区
 const selectedHotAreaIndex = ref(-1)

src/components/DiyEditor/components/mobile/MenuGrid/property.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import {
   EMPTY_MENU_GRID_ITEM_PROPERTY,
   MenuGridProperty
@@ -59,7 +59,7 @@ defineOptions({ name: 'MenuGridProperty' })
 
 const props = defineProps<{ modelValue: MenuGridProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/MenuList/property.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import {
   EMPTY_MENU_LIST_ITEM_PROPERTY,
   MenuListProperty
@@ -39,7 +39,7 @@ defineOptions({ name: 'MenuListProperty' })
 
 const props = defineProps<{ modelValue: MenuListProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>