element-ui реализует адаптивную панель навигации

Element

до начала

По плану фронтенд использует Vue.js+Element UI, но при проектировании навигационной панели выяснилось, что элемент не предоставляет традиционный компонент навигационной панели в верхней части страницы, и только один можно использовать в множество сценариев, требующих выбора вкладок.Меню навигации, я решил преобразовать его на его основе, потому что считаю необходимым добиться хорошего опыта на мобильном терминале, поэтому мне пришла в голову идея добавить к нему адаптивные функции.

Анализ спроса и демонтаж

Предположим, у нашей панели навигации есть логотип и четыреel-menu-item.

ДатьwindowПривяжите событие прослушивателя, когда ширина меньше a, все четыре ссылки размещаются справаel-submenuподменю:

Когда ширина больше, чем вправоel-submenuне показано, слеваel-menu-itemнормальный дисплей:

Итак, сначала создайте массив для хранения всех необходимых элементов:

navItems: [
  { name: "Home", indexPath: "/home", index: "1" },
  { name: "Subscribe", indexPath: "/subscribe", index: "2"},
  { name: "About", indexPath: "/about", index: "3" },
  { name: "More", indexPath: "/more", index: "4" }
]

ширина монитора

Очевидно, что ключом к реализации функции является отслеживание изменений окна в любое время и реагирование в соответствии с соответствующей шириной.data, Я используюscreenWidthпеременная для хранения размера окна и ширины при первом открытии страницы:

data() {
  return {
    screenWidth: document.body.clientWidth
    ......
  }
}

следующий вmountedПривяжите событие слушателя экрана к и назначьте последнюю доступную ширину экрана дляscreenWidth:

mounted() {
  window.onresize = () => {
    this.screenWidth = document.body.clientWidth
  }
}

(Чтобы узнать больше о свойствах высоты и ширины в документе и окне, см.эта статья. )

Чтобы предотвратить зависание страницы из-за частого срабатывания функции изменения размера, можно использовать таймер для управленияscreenWidthЧастота обновлений:

watch: {
  screenWidth(newValue) {
    // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    if (!this.timer) {
      // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
      this.screenWidth = newValue;
      this.timer = true;
      setTimeout(() => {
        //console.log(this.screenWidth);
        this.timer = false;
      }, 400);
    }
  }
}

показывать

Имея данные о ширине экрана в реальном времени, вы можете управлять элементом меню вычисляемым образом.

computed: {
  ...
  leftNavItems: function() {
    return this.screenWidth >= 600 ? this.navItems : {};
  },
  rightNavItems: function() {
    return this.screenWidth < 600 ? this.navItems : {};
  }
},

По простому суждению, когда ширина окна изменяется, содержимое меню может быть помещено в предустановленное обычное меню или правое выпадающее меню, отображаемое, когда ширина меньше 600, и прилагается html-часть кода:

<el-menu text-color="#2d2d2d" id="navid" class="nav" mode="horizontal" @select="handleSelect">
  <el-menu-item class="logo" index="0" route="/home">
    <img class="logoimg" src="../assets/img/logo.png" alt="logo" />
  </el-menu-item>
  <el-menu-item
    :key="key"
    v-for="(item,key) in leftNavItems"
    :index="item.index"
    :route="item.activeIndex"
  >{{item.name}}</el-menu-item>
  <el-submenu
    style="float:right;"
    class="right-item"
    v-if="Object.keys(rightNavItems).length === 0?false:true"
    index="10"
  >
    <template slot="title">
      <i class="el-icon-s-fold" style="font-size:28px;color:#2d2d2d;"></i>
    </template>
    <el-menu-item
      :key="key"
      v-for="(item,key) in rightNavItems"
      :index="item.index"
      :route="item.activeIndex"
    >{{item.name}}</el-menu-item>
  </el-submenu>
</el-menu>

Суммировать

В общем, даже если нищий вариант завершен, здесь предоставляется только один возможный способ мышления.Если вам нужно попрактиковаться, вы можете добавить больше правил и функций суждения. (В основном потому, что он переключился на Vuetify~)

Категории