BestHub
Sign in
Tag

Directive

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 11, 2025 · Frontend Development

How to Build a Custom Vue3 Auto‑Scrolling Table Directive with Element‑Plus

This article explains how to create a custom Vue 3 directive for automatic scrolling of Element‑Plus tables, covering the underlying logic, handling mouse events, conditional scrolling, and integration steps with code examples, enabling developers to implement smooth list carousels without third‑party plugins.

Auto-ScrollDirectiveElement-Plus
0 likes · 8 min read
How to Build a Custom Vue3 Auto‑Scrolling Table Directive with Element‑Plus
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 13, 2025 · Frontend Development

Preventing Duplicate Button Submissions with Debounce, Loading State, and a Vue 3 Directive

This article explains how repeated button clicks cause duplicate submissions, demonstrates using debounce and a loading‑disabled state to mitigate the issue, and shows how to encapsulate the solution into a reusable Vue 3 directive with complete code examples.

DebounceDirectiveJavaScript
0 likes · 9 min read
Preventing Duplicate Button Submissions with Debounce, Loading State, and a Vue 3 Directive
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 22, 2025 · Frontend Development

Vue Directive for Continuous List Scrolling Animation with Pause on Interaction

This article explains how to create a reusable Vue directive that animates a list scrolling continuously using requestAnimationFrame, allows pausing on mouse click, and lets users adjust the scroll speed, with a complete code example and detailed implementation notes.

DirectiveVueanimation
0 likes · 5 min read
Vue Directive for Continuous List Scrolling Animation with Pause on Interaction
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 16, 2023 · Frontend Development

Implementing Input Debounce and Throttle in Vue 3 Directives with Chinese Input Support

This article explains how to create a reusable Vue 3 directive that applies debounce and throttle to input events, addresses the extra triggers caused by Chinese IME composition, and provides complete TypeScript code examples and usage instructions.

DebounceDirectiveJavaScript
0 likes · 9 min read
Implementing Input Debounce and Throttle in Vue 3 Directives with Chinese Input Support
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 12, 2023 · Frontend Development

Implementing Resizable Elements with Vue Directives (v‑resize)

This article explains how to create a Vue directive for element resizing, covering basic right‑side resizing, handling trigger zones, enforcing minimum dimensions, adding left/right multi‑direction support, and providing complete JavaScript and TypeScript implementations with usage examples and future enhancements.

DirectiveJavaScriptResize
0 likes · 16 min read
Implementing Resizable Elements with Vue Directives (v‑resize)
360 Quality & Efficiency
360 Quality & Efficiency
Mar 6, 2020 · Frontend Development

Implementing Long‑Press Functionality in Vue with JavaScript

This article explains how to create a long‑press button in a Vue application by using native JavaScript events, timers, and a custom Vue directive, covering variable setup, start and cancel functions, event listeners for mouse and touch, and error handling for non‑function bindings.

DirectiveJavaScriptLong Press
0 likes · 8 min read
Implementing Long‑Press Functionality in Vue with JavaScript
Cloud Native Technology Community
Cloud Native Technology Community
Feb 18, 2020 · Frontend Development

RxAsync Directive: Elegant Async Loading, Reload, and Retry Handling in Angular

The article presents the RxAsync Angular directive, which uses ObservableInput and RxJS to simplify asynchronous UI patterns by automatically managing loading, reload, and retry states, providing a clear, reactive alternative to complex imperative code.

AngularDirectiveRxJS
0 likes · 7 min read
RxAsync Directive: Elegant Async Loading, Reload, and Retry Handling in Angular