Просмотр исходного кода

【我的素材-全景图片】搜索功能适配无限滚动,需要tooltip的地方适配新的tooltip class

任一存 4 лет назад
Родитель
Сommit
a760f41190
2 измененных файлов с 25 добавлено и 11 удалено
  1. 1 2
      src/mixins/index.js
  2. 24 9
      src/views/material/pano/index.vue

+ 1 - 2
src/mixins/index.js

@@ -8,7 +8,7 @@ import clickoutside from "./v-clickoutside";
 import clickwindow from "./v-clickwindow";
 import * as api from "../api";
 
-import { Message, Tooltip, InfiniteScroll } from 'element-ui'
+import { Message, InfiniteScroll } from 'element-ui'
 
 const MARERIAL = ["image", "pano", "scene", "audio", "video"];
 
@@ -91,7 +91,6 @@ let SettingPanel = require("@/framework/SettingPC").default;
 Vue.mixin({
   components: {
     SettingPanel,
-    Tooltip,
   },
   directives: {
     clickoutside: clickoutside,

+ 24 - 9
src/views/material/pano/index.vue

@@ -11,9 +11,11 @@
           class="ui-button submit"
         >
           <span>上传素材</span>
-          <tooltip class="tooltip" content="请上传2:1、120MB以内、jpg格式" placement="top-start" effect="light">
-            <i class="iconfont icon-material_prompt"></i>
-          </tooltip>
+          <i class="iconfont icon-material_prompt hover-tips upload-icon">
+            <div>
+              <div class="remark">请上传2:1、120MB以内、jpg格式</div>
+            </div>
+          </i>
           <upload
             ref="uploadFile"
             :failString="'格式错误,请上传2:1、120MB以内、jpg格式的全景图片'"
@@ -39,13 +41,13 @@
       <div class="filter">
         <div>
           <i
-            @click="getMaterialList()"
+            @click="refreshList"
             class="iconfont icon-works_search"
           ></i>
           <input
             type="text"
             v-model="searchKey"
-            @keyup.enter="getMaterialList()"
+            @keyup.enter="refreshList"
             placeholder="搜索文件夹或素材"
           />
         </div>
@@ -58,13 +60,14 @@
             selectedArr = data;
           }
         "
-        @request-more-data="getMaterialList"
+        @request-more-data="getMoreMaterialItem"
         :canRequestMoreData="hasMoreData && !isRequestingMoreData"
         :header="tabHeader"
         :showLine="true"
         :selection="false"
         :data="list"
         class="table-list"
+        ref="table-list"
       >
         <!-- 表头 -->
         <div slot-scope="{ data }" slot="header">
@@ -92,7 +95,7 @@
                 <div class="remark">重命名</div>
               </div>
             </i>
-            <i class="iconfont iconlist_delete hover-tips" @click="del(item)">
+            <i class="iconfont iconlist_delete hover-tips-warn" @click="del(item)">
               <div>
                 <div class="remark">删除</div>
               </div>
@@ -220,7 +223,6 @@ export default {
     };
   },
   mounted() {
-    // this.getMaterialList();
   },
   watch: {
     isLongPolling: {
@@ -425,7 +427,14 @@ export default {
           });
       });
     },
-    getMaterialList(islongpolling = null) {
+    refreshList() {
+      console.log('refresh');
+      this.list = []
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      this.$refs['table-list'].requestMoreData()
+    },
+    getMoreMaterialItem(islongpolling = null) {
       this.isClickSearch = !!this.searchKey;
       this.isRequestingMoreData = true
       getMaterialList(
@@ -468,6 +477,12 @@ export default {
     color: #FFFFFF;
     margin-top: 20px;
   }
+  .hover-tips.upload-icon {
+    &:hover {
+      color: #fff !important;
+      cursor: default;
+    }
+  }
 }
 </style>
 <style lang="less" scoped>