項目中遇到的問題及解決方案

1.  CSS3如何給僞元素::before添加hover （僞類元素添加hover樣式）

　　僞類元素是不支持hover，可是咱們能夠經過div添加hover

 

　　 html

　　<div class="div2"><i class="iconfont icon-shouye"></i></div>    // 中間用的是icon圖標因此我要鼠標滑過的時候icon圖標變成白色       /   直接給 i 標籤添加顏色是不能夠的！

　　 css

　　.div2:hover .icon-shouye:before{color:#fff}

 

 

 

 

 

2.  vue使用router-link跳轉其餘詳情頁以後，左側菜單顏色不被選中

　　樣式圖   /  修改以前

　　圖一：圖二：

 

　　效果圖   /  修改以後

　　圖三： 圖四：

　　

　　很明顯圖一和圖三是在前下，router-link的class是能夠有背景顏色，圖二和圖四是點擊所有應用下的添加應用router-link就不會再有class名，因此用watch監聽來讓它加上class名。

　　一開始點擊 所有應用router-link(a)標籤上會有選中的class名 ， router-link-active  router-link-exact-active  ， 最後設置樣式就能夠，這樣的話在本頁面不會有問題，可是在你在頁面中在跳轉到詳情頁router-link上的class名就不會存在。下面就是解決這個問題

 

　　html

　　<ul class="child-list applic">

　　　　<router-link :to="{name: 'Applist', query:{id: id, name: user_name, userStatus: user_status}}">

　　　　　　<li ref="applist">

　　　　　　　　<h3>所有應用</h3>

　　　　　　</li>

　　　　</router-link>

　　</ul>

　　 js

　　vue監聽路由的變化就能夠了，主要是根據 refs來操做，因此在所有應用標籤上加了 ref，（當時我是想在router-link上添加class的，最後加不上css樣式，具體的我也沒有在研究）

　　

　　

　　watch: {

　　　　'$route' (to, from) {

　　　　　　if (['create'].indexOf(to.name) > -1) {

　　　　　　　　this.$nextTick(() => {

　　　　　　　　　　switch (to.name) {

　　　　　　　　　　　case 'issueDetail':

　　　　　　　　　　　　this.$refs['issues'].classList.add('router-link-active')

　　　　　　　　　　　　break;

　　　　　　　　　　　case 'resdetail':

　　　　　　　　　　　　this.$refs['resources'].classList.add('router-link-active')

　　　　　　　　　　　　break;

　　　　　　　　　　　 // 這樣寫能夠包含多個條件

　　　　　　　　　　　case 'create':case 'detail':case 'history': case 'modify': case 'publish':

　　　　　　　　　　　　this.$refs['applist'].classList.add('router-link-active')

　　　　　　　　　　　break;

　　　　　　　　　　}

　　　　　　　　　})

　　　　　　} else {

　　　　　　　　this.$nextTick(() => {

　　　　　　　　　　this.$refs['issues'].classList.remove('router-link-active')

　　　　　　　　　　this.$refs['resources'].classList.remove('router-link-active')

　　　　　　　　　　this.$refs['applist'].classList.remove('router-link-active')

　　　　　　　　})

　　　　　　}

　　　　}

　　}

 

3.  ajax請求參數時須要寫contentType

　　爲何會說在請求ajax時帶上contentType，由於有時不會請求的參數體就變成這樣：（以下圖）

　　圖一：

　很明顯就不同，接下來放一張正常時的請求體圖片：（以下圖）

　　圖二：

圖一那樣子請求不加入contenType也是能夠請求成功的，可是我以爲那個樣子是不合理的，因此在ajax請求中攜帶了 contentType："application/json;charset=UTF-8"