一、实现逻辑功能

1、导航显示二级菜单

  • 鼠标进入显示
  • 鼠标移开隐藏
  • 多个菜单使用同一个函数
HTML
---------------
<div @mouseover="showSubmenu('show','Language')" 
     @mouseout="showSubmenu('hide','Language')" >
    <span>Language</span>
    <ul class="submenu" v-show="showLanguage">
        <li><a class="language" href="#">中文</a></li>
        <li><a class="language" href="#">English</a></li>
        <li><a class="language" href="#">Espanol</a></li>
    </ul>
</div>
  • 使用鼠标onmouseover及mouseout来监听事件,传入两个参数x,y
  • x表示show或hide,y表示触发状态的元素
JS
---------------
showSubmenu(status,item){
    if(item == 'Language'){
        status=='show'?this.showLanguage=true:this.showLanguage=false
    }
    if(item == 'Individual'){
        status=='show'?this.showIndividual=true:this.showIndividual=false
    }
    …………
}

2、搜索框

  • 函数节流，输入过程中显示相关的搜索清单
if(this.timer){ 
    clearTimeout(this.timer)
}
this.timer = setTimeout((
    //发送请求
    //对请求后的数据处理
)=>{},1000)
  • 输入不同的类型内容跳转不同页面，同时传id
输入过程中，结合函数节流从后端获取输入的内容的类型，根据类型判断跳转不同的页面
JS
---------------
gotoNewPage(list){
    if(list.type=="city"){
        //进入city页面  传参为list.cid
        this.$router.push({name:'ranking',params:{
            id:list.cid
            }
        })
    }else if(list.type=="scenic"){
        //进入维基百科页面
        let url = `${Url.wiki}${list.placeName}`
        window.open(url)
    }
    this.showList=false
},
  • 鼠标点击外部，input显示的清单消失
在APP.vue文件监听click事件，点击判断是否为input相关的元素/元素class
然后触发$emit事件，在Search组件mounted()使用$on监听

APP.vue JS
---------------
changeLists(e){
    let targetName=e.target.className
        if(!(targetName === "input" ||  targetName === "list")){
            this.$bus.$emit('changeList')         
        }
}


Serarch.vue JS
---------------
this.$bus.$on('changeList',()=>{
    this.showList=false
})
  • 搜索报错.catch处理页面逻辑
.catch((error)=>{
        console.log(error.response)
})
//注意，一定要.response才能取到报错的数据

3、焦点状态

  • 当鼠标点击/浮过某个元素，显示某种状态
声明一个变量 topIndex
传入index,并在函数内赋值给topIndex
判断其是否相等,添加class激活状态

<li :class="{'active':topIndex==index}" 
v-for="(item,index) in provinceNames" v-bind:key="index"
@mouseover="updateCityList(index,item)"
>
{{xxx}}
</li>

4、页面状态保存

  • 存的到localStorage、sessionStorage里
  • 页面加载是从里面获取渲染页面

5、不准确路由跳转404

  • 404页面当然是自己准备了
  • 在APP.vue的created里判断路由的name是否存在
  if(this.$route.name===null){
    this.$router.push({name:'errorPage'})
  }
  • 当然也可以把这个函数写在Vue.protoype里

6、路由守卫

  • 引用场景，判断某个组件，某个页面用户是否登录来决定是否显示该页面或跳转到登录页面
  • 根据后端传来的登录状态储存到sessionStorage/localStorage
登录成功：true
登录失败：false
储存到sessionStorage:window.sessionStorage.setItem('isLogin',true)
  • 页面初始化或点击某个组件进行状态判断
Vue.prototype.$initPageLogin=function(){
  let isLogin=window.sessionStorage.getItem('isLogin');
  if(isLogin === false || isLogin === null){
      this.$router.push({name:'onepage'})
  }
}

7、打包-懒加载

  • 对引入的组件更改为按需加载,会使得打包体积大大降低
  • 原来是这样的：
import xxx from './yyy.vue'
  • 懒加载引入
const xxx = ()=>import ('./yyy.vue')

8、window.open突破拦截

  • 产生原因：非用户点击直接开启新窗口，在异步请求后打开新窗口被拦截
  • 解决方案

1、先打开空白新窗口，异步请求后重定向新窗口

var xxx=window.open('',_blank)
xxx.location.href=url

2、把异步请求变成同步请求

– 异步换成同步写法(本质还是异步，所以不行)

async function r(){
    try{
        let content1 = await read('1.txt','utf8');
        let content2 = await read(content1,'utf8');
        return content2;
    }catch(e){ 
        console.log('err',e)
    }
}

– 用同步的方式发请求(这里使用了jquery ajax)

let data
$.ajax({
    url:xxx,
    async:false， //表示是否异步
    success(mes){
        data=mes
    }
})
//后面可以使用data
然后window.open打开新窗口

二、CSS样式

1、隐藏滚动条

.xxx{
    //限定最大高度如max-height:100px;    
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;       
    margin-bottom: -.2rem;
    overflow: -moz-scrollbars-none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar{
        display: none;
    }   
}

2、显示固定行数

.xxx{
    //设置高度
  display: -webkit-box;    
  -webkit-box-orient: vertical;    
  -webkit-line-clamp: 5;    
  overflow: hidden;
}

3、宽

  • 在布局的时候，最外的div设置固定的px
  • 内部的div设置百分比
  • 实现响应式的时候，用媒体查询修改最外div的宽度就可以了

4、解决滚动条抖屏

  • 产生原因：不同页面的所用的高度不一样那么超出浏览器高度会显示滚动条，出现样式抖动
  • 解决方案，全局样式加上以下代码(body absoulte)
html {
    overflow-y: scroll;
}
:root {
    overflow-y: auto;
    overflow-x: hidden;
}
:root body {
    position: absolute;
}
body {
    width: 100vw;
    overflow: hidden;
}

三、前端库的使用

1、Swiper

  • 官网，选择样式：https://www.swiper.com.cn/
  • 引入cdnjs
index.html
-------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
  • 引入css
@import "../assets/css/swiper.min.css";
  • 引入html
  • 引入js

注意，如果异步获取的数据赋值后不更新，那么在swiper的配置里加上：

observer:true,
observeParents:true,