# drag-cell-resize
> drag cell resize table col
Latest version **1.0.4** (published 2020-11-27) · ISC license · 0 weekly downloads
## Install
```sh
npm install drag-cell-resize
pnpm add drag-cell-resize
yarn add drag-cell-resize
bun add drag-cell-resize
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-11-27 |
| First published | 2020-10-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | mgso |
| Maintainers | mgso |
| Keywords | drag table cell, table resize, drag resize |
## Links
- npm: https://www.npmjs.com/package/drag-cell-resize
- Repository: https://github.com/mgsod/dragCellResize
- Homepage: https://github.com/mgsod/dragCellResize#readme
- Issues: https://github.com/mgsod/dragCellResize/issues
- npm.io page: https://npm.io/package/drag-cell-resize
## Dependencies (1)
- [@types/vue](https://npm.io/package/@types/vue.md) ^2.0.0
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 1.0.4 (latest) — 2020-11-27
- 1.0.3 — 2020-10-31
- 1.0.2 — 2020-10-31
- 1.0.1 — 2020-10-31
- 1.0.0 — 2020-10-31
## README
## dragCellResize
拖拽表格列宽，支持Vue指令
## 安装
### npm & yarn
```
npm install drag-cell-resize
yarn add drag-cell-resize
```
### cdn
umd版本（包含指令和DragCellResize类）:
```
```
var版本（仅包含DragCellResize类）：
```
```
### 使用方式
* #### 在Vue中使用
[Vue Demo](https://mgsod.github.io/front-end/dragCellResize.html#demo "Vue Demo")
1.作为指令使用
```js
import Vue from 'vue'
import directive from 'drag-cell-resize'
Vue.use(directive)
```
```vue
```
指令不仅仅可以绑定在table中,只要其包含`table`表格都可以绑定,例如:
```vue
```
2.直接调用DragCellResize类
```vue
```
* #### 不使用Vue的情况下
```html
```
### DragCellResize类
指令本质上就是在bind时实例化了`DragCellResize`类.
> 注：在使用v-drag-cell-resize的时候,由于某些情况下thead或者整个table都还未被渲染(例如使用了v-if),指令无法在`bind`或`insert`钩子上获取到dom对象.所以如果在`bind`阶段未找到dom的话,指令会尝试在update钩子上获取表格的dom对象及绑定事件.
>尽管用到了update钩子，会多次触发指令绑定,但是外部用了`Map`来缓存`dom`和`DragCellResize`的关系,.所以`DragCellResize`一旦被实例化后不会便不会再重复实例化和绑定事件.
构造参数
new DragCellResize(el,callbakc,isCustom)
| 参数 | 释义 | 是否必填 |
| :-----| :----: | :----: |
| el | 欲绑定的Dom元素，不限于表格,只要包含表格即可 | 是 |
| callback | 完成拖拽后的回调函数/自定义处理拖拽。可在拖拽后执行某些操作 | 否（如果isCustom为true,callback必传） |
| isCustom | 是否自定义处理拖拽操作，如果为true，拖拽的后不会设置列宽，交由callback处理 | 否 |
[Demo](https://mgsod.github.io/front-end/dragCellResize.html#demo "Vue Demo")
### 注意事项:
由于`td`会动态分配整个`table`的宽度,进而导致实际设置的`width`大小不是`td`的真实宽度.就会导致拖拽的宽度不是实际得到的大小.例如,明明拖拽后总宽度是100px,实际上表现的会超过100px.无法对齐到虚线处
所以需要对表格的`th`,`td`增加css样式.设置其`box-sizing`为`border-box`
---
_Source: https://npm.io/package/drag-cell-resize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._