fix(ui/sticky): 增加scroll事件监听

affects: @varlet/ui

packages/varlet-ui/src/sticky/Sticky.vue

@@ -9,7 +9,6 @@
 	>
 		<div
 			class="var-sticky__wrapper"
-			ref="scannerEl"
 			:style="{
 				position: isFixed ? 'fixed' : null,
 				left: isFixed ? fixedLeft : null,
@@ -61,8 +60,12 @@ export default defineComponent({
 				fixedTop.value = `${scrollerTop + offsetTop.value}px`
 				fixedLeft.value = `${stickyLeft}px`
 				isFixed.value = true
+
+				props.onScroll?.(offsetTop.value, isFixed.value)
 			} else {
 				isFixed.value = false
+
+				props.onScroll?.(currentOffsetTop, isFixed.value)
 			}
 		}
 

packages/varlet-ui/src/sticky/example/index.vue

@@ -9,7 +9,7 @@
 		</var-sticky>
 
 		<div class="scroller">
-			<var-sticky style="margin-top: 100px" offset-top="50px">
+			<var-sticky style="margin-top: 100px" offset-top="50px" @scroll="handleScroll">
 				<var-button>50px</var-button>
 			</var-sticky>
 			<div class="i"></div>
@@ -28,6 +28,14 @@ export default defineComponent({
 		[Sticky.name]: Sticky,
 		[Button.name]: Button,
 	},
+	setup() {
+		return {
+			handleScroll(top, isFixed) {
+				console.log(top)
+				console.log(isFixed)
+			},
+		}
+	},
 })
 </script>
 

packages/varlet-ui/src/sticky/props.ts

@@ -14,4 +14,7 @@ export const props = {
 		type: Number,
 		default: 10,
 	},
+	onScroll: {
+		type: Function,
+	},
 }

packages/varlet-ui/src/tabs/Tabs.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="var-tabs"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'VarTabs',
+})
+</script>
+
+<style lang="less">
+.var-tabs {
+	display: flex;
+}
+</style>

packages/varlet-ui/src/tabs/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+const Tabs = require('../../../cjs/tabs').default
+const { render } = require('@testing-library/vue')
+
+test('test tabs', async () => {
+	const wrapper = render(Tabs)
+	console.log(wrapper)
+})

packages/varlet-ui/src/tabs/example/index.vue

@@ -0,0 +1,21 @@
+<template>
+	<var-tabs />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Tabs from '..'
+
+export default defineComponent({
+	name: 'TabsExample',
+	components: {
+		[Tabs.name]: Tabs,
+	},
+})
+</script>
+
+<style scoped>
+.example {
+	background: antiquewhite;
+}
+</style>

packages/varlet-ui/src/tabs/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Tabs from './Tabs.vue'
+
+Tabs.install = function (app: App) {
+	app.component(Tabs.name, Tabs)
+}
+
+export default Tabs