组件练习

常见的分割面板

直接上代码

<template>
    <div ref="outer"
         class="split_pane_wrapper split_pane_wrapper_direction split_pane_wrapper_border"
         :class="`split_pane_wrapper_direction_${getDirection} ${showBorder}`"
    >
        <!--左侧面板-->
        <div :class="`pane pane_left pane_${getDirection}`"
             :style="`${getDirection === 'row' ? 'width' : 'height'}: ${getLeftWidth * 100}%;`">
            <slot :name="getDirection === 'row' ? 'left' : 'top'"></slot>
        </div>
        <!--分割线-->
        <div :class="`pane_trigger_con pane_trigger_con_${getDirection}`"
             :style="`${getDirection === 'row' ? 'width' : 'height'}: ${triggerWidth}px;