方便地进行事件绑定,在组件 mounted 和 activated 时绑定事件,unmounted 和 deactivated 时解绑事件。
import { ref } from "vue";
import { useEventListener } from "@vant/use";
export default {
setup() {
// 在 window 上绑定 resize 事件
// 未指定监听对象时,默认会监听 window 的事件
useEventListener("resize", () => {
console.log("window resize");
});
// 在 body 元素上绑定 click 事件
useEventListener(
"click",
() => {
console.log("click body");
},
{ target: document.body }
);
},
};
type Options = {
target?: EventTarget | Ref<EventTarget>;
capture?: boolean;
passive?: boolean;
};
function useEventListener(
type: string,
listener: EventListener,
options?: Options
): void;
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 监听的事件类型 | string | - |
listener | 点击外部时触发的回调函数 | EventListener | - |
options | 可选的配置项 | Options | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
target | 绑定事件的元素 | EventTarget | Ref<EventTarget> | window
|
capture | 是否在事件捕获阶段触发 | boolean | false
|
passive | 设置为 true 时,表示 listener 永远不会调用 preventDefault
|
boolean | false
|
介绍商品卡片,用于展示商品的图片、价格等信息。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import...
介绍数据量过多时,采用分页的形式将数据分隔,每次只加载一个页面。实例演示引入通过以下方式来全局注册组件,更多注册方式请参...
Select 选择器当选项过多时,使用下拉菜单展示并选择内容。基础用法适用广泛的基础单选v-model的值为当前被选中的el-option的 va...
Badge 标记出现在按钮、图标旁的数字或状态标记。 基础用法展示新消息数量。定义value属性,它接受Number或者String。templateel...