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,14 +157,11 @@ 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({
+// 页面数据
+const datas = reactive({
   id: null, //当前页面id
   pageSetup: {
     // 页面设置属性
@@ -177,10 +174,10 @@ export default {
     bgImg: '', // 背景图片
   },
   pageComponents: [], //页面组件
-    })
+})
 
-    // 查看JSON
-    const catJson = () => {
+// 查看JSON
+const catJson = () => {
   ElMessageBox.alert(
     `{
           <br/>
@@ -201,10 +198,10 @@ export default {
       callback: () => {},
     }
   )
-    }
+}
 
-    // 导出json
-    const exportJSON = () => {
+// 导出json
+const exportJSON = () => {
   // 将json转换成字符串
   const data = JSON.stringify({
     id: datas.id,
@@ -214,10 +211,10 @@ export default {
   })
   const blob = new Blob([data], { type: '' })
   FileSaver.saveAs(blob, `${datas.pageSetup.name}.json`)
-    }
+}
 
-    // 导入json
-    const importJSON = () => {
+// 导入json
+const importJSON = () => {
   const file = document.getElementById('file').files[0]
   const reader = new FileReader()
   reader.readAsText(file)
@@ -232,34 +229,34 @@ export default {
     _this.pageSetup = JSON.parse(ImportJSON.templateJson)
     _this.pageComponents = JSON.parse(ImportJSON.component)
   }
-    }
+}
 
-    /**
+/**
  * 切换组件位置  用于组件管理中删除功能
  *
  * @param {Object} res 组件切换后返回的位置
  */
-    const componenmanagement = (res) => {
+const componenmanagement = (res) => {
   datas.pageComponents = res
-    }
+}
 
-    // 选择组件数据
-    const choose = reactive({
-      deleShow: true, //删除标签显示
-      index: '', //当前选中的index
-      rightcom: 'decorate', //右侧组件切换
-      currentproperties: {}, //当前属性
+// 选择组件数据
+const choose = reactive({
+  deleShow: true, // 删除标签显示
+  index: '', // 当前选中的index
+  rightcom: 'decorate', // 右侧组件切换
+  currentproperties: datas.pageSetup, // 当前属性  默认：页面设置
   offsetY: 0, //记录上一次距离父元素高度
   onlyOne: ['1-5', '1-16'], // 只能存在一个的组件(组件的type)
-      pointer: { show: false }, //穿透
-    })
+  pointer: { show: false }, // 穿透
+})
 
-    /**
+/**
  * 选择组件
  *
  * @param {Object} res 当前组件对象
  */
-    const activeComponent = (res, index) => {
+const activeComponent = (res, index) => {
   choose.index = index
   /* 切换组件 */
   choose.rightcom = res.style
@@ -274,31 +271,35 @@ export default {
 
   /* 选中样式 */
   res.active = true
-    }
+}
 
-    // 切换标题
-    const headTop = () => {
+// 切换标题
+const headTop = () => {
   choose.rightcom = 'decorate'
   /* 替换 */
   datas.pageComponents.forEach((res) => {
     /* 修改选中 */
     if (res.active === true) res.active = false
   })
-    }
+}
 
-    // 删除组件
-    const deleteObj = (index) => {
+/**
+ * 删除组件
+ *
+ * @param {Number} index 当前组件index
+ */
+const deleteObj = (index) => {
   datas.pageComponents.splice(index, 1)
   if (choose.index === index) choose.rightcom = 'decorate'
   if (index < choose.index) choose.index = choose.index - 1
-    }
+}
 
-    /**
+/**
  * 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件
  *
  * @param {Object} event event对象
  */
-    const allowDrop = (event) => {
+const allowDrop = (event) => {
   //阻止浏览器的默认事件
   event.preventDefault()
 
@@ -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
 
     /* 如果鼠标的高度小于第一个的一半直接放到第一个 */
@@ -419,14 +417,14 @@ export default {
       type: 0,
     })
   }
-    }
+}
 
-    /**
+/**
  * 当在有效放置目标上放置元素或选择文本时触发此事件
  *
  * @param {Object} event event对象
  */
-    const drop = (event) => {
+const drop = (event) => {
   /* 获取数据 */
   let data = utils.deepClone(
     componentProperties.get(event.dataTransfer.getData('componentName'))
@@ -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
   })
 
   /* 切换组件 */
@@ -483,23 +480,23 @@ export default {
     choose.currentproperties,
     '----------components data'
   )
-    }
+}
 
-    /**
+/**
  * 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件
  *
  * @param {Object} event event对象
  */
-    const dragleaves = () => {
+const dragleaves = () => {
   /* 删除提示组件 */
   datas.pageComponents = datas.pageComponents.filter(
     (res) => res.component !== 'placementarea'
   )
-    }
+}
 
-    const reload = inject('reload')
-    // 重置
-    const reloads = () => {
+const reload = inject('reload')
+// 重置
+const reloads = () => {
   ElMessageBox.confirm(
     '重置后您添加或者修改的数据将会失效, 是否继续?',
     '提示',
@@ -513,10 +510,10 @@ export default {
       reload()
     })
     .catch(() => {})
-    }
+}
 
-    // 监听右侧属性设置切换
-    watch(
+// 监听右侧属性设置切换
+watch(
   () => choose.rightcom,
   (newval) => {
     if (newval === 'decorate') {
@@ -536,26 +533,10 @@ export default {
       choose.currentproperties = datas.pageComponents
     }
   }
-    )
-    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>