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页面上拖放移动标签
Jan 08 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
JS实现放大镜效果
2020/09/21 Javascript
python求素数示例分享
2014/02/16 Python
Python with的用法
2014/08/22 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
售后服务承诺书
2014/03/26 职场文书
财产公证书
2014/04/10 职场文书
低碳生活倡议书
2014/04/14 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL