添加移动端index长按菜单

2020-02-26 17:58:52 +08:00 · 2020-02-26 17:58:52 +08:00 · 91eaa032f8
commit 91eaa032f8
parent 99fd45d9b5
5 changed files with 139 additions and 38 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -17,7 +17,6 @@ export default {
  },
  watch: {
    $route: function(to, from) {
-      console.log('from:',from,'to:',to)
      const path = to.path
      if (path.indexOf('/login') < 0) {
        if (path.indexOf('_m') > 0 && this.$pc) {
--- a/src/components/Icon/IconFile.vue
+++ b/src/components/Icon/IconFile.vue
@ -1,6 +1,7 @@
 <template>
  <span>
-    <svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
+            <svg-icon v-if="pc && item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
+            <svg-icon v-if="!pc && item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 0.5rem;float: right;margin-bottom: -1rem;position: relative;" />
            <svg-icon v-if="item.isFolder" icon-class="folder" />
            <svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
            <svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
@ -30,8 +31,11 @@
    },
    data() {
      return {
+        pc: window.pc
      }
    },
+    mounted() {
+    },
    methods: {
    }
  }
--- a/src/main.js
+++ b/src/main.js
@ -15,7 +15,7 @@ import router from './router'
 import VueWechatTitle from 'vue-wechat-title'
 // import WeVue from 'we-vue'
 // import 'we-vue/lib/style.css'
-import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Dialog, Field} from 'vant';
+import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Dialog, Field, Overlay} from 'vant';

 import '@/icons' // icon
 import '@/permission' // permission control
@ -64,6 +64,7 @@ Vue.use(TabbarItem);
 Vue.use(ActionSheet);
 Vue.use(Dialog);
 Vue.use(Field);
+Vue.use(Overlay);


 Vue.use(uploader)
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -976,7 +976,6 @@ export default {
    // 收藏/取消收藏
    favoriteOperating(isFavorite) {
      this.selectRowData[0].isFavorite = isFavorite
-
      this.highlightFavorite(isFavorite, true)
      api.favoriteUrl({
        token: this.$store.state.user.token,
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@ -34,11 +34,10 @@
          left-arrow
          @click-left="clickBack">
        </van-nav-bar>
-
      </van-sticky>

      <van-cell class="list-item" center v-for="item in fileList" :key="item.id" @click="fileClick(item)" :is-link="item.isFolder">
-        <div class="list-item-div" @touchstart="touchStart(item)" @touchend="touchEnd"> 
+        <div class="list-item-div" @touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove">
          <van-row class="row-file">
            <van-col span="4" align="center" class="list-cell-icon">
              <icon-file :item="item" :image-url="imageUrl"></icon-file>
@ -75,7 +74,7 @@

    <e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
      <div class="popper-arrow"></div>
-      <ul v-for="(item,index) in menus" :key="item.label">
+      <ul v-for="item in menus" :key="item.label">
        <li
          v-if="item.operation === 'unFavorite' || item.operation === 'favorite'"
          @click="menusOperations(item.operation)"
@ -90,10 +89,33 @@
          <label class="menuitem"><svg-icon :icon-class="item.iconClass" /><span class="menuitem text">{{ item.label }}</span>
          </label>
        </li>
-
      </ul>
    </e-vue-contextmenu>

+    <van-overlay ref="overlayShow" :show="overlayShow" duration="0.3" @click="overlayClick">
+      <van-cell v-if="rowContextData.name!=null" :style="overlayContentClass" class="list-item overlay-content-class" center @click="fileClick(rowContextData)" :is-link="rowContextData.isFolder">
+        <!--<div :style="overlayContentClass">-->
+        <div >
+          <van-row class="row-file">
+            <van-col span="4" align="center" class="list-cell-icon">
+              <icon-file :item="rowContextData" :image-url="imageUrl"></icon-file>
+            </van-col>
+            <van-col span="16" class="list-item-content">
+              <van-col span="24">
+                {{rowContextData.name}}
+              </van-col>
+              <van-col span="24" class="file-description" justify="space-between">
+                <van-col span="24">
+                  {{formatTime(rowContextData.agoTime)}}&nbsp;&nbsp;&nbsp;{{formatSize(rowContextData.size)}}
+                </van-col>
+              </van-col>
+            </van-col>
+            <van-col span="4"></van-col>
+          </van-row>
+        </div>
+      </van-cell>
+    </van-overlay>
+
  </div>
 </template>
 <script>
@ -115,6 +137,7 @@
  import 'vant/lib/dialog/style';
  import 'vant/lib/field/style';
  import 'vant/lib/toast/style';
+  import 'vant/lib/overlay/style';

  import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
  import api from '@/api/upload-api'
@ -186,6 +209,8 @@
        cellMouseIndex: -1,
        editingIndex: -1,
        indexList: [],
+        overlayShow: false,
+        overlayContentClass: {}
      };
    },
    mounted(){
@ -213,9 +238,32 @@
      window.removeEventListener('popstate', this.goBack, false);
    },
    methods: {
+      // 是否高亮收藏图标
+      highlightFavorite(isFavorite, isHover) {
+        const item_menu = this.menus.find(item => {
+          if (item.operation === 'favorite' || item.operation === 'unFavorite') {
+            return item
+          }
+        })
+        if (item_menu) {
+          if (isFavorite) {
+            item_menu.label = '取消收藏'
+            item_menu.iconClass = 'menu-favorite-hover'
+            item_menu.operation = 'unFavorite'
+          } else {
+            if (isHover) {
+              item_menu.iconClass = 'menu-favorite-hover'
+            } else {
+              item_menu.iconClass = 'menu-favorite'
+            }
+            item_menu.label = '收藏'
+            item_menu.operation = 'favorite'
+          }
+          // this.$set(this.menus, 0, item_menu)
+        }
+      },
      // 显示操作菜单
      show() {
-        console.log('菜单显示了')
      },
      hide() {
        const that = this
@ -223,11 +271,9 @@
        setTimeout(function() {
          that.isJustHideMenus = false
        }, 100)
-        console.log('菜单隐藏了')
      },
      // 长按事件
-      rowContextmenu(row, event) {
-        console.log(event)
+      rowContextmenu(row, target) {
        if (this.indexList.includes(row.index)) {
          this.menusIsMultiple = true
          this.menus = this.multipleRightMenus
@ -239,13 +285,15 @@
        // 长按选择的数据
        this.rowContextData = row
        this.menuTriangle = ''
+        const offsetTop = target.offsetTop - row.scrollY
        const e = {}
-        console.log('pageX:' + event.pageX, 'clientX:' + event.clientX)
-        console.log('pageY:' + event.pageY, 'clientY:' + event.clientY)
-        e.pageX = event.pageX + 5
-        e.pageY = event.pageY + 2
-        e.clientX = event.clientX + 5
-        e.clientY = event.clientY + 2
+        if ((offsetTop+(target.offsetHeight/2)) > document.body.offsetHeight/2) {
+          e.pageX = 50
+          e.pageY = target.offsetTop - 288
+        } else {
+          e.pageX = 50
+          e.pageY = target.offsetTop + target.offsetHeight + 5
+        }
        this.$refs.contextShow.showMenu(e)
      },
      // 选择某行预备数据
@ -253,6 +301,8 @@
        if (row) {
          this.selectRowData[0] = row
        }
+        const isFavorite = this.selectRowData[0].isFavorite
+        this.highlightFavorite(isFavorite, false)
      },
      // 菜单操作
      menusOperations(operation) {
@ -297,6 +347,8 @@
            this.deleteFile()
            break
        }
+        this.overlayShow = false
+        document.documentElement.style.overflow = null;
        this.$refs.contextShow.hideMenu()
      },
      downloadFile() {
@ -372,40 +424,65 @@
          })
        })
      },
+      touchMove(e) {
+        // 避免和长按事件冲突
+        clearTimeout(this.Loop);
+        e.preventDefault();
+      },
      touchStart(item){
        // e.preventDefault();
-        Toast.setDefaultOptions({ duration: 300 });
+        Toast.setDefaultOptions({ duration: 500 });
        // Toast("手指触摸");
        //手指触摸
        clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
        const that = this
        const e = window.event
        this.Loop = setTimeout(function() {
-          Toast("长按了");
-          console.log(e)
-          console.log(e.targetTouches[0].target.className)
-          const h = that.findListItem(e.targetTouches[0].target)
-          // that.rowContextmenu(item,e.targetTouches[0])
-        },700);
-      },
-      findListItem(target){
-        console.log(target.offsetParent.className,target.offsetParent.className.indexOf('list-item'))
-        if(target.offsetParent.className.indexOf('list-item') > -1){
-            console.log(target.offsetParent)
-            console.log('offsetTop',target.offsetParent.offsetTop)
-            console.log('offsetLeft',target.offsetParent.offsetLeft)
-            console.log('offsetWidth',target.offsetParent.offsetWidth)
-            console.log('offsetHeight',target.offsetParent.offsetHeight)
-            return target.offsetParent
-        } else {
-          this.findListItem(target.offsetParent)
-        }
+          console.log(e.targetTouches[0].pageY-e.targetTouches[0].clientY)
+          item.scrollY = e.targetTouches[0].pageY-e.targetTouches[0].clientY
+          console.log(item)
+          that.findListItem(item,e.targetTouches[0].target)
+          that.overlayShow = true
+          Toast("长按"+document.documentElement.style.overflow);
+          document.documentElement.style.overflow='hidden';
+        },500);
      },
      touchEnd(){
        // Toast("手指离开");
        //手指离开
        clearTimeout(this.Loop);
      },
+      // 点击遮罩层
+      overlayClick() {
+        this.overlayShow = false
+        document.documentElement.style.overflow = null;
+      },
+      findListItem(item,target){
+        const offsetParent = target.offsetParent
+        if(offsetParent.className.indexOf('list-item') > -1){
+            this.overlayContentClass = {
+              'top': (offsetParent.offsetTop-item.scrollY)+'px',
+              'height': offsetParent.offsetHeight+'px',
+              'width': offsetParent.offsetWidth+'px',
+              'left': offsetParent.offsetLeft+'px',
+              'border-radius': '0px'
+            }
+            const that = this
+            setTimeout(function () {
+              that.overlayContentClass = {
+                'top': (offsetParent.offsetTop-item.scrollY)+'px',
+                'height': offsetParent.offsetHeight+'px',
+                'width': (offsetParent.offsetWidth-20)+'px',
+                'left': (offsetParent.offsetLeft+10)+'px',
+                'border-radius': (offsetParent.offsetHeight/4)+'px',
+              }
+            },0)
+            this.rowContextmenu(item,offsetParent)
+            return offsetParent
+        } else {
+          this.findListItem(item,target.offsetParent)
+        }
+      },
      // 浏览器的返回事件
      goBack(){
        const linkIndex = this.pathList.length-3
@ -693,6 +770,18 @@
 </script>
 <style lang="scss" scoped>

+  * {
+    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
+    -webkit-user-select:none; /*webkit浏览器*/
+    -moz-user-select:none;/*火狐*/
+    -ms-user-select:none; /*IE10*/
+    user-select:none;
+  }
+
+  input {
+    -webkit-user-select:auto; /*webkit浏览器*/
+  }
+
  .tab-bottom {
    padding: 0 0 25px 0;
    .van-tabbar-item {
@ -783,6 +872,12 @@
      margin-left: 5px;
    }
  }
+  .overlay-content-class {
+    -webkit-transition: all .1s ease-in-out 0s;
+    transition: all .1s ease-in-out 0s;
+    box-shadow: 2px 3px 3px #888888;
+
+  }

  .list-item:active {
    background-color: #bfcbd930;
@ -881,4 +976,7 @@
    width: 1.2rem;
    height: 1.2rem;
  }
+  /deep/ .ctx-menu-container {
+    top: unset;
+  }
 </style>