This is a box selection component
npm install frame-selection npm install frame-selection ` //安装包资源
$3
` JavaScript
//main.js中引入
import frame-selection from 'frame-selection'
Vue.use(frame-selection)
`
` JavaScript
//*.vue中 直接使用
:AxisY="AxisY"
@selectCell="getData" >
export default {
data() {
return {
AxisX:[1,2,3],
AxisY:[100,200,300]
}
},
methods:{
// 当选中格子时触发
getData(value){
console.log(value)
}
}
}
`
$3
` JavaScript
//*.vue中 直接使用
:AxisY="AxisY"
@selectCell="getData" >
// 引入组件
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
$3
属性 | 说明 | 例子| 默认值 |
-|-|-|-
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
$3
事件名称 | 说明 | 参数
-|-|-
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
目录结构描述
`js
├─assets 静态文件
└─frameSelection 组件所在区域
``