左右联动布局效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了左右联动布局效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

左右联动布局效果,vue.js,elementui 文章来源地址https://www.toymoban.com/news/detail-831632.html

<template>
  <el-dialog :modelValue="modelValue" :before-close="close" fullscreen :close-on-click-modal="false">
    <div class="farmer_detail">
      <div class="info_content">
        <div class="info_left">
          <!-- @click.native="stepClick(item, key)" -->
          <el-tabs tab-position="left" class="demo_tab_farmer_pop" v-model="activeStep" @tab-click="stepClick">
            <el-tab-pane :label="item.title" :name="key" v-for="(item, key) in stepList" :key="key">
              <template #label>
                <span class="custom_label">
                  <span>{{ item.title }}</span>
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="info_right" ref="rightRef">
          <el-scrollbar :height="calcScrollHeight + 'px'" ref="scrollMenuRef" @scroll="onScroll" @wheel="handleWheel">
            <!-- <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p> -->
            <div class="scroll_container" ref="right" id="scrollContent">
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="130px">
                <div class="scroll_content">
                  <div class="info_title" id="JCxx">基础信息</div>
                  <el-row :gutter="20">
                    <el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl">
                      <el-form-item prop='realName' label='姓名'>
                        <el-input v-model="ruleForm.realName" placeholder="请输入姓名" :disabled='isEdit' clearable
                          style='width:100%;'></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl">
                      <el-form-item prop='paperNumber' label='身份证号'>
                        <el-input v-model="ruleForm.paperNumber" placeholder="请输入身份证号" :disabled='isEdit' clearable
                          style='width:100%;'></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl">
                      <el-form-item prop='gender' label='性别'>
                        <selectOption v-model="ruleForm.gender" placeholder="请选择性别" :disabled="isEdit"
                          :optionList="genderList" clearable>
                        </selectOption>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div class="scroll_content">
                  <div class="info_title" id="ZZxx">组织信息</div>
                  <el-row>
                    <el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl">
                      <el-form-item label="担任职务" prop="holdType">
                        <selectOption v-model="ruleForm.holdType" placeholder="请选择担任职务" :disabled="isEdit"
                          :multiple="false" :collapseTags="true" typeCode="new_has_job" clearable>
                        </selectOption>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div class="scroll_content">
                  <div class="info_title" id="JYxx">教育与社会信息</div>
                  <el-row>
                    <el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl">
                      <el-form-item prop='school' label='毕业院校'>
                        <el-input v-model="ruleForm.school" placeholder="" :disabled='isEdit' clearable
                          style='width:100%;'></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              <div class="scroll_content">
                <div class="info_title" id="ZCxx">资产信息</div>
                <div>
                  <CusTable ref="zcTableRef" :column="zcColumnTD" :tableData="zcTableDataTD" title="土地信息">
                    <span slot="title">土地信息（7块，3.68亩）</span>
                  </CusTable>
                </div>
              </div>

              <div class="scroll_content">
                <div class="info_title" id="BTxx">补贴信息</div>
                <CusTable ref="btTableRef" :column="btColumn" :tableData="btTableData" title="补贴信息（7项）">
                  <span slot="title">补贴信息（7项）</span>
                </CusTable>
                <!-- 补贴信息 -->
              </div>
          <div class="info_title" id="XYxx">信用评价</div> -->
            </div>
          </el-scrollbar>
        </div>
      </div>
      <!-- </el-card> -->
    </div>
    <template #footer>
      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="primary" @click="submit(ruleFormRef)" v-if="!btnShow">
        确 认
      </el-button>
    </template>
  </el-dialog>
</template>




const stepList = ref([
  { title: '基础信息', id: 'JCxx' },
....
  { title: '资产信息', id: 'ZCxx' },
  { title: '补贴信息', id: 'BTxx' },
  { title: '信用评价', id: 'XYxx' }])

const scrollMenuRef = ref(null)
//计算右侧可滚动区域高度
const calcScrollHeight = computed(() => clientHeight.value - 390)
const clientHeight: any = ref(document.documentElement.clientHeight || document.body.clientHeight)
watch(clientHeight, (newVal, oldVal) => {
  return newVal
})
let right = ref(null); // 右边 列表盒子
onMounted(() => {
  window.onresize = () => {
    clientHeight.value = `${document.documentElement.clientHeight}`;
  }
})



const stepTag = ref(1) //标识是点击滚动还是滚轮滑动滚动
const rightRef = ref()

//点击滚动  //待完善功能是否到底部不可点击或者滚动
const stepClick = (item: any, index: number) => {
  let ind = Number(item.index)
  var id = "#" + stepList.value[ind].id
  stepTag.value = 1
  if (activeStep.value - ind == 0) return
  activeStep.value = ind
  //监听滚动条是否到底部
  const curDom: any = document.querySelector(id);
  const dom: any = document.getElementById('scrollContent');
  if (curDom) {
    document.querySelector(id).scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest",
    });
  }
}

//右侧内容滚动方法
const onScroll = (e:any) => {
  if (stepTag.value == 1) return
  let scrollItems: any = document.querySelectorAll(".scroll_content");
  // console.log(e, scrollItems,scrollItems[0].offsetTop,'ee')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离 e.target.scrollTop
    let judge = e.scrollTop >= scrollItems[i].offsetTop - 100 - scrollItems[0].offsetTop;
    if (judge) {
      activeStep.value = i;
      break;
    }
  }
}
// 是否是右侧滚动
const handleWheel = (e) => {
  stepTag.value = 0
}


<style lang="scss" scoped>
.farmer_detail {
  .img_box {
    height: 200px;
    text-align: center;

    .user_name {
      padding-top: 10px;
      font-size: 18px;
    }

    .block {
      .btn_back {
        float: right;
      }
    }
  }

  .info_content {
    display: flex;
    position: relative;
    // width: 100%;
    justify-content: flex-end;



    .info_left {
      width: 300px;

      .demo_tab_farmer_pop {
        >:deep(.el-tabs__header) {
          .el-tabs__item {
            // width:244px;
            padding-right: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            transition: background-color .3s ease-in-out;
          }

          .el-tabs__nav-wrap::after {
            background-color: #ECF3FF;
          }

          .el-tabs__nav-wrap,
          .el-tabs__nav-scroll {
            overflow: visible;
          }

          .el-tabs__item.is-active {
            background-color: #ECF3FF;

          }

          .el-tabs__item::after {
            content: "";
            position: absolute;
            right: -4px;
            bottom: 25px;
            width: 10px;
            height: 10px;
            box-sizing: border-box;
            border: 1px solid #CCCCCC;
            background: #FFFFFF;
            border-radius: 50%;
          }

          .el-tabs__active-bar.is-left {
            width: 10px;
            height: 10px !important;
            border-radius: 50%;
            background-color: #2F71F5;
            top: 25px;
            right: -4px;
          }

        }
      }
    }

    .info_right {
      flex: 1;

      // width: calc(100% - 200px);
      overflow-y: auto;

      .scroll_container {
        padding-right: 20px;
      }

      .info_title {
        display: flex;
        align-items: center;
        margin: 20px 0;
        font-size: 18px;
        font-weight: 700;
      }

      .info_title:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>

到了这里，关于左右联动布局效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！