使用 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 >

myDrawer.vue

< 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.466667 rem /* 260/75 */

width 8 rem /* 600/75 */

background-size 8 rem 3.466667 rem /* 260/75 */

display flex

justify-content center

align-items center

img

width 1.733333 rem /* 130/75 */

height 1.733333 rem /* 130/75 */

border-radius 50 %

margin-right .266667 rem /* 20/75 */

.login

color white

.log1

font-size 28 px ; /*px*/

.log2

font-size 25 px ; /*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.2 rem /* 90/75 */

background-color # f6f6f6

width 100 %

box-sizing border-box

padding .266667 rem /* 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 .026667 rem /* 2/75 */

padding .266667 rem /* 20/75 */ 0

margin-left .4 rem /* 30/75 */

width .666667 rem /* 50/75 */

background-clip content-box

background-color main-color

border-top .026667 rem /* 2/75 */ solid main-color

border-bottom .026667 rem /* 2/75 */ solid main-color

.thline ::before

content ''

display inline-block

background-color red

width .186667 rem /* 14/75 */

height .186667 rem /* 14/75 */

border-radius 50 %

position relative

top -. 6 rem /* 45/75 */

left .533333 rem /* 40/75 */

</ style >

到这里就结束了，好想讲的有点多，又没什么用的样子，但还是谢谢能看到这里的人