@twoke/seamless-scroll NPM

SeamlessScroll

The component is a scrollable container that can be used to scroll through a list of items.

Demo: https://vuescroll-container.netlify.app/

SeamlessScroll

属性名	描述	默认值	类型
to	滚动方向	top	'top'\|'bottom'\|'left'\|'right'
dishover	是否启用悬停（鼠标悬停停止滚动）	true	Number
width	可视区宽度	auto	Number
height	可视区高度	auto	Number
enable	启动滚动	true	boolean
duration	动画延时	17	Number

快速使用

npm install -S @twoke/seamless-scroll

or

pnpm install -S  @twoke/seamless-scroll

<script setup lang="ts">
import { SeamlessScroll } from '~/composables/scroll-core'

</script>

<template>
  <SeamlessScroll>
  <!-- 图片显示以列的形式展示 -->
    <ImageList :length="3" dir="column" /> 
  </SeamlessScroll>
</template>

ImageList.vue

<script setup lang="ts">
const props = withDefaults(defineProps<{
  length: number
  dir: 'row' | 'column'
}>(), {
  length: 3,
  dir: 'column',
})

</script>

<template>
  <div
    :style="{
      display: 'flex',
      flexDirection: props.dir,
    }"
  >
    <div
      v-for="i in props.length"
      :key="i"
      :style="{
        // 注意事项，横向滚动和纵向滚动会造成item的外边距不受控制，因此，横向滚动设置左右外边距，纵向滚动设置上下外边距
        marginTop: props.dir === 'row' ? '0px' : '5px',
        marginBottom: props.dir === 'row' ? '0px' : '5px',
        marginLeft: props.dir === 'row' ? '5px' : '0px',
        marginRight: props.dir === 'row' ? '5px' : '0px',
      }"
      rounded="10px"
      h50
      w100
      bg-gray-200
      font-mono
      font-size="1.5rem"
      text-blue
      hover="cursor-pointer"
    >
      <img
        w-full h-full
        rounded="10px" :src="`https://picsum.photos/seed/img-${Math.floor(i)}/400/200`" alt=""
      >
    </div>
  </div>
</template>

MessageScroll

属性名	描述	默认值	类型
messages	展示的消息		Array
messageFormat	单条信息格式化	(message: string) => message`, \| Function<(string) => string >

注：这是由SeamlessScroll封装的组件，支持SeamlessScroll的所有属性

<script setup lang="ts">
import { MessageScroll

} from '~/composables/scroll-core'

</script>

<template>
  <MessageScroll
    :messages="['xxxx', 'yyyy', 'zzzz']"
    :message-format="message => `${message}... &nbsp;&nbsp;`"
    to="left"
  />
</template>

TableScroll

属性名	描述	默认值	类型
data	展示的数据		Array

注：这是由SeamlessScroll封装的组件，支持SeamlessScroll的所有属性
快速开始
<script setup lang="ts">
import type { RowData } from '~/composables/scroll-core'
import { defineColumns, defineTableScroll } from '~/composables/scroll-core'

// 定义表头 const columns = defineColumns( { title: 'Name', // 显示的标题 key: 'name', // 显示的key width: '100px', // 列宽 // style?: {} // 列的公共样式 }, { title: 'Age', key: 'age', width: '60px', }, { title: 'Group', key: 'group', width: '60px', }, as const) // 获取表格数据类型 type TableData = RowData // 初始化表格数据 const dataArray: TableData[] = { name: 'John Brown', age: 18, group: 'A', }, { name: 'Jim Green', age: 25, group: 'B', }, { name: 'Joe Black', age: 30, group: 'C', }, { name: 'Jim Red', age: 28, group: 'D', },

// 定义表格组件 const TableScroll = defineTableScroll(columns)

// 表格单行点击事件 const clickItemHandler = function(data: TableData) { alert(点击： ${data.name}) }

> defineTableScroll 定义表格组件
```ts
function defineTableScroll<T>(
  columns: readonly Column[], // 表格
  formatStyle?: (key: string, value: any) => any, // 格式化某个数据项的样式
  tableClass = 'table-scroll', // 可自定义的表格样式
  headerClass = 'table-scroll-header', // 可自定义的表头样式
  bodyClass = 'table-scroll-body', // 可自定义内容样式
  bodyRowClass = 'table-scroll-row') // 可自定义的单行样式