修改模态框

examples/modal/src/ModalExample.vue

@@ -2,14 +2,14 @@
   <div>
     <h1>模态框</h1>
     <button class="btn btn-default" @click="show">显示</button>
-    <Modal ref="modal" title="hello">
+    <Modal v-model:show="modal" title="hello">
       <div>hello</div>
     </Modal>
 
     
     <h1>模态框-标题+内容+结尾</h1>
     <button class="btn btn-default" @click="show1">显示</button>
-    <Modal ref="modal1" title="hello" :show-canel-button="false" :show-ok-button="false">
+    <Modal v-model:show="modal1" title="hello" :show-canel-button="false" :show-ok-button="false">
       <template #header>
         标题
       </template>
@@ -34,7 +34,8 @@ export default {
   },
   data: function(){
     return {
-
+      modal: false,
+      modal1: false,
     };
   },
 
@@ -44,10 +45,10 @@ export default {
 
   methods: {
     show: function(){
-      this.$refs.modal.showModal();
+      this.modal = true;
     },
     show1: function(){
-      this.$refs.modal1.showModal();
+      this.modal1 = true;
     },
   },
 };

packages/image-preview/src/ImagePreview.vue

@@ -2,7 +2,7 @@
 
 <template>
   <Modal
-    ref="modal"
+    v-model:show="modal"
     :large="true"
   >
     <div class="modal-img-box">
@@ -45,6 +45,7 @@ export default {
   data: function () {
     return {
       'src': null,
+      modal: false,
     };
   },
 
@@ -54,7 +55,7 @@ export default {
          */
     preview: function (className, imageName) {
       if (imageName != null && imageName != '') {
-        this.$refs.modal.show = true;
+        this.modal = true;
         this.src = Common.getImageSrc(className, imageName);
       }
     },
@@ -63,7 +64,7 @@ export default {
          * 预览图片
          */
     previewImage: function (imageName) {
-      this.$refs.modal.show = true;
+      this.modal = true;
       this.src = imageName;
     },
   },

packages/info/src/InfoMultiSearchWidget.vue

@@ -22,7 +22,7 @@
       />
     </div>
     <Modal
-      ref="modal"
+      v-model:show="modal"
       :full="true"
       @ok="searchDialogOk"
       @cancel="searchDialogCancel"
@@ -88,6 +88,7 @@ export default {
       selectIndex: -1,
       selectedDatas: [],
       loading: false,
+      modal: false,
     };
   },
 
@@ -110,9 +111,9 @@ export default {
     // 显示搜索对话框
     showSearchDialog: function () {
       var _self = this;
-      _self.$refs.modal.showModal();
+      _self.modal=true;
       _self.$nextTick(function () {
-        _self.$refs.modal.showModal();
+        _self.modal=true;
         if (this.$refs.info) {
           _self.$refs.info.refresh();
         }

packages/info/src/InfoSearchWidget.vue

@@ -20,7 +20,7 @@
       <span class="glyphicon glyphicon-search" />
     </span>
     <Modal
-      ref="modal"
+      v-model:show="modal"
       :full="true"
       @ok="searchDialogOk"
       @cancel="searchDialogCancel"
@@ -107,6 +107,7 @@ export default {
       leftPosition: 0,
       showSubInfoWindow: false,	// 显示子查询窗口
       loading: false,
+      modal: false,
     };
   },
 
@@ -196,9 +197,7 @@ export default {
     // 显示搜索对话框
     showSearchDialog: function () {
       var _self = this;
-      console.log(this.$refs.modal);
-      this.$refs.modal.showModal();
-      this.showSubInfoWindow = true;
+      this.modal=true;
 
       _self.$refs.autoComplete.hide();
 
@@ -245,7 +244,7 @@ export default {
     // 数据已经选择
     dataSelected: function (modelData) {
       var _self = this;
-      this.$refs.modal.hideModal();
+      this.modal=false;
 
       _self.$refs.autoComplete.hide();
 

packages/info/src/QueryPage.vue

@@ -159,7 +159,7 @@
       </div>
     </div>
     <Loading v-if="loading" />
-    <Modal ref="modal">
+    <Modal v-model:show="modal">
       <template #default>
         <ProcessReportResult
           :process-report-result="processReportResult"
@@ -272,6 +272,7 @@ export default {
       // 表格外面的DIV的id
       tableOutDivId: Uuid.createUUID(),
       loading: false,
+      modal: false,
     };
   },
   computed: {
@@ -728,7 +729,7 @@ export default {
               _self.excelOnly = successData.excelOnly;
             }
             ProcessReportResource.runProcessByIds(infoButton.processReportNo, ids).then(successData => {
-              _self.$refs.modal.show = true;
+              _self.modal = true;
               _self.loading=false;
               _self.processReportResult = successData;
               _self.$emit('processExecuteFinish');

packages/info/src/QueryPageImage.vue

@@ -15,7 +15,7 @@
       </template>
     </span>
     <Modal
-      ref="fullImage"
+      v-model:show="modal"
       full="true"
       :title="$t('lang.QueryPageImage.viewPicture')"
       :show-ok-button="false"
@@ -71,6 +71,7 @@ export default {
     return {
       images: [],
       selectedImage: '',
+      modal: false,
     };
   },
   watch: {
@@ -96,7 +97,7 @@ export default {
   methods: {
     showImage: function (item) {
       this.selectedImage = item;
-      this.$refs.fullImage.show = true;
+      this.modal = true;
     },
     /**
            * 获取图片地址

packages/info/src/SearchWidget.vue

@@ -28,7 +28,7 @@
     </div>
 
     <Modal
-      ref="modal"
+      v-model:show="modal"
       :full="true"
       @ok="searchDialogOk"
       @cancel="searchDialogCancel"
@@ -141,6 +141,7 @@ export default {
       searchText: inputSearchText,
       leftPosition: 0,
       loading: false,
+      modal: false,
     };
   },
 
@@ -236,8 +237,7 @@ export default {
         return;
       }
 
-      console.log(this.$refs.modal);
-      this.$refs.modal.showModal();
+      this.modal=true;
 
       _self.$refs.autoComplete.hide();
 
@@ -280,7 +280,7 @@ export default {
     // 数据已经选择
     dataSelected: function (modelData) {
       var _self = this;
-      this.$refs.modal.hideModal();
+      this.modal=false;
 
       _self.$refs.autoComplete.hide();
 

packages/modal/src/Modal.vue

@@ -1,60 +1,62 @@
 <template>
-  <div
-    v-show="show"
-    :transition="transition"
-  >
+  <teleport to="body">
     <div
-      class="modal"
-      @click.self="clickMask"
+      v-if="show"
+      :transition="transition"
     >
       <div
-        class="modal-dialog"
-        :class="modalClass"
-        name="dialog"
+        class="modal"
+        @click.self="clickMask"
       >
-        <div class="modal-content">
-          <!--Header-->
-          <div class="modal-header">
-            <a
-              type="button"
-              class="close"
-              @click="cancel"
-            >x</a>
-            <h4 class="modal-title">
-              <slot name="header">
-                {{ title }}
-              </slot>
-            </h4>
-          </div>
-          <!--Container-->
-          <div class="modal-body">
-            <slot />
-          </div>
-          <!--Footer-->
-          <div class="modal-footer">
-            <button
-              v-if="showCanelButton"
-              type="button"
-              class="btn btn-info"
-              @click="cancel"
-            >
-              {{ cancelText }}
-            </button>
-            <button
-              v-if="showOkButton"
-              type="button"
-              class="btn btn-primary"
-              @click="ok"
-            >
-              {{ okText }}
-            </button>
-            <slot name="footer" />
+        <div
+          class="modal-dialog"
+          :class="modalClass"
+          name="dialog"
+        >
+          <div class="modal-content">
+            <!--Header-->
+            <div class="modal-header">
+              <a
+                type="button"
+                class="close"
+                @click="cancel"
+              >x</a>
+              <h4 class="modal-title">
+                <slot name="header">
+                  {{ title }}
+                </slot>
+              </h4>
+            </div>
+            <!--Container-->
+            <div class="modal-body">
+              <slot />
+            </div>
+            <!--Footer-->
+            <div class="modal-footer">
+              <button
+                v-if="showCanelButton"
+                type="button"
+                class="btn btn-info"
+                @click="cancel"
+              >
+                {{ cancelText }}
+              </button>
+              <button
+                v-if="showOkButton"
+                type="button"
+                class="btn btn-primary"
+                @click="ok"
+              >
+                {{ okText }}
+              </button>
+              <slot name="footer" />
+            </div>
           </div>
         </div>
       </div>
+      <div class="modal-backdrop in" />
     </div>
-    <div class="modal-backdrop in" />
-  </div>
+  </teleport>
 </template>
 
 <script>
@@ -65,6 +67,13 @@ export default {
   // eslint-disable-next-line
     name: 'Modal',
   props: {
+    /**
+     * 是否显示模态框
+     */
+    show: {
+      type: Boolean,
+      default: false,
+    },
     title: {
       type: String,
       default: '',
@@ -103,11 +112,10 @@ export default {
     },
   },
 
-  emits: ['ok', 'cancel', 'close'],
+  emits: ['ok', 'cancel', 'close', 'update:show'],
 
   data: function () {
     return {
-      show: false,
       okText: '确定',
       cancelText: '取消',
       closeText: '关闭',
@@ -154,7 +162,7 @@ export default {
   methods: {
     ok: function () {
       this.$emit('ok');
-      this.show = false;
+      this.$emit('update:show', false);
       this.$nextTick(function () {
         ModalFix.fix();
       });
@@ -162,7 +170,7 @@ export default {
 
     cancel: function () {
       this.$emit('cancel');
-      this.show = false;
+      this.$emit('update:show', false);
       this.$nextTick(function () {
         ModalFix.fix();
       });
@@ -170,7 +178,7 @@ export default {
 
     close: function () {
       this.$emit('close');
-      this.show = false;
+      this.$emit('update:show', false);
       this.$nextTick(function () {
         ModalFix.fix();
       });
@@ -185,20 +193,6 @@ export default {
         });
       }
     },
-
-    /**
-             * 显示
-             */
-    showModal: function () {
-      this.show = true;
-    },
-
-    /**
-             * 隐藏
-             */
-    hideModal: function () {
-      this.show = false;
-    },
   },
 };
 </script>

packages/print/src/PrintEpc.vue

@@ -6,7 +6,7 @@
   <div>
     <!-- 打印结果模态框 -->
     <Modal
-      ref="printResultModal"
+      v-model:show="modal"
       title="发卡机发卡"
     >
       <div
@@ -60,7 +60,7 @@
       <button
         type="button"
         class="btn btn-danger"
-        @click="$refs.printResultModal.show = false"
+        @click="modal = false"
       >
         关闭
       </button>
@@ -102,6 +102,7 @@ export default {
         epc: '',        // 打印的EPC
       },
       loading: false,
+      modal: false,
     };
   },
 
@@ -118,7 +119,7 @@ export default {
         this.printResult.success = false;
         this.printResult.message = '无可打印的数据。';
 
-        this.$refs.printResultModal.show = true;
+        this.modal = true;
         return;
       }
 
@@ -127,7 +128,7 @@ export default {
         this.printResult.success = false;
         this.printResult.message = '使用发卡机发卡，每次只能发一个标签，打印程序收到了' + printPages.length + '个标签数据。';
 
-        this.$refs.printResultModal.show = true;
+        this.modal = true;
         return;
       }
 
@@ -151,7 +152,7 @@ export default {
     printSingleEpc: function (epc) {
       let _self = this;
 
-      _self.$refs.printResultModal.show = false;
+      _self.modal = false;
 
       let promise = PrintEpcUtil.printSingleEpc(this.printerName, epc);
 
@@ -161,14 +162,14 @@ export default {
         if (successData.success == false) {
           successData.command = 'write';
           _self.printResult = successData;
-          _self.$refs.printResultModal.show = true;
+          _self.modal = true;
         }
       }, errorData => {
         _self.loading=false;
         if (errorData.success == false) {
           errorData.command = 'write';
           _self.printResult = errorData;
-          _self.$refs.printResultModal.show = true;
+          _self.modal = true;
         }
       });
     },
@@ -179,18 +180,18 @@ export default {
     restoreEpc: function () {
       let _self = this;
 
-      _self.$refs.printResultModal.show = true;
+      _self.modal = true;
 
       let promise = PrintEpcUtil.resetTag(this.printerName);
 
       promise.then(successData => {
         successData.command = 'restore';
         _self.printResult = successData;
-        _self.$refs.printResultModal.show = true;
+        _self.modal = true;
       }, errorData => {
         errorData.command = 'restore';
         _self.printResult = errorData;
-        _self.$refs.printResultModal.show = true;
+        _self.modal = true;
       });
     },
 
@@ -200,7 +201,7 @@ export default {
     readEpc: function () {
       let _self = this;
 
-      _self.$refs.printResultModal.show = true;
+      _self.modal = true;
 
       let promise = PrintEpcUtil.readEpc(this.printerName);
 
@@ -214,10 +215,10 @@ export default {
     },
 
     /**
-         * 显示模态框
-         */
+     * 显示模态框
+     */
     show: function () {
-      this.$refs.printResultModal.show = true;
+      this.modal = true;
     },
   },
 };

packages/process/src/MultiSearchWidget.vue

@@ -42,7 +42,7 @@
           </div>
 
           <Modal
-            ref="modal"
+            v-model:show="modal"
             :full="true"
             @ok="searchDialogOk"
             @cancel="searchDialogCancel"
@@ -167,6 +167,7 @@ export default {
       isShowAuto: false,
       searchText: '',
       selectDatas: [],
+      modal: false,
     };
   },
 
@@ -203,9 +204,8 @@ export default {
       if (this.readonly) {
         return;
       }
-      _self.$refs.modal.showModal();
+      _self.modal=true;
       _self.$nextTick(function () {
-        _self.$refs.modal.showModal();
         if (this.$refs.info) {
           _self.$refs.info.refresh();
         }
@@ -329,10 +329,7 @@ export default {
         return;
       }
 
-      if (this.$refs.modal != undefined) {
-        this.$refs.modal.hideModal();
-      }
-      _self.$refs.modal.hideModal();
+      this.modal=false;
 
       var text = [];