Skip to content

Commit

Permalink
update split-pane component
Browse files Browse the repository at this point in the history
  • Loading branch information
zhigang.li committed Jan 17, 2018
1 parent 8e5ccaa commit d3b8abc
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 109 deletions.
7 changes: 4 additions & 3 deletions src/views/my-components/split-pane/split-pane-page.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
<div>
<Card :padding="0">
<div class="split-pane-con">
<split-pane :style="{height: '100%'}" :min="30" :max="80" @on-trigger-moving="handleMoving" direction="horizontal" v-model="triggerOffset">
<split-pane :style="{height: '100%'}" right min="100px" :max="80" @on-trigger-moving="handleMoving" direction="horizontal" v-model="triggerOffset">
<div slot="left" style="height: 100%;">
<split-pane :style="{height: '100%'}" direction="vertical" v-model="triggerOffsetV">
<div class="introduce-left-con" slot="top" style="background: #EDE3A0;height: 100%;padding: 30px;">
<h4>- 该组件可以拖动修改左右尺寸，还可以绑定v-model来设置，如设置v-model="40"即左侧40%，右侧60%</h4>
<h4>- 该组件可以拖动修改左右尺寸，还可以绑定v-model来设置，如设置v-model="40"即左侧40%，右侧60%，也可设置'200px'像素值</h4>
<h4>- 设置right属性则v-model设置的值为右侧（下册）的宽度（高度）</h4>
<h4>- 可设置最小和最大距离，如:min="80"即向右拖动到80%处就不能再拖动</h4>
<h4>- 可绑定事件@on-trigger-moving，回调函数的返回值是鼠标事件对象，同时该对象还包括两个我们自定义的变量，即atMax和atMin，即此时是否是在最大或最小距离处，类型是Boolean。来拖动右边的trigger看看吧。</h4>
<h4 style="margin-bottom: 10px;">- 可使用slot="trigger"自定义拖动触发器，但有三个注意点:</h4>
Expand Down Expand Up @@ -45,7 +46,7 @@ export default {
},
data () {
return {
triggerOffset: 50,
triggerOffset: '300px',
triggerOffsetV: 70,
triggerOffsetMin: 40,
atMax: false,
Expand Down
234 changes: 128 additions & 106 deletions src/views/my-components/split-pane/split-pane/split-pane.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div
:class="`${prefix}-trigger`"
ref="trigger"
:style="{left: `${triggerOffset}%`}"
:style="{left: triggerLeft}"
@mousedown="handleMousedown"
unselectable="on">
</div>
Expand All @@ -35,7 +35,7 @@
<div
:class="`${prefix}-trigger`"
ref="trigger"
:style="{top: `${triggerOffset}%`}"
:style="{top: triggerLeft}"
@mousedown="handleMousedown"
unselectable="on">
</div>
Expand All @@ -49,111 +49,133 @@

<script>
const oneOf = function (ele, targetArr) {
if (targetArr.indexOf(ele) >= 0) {
return true;
} else {
return false;
}
if (targetArr.indexOf(ele) >= 0) {
return true;
} else {
return false;
}
};
export default {
name: 'splitPane',
props: {
value: {
type: [Number, String],
default: 50
},
direction: {
type: String,
default: 'horizontal',
validator (val) {
return oneOf(val, ['vertical', 'horizontal']);
}
},
min: {
type: [Number, String],
default: 3
},
max: {
type: [Number, String],
default: 97
}
},
data () {
return {
prefix: 'split-pane',
canMove: false,
triggerOffset: 50,
triggerOldOffset: 50,
offset: {},
atMin: false,
atMax: false
};
},
computed: {
wraperClasses () {
return [
this.prefix,
this.direction === 'vertical' ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
];
},
leftSize () {
return `${this.triggerOffset}%`;
},
rightSize () {
return `${100 - this.triggerOffset}%`;
},
minTransed () {
return this.transValue(this.min);
},
maxTransed () {
return this.transValue(this.max);
}
},
methods: {
handleMouseup () {
this.canMove = false;
},
transValue (val) {
return (typeof val === 'number') ? val : Math.floor(((parseFloat(val) / this.$refs.wraper.offsetWidth) * 10000)) / 100;
},
handleMousedown (e) {
this.canMove = true;
this.triggerOldOffset = this.triggerOffset;
this.offset = {
x: e.pageX,
y: e.pageY
};
e.preventDefault();
},
handleMouseout () {
this.canMove = false;
},
handleMousemove (e) {
if (this.canMove) {
let offset;
if (this.direction === 'horizontal') {
offset = this.triggerOldOffset + Math.floor(((e.clientX - this.offset.x) / this.$refs.wraper.offsetWidth) * 10000) / 100;
} else {
offset = this.triggerOldOffset + Math.floor(((e.clientY - this.offset.y) / this.$refs.wraper.offsetHeight) * 10000) / 100;
}
if (offset <= this.minTransed) {
this.triggerOffset = Math.max(offset, this.minTransed);
} else {
this.triggerOffset = Math.min(offset, this.maxTransed);
}
this.atMin = this.triggerOffset === this.minTransed;
this.atMax = this.triggerOffset === this.maxTransed;
e.atMin = this.atMin;
e.atMax = this.atMax;
this.$emit('input', offset);
this.$emit('on-trigger-moving', e);
}
}
},
mounted () {
if (this.value !== undefined) {
this.triggerOffset = (typeof this.value === 'number') ? this.value : Math.floor(((parseFloat(this.value) / this.$refs.wraper.offsetWidth) * 10000)) / 100;
}
}
name: 'splitPane',
props: {
value: {
type: [Number, String],
default: 50
},
direction: {
type: String,
default: 'horizontal',
validator (val) {
return oneOf(val, ['vertical', 'horizontal']);
}
},
min: {
type: [Number, String],
default: 3
},
max: {
type: [Number, String],
default: 97
},
right: {
type: Boolean,
default: false
}
},
data () {
return {
prefix: 'split-pane',
canMove: false,
triggerOffset: 50,
triggerOldOffset: 50,
offset: {},
atMin: false,
atMax: false
};
},
computed: {
wraperClasses () {
return [
this.prefix,
this.direction === 'vertical' ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
];
},
leftSize () {
return this.right ? `${100 - this.triggerOffset}%` : `${this.triggerOffset}%`;
},
rightSize () {
return this.right ? `${this.triggerOffset}%` : `${100 - this.triggerOffset}%`;
},
triggerLeft () {
return this.right ? `${100 - this.triggerOffset}%` : `${this.triggerOffset}%`;
},
minTransed () {
return this.transValue(this.min);
},
maxTransed () {
return this.transValue(this.max);
}
},
methods: {
handleMouseup (e) {
this.canMove = false;
this.$emit('on-moving-end', e);
},
transValue (val) {
return (typeof val === 'number') ? val : Math.floor(((parseFloat(val) / this.$refs.wraper.offsetWidth) * 10000)) / 100;
},
handleMousedown (e) {
this.canMove = true;
this.triggerOldOffset = this.triggerOffset;
this.offset = {
x: e.pageX,
y: e.pageY
};
this.$emit('on-moving-start', e);
e.preventDefault();
},
handleMouseout (e) {
this.canMove = false;
this.$emit('on-moving-end', e);
},
handleMousemove (e) {
if (this.canMove) {
let offset;
if (this.direction === 'horizontal') {
let moveSize = Math.floor(((e.clientX - this.offset.x) / this.$refs.wraper.offsetWidth) * 10000) / 100;
offset = this.triggerOldOffset + (this.right ? -moveSize : moveSize);
} else {
let moveSize = Math.floor(((e.clientY - this.offset.y) / this.$refs.wraper.offsetHeight) * 10000) / 100;
offset = this.triggerOldOffset + (this.right ? -moveSize : moveSize);
}
if (offset <= this.minTransed) {
this.triggerOffset = Math.max(offset, this.minTransed);
} else {
this.triggerOffset = Math.min(offset, this.maxTransed);
}
this.atMin = this.triggerOffset === this.minTransed;
this.atMax = this.triggerOffset === this.maxTransed;
e.atMin = this.atMin;
e.atMax = this.atMax;
this.$emit('input', offset);
this.$emit('on-trigger-moving', e);
}
}
},
watch: {
value (val) {
this.$nextTick(() => {
this.triggerOffset = (typeof val === 'number') ? val : Math.floor(((parseInt(val) / this.$refs.wraper.offsetWidth) * 10000)) / 100;
});
}
},
mounted () {
if (this.value !== undefined) {
this.$nextTick(() => {
this.triggerOffset = (typeof this.value === 'number') ? this.value : Math.floor(((parseInt(this.value) / this.$refs.wraper.offsetWidth) * 10000)) / 100;
});
this.triggerOffset = (typeof this.value === 'number') ? this.value : Math.floor(((parseInt(this.value) / this.$refs.wraper.offsetWidth) * 10000)) / 100;
}
}
};
</script>

0 comments on commit d3b8abc

Please sign in to comment.