ドラッグ可能な分割パネル (vue-splitpane)

vue-splitpaneコンポーネントを使用して垂直または水平のパネル分離を実現します

1. インストール

npm install vue-splitpane

2.インポート（vue-splitpaneを導入する必要があるモジュールファイルに導入）

import splitPane from 'vue-splitpane'
export default {
    componnets: { splitPane }
}

3. 使用する

<!-- 简单使用 -->
<split-pane @resize="resize" :min-percent="10" :default-percent="30" split="vertical">
    <template slot="paneL">left content</template>
    <template slot="paneR">right content</template>
</split-pane>

<!-- 嵌套使用 -->
<split-pane @resize="resize" :min-percent="10" :default-percent="30" split="vertical">
    <template slot="paneL">left content</template>
    <template slot="paneR">
        <split-pane @resize="resize" :min-percent="10" :default-percent="30" split="horizontal">
            <template slot="paneL">top content</template>
            <template slot="paneR">bottom content</template>
        </split-pane>
    </template>
</split-pane>

4、小道具と機能

split: String  拆分类型（垂直拆分：vertical; 水平查分：horizontal）
min-percent: Number  paneL 的最小占比
max-percent: Number  paneL 的最大占比
resize: Function 事件