vue实现抽屉弹窗效果


Posted in Javascript onNovember 15, 2020

本文实例为大家分享了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实现抽屉弹窗效果

vue实现抽屉弹窗效果

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
js实现筛选功能
Nov 24 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 #Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 #Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
You might like
Zend Framework动作助手Url用法详解
2016/03/05 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
Javascript实现字数统计
2015/07/03 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Python注释详解
2016/06/01 Python
python中的lambda表达式用法详解
2016/06/22 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
美术专业学生个人自我评价
2013/09/19 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
小学生安全保证书
2015/05/09 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Python 发送SMTP邮件的简单教程
2021/06/24 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS