mxphenix-hooks_taro_vue

v1.0.0

Published

2 years ago

Downloads

0High
0Medium
0Low

emptyg2018

useToggle

用于两个开关状态之间切换的 Hook

代码演示

<template>
  <view>状态值：{{ state ? '开' : '关' }}</view>
  <button @click='off'>关</button>
  <button @click='on'>开</button>
  <button @click='reverse'>切换</button>
</template>

<script setup lang="ts">
import { useToggle } from '@hooks/index';
const { state, on, off, reverse } = useToggle(false);
</script>

API

const { state, on, off, reverse } = useToggle(defaultValue?: boolean);

Params

| 参数 | 说明 | 类型 | 默认 | | ------------ | ------------------------ | ------- | ----- | | defaultValue | 可选项，传入默认的状态值 | boolean | false |

Result

| 参数 | 说明 | 类型 | | :------ | -------- | -------------- | | state | 状态值 | Ref<boolean> | | on | 开启 | () => void | | off | 关闭 | () => void | | reverse | 相反切换 | () => void |

useVisible

用于显隐两种状态之间切换的Hook

代码演示

<template>
  <view v-if="visible">This is a good hook.</view>
</template>

<script setup lang="ts">
import { useVisible } from '@hooks/index';
const { visible, show, hide, reverse } = useVisible(false);
</script>

API

const { visible, show, hide, reverse } = useVisible(defaultValue?: boolean);

Params

| 参数 | 说明 | 类型 | 默认 | | ------------ | ------------------------ | ------- | ----- | | defaultValue | 可选项，传入默认的状态值 | boolean | false |

Result

| 参数 | 说明 | 类型 | | :------ | -------- | -------------- | | visible | 状态值 | Ref<boolean> | | show | 显示 | () => void | | hide | 隐藏 | () => void | | reverse | 相反切换 | () => void |

useLoading

用于加载状态之间切换的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <button @click='hideLoading'>取消</button>
  <button @click='showLoading'>加载</button>
</template>

<script setup lang="ts">
import { useLoading } from '@hooks/index';
const { loading, showLoading, hideLoading } = useLoading(false);
</script>

API

const { loading, showLoading, hideLoading } = useLoading(defaultValue?: boolean);

Params

| 参数 | 说明 | 类型 | 默认 | | ------------ | ------------------------ | ------- | ----- | | defaultValue | 可选项，传入默认的状态值 | boolean | false |

Result

| 参数 | 说明 | 类型 | | :---------- | ------ | -------------- | | loading | 状态值 | Ref<boolean> | | showLoading | 加载 | () => void | | hideLoading | 隐藏 | () => void |

useClassName

用于管理组件私有化样式类名

<template>
  <SafeArea position="both">
    <view :class="className('__background')">
      <view :class="className('__background__header')">
        <text :class="className('__background__header__title')"
          >欢迎登录柏溪福利小程序</text
        >
        <text :class="className('__background__header__desc')"
          >完善信息，我们将会为您提供专属服务</text
        >
        <text :class="className(['__background__header__tips', '__background__header__tips--active'])"
          >完善信息，我们将会为您提供专属服务</text
        >
      </view>
    </view>
  </SafeArea>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useClassName } from '@hooks/index';
import { SafeArea } from '@components/index';

const { className } = useClassName('_login');
</script>

<style lang="scss">
@import './index.scss';
</style>

API

const { className } = useClassName(prefixCls: string);

Params

| 参数 | 说明 | 类型 | 默认 | | --------- | -------------------- | ------ | ---- | | prefixCls | 必选项，传入前缀类名 | string | - |

Result

| 参数 | 说明 | 类型 | | :-------- | ------------ | ----------------------------------------- | | className | 设置样式类名 | (className: string | string[]) => string |

useAsync

用于处理异步任务的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">
    <view v-for="item in data">{{ item.title }}</view>
  </view>
  <view v-if="error">{{ error }}</view>
</template>

<script setup lang="ts">
import { useAsync } from '@hooks/index';

const delay = (timer = 1000) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random());
    }, timer);
  });
};

const { data, loading, error, run } = useAsync(
  async () => {
    await delay(100);
    await delay(200);
  },
  {
    immediate: true,
    cache: false,
    onBefore(params) {
      console.log('params', params);
    },
    onSuccess(result) {
      console.log('result', result);
      console.log('params', params);
    },
    onError(error) {
      console.log('error', error);
    },
    onFinally(params, result, error) {
      console.log('result', result);
      console.log('params', params);
      console.log('error', error);
    },
  }
);
</script>

API

const { data, loading, error, run } = useAsync<T = any>(service: AsyncService<T>, option: AsyncOption<T>);

Params

type Params = Record<string, any>;

AsyncService

type AsyncService<T = any> = (params?: Params) => Promise<T>;

AsyncOption

type AsyncOption<T = any> = {
  immediate?: boolean;
  cache?: boolean;
  onBefore?: (params?: Params) => void;
  onSuccess?: (result: T, params?: Params) => void;
  onError?: (error: any) => void;
  onFinally?: (
    params: Params | undefined,
    result: T | undefined,
    error: any
  ) => void;
};

Result

| 参数 | 说明 | 类型 | | :------ | ------------------------------------------- | ----------------------------------- | | data | 请求成功返回的数据 | Ref<T | undefined> | | loading | 加载状态 | Re<boolean> | | error | 请求错误返回的数据 | Ref<any> | | run | 手动触发 service 执行，参数会传递给 service | (params?: Params) => Promise<T> |

Params

| 参数 | 说明 | 类型 | 默认 | | ------- | ---------------------- | ----------------------- | ---- | | service | 必选项，传入service | AsyncService<T = any> | - | | options | 可选项，传入的配置选项 | AsyncOption<T = any> | - |

Options

| 参数 | 说明 | 类型 | 默认 | | --------- | -------------------------- | ------------------------------------------------------------ | ----- | | immediate | 可选项，传入默认的立即执行 | boolean | false | | cache | 可选项，是否缓存响应数据 | boolean | true | | onBefore | 可选项，传入请求前的操作 | (params?: Params) => void | - | | onSuccess | 可选项，传入请求成功的操作 | (onSuccess: T, params?: Params) => void | - | | onError | 可选项，传入请求错误的操作 | (error: any) => void | - | | onFinally | 可选项，传入请求完成的操作 | (params: Params | undefined, result: T | undefined, error: any) => void | - |

useRequest

用于处理服务请求的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">
    <view v-for="item in data">{{ item.title }}</view>
  </view>
  <view v-if="error">{{ error }}</view>
</template>

<script setup lang="ts">
import { useRequest } from '@hooks/index';
import { GetUsers } from '@services/index';
const { data, loading, error } = useRequest<API.UserItem[]>(GetUsers, {
  immediate: true;
  cache: false,
  defaultParams: {
  	current: 1,
    size: 24
  }
});
</script>

API

const { data, params, loading, error, run, refresh } = useRequest<T = any>(service: AsyncService<T>, options: RequestOption<T>);

RequestOption

type RequestOption<T = any> = AsyncOption<T> & {
  defaultParams?: Params;
};

Result

| 参数 | 说明 | 类型 | | :------ | --------------------------------------- | -------------------------- | | ... | 同上 useAsync result 参数一致 | | | params | 请求参数，可通过defaultParams默认设置 | Ref<Params | undefined> | | refresh | 刷新请求，不会覆盖参数 | () => void |

Params

| 参数 | 说明 | 类型 | 默认 | | ------- | ---------------------- | ------------------------ | ---- | | service | 必选项，传入service | AsyncService<T = any> | - | | options | 可选项，传入的配置选项 | RequestOption<T = any> | - |

Options

| 参数 | 说明 | 类型 | 默认 | | :------------ | --------------------------- | ---------------------- | ---- | | ... | 同上 AsyncOption 参数一致 | AsyncOption<T = any> | - | | defaultParams | 可选项，传入默认的请求参数 | Params | - |

useLoadPage

用于处理分页请求的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">
    <view v-for="item in data">{{ item.title }}</view>
  </view>
  <view v-if="error">{{ error }}</view>
  <button @click="prev">上一页</button>
  <button @click="next">下一页</button>
  <button @click="prev({ run: true })">上一页(请求)</button>
  <button @click="next({ run: true })">下一页(请求)</button>
</template>

<script setup lang="ts">
import { useLoadPage } from '@hooks/index';
import { GetUsers } from '@services/index';
const { data, loading, error, params, prev, next, paging } = useLoadPage<API.UserItem[]>(GetUsers, {
  immediate: true;
  defaultParams: {
  	current: 1,
    size: 24
  },
  defaultPaging: {
    pageNum: 1,
    size: 16,
  },
  pagingOption: {
    currentField: 'pageNum',
    sizeField: 'size',
  }
});
</script>

API

const { data, params, paging, loading, error, run, next, prev, refresh } = useLoadPage<T = any>(service: AsyncService<T>, options: LoadPageOption<T>);

LoadPageOption

type LoadPageOption<T = any> = RequestOption<T> & {
  defaultPaging?: Params;
  pagingOptions?: {
    currentField?: string;
    sizeField?: string;
  }
};

PageOption

type PageOption= { run?: boolean };

Result

| 参数 | 说明 | 类型 | | :----- | ------------------------------------------------- | -------------------------------- | | ... | 同上 useRequest result 参数一致 | | | paging | 分页参数 | Ref<Params | undefined> | | next | 下一页，传入{ run: true }分页请求，不传参仅分页 | (pageOpton?: PageOption) => void | | prev | 上一页，传入{ run: true }分页请求，不传参仅分页 | (pageOpton?: PageOption) => void |

Params

Options

| 参数 | 说明 | 类型 | 默认 | | :------------ | ----------------------------- | ------------------------ | ---- | | ... | 同上 RequestOption 参数一致 | RequestOption<T = any> | - | | defaultPaging | 可选项，传入默认的分页参数 | Params | - | | pagingOptions | 可选项，分页配置选项 | PagingOptions | - |

Paging

| 参数 | 说明 | 类型 | 默认 | | :------ | ---------------------------------------------------- | ---- | ---- | | current | 可选项，分页当前索引，currentField可配置自定义字段 | any | 1 | | size | 可选项，分页大小，sizeField可配置自定义字段 | any | 16 |

pagingOptions

| 参数 | 说明 | 类型 | 默认 | | :----------- | ------------------------ | ------ | ------- | | currentField | 可选项，分页当前索引字段 | string | current | | sizeField | 可选项，分页大小字段 | string | size |

useLoadRefresh

用于处理请求刷新的hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">{{ data }}</view>
  <buttonn @click="run">刷新</buttonn>
  <buttonn @click="run({ pullDownRefresh: true })">触发下拉刷新</buttonn>
</template>

<script setup lang="ts">
import { useRequest, useLoadRefresh } from '@hooks/index';
import { GetUsers, GetProfile } from '@services/index';

const {
  data: users,
  loading: userLoading,
  run: userAsync
} = useRequest<API.UserItem[]>(GetUsers, {
  immediate: false
});

const {
  data: profile,
  loading: profileLoading,
  run: profileAsync
} = useRequest<API.UserProfile>(GetProfile, {
  immediate: false
});

const { data, loading, run } = useLoadRefresh(
  async () => {
    await userAsync();
    await profileAsync();
  },
  { immediate: true }
});
</script>

API

const { data, loading, error, run } = useLoadRefresh<T = any>(service: AsyncService<T>, option: AsyncOption<T>);

Result

| 参数 | 说明 | 类型 | | :--- | ------------------------------------------- | ----------------------------------------- | | ... | 同上 useAsync result 参数一致 | | | run | 手动触发 service 执行，参数会传递给 service | (runOption?: RunOption) => Promise<T> |

RunOption

| 参数 | 说明 | 类型 | 默认 | | :-------------- | -------- | ------- | ----- | | pullDownRefresh | 下拉刷新 | boolean | false |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

目录

useToggle

useVisible

useLoading

useClassName

useAsync

useRequest

useLoadPage

useLoadRefresh