vue-gantt-3
Version:
A gantt component for Vue 3
83 lines (82 loc) • 2.08 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const _sfc_main = vue.defineComponent({
name: "common-expandable-box",
components: {},
props: {
draglineShow: {
type: Boolean,
default: true
},
initWidth: {
type: Number,
default: 244
},
minWidth: {
type: Number,
default: 154
},
maxWidth: {
type: Number,
required: true
},
contentClass: String
},
emits: ["width-change"],
data() {
return {
mouseStartX: 0,
width: this.initWidth,
originWidth: 0,
hasDragged: false,
indragging: false
};
},
computed: {
boxStyle() {
return {
width: this.width + "px"
};
}
},
watch: {
initWidth(val) {
if (this.hasDragged) return;
if (val > this.maxWidth) {
this.width = this.maxWidth;
} else if (val < this.minWidth) {
this.width = this.minWidth;
} else {
this.width = val;
}
}
},
mounted() {
this.$emit("width-change", this.width);
},
methods: {
handleMouseDown(event) {
this.mouseStartX = event.clientX;
this.originWidth = this.width;
this.indragging = true;
window.addEventListener("mousemove", this.handleMouseMove, true);
window.addEventListener("mouseup", this.handleMouseUp, true);
},
handleMouseUp() {
this.hasDragged = true;
this.indragging = false;
window.removeEventListener("mousemove", this.handleMouseMove, true);
window.removeEventListener("mouseup", this.handleMouseUp, true);
},
handleMouseMove(event) {
const mouseEndX = event.clientX;
let changeWidth = mouseEndX - this.mouseStartX;
let width = this.originWidth + changeWidth;
this.width = Math.max(this.minWidth, Math.min(this.maxWidth, width));
this.$emit("width-change", this.width);
}
}
});
exports.default = _sfc_main;
//# sourceMappingURL=ExpandableBox.vue2.js.map