安装

npm i jy-xscroll --save

引入方式

import { XScroll } from 'jy-xscroll'

功能说明

XScroll组件是用来让内部元素可以通过鼠标上线滚动来自动左右滚动

使用示例

 <template>
  <div class="">
    下面是我的组件
    <div class="container">
    <!-- 组件内宽度元素超出时，可以通过鼠标来滚动 -->
        <XScroll>
            <div class="ddd">
                <div>123</div>
                <div>123</div>
                <div>123</div>
                <div>123</div>
                <div>123</div>
                <div>123</div>
            </div>
        </XScroll>
    </div>
    <div>呵呵</div>
  </div>
</template>

<script setup lang="ts">
import { XScroll } from 'jy-xscroll'
</script>

<style scoped lang="less">
.ddd {
  height: 100%;
  display: flex; // 添加这一行
  white-space: nowrap;
  width: auto;

  // 不换行
  &>div {
    display: inline-block;
    flex: none;
    height: 100%;
    width: 200px;
    background-color: red;
    margin-right: 10px;
  }
}

.container {
  height: 300px;
  width: 100%;
}
</style>