申请用户
登录
论坛
搜索
帮助
私人消息 (0)
公共消息 (0)
系统消息 (0)
好友消息 (0)
帖子消息 (0)
赛捷软件论坛
»
Sage ACCPAC ERP
» 鼠标跟踪器示例
返回列表
发帖
vicky.yu
发短消息
加为好友
vicky.yu
当前离线
UID
31190
帖子
2100
精华
0
积分
5250
阅读权限
90
在线时间
54 小时
注册时间
2018-12-3
最后登录
2024-9-4
Sage员工
1
#
跳转到
»
倒序看帖
打印
字体大小:
t
T
发表于 2023-11-1 09:25
|
只看该作者
鼠标跟踪器示例
{#mouse-tracker-example}
如果我们要直接在组件中使用组合式 API 实现鼠标跟踪功能,它会是这样的:
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>
但是,如果我们想在多个组件中复用这个相同的逻辑呢?我们可以把这个逻辑以一个组合式函数的形式提取到外部文件中:
// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'
// 按照惯例,组合式函数名以“use”开头
export function useMouse() {
// 被组合式函数封装和管理的状态
const x = ref(0)
const y = ref(0)
// 组合式函数可以随时更改其状态。
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
// 一个组合式函数也可以挂靠在所属组件的生命周期上
// 来启动和卸载副作用
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
// 通过返回值暴露所管理的状态
return { x, y }
}
收藏
分享
0
0
0
赞
切
返回列表
[收藏此主题]
[关注此主题的新回复]
[通过 QQ、MSN 分享给朋友]