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>

如下图：

本文地址：https://blog.csdn.net/woyaojinali/article/details/109649043