滚轮指令 AsamMousewheel

使用场景

将滚轮原始事件与归一化位移提供给宿主。

读取归一化滚轮位移

在框内滚动查看累计像素；本例不阻止页面的默认滚动。

读取归一化滚轮位移

vue

<template>
	<div v-asam-mousewheel="track" class="panel">
		<p class="example-paragraph">在这里滚动滚轮</p>
		<p class="example-paragraph" role="status">累计垂直位移 {{ pixels }} px</p>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamMousewheelBasicDemo' });
import { ref } from 'vue';
import { AsamMousewheel as vAsamMousewheel } from '@asam-ui/ui';
import type { AsamMousewheelBinding } from '@asam-ui/ui';
const pixels = ref(0);
const track: AsamMousewheelBinding = (_event, normalized) => {
	pixels.value += normalized.pixelY;
};
</script>

<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}

.panel {
	padding: var(--asam-space-lg);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div v-asam-mousewheel="track" class="panel">
		<p class="example-paragraph">在这里滚动滚轮</p>
		<p class="example-paragraph" role="status">累计垂直位移 {{ pixels }} px</p>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamMousewheelBasicDemo' });
import { ref } from 'vue';
import { AsamMousewheel as vAsamMousewheel } from '@asam-ui/ui';
const pixels = ref(0);
const track = (_event, normalized) => {
	pixels.value += normalized.pixelY;
};
</script>

<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}

.panel {
	padding: var(--asam-space-lg);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

使用约定

绑定回调接收 WheelEvent 与 spinX/spinY/pixelX/pixelY。可按需调用 event.preventDefault，但要让页面其他区域继续正常滚动。卸载移除监听；本入口没有组件 Props 或 size。

组合职责与生命周期

SFC 命名 vAsamMousewheel 后接收原 WheelEvent 与归一化滚轮数据。业务选择是否阻止默认滚动，卸载会移除宿主监听；它不提供滚动容器或无限加载状态。

API

指令 `AsamMousewheel`

属性名	说明	类型	默认值
`created`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`beforeMount`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`mounted`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`beforeUpdate`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> \| undefined`	—
`updated`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> \| undefined`	—
`beforeUnmount`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`unmounted`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`getSSRProps`	—	`(typeof AsamMousewheel)["getSSRProps"]`	—
`deep`	—	`boolean \| undefined`	—
`install`	—	`(app: App) => void`	—

类型 `AsamMousewheelBinding`

(event: WheelEvent, normalized: { spinX: number; spinY: number; pixelX: number; pixelY: number; }): void

类型 `AsamMousewheelDirective`

属性名	说明	类型	默认值
`created`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`beforeMount`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`mounted`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`beforeUpdate`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> \| undefined`	—
`updated`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> \| undefined`	—
`beforeUnmount`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`unmounted`	—	`DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> \| undefined`	—
`getSSRProps`	—	`(AsamMousewheelDirective)["getSSRProps"]`	—
`deep`	—	`boolean \| undefined`	—
`install`	—	`(app: App) => void`	—

参数与事件补充说明

参数与事件说明

`created`

必填：否；声明来源：依赖声明。

created 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeMount`

必填：否；声明来源：依赖声明。

beforeMount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`mounted`

必填：否；声明来源：依赖声明。

mounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeUpdate`

必填：否；声明来源：依赖声明。

beforeUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void

`updated`

必填：否；声明来源：依赖声明。

updated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

`beforeUnmount`

必填：否；声明来源：依赖声明。

beforeUnmount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`unmounted`

必填：否；声明来源：依赖声明。

unmounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`getSSRProps`

必填：否；声明来源：依赖声明。

getSSRProps 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(typeof AsamMousewheel)["getSSRProps"]>, (...args: never[]) => unknown>>

`deep`

必填：否；声明来源：依赖声明。

deep 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`install`

必填：是；声明来源：ASAM 声明。

install 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(app: App<any>): void

AsamMousewheel 公开类型视图

import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamMousewheelBinding, AsamMousewheelDirective } from '@asam-ui/ui';
import { AsamMousewheel } from '@asam-ui/ui';

// AsamMousewheel
type PublicContract = {
	"created"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"beforeMount"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"mounted"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> | undefined;
	"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> | undefined;
	"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"unmounted"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"getSSRProps"?: (typeof AsamMousewheel)["getSSRProps"];
	"deep"?: boolean | undefined;
	"install": (app: App) => void;
};

包含 WheelEvent，以及固定指令规范化后的 spinX、spinY、pixelX、pixelY 值。

AsamMousewheelBinding 公开类型视图

import type { AsamMousewheelBinding } from '@asam-ui/ui';

// AsamMousewheelBinding
type PublicContract = {
	(event: WheelEvent, normalized: { spinX: number; spinY: number; pixelX: number; pixelY: number; }): void;
};

参数与事件说明

`created`

必填：否；声明来源：依赖声明。

created 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeMount`

必填：否；声明来源：依赖声明。

beforeMount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`mounted`

必填：否；声明来源：依赖声明。

mounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeUpdate`

必填：否；声明来源：依赖声明。

beforeUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

`updated`

必填：否；声明来源：依赖声明。

updated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

`beforeUnmount`

必填：否；声明来源：依赖声明。

beforeUnmount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`unmounted`

必填：否；声明来源：依赖声明。

unmounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`getSSRProps`

必填：否；声明来源：依赖声明。

getSSRProps 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(binding: DirectiveBinding<AsamMousewheelBinding, string, unknown>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(AsamMousewheelDirective)["getSSRProps"]>, (...args: never[]) => unknown>>

`deep`

必填：否；声明来源：依赖声明。

deep 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`install`

必填：是；声明来源：ASAM 声明。

install 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(app: App<any>): void

AsamMousewheelDirective 公开类型视图

import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamMousewheelDirective, AsamMousewheelBinding } from '@asam-ui/ui';

// AsamMousewheelDirective
type PublicContract = {
	"created"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"beforeMount"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"mounted"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> | undefined;
	"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamMousewheelBinding, string, unknown> | undefined;
	"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"unmounted"?: DirectiveHook<HTMLElement, null, AsamMousewheelBinding, string, unknown> | undefined;
	"getSSRProps"?: (AsamMousewheelDirective)["getSSRProps"];
	"deep"?: boolean | undefined;
	"install": (app: App) => void;
};

滚轮指令 AsamMousewheel

使用场景 ​

读取归一化滚轮位移 ​

读取归一化滚轮位移

使用约定 ​

组合职责与生命周期 ​

API

指令 AsamMousewheel

类型 AsamMousewheelBinding

类型 AsamMousewheelDirective

关联组件

参数与事件说明

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

getSSRProps

deep

install

参数与事件说明

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

getSSRProps

deep

install

使用场景

读取归一化滚轮位移

使用约定

组合职责与生命周期

指令 `AsamMousewheel`

类型 `AsamMousewheelBinding`

类型 `AsamMousewheelDirective`

`created`

`beforeMount`

`mounted`

`beforeUpdate`

`updated`

`beforeUnmount`

`unmounted`

`getSSRProps`

`deep`

`install`

`created`

`beforeMount`

`mounted`

`beforeUpdate`

`updated`

`beforeUnmount`

`unmounted`

`getSSRProps`

`deep`

`install`