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 相关文章推荐
JS backgroundImage控制
May 19 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
原生js 实现表单验证功能
Feb 08 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP经典的给图片加水印程序
2006/12/06 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php创建类并调用的实例方法
2019/09/25 PHP
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
质量负责人岗位职责
2015/02/15 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
python脚本框架webpy的url映射详解
2021/11/20 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL