other / mew-iview

Browse Code »

Commit cd397a6f46f0c835f994c07dafa65377913e42a5

Authored by 梁灏 2018-06-30 16:06:25 +0800

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

  <template>
--  <div class="split-pane-page-wrapper">
--    <Split v-model="offset" @on-moving="handleMoving">
--      <div slot="left" class="pane left-pane">
--        <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
--          <div slot="top" class="pane top-pane"></div>
--          <div slot="bottom" class="pane bottom-pane"></div>
--          <div slot="trigger" class="custom-trigger">
--            <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
--          </div>
++    <div class="split-pane-page-wrapper">
++        <Split v-model="offset" @on-moving="handleMoving">
++            <div slot="left" class="pane left-pane">
++                <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
++                    <div slot="top" class="pane top-pane"></div>
++                    <div slot="bottom" class="pane bottom-pane"></div>
++                    <div slot="trigger" class="custom-trigger">
++                        <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
++                    </div>
++                </Split>
++            </div>
++            <div slot="right" class="pane right-pane"></div>
          </Split>
--      </div>
--      <div slot="right" class="pane right-pane"></div>
--    </Split>
--  </div>
++    </div>
  </template>
  <script>
--export default {
--  name: 'split_pane_page',
--  data () {
--    return {
--      offset: 0.6,
--      offsetVertical: '250px'
++    export default {
++        name: 'split_pane_page',
++        data () {
++            return {
++                offset: 0.6,
++                offsetVertical: '250px'
++            }
++        },
++        methods: {
++            handleMoving (e) {
++                console.log(e.atMin, e.atMax)
++            }
++        }
      }
--  },
--  methods: {
--    handleMoving (e) {
--      console.log(e.atMin, e.atMax)
--    }
--  }
--}
  </script>
  <style lang="less">
--.center-middle{
--  position: absolute;
--  left: 50%;
--  top: 50%;
--  transform: translate(-50%, -50%);
--}
--.split-pane-page-wrapper{
--  height: 600px;
--  .pane{
--    width: 100%;
--    height: 100%;
--    &.left-pane{
--      background: sandybrown;
--    }
--    &.right-pane{
--      background: palevioletred;
--    }
--    &.top-pane{
--      background: sandybrown;
++    .center-middle {
++        position: absolute;
++        left: 50%;
++        top: 50%;
++        transform: translate(-50%, -50%);
      }
--    &.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;
++
++    .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;
++            }
++        }
      }
--  }
--}
  </style>

src/components/split/split.vue

Show/Hide comments View file @cd397a6

  <template>
--  <div ref="outerWrapper" :class="wrapperClasses">
--    <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
--      <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
--      <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
--        <slot name="trigger">
--          <trigger mode="vertical"/>
--        </slot>
--      </div>
--      <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
++    <div ref="outerWrapper" :class="wrapperClasses">
++        <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
++            <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
++                <slot name="left"/>
++            </div>
++            <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
++                <slot name="trigger">
++                    <trigger mode="vertical"/>
++                </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 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>
  <script>
--import { oneOf } from '../../utils/assist';
--import { on, off } from '../../utils/dom';
--import Trigger from './trigger.vue';
--export default {
--    name: 'Split',
--    components: {
--        Trigger
--    },
--    props: {
--        value: {
--            type: [Number, String],
--            default: 0.5
--        },
--        mode: {
--            validator (value) {
--                return oneOf(value, ['horizontal', 'vertical']);
++    import {oneOf} from '../../utils/assist';
++    import {on, off} from '../../utils/dom';
++    import Trigger from './trigger.vue';
++    export default {
++        name: 'Split',
++        components: {
++            Trigger
++        },
++        props: {
++            value: {
++                type: [Number, String],
++                default: 0.5
              },
--            default: 'horizontal'
--        },
--        min: {
--            type: [Number, String],
--            default: '40px'
--        },
--        max: {
--            type: [Number, String],
--            default: '40px'
--        }
--    },
--  /**
--   * 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');
++            mode: {
++                validator (value) {
++                    return oneOf(value, ['horizontal', 'vertical']);
++                },
++                default: 'horizontal'
++            },
++            min: {
++                type: [Number, String],
++                default: '40px'
++            },
++            max: {
++                type: [Number, String],
++                default: '40px'
++            }
++        },
++        /**
++         * 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');
++            }
          },
--        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;
++        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;
++            });
          }
--    },
--    mounted () {
--        this.$nextTick(() => {
--            this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
--        });
--    }
--};
++    };
  </script>

src/components/split/trigger.vue

Show/Hide comments View file @cd397a6

  <template>
--  <div :class="classes">
--    <div :class="barConClasses">
--      <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
++    <div :class="classes">
++        <div :class="barConClasses">
++            <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
++        </div>
      </div>
--  </div>
  </template>
  <script>
--export default {
--    name: 'Trigger',
--    props: {
--        mode: String
--    },
--    data () {
--        return {
--            prefix: 'ivu-split-trigger',
--            initOffset: 0
--        };
--    },
--    computed: {
--        isVertical () {
--            return this.mode === 'vertical';
++    export default {
++        name: 'Trigger',
++        props: {
++            mode: String
          },
--        classes () {
--            return [
--                this.prefix,
--                this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
--            ];
++        data () {
++            return {
++                prefix: 'ivu-split-trigger',
++                initOffset: 0
++            };
          },
--        barConClasses () {
--            return [
--                `${this.prefix}-bar-con`,
--                this.isVertical ? 'vertical' : 'horizontal'
--            ];
++        computed: {
++            isVertical () {
++                return this.mode === 'vertical';
++            },
++            classes () {
++                return [
++                    this.prefix,
++                    this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
++                ];
++            },
++            barConClasses () {
++                return [
++                    `${this.prefix}-bar-con`,
++                    this.isVertical ? 'vertical' : 'horizontal'
++                ];
++            }
          }
--    }
--};
++    };
  </script>