好资源导航 » 文章资讯 » VUE组件中的 Drawer 抽屉实现代码

VUE组件中的 Drawer 抽屉实现代码

2023-08-18 03:23:05 73

因为项目中用的是element-ui框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下：

drawer.vue




.drawer{
/*遮罩*/
.mask-show{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10;
background-color:rgba(0,0,0,.5);
opacity:1;
transition:opacity.5s;
}
.mask-hide{
opacity:0;
transition:opacity.5s;
}
/*滑块*/
.main{
position:fixed;
z-index:10;
top:0;
height:100%;
background:#fff;
transition:all0.5s;
}
.main-show{
opacity:1;
}
.main-hide{
opacity:0;
}
/*某个元素内部显示*/
.inner{
position:absolute;
}
/*其他样式*/
.drawer-head{
display:flex;
justify-content:space-between;
height:45px;
line-height:45px;
padding:015px;
font-size:14px;
font-weight:bold;
border-bottom:1pxsolid#eee;
.close-btn{
display:inline-block;
cursor:pointer;
height:100%;
padding-left:20px;
}
}
.drawer-body{
font-size:14px;
padding:15px;
}
}

组件具体使用如下：

总结

以上所述是小编给大家介绍的VUE组件中的Drawer抽屉实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
514930285
czq8825@qq.com

VUE组件中的 Drawer 抽屉实现代码

热门推荐

随机推荐