howdyjs v0.6.0

Howdy

一个集合个人封装的VUE组件与指令的混合包
A package of mix some vue components and vue directive

Link

• ⚡Github
• 💾NPM
• 📖Document

组件

1. Standard Table
   基于ElementUI table的二次封装

2. Animation Dialog
   使用动画打开模态框

3. Resize Directive
   为HTML盒子加入拖拽更改大小功能

4. Scroll Directive
   为HTML盒子加入自定义滚动条

5. Mouse Menu Directive
   为HTML盒子加入自定义右键菜单

6. Size Observer Directive
   监听盒子大小变化

7. Img Zoom Directive
   为Img标签加入图片放大功能，支持按组浏览下一张图片

8. To Drag Directive
   为Fixed定位的元素加入可拖拽功能

9. Standard Tabs
   移动端标签页

10. Standard Form
    基于ElementUI form的二次封装

部分指令已兼容支持Vue3，包括：Resize Directive、Scroll Directive、Size Observer Directive、Img Zoom Directive

开始使用

安装

npm i -S howdyjs

使用

1. 指令 | 以Resize指令为例

// 全局使用: main.js
import { Resize } from 'howdyjs'
Vue.directive('resize', Resize)
// or (带默认参数安装)
// Vue.use(Resize, someGlobalOption)

// 在Vue3中使用（部分指令已作兼容支持）
// app.use(Resize)


// 组件内直接使用
import { Resize } from 'howdyjs'
export default {
  directives: {
    resize: Resize
  }
}

2. 组件 | 以StandardTable组件为例

// 全局使用: main.js
import { StandardTable } from 'howdyjs'
Vue.use(StandardTable, {
  responseItems: 'data.data.items',
  responseTotal: 'data.data.total',
  pageSize: 15,
  pageSizes: [10, 15, 20, 50, 100]
})

// 组件内直接使用
import { StandardTable } from 'howdyjs'
export default {
  components: {
    StandardTable
  }
}

按需加载及打包

1. 方式一：更改引用路径

// 将原来的
import { StandardTable } from 'howdyjs'
// 改为
import StandardTable from 'howdyjs/lib/standard-table'

2. 方式二：使用babel-plugin-component插件

VIEW AUTHOR BLOG