使用 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.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
>
到这里就结束了，好想讲的有点多，又没什么用的样子，但还是谢谢能看到这里的人