frame-selection v1.1.17

frame-selection

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

GitHub项目地址

欢迎留言沟通: 13676373110@163.com

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

Methods

二次开发

• 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. 增加清空按钮&&清空事件