1、收集用户鼠标点击页面坐标的hook函数
1.1、创建一个hooks/useMousePosition.ts文件
import {
ref, onMounted, onUnmounted } from 'vue';
export default function useMousePosition () {
const x = ref(-1);
const y = ref(-1);
const updatePosition = (e: MouseEvent) => {
x.value = e.pageX;
y.value = e.pageY;
};
onMounted(() => {
document.addEventListener('click', updatePosition);
});
onUnmounted(() => {
document.removeEventListener('click', updatePosition);
});
return {
x, y};
};
1.2、创建页面
<template>
<div>
<h2>x: {
{x}}, y: {
{y}}</h2>
</div>
</template>
import {
ref } from "vue";
import useMousePosition from './hooks/useMousePosition.js'
export default {
setup() {
const {
x, y} = useMousePosition();
return {
x,
y,
};
}
}
2、发ajax请求的hook函数
2.1、创建hooks/useRequest.ts文件
import {
ref } from 'vue';
import axios from 'axios';
export default function useUrlLoader<T>(url: string) {
const result = ref<T | null>(null);
const loading = ref(true);
const errorMsg = ref(null);
axios.get(url)
.then(response => {
loading.value = false;
result.value = response.data;
})
.catch(e => {
loading.value = false;
errorMsg.value = e.message || '未知错误';
});
return {
loading,
result,
errorMsg,
};
};
2.2、创建页面
<template>
<div class="about">
<h2 v-if="loading">LOADING...</h2>
<h2 v-else-if="errorMsg">{
{errorMsg}}</h2>
<ul v-for="p in result" :key="p.id">
<li>id: {
{p.id}}</li>
<li>title: {
{p.title}}</li>
<li>price: {
{p.price}}</li>
</ul>
</div>
</template>
import {
watch } from "vue";
import useRequest from './hooks/useRequest';
interface AddressResult {
id: number;
name: string;
distance: string;
};
interface ProductResult {
id: string;
title: string;
price: number;
};
export default {
setup() {
const {
loading, result, errorMsg} = useRequest<ProductResult[]>('/data/products.json');
watch(result, () => {
if (result.value) {
console.log(result.value.length);
}
});
return {
loading,
result,
errorMsg
};
}
}
3、相关链接
自定义hook函数