Refactored, added es5 build

This commit is contained in:
euvl
2017-04-05 11:34:38 +01:00
parent 5109f89848
commit 3d9c97722f
15 changed files with 10570 additions and 117 deletions

120
src/Resizer.vue Normal file
View 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>