使用 vux 中的 Drawer 以及一些坑
最近做demo 的时候用到了 vux 里的 drawer ，遇到了很多问题，这里主要记录一下(新手，勿喷)
主要是为了点击那个 三个横线之后会出现
首先，使用 drawer 中 主体内容插槽 中写东西的时候，发现原来定位
position: fixed
失效了，wtf 凸(艹皿艹 )，找半天找不到问题，后来去查资料，发现
fixed 在 父元素有 transform 的时候会失效
这样就很明显了，由于 drawer 组件有 transform ，导致了 fixed 失效。这是很头痛的事情。
主要有两种解决办法：①使用 position:absolute 来代替 fixed ②不让 drawer 和页面实现父子关系
我采用了 方法 ②
so 当时的 结构就是这样(使用了 vuex 来作为组件间的值传递)
home.vue
<template> // 使用了 vuex 来传递 状态值，可以使用 data 的 变量来代替
<div class="home" :class="{fix: this.$store.getters.drawer}">
<my-drawer></my-drawer> // drawer 组件(我又封装了一下)
<home-h></home-h> // 自己封装的头部标签(就是前文提到的三条横线所在的组件)
<router-view></router-view>
<home-f></home-f> // 自己封装的尾部标签
</div>
</template>
<style lang="stylus">
.fix // 这个属性主要是为了 让 drawer 显示的时候阻止屏幕滚动
position fixed
top 0
bottom 0
left 0
right 0
</style>
<template>
<div :class="{dra: showDrawer}">
<drawer :show.sync="showDrawer" show-mode="overlay" placement="right">
<div slot="drawer" class="dcontent">
<div class="head"> // 这里是我自己加的一点 节点，无视就好
<img src="../assets/drawer/headlogo.png" alt="">
<div class="login">
<p class="log1">点击登录</p>
<p class="log2">即刻开启您的尊贵之旅</p>
</div>
</div>
</div>
</drawer>
</div>
</template>
<style lang="stylus">
.dra // 这个是为了 能在 drawer 出现的 能充满整个屏幕
top 0
bottom 0
left 0
right 0
z-index 99999
position absolute
.dcontent
background-color #efefef
height 100%
.head
background url('../assets/drawer/headbck.png')
height 3.466667rem /* 260/75 */
width 8rem /* 600/75 */
background-size 8rem 3.466667rem /* 260/75 */
display flex
justify-content center
align-items center
img
width 1.733333rem /* 130/75 */
height 1.733333rem /* 130/75 */
border-radius 50%
margin-right .266667rem /* 20/75 */
.login
color white
.log1
font-size 28px; /*px*/
.log2
font-size 25px; /*px*/
</style>
<script>
import {Drawer} from 'vux'
export default {
components: {
Drawer
},
computed: { // 通过 vuex 来设置、获取 进行组件之间的值传递，可以使用 data props
showDrawer: { // 使用了 计算属性来设置 showDrawer
get () { // 值变化了通过这个获取
return this.$store.getters.drawer
},
set () { // 值变化了 通过这个设置
return this.$store.dispatch('changeDrawer').then(() => {
console.log(this.$store.getters.drawer)
})
}
}
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
drawerOpened: false
},
getters: {
drawer: state => {
return state.drawerOpened // 让外界能获取 drawerOpened
}
},
mutations: {
changeDrawer (state) { // 让外界能改变drawerOpened
state.drawerOpened = !state.drawerOpened
}
},
actions: { // 让外界能通过异步调用的方式 改变drawerOpened
changeDrawer ({commit}) {
commit('changeDrawer')
}
}
})
homeH.vue
<template>
<header>
.......
<div class="right">
<span class="thline" @click="showDrawer"></span>
</div>
</header>
</template>
<script>
export default {
methods: {
// 调用 store 中的 actions 中的 changeDrawer 来改变drawerOpened
showDrawer: function () {
this.$store.dispatch('changeDrawer').then(() => {
console.log(this.$store.getters.drawer)
})
}
}
}
</script>
<style lang="stylus">
header
height 1.2rem /* 90/75 */
background-color #f6f6f6
width 100%
box-sizing border-box
padding .266667rem /* 20/75 */
display flex
justify-content space-between
position fixed
z-index 999
top 0
left 0
.right
.thline
vertical-align top
display inline-block
height .026667rem /* 2/75 */
padding .266667rem /* 20/75 */ 0
margin-left .4rem /* 30/75 */
width .666667rem /* 50/75 */
background-clip content-box
background-color main-color
border-top .026667rem /* 2/75 */ solid main-color
border-bottom .026667rem /* 2/75 */ solid main-color
.thline::before
content ''
display inline-block
background-color red
width .186667rem /* 14/75 */
height .186667rem /* 14/75 */
border-radius 50%
position relative
top -.6rem /* 45/75 */
left .533333rem /* 40/75 */
</style>
到这里就结束了，好想讲的有点多，又没什么用的样子，但还是谢谢能看到这里的人