s-resize-panels.vue
v0.1.1
Published
<!-- 该 README.md 根据 api.yaml 和 docs/*.md 自动生成,为了方便在 GitHub 和 NPM 上查阅。如需修改,请查看源文件 -->
Downloads
12
Readme
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
右面板填充的内容