Split code format
This commit is contained in:
梁灏
parent
8fe474b951
commit
cd397a6f46
3 changed files with 245 additions and 236 deletions
|
|
@ -1,74 +1,75 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="split-pane-page-wrapper">
|
<div class="split-pane-page-wrapper">
|
||||||
<Split v-model="offset" @on-moving="handleMoving">
|
<Split v-model="offset" @on-moving="handleMoving">
|
||||||
<div slot="left" class="pane left-pane">
|
<div slot="left" class="pane left-pane">
|
||||||
<Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
|
<Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
|
||||||
<div slot="top" class="pane top-pane"></div>
|
<div slot="top" class="pane top-pane"></div>
|
||||||
<div slot="bottom" class="pane bottom-pane"></div>
|
<div slot="bottom" class="pane bottom-pane"></div>
|
||||||
<div slot="trigger" class="custom-trigger">
|
<div slot="trigger" class="custom-trigger">
|
||||||
<Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
|
<Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
|
||||||
</div>
|
</div>
|
||||||
|
</Split>
|
||||||
|
</div>
|
||||||
|
<div slot="right" class="pane right-pane"></div>
|
||||||
</Split>
|
</Split>
|
||||||
</div>
|
</div>
|
||||||
<div slot="right" class="pane right-pane"></div>
|
|
||||||
</Split>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'split_pane_page',
|
name: 'split_pane_page',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
offset: 0.6,
|
offset: 0.6,
|
||||||
offsetVertical: '250px'
|
offsetVertical: '250px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleMoving (e) {
|
||||||
|
console.log(e.atMin, e.atMax)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleMoving (e) {
|
|
||||||
console.log(e.atMin, e.atMax)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.center-middle{
|
.center-middle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
|
||||||
.split-pane-page-wrapper{
|
|
||||||
height: 600px;
|
|
||||||
.pane{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
&.left-pane{
|
|
||||||
background: sandybrown;
|
|
||||||
}
|
}
|
||||||
&.right-pane{
|
|
||||||
background: palevioletred;
|
.split-pane-page-wrapper {
|
||||||
|
height: 600px;
|
||||||
|
.pane {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
&.left-pane {
|
||||||
|
background: sandybrown;
|
||||||
|
}
|
||||||
|
&.right-pane {
|
||||||
|
background: palevioletred;
|
||||||
|
}
|
||||||
|
&.top-pane {
|
||||||
|
background: sandybrown;
|
||||||
|
}
|
||||||
|
&.bottom-pane {
|
||||||
|
background: palevioletred;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.custom-trigger {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
.center-middle;
|
||||||
|
box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
|
||||||
|
cursor: row-resize;
|
||||||
|
i.trigger-icon {
|
||||||
|
.center-middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.top-pane{
|
|
||||||
background: sandybrown;
|
|
||||||
}
|
|
||||||
&.bottom-pane{
|
|
||||||
background: palevioletred;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.custom-trigger{
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #fff;
|
|
||||||
position: absolute;
|
|
||||||
.center-middle;
|
|
||||||
box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
|
|
||||||
cursor: row-resize;
|
|
||||||
i.trigger-icon{
|
|
||||||
.center-middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,155 +1,163 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="outerWrapper" :class="wrapperClasses">
|
<div ref="outerWrapper" :class="wrapperClasses">
|
||||||
<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
|
<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
|
||||||
<div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
|
<div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
|
||||||
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
|
<slot name="left"/>
|
||||||
<slot name="trigger">
|
</div>
|
||||||
<trigger mode="vertical"/>
|
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
|
||||||
</slot>
|
<slot name="trigger">
|
||||||
</div>
|
<trigger mode="vertical"/>
|
||||||
<div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
|
</slot>
|
||||||
|
</div>
|
||||||
|
<div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
|
||||||
|
<slot name="right"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else :class="`${prefix}-vertical`">
|
||||||
|
<div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']">
|
||||||
|
<slot name="top"/>
|
||||||
|
</div>
|
||||||
|
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
|
||||||
|
<slot name="trigger">
|
||||||
|
<trigger mode="horizontal"/>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
|
||||||
|
<slot name="bottom"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else :class="`${prefix}-vertical`">
|
|
||||||
<div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
|
|
||||||
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
|
|
||||||
<slot name="trigger">
|
|
||||||
<trigger mode="horizontal"/>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
<div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { oneOf } from '../../utils/assist';
|
import {oneOf} from '../../utils/assist';
|
||||||
import { on, off } from '../../utils/dom';
|
import {on, off} from '../../utils/dom';
|
||||||
import Trigger from './trigger.vue';
|
import Trigger from './trigger.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'Split',
|
name: 'Split',
|
||||||
components: {
|
components: {
|
||||||
Trigger
|
Trigger
|
||||||
},
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 0.5
|
|
||||||
},
|
},
|
||||||
mode: {
|
props: {
|
||||||
validator (value) {
|
value: {
|
||||||
return oneOf(value, ['horizontal', 'vertical']);
|
type: [Number, String],
|
||||||
|
default: 0.5
|
||||||
},
|
},
|
||||||
default: 'horizontal'
|
mode: {
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['horizontal', 'vertical']);
|
||||||
|
},
|
||||||
|
default: 'horizontal'
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: '40px'
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: '40px'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
min: {
|
/**
|
||||||
type: [Number, String],
|
* Events
|
||||||
default: '40px'
|
* @on-move-start
|
||||||
|
* @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
|
||||||
|
* @on-move-end
|
||||||
|
*/
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
prefix: 'ivu-split',
|
||||||
|
offset: 0,
|
||||||
|
oldOffset: 0,
|
||||||
|
isMoving: false
|
||||||
|
};
|
||||||
},
|
},
|
||||||
max: {
|
computed: {
|
||||||
type: [Number, String],
|
wrapperClasses () {
|
||||||
default: '40px'
|
return [
|
||||||
|
`${this.prefix}-wrapper`,
|
||||||
|
this.isMoving ? 'no-select' : ''
|
||||||
|
];
|
||||||
|
},
|
||||||
|
isHorizontal () {
|
||||||
|
return this.mode === 'horizontal';
|
||||||
|
},
|
||||||
|
anotherOffset () {
|
||||||
|
return 100 - this.offset;
|
||||||
|
},
|
||||||
|
valueIsPx () {
|
||||||
|
return typeof this.value === 'string';
|
||||||
|
},
|
||||||
|
offsetSize () {
|
||||||
|
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
|
||||||
|
},
|
||||||
|
computedMin () {
|
||||||
|
return this.getComputedThresholdValue('min');
|
||||||
|
},
|
||||||
|
computedMax () {
|
||||||
|
return this.getComputedThresholdValue('max');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
px2percent (numerator, denominator) {
|
||||||
|
return parseFloat(numerator) / parseFloat(denominator);
|
||||||
|
},
|
||||||
|
getComputedThresholdValue (type) {
|
||||||
|
let size = this.$refs.outerWrapper[this.offsetSize];
|
||||||
|
if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
|
||||||
|
else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
|
||||||
|
},
|
||||||
|
getMin (value1, value2) {
|
||||||
|
if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
|
||||||
|
else return Math.min(value1, value2);
|
||||||
|
},
|
||||||
|
getMax (value1, value2) {
|
||||||
|
if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
|
||||||
|
else return Math.max(value1, value2);
|
||||||
|
},
|
||||||
|
getAnotherOffset (value) {
|
||||||
|
let res = 0;
|
||||||
|
if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
|
||||||
|
else res = 1 - value;
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
handleMove (e) {
|
||||||
|
let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
|
||||||
|
let offset = pageOffset - this.initOffset;
|
||||||
|
let outerWidth = this.$refs.outerWrapper[this.offsetSize];
|
||||||
|
let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
|
||||||
|
let anotherValue = this.getAnotherOffset(value);
|
||||||
|
if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
|
||||||
|
if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
|
||||||
|
e.atMin = this.value === this.computedMin;
|
||||||
|
e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
|
||||||
|
this.$emit('input', value);
|
||||||
|
this.$emit('on-moving', e);
|
||||||
|
},
|
||||||
|
handleUp () {
|
||||||
|
this.isMoving = false;
|
||||||
|
off(document, 'mousemove', this.handleMove);
|
||||||
|
off(document, 'mouseup', this.handleUp);
|
||||||
|
this.$emit('on-move-end');
|
||||||
|
},
|
||||||
|
handleMousedown (e) {
|
||||||
|
this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
|
||||||
|
this.oldOffset = this.value;
|
||||||
|
this.isMoving = true;
|
||||||
|
on(document, 'mousemove', this.handleMove);
|
||||||
|
on(document, 'mouseup', this.handleUp);
|
||||||
|
this.$emit('on-move-start');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value () {
|
||||||
|
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
/**
|
|
||||||
* Events
|
|
||||||
* @on-move-start
|
|
||||||
* @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
|
|
||||||
* @on-move-end
|
|
||||||
*/
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
prefix: 'ivu-split',
|
|
||||||
offset: 0,
|
|
||||||
oldOffset: 0,
|
|
||||||
isMoving: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
wrapperClasses () {
|
|
||||||
return [
|
|
||||||
`${this.prefix}-wrapper`,
|
|
||||||
this.isMoving ? 'no-select' : ''
|
|
||||||
];
|
|
||||||
},
|
|
||||||
isHorizontal () {
|
|
||||||
return this.mode === 'horizontal';
|
|
||||||
},
|
|
||||||
anotherOffset () {
|
|
||||||
return 100 - this.offset;
|
|
||||||
},
|
|
||||||
valueIsPx () {
|
|
||||||
return typeof this.value === 'string';
|
|
||||||
},
|
|
||||||
offsetSize () {
|
|
||||||
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
|
|
||||||
},
|
|
||||||
computedMin () {
|
|
||||||
return this.getComputedThresholdValue('min');
|
|
||||||
},
|
|
||||||
computedMax () {
|
|
||||||
return this.getComputedThresholdValue('max');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
px2percent (numerator, denominator) {
|
|
||||||
return parseFloat(numerator) / parseFloat(denominator);
|
|
||||||
},
|
|
||||||
getComputedThresholdValue (type) {
|
|
||||||
let size = this.$refs.outerWrapper[this.offsetSize];
|
|
||||||
if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
|
|
||||||
else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
|
|
||||||
},
|
|
||||||
getMin (value1, value2) {
|
|
||||||
if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
|
|
||||||
else return Math.min(value1, value2);
|
|
||||||
},
|
|
||||||
getMax (value1, value2) {
|
|
||||||
if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
|
|
||||||
else return Math.max(value1, value2);
|
|
||||||
},
|
|
||||||
getAnotherOffset (value) {
|
|
||||||
let res = 0;
|
|
||||||
if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
|
|
||||||
else res = 1 - value;
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
handleMove (e) {
|
|
||||||
let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
|
|
||||||
let offset = pageOffset - this.initOffset;
|
|
||||||
let outerWidth = this.$refs.outerWrapper[this.offsetSize];
|
|
||||||
let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
|
|
||||||
let anotherValue = this.getAnotherOffset(value);
|
|
||||||
if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
|
|
||||||
if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
|
|
||||||
e.atMin = this.value === this.computedMin;
|
|
||||||
e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
|
|
||||||
this.$emit('input', value);
|
|
||||||
this.$emit('on-moving', e);
|
|
||||||
},
|
|
||||||
handleUp () {
|
|
||||||
this.isMoving = false;
|
|
||||||
off(document, 'mousemove', this.handleMove);
|
|
||||||
off(document, 'mouseup', this.handleUp);
|
|
||||||
this.$emit('on-move-end');
|
|
||||||
},
|
|
||||||
handleMousedown (e) {
|
|
||||||
this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
|
|
||||||
this.oldOffset = this.value;
|
|
||||||
this.isMoving = true;
|
|
||||||
on(document, 'mousemove', this.handleMove);
|
|
||||||
on(document, 'mouseup', this.handleUp);
|
|
||||||
this.$emit('on-move-start');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value () {
|
|
||||||
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="classes">
|
<div :class="classes">
|
||||||
<div :class="barConClasses">
|
<div :class="barConClasses">
|
||||||
<i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
|
<i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Trigger',
|
name: 'Trigger',
|
||||||
props: {
|
props: {
|
||||||
mode: String
|
mode: String
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
prefix: 'ivu-split-trigger',
|
|
||||||
initOffset: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isVertical () {
|
|
||||||
return this.mode === 'vertical';
|
|
||||||
},
|
},
|
||||||
classes () {
|
data () {
|
||||||
return [
|
return {
|
||||||
this.prefix,
|
prefix: 'ivu-split-trigger',
|
||||||
this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
|
initOffset: 0
|
||||||
];
|
};
|
||||||
},
|
},
|
||||||
barConClasses () {
|
computed: {
|
||||||
return [
|
isVertical () {
|
||||||
`${this.prefix}-bar-con`,
|
return this.mode === 'vertical';
|
||||||
this.isVertical ? 'vertical' : 'horizontal'
|
},
|
||||||
];
|
classes () {
|
||||||
|
return [
|
||||||
|
this.prefix,
|
||||||
|
this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
|
||||||
|
];
|
||||||
|
},
|
||||||
|
barConClasses () {
|
||||||
|
return [
|
||||||
|
`${this.prefix}-bar-con`,
|
||||||
|
this.isVertical ? 'vertical' : 'horizontal'
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue