初始化
This commit is contained in:
砂糖
201
frontend/packages/BigScreenDesign/MouseSelect/index.vue
Normal file
201
frontend/packages/BigScreenDesign/MouseSelect/index.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div
|
||||
class="mouse-select-wrap"
|
||||
style="position: relative; user-select: none;"
|
||||
@mousedown="handleMouseDown"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<!-- 这里是需要进行框选的内容 -->
|
||||
<div :class="{ 'notSelect': isSelecting }">
|
||||
<slot />
|
||||
</div>
|
||||
<!-- 在鼠标框选移动时生成虚线框 -->
|
||||
<div
|
||||
v-if="isSelecting"
|
||||
:style="getSelectionBoxStyle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex'
|
||||
let time = 0
|
||||
let newTime = 0
|
||||
export default {
|
||||
props: {
|
||||
offsetX: {
|
||||
type: Number,
|
||||
default: 340 + 50
|
||||
},
|
||||
offsetY: {
|
||||
type: Number,
|
||||
default: 73 + 50
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isSelecting: false, // 是否正在进行框选
|
||||
isSelectDown: false, // 是否按下鼠标左键
|
||||
startX: 0, // 框选起始点的横坐标
|
||||
startY: 0, // 框选起始点的纵坐标
|
||||
endX: 0, // 框选结束点的横坐标
|
||||
endY: 0 // 框选结束点的纵坐标
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('bigScreen', {
|
||||
shiftKeyDown: state => state.shiftKeyDown,
|
||||
scale: state => state.zoom / 100
|
||||
}),
|
||||
getSelectionBoxStyle () {
|
||||
// 计算虚线框的样式
|
||||
const left = Math.min(this.startX, this.endX) + 'px'
|
||||
const top = Math.min(this.startY, this.endY) + 'px'
|
||||
const width = Math.abs(this.endX - this.startX) + 'px'
|
||||
const height = Math.abs(this.endY - this.startY) + 'px'
|
||||
if (!this.isSelecting) {
|
||||
return {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
return {
|
||||
position: 'absolute',
|
||||
left,
|
||||
top,
|
||||
width,
|
||||
height,
|
||||
border: '1px dashed #007aff',
|
||||
background: '#2a2e3380'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('bigScreen',
|
||||
[
|
||||
'changeActiveCodes',
|
||||
'changeActiveCode'
|
||||
]
|
||||
),
|
||||
handleMouseDown (event) {
|
||||
// 点击在底部背景上
|
||||
if (event.button === 0) {
|
||||
time = new Date()
|
||||
// 避免和shift + 点击多选组件冲突
|
||||
if (this.shiftKeyDown) {
|
||||
return
|
||||
}
|
||||
this.isSelectDown = true
|
||||
// 点击在底部背景上
|
||||
if (typeof event.target.className === 'string' && event.target.className.indexOf('mouse-select-wrap') !== -1) {
|
||||
this.startX = event.offsetX
|
||||
this.endX = event.offsetX
|
||||
this.startY = event.offsetY
|
||||
this.endY = event.offsetY
|
||||
} else if (typeof event.target.className === 'string' && event.target.className.indexOf('design-drag-wrap') !== -1) {
|
||||
this.startX = event.offsetX + 50
|
||||
this.endX = event.offsetX + 50
|
||||
this.startY = event.offsetY + 50
|
||||
this.endY = event.offsetY + 50
|
||||
} else if (event.target.className === '') {
|
||||
this.startX = event.offsetX + 50
|
||||
this.endX = event.offsetX + 50
|
||||
this.startY = event.offsetY + 50
|
||||
this.endY = event.offsetY + 50
|
||||
}
|
||||
}
|
||||
},
|
||||
handleMouseMove (event) {
|
||||
if (!this.isSelectDown) {
|
||||
return
|
||||
}
|
||||
newTime = new Date()
|
||||
// if (newTime - time > 300) {
|
||||
this.isSelecting = true
|
||||
// }
|
||||
if (this.isSelecting) {
|
||||
if (typeof event.target.className === 'string' && event.target.className.indexOf('mouse-select-wrap') !== -1) {
|
||||
this.endX = event.offsetX
|
||||
this.endY = event.offsetY
|
||||
} else if (typeof event.target.className === 'string' && (event.target.className.indexOf('design-drag-wrap') !== -1)) {
|
||||
this.endX = event.offsetX + 50
|
||||
this.endY = event.offsetY + 50
|
||||
}
|
||||
}
|
||||
},
|
||||
handleMouseUp (event) {
|
||||
this.isSelectDown = false
|
||||
|
||||
// 按下鼠标和抬起鼠标时间间隔小表示单击，否则表示框选结束
|
||||
// 避免和shift + 点击多选组件冲突
|
||||
// 避免和右键点击冲突
|
||||
if (
|
||||
newTime - time < 300 &&
|
||||
!this.shiftKeyDown &&
|
||||
event.button !== 2
|
||||
) {
|
||||
// 按下鼠标和抬起鼠标时间间隔小表示单击，否则表示框选结束
|
||||
// this.changeActiveCodes([])
|
||||
// this.changeActiveCode('')
|
||||
}
|
||||
// 鼠标按下，并开始选择
|
||||
if (event.button === 0 && this.isSelecting) {
|
||||
this.isSelecting = false
|
||||
if (newTime - time < 300) {
|
||||
// newTime = 0
|
||||
// time = 0
|
||||
// return
|
||||
}
|
||||
newTime = 0
|
||||
time = 0
|
||||
// 在这里可以根据起始点和结束点的坐标计算选中的区域，进行相应的操作
|
||||
this.$emit('selectArea', {
|
||||
startX: Math.min(this.startX, this.endX),
|
||||
startY: Math.min(this.startY, this.endY),
|
||||
endX: Math.max(this.startX, this.endX),
|
||||
endY: Math.max(this.startY, this.endY)
|
||||
})
|
||||
// 重置起始点和结束点的坐标
|
||||
this.startX = 0
|
||||
this.startY = 0
|
||||
this.endX = 0
|
||||
this.endY = 0
|
||||
} else if (!this.shiftKeyDown && !this.isSelecting) {
|
||||
// 重置起始点和结束点的坐标
|
||||
this.startX = 0
|
||||
this.startY = 0
|
||||
this.endX = 0
|
||||
this.endY = 0
|
||||
// this.$emit('selectArea', {
|
||||
// startX: Math.min(this.startX, this.endX),
|
||||
// startY: Math.min(this.startY, this.endY),
|
||||
// endX: Math.max(this.startX, this.endX),
|
||||
// endY: Math.max(this.startY, this.endY)
|
||||
// })
|
||||
// this.changeActiveCodes([])
|
||||
}
|
||||
},
|
||||
handleMouseLeave () {
|
||||
this.isSelecting = false
|
||||
this.isSelectDown = false
|
||||
this.startX = 0
|
||||
this.startY = 0
|
||||
this.endX = 0
|
||||
this.endY = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.mouse-select-wrap{
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
margin: -50px;
|
||||
padding: 50px;
|
||||
}
|
||||
.notSelect {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user