【代码优化】MALL: usePropertyForm 替换为 useVModel 实现 modelValue 代理

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,7 +56,7 @@
 </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'
 
 /** 广告魔方属性面板 */
@@ -64,7 +64,7 @@ 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>

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

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import {
   EMPTY_MENU_SWIPER_ITEM_PROPERTY,
   MenuSwiperProperty
@@ -70,7 +70,7 @@ defineOptions({ name: 'MenuSwiperProperty' })
 
 const props = defineProps<{ modelValue: MenuSwiperProperty }>()
 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/NavigationBar/components/CellProperty.vue

@@ -64,7 +64,7 @@
 
 <script lang="ts" setup>
 import { NavigationBarCellProperty } from '../config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarCellProperty' })
 

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

@@ -66,7 +66,7 @@
 
 <script setup lang="ts">
 import { NavigationBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import NavigationBarCellProperty from '@/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue'
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarProperty' })
@@ -77,7 +77,7 @@ const rules = {
 
 const props = defineProps<{ modelValue: NavigationBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 if (!formData.value._local) {
   formData.value._local = { previewMp: true, previewOther: false }
 }

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

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { NoticeBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' })
 // 表单校验
@@ -40,7 +40,7 @@ const rules = {
 
 const props = defineProps<{ modelValue: NoticeBarProperty }>()
 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/PageConfig/property.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { PageConfigProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'PageConfigProperty' })
 // 表单校验
@@ -28,7 +28,7 @@ const rules = {}
 
 const props = defineProps<{ modelValue: PageConfigProperty }>()
 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/Popover/property.vue

@@ -25,14 +25,14 @@
 
 <script setup lang="ts">
 import { PopoverProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 弹窗广告属性面板
 defineOptions({ name: 'PopoverProperty' })
 
 const props = defineProps<{ modelValue: PopoverProperty }>()
 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/ProductCard/property.vue

@@ -135,7 +135,7 @@
 
 <script setup lang="ts">
 import { ProductCardProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 
 // 商品卡片属性面板
@@ -143,7 +143,7 @@ defineOptions({ name: 'ProductCardProperty' })
 
 const props = defineProps<{ modelValue: ProductCardProperty }>()
 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/ProductList/property.vue

@@ -85,7 +85,7 @@
 
 <script setup lang="ts">
 import { ProductListProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 
 // 商品栏属性面板
@@ -93,7 +93,7 @@ defineOptions({ name: 'ProductListProperty' })
 
 const props = defineProps<{ modelValue: ProductListProperty }>()
 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/PromotionArticle/property.vue

@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { PromotionArticleProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as ArticleApi from '@/api/mall/promotion/article/index'
 
 // 营销文章属性面板
@@ -33,7 +33,7 @@ defineOptions({ name: 'PromotionArticleProperty' })
 
 const props = defineProps<{ modelValue: PromotionArticleProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 // 文章列表
 const articles = ref<ArticleApi.ArticleVO>([])
 

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

@@ -140,7 +140,7 @@
 
 <script setup lang="ts">
 import { PromotionCombinationProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
 import { CommonStatusEnum } from '@/utils/constants'
 import CombinationShowcase from '@/views/mall/promotion/combination/components/CombinationShowcase.vue'
@@ -150,7 +150,7 @@ defineOptions({ name: 'PromotionCombinationProperty' })
 
 const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 // 活动列表
 const activityList = ref<CombinationActivityApi.CombinationActivityVO[]>([])
 onMounted(async () => {

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

@@ -140,7 +140,7 @@
 
 <script lang="ts" setup>
 import { PromotionPointProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import PointShowcase from '@/views/mall/promotion/point/components/PointShowcase.vue'
 
 // 秒杀属性面板
@@ -148,7 +148,7 @@ defineOptions({ name: 'PromotionPointProperty' })
 
 const props = defineProps<{ modelValue: PromotionPointProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -140,7 +140,7 @@
 
 <script setup lang="ts">
 import { PromotionSeckillProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
 import { CommonStatusEnum } from '@/utils/constants'
 import SeckillShowcase from '@/views/mall/promotion/seckill/components/SeckillShowcase.vue'
@@ -150,7 +150,7 @@ defineOptions({ name: 'PromotionSeckillProperty' })
 
 const props = defineProps<{ modelValue: PromotionSeckillProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 // 活动列表
 const activityList = ref<SeckillActivityApi.SeckillActivityVO[]>([])
 onMounted(async () => {

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

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
 
 /** 搜索框属性面板 */
@@ -67,7 +67,7 @@ defineOptions({ name: 'SearchProperty' })
 
 const props = defineProps<{ modelValue: SearchProperty }>()
 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/TabBar/property.vue

@@ -80,13 +80,13 @@
 
 <script setup lang="ts">
 import { TabBarProperty, component, THEME_LIST } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 底部导航栏
 defineOptions({ name: 'TabBarProperty' })
 
 const props = defineProps<{ modelValue: TabBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 将数据库的值更新到右侧属性栏
 component.property.items = formData.value.items

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

@@ -101,13 +101,13 @@
 </template>
 <script lang="ts" setup>
 import { TitleBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' })
 
 const props = defineProps<{ modelValue: TitleBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 表单校验
 const rules = {}

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

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserCardProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户卡片属性面板
 defineOptions({ name: 'UserCardProperty' })
 
 const props = defineProps<{ modelValue: UserCardProperty }>()
 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/UserCoupon/property.vue

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserCouponProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户卡券属性面板
 defineOptions({ name: 'UserCouponProperty' })
 
 const props = defineProps<{ modelValue: UserCouponProperty }>()
 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/UserOrder/property.vue

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserOrderProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户订单属性面板
 defineOptions({ name: 'UserOrderProperty' })
 
 const props = defineProps<{ modelValue: UserOrderProperty }>()
 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/UserWallet/property.vue

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserWalletProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户资产属性面板
 defineOptions({ name: 'UserWalletProperty' })
 
 const props = defineProps<{ modelValue: UserWalletProperty }>()
 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/VideoPlayer/property.vue

@@ -42,14 +42,14 @@
 
 <script setup lang="ts">
 import { VideoPlayerProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' })
 
 const props = defineProps<{ modelValue: VideoPlayerProperty }>()
 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/util.ts

@@ -1,4 +1,3 @@
-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'
@@ -78,34 +77,6 @@ export interface PageConfig {
 // 页面组件，只保留组件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 } as { formData: Ref<T> }
-}
-
 // 页面组件库
 export const PAGE_LIBS = [
   {

src/components/Draggable/index.vue

@@ -13,9 +13,16 @@
         class="mb-4px flex flex-col gap-4px border border-gray-2 border-rounded rounded border-solid p-8px"
       >
         <!-- 操作按钮区 -->
-        <div class="m--8px m-b-4px flex flex-row items-center justify-between p-8px" style="background-color: var(--app-content-bg-color);">
+        <div
+          class="m--8px m-b-4px flex flex-row items-center justify-between p-8px"
+          style="background-color: var(--app-content-bg-color)"
+        >
           <el-tooltip content="拖动排序">
-            <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" style="color: #8a909c;" />
+            <Icon
+              icon="ic:round-drag-indicator"
+              class="drag-icon cursor-move"
+              style="color: #8a909c"
+            />
           </el-tooltip>
           <el-tooltip content="删除">
             <Icon
@@ -47,7 +54,7 @@
 <script setup lang="ts">
 // 拖拽组件
 import VueDraggable from 'vuedraggable'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { any, array } from 'vue-types'
 import { propTypes } from '@/utils/propTypes'
 import { cloneDeep } from 'lodash-es'
@@ -66,7 +73,7 @@ const props = defineProps({
 })
 // 定义事件
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 处理添加
 const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {}))