3.0.3（2022.03.02）更新：

1. 修复Pad/H5布局预览的样式显示问题； 2. 修复升级新版element-plus后事件代码编辑弹窗无法显示的问题； 3. 修复provide传递的formConfig属性不能获取最新值的问题，改用provide函数实现； 4. element-plus版本升级到2.0.4。
2025-10-31 08:41:49 +08:00 · 2022-03-02 18:26:55 +08:00
parent 8766345ceb
commit 471c979abb
29 changed files with 155 additions and 154 deletions
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
    "axios": "^0.24.0",
    "clipboard": "^2.0.8",
    "core-js": "^3.6.5",
-    "element-plus": "^1.3.0-beta.9",
+    "element-plus": "^2.0.4",
    "file-saver": "^2.0.5",
    "mitt": "^3.0.0",
    "sortablejs": "1.14.0",
--- a/src/components/form-designer/form-widget/container-widget/containerMixin.js
+++ b/src/components/form-designer/form-widget/container-widget/containerMixin.js
@@ -1,4 +1,13 @@
 export default {
+  inject: ['getFormConfig'],
+
+  computed: {
+    formConfig() {
+      return this.getFormConfig()
+    },
+
+  },
+
  methods: {
    appendTableRow(widget) {
      this.designer.appendTableRow(widget)
--- a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
@@ -55,7 +55,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
@@ -58,7 +58,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/color-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/color-widget.vue
@@ -49,7 +49,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
@@ -56,7 +56,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/date-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/date-widget.vue
@@ -54,7 +54,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@@ -3,9 +3,13 @@ import FormValidators from '@/utils/validators'
 import eventBus from "@/utils/event-bus"

 export default {
-  inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
+  inject: ['refList', 'getFormConfig', 'globalOptionData', 'globalModel', 'getOptionData'],

  computed: {
+    formConfig() {
+      return this.getFormConfig()
+    },
+
    widgetSize() {
      return this.field.options.size || 'default'
    },
--- a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
@@ -77,7 +77,6 @@
      SvgIcon,
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
+++ b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
@@ -93,8 +93,12 @@

      rules: Array,
    },
-    inject: ['formConfig'],
+    inject: ['getFormConfig'],
    computed: {
+      formConfig() {
+        return this.getFormConfig()
+      },
+
      selected() {
        return !!this.designer && this.field.id === this.designer.selectedId
      },
--- a/src/components/form-designer/form-widget/field-widget/input-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/input-widget.vue
@@ -61,7 +61,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/number-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/number-widget.vue
@@ -53,7 +53,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
@@ -60,7 +60,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
@@ -180,8 +179,12 @@
      handlePictureRemove(file, fileList) {
        this.fileList = deepClone(fileList)  //this.fileList = fileList
        this.updateUploadFieldModelAndEmitDataChange(fileList)
-
        this.uploadBtnHidden = fileList.length >= this.field.options.limit
+
+        if (!!this.field.options.onFileRemove) {
+          let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
+          customFn.call(this, file, fileList)
+        }
      },

      handelUploadError(err, file, fileList) {
--- a/src/components/form-designer/form-widget/field-widget/radio-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/radio-widget.vue
@@ -58,7 +58,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/rate-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/rate-widget.vue
@@ -52,7 +52,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
@@ -71,7 +71,6 @@
      // }
      quillEditor,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/select-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/select-widget.vue
@@ -61,7 +61,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/slider-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/slider-widget.vue
@@ -50,7 +50,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/switch-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/switch-widget.vue
@@ -51,7 +51,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/textarea-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/textarea-widget.vue
@@ -53,7 +53,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
@@ -57,7 +57,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/field-widget/time-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/time-widget.vue
@@ -54,7 +54,6 @@
    components: {
      FormItemWrapper,
    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
    data() {
      return {
        oldFieldValue: null, //field组件change之前的值
--- a/src/components/form-designer/form-widget/index.vue
+++ b/src/components/form-designer/form-widget/index.vue
@@ -53,7 +53,7 @@
    provide() {
      return {
        refList: this.widgetRefList,
-        formConfig: this.formConfig,
+        getFormConfig: () => this.formConfig,  /* 解决provide传递formConfig属性的响应式更新问题！！ */
        globalOptionData: this.optionData,
        getOptionData: () => this.optionData,
        globalModel: {
@@ -172,7 +172,6 @@

 <style lang="scss" scoped>
  .container-scroll-bar {
-
    :deep(.el-scrollbar__wrap), :deep(.el-scrollbar__view) {
      overflow-x: hidden;
    }
@@ -186,14 +185,6 @@
    overflow-y: auto;

    .el-form.full-height-width {
-      /*
-      margin: 0 auto;
-      width: 420px;
-      border-radius: 15px;
-      //border-width: 10px;
-      box-shadow: 0 0 1px 10px #495060;
-      */
-
      height: 100%;
      padding: 3px;
      background: #ffffff;
--- a/src/components/form-designer/setting-panel/index.vue
+++ b/src/components/form-designer/setting-panel/index.vue
@@ -180,14 +180,6 @@

    },
    created() {
-      // eventBus.$on('editEventHandler', (eventName, eventParams) => {
-      //   this.editEventHandler(eventName, eventParams)
-      // })
-
-      // eventBus.$on('editEventHandler', (eventParams) => {
-      //   this.editEventHandler(eventParams[0], eventParams[1])
-      // })
-
      this.on$('editEventHandler', (eventParams) => {
        //debugger
        this.editEventHandler(eventParams[0], eventParams[1])
--- a/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
@@ -7,7 +7,6 @@ export default {
  methods: {
    editEventHandler(eventName, eventParams) {
      this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
-      // eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
    },

  }
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@@ -44,9 +44,10 @@
    <div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
      <el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
                 :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
-                 :destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
+                 :destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%"
+                 :fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
        <div>
-          <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']">
+          <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
            <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
                         :option-data="testOptionData"
                         @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@@ -705,7 +706,7 @@

  .form-render-wrapper {
    //height: calc(100vh - 142px);
-    all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
+    //all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
  }

  .form-render-wrapper.h5-layout {
@@ -714,7 +715,16 @@
    border-radius: 15px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
-    height: calc(100vh - 142px);
+    height: calc(100vh - 175px);
+  }
+
+  .form-render-wrapper.pad-layout {
+    margin: 0 auto;
+    width: 960px;
+    border-radius: 15px;
+    //border-width: 10px;
+    box-shadow: 0 0 1px 10px #495060;
+    height: calc(100vh - 175px);
  }

  .node-tree-drawer {
--- a/src/components/form-render/container-item/grid-col-item.vue
+++ b/src/components/form-render/container-item/grid-col-item.vue
@@ -55,7 +55,7 @@
      },

    },
-    inject: ['refList', 'globalModel', 'formConfig', 'previewState'],
+    inject: ['refList', 'globalModel', 'getFormConfig', 'previewState'],
    data() {
      return {
        layoutProps: {
@@ -70,6 +70,10 @@
      }
    },
    computed: {
+      formConfig() {
+        return this.getFormConfig()
+      },
+
      customClass() {
        return this.widget.options.customClass || ''
      },
--- a/src/components/form-render/index.vue
+++ b/src/components/form-render/index.vue
@@ -73,7 +73,7 @@
      return {
        refList: this.widgetRefList,
        sfRefList: this.subFormRefList,  //收集SubForm引用
-        formConfig: this.formConfig,
+        getFormConfig: () => this.formJsonObj.formConfig,  /* 解决provide传递formConfig属性的响应式更新问题！！ */
        globalOptionData: this.optionData,
        getOptionData: () => this.optionData,  /* 该方法用于在异步更新option-data之后重新获取到最新值 */
        globalModel: {
@@ -357,7 +357,6 @@
            this.buildFormModel(newFormJsonObj.widgetList)

            this.formJsonObj['formConfig'] = newFormJsonObj.formConfig
-            // this._provided.formConfig = newFormJsonObj.formConfig  //强制更新provide的formConfig对象
            this.formJsonObj['widgetList'] = newFormJsonObj.widgetList

            this.$nextTick(() => {
--- a/src/utils/directive.js
+++ b/src/utils/directive.js
@@ -11,139 +11,142 @@ export function addDirective(app) {
    mounted(el, binding) {
      if (!binding.value) return false;

-      const dragDom = document.querySelector(binding.value[0])
-      const dragHeader = document.querySelector(binding.value[1])
+      binding.instance.$nextTick(() => {
+        const dragDom = document.querySelector(binding.value[0])
+        const dragHeader = document.querySelector(binding.value[1])

-      dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
+        dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);

-      function down(e, type) {
-        // 鼠标按下，计算当前元素距离可视区的距离
-        const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
-        const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
+        function down(e, type) {
+          // 鼠标按下，计算当前元素距离可视区的距离
+          const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
+          const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;

-        // body当前宽度
-        const screenWidth = document.body.clientWidth;
-        // 可见区域高度(应为body高度，可某些环境下无法获取)
-        const screenHeight = document.documentElement.clientHeight;
+          // body当前宽度
+          const screenWidth = document.body.clientWidth;
+          // 可见区域高度(应为body高度，可某些环境下无法获取)
+          const screenHeight = document.documentElement.clientHeight;

-        // 对话框宽度
-        const dragDomWidth = dragDom.offsetWidth;
-        // 对话框高度
-        const dragDomheight = dragDom.offsetHeight;
+          // 对话框宽度
+          const dragDomWidth = dragDom.offsetWidth;
+          // 对话框高度
+          const dragDomheight = dragDom.offsetHeight;

-        const minDragDomLeft = dragDom.offsetLeft;
-        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+          const minDragDomLeft = dragDom.offsetLeft;
+          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

-        const minDragDomTop = dragDom.offsetTop;
-        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+          const minDragDomTop = dragDom.offsetTop;
+          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;

-        // 获取到的值带px 正则匹配替换
-        let styL = getComputedStyle(dragDom).left;
-        let styT = getComputedStyle(dragDom).top;
+          // 获取到的值带px 正则匹配替换
+          let styL = getComputedStyle(dragDom).left;
+          let styT = getComputedStyle(dragDom).top;

-        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-        if (styL.includes('%')) {
-          styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100);
-          styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100);
-        } else {
-          styL = +styL.replace(/\px/g, '');
-          styT = +styT.replace(/\px/g, '');
+          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+          if (styL.includes('%')) {
+            styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100);
+            styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100);
+          } else {
+            styL = +styL.replace(/\px/g, '');
+            styT = +styT.replace(/\px/g, '');
+          }
+
+          return {
+            disX,
+            disY,
+            minDragDomLeft,
+            maxDragDomLeft,
+            minDragDomTop,
+            maxDragDomTop,
+            styL,
+            styT,
+          };
        }

-        return {
-          disX,
-          disY,
-          minDragDomLeft,
-          maxDragDomLeft,
-          minDragDomTop,
-          maxDragDomTop,
-          styL,
-          styT,
-        };
-      }
+        function move(e, type, obj) {
+          let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;

-      function move(e, type, obj) {
-        let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
+          // 通过事件委托，计算移动的距离
+          let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
+          let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;

-        // 通过事件委托，计算移动的距离
-        let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
-        let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;
+          // 边界处理
+          if (-left > minDragDomLeft) {
+            left = -minDragDomLeft;
+          } else if (left > maxDragDomLeft) {
+            left = maxDragDomLeft;
+          }

-        // 边界处理
-        if (-left > minDragDomLeft) {
-          left = -minDragDomLeft;
-        } else if (left > maxDragDomLeft) {
-          left = maxDragDomLeft;
+          if (-top > minDragDomTop) {
+            top = -minDragDomTop;
+          } else if (top > maxDragDomTop) {
+            top = maxDragDomTop;
+          }
+
+          // 移动当前元素
+          dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
        }

-        if (-top > minDragDomTop) {
-          top = -minDragDomTop;
-        } else if (top > maxDragDomTop) {
-          top = maxDragDomTop;
-        }
+        /**
+         * pc端
+         * onmousedown 鼠标按下触发事件
+         * onmousemove 鼠标按下时持续触发事件
+         * onmouseup 鼠标抬起触发事件
+         */
+        dragHeader.onmousedown = (e) => {
+          const obj = down(e, 'pc');
+          document.onmousemove = (e) => {
+            move(e, 'pc', obj);
+          };
+          document.onmouseup = () => {
+            document.onmousemove = null;
+            document.onmouseup = null;
+          };
+        };

-        // 移动当前元素
-        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
-      }
-
-      /**
-       * pc端
-       * onmousedown 鼠标按下触发事件
-       * onmousemove 鼠标按下时持续触发事件
-       * onmouseup 鼠标抬起触发事件
-       */
-      dragHeader.onmousedown = (e) => {
-        const obj = down(e, 'pc');
-        document.onmousemove = (e) => {
-          move(e, 'pc', obj);
+        /**
+         * 移动端
+         * ontouchstart 当按下手指时，触发ontouchstart
+         * ontouchmove 当移动手指时，触发ontouchmove
+         * ontouchend 当移走手指时，触发ontouchend
+         */
+        dragHeader.ontouchstart = (e) => {
+          const obj = down(e, 'app');
+          document.ontouchmove = (e) => {
+            move(e, 'app', obj);
+          };
+          document.ontouchend = () => {
+            document.ontouchmove = null;
+            document.ontouchend = null;
+          };
        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-          document.onmouseup = null;
-        };
-      };
-
-      /**
-       * 移动端
-       * ontouchstart 当按下手指时，触发ontouchstart
-       * ontouchmove 当移动手指时，触发ontouchmove
-       * ontouchend 当移走手指时，触发ontouchend
-       */
-      dragHeader.ontouchstart = (e) => {
-        const obj = down(e, 'app');
-        document.ontouchmove = (e) => {
-          move(e, 'app', obj);
-        };
-        document.ontouchend = () => {
-          document.ontouchmove = null;
-          document.ontouchend = null;
-        };
-      };
+      })
    },
  })

  // v-dialogDragWidth: 弹窗宽度拖大 拖小
  app.directive('dialogDragWidth', {
    mounted(el, binding) {
-      const dragDom = binding.value.$el.querySelector('.el-dialog')
+      binding.instance.$nextTick(() => {
+        const dragDom = binding.value.$el.querySelector('.el-dialog')
+        el.onmousedown = (e) => {
+          // 鼠标按下，计算当前元素距离可视区的距离
+          const disX = e.clientX - el.offsetLeft

-      el.onmousedown = (e) => {
-        // 鼠标按下，计算当前元素距离可视区的距离
-        const disX = e.clientX - el.offsetLeft
+          document.onmousemove = function(e) {
+            e.preventDefault() // 移动时禁用默认事件

-        document.onmousemove = function(e) {
-          e.preventDefault() // 移动时禁用默认事件
+            // 通过事件委托，计算移动的距离
+            const l = e.clientX - disX
+            dragDom.style.width = `${l}px`
+          }

-          // 通过事件委托，计算移动的距离
-          const l = e.clientX - disX
-          dragDom.style.width = `${l}px`
+          document.onmouseup = function(e) {
+            document.onmousemove = null
+            document.onmouseup = null
+          }
        }
-
-        document.onmouseup = function(e) {
-          document.onmousemove = null
-          document.onmouseup = null
-        }
-      }
+      })
    }
  })