element-ui的<el-scrollbar 我的满宽度后溢出来了,能帮解决?

image.png

<script setup>
import {useTagViewStore} from "@/pinia/modules/main.js";
import {useRouter} from "vue-router";

let tagViewStore = useTagViewStore()
let router = useRouter()
const itemClicked = (path) => {
  router.push({path: path})
}
const itemClosed = (routerObj, index) => {
  let replacePath
  let tagViewLength = tagViewStore.tagViews.length
  if (tagViewLength <= 1) {
    replacePath = '/admin'
  } else {
    replacePath = tagViewStore.tagViews[index < tagViewLength - 1 ? index + 1 : index - 1].path
  }
  tagViewStore.delTagView(routerObj)
  router.replace({path: replacePath})
}

// routerTo(routerObj.fullPath)
// closeTagView(routerObj,index)
</script>

<template>
  <div style="padding-top: 0.3rem;margin-bottom: 0.3rem;height: 2.2rem;background-color: rgb(41 41 41)">
      <!--      <el-tag v-for="(routerObj,index) in tagViewStore.tagViews"-->
      <!--              closable-->
      <!--              style="cursor: pointer;user-select: none"-->
      <!--              :effect="routerObj.fullPath===router.currentRoute.value.path?'dark':'light'"-->
      <!--              size="large"-->
      <!--              :disable-transitions="false"-->
      <!--              @click="itemClicked(routerObj.fullPath)"-->
      <!--              @close="itemClosed(routerObj,index)">-->
      <!--        &lt;!&ndash;            <router-link :to="" active-class="tagViewActive"></router-link>&ndash;&gt;-->
      <!--        {{ routerObj.meta.title }}-->
      <!--      </el-tag>-->
    <el-scrollbar>
      <div style="display: flex;flex-direction: row">
        <div class="item-style"
        >
          <div style="font-size: 0.8rem;padding-right: 2rem;margin-left: 0.6rem;color: white">
            首页
          </div>
        </div>

        <div v-for="(routerObj,index) in tagViewStore.tagViews"
             @click="itemClicked(routerObj.fullPath)"
             class="item-style"
             :class="{'aaa':routerObj.fullPath===router.currentRoute.value.path,'bbb':routerObj.fullPath!==router.currentRoute.value.path}"
        >
          <div style="font-size: 0.8rem;padding-right: 2rem;margin-left: 0.6rem">
            {{ routerObj.meta.title }}
          </div>
          <el-icon @click.stop="itemClosed(routerObj,index)" class="close-icon">
            <Close/>
          </el-icon>
        </div>
      </div>
    </el-scrollbar>
  </div>

</template>

<style scoped lang="scss">
.el-tag + .el-tag {
  margin-left: 0.4rem;
}


.aaa {
  background-image: linear-gradient(to top, #ffffff 0%, #ffffff 100%);
  color: black;
  height: 2rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px
}
.aaa .close-icon{
  color: black;
}

.bbb {
  background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
  color: #ffffff;
  height: 1.65rem;
  border-radius: 30px;
}

.bbb:hover {
  background-image: linear-gradient(to top, #88b2fd 0%, #2fc9ff 100%);
}

.close-icon {
  padding: 0.2rem;
  font-size: 0.8rem;
  color: white;
  margin-right: 0.4rem;
  border-radius: 50%;
}
.close-icon:hover {
  color: white;
  background-color: #0094dd;
}

.item-style {
  margin-top: 0.4rem;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  //padding-left: 0.6rem;
  //padding-right: 0.6rem;
  cursor: pointer;
  margin-left: 0.2rem;
  margin-right: 0.2rem;

}
</style>
阅读 1.3k
avatarAI BotBETA

当使用 el-scrollbar 组件时,如果内容超出了其容器的宽度,通常是因为内部内容的布局或样式设置不当。在你的情况中,问题可能出现在 display: flex; flex-direction: row; 的使用上,这可能会导致子元素无限延伸而不考虑 el-scrollbar 的宽度限制。

要解决这个问题,你可以尝试以下步骤:

  1. 设置 el-scrollbar 的固定宽度:确保 el-scrollbar 有一个明确的宽度,这样它就能正确地限制内部内容的宽度。
  2. 使用 overflow-x: auto;:虽然 el-scrollbar 组件通常会自动处理滚动,但在某些情况下,直接在外部容器上设置 overflow-x: auto; 可能有帮助。
  3. 限制内部元素的宽度:如果内部元素(如你的 .item-style 类)没有明确的宽度限制,它们可能会扩展以容纳所有内容,导致溢出。你可以尝试为它们设置最大宽度或百分比宽度。
  4. 检查父元素的宽度:确保 el-scrollbar 的父元素也有足够的宽度来包含 el-scrollbar 和它的内容。
  5. 使用 Flexbox 的 flex-wrap:如果内容太多,并且你不希望它们水平滚动,可以考虑使用 flex-wrap: wrap; 来允许内容换行。

针对你的情况,一个可能的解决方案是设置 el-scrollbar 和其内部容器的固定宽度,并确保内部元素不会超出这个宽度。这里是一个简化的示例:

<template>
  <div style="width: 100%; overflow-x: auto;">
    <el-scrollbar style="max-width: 100%;">
      <div style="display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%;">
        <!-- 你的循环元素 -->
        <div class="item-style" v-for="...">
          <!-- 元素内容 -->
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style>
.item-style {
  /* 设置最大宽度或百分比宽度 */
  max-width: calc(100% / 4); /* 假设你想每行显示4个元素 */
  /* 其他样式 */
}
</style>

注意:上面的示例中,我假设你希望每行显示固定数量的元素,并据此设置了 .item-stylemax-width。你需要根据你的具体需求调整这个值。同时,请注意,如果内容太多而空间不足,可能需要考虑使用分页、加载更多或类似的功能来优化用户体验。

1 个回答

统一放在一个容器里,然后这个容器是滚动条还是换行都可以。

这里也可以用 menu 什么的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏