rust-course/ui/src/views/nav.vue

<template>
  <div>
        <transition name="fade" >
    <el-row v-show="toTop" :class="{'nav':'true','inTop':inTop,'toTop': toTop}" type="flex" align="middle">
      <el-col
        :xs="{span:4}"
        :sm="{span:7,offset:1}"
        :md="{span: 2,offset:1}"
        :lg="{ span: 2, offset: 2 }"
      >
        <router-link to="/"><img src="../assets/logo.png" class="hover-cursor" style="height:45px" /></router-link>
      </el-col>
      <el-col
        :xs="{span:10,offset:4}"
        :sm="{span:8}"
        :md="{span: 4}"
        :lg="{ span: 6,offset:2}"
        class
      >
        <el-input
          v-model="searchContent"
          prefix-icon="el-icon-search"
          :placeholder="$t('nav.navSearchHolder')"
          size="medium"
        ></el-input>
      </el-col>

      <el-col :span="10">
        <span class="float-right">
         <el-popover placement="bottom" trigger="hover" class="margin-right-20">
            <el-form label-width="100px">
              <el-form-item :label="$t('nav.setLang')">
                <el-radio-group v-model="currentLang" size="medium" @change="changeLang">
                  <el-radio-button label="en">English</el-radio-button>
                  <el-radio-button label="zh">Chinese</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="$t('nav.setTheme')">
                <el-select
                  v-model="currentTheme"
                  placeholder="theme.."
                  size="medium"
                  style="width:150px"
                   :popper-append-to-body="false"
                  @change="changeTheme"
                >
                  <el-option label="Light" value="light"></el-option>
                  <el-option label="Dark" value="dark"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item :label="$t('nav.readingLang')">
                <el-select
                  v-model="currentReadingLang"
                  placeholder="Reading Lang.."
                  size="medium"
                  style="width:200px"
                  multiple
                  :popper-append-to-body="false"
                  @change="changeReadingLang"
                >
                  <el-option  v-for="o in langOptions" :key="o.label" :label="o.label" :value="o.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <i class="el-icon-more-outline hover-cursor" slot="reference"></i>
          </el-popover>
          <router-link
            v-if="this.$store.state.user.token!=''"
            to="/x/article/new"
            class="margin-right-20"
            style="text-decoration:none;color:black;background:#66e2d5;padding:2px 12px;border:2px solid #0a0a0a;border-radius:3px;font-weight:bold;font-size:14px"
          >WRITE A POST</router-link>
          <el-button
            v-if="this.$store.state.user.token==''"
            type="primary"
            @click="signInModalVisible=true"
          >{{$t('nav.signIn')}}</el-button>
          <!-- <img v-else :src="this.$store.state.user.avatar" style="height:45px;display:inline-block;vertical-align:middle" /> -->
          <el-popover v-else placement="bottom" trigger="hover" >
            <div class="user-panel font-size-18">
                <div>@{{this.$store.state.user.name}}</div>
                <el-divider></el-divider>
                <div>Dashboard</div>
                <div class="margin-top-5">Write a Post</div>
                <div class="margin-top-5">Reading List</div>
                <div class="margin-top-5">Settings</div>
                <el-divider></el-divider>
                <div>About im.dev</div>
                <el-divider></el-divider>
                <div @click.stop="signOut">Sign Out</div>
            </div>
            <el-avatar
              :src="this.$store.state.user.avatar"
              slot="reference"
              class="middle-inline hover-cursor"
            ></el-avatar>
          </el-popover>
        </span>
      </el-col>
    </el-row>
    </transition>
    <router-view class="main-view" style="padding-top:60px"></router-view>

    <el-dialog class="white-bg-modal sign-in-modal" :visible.sync="signInModalVisible">
      <el-row class="sign-in-panel text-align-center padding-top-20 padding-bottom-20">
        <el-col :span="10" :offset="7">
          <h2 class="padding-top-20">{{$t('nav.signInTitle')}}</h2>
          <p class="padding-top-10">{{$t('nav.whySignIn')}}</p>
          <div class="padding-top-20">
            <el-button type="primary" icon="el-icon-github" @click="signIn">Sign in with Github</el-button>
          </div>
          <p class="padding-top-20">{{$t('nav.signInFooter')}}</p>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template> 
 
<script>
import request from "@/utils/request";
import langOptions from "@/utils/data"
export default {
  name: "Nav",
  data() {
    return {
      theme: this.$store.state.misc.theme,
      searchContent: "",

      signInModalVisible: false,

      currentLang: this.$store.state.misc.lang,
      currentReadingLang: this.$store.state.misc.readingLang,
      currentTheme: this.$store.state.misc.theme,

      // nav fixed to top
      scrollTop: 0,
      toTop : true,
      topCount : 0,
      inTop : true,
      langOptions: langOptions
    };
  },
  watch: {
    "$store.state.misc.needSignin"() {
        this.signInModalVisible = true    
    },
    "$store.state.misc.navFixed"() {
       if (this.$store.state.misc.navFixed) {
          window.removeEventListener('scroll', this.handleScroll);
          this.inTop = true
          this.toTop = true 
       } else {
          window.addEventListener('scroll', this.handleScroll);
       }
    },
  },
  computed: {},
  methods: {
    signOut() {
        this.$store.dispatch('SignOut')
    },
    signIn() {
      request({
        url: "/web/signIn",
        method: "POST",
        params: {}
      }).then(res => {
        this.$store.dispatch("SetUserInfo", res.data.data).then(() => {
          this.signInModalVisible = false;
        });
      });
    },
    changeReadingLang(val) {
        this.$store.dispatch("setReadingLang", val);
         window.location.reload();
    },
    changeLang(val) {
      this.$store.dispatch("setLang", val);
      this.$i18n.locale = val;
       window.location.reload();
    },
    changeTheme(val) {
      this.$store.dispatch("setTheme", val);
      window.location.reload();
    },
    loadTheme() {
      // 全局范围加载通用样式，每个vue page里无需重复引入
      if (this.theme == "light") {
        require("!style-loader!css-loader!less-loader!../theme/light/layout.less");
        require("!style-loader!css-loader!less-loader!../theme/light/style.less");
      } else {
        require("!style-loader!css-loader!less-loader!../theme/dark/layout.less");
        require("!style-loader!css-loader!less-loader!../theme/dark/style.less");
      }
    },
    handleScroll: function(e) {
        var y = window.scrollY 
        if (y <1) {
            if (!this.inTop){
                this.inTop = true
            }
            
        } else {
            if (this.inTop) {
                this.inTop = false
            }       
        }
        if (y- this.scrollTop < 0) {
            if (!this.toTop) {
                // 非连续向上滚动两次，展示导航栏\
                this.topCount = this.topCount + 1
                if (this.topCount >= 9) {
                    this.toTop = true
                    this.topCount = 0
                }

            }
        } else {
            if (window.scrollY < 30) {
                return 
            }
            this.toTop = false
            this.topCount = 0
        }
        this.scrollTop = y
        
    }
  },
  mounted() {
    this.loadTheme();
    // window.addEventListener('scroll', this.handleScroll);
  }
};
</script>

 
 <style lang="less">
@import "../theme/light/var.less";
.sign-in-modal {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0 0;
    padding-bottom: 40px;
  }
  .sign-in-panel {
    height: 100%;
    background: url(../assets/login.png) no-repeat;
    background-size: 100%;
  }
}
.user-panel {
    .el-divider {
        margin: 13px 0;
    }
    div {
        cursor:pointer;
        padding-left:10px
    }
}
.fade-enter-active, .fade-leave-active {
  transition: all .6s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
//   opacity: 0;
   transform: translateY(-50px);
}

 .fade-leave-active ,.fade-enter-active{
  transition: all .4s;
}
</style>

<style lang="less" scoped>
.nav {
   top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    position: fixed; 
   
    // box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;
    padding-top:8px;
    padding-bottom:4px;
}
 .nav.toTop {
    position: fixed;
   box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;
    background-color: white;
        z-index: 999;
    // transition:transform 300ms ease;
    //     transform: translateY(100px)
  }
.nav.inTop {
    box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;;
    z-index: 1;
}
</style>