@mt-kit/vue-hooks

下载

``bash
npm i @mt-kit/vue-hooks
`

API

$3

- 修改 url 参数

`vue


`

$3

- 数据请求

`vue


`

注：在 uniapp 中使用，需要给类型一层约束，负责会报奇怪的 ts 错误。

`ts
// use-service.ts
import type { Ref } from 'vue';
import { toRef } from 'vue';
import type { ServiceFunction, ServiceConfig } from '@mt-kit/vue-hooks';
import { useService as _useService } from '@mt-kit/vue-hooks';
interface IAsyncResult {
data?: Ref;
loading: Ref;
error: Ref;
run: (arg?: Q) => Promise;
}
export default function useService(
fetch: ServiceFunction,
query?: Q,
initData?: T,
config?: ServiceConfig
): IAsyncResult {
const _data = _useService(fetch, query, initData, config);
return {
data: toRef(_data, 'data') as Ref,
loading: toRef(_data, 'loading') as unknown as Ref,
error: toRef(_data, 'error') as unknown as Ref,
run: toRef(_data, 'run') as unknown as (arg?: Q) => Promise
};
}
`

注：其余的 hooks 查看 index 中的导出。

$3

- 水印

`vue


`

$3

- 集合 ref 和 reactive 的 use

`vue


`

$3

- 创建虚拟元素，常用于弹出框

`vue



`

op/index.vue

`vue



`

$3

- 监听 DOM 元素/window 的大小变化

`vue




`

| 属性 | 作用 |
| --- | --- |
| el | DOM 元素/window |
| name | 事件名称 |
| func | 事件处理函数 |
| options | 事件监听的配置项，如 passive、capture 等 |
| autoRemove | 是否自动移除事件监听，默认为 true |
| isDebounce | 是否使用防抖函数，默认为 true |
| wait | 防抖/节流的等待时间，默认为 80 毫秒 |
| removeEvent | 返回 removeEvent 函数，用于外部手动移除事件监听 |

$3

- 加载一个在线的 js

`vue



`

$3

- 用于创建上下文菜单（右键菜单）的 Vue 组合式 API

`vue



``