目录自定义hook函数使用vue3 hooks函数示例官方示例代码---封装前使用hooks函数封装后hooks函数自定义hook函数使用 使用Vue3的组合api封装的可复用的功能
这里先看一下大体项目结构:
这里的hooks下的文件是示例代码,public内的是测试数据
在启动项目后,测试public的data文件内的数据,
App.vue
<template>
<div>
<h2>自己定义hook函数操作</h2>
<h2>x:{{x}}, y:{{y}}</h2>
<h3 v-if="loading">正在加载中11...</h3>
<h3 v-else-if="errORMsg">{{errorMsg}}</h3>
<ul v-else>
<li>id:{{data.id}}</li>
<li>address:{{data.address}}</li>
<li>distance:{{data.distance}}</li>
</ul>
<!-- 数组数据 -->
<ul v-for="item in data" :key="item.id">
<li>id:{{item.id}}</li>
<li>title:{{item.title}}</li>
<li>price: {{item.price}}</li>
</ul>
</div>
</template>
<script>
import { defineComponent, watch } from 'vue'
import useMousePosition from './hooks/useMousePosition'
import useRequest from './hooks/useRequest'
export default defineComponent({
name: 'App',
// 需求1:用户在页面中点击页面,把点击位置的横纵坐标收集并展示起来
setup(){
const {x,y} = useMousePosition()
// 发送请求
// const {loading, data, errorMsg} = useRequest('data/address.JSON') // 获取对象数据
const {loading, data, errorMsg} = useRequest('data/products.json') // 获取数组数据
// 监听
watch(data, () => {
if(data.value){
console.log(data.value.length);
}
})
return {
x,
y,
loading,
data,
errorMsg
}
}
})
</script>
src下hooks的 useMousePosition.ts
import { ref, onBeforeUnmount, onMounted } from 'vue'
export default function () {
const x = ref(-1)
const y = ref(-1)
// 点击事件的回调函数
const clickHandler = (event:MouseEvent) => {
x.value = event.pageX
y.value = event.pageY
}
// 页面已经加载完毕了,再进行点击操作
// 页面加载完毕的生命
onMounted(() => {
window.addEventListener('click',clickHandler)
})
// 页面卸载之前的生命周期组合Api
onBeforeUnmount(() => {
window.removeEventListener('click',clickHandler)
})
return {
x,
y
}
}
src下hooks的 useRequest.ts
import { ref } from 'vue';
import axiOS from 'axios';
interface AddressData{
id: number;
address:string;
distance:string;
}
interface ProductsData{
id: string;
title:string;
price:number;
}
export default function (url:string) {
// 加载的状态
const loading = ref(true)
// 请求成功的数据 // 用于数据格式替换 ProductsData
const data = ref<ProductsData[] | null>(null)
// 错误信息
const errorMsg = ref('')
// 发送请求
axios.get(url).then(response => {
// 改变加载状态
loading.value = false
data.value = response.data
}).catch(error=>{
console.log(111);
})
return {
loading,
data,
errorMsg
}
}
public下data的 address.json
{
"id": 1,
"address": "陕西西安",
"distance": "100m"
}
public下data的 products.json
[
{
"id":"001",
"title": "华为",
"price": 3000
},
{
"id": "002",
"title": "小米12",
"price": 1900
}
]
最后查看一下整体运行展示:
以ant-design-vue 2.2.8版Upload上传组件为例:
<template>
<a-upload
v-model:file-list="fileList"
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
@change="handleChange"
>
<a-button>
<upload-outlined></upload-outlined>
Click to Upload
</a-button>
</a-upload>
</template>
<script>
import { message } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
UploadOutlined,
},
setup() {
const handleChange = info => {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
};
const fileList = ref([]);
return {
fileList,
headers: {
authorization: 'authorization-text',
},
handleChange,
};
},
});
</script>
<template>
<a-upload
v-model:file-list="fileList"
name="file"
:multiple="true"
action="Https://www.mocky.io/v2/5cc8019d300000980a055e76"
:headers="headers"
@change="handleChange"
>
<a-button>
<upload-outlined></upload-outlined>
Click to Upload
</a-button>
</a-upload>
</template>
<script>
import { UploadOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
// hook
import useUpload from '../hooks/useUpload';
export default defineComponent({
components: {
UploadOutlined,
},
setup() {
/ 上传hooks
const { fileList, headers, handleChange } = useUpload();
return {
fileList,
headers,
handleChange,
};
},
});
</script>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
export default function useUpload() {
const handleChange = (info) => {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
};
const fileList = ref([]);
return {
fileList,
headers: {
authorization: 'authorization-text',
},
handleChange,
};
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue3的自定义hook函数使用
本文链接: https://www.lsjlt.com/news/146295.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0