乘风原创程序

  • vue-Split实现面板分割
  • 2022/3/22 16:33:26
  • 本文实例为大家分享了vue-split实现面板分割的具体代码,供大家参考,具体内容如下

    <template>
    ? <div class="split-pane-wrapper">
    ? ? <div class="pane pane-left" :style="{width:leftoffsetpercent}">
    ? ? ? <button @click="handleclick">点击减少左侧宽度</button>
    ? ? </div>
    ? ? <div class="pane-trigger-con" :style="{left:triggerleft,width:triggerwidthpx}"></div>
    ? ? <div class="pane pane-right" :style="{left:leftoffsetpercent}"></div>
    ? </div>
    </template>
    
    <script>
    export default {
    ? components: {},
    
    ? data() {
    ? ? return{
    ? ? ? // 在这定义一个值。这样用户可以直接指定占比的值
    ? ? ? // 在页面css 布局使用的值 使用计算属性拼接即可
    ? ? ? leftoffset:0.3,
    ? ? ? triggerwidth:8
    ? ? }
    ? },
    ? computed:{
    ? ? // 动态属性去拼接生成css 实际需要的代%形式的数据
    ? ? leftoffsetpercent(){
    ? ? ? return `${this.leftoffset * 100}%`
    ? ? },
    ? ? triggerwidthpx(){
    ? ? ? return `${this.triggerwidth}px`
    ? ? },
    ? ? triggerleft(){
    ? ? ? return `calc(${this.leftoffset * 100}% - ${this.triggerwidth/2}px)`
    ? ? },
    ? },
    
    ? methods: {
    ? ? handleclick(){
    ? ? ? this.leftoffset -= 0.02
    ? ? }
    ? },
    }
    </script>?
    
    <style lang="scss" scoped>
    ? .split-pane-wrapper{
    ? ? width: 100%;
    ? ? height: 100%;
    ? ? position: relative;
    ? ? .pane{
    ? ? ? position: absolute;
    ? ? ? height: 100%;
    ? ? ? top:0;
    ? ? ? &-left{
    ? ? ? ? /*width: 30%;*/
    ? ? ? ? background: brown;
    ? ? ? }
    ? ? ? &-right{
    ? ? ? ? right: 0;
    ? ? ? ? bottom: 0;
    ? ? ? ? /*left: 30%;*/
    ? ? ? ? background: chartreuse;
    ? ? ? }
    ? ? ? &-trigger-con{
    ? ? ? ? z-index: 100;
    ? ? ? ? height: 100%;
    ? ? ? ? background: red;
    ? ? ? ? position: absolute;
    ? ? ? ? top: 0;
    ? ? ? }
    ? ? }
    ? }
    </style>