feat(hooks): 增加布尔,loading相关hooks

This commit is contained in:
chen.home 2022-08-27 00:48:02 +08:00
parent c6dd8dbc94
commit 4f022b28fa
4 changed files with 59 additions and 9 deletions

View File

@ -1 +1,3 @@
export * from './useAppRouter';
export * from './useBoolean';
export * from './useLoading';

30
src/hook/useBoolean.ts Normal file
View File

@ -0,0 +1,30 @@
import { ref } from 'vue';
/**
* boolean组合式函数
* @param initValue
*/
export function useBoolean(initValue = false) {
const bool = ref(initValue);
function setBool(value: boolean) {
bool.value = value;
}
function setTrue() {
setBool(true);
}
function setFalse() {
setBool(false);
}
function toggle() {
setBool(!bool.value);
}
return {
bool,
setBool,
setTrue,
setFalse,
toggle,
};
}

11
src/hook/useLoading.ts Normal file
View File

@ -0,0 +1,11 @@
import { useBoolean } from './useBoolean';
export function useLoading(initValue = false) {
const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean();
return {
loading,
startLoading,
endLoading,
};
}

View File

@ -4,25 +4,25 @@
<n-grid :x-gap="24" :cols="23">
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center justify-start">条件1</n-grid-item>
<n-grid-item :span="1" class="flex-center justify-start">姓名</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_1" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center">条件2</n-grid-item>
<n-grid-item :span="1" class="flex-center">年龄</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_2" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center">条件3</n-grid-item>
<n-grid-item :span="1" class="flex-center">性别</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_3" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center">条件4</n-grid-item>
<n-grid-item :span="1" class="flex-center">地址</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_4" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
@ -56,8 +56,8 @@
下载
</n-button>
</div>
<n-data-table :bordered="false" :columns="columns" :data="listData" />
<Pagination :count="0" @change="changePage" />
<n-data-table :columns="columns" :data="listData" :loading="loading" />
<Pagination :count="100" @change="changePage" />
</n-space>
</n-card>
</n-space>
@ -68,7 +68,9 @@ import { onMounted, ref, h } from 'vue';
import { fetchUserList } from '~/src/service/api/mock';
import type { DataTableColumns } from 'naive-ui';
import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui';
import { useLoading } from '@/hook';
const { loading, startLoading, endLoading } = useLoading(false);
const model = ref({
condition_1: '',
condition_2: '',
@ -164,10 +166,15 @@ interface UserList {
const listData = ref<UserList[]>([]);
onMounted(() => {
fetchUserList().then((res) => {
listData.value = res.data;
});
getUserList();
});
async function getUserList() {
startLoading();
await fetchUserList().then((res) => {
listData.value = res.data;
endLoading();
});
}
function changePage(page: number, size: number) {
window.$message.success(`分页器:${page},${size}`);
}