记一次vue-splitpane使用
参考链接splitpane – 分割面板组件 介绍,是一个可以拖动菜单宽度,可以生成想要的菜单宽度和内容宽度的一种布局方式。事件绑定v-on:resize="resize"methods:{// 用于设置当向左或右拖拽时允许的最小宽度resize(data) {this.$nextTick(()=>{var newWidth = ...
·
参考链接
splitpane – 分割面板组件 介绍,是一个可以拖动菜单宽度,可以生成想要
的菜单宽度和内容宽度的一种布局方式。
事件绑定
v-on:resize="resize"
methods:{
// 用于设置当向左或右拖拽时允许的最小宽度
resize(data) {
this.$nextTick(()=>{
var newWidth = JSON.parse(JSON.stringify(this.$refs.stepBoxStyle.clientWidth));
if (newWidth < this.stepBoxWidth) {
this.minPercent = 40;
} else if (newWidth > this.stepBoxWidth) {
this.minPercent = 15;
}
this.stepBoxWidth = JSON.parse(JSON.stringify(newWidth));
})
}
}
属性选项设置
属性 Property | 描述 Description | 类型 type | 默认值 default |
---|---|---|---|
分割 split | 分割的类型 the split type | 水平还是垂直 String [horizontal,vertical] | 必须选择一种类型 must choose one type |
最小比例 min-percent | 面板最大最小百分比 paneL max-min-percent | 数值 Number | 10 |
最大比例 max-percent | 面板最大百分比 paneL max-percent | 数值 Number | 10 |
全部代码
<template>
<div class="box">
<el-container>
<el-header>抬头信息布局</el-header>
<el-main>
<split-pane v-on:resize="resize" :min-percent='minPercent' :default-percent="foldStyle=='icon-uniE14A'?85:100" split="vertical">
<template slot="paneL">
<div class="stepBoxStyle" ref="stepBoxStyle">
<el-steps :active="stepActive" :align-center="true">
<el-step title="抬头" @click.native="stepNext(0)"></el-step>
<el-step title="往来核销" @click.native="stepNext(1)"></el-step>
<el-step title="生成凭证" @click.native="stepNext(2)"></el-step>
</el-steps>
</div>
<div class="content">
内容
</div>
</template>
<template slot="paneR">
右侧步骤条
</template>
</split-pane>
<i id="foldBtn" :class="foldStyle" @click="foldToggle"></i>
</el-main>
</el-container>
</div>
</template>
<script>
import SplitPane from 'vue-splitpane'
export default {
components: {
SplitPane
},
data(){
return {
foldStyle:'icon-uniE14A',// 默认为收缩按钮,icon-uniE14E为展开按钮
stepActive:0,
minPercent:15, // 往右拖动最小为15,往左最小为
stepBoxWidth: null
}
},
mounted(){
// 记录左侧宽度
this.stepBoxWidth = this.$refs.stepBoxStyle.clientWidth;
},
methods:{
resize(data) {
this.$nextTick(()=>{
var newWidth = JSON.parse(JSON.stringify(this.$refs.stepBoxStyle.clientWidth));
if (newWidth < this.stepBoxWidth) {
this.minPercent = 40;
} else if (newWidth > this.stepBoxWidth) {
this.minPercent = 15;
}
this.stepBoxWidth = JSON.parse(JSON.stringify(newWidth));
})
},
foldToggle(){
this.foldStyle=this.foldStyle=='icon-uniE14A'?'icon-uniE14E':'icon-uniE14A';
},
stepNext(index){
this.stepActive = index;
}
}
}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.el-header {
background-color: #b3c0d1;
color: #333;
text-align: center;
height: 98px !important;
line-height: 98px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
height: calc(100vh - 98px);
padding: 0;
position: relative;
}
.el-main #foldBtn{
color: #14A6FE;
position: absolute;
right: 10px;
top: 20px;
cursor: pointer;
font-size: 20px;
}
// 进度条样式修改
.stepBoxStyle {
height: 69px;
border-bottom: 1px solid #ccc;
padding-top: 10px;
box-sizing: border-box;
/deep/ .is-process{
color: white;
border-color: #2395ED;
}
/deep/ .is-process .is-text{
background: #2395ED;
}
/deep/ .el-step__main .is-process {
color: #303133;
}
/deep/ .is-finish{
color: #2395ED;
}
/deep/ .el-step__main .is-finish {
color: #303133;
font-weight: bold;
}
/deep/ .is-wait{
color: #2395ED;
border-color: #2395ED;
}
/deep/ .el-step__main .is-wait {
color: #303133;
font-weight: bold;
}
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)