瀏覽代碼

解决打开窗口按钮效果

YaolongHan 4 年之前
父節點
當前提交
51b3dc2c66
共有 1 個文件被更改,包括 115 次插入89 次删除
  1. 115 89
      src/components/edit/left_toolbar.vue

+ 115 - 89
src/components/edit/left_toolbar.vue

@@ -72,75 +72,77 @@
       </div>
     </a-popover>
 
-    <!-- 打开弹窗 -->
-    <div class="drawer-close" v-show="visible" @click="onClose" :style="{opacity: visible? 1: 0, }">
-      <a-icon type="left" style="color: #8D9399;font-size: 10px" />
-    </div>
     <transition name="fade">
-      <div class="drawer-model" id="drawer-model" v-show="visible">
-        <a-drawer
-          placement="left"
-          :closable="false"
-          :visible="visible"
-          :wrap-style="{ position: 'absolute',}"
-          @close="onClose"
-          :getContainer="false"
-          :mask="false"
-          :wrapClassName="isExtract?'edit-drawer':''"
-        >
-          <a-spin :spinning="spinning">
-            <div class="drawer-model-body" v-if="!isExtract">
-              <div class="btn-list">
-                <Tabs
-                  type="card"
-                  v-if="showDrawerItem.type == 'Zone'"
-                  :data="tabData"
-                  v-model="tabActive"
-                />
+      <div>
+        <!-- 打开弹窗 -->
+        <div class="drawer-close" v-show="closevisible" @click="onClose">
+          <a-icon type="left" style="color: #8D9399;font-size: 10px" />
+        </div>
+        <div class="drawer-model" id="drawer-model" v-show="visible">
+          <a-drawer
+            placement="left"
+            :closable="false"
+            :visible="visible"
+            :wrap-style="{ position: 'absolute',}"
+            @close="onClose"
+            :getContainer="false"
+            :mask="false"
+            :wrapClassName="isExtract?'edit-drawer':''"
+          >
+            <a-spin :spinning="spinning">
+              <div class="drawer-model-body" v-if="!isExtract">
+                <div class="btn-list">
+                  <Tabs
+                    type="card"
+                    v-if="showDrawerItem.type == 'Zone'"
+                    :data="tabData"
+                    v-model="tabActive"
+                  />
+                </div>
+                <div class="list" v-for="(item,index) in itemList" :key="index">
+                  <div class="title" v-show="item.GraphElements.length">{{item.Name}}</div>
+                  <ul class="example">
+                    <li
+                      @click="getexampleItem(items,indexs,index)"
+                      v-for="(items,indexs) in item.GraphElements"
+                      :key="indexs"
+                      :class="[activeIndexs==indexs &&activeIndex==index ?'active-li':'']"
+                      :title="items.Name"
+                    >
+                      <img
+                        :class="['item',`item-${items.Type}`]"
+                        :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
+                        alt
+                      />
+                      <div class="text">{{items.Name}}</div>
+                    </li>
+                  </ul>
+                </div>
               </div>
-              <div class="list" v-for="(item,index) in itemList" :key="index">
-                <div class="title" v-show="item.GraphElements.length">{{item.Name}}</div>
-                <ul class="example">
-                  <li
-                    @click="getexampleItem(items,indexs,index)"
-                    v-for="(items,indexs) in item.GraphElements"
-                    :key="indexs"
-                    :class="[activeIndexs==indexs &&activeIndex==index ?'active-li':'']"
-                    :title="items.Name"
-                  >
-                    <img
-                      :class="['item',`item-${items.Type}`]"
-                      :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
-                      alt
-                    />
-                    <div class="text">{{items.Name}}</div>
-                  </li>
-                </ul>
+              <div v-else class="drawer-model-body drawer-model-body-extract">
+                <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
+                  <template slot="age" slot-scope="text, record, index">
+                    <div>
+                      <img
+                        :class="['item',`item-${text.Type}`, 'exportImg']"
+                        :src="'/serve/topology-wanda/Picture/query/'+ text.Url"
+                        alt
+                        v-if="text.Url"
+                      />
+                      <span v-else>无对应图例</span>
+                    </div>
+                  </template>
+                  <template slot="address" slot-scope="text, record, index">
+                    <div
+                      style="color:#0091FFFF;cursor:pointer;"
+                      @click="pickUp(text, record, index)"
+                    >{{ text }}</div>
+                  </template>
+                </a-table>
               </div>
-            </div>
-            <div v-else class="drawer-model-body drawer-model-body-extract">
-              <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
-                <template slot="age" slot-scope="text, record, index">
-                  <div>
-                    <img
-                      :class="['item',`item-${text.Type}`, 'exportImg']"
-                      :src="'/serve/topology-wanda/Picture/query/'+ text.Url"
-                      alt
-                      v-if="text.Url"
-                    />
-                    <span v-else>无对应图例</span>
-                  </div>
-                </template>
-                <template slot="address" slot-scope="text, record, index">
-                  <div
-                    style="color:#0091FFFF;cursor:pointer;"
-                    @click="pickUp(text, record, index)"
-                  >{{ text }}</div>
-                </template>
-              </a-table>
-            </div>
-          </a-spin>
-        </a-drawer>
+            </a-spin>
+          </a-drawer>
+        </div>
       </div>
     </transition>
   </div>
@@ -247,6 +249,7 @@ export default {
         }
       ],
       visible: false,
+      closevisible: false,
       //提取
       extractChoice: [
         {
@@ -338,6 +341,13 @@ export default {
           });
         });
       }
+      if (this.visible) {
+        setTimeout(() => {
+          this.closevisible = this.visible;
+        }, 300);
+      } else {
+        this.closevisible = this.visible;
+      }
     },
     getSelectId(data) {
       this.categoryIdS = data;
@@ -348,6 +358,13 @@ export default {
       this.systemChoice.forEach(a => {
         a.isChoice = false;
       });
+      if (this.visible) {
+        setTimeout(() => {
+          this.closevisible = this.visible;
+        }, 300);
+      } else {
+        this.closevisible = this.visible;
+      }
     },
     getexampleItem(item, indexs, index) {
       if (this.showDrawerItem.type == "Zone") {
@@ -387,16 +404,26 @@ export default {
         this.visible = !this.visible;
       }
       bus.$emit("extractItem");
+      if (this.visible) {
+        setTimeout(() => {
+          this.closevisible = this.visible;
+        }, 300);
+      } else {
+        this.closevisible = this.visible;
+      }
     },
     getBus() {
       bus.$on("exportItem", data => {
         this.data = [];
         if (data.length) {
           this.spinning = true;
-          for(let i = 0; i< this.GraphElement.length; i++) {
+          for (let i = 0; i < this.GraphElement.length; i++) {
             const it = this.GraphElement[i];
-            for(let j = 0; j < data.length; j++) {
-              if (it.InfoTypeId.indexOf(data[j].key)>-1 && it.Type == data[j].type) {
+            for (let j = 0; j < data.length; j++) {
+              if (
+                it.InfoTypeId.indexOf(data[j].key) > -1 &&
+                it.Type == data[j].type
+              ) {
                 data[j].age = it;
                 data[j].name = it.Name;
                 this.data.push(data[j]);
@@ -478,7 +505,7 @@ export default {
 /deep/ .ant-drawer-body {
   padding: 12px;
 }
-/deep/ .ant-drawer-content-wrapper{
+/deep/ .ant-drawer-content-wrapper {
   width: 270px !important;
 }
 #left_toolbar {
@@ -606,21 +633,20 @@ export default {
   .fade-leave-to {
     transition: all 0.3s ease;
   }
- 
- 
+
   .drawer-close {
-      width: 10px;
-      height: 20px;
-      position: absolute;
-      background-color: #E4E5E7;
-      top: 8px;
-      left: 350px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      transition: opacity 0s linear 0.3s;
-    }
+    width: 10px;
+    height: 20px;
+    position: absolute;
+    background-color: #e4e5e7;
+    top: 8px;
+    left: 350px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: opacity 0s linear 0.3s;
+  }
   .drawer-model {
     position: absolute;
     left: 80px;
@@ -660,8 +686,8 @@ export default {
             border: 1px solid #ffffff;
             cursor: pointer;
             &:hover {
-              background: #F5F6F7;
-              border: 1px solid #D9DBDE;
+              background: #f5f6f7;
+              border: 1px solid #d9dbde;
               border-radius: 5px;
             }
             .item {
@@ -688,7 +714,7 @@ export default {
             }
             .text {
               width: 100%;
-              padding:6px 2px 0;
+              padding: 6px 2px 0;
               font-size: 12px;
               text-align: center;
               overflow: hidden;
@@ -697,8 +723,8 @@ export default {
             }
           }
           .active-li {
-            background: #DFEFFE;
-            border: 1px solid #98C8FA ;
+            background: #dfeffe;
+            border: 1px solid #98c8fa;
             border-radius: 5px;
           }
         }