refactor: /src/layout/home 使用script setup语法糖重构

.eslintrc.js

@@ -23,10 +23,11 @@ module.exports = {
     'no-useless-return': 'off',
     'no-unreachable': 'off', // 禁止在 return、throw、continue 和 break 语句后出现不可达代码
     'no-new-object': 'off', // 禁止使用 Object 构造函数
-    "vue/no-v-model-argument": "off",
+    'vue/no-v-model-argument': 'off',
     'no-prototype-builtins': 'off',
     'vue/no-mutating-props': 'off',
-    'vue/script-setup-uses-vars': 'off'
+    'vue/script-setup-uses-vars': 'off',
+    'no-unused-vars': 0,
   },
   parser: 'vue-eslint-parser',
 }

src/layout/home/index.vue

@@ -14,7 +14,7 @@
       </p>
       <div>
         <el-button @click="reloads" type="danger">重置</el-button>
-        <el-button @click="realTimeView.show = true">预览</el-button>
+        <el-button @click="realTimeViewData.show = true">预览</el-button>
         <el-button @click="catJson">查看JSON </el-button>
         <el-button @click="$refs.file.click()">导入JSON </el-button>
         <el-button @click="exportJSON">导出JSON </el-button>
@@ -138,7 +138,7 @@
       </div>
     </section>
     <realTimeView
-      :datas="realTimeView"
+      :datas="realTimeViewData"
       :val="{
         id,
         name: pageSetup.name,
@@ -149,7 +149,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import utils from 'utils/index' // 方法类
 import componentProperties from '@/utils/componentProperties' // 组件数据
 import FileSaver from 'file-saver' // 导出JSON
@@ -157,11 +157,8 @@ import { reactive, watch, toRefs, inject } from 'vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import vuedraggable from 'vuedraggable' //拖拽组件
 
-export default {
-  name: 'home',
-  setup() {
 // 是否显示预览
-    const realTimeView = reactive({ show: false })
+const realTimeViewData = reactive({ show: false })
 
 // 页面数据
 const datas = reactive({
@@ -248,7 +245,7 @@ export default {
   deleShow: true, // 删除标签显示
   index: '', // 当前选中的index
   rightcom: 'decorate', // 右侧组件切换
-      currentproperties: {}, //当前属性
+  currentproperties: datas.pageSetup, // 当前属性  默认：页面设置
   offsetY: 0, //记录上一次距离父元素高度
   onlyOne: ['1-5', '1-16'], // 只能存在一个的组件(组件的type)
   pointer: { show: false }, // 穿透
@@ -286,7 +283,11 @@ export default {
   })
 }
 
-    // 删除组件
+/**
+ * 删除组件
+ *
+ * @param {Number} index 当前组件index
+ */
 const deleteObj = (index) => {
   datas.pageComponents.splice(index, 1)
   if (choose.index === index) choose.rightcom = 'decorate'
@@ -315,10 +316,7 @@ export default {
   // 一个以上的组件计算
   if (datas.pageComponents.length) {
     /* 如果只有一个组件并且第一个是提示组件直接返回 */
-        if (
-          datas.pageComponents.length === 1 &&
-          datas.pageComponents[0].type === 0
-        )
+    if (datas.pageComponents.length === 1 && datas.pageComponents[0].type === 0)
       return
 
     /* 如果鼠标的高度小于第一个的一半直接放到第一个 */
@@ -468,8 +466,7 @@ export default {
     if (res.active === true) res.active = false
     /* 替换提示 */
     choose.index = index
-        if (res.component === 'placementarea')
-          datas.pageComponents[index] = data
+    if (res.component === 'placementarea') datas.pageComponents[index] = data
   })
 
   /* 切换组件 */
@@ -537,25 +534,9 @@ export default {
     }
   }
 )
-    return {
-      realTimeView,
-      ...toRefs(datas),
-      ...toRefs(choose),
-      catJson,
-      componenmanagement,
-      activeComponent,
-      headTop,
-      deleteObj,
-      exportJSON,
-      importJSON,
-      allowDrop,
-      drop,
-      dragleaves,
-      reloads,
-    }
-  },
-  components: { vuedraggable },
-}
+
+const { id, pageSetup, pageComponents } = toRefs(datas)
+const { deleShow, rightcom, currentproperties, pointer } = toRefs(choose)
 </script>
 
 <style lang="less" scoped>