vue实现抽屉弹窗效果
2020-11-18 04:07
1116 查看
本文实例为大家分享了vue实现抽屉弹窗效果的具体代码,供大家参考,具体内容如下
以下代码比较简单。主要就是实现 侧边弹窗而且不会影响页面操作的方式,求点赞!!!不多说直接贴代码。
<template> <div> <div :class='{"itemCount":true,"leftT":!leftShow,"left":leftShow}'>//这种写法是动态获取样式 <div style="font-size:60px;">表格数据</div> <div>//下面就是弹框内的样式。按自己需要放样式(我这里拿表格举例吧) <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="150"> </el-table-column> <el-table-column label="配送信息"> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column label="地址"> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column prop="zip" label="邮编" width="120"> </el-table-column> </el-table-column> </el-table-column> </el-table> </div> </div> </div> </template> export default { data(){ leftShow:false } } <script> </script> <style lang='less' scoped> //下面是设置的样式。就可以实现了。 .itemCount { position: absolute; top: 30%; background: yellowgreen; height:600px; padding: 10px; width:1000px; z-index: 2 } .left { left:0; transition: left 0.5s; } .leftT { left:-1200px; transition: left 0.5s; </style>
如下图:
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- 2018.01.29.使用vue组件modal制作登陆弹窗,并实现背景灰蒙透明效果
- 使用Vue组件实现一个简单弹窗效果
- HTML 底部弹窗实现抽屉效果
- vue.js-div滚动条隐藏但有滚动效果的实现方法
- vue实现下拉效果
- QT中QToolBox的使用,实现抽屉效果
- Vue实现移动端页面切换效果【推荐】
- 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
- jquery实现弹窗效果
- 手写Vue弹窗Modal的实现代码
- JQuery实现的弹窗效果
- vue如何实现tab栏点击高亮效果
- vue中实现左右联动的效果
- vue实现树形菜单效果
- vue+ElementUI实现订单页动态添加产品效果
- vue里mint-ui的picker弹窗的穿透效果 禁止
- Android 抽屉效果的导航菜单实现
- Vue 实现前进刷新后退不刷新的效果
- DrawerLayout实现抽屉效果
- QT学习 第一章:基本对话框--实现QQ抽屉效果