u

code/g3soft-libs/docs/examples/scrollbar/autohide.vue

@@ -0,0 +1,23 @@
+<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>