ElementUI框架el-aside组件实现拖拽改变宽度

效果图

。上菜

<el-aside :style="{ width: `${asideWidth}px` }">
      <div>Aside Content</div>
      <div
        class="resizer"
        @mousedown="startResizing"
      ></div>
    </el-aside>

-----

<script setup lang="ts">

const asideWidth = ref<number>(300); // 初始宽度
let isResizing = false;
let startX = 0;
let startWidth = 0;

const startResizing = (event: MouseEvent) => {
  isResizing = true;
  startX = event.clientX;
  startWidth = asideWidth.value;

  document.addEventListener('mousemove', resizeAside);
  document.addEventListener('mouseup', stopResizing);
};

const resizeAside = (event: MouseEvent) => {
  if (isResizing) {
    const newWidth = startWidth + (event.clientX - startX);
    asideWidth.value = newWidth > 50 ? newWidth : 50; // 设置最小宽度为 50px
  }
};

const stopResizing = () => {
  isResizing = false;
  document.removeEventListener('mousemove', resizeAside);
  document.removeEventListener('mouseup', stopResizing);
};

onMounted(() => {
  document.addEventListener('mouseup', stopResizing);
});

onUnmounted(() => {
  document.removeEventListener('mouseup', stopResizing);
});
</script>
<style scoped>
.el-aside {
  position: relative;
}

.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background-color: rgba(0, 0, 0, 0.2);
}
</style>

完事。直接复制过去就好

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要让 elementui 的 <el-aside> 铺满全屏,你可以这样做: 1. 使用 CSS 的 `height: 100vh` 将 <el-aside> 的高度设为视口高度(viewport height),这样 <el-aside> 就可以铺满整个屏幕。 ```css el-aside { height: 100vh; } ``` 2. 如果你想让 <el-aside> 在有滚动条的情况下仍然铺满全屏,你可以使用 CSS 的 `height: 100%` 将 <el-aside> 的高度设为父元素的高度,然后再设置父元素的高度为视口高度。 ```css el-aside { height: 100%; } body, html { height: 100vh; } ``` 注意:如果你使用了 Bootstrap 或其他 CSS 框架,请确保不会与其冲突。 ### 回答2: 要将Element UI中的<el-aside>元素铺满全屏,可以使用CSS样式来实现。 首先,给<el-aside>元素添加一个类名,比如"full-screen",可以在<el-aside>上通过class绑定属性来设置类名。如下所示: <el-aside class="full-screen"></el-aside> 然后,使用CSS样式将这个类名的元素铺满全屏。可以使用以下样式来实现: .full-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 上述样式中,设置position为absolute,可以脱离文档流;使用top、left、right和bottom属性将元素定位到整个屏幕的四个边缘,实现铺满全屏的效果。 这样,<el-aside>元素就可以铺满整个屏幕了。 注意:铺满全屏时,需要确保<el-aside>的父元素也具有100%的高度,可以设置父元素的高度为100%来实现。否则,<el-aside>元素可能无法完全铺满屏幕。 希望以上回答能够对您有所帮助。如果还有其他问题,请随时提问。 ### 回答3: 要使`<el-aside>`元素铺满全屏,可以使用CSS样式来实现。可以设置其父元素的宽度为100%,然后设置`<el-aside>`元素的宽度和高度为100%。 首先,在父元素中将其宽度设置为100%: ```html <div class="container"> <el-aside>侧边栏内容</el-aside> </div> ``` 然后在CSS样式中,将父元素设置为100%宽度和高度,并将`<el-aside>`元素的宽度和高度也设置为100%: ```css <style> .container { width: 100%; height: 100%; } .container el-aside { width: 100%; height: 100%; } </style> ``` 通过以上设置,`<el-aside>`元素将会铺满整个屏幕。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值