vue-public-util
v1.2.7
Published
- vue + element-plus 一些工具
Downloads
14
Readme
vue-public-util
- vue + element-plus 一些工具
安装方式
npm install vue-public-util
使用方式
import 'vue-public-util/dist/style.css';
import VPU, { setPlugins } from 'vue-public-util';
...
// 设置插件
setPlugins([
pinia,
VXETable,
router,
{
install: (app) => {
app.use(ElementPlus, {
locale: zhCn, // element语言包
})
},
},
])
app.use(VPU)
组件
- PlButton
<pl-button type="danger" class="w200" @click="handleClick($event, '123')">防抖按钮</pl-button>
const handleClick = async (e: Event, str: string) => { await sleep(1000); };
方法
usePlDrawer
- 函数方式调用抽屉组件
usePlModal
- 函数方式调用模态组件
useLoading
- 自动开启/关闭加载状态
const drawerRef = ref<HTMLDivElement>(); const submitAction = useLoading(async data => { await submit(data); }); submitAction.setContainer(drawerRef).setMsg('正在保存中,请稍后...'); const onClick = () => { submitAction({ a: 1 }); };
- 自动开启/关闭加载状态
useFetchOnce
用于一些需要请求接口的字典组件,组件被同时创建 n 次,接口只会执行一次。
import { useFetchOnce } from 'vue-public-util'; const { fetch } = useFetchOnce({ name: '组件name', query: fetchFun, }); const fetchData = async () => { const data = await fetch(); list.value = data.map(item => ({ label: item.label, value: item.id, })); };
useAction
- 用来判断当前页面/组件的操作类型
- 内置 4 种类型:
export enum EActionEnum { 'isCreate' = '1', 'isUpdate' = '2', 'isCopy' = '3', 'isView' = '4', } export type TOtherAction = '5' | '6' | '7' | '8' | '9' | '10';
const { isCreate, isDelete } = useAction(action.value, { isDelete: '5' });
DataUtil
- 判断数据类型
type TDataType = 'Number' | 'String' | 'Boolean' | 'Symbol' | 'Null' | 'Undefined' | 'Array' | 'Object' | 'Function' | 'Set' | 'Map'; DataUtil.is[TDataType](val); // 例如 DataUtil.isNumber(val); /** * 判断数据是否是合法数据 * 数据不是 null undefined '' NaN * @param data any * @returns boolean */ DataUtil.isDef(); /** * 判断数据是否是非法数据 * 数据是 null || undefined || '' || NaN * @param data any * @returns boolean */ DataUtil.isNDef();
deepObjectAssign
深度合并对象
const data1 = { name: '张三', age: 12, isBoy: true, address: { province: 'xxx省', city: 'xxx市', area: 'xxx区', }, }; const data2 = { age: 14, a: { b: { c: { d: { e: 1 } } } }, address: { province: 666, longitudeAndLatitude: { lat: 30, lng: 100, }, }, }; const data3 = deepObjectAssign(data1, data2); expect(DataUtil.isNumber(data3.address.province)).toBe(true); expect(DataUtil.isNumber(data3.address.longitudeAndLatitude.lng)).toBe(true); expect(DataUtil.isNumber(data3.a.b.c.d.e)).toBe(true);
更新日志
2023/12/20 1.2.7
- A 增加 useAction
- A 编写单元测试
- U 优化 deepObjectAssign 类型提示
- U 优化 useFetchOnce 类型提示
- F 修复 useLoading 传参问题
2023/12/14
- A 增加显示模态/抽屉事件
- U 模态/抽屉 取消时可以传入自定义数据
2023/12/11
- F 修复模态/模态卸载时 dom 未删除和未执行组件的销毁事件
2023/12/08
- A 增加注释
- A 增加模态/抽屉取消时异常捕获