连续点击指令 vAsamRepeatClick

使用场景

按住主要鼠标按钮时重复执行回调。

延迟重复与数量上限

按住增加按钮观察重复，松开停止；单次点击也生效。

延迟重复与数量上限

vue

<template>
	<div class="actions">
		<AsamButton type="default" v-asam-repeat-click="options" native-type="button"
			>按住增加（最多20）</AsamButton
		>
		<AsamButton type="default" native-type="button" @click="count = 0">重置计数</AsamButton>
	</div>
	<p class="example-paragraph" role="status">数量 {{ count }}</p>
</template>

<script lang="ts" setup>
defineOptions({ name: 'vAsamRepeatClickBasicDemo' });
import { ref } from 'vue';
import { AsamButton, vAsamRepeatClick } from '@asam-ui/ui';
import type { AsamRepeatClickOptions } from '@asam-ui/ui';
const count = ref(0);
const options: AsamRepeatClickOptions = {
	delay: 400,
	interval: 120,
	handler: () => {
		count.value = Math.min(count.value + 1, 20);
	}
};
</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 class="actions">
		<AsamButton type="default" v-asam-repeat-click="options" native-type="button"
			>按住增加（最多20）</AsamButton
		>
		<AsamButton type="default" native-type="button" @click="count = 0">重置计数</AsamButton>
	</div>
	<p class="example-paragraph" role="status">数量 {{ count }}</p>
</template>

<script setup>
defineOptions({ name: 'vAsamRepeatClickBasicDemo' });
import { ref } from 'vue';
import { AsamButton, vAsamRepeatClick } from '@asam-ui/ui';
const count = ref(0);
const options = {
	delay: 400,
	interval: 120,
	handler: () => {
		count.value = Math.min(count.value + 1, 20);
	}
};
</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>

使用约定

绑定函数使用默认节奏，或传入 { handler, delay, interval } 明确控制首次等待与重复间隔。鼠标抬起停止重复，目标卸载执行指令清理。业务回调自行检查范围或忙碌状态，本例限制数量上限。

组合职责与生命周期

SFC 命名 vAsamRepeatClick 后消费业务回调。仅主鼠标按键长按重复执行，mouseup 结束重复，短点击仍调用一次；更新替换回调，卸载释放定时器和监听。绑定函数或 { handler, delay, interval } 可指定重复间隔和启动延迟，不增加组件 size 或业务计数状态。

API

指令 `vAsamRepeatClick`

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

类型 `AsamRepeatClickOptions`

属性名	说明	类型	默认值
`interval`	—	`number \| undefined`	—
`delay`	—	`number \| undefined`	—
`handler`	—	`(...args: unknown[]) => unknown`	—

类型 `AsamRepeatClickBinding`

属性名	说明	类型	默认值
`interval`	—	`number \| undefined`	—
`delay`	—	`number \| undefined`	—
`handler`	—	`(...args: unknown[]) => unknown`	—

类型 `AsamRepeatClickDirective`

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

参数与事件补充说明

参数与事件说明

`created`

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

created 参数与事件数据

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

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

`beforeMount`

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

beforeMount 参数与事件数据

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

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

`mounted`

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

mounted 参数与事件数据

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

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

`beforeUpdate`

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

beforeUpdate 参数与事件数据

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

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamRepeatClickBinding, 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<AsamRepeatClickBinding, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`unmounted`

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

unmounted 参数与事件数据

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

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

`getSSRProps`

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

getSSRProps 参数与事件数据

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

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

`deep`

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

deep 参数与事件数据

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

枚举：false / true

`install`

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

install 参数与事件数据

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

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

vAsamRepeatClick 公开类型视图

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

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

参数与事件说明

`interval`

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

`delay`

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

`handler`

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

handler 参数与事件数据

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

事件参数：(...args: unknown[]): unknown

AsamRepeatClickOptions 公开类型视图

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

// AsamRepeatClickOptions
type PublicContract = {
	"interval"?: number | undefined;
	"delay"?: number | undefined;
	"handler": (...args: unknown[]) => unknown;
};

组合契约按分支生效；请同时查看公开类型。

参数与事件说明

`interval`

必填：按分支；声明来源：ASAM 声明。

`delay`

必填：按分支；声明来源：ASAM 声明。

`handler`

必填：按分支；声明来源：ASAM 声明。

handler 参数与事件数据

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

契约分支 1

事件参数：(...args: unknown[]): unknown

AsamRepeatClickBinding 公开类型视图

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

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamRepeatClickBinding
type PublicContract = AsamRepeatClickBinding;

参数与事件说明

`created`

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

created 参数与事件数据

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

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

`beforeMount`

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

beforeMount 参数与事件数据

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

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

`mounted`

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

mounted 参数与事件数据

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

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

`beforeUpdate`

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

beforeUpdate 参数与事件数据

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

`updated`

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

updated 参数与事件数据

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

`beforeUnmount`

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

beforeUnmount 参数与事件数据

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

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

`unmounted`

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

unmounted 参数与事件数据

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

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

`getSSRProps`

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

getSSRProps 参数与事件数据

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

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

`deep`

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

deep 参数与事件数据

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

枚举：false / true

`install`

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

install 参数与事件数据

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

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

AsamRepeatClickDirective 公开类型视图

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

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

连续点击指令 vAsamRepeatClick

使用场景 ​

延迟重复与数量上限 ​

延迟重复与数量上限

使用约定 ​

组合职责与生命周期 ​

API

指令 vAsamRepeatClick

类型 AsamRepeatClickOptions

类型 AsamRepeatClickBinding

类型 AsamRepeatClickDirective

关联组件

参数与事件说明

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

getSSRProps

deep

install

参数与事件说明

interval

delay

handler

参数与事件说明

interval

delay

handler

参数与事件说明

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

getSSRProps

deep

install

使用场景

延迟重复与数量上限

使用约定

组合职责与生命周期

指令 `vAsamRepeatClick`

类型 `AsamRepeatClickOptions`

类型 `AsamRepeatClickBinding`

类型 `AsamRepeatClickDirective`

`created`

`beforeMount`

`mounted`

`beforeUpdate`

`updated`

`beforeUnmount`

`unmounted`

`getSSRProps`

`deep`

`install`

`interval`

`delay`

`handler`

`interval`

`delay`

`handler`

`created`

`beforeMount`

`mounted`

`beforeUpdate`

`updated`

`beforeUnmount`

`unmounted`

`getSSRProps`

`deep`

`install`