mirror of
https://github.com/KevinMidboe/vue-js-modal.git
synced 2025-10-29 18:00:20 +00:00
Refactored, added es5 build
This commit is contained in:
120
src/Resizer.vue
Normal file
120
src/Resizer.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div :class="className"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Resizer',
|
||||
props: {
|
||||
minHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}},
|
||||
data() {
|
||||
return {
|
||||
clicked: false,
|
||||
size: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('mousedown', this.start, false)
|
||||
},
|
||||
computed: {
|
||||
className () {
|
||||
return {'vue-modal-resizer': true, 'clicked': this.clicked}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start(event) {
|
||||
this.clicked = true
|
||||
|
||||
window.addEventListener('mousemove', this.mousemove, false)
|
||||
window.addEventListener('mouseup', this.stop, false)
|
||||
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
},
|
||||
stop() {
|
||||
this.clicked = false
|
||||
|
||||
window.removeEventListener('mousemove', this.mousemove, false)
|
||||
window.removeEventListener('mouseup', this.stop, false)
|
||||
|
||||
this.$emit('resize-stop', {
|
||||
element: this.$el.parentElement,
|
||||
size: this.size
|
||||
});
|
||||
},
|
||||
mousemove(event) {
|
||||
this.resize(event)
|
||||
},
|
||||
resize(event) {
|
||||
var el = this.$el.parentElement
|
||||
|
||||
if (el) {
|
||||
var width = event.clientX - el.offsetLeft
|
||||
var height = event.clientY - el.offsetTop
|
||||
|
||||
if (width < this.minWidth) {
|
||||
width = this.minWidth
|
||||
}
|
||||
|
||||
if (width > window.innerWidth) {
|
||||
width = window.innerWidth
|
||||
}
|
||||
|
||||
if (height < this.minHeight) {
|
||||
height = this.minHeight
|
||||
}
|
||||
|
||||
if (height > window.innerHeight) {
|
||||
height = window.innerHeight
|
||||
}
|
||||
|
||||
this.size = {width, height}
|
||||
el.style.width = width + 'px'
|
||||
el.style.height = height + 'px'
|
||||
|
||||
this.$emit('resize', {
|
||||
element: el,
|
||||
size: this.size
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.vue-modal-resizer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999999;
|
||||
background: transparent;
|
||||
cursor: se-resize;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: transparent;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 10px solid #ddd;
|
||||
border-left: 10px solid transparent;
|
||||
}
|
||||
|
||||
&.clicked:after {
|
||||
border-bottom: 10px solid #369BE9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user