other / mew-iview

Commit cd397a6f46f0c835f994c07dafa65377913e42a5

Authored by 梁灏
1 parent 8fe474b9

Split code format

Showing 3 changed files with 247 additions and 238 deletions   Show diff stats
Inline Side-by-side
examples/routers/split.vue
  Show/Hide comments   View file @cd397a6
1 1 <template>
2   - <div class="split-pane-page-wrapper">
3   - <Split v-model="offset" @on-moving="handleMoving">
4   - <div slot="left" class="pane left-pane">
5   - <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
6   - <div slot="top" class="pane top-pane"></div>
7   - <div slot="bottom" class="pane bottom-pane"></div>
8   - <div slot="trigger" class="custom-trigger">
9   - <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
10   - </div>
  2 + <div class="split-pane-page-wrapper">
  3 + <Split v-model="offset" @on-moving="handleMoving">
  4 + <div slot="left" class="pane left-pane">
  5 + <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
  6 + <div slot="top" class="pane top-pane"></div>
  7 + <div slot="bottom" class="pane bottom-pane"></div>
  8 + <div slot="trigger" class="custom-trigger">
  9 + <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
  10 + </div>
  11 + </Split>
  12 + </div>
  13 + <div slot="right" class="pane right-pane"></div>
11 14 </Split>
12   - </div>
13   - <div slot="right" class="pane right-pane"></div>
14   - </Split>
15   - </div>
  15 + </div>
16 16 </template>
17 17  
18 18 <script>
19   -export default {
20   - name: 'split_pane_page',
21   - data () {
22   - return {
23   - offset: 0.6,
24   - offsetVertical: '250px'
  19 + export default {
  20 + name: 'split_pane_page',
  21 + data () {
  22 + return {
  23 + offset: 0.6,
  24 + offsetVertical: '250px'
  25 + }
  26 + },
  27 + methods: {
  28 + handleMoving (e) {
  29 + console.log(e.atMin, e.atMax)
  30 + }
  31 + }
25 32 }
26   - },
27   - methods: {
28   - handleMoving (e) {
29   - console.log(e.atMin, e.atMax)
30   - }
31   - }
32   -}
33 33 </script>
34 34  
35 35 <style lang="less">
36   -.center-middle{
37   - position: absolute;
38   - left: 50%;
39   - top: 50%;
40   - transform: translate(-50%, -50%);
41   -}
42   -.split-pane-page-wrapper{
43   - height: 600px;
44   - .pane{
45   - width: 100%;
46   - height: 100%;
47   - &.left-pane{
48   - background: sandybrown;
49   - }
50   - &.right-pane{
51   - background: palevioletred;
52   - }
53   - &.top-pane{
54   - background: sandybrown;
  36 + .center-middle {
  37 + position: absolute;
  38 + left: 50%;
  39 + top: 50%;
  40 + transform: translate(-50%, -50%);
55 41 }
56   - &.bottom-pane{
57   - background: palevioletred;
58   - }
59   - }
60   - .custom-trigger{
61   - width: 20px;
62   - height: 20px;
63   - border-radius: 50%;
64   - background: #fff;
65   - position: absolute;
66   - .center-middle;
67   - box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
68   - cursor: row-resize;
69   - i.trigger-icon{
70   - .center-middle;
  42 +
  43 + .split-pane-page-wrapper {
  44 + height: 600px;
  45 + .pane {
  46 + width: 100%;
  47 + height: 100%;
  48 + &.left-pane {
  49 + background: sandybrown;
  50 + }
  51 + &.right-pane {
  52 + background: palevioletred;
  53 + }
  54 + &.top-pane {
  55 + background: sandybrown;
  56 + }
  57 + &.bottom-pane {
  58 + background: palevioletred;
  59 + }
  60 + }
  61 + .custom-trigger {
  62 + width: 20px;
  63 + height: 20px;
  64 + border-radius: 50%;
  65 + background: #fff;
  66 + position: absolute;
  67 + .center-middle;
  68 + box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
  69 + cursor: row-resize;
  70 + i.trigger-icon {
  71 + .center-middle;
  72 + }
  73 + }
71 74 }
72   - }
73   -}
74 75 </style>
... ...
src/components/split/split.vue
  Show/Hide comments   View file @cd397a6
1 1 <template>
2   - <div ref="outerWrapper" :class="wrapperClasses">
3   - <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
4   - <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
5   - <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
6   - <slot name="trigger">
7   - <trigger mode="vertical"/>
8   - </slot>
9   - </div>
10   - <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
  2 + <div ref="outerWrapper" :class="wrapperClasses">
  3 + <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
  4 + <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
  5 + <slot name="left"/>
  6 + </div>
  7 + <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
  8 + <slot name="trigger">
  9 + <trigger mode="vertical"/>
  10 + </slot>
  11 + </div>
  12 + <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
  13 + <slot name="right"/>
  14 + </div>
  15 + </div>
  16 + <div v-else :class="`${prefix}-vertical`">
  17 + <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']">
  18 + <slot name="top"/>
  19 + </div>
  20 + <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
  21 + <slot name="trigger">
  22 + <trigger mode="horizontal"/>
  23 + </slot>
  24 + </div>
  25 + <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
  26 + <slot name="bottom"/>
  27 + </div>
  28 + </div>
11 29 </div>
12   - <div v-else :class="`${prefix}-vertical`">
13   - <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
14   - <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
15   - <slot name="trigger">
16   - <trigger mode="horizontal"/>
17   - </slot>
18   - </div>
19   - <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
20   - </div>
21   - </div>
22 30 </template>
23 31  
24 32 <script>
25   -import { oneOf } from '../../utils/assist';
26   -import { on, off } from '../../utils/dom';
27   -import Trigger from './trigger.vue';
28   -export default {
29   - name: 'Split',
30   - components: {
31   - Trigger
32   - },
33   - props: {
34   - value: {
35   - type: [Number, String],
36   - default: 0.5
37   - },
38   - mode: {
39   - validator (value) {
40   - return oneOf(value, ['horizontal', 'vertical']);
  33 + import {oneOf} from '../../utils/assist';
  34 + import {on, off} from '../../utils/dom';
  35 + import Trigger from './trigger.vue';
  36 + export default {
  37 + name: 'Split',
  38 + components: {
  39 + Trigger
  40 + },
  41 + props: {
  42 + value: {
  43 + type: [Number, String],
  44 + default: 0.5
41 45 },
42   - default: 'horizontal'
43   - },
44   - min: {
45   - type: [Number, String],
46   - default: '40px'
47   - },
48   - max: {
49   - type: [Number, String],
50   - default: '40px'
51   - }
52   - },
53   - /**
54   - * Events
55   - * @on-move-start
56   - * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
57   - * @on-move-end
58   - */
59   - data () {
60   - return {
61   - prefix: 'ivu-split',
62   - offset: 0,
63   - oldOffset: 0,
64   - isMoving: false
65   - };
66   - },
67   - computed: {
68   - wrapperClasses () {
69   - return [
70   - `${this.prefix}-wrapper`,
71   - this.isMoving ? 'no-select' : ''
72   - ];
73   - },
74   - isHorizontal () {
75   - return this.mode === 'horizontal';
76   - },
77   - anotherOffset () {
78   - return 100 - this.offset;
79   - },
80   - valueIsPx () {
81   - return typeof this.value === 'string';
82   - },
83   - offsetSize () {
84   - return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
85   - },
86   - computedMin () {
87   - return this.getComputedThresholdValue('min');
88   - },
89   - computedMax () {
90   - return this.getComputedThresholdValue('max');
91   - }
92   - },
93   - methods: {
94   - px2percent (numerator, denominator) {
95   - return parseFloat(numerator) / parseFloat(denominator);
96   - },
97   - getComputedThresholdValue (type) {
98   - let size = this.$refs.outerWrapper[this.offsetSize];
99   - if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
100   - else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
101   - },
102   - getMin (value1, value2) {
103   - if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
104   - else return Math.min(value1, value2);
105   - },
106   - getMax (value1, value2) {
107   - if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
108   - else return Math.max(value1, value2);
109   - },
110   - getAnotherOffset (value) {
111   - let res = 0;
112   - if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
113   - else res = 1 - value;
114   - return res;
115   - },
116   - handleMove (e) {
117   - let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
118   - let offset = pageOffset - this.initOffset;
119   - let outerWidth = this.$refs.outerWrapper[this.offsetSize];
120   - let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
121   - let anotherValue = this.getAnotherOffset(value);
122   - if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
123   - if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
124   - e.atMin = this.value === this.computedMin;
125   - e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
126   - this.$emit('input', value);
127   - this.$emit('on-moving', e);
128   - },
129   - handleUp () {
130   - this.isMoving = false;
131   - off(document, 'mousemove', this.handleMove);
132   - off(document, 'mouseup', this.handleUp);
133   - this.$emit('on-move-end');
  46 + mode: {
  47 + validator (value) {
  48 + return oneOf(value, ['horizontal', 'vertical']);
  49 + },
  50 + default: 'horizontal'
  51 + },
  52 + min: {
  53 + type: [Number, String],
  54 + default: '40px'
  55 + },
  56 + max: {
  57 + type: [Number, String],
  58 + default: '40px'
  59 + }
  60 + },
  61 + /**
  62 + * Events
  63 + * @on-move-start
  64 + * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
  65 + * @on-move-end
  66 + */
  67 + data () {
  68 + return {
  69 + prefix: 'ivu-split',
  70 + offset: 0,
  71 + oldOffset: 0,
  72 + isMoving: false
  73 + };
  74 + },
  75 + computed: {
  76 + wrapperClasses () {
  77 + return [
  78 + `${this.prefix}-wrapper`,
  79 + this.isMoving ? 'no-select' : ''
  80 + ];
  81 + },
  82 + isHorizontal () {
  83 + return this.mode === 'horizontal';
  84 + },
  85 + anotherOffset () {
  86 + return 100 - this.offset;
  87 + },
  88 + valueIsPx () {
  89 + return typeof this.value === 'string';
  90 + },
  91 + offsetSize () {
  92 + return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
  93 + },
  94 + computedMin () {
  95 + return this.getComputedThresholdValue('min');
  96 + },
  97 + computedMax () {
  98 + return this.getComputedThresholdValue('max');
  99 + }
134 100 },
135   - handleMousedown (e) {
136   - this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
137   - this.oldOffset = this.value;
138   - this.isMoving = true;
139   - on(document, 'mousemove', this.handleMove);
140   - on(document, 'mouseup', this.handleUp);
141   - this.$emit('on-move-start');
142   - }
143   - },
144   - watch: {
145   - value () {
146   - this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
  101 + methods: {
  102 + px2percent (numerator, denominator) {
  103 + return parseFloat(numerator) / parseFloat(denominator);
  104 + },
  105 + getComputedThresholdValue (type) {
  106 + let size = this.$refs.outerWrapper[this.offsetSize];
  107 + if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
  108 + else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
  109 + },
  110 + getMin (value1, value2) {
  111 + if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
  112 + else return Math.min(value1, value2);
  113 + },
  114 + getMax (value1, value2) {
  115 + if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
  116 + else return Math.max(value1, value2);
  117 + },
  118 + getAnotherOffset (value) {
  119 + let res = 0;
  120 + if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
  121 + else res = 1 - value;
  122 + return res;
  123 + },
  124 + handleMove (e) {
  125 + let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
  126 + let offset = pageOffset - this.initOffset;
  127 + let outerWidth = this.$refs.outerWrapper[this.offsetSize];
  128 + let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
  129 + let anotherValue = this.getAnotherOffset(value);
  130 + if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
  131 + if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
  132 + e.atMin = this.value === this.computedMin;
  133 + e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
  134 + this.$emit('input', value);
  135 + this.$emit('on-moving', e);
  136 + },
  137 + handleUp () {
  138 + this.isMoving = false;
  139 + off(document, 'mousemove', this.handleMove);
  140 + off(document, 'mouseup', this.handleUp);
  141 + this.$emit('on-move-end');
  142 + },
  143 + handleMousedown (e) {
  144 + this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
  145 + this.oldOffset = this.value;
  146 + this.isMoving = true;
  147 + on(document, 'mousemove', this.handleMove);
  148 + on(document, 'mouseup', this.handleUp);
  149 + this.$emit('on-move-start');
  150 + }
  151 + },
  152 + watch: {
  153 + value () {
  154 + this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
  155 + }
  156 + },
  157 + mounted () {
  158 + this.$nextTick(() => {
  159 + this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
  160 + });
147 161 }
148   - },
149   - mounted () {
150   - this.$nextTick(() => {
151   - this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
152   - });
153   - }
154   -};
  162 + };
155 163 </script>
... ...
src/components/split/trigger.vue
  Show/Hide comments   View file @cd397a6
1 1 <template>
2   - <div :class="classes">
3   - <div :class="barConClasses">
4   - <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
  2 + <div :class="classes">
  3 + <div :class="barConClasses">
  4 + <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
  5 + </div>
5 6 </div>
6   - </div>
7 7 </template>
8 8  
9 9 <script>
10   -export default {
11   - name: 'Trigger',
12   - props: {
13   - mode: String
14   - },
15   - data () {
16   - return {
17   - prefix: 'ivu-split-trigger',
18   - initOffset: 0
19   - };
20   - },
21   - computed: {
22   - isVertical () {
23   - return this.mode === 'vertical';
  10 + export default {
  11 + name: 'Trigger',
  12 + props: {
  13 + mode: String
24 14 },
25   - classes () {
26   - return [
27   - this.prefix,
28   - this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
29   - ];
  15 + data () {
  16 + return {
  17 + prefix: 'ivu-split-trigger',
  18 + initOffset: 0
  19 + };
30 20 },
31   - barConClasses () {
32   - return [
33   - `${this.prefix}-bar-con`,
34   - this.isVertical ? 'vertical' : 'horizontal'
35   - ];
  21 + computed: {
  22 + isVertical () {
  23 + return this.mode === 'vertical';
  24 + },
  25 + classes () {
  26 + return [
  27 + this.prefix,
  28 + this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
  29 + ];
  30 + },
  31 + barConClasses () {
  32 + return [
  33 + `${this.prefix}-bar-con`,
  34 + this.isVertical ? 'vertical' : 'horizontal'
  35 + ];
  36 + }
36 37 }
37   - }
38   -};
  38 + };
39 39 </script>
... ...