horizontal-scroll-plus

概述

horizontal-scroll-plus 组件是一个用于实现水平滚动效果的 Vue3 组件。它允许用户在固定高度和宽度的容器中水平滚动内容，支持可选的包装样式。

特性

• 自适应宽度和高度
• 可选包装元素
• 响应式设计，支持窗口大小调整
• 隐藏默认滚动条以提供更干净的外观

安装与使用

npm install horizontal-scroll-plus

使用示例

<template> 
    <horizontal-scroll-plus>
      // 未使用 wrapper ,需要父盒子包裹,并且 flex
      <div style="cursor: pointer; display: flex">
        <div style="width: 300px; height: 200px; background-color: red; flex-shrink: 0">1</div>
        <div style="width: 500px; height: 200px; background-color: blue; flex-shrink: 0">1</div>
        <div style="width: 500px; height: 200px; background-color: black; flex-shrink: 0">1</div>
      </div>
    </horizontal-scroll-plus>

    <horizontal-scroll-plus width="600px" height="200px" wrapper>
       // 使用 wrapper ,不需要盒子包裹, wrapper 已经默认占据 100% 空间
      <div style="width: 300px; height: 200px; background-color: red; flex-shrink: 0">1</div>
      <div style="width: 500px; height: 200px; background-color: blue; flex-shrink: 0">1</div>
      <div style="width: 500px; height: 200px; background-color: black; flex-shrink: 0">1</div>
    </horizontal-scroll-plus>
</template>

<script>
import horizontalScroll from "horizontal-scroll-plus"

export default {
  components: {
    horizontalScroll
  }
}
</script>

Props

| Prop | Type | Default | Description | | --------------- | -------- | ------- | ---------------------------------------------- | | width | Number | String | "100%" | 容器宽度，可以是数字或字符串（如 "300px"）。 | | height | Number | String | "100%" | 容器高度，可以是数字或字符串（如 "200px"）。 | | wrapper | Boolean | false | - 是否启用包裹元素。 wrapper 为 true 生效 | | wrapper-style | - Object | - {} | - 包裹元素自定义样式对象。wrapper 为 true 生效 | | wrapper-class | - String | - "" | - 包裹元素自定义类名。wrapper 为 true 生效 |

通过以上文档，你可以轻松地集成并使用这个水平滚动组件。如果有任何问题，请随时提出！