leon-kfd / howdyjs Goto Github PK

View Code? Open in Web Editor NEW

112.0 3.0 26.0 5.59 MB

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

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

License: MIT License

JavaScript 4.01% HTML 0.25% Vue 63.04% SCSS 1.37% TypeScript 30.81% CSS 0.52%

vue vite javascript typescript rollup contextmenu vue3

howdyjs's Introduction

Howdyjs

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

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

Link

组件

@howdyjs/mouse-menu
✨自定义右键菜单Vue3组件
@howdyjs/resize
✨通过拖拽更改元素尺寸插件
@howdyjs/to-drag
✨设置Dom可拖动插件
@howdyjs/to-control
✨拖拽更改元素大小与位置插件
@howdyjs/img-zoom
✨图片放大插件，支持按组浏览下一张图片
@howdyjs/animation-dialog
✨动画模态框Vue3组件
@howdyjs/size-observer
✨监听元素尺寸变化插件
@howdyjs/scroll
✨自定义滚动条插件
@howdyjs/standard-tabs
✨移动端标签页Vue3组件

开始使用

安装

// 新版已进行分包
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:lib打包各个Packages
已更新使用rollup-plugin-esbuild加速打包

展示站点

开发环境及展示站点使用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

howdyjs's People

Contributors

Stargazers

Watchers

howdyjs's Issues

element ui 里的table组件怎么使用这个来自定义鼠标右键呢

element 是以列为单位的

打开右键菜单后，滚动页面，右键菜单自动消失，怎么实现呢

@howdyjs/mouse-menu的onOpen事件能否传递参数

感谢大佬的组件，非常好用，简单易懂，实际项目中用的时候遇到一点问题，如下：
在右键一个元素的时候，希望能在onOpen事件里面获取到元素携带的参数，大佬能否抽空实现一下，感激不尽

鼠标右键作为组件使用的使用会报错

mouseMenuEl.show(x,y) 说这不是一个函数

build.js 一处疑问

在 script/build.js 文件中，我红线划的这句里，__dirname 是不是应该改成 dirName ?

mouse-menu功能请求三则：fn回调参数应传入点击事件、`v-menu`应支持否定值以完全禁用菜单、分割线支持hidden或末端隐藏

1、fn回调参数传入点击事件

建议在参数4中传入HTML原生点击事件
在进行下载文件、复制数据到粘贴板或打开新窗口等，一些可能被浏览器进行安全检查的操作时，一些库如clipboard.js需要手动传入HTML事件才能顺利完成功能。但是当前版本中，fn回调函数并没有传递每次点击对应的事件。导致只能使用HTML标准已不推荐的全局event，这既不符合标准，也不方便于长期使用，希望后续版本能传入原生事件。

2、`v-menu`应支持否定值以完全禁用菜单

在使用过程中遇到这样的情况：
列表中有两种同结构的数据，A类数据不用触发菜单，而B类数据需要

按照文档在顶层props（parasm同级）传入disabled项的函数，无效，vue3警告：
Extraneous non-props attributes (disabled) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
而后尝试通过往v-menu指令传入否定值（false、null、undefined）等，代码均将传入值视为正常的Object进行使用，导致各种报错，渲染中断。

综上，除希望修复顶层disabled项外，增加逻辑判断v-menu的传入数据是否为false、null、undefined等，用以判断是否完全禁用菜单。

3、分割线支持hidden或末端隐藏

分割线一旦配置了就只能一直显示，无法通过hidden选项动态显示隐藏，在显示效果上很突兀。希望分割线支持hidden。
末端隐藏是指，当分割线处于可显示菜单的最后时，自动隐藏。当然应该不是优先度高的功能，因为只要支持hidden选项即可间接实现

0、文档错别字提醒

https://kongfandong.cn/howdy/mouse-menu/readme中，

配置
Props/指令Value (Objcet)

应为

配置
Props/指令Value (Object)

export type MenuSetting = {
  fn?: MenuCallback;
  label?: string | MenuCallback<string>;
  tips?: string | MenuCallback<string>;
  hidden?: boolean | MenuCallback<boolean>;
  disabled?: boolean | MenuCallback<boolean>;
  icon?: string | MenuCallback<string>;
  line?: boolean;
  children?: MenuSetting[]; // 应该是可选的
  customClass?: string;
}