Giter Club home page Giter Club logo

flowgrid's Introduction

flowgrid

flowgrid.js is a plugin for vue widget layout, 一个基于vue的轻量简单的网格流布局插件

备注

因为/docs是github.io的默认目录, 我就把构建后代码放这里了, 没有放入约定俗成的/dist中, 见谅.

简介

flowgrid是vue插件, 使用 babel + rollup + uglifyjs 来进行源码构建.

命令

npm install flowgrid --save-dev

npm

npm地址: https://www.npmjs.com/package/flowgrid

参考图

github

使用方式

  1. /docs/flowgrid.min.js npm install安装后可以直接import使用

  2. /src/源码 直接copy到项目工程进行使用, 方便定制

源码说明

fg-item的node属性的数据格式说明:
  {
    id:'2',   // 唯一标识
    x: 0,     // 坐标 x
    y: 0,     // 坐标 y
    w: 4,     // 宽度
    h: 4,     // 高度
    minW: 2,  // 最小宽度
    minH: 2   // 最小高度
  }

更新日志

v3.0.0

  1. pageX 修改为 clientX
  2. 删除cellW_Int和cellH_Int
  3. 修正容器排版左上角的padding.top, padding.left对齐方式

v2.0.2

  1. 补充回调函数dragStart, drag, dragEnd
  2. 补充回调函数resizeStart, resize, resizeEnd
  3. 修复拖拽过程中body文本选中bug

v1.2.2

  1. 完善readme文档

v1.2.1

  1. 使用vue来构建源码, 蹭蹭热度, 支持以vue的方式来使用.
  2. 优化了部分代码, 补充注释.
  3. 修复缩放拖拽时状态判断不准确的问题
  4. 修复拖拽过程中文本选中的问题, 动态给body加user-select:none
  5. 使用getBoundingClientRect()来计算节点偏移

版权

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.