el-drawer抽屉可伸缩

最新推荐文章于 2024-07-21 17:32:26 发布

学习鸭

最新推荐文章于 2024-07-21 17:32:26 发布

阅读量296

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_47451403/article/details/139522683

版权

el-drawer抽屉可伸缩动态改变抽屉的宽度

  <div>
    <el-drawer
      v-model="visible"
      :size="`${width}px`"
      :with-header="false"
      :custom-class="'drawer_custom'"
    >
      <div>基本信息</div>
    </el-drawer>
  </div>

import { defineComponent, computed, onMounted,ref } from "vue";
export default defineComponent({
  setup(props, ctx) {
    const width = ref(1200);
    onMounted(() => {
      const element: any = document.getElementsByClassName("drawer_custom")[0];
      if (!element) {
        return;
      }
      let flag = false;
      element.onmousedown = function (e) {
        const attribute = e.target.getAttribute("class");
        if (attribute && attribute.indexOf("drawer_custom") !== -1) {
          flag = true;
        }
      };
      document.onmousemove = function (e) {
        if (flag) {
          if (
            document.body.clientWidth + 100 - e.clientX <= 1500 &&
            document.body.clientWidth + 100 - e.clientX >= 900
          ) {
            element.style.width =
              document.body.clientWidth + 100 - e.clientX + "px";
          }
        }
      };
      document.onmouseup = function () {
        flag = false;
      };
    });
    return { visible,width };
  },
});

<style scoped lang="scss">
:deep .drawer_custom {
  .el-drawer__body {
    overflow: auto;
  }
}
:deep .drawer_custom:before {
  position: absolute;
  top: 0%;
  content: "";
  display: inline-block;
  z-index: 1;
  width: 0;
  height: 100%;
  border-width: 10px;
  border-style: solid;
  border-color: transparent; /* transparent 设置边框颜色透明 */
  cursor: w-resize;
}
</style>