优化弹窗

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <router-view v-slot="{ Component }">
     <transition name="fade">
-      <Mask v-if="maskDialog" @click="hideMaskDialog"></Mask>
+      <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
     </transition>
     <transition :name="transitionName">
       <component :is="Component"/>
@@ -20,21 +20,27 @@ export default {
   computed: {
     maskDialog() {
       return this.$store.state.maskDialog
-    }
+    },
+    maskDialogMode() {
+      return this.$store.state.maskDialogMode
+    },
   },
   methods: {
     hideMaskDialog() {
-      this.$store.commit('setMaskDialog', false)
+      this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
     }
   },
   // watch $route 决定使用哪种过渡
   watch: {
     '$route'(to, from) {
+      //footer下面的5个按钮，对跳不要用动画
       let noAnimation = ['/', '/home', '/me', '/attention', '/message', '/publish']
       if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
         return this.transitionName = ''
       }
-      const routeDeep = ['/message', '/attention', '/home', '/me', '/publish',
+
+      const routeDeep = [
+        '/message', '/attention', '/home', '/me', '/publish',
         '/edit-userinfo',
         '/edit-userinfo-item',
         '/video-detail',

src/components/Footer.vue

@@ -69,12 +69,13 @@ export default {
 .footer {
   font-size: 1.8rem;
   position: fixed;
-  bottom: 0;
   width: 100%;
   height: 60px;
   //border-top: 1px solid #7b7878;
   z-index: 2;
-  /*top: 600px;*/
+  //不用bottom：0是因为，在进行页面切换的时候，vue的transition
+  // 会使footer的bottom：0失效，不能准备定位
+  top: calc(100vh - 6rem);
   background: #020202;
   color: white;
   display: flex;

src/components/FromBottomDialog.vue

@@ -1,6 +1,9 @@
 <template>
   <transition name="from-bottom">
-    <div ref="dialog" class="FromBottomDialog" v-if="modelValue" :class="mode" :style="{height}"
+    <div ref="dialog" class="FromBottomDialog"
+         v-if="modelValue"
+         :class="mode"
+         :style="{'max-height':height}"
          @touchstart="start"
          @touchmove="move"
          @touchend="end"
@@ -24,26 +27,37 @@ export default {
     mode: {
       type: String,
       default: 'dark'
+      // default: 'light'
+      // default: 'white'
     },
     height: {
       type: String,
       default: '70vh'
+    },
+    useMask: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {
     modelValue(newVal) {
+      let app = document.getElementById('app')
       if (newVal) {
+        app.children[0].style.position = 'absolute'
         this.scroll = document.documentElement.scrollTop
         document.body.style.position = 'fixed'
         document.body.style.top = -this.scroll + 'px'
       } else {
+        app.children[1].style.position = 'fixed'
         document.body.style.position = 'static'
         document.documentElement.scrollTop = this.scroll
       }
-      this.$store.commit('setMaskDialog', newVal)
+      this.$store.commit('setMaskDialog', {state: newVal, mode: this.mode})
     },
     maskDialog(newVal) {
-      this.hide(newVal)
+      if (!newVal) {
+        this.hide(newVal)
+      }
     }
   },
   data() {
@@ -51,7 +65,7 @@ export default {
       scroll: 0,
       startLocationY: 0,
       moveYDistance: 0,
-      startTime: 0
+      startTime: 0,
     }
   },
   computed: {
@@ -67,7 +81,6 @@ export default {
     },
     start(e) {
       if (this.$refs.dialog.scrollTop !== 0) return
-      this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
       this.startLocationY = e.touches[0].pageY
       this.startTime = Date.now()
     },
@@ -79,16 +92,19 @@ export default {
       }
     },
     end(e) {
+      //点击
+      if (Date.now() - this.startTime < 150) return
+
+      //滑动
       if (this.$refs.dialog.scrollTop !== 0) return
       let clientHeight = this.$refs.dialog.clientHeight
+      this.$setCss(this.$refs.dialog, 'transition-duration', `300ms`)
       if (Math.abs(this.moveYDistance) > clientHeight / 2) {
-        this.$setCss(this.$refs.dialog, 'transition-duration', `300ms`)
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${clientHeight}px,0)`)
         setTimeout(this.hide, 300)
       } else {
-        this.$setCss(this.$refs.dialog, 'transition-duration', `300ms`)
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
-        setTimeout(()=>{
+        setTimeout(() => {
           this.$setCss(this.$refs.dialog, 'transform', 'none')
           this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
         }, 300)
@@ -109,7 +125,7 @@ export default {
 
 .from-bottom-enter-from,
 .from-bottom-leave-to {
-  transform: translate3d(0, 100vh, 0);
+  transform: translate3d(0, 40vh, 0);
 }
 
 .FromBottomDialog {
@@ -117,6 +133,7 @@ export default {
   position: fixed;
   width: 100%;
   overflow: auto;
+  padding-top: 2.4rem;
   bottom: 0;
   box-sizing: border-box;
   border-radius: .5rem .5rem 0 0;
@@ -126,6 +143,10 @@ export default {
   }
 
   &.light {
+    background: whitesmoke;
+  }
+
+  &.white {
     background: white;
   }
 
@@ -134,9 +155,11 @@ export default {
     z-index: 3;
     width: 100%;
     position: fixed;
-    padding-top: 1rem;
+    height: 2rem;
     display: flex;
+    transform: translateY(-2.4rem);
     justify-content: center;
+    align-items: center;
 
     &.dark {
       background: $main-bg;
@@ -147,6 +170,14 @@ export default {
     }
 
     &.light {
+      background: whitesmoke;
+
+      .content {
+        background: darkgray;
+      }
+    }
+
+    &.white {
       background: white;
 
       .content {
@@ -158,7 +189,6 @@ export default {
       border-radius: 2px;
       height: .4rem;
       width: 3rem;
-      margin-bottom: 1rem;
     }
   }
 }

src/components/Mask.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="Mask"></div>
+  <div class="Mask"
+       :class="mode"
+  ></div>
 </template>
 <script>
 export default {
   name: "Mask",
+  props: {
+    mode: {
+      type: String,
+      default: 'dark'
+    },
+  }
 }
 </script>
 
@@ -17,5 +25,17 @@ export default {
   left: 0;
   right: 0;
   background: #000000bb;
+
+  &.dark {
+    background: #000000bb;
+  }
+
+  &.light {
+    background: transparent;
+  }
+
+  &.white {
+    background: transparent;
+  }
 }
 </style>

src/pages/home/Message.vue

@@ -9,7 +9,9 @@
     <Search class="m2r"></Search>
     <div class="line mb2r"></div>
     <div class="friends  pl1r ">
-      <div class="friend pr1r pl1r" v-for="item in 10">
+      <div class="friend pr1r pl1r"
+           @click="$nav('/edit-userinfo')"
+           v-for="item in 10">
         <div class="avatar on-line">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
         </div>
@@ -269,8 +271,7 @@ export default {
   },
   mounted() {
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
 
@@ -278,15 +279,18 @@ export default {
 @import "../../assets/scss/index";
 
 #Message {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  //height: 100%;
+  //width: 100%;
+  overflow: auto;
   background: $main-bg;
   padding-bottom: 6rem;
   color: white;
 
-  &.disable-scroll {
-    //height: calc(100vh - 6rem);
-    //overflow: hidden;
-  }
-
   .create-chat-wrapper {
     margin-top: 2.4rem;
     padding-bottom: 6rem;

src/pages/me/VideoDetail.vue

@@ -28,7 +28,6 @@
           </div>
           <div class="share-btn" @click="dialog.permissionDialog = true">权限设置</div>
         </div>
-
       </SlideItem>
       <SlideItem style="font-size: 40px;overflow:auto;">
         <div>
@@ -76,12 +75,13 @@
       </SlideItem>
     </SlideList>
 
-    <transition name="share-dialog">
-      <div class="share-dialog" v-if="dialog.shareToFriend ">
-        <div class="heng-gang">
-          <div class="content"></div>
-        </div>
-        <div class="collection" @click="dialog.shareToFriend  = false">
+    <from-bottom-dialog
+        v-model="dialog.shareToFriend"
+        height="50vh"
+        mode="light"
+    >
+      <div class="share-dialog">
+        <div class="collection" @click="dialog.shareToFriend = false">
           <img src="../../assets/img/icon/me/collection-black.png" alt="">
           收藏
         </div>
@@ -101,13 +101,14 @@
           </div>
         </div>
       </div>
-    </transition>
-
-    <transition name="share-dialog">
-      <div class="permission-dialog" v-if="dialog.permissionDialog">
-        <div class="heng-gang">
-          <div class="content"></div>
-        </div>
+    </from-bottom-dialog>
+
+    <from-bottom-dialog
+        v-model="dialog.permissionDialog"
+        height="40vh"
+        mode="white"
+    >
+      <div class="permission-dialog">
         <div class="setting" @click="dialog.permissionDialog = false">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
           <div class="right">
@@ -139,14 +140,14 @@
         <div class="space">
 
         </div>
-        <div class="setting pb40p">
+        <div class="setting pb4r">
           <img src="../../assets/img/icon/head-image.jpeg" alt="">
           <div class="right">
             <span>更多好友</span>
           </div>
         </div>
       </div>
-    </transition>
+    </from-bottom-dialog>
   </div>
 </template>
 
@@ -162,10 +163,14 @@ import mp43 from "../../assets/video/3.mp4";
 import mp44 from "../../assets/video/4.mp4";
 import mp45 from "../../assets/video/5.mp4";
 import Search from "../../components/Search";
+import FromBottomDialog from "../../components/FromBottomDialog";
 
 export default {
   name: "VideoDetail",
-  components: {Footer, Comment, Share, Other, Search},
+  components: {
+    Footer, Comment, Share, Other, Search,
+    FromBottomDialog
+  },
   data() {
     return {
       list: [1, 2, 3, 4, 5],
@@ -341,6 +346,7 @@ export default {
       dialog: {
         shareToFriend: false,
         permissionDialog: false,
+        test: false,
       },
       isMy: true
     }
@@ -365,15 +371,6 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/scss/index";
 
-.share-dialog-enter-active,
-.share-dialog-leave-active {
-  transition: transform 0.2s ease;
-}
-
-.share-dialog-enter-from,
-.share-dialog-leave-to {
-  transform: translate3d(0, 50vh, 0);
-}
 
 #video-detail {
   position: fixed;
@@ -461,35 +458,12 @@ export default {
 
   }
 
-  .share-dialog {
-    padding: 10px 10px 0 10px;
-    z-index: 9;
-    position: fixed;
-    width: 100%;
-    max-height: 50vh;
-    overflow: auto;
-    bottom: 0;
-    background: whitesmoke;
-    box-sizing: border-box;
-    border-radius: 5px 5px 0 0;
-
-    .heng-gang {
-      display: flex;
-      justify-content: center;
-
-      .content {
-        border-radius: 2px;
-        height: 4px;
-        width: 30px;
-        background: darkgray;
-        margin-bottom: 5px;
-      }
-    }
 
+  .share-dialog {
     .collection {
-      margin: 10px 0;
       background: white;
-      width: 100%;
+      margin: 0 1rem 1rem 1rem;
+      width: calc(100% - 2rem);
       border-radius: 6px;
       display: flex;
       align-items: center;
@@ -508,11 +482,11 @@ export default {
     }
 
     .friends {
+      margin: 1rem 1rem 0 1rem;
+      width: calc(100% - 2rem);
       background: white;
       border-radius: 6px 6px 0 0;
 
-      width: 100%;
-
       .friend {
         box-sizing: border-box;
         padding: 10px;
@@ -546,33 +520,10 @@ export default {
         }
       }
     }
+
   }
 
   .permission-dialog {
-    padding: 10px 0 0 0;
-    z-index: 9;
-    position: fixed;
-    width: 100%;
-    max-height: 50vh;
-    overflow: auto;
-    bottom: 0;
-    background: white;
-    box-sizing: border-box;
-    border-radius: 5px 5px 0 0;
-
-    .heng-gang {
-      display: flex;
-      justify-content: center;
-
-      .content {
-        border-radius: 2px;
-        height: 4px;
-        width: 30px;
-        background: darkgray;
-        margin-bottom: 10px;
-      }
-    }
-
     .space {
       height: 10px;
       background: whitesmoke;
@@ -581,7 +532,7 @@ export default {
     .setting {
       background: white;
       box-sizing: border-box;
-      padding: 10px;
+      padding: 1rem 2rem;
       width: 100%;
       display: flex;
       align-items: center;

src/store/index.js

@@ -6,6 +6,7 @@ const store = Vuex.createStore({
     bodyHeight: document.body.clientHeight,
     bodyWidth: document.body.clientWidth,
     maskDialog: false,
+    maskDialogMode: 'dark',
     userinfo: {
       name: '',
       account: '',
@@ -27,7 +28,8 @@ const store = Vuex.createStore({
       store.userinfo = val
     },
     setMaskDialog(store, val) {
-      store.maskDialog = val
+      store.maskDialog = val.state
+      store.maskDialogMode = val.mode
     }
   }
 })