freedomdebug / howdyjs

一个包含Javascript插件、Vue3组件、Vue3指令的工具库

Home Page:https://kongfandong.cn/howdy/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Howdyjs

Star Fork Licensee Visit


一个包含Javascript插件、Vue3组件、Vue3指令的轻量工具组件库
A universal component packages of javascript plugins or tools

当前该仓库已使用Vue3 + Typescript,基于Vue2组件的旧版项目请前往howdy分支查看。

Link


组件

  1. @howdyjs/resize
    通过拖拽更改元素尺寸插件

  2. @howdyjs/img-zoom
    图片放大插件,支持按组浏览下一张图片

  3. @howdyjs/size-observer
    监听元素尺寸变化插件

  4. @howdyjs/scroll
    自定义滚动条插件

  5. @howdyjs/to-drag
    设置Dom可拖动插件

  6. @howdyjs/animation-dialog
    动画模态框Vue3组件

  7. @howdyjs/standard-tabs
    移动端标签页Vue3组件

  8. @howdyjs/mouse-menu
    自定义右键菜单Vue3组件

  9. @howdyjs/to-control
    拖拽更改元素大小与位置插件


开始使用

安装

// 新版已进行分包
npm i -S @howdyjs/XXX

// 旧版
npm i -S howdyjs

使用

  • 新版进行了分包,可按需安装相应的分包
  • 新版的Vue组件只可在Vue3中使用,而指令做了向下兼容可同时在Vue2.X中使用
  • 多数包是基于原生JS编写的,基本可直接原生使用,只是为了方便提供了VUE指令的封装形式
  • 若需要在Vue2.X中使用,可使用旧版,旧版文档 参考此处

关于项目

Packages

  • 使用lerna进行分包管理,执行npm run bootstrap项目初始化
  • 使用rollup进行打包, 执行npm run build:pkg打包各Packages,包含cjs、es和其d.ts文件

展示站点

  • 开发环境及展示站点使用vite搭建,lerna初始化、安装依赖、打包Packages,完成后执行npm run example启动
  • 站点路由文件使用import.meta.glob读取文件目录自动生成,原则上不需更改路由文件

贡献与本地开发

在项目初始化后,执行npm run backup-package-json && npm run example可使展示站点直接引用项目中Packages的代码并实现热更新,但注意开发完后要执行npm run reset-package-json恢复各包的package.json

原理是更改package.json的main字段指向开发的源文件,而发包的时候再将main字段入口文件指向打包后的index.js,后续有可能把这种方式更改为软连接的方式。


欢迎各种建议反馈与PR,感谢使用。

VIEW AUTHOR BLOG

License

All for MIT

Copyright (c) 2021 Leon.D

About

一个包含Javascript插件、Vue3组件、Vue3指令的工具库

https://kongfandong.cn/howdy/

License:MIT License


Languages

Language:Vue 63.2%Language:TypeScript 29.7%Language:JavaScript 5.1%Language:SCSS 1.4%Language:CSS 0.5%Language:HTML 0.2%