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 相关文章推荐
PHP中CURL的几个经典应用实例
Jan 23 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
js选择器全面解析
Jun 27 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 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
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
php四种定界符详解
2017/02/16 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python opencv调用笔记本摄像头
2019/08/28 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python yield的用法实例分析
2020/03/06 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
财务会计专业个人求职信范本
2014/01/08 职场文书
文明餐桌活动方案
2014/02/11 职场文书
企业职业病防治方案
2014/05/29 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书