es-big-screen

To use AMap for geographic data visualization:

1. Install dependencies: yarn add @amap/amap-jsapi-loader and yarn add @amap/amap-jsapi-types -D.
2. Obtain an API Key from the AMap developer portal (Web端 JS API).
3. Use the AMapLoader to load the API and initialize the map instance.

The component exposes the map instance via defineExpose.

<template>
	<div id="mapContainer"></div>
</template>

<script setup lang='ts'>
import { onMounted, shallowRef } from 'vue'
import '@amap/amap-jsapi-types'
import AMapLoader from '@amap/amap-jsapi-loader'

const map = shallowRef<AMap.Map | null>(null)

function initMap() {
  AMapLoader.load({
    key: 'YOUR_AMAP_API_KEY', // Replace with your actual key
    version: '2.0',
    plugins: [],
  }).then((MyAMap: typeof AMap) => {
    map.value = new MyAMap.Map('mapContainer', {
      mapStyle: 'amap://styles/darkblue'
    })
  }).catch(e => {
    console.log(e);
  })
}

onMounted(() => {
  initMap()
})

defineExpose({
  map
})
</script>

<style lang='scss'>
#mapContainer {
  width: 100%;
  height: 100%;
}
.amap-logo, .amap-copyright {
  opacity: 0;
}
</style>

To enable draggable component layouts, use the useSortable hook which wraps SortableJS.

1. Install SortableJS: yarn add sortablejs.
2. Pass a reactive list (e.g., a shallowRef of components) to useSortable.
3. Bind the returned containerRef to the parent element containing the draggable items.

The hook automatically synchronizes the underlying data array when items are reordered.

<template>
	<div ref="containerRef">
		<component
			v-for="item in components"
			:key="item.name"
			:is="item.component"
			class="es-screen-right-item"
		>
			{{ item.name }}
		</component>
	</div
</template>

<script setup lang='ts'>
import { shallowRef } from 'vue'
import { useSortable } from '@/utils/useSortable'
import Right1 from './Right1.vue'
import Right2 from './Right2.vue'
import Right3 from './Right3.vue'

const components = shallowRef([
	{ name: 'right1', component: Right1 },
	{ name: 'right2', component: Right2 },
	{ name: 'right3', component: Right3 }
])

const { containerRef } = useSortable(components)
</script>

For a simpler implementation, use the SeamlessScroll component which wraps the useSeamlessScroll hook. This component handles the container setup and provides a slot for your list items.

Props:

• width: (String | Number) The width of the component.
• height: (String | Number) The height of the component.
• option: (Object) An OptionsType object to configure direction, gap, and duration.

Usage Example (Vertical Scrolling):

<template>
  <SeamlessScroll class="es-list" :option="{ direction: 'vertical' }">
    <div v-for="item in 15" class="es-item">{{ 'Item ' + item }}</div>
  </SeamlessScroll>
</template>

<script setup lang='ts'>
import SeamlessScroll from '@/components/SeamlessScroll.vue'
</script>

<style>
.es-list {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.es-item {
  position: absolute;
  height: 20px;
}
</style>

<template>
	<SeamlessScroll class="es-list" :option="{ direction: 'vertical' }">
		<div v-for="item in 15" class="es-item">{{ '热销商品的占比 ' + item }}</div>
	</SeamlessScroll>
</template>

<script setup lang='ts'>
import SeamlessScroll from '@/components/SeamlessScroll.vue'
</script>

<style lang='scss' scoped>
.es-list {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	.es-item {
		position: absolute;
		height: 20px;
	}
}
</style>

The useSeamlessScroll hook provides seamless horizontal or vertical scrolling using animejs.

Prerequisites: Install animejs via yarn:

yarn add animejs

Parameters:

• listRef: A Vue Ref<HTMLElement | null> pointing to the container element that holds the list items.
• options: An OptionsType object:
  • direction: 'horizontal' (default) or 'vertical'.
  • gap: The spacing between items in pixels (default: 10).
  • duration: The animation duration in milliseconds (default: 10000).

Returns: An object containing:

• listRef: The ref used for the container.
• pause: Function to pause the animation.
• play: Function to resume the animation.
• animation: The raw animejs animation instance.

import { ref } from 'vue'
import { useSeamlessScroll } from '@/utils/useSeamlessScroll'

const listRef = ref()
// Initializes horizontal scrolling with default options
useSeamlessScroll(listRef)

/* 
Template requirement: 
- An outer container with `overflow: hidden` to prevent scrollbar visibility.
- The `listRef` element containing the items.
- Items should ideally be positioned (e.g., `position: absolute`) if they need to overlap or follow specific layout logic.
*/