vue-frame-selection for vue2 and vue3
npm install vue-frame-selection> a frame selection component for vue2 and vue3
- vue-frame-selection
- Preview
- Usage
- Vue2
- Vue3
- Props
- FrameSelectionGroup
- Slot
- FrameSelectionItem
- Slot
- APIs
- FrameSelectionGroup
- getInnerBoxRectList
- isInTheSelection
``shvue2
npm i vue-frame-selectionor
yarn add vue-frame-selection
#vue3
npm i vue-frame-selection@next
#or
yarn add vue-frame-selection@next
`
Usage Demo
`ts
// demo.vue
import {
// wrap group
FrameSelectionGroup,
// items
FrameSelectionItem,
// inner es6 class
MouseSelection
} from 'vue-frame-selection'
export default {
components: {
FrameSelectionGroup,
FrameSelectionItem
}
}
`
`html`
@mousedown="onMousedown"
@mousemove="onMousemove"
@mouseup="onMouseup"
>
!item.disabled && (isInTheBoxList[idx] || checkSelected(idx))
"
:item="item"
:index="idx"
>
`js
// you can write your own logic
export default {
name: 'FrameSelection',
components: {
FrameSelectionGroup,
FrameSelectionItem
},
props: {
data: {
type: [Array],
default: () => []
},
valueKey: {
type: [String],
default: 'id'
}
},
data () {
return {
// boolean array
isInTheBoxList: [],
// each item's offset (top,left,width,height)
innerBoxRectList: [],
// selected item index set
selectedSet: new Set()
}
},
methods: {
checkSelected (id) {
return this.selectedSet.has(id)
},
onMousedown () {
this.isClick = true
this.innerBoxRectList = this.$refs.selection.getInnerBoxRectList()
},
onMousemove () {
this.isClick = false
this.inBoxSync()
},
onMouseup () {
if (this.isClick) {
this.inBoxSync()
}
this.isInTheBoxList
.reduce((acc, cur, idx) => {
if (cur) {
acc.push(idx)
}
return acc
}, [])
.forEach((x) => {
if (!this.data[x].disabled) {
this.selectedSet.add(x)
}
})
this.isInTheBoxList = []
this.isClick = false
},
inBoxSync () {
this.isInTheBoxList = this.innerBoxRectList.map((rect) => {
return this.$refs.selection.isInTheSelection(rect)
})
}
},
created () {
this.isClick = false
}
}
`
Full features See demo
Usage Demo
`html
`
| name | type | default | description |
| ------------------ | ------- | --------- | --------------------------------------------------------- |
| className | String | undefined | Rectangle Selection customClassName |
| scale | Number | 1 | if you add css transform scale you should add this param |
| zIndex | Number | 99999999 | Rectangle zIndex Selection |
| disabled | Boolean | false | is disabled |
| stopPropagation | Boolean | false | whether invoke event.stopPropagation() |
| stopSelector | String | undefined | _selectStart at |
| notSetWrapPosition | Boolean | false | whether add position: relative |
#### Slot
| name | description |
| ------- | ------------ |
| default | default slot |
#### Slot
| name | description |
| ------- | ------------ |
| default | default slot |
#### getInnerBoxRectList
Get all child FrameSelectionItem and get it's offset postition (top,left,width,height)
`js`
getInnerBoxRectList () {
return this.cacheDoms.map((dom) => {
return {
left: dom.offsetLeft,
top: dom.offsetTop,
width: dom.offsetWidth,
height: dom.offsetHeight
}
})
}
#### isInTheSelection
return a boolean array, for check if the item is in the selection.
`js``
// rect is {top,left,width,height}
isInTheSelection (rect) {
if (this.selection) {
return this.selection.isInTheSelection(rect)
}
}