frame-selection

一个vue框选功能插件，支持点击和拉框选中

GitHub项目地址

欢迎留言沟通: [email protected]

demo演示

使用

• npm install frame-selection //安装包资源

全局注册方式

    //main.js中引入
    import frame-selection from 'frame-selection'
    Vue.use(frame-selection)

    //*.vue中 直接使用
    <frame-selection 
        :AxisX="AxisX" 
        :AxisY="AxisY" 
        @selectCell="getData" >
    </frame-selection>
    export default {
        data() {
            return {
                AxisX:[1,2,3],
                AxisY:[100,200,300]
            }
        },
        methods:{
            // 当选中格子时触发
            getData(value){
                console.log(value)
            }
        }
    }

单独使用

    //*.vue中 直接使用
    <template>
        <frame-selection 
            :AxisX="AxisX" 
            :AxisY="AxisY" 
            @selectCell="getData" >
        </frame-selection>
    </template>
    // 引入组件
    import FrameSelection from 'frame-selection'
    export default {
        data() {
            return {
                AxisX:[1,2,3],
                AxisY:[100,200,300]
            }
        },
        methods:{
            // 当选中格子时触发
            getData(value){
                console.log(value)
            }
        },
        // 注册组件
        components:{
            FrameSelection,
        }
    }

Options && Methods

Options

属性 | 说明 | 例子| 默认值 | -|-|-|- cellWidth | 每个小格子的宽度 (Number) | 17 | 17 | cellHeight | 每个小格子的高度 (Number) | 17 | 17 | maxWidth | 格子区域的最大宽度，超出产生滚动条(Number) | 200 | 200 | maxHeight | 格子区域的最大高度，超出产生滚动条(Number) | 200 | 200 | title | 功能提示信息(String) | 高度/时间 | 无 | AxisX | X轴方向数据列表(Array) | [01,02,03] | 无 | AxisY | Y轴方向数据列表(Array) | [100,200,300] | 无 | defaultSelectCellBox | 设置默认 已选择的格子(Array) | [[01,100],[01,200],[01,300]] | 无 | usableBox | 设置默认 可选择的格子，默认全部可选(Array) | ["01,200","02,100"] | 全部可选 | clearBtn | 是否显示清空按钮 | false | false

Methods

事件名称 | 说明 | 参数 -|-|- selectCell | 当参数被选中或者取消时触发 | 当前选中的值(Array) | mousedownMethods | 当鼠标按下时触发 | event | mouseupMethods | 当鼠标抬起时触发 | event | mouseleaveMethods | 当鼠标离开区域时触发 | event | clearAll | 点击清空按钮触发 | 无

二次开发

• npm install //安装node运行环境

• npm run dev //启动项目

• npm run build //打包项目

仓库地址

GitHub项目地址https://github.com/HuXiaoTu/frame-selection

目录结构描述

    ├─assets                    静态文件
    └─frameSelection            组件所在区域

V1.1.0 版本内容更新

1. 增加事件回调函数

V1.1.9 版本内容更新

1. 修改传参方式 优化代码

V1.1.15 版本内容更新

1. 优化数据结构
2. 增加最大高度定义参数

V1.1.17 版本内容更新

1. 增加清空按钮&&清空事件