利用vue 實現一個響應式導航

效果圖：

實現起來很簡單，下面主要代碼

  page_width() {
      let screenWidth = window.screen.width;
      console.log(screenWidth);
      if (screenWidth < 800) {
        this.fullWidth = false;
      } else {
        this.fullWidth = true;
      }
    }

 mounted() {
    
    window.onresize = () => {
      this.page_width();
    };
    this.page_width();
  }

然後在html判斷一下

<div v-if="fullWidth">pc導航</div>
 <transition name="toggle-cart">
 <div v-if="！fullWidth">移動導航導航</div>
 </template>

vue的動畫樣式

``
.toggle-cart-enter-active,
.toggle-cart-leave-active {
transition: all 0.4s ease-out;
}
.toggle-cart-enter,
.toggle-cart-leave-active {
transform: translateY(-100%);

完整代碼（還可以修改優化一下）：

<template>
  <div class="Topnav">
        <div class="Topnav_item" style="background:#1286fd">
            <div class="Topnav_img_box">
              <router-link to="/">
              <!-- logo -->
                <img src="@/assets/images/logo.png" alt />  
              </router-link>
            </div>
          <!-- pc端導航 -->
            <div class="flex_box mymakeinfo" v-show="fullWidth">
              <div>首頁</div>
              <div>店鋪裝修</div>
              <div>賬戶信息</div>
              <div>模板管理</div>
              <div>我的消息</div>
              <div> <a target="_blank" href="">我的站點</a></div>
              <div>新手入門</div>
              <div>安全退出</div>
            </div>
          <!-- 導航圖標 -->
            <div class="H5_item" v-show="!fullWidth">  
              <svg-icon icon-class="list" @click="make_menu" class-name="H5-menu" />
            </div>
        </div>
        <!-- 移動端導航 -->
        <transition name="toggle-cart">
          <div class="H5-menu-item" style='background:#1286fd' v-show="!fullWidth&&!dismenu">
              <div>首頁</div>
              <div>店鋪裝修</div>
              <div>賬戶信息</div>
              <div>模板管理</div>
              <div>我的消息</div>
              <div> <a target="_blank" href="">我的站點</a></div>
              <div>新手入門</div>
              <div>安全退出</div>
          </div>
        </transition>
        <div style="height:75px"></div>
  </div>
</template>

<script>
export default {
  name: "Topnav",
  data() {
    return {
      pagetype: "index",
      fullWidth: true,
      dismenu: true
    };
  },
  methods: {
    make_menu() { //點擊導航圖標
      this.dismenu = !this.dismenu;
    },
    page_width() {//獲取屏幕寬度
      let screenWidth = window.screen.width;
      console.log(screenWidth);
      if (screenWidth < 800) {
        this.fullWidth = false;
      } else {
        this.fullWidth = true;
      }
    }
   
  },
  computed: {

  },
  mounted() {
    window.onresize = () => {//監聽屏幕變化
      this.page_width();
    };
    this.page_width();
  },
  created(){
  
  }
};
</script>

<style lang="scss">
.Topnav_img_box {
  width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width: 100%;
    margin-left: 40px;
  }
}
.Topnav_nav_box {
  width: 560px;
  padding: 0 60px;

  justify-content: space-between;
}
.this_tnbd_div {
  background-color: rgba(0, 0, 0, 0.3);
}
.Topnav_nav_box div {
  padding: 0 21px;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  border-radius: 18px;
}

.Topnav .Topnav_item {
  position: fixed;
  display: flex;
  top: 0;
  z-index: 1999;
  left: 0;
  height: 74px;
  color: #fff;
  width: 100%;
  .H5_item {
    position: absolute;
    right: 14px;
    top: 24px;
    .H5-menu {
      font-size: 22px;
    }
  }
}
.H5-menu-item {
  color: #fff;
  width: 120px;
  position: fixed;
  z-index: 20190705;
  right: 0px;
  top: 75px;

  div {
    height: 42px;
    line-height: 42px;
    text-align: center;
  }
}
.mymakeinfo {
  position: absolute;
  right: 30px;
  top: 0;
  justify-content: space-around;
  font-size: 14px;
  height: 74px;
}
.mymakeinfo div {
  height: 36px;
  line-height: 36px;
  border-radius: 17px;
  padding: 0 20px;
}
.flex_box {
  display: flex;
  align-items: center;
}
.toggle-cart-enter-active,
.toggle-cart-leave-active {
  transition: all 0.4s ease-out;
}
.toggle-cart-enter,
.toggle-cart-leave-active {
  transform: translateY(-100%);
}
</style>