npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mxphenix-hooks_taro_vue

v1.0.0

Published

Downloads

2

Readme

目录

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

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

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 |