mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: translate useClickAway (#8848)
This commit is contained in:
parent
9e031b74f4
commit
8089eefa20
85
docs/markdown/use-click-away.en-US.md
Normal file
85
docs/markdown/use-click-away.en-US.md
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
# useClickAway
|
||||||
|
|
||||||
|
### Intro
|
||||||
|
|
||||||
|
Triggers a callback when user clicks outside of the target element.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div ref="root" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useClickAway } from '@vant/use';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const root = ref();
|
||||||
|
useClickAway(root, () => {
|
||||||
|
console.log('click outside!');
|
||||||
|
});
|
||||||
|
|
||||||
|
return { root };
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Event
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div ref="root" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useClickAway } from '@vant/use';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const root = ref();
|
||||||
|
useClickAway(
|
||||||
|
root,
|
||||||
|
() => {
|
||||||
|
console.log('touch outside!');
|
||||||
|
},
|
||||||
|
{ eventName: 'touchstart' }
|
||||||
|
);
|
||||||
|
|
||||||
|
return { root };
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Type Declarations
|
||||||
|
|
||||||
|
```ts
|
||||||
|
type Options = {
|
||||||
|
eventName?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function useClickAway(
|
||||||
|
target: Element | Ref<Element | undefined>,
|
||||||
|
listener: EventListener,
|
||||||
|
options?: Options
|
||||||
|
): void;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Params
|
||||||
|
|
||||||
|
| Name | Description | Type | Default Value |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| target | Target element | _Element \| Ref\<Element>_ | - |
|
||||||
|
| listener | Callback function when the outside is clicked | _EventListener_ | - |
|
||||||
|
| options | Options | _Options_ | `{ eventName: 'click' }` |
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
| Name | Description | Type | Default Value |
|
||||||
|
| --------- | ----------- | -------- | ------------- |
|
||||||
|
| eventName | Event name | _string_ | `click` |
|
@ -19,5 +19,6 @@ console.log(height.value); // -> window height
|
|||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
|
| [useClickAway](#/en-US/use-click-away) | Triggers a callback when user clicks outside of the target element |
|
||||||
| [useCountDown](#/en-US/use-count-down) | Used to manage the countdown |
|
| [useCountDown](#/en-US/use-count-down) | Used to manage the countdown |
|
||||||
| [useToggle](#/en-US/use-toggle) | Used to switch between `true` and `false` |
|
| [useToggle](#/en-US/use-toggle) | Used to switch between `true` and `false` |
|
||||||
|
Loading…
x
Reference in New Issue
Block a user