@sunyard-szyy-ui/hooks 0.2.8 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -61
- package/dist/index.cjs +5 -56744
- package/dist/index.d.cts +1 -22
- package/dist/index.d.ts +1 -22
- package/dist/index.js +4 -56752
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -76,59 +76,6 @@ watch(debouncedInput, value => {
|
|
|
76
76
|
});
|
|
77
77
|
```
|
|
78
78
|
|
|
79
|
-
### useToggle
|
|
80
|
-
|
|
81
|
-
切换布尔值的 Hook。
|
|
82
|
-
|
|
83
|
-
**特性：**
|
|
84
|
-
|
|
85
|
-
- ✅ 简化布尔值状态管理
|
|
86
|
-
- ✅ 提供切换和设置方法
|
|
87
|
-
- ✅ 类型安全
|
|
88
|
-
|
|
89
|
-
**使用示例：**
|
|
90
|
-
|
|
91
|
-
```typescript
|
|
92
|
-
import { useToggle } from '@sunyard-szyy-ui/hooks';
|
|
93
|
-
|
|
94
|
-
const { value: isOpen, toggle, setValue } = useToggle(false);
|
|
95
|
-
|
|
96
|
-
// 切换
|
|
97
|
-
toggle(); // isOpen.value = true
|
|
98
|
-
toggle(); // isOpen.value = false
|
|
99
|
-
|
|
100
|
-
// 设置特定值
|
|
101
|
-
setValue(true); // isOpen.value = true
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
### useLocalStorage
|
|
105
|
-
|
|
106
|
-
本地存储 Hook，支持响应式和跨标签页同步。
|
|
107
|
-
|
|
108
|
-
**特性：**
|
|
109
|
-
|
|
110
|
-
- ✅ 响应式本地存储
|
|
111
|
-
- ✅ 自动序列化/反序列化
|
|
112
|
-
- ✅ 跨标签页同步
|
|
113
|
-
- ✅ TypeScript 类型支持
|
|
114
|
-
|
|
115
|
-
**使用示例：**
|
|
116
|
-
|
|
117
|
-
```typescript
|
|
118
|
-
import { useLocalStorage } from '@sunyard-szyy-ui/hooks';
|
|
119
|
-
|
|
120
|
-
// 基础用法
|
|
121
|
-
const { value, setValue } = useLocalStorage('user', { name: 'Alice' });
|
|
122
|
-
|
|
123
|
-
// 修改值（自动同步到 localStorage）
|
|
124
|
-
setValue({ name: 'Bob' });
|
|
125
|
-
|
|
126
|
-
// 响应式更新
|
|
127
|
-
watch(value, newVal => {
|
|
128
|
-
console.log('用户信息变更:', newVal);
|
|
129
|
-
});
|
|
130
|
-
```
|
|
131
|
-
|
|
132
79
|
## 🎯 使用方式
|
|
133
80
|
|
|
134
81
|
### 方式一：从主包导入（推荐）
|
|
@@ -151,12 +98,10 @@ import { useNamespace } from '@sunyard-szyy-ui/hooks/use-namespace';
|
|
|
151
98
|
|
|
152
99
|
## 📖 完整 API
|
|
153
100
|
|
|
154
|
-
| Hook
|
|
155
|
-
|
|
|
156
|
-
| `useNamespace`
|
|
157
|
-
| `useDebounce`
|
|
158
|
-
| `useToggle` | 布尔值切换 | `initialValue?: boolean` | `{ value, toggle, setValue }` |
|
|
159
|
-
| `useLocalStorage` | 本地存储 | `key: string, defaultValue: T` | `{ value, setValue }` |
|
|
101
|
+
| Hook | 说明 | 参数 | 返回值 |
|
|
102
|
+
| -------------- | ------------ | ------------------------------ | ---------------- |
|
|
103
|
+
| `useNamespace` | BEM 命名工具 | `block: string` | 命名空间方法对象 |
|
|
104
|
+
| `useDebounce` | 防抖值 | `value: Ref<T>, delay: number` | `Ref<T>` |
|
|
160
105
|
|
|
161
106
|
## 🔧 开发
|
|
162
107
|
|
|
@@ -228,6 +173,4 @@ watchEffect(() => {
|
|
|
228
173
|
|
|
229
174
|
```typescript
|
|
230
175
|
const ns = useNamespace('form');
|
|
231
|
-
const { value: isValid, toggle: toggleValid } = useToggle(false);
|
|
232
|
-
const { value: formData, setValue } = useLocalStorage('form-draft', {});
|
|
233
176
|
```
|