24 lines
860 B
Vue
24 lines
860 B
Vue
<script setup lang="ts">
|
||
// autoHide：never 常显 / scroll 滚动时显示 / move 鼠标移动或滚动时显示 / leave 移出后隐藏
|
||
import { G3Scrollbar, G3Space } from '@g3soft/ui'
|
||
|
||
const strategies = ['never', 'scroll', 'move', 'leave'] as const
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space :size="12" wrap align="start">
|
||
<div v-for="mode in strategies" :key="mode" style="width: 180px">
|
||
<p style="margin: 0 0 6px; font-size: 12px; color: #6b7280">{{ mode }}</p>
|
||
<G3Scrollbar
|
||
:auto-hide="mode"
|
||
:aria-label="`autoHide=${mode} 的滚动区域`"
|
||
style="height: 120px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 8px"
|
||
>
|
||
<div v-for="index in 12" :key="index" style="padding: 4px 0; font-size: 13px">
|
||
第 {{ index }} 行
|
||
</div>
|
||
</G3Scrollbar>
|
||
</div>
|
||
</G3Space>
|
||
</template>
|