乘风原创程序

  • vue?底部footer导航组件问题
  • 2022/4/1 11:47:49
  • vue底部footer导航组件

    底部导航一定要用路径!!! 贼关键

    举个例子:

    你随便定义了一个变量, flag : 0 跳转首页, falg:1,跳转我的,

    底部导航的组件不可能全项目使用, 点击我的页面  这个时候flag 已经变成了1,

    从我的页面进入详情页,从详情页返回的时候,虽然路由没有变,但是flag 已经初始化成了0,

    我们的判断条件没办法自定义,每次从详情页返回的时候都会被初始化,

    !!! 判断一定要用路径

    $route.path

    <template>
      <div class="footer">
      <div class="costlist1" @click="choicestate('/dashboard/analysis')">
          <img class="costurl" v-if="$route.path==='/dashboard/analysis'" src="../../assets/img/bot-apply0.png" />
          <img class="costurl" v-else src="../../assets/img/bot-apply1.png" />
          <div
            class="costname"
            :style="{color:$route.path==='/dashboard/analysis'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}"
          >首页</div>
        </div>
        <div class="costlist1" @click="choicestate('/dashboard/toexamine')">
          <a-badge :count="this.$store.state.applynum">
            <img class="costurl" v-if="$route.path==='/dashboard/toexamine'" src="../../assets/img/1.png" />
            <img class="costurl" v-else src="../../assets/img/0.png" />
          </a-badge>
          <div
            class="costname"
            :style="{color:$route.path==='/dashboard/toexamine'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}"
          >审核</div>
        </div>
        <div class="costlist1" @click="choicestate('/dashboard/mine')">
          <img class="costurl" v-if="$route.path==='/dashboard/mine'" src="../../assets/img/mine11.png" />
          <img class="costurl" v-else src="../../assets/img/mine12.png" />
          <div
            class="costname"
            :style="{color:$route.path==='/dashboard/mine'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}"
          >我的</div>
      </div>
      </div>
    </template>
    <script>
    export default {
      name: 'layoutfooter',
      data() {
        return {
          applynum: 0,
          reimbnum: 0,
          wgtver: ''
        }
    }
      methods: {
        choicestate(path) {
          this.$router.push(path)
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 58px;
      background: #eff0f6;
      align-items: center;
      .costlist1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        height: 58px;
        align-items: center;
        img {
          width: 20px;
          height: 22px;
        }
        .costname {
          text-align: center;
        }
      }
    }
    .ant-carousel >>> .slick-slide {
      text-align: center;
      height: 160px !important;
      line-height: 160px;
      background: #364d79;
      overflow: hidden;
    }
    .ant-carousel >>> .slick-slide h3 {
      color: #fff;
    }
    </style>
    

    vue抽取的footer组件,可复用

    <template>
    ? <div class="app-foot">
    ? ? {{footermsgcopyright}}
    ? ? <span class="source">{{footermsgname}}</span>
    ? </div>
    </template>
    <script>
    export default {
    ? name: 'appfoot',
    ? data() {
    ? ? return {
    ? ? ? // 版权说明的文字
    ? ? ? footermsgcopyright: 'copyright ? 2020-2021 xxxx平台 - powered by ',
    ? ? ? // 单位
    ? ? ? footermsgname: 'xxxx实验室'
    ? ? }
    ? }
    }
    </script>
    <style scoped>
    .app-foot {
    ? /* footer 固定在页面底部 */
    ? min-height: 35px;
    ? background-color: #eeeeee;
    ? width: 100%;
    ? font-size: 14px;
    ? display: flex;
    ? align-items: center;
    ? justify-content: center;
    }
    .source{
    ? font-weight: 600;
    }
    </style>

    复用时直接调用组件

    主页面设定高度时,要把footer的高度空出来,其style可以如下:

    <style>
    .main-container{
    ? /* ?35 = footer ?*/
    ? min-height: calc(100vh - 35px);
    }
    </style>

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。