vue实现抽屉弹窗效果_vue抽屉 - CSDN文库

5 浏览量更新于2023-05-03 评论收藏 120KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue实现抽屉弹窗效果实现抽屉弹窗效果

本文实例为大家分享了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>

如下图：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38675341

粉丝: 8
资源: 998

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈