tnbapp/src/components/layout/NavBar.vue

<template>
  <el-row class="el-menu-demo">
    <el-col :md="2">
      <ul role="menubar" class="el-menu--horizontal el-menu">
        <li role="menuitem" class="el-menu-item">
          <a href="/" style="color: #007bff;text-decoration-line: none">
            <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
            bili
          </a>
        </li>
      </ul>
    </el-col>
    <el-col :md="8">
      <el-menu
        mode="horizontal"
      >
        <el-menu-item index="1">
          <a href="/video" style="text-decoration-line: none">
            <span style="color: #007bff">视频</span>
          </a>
        </el-menu-item>
        <el-menu-item index="2">
          <a href="/shortvideo" style="text-decoration-line: none">
            <span style="color: #007bff">短视频</span>
          </a>
        </el-menu-item>
        <el-menu-item index="3">
          <a href="/image" style="text-decoration-line: none">
            <span style="color: #007bff">相册</span>
          </a>
        </el-menu-item>
        <el-menu-item index="4">
          <a href="/article" style="text-decoration-line: none">
            <span style="color: #007bff">文章</span>
          </a>
        </el-menu-item>
        <el-menu-item index="5">
          <a href="/discover" style="text-decoration-line: none">
            <span style="color: #007bff">发现</span>
          </a>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :md="8">
      <ul class="el-menu--horizontal el-menu">
        <li class="el-menu-item">
          <el-autocomplete
            v-model="keyword"
            :fetch-suggestions="querySearchAsync"
            :placeholder="placeholder"
            clearable
            suffix-icon="el-icon-search"
            size="medium"
            :debounce="1000"
            @keyup.enter.native="onSearch"
            @select="onSearch"
          />
        </li>
      </ul>
    </el-col>
    <el-col :md="6">
      <ul class="el-menu--horizontal el-menu">
        <li class="el-menu-item">
          <el-dropdown v-if="user">
            <img
              :src="user.avatarUrl"
              class="el-avatar--circle el-avatar--medium"
              alt=""
            >
            <el-dropdown-menu v-if="user" slot="dropdown" class="iconsize">
              <el-dropdown-item
                icon="el-icon-user-solid"
                class="size"
                @click.native="goToProfile"
              >我的帐号</el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-s-home"
                class="size"
                @click.native="goToHome"
              >我的主页</el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-s-data"
                class="size"
                @click.native="goToPost"
              >我的稿件
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-star-on"
                class="size"
                @click.native="goToFavlist"
              >收藏夹
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-video-camera-solid"
                class="size"
                @click.native="goToHistory"
              >历史记录
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-error"
                class="size"
                @click.native="goToLogout"
              >退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span
            v-else
            style="color: #007bff"
            @click="login"
          >登录</span>
        </li>
        <li class="el-menu-item" @click="goToTimeline">
          <el-badge v-if="statusCount > 0" class="item" :value="statusCount" :max="99">
            <span class="el-icon-view" style="color: #007bff">状态</span>
          </el-badge>
          <span v-else class="el-icon-view" style="color: #007bff">状态</span>
        </li>
        <li class="el-menu-item" @click="goToMessage">
          <el-badge v-if="msgCount > 0" class="item" :value="msgCount" :max="99">
            <span class="el-icon-bell" style="color: #007bff">消息</span>
          </el-badge>
          <span v-else class="el-icon-bell" style="color: #007bff">消息</span>
        </li>
        <li class="el-menu-item">
          <el-button size="mini" type="upload" icon="el-icon-upload" @click="goToPublish">投稿</el-button>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
import Vue from 'vue'
import { userMixin } from 'assets/js/mixin'
import { getMyInfo } from '@/api/user'
import { keywordSuggest } from '@/api/search'

export default {
  name: 'NavBar1',
  mixins: [userMixin],
  data() {
    return {
      user: null,
      drawer: false,
      activeIndex: '1',
      activeIndex2: '1',
      restaurants: [],
      placeholder: '想要搜点神马呢',
      keyword: '',
      timer: null,
      statusCount: 0,
      msgCount: 10,
      avatarUrl: '//pica.zhimg.com/v2-465c3f851b3e56844bf2be9ad5b54f95.jpg'
    }
  },
  created() {
    const userdata = Vue.$cookies.get('USERDATA')
    if (userdata !== null) {
      getMyInfo().then(res => {
        if (res.code === 0) {
          this.user = res.data
        }
      })
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    // 重点：当框中的改变时触发该方法，elementui自动设置了防抖，参见debounce属性
    // queryString 为输入框中的值。cb为返回显示列表的回调函数
    querySearchAsync(queryString, cb) {
      if (queryString === '') {
        return
      }

      setTimeout(() => {
        keywordSuggest(queryString).then(res => {
          if (res.code === 0) {
            this.restaurants = res.data.map((item) => {
              return {
                value: item.keyword,
                rank: 1
              }
            })

            // 如果 cb 返回一个空数组, 那么模糊搜索输入建议的下拉选项会因为 length 为 0 而消失
            // cb([])
            cb(this.restaurants)
            // eslint-disable-next-line no-empty
          } else {
          }
        })
      }, 500)
    },
    // select 事件或 enter 键事件
    onSearch() {
      console.log('回车事件')
      // 正则去空格
      if (this.keyword.replace(/\s*/g, '')) {
        this.toSearchPage()
      } else {
        this.$message({
          showClose: true,
          message: '不能为空！',
          type: 'warning'
        })
      }
    },
    // 跳转搜索页面，传递搜索框的参数
    toSearchPage() {
      const currentPath = this.$route.path
      if (currentPath === '/search') {
        this.$router.push({
          path: '/search',
          query: {
            keyword: this.keyword,
            pageNumber: 1
          }
        })
        this.$router.go(0)
      } else {
        const routeUrl = this.$router.resolve({
          path: '/search',
          query: {
            keyword: this.keyword,
            pageNumber: 1
          }
        })
        window.open(routeUrl.href, '_blank')
      }
    },
    login() {
      this.fetchPubkey()
      this.dialogVisible2 = false
      this.dialogVisible = true
    },
    register() {
      this.fetchPubkey()
      this.dialogVisible2 = false
      this.dialogVisible = true
    },
    goToProfile() {
      const path = '/my'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToTimeline() {
      const path = '/timeline'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToHome() {
      const path = '/user/' + this.user.userId
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToPost() {
      if (this.$route.path === '/my/post/list/video') {
        this.$router.go(0)
        return
      }
      this.$router.push('/my/post/list/video')
    },
    goToFavlist() {
      if (this.$route.path === '/my/favlist/video') {
        this.$router.go(0)
        return
      }
      this.$router.push('/my/favlist/video')
    },
    goToHistory() {
      if (this.$route.path === '/my/visit') {
        this.$router.go(0)
        return
      }
      this.$router.push('/my/visit')
    },
    goToMessage() {
      if (this.$route.path === '/my/message/receive') {
        this.$router.go(0)
        return
      }
      this.$router.push('/my/message/receive')
    },
    goToPublish() {
      if (this.$route.path === '/my/post/publish/video') {
        this.$router.go(0)
        return
      }
      this.$router.push('/my/post/publish/video')
    }
  }
}
</script>

<style scoped>
@media screen and (max-width: 768px) {
}

.logo {
  width: 30px;
  position: relative;
}

.size {
  font-size: 16px;
}

.item {
  margin-top: 10px;
  margin-right: 10px;
}
</style>