s-resize-panels.vue

SResizePanels 调整宽度双面板

可以左右拖动分割线，调整左右面板的宽度

示例

基本用法

<template>
    <div :class="$style.container">
        <s-resize-panels :width="800">
            <div slot="left" :class="$style.panel">Left Panel</div>
            <div slot="right" :class="$style.panel">Right Panel</div>
        </s-resize-panels>
    </div>
</template>
 
<script>
export default {
 
}
</script>
 
<style module>
.container{
    overflow: auto;
}
.panel{
    border: 1px dashed #9da8b4;
    height:450px;
    text-align: center;
}
</style>

<template>
    <div :class="$style.container">
        <s-resize-panels :width="800">
            <template slot="left">
                <p>原配置</p>
                <x-ace-editor v-model="yamlContent.original" lang="yaml" theme="textmate" disabled
                    :options="{ showPrintMargin: false }"
                ></x-ace-editor>
            </template>
            <template slot="right">
                <p>目标配置</p>
                <x-ace-editor v-model="yamlContent.target" lang="yaml" theme="textmate" disabled
                    :options="{ showPrintMargin: false }"
                ></x-ace-editor>
            </template>
        </s-resize-panels>
    </div>
</template>
 
<script>
import XAceEditor from '@cloud-ui/x-ace-editor.vue';
import 'brace/mode/yaml';
 
export default {
    components: {
        XAceEditor,
    },
    props: {
        yamlContent: { type: Object, default: () => ({
            original: 'apiVersion: apps/v1\nkind: Deployment\nmetadata:\n  creationTimestamp: null\n  labels:\n    system/project-cicd-platform: "true"\n    system/tenant: cicd-tenant\n  namespace: dfdf\nspec:\n  replicas: 1\n  selector:\n    matchLabels:\n      cicd.skiff.netease.com/app: P_K8S_DEPLOYMENT_NAME_P\n  strategy:\n    rollingUpdate:\n      maxSurge: 25%\n      maxUnavailable: 25%\n    type: RollingUpdate\n  template:\n    metadata:\n      creationTimestamp: null\n      labels:\n        cicd.skiff.netease.com/app: P_K8S_DEPLOYMENT_NAME_P\n        system/app: P_K8S_DEPLOYMENT_NAME_P\n        system/project-cicd-platform: "true"\n        system/tenant: cicd-tenant\n    spec:\n      affinity: {}\n      containers:\n      - image: harbor-inner-dev.env7.qingzhou.com/cicd-tenant-cicd-platform/cicd-test-alpine:3.9\n        imagePullPolicy: Always\n        name: cicd-test-alpine\n        resources:\n          limits:\n            cpu: 100m\n            memory: 128Mi\n          requests:\n            cpu: 100m\n            memory: 128Mi\n      restartPolicy: Always\nstatus: {}\n',
            target: 'apiVersion: apps/v1\nkind: Deployment\nmetadata:\n  creationTimestamp: null\n  labels:\n    system/project-cicd-platform: "true"\n    system/tenant: cicd-tenant\n  namespace: dfdf\nspec:\n  replicas: 0\n  selector:\n    matchLabels:\n      cicd.skiff.netease.com/app: P_K8S_DEPLOYMENT_NAME_P\n  strategy:\n    rollingUpdate:\n      maxSurge: 25%\n      maxUnavailable: 25%\n    type: RollingUpdate\n  template:\n    metadata:\n      creationTimestamp: null\n      labels:\n        cicd.skiff.netease.com/app: P_K8S_DEPLOYMENT_NAME_P\n        system/app: P_K8S_DEPLOYMENT_NAME_P\n        system/project-cicd-platform: "true"\n        system/tenant: cicd-tenant\n    spec:\n      affinity: {}\n      containers:\n      - image: harbor-inner-dev.env7.qingzhou.com/cicd-tenant-cicd-platform/cicd-test-alpine:3.9\n        imagePullPolicy: Always\n        name: cicd-test-alpine\n        resources:\n          limits:\n            cpu: 100m\n            memory: 128Mi\n          requests:\n            cpu: 100m\n            memory: 128Mi\n      restartPolicy: Always\nstatus: {}\n'
        }) },
    },
}
</script>
 
<style module>
.container{
    overflow: auto;
}
.panel{
    border: 1px solid #9da8b4;
    height:450px;
}
</style>

API

Props/Attrs

Prop/Attr	Type	Options	Default	Description
width	number		900	组件宽度
height	number		452	组件高度
gap	number		40	左右面板之间的间隔宽度
minWidth	number		100	单个面板的最小宽度

Slots

left

左面板填充的内容

right

右面板填充的内容