frame-selection

frame-selection

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

GitHub项目地址

欢迎留言沟通: [e-mail]

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 版本内容更新

• 增加事件回调函数

V1.1.9 版本内容更新

• 修改传参方式 优化代码

V1.1.15 版本内容更新

• 优化数据结构
• 增加最大高度定义参数

V1.1.17 版本内容更新

• 增加清空按钮&&清空事件