pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化弹窗

pull/19/head
zyronon 4 years ago
parent
de36d86854
commit
e02eb1d2f1
7 changed files with 120 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/App.vue
  2. 5
      src/components/Footer.vue
  3. 52
      src/components/FromBottomDialog.vue
  4. 22
      src/components/Mask.vue
  5. 20
      src/pages/home/Message.vue
  6. 109
      src/pages/me/VideoDetail.vue
  7. 4
      src/store/index.js

14
src/App.vue
Unescape View File

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

5
src/components/Footer.vue
Unescape View File

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

52
src/components/FromBottomDialog.vue
Unescape View File

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

22
src/components/Mask.vue
Unescape View File

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

20
src/pages/home/Message.vue
Unescape View File

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

109
src/pages/me/VideoDetail.vue
Unescape View File

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

4
src/store/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save