寫在前面
當大多數人Vue理解的爐火純青的時候，是不是應該思考一下怎麼讓vue頁面騷氣起來，下面就我個人在接觸Vue實際工作中入口網站在前端頁面互動應用和小技巧，炒幾道“小菜”給大家分享一下，我把它封裝成一個專案vue-portal-webUI（github原始碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂程式碼需要一些vue、axios、es6、scss基礎、資料基本上是mock，功能和場景的話，會在空閒的時候慢慢加上來，廢話不多說，直接上選單：
小菜0、頁面佈局之五彩斑斕的類似標籤欄
先來個效果熱熱身
上菜：
場景需求：最近設計溼丟來這樣的頁面設計，要求響應式。正常老鐵們看到類似標籤欄的設計，作為前端要切出來估計頭皮一發麻，基本上實現的話要麼簡單粗暴上背景圖，要麼幾個div，作為對程式碼有的潔癖的我就直接上v-for表單渲染，把中間這塊封裝了一個公用的容器元件wapper，於是乎下面程式碼來了（完整程式碼，見本文後github連結）
<template>
<div class="com-wapper">
<div class="wapper">
<div class="content-header">
<div class="list" v-for="(item,index) in colorList" :style="{ background: item }"></div>
</div>
<div class="content">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'wapper',
data(){
return{
colorList: ['#ea4035','#fbac46','#2eb472','#f7ec31','#1b72b4','#90268b']
}
}
}
</script>複製程式碼原理：v-for去遍歷陣列，把顏色加在背景上，樣式部分就不貼程式碼了，原理就是css3的計算屬性calc分成6等分，然後各種陰影、圓角之類的一上效果槓槓的。
[題外話：至於效能方面沒有做過多的思考，v-for表單渲染與其他實現方式的效能對比，這裡也不做過多講，這樣看起來程式碼是優雅的]
小菜1、愛心點贊，七夕特別貢獻
點贊場景，七夕了給相愛的ta一個贊吧
上菜：
場景需求：七夕馬上就要到了，開始估計又要虐狗了，根據喜歡程度可以進行多次點選，從因為人群中偶然的一個回眸，平常到like,到love,再到love+,在到平常（點選通過愛心顏色和文字提示表示親密度），專案中也常常出現，比如評論點贊，圖書推薦點贊等場景，這裡我把愛心抽離出一個heart元件，上核心程式碼：
<template>
<a href="javascript:void(0)"
@click="handleHeart()"
:class="{
'like' : heart.level === 1,
'love' : heart.level === 2,
'stalker' : heart.level === 3
}"
class="heart">
<i>♥</i>
</a>
</template>
複製程式碼 methods: {
handleHeart: function() {
var heart = this.heart;
var level = heart.level;
switch (level) {
case 0:
heart.level = 1;
break;
case 1:
heart.level = 2;
break;
case 2:
heart.level = 3;
break;
case 3:
heart.level = 0;
break;
}
// this.updateDB(); //寫入資料庫操作
},
updateDB() {
}
},
created() {
if (!this.existing) {
this.heart.level = 0;
} else {
this.heart.level = this.existing;
}
}
複製程式碼原理：點贊功能究竟是怎麼實現的呢，其實我在前一篇文章《從青銅到王者10個css3偽類使用技巧和運用，瞭解一哈》已經提到了，其實就是用偽類實現滑鼠經過提示，點選修改迴圈heart.level，切換class來修改提示（偽類透明度），和愛心顏色（完整程式碼，見本文後github連結）
[題外話：以上資料都是mock模擬，其實請求的是github裡面的資料，github提供的api可以看到很多資料，感興趣的同學可以拿取githubapi裡自己的資料做一個關於自己的'大資料分析頁面'，很贊哦]
小菜2、讓新聞選項卡動起來
新聞選項卡，入口網站出現概率賊高，告別枯燥無味翻動新聞選項卡，滑鼠經過動起來
上菜：
場景需求：選項卡標題滑鼠經過，對應切換新聞內容列表。jq深度患者，通常看到類似滾動推動效果的效果，肯定在想操作DOM啊，so easy。還是那句話，程式碼強迫症，es6和vue相結合，讓你儘可能告別DOM操作，下面貼上程式碼（完整程式碼，本文後github連結）
<div class="news-wrapper" v-cloak>
<ul class="news-list">
<li v-for="(item,index) in list" :class=" {'active':index===activeTab}" @mouseenter="tebHover(index)"><a href="javascript://">{{item.newstitle}}</a></li>
</ul>
<div class="news-box">
<div class="news-listbox" :style="{'margin-left': marginleft+'%'}">
<ul v-for="(item,index) in list">
<li class="clearFix" v-for="(news, index) in item.datalist" v-if="index < 6">
<a>
<div class="news-date">
<div class="date-day">{{news.date.split("-")[2]}}</div>
<div class="date-year">{{news.date.split("-")[0]}}-{{news.date.split("-")[1]}}</div>
</div>
<div class="main-news">
<div class="newstxt-title">{{news.title}}</div>
<div class="news-text">
{{news.content}}
</div>
</div>
<div class="time">{{news.date}}</div>
</a>
</li>
<li class="more" v-if="item.datalist.length >= 6"><a>更多>></a></li>
</ul>
</div>
</div>
</div>複製程式碼 tebHover(index){
this.activeTab = index;
//計算margin-left的百分比
this.marginleft = -1*(this.activeTab)*100
}複製程式碼原理：讓新聞內容區news-listbox的寬度300%（因為有三個選項），超出部分隱藏，這邊標題選項只需要滑鼠經過的時候帶上index，計算margin-left多少，配合css3動畫，寥寥幾行ES6就實現了以上效果！
[題外話：以上資料都是mock模擬，裡面其實很多值得大家可以看的亮點，比如怎麼樣讓新聞第一條資料是和其他li有區別，時間擷取、li超出部分顯示更多按鈕，等等都可下載原始碼看看]
小菜3、讓新聞卡片圖片點選放大
新聞卡片，點選圖片平滑過渡放大，關閉縮小
上菜：
場景需求：其實就是一個檢視點選檢視大圖外掛
<template>
<div class="image-dialog">
<button class="image-dialog-trigger" type="button" @click="showDialog"><img class="image-dialog-thumb" ref="thumb" :src="thumb" />
</button>
<transition name="dialog" @enter="enter" @leave="leave">
<div class="image-dialog-background" v-show="appearedDialog" ref="dialog">
<button class="image-dialog-close" type="button" @click="hideDialog" aria-label="Close"></button>
<img class="image-dialog-animate" ref="animate" :class="{ loading: !loaded }" :src="loaded ? full : thumb" />
<img class="image-dialog-full" ref="full" :src="appearedDialog && full" :width="fullWidth" :height="fullHeight"
@load="onLoadFull" />
</div>
</transition>
</div>
</template>
複製程式碼原理：通過transform:屬性scale實現圖片縮放，其中圖片是兩張圖小大圖切換，目前只是實現了功能，有待優化，所以不貼程式碼了（完整程式碼，本文後github連結）
小菜4、輪播圖
輪播圖，現在基於vue的開源的很多優秀的輪播圖外掛,比如vue-awesome-swiper，這個功能就不多講， 這邊的話我自己寫的：1、支援瀏覽器任意放縮，相容移動端，2、支援自動切換，滑鼠經過停止切換，分頁/任意頁點選切換，左右切換，3、支援文字介紹（超過一行自動省略）
上菜：
值得一提的是：如果載入輪播圖元件（其他元件有這種報錯可能）在載入的過程中出現“Error in render: "TypeError: Cannot read property 'url' of undefined"
這是由於axios請求和元件渲染順序的問題引起的，這時候，你只需要在axios請求到資料後，再去載入元件，這裡我推薦用v-if，判斷當資料的長度大於0，表示請求出來了資料，再去載入輪播元件，如此就不會報錯了。
<div class="slider-wapper">
<slider :slides="slides" :inv="invTime" v-if="slides.length > 0"></slider>
</div>
複製程式碼對應輪播元件，感興趣的同學可以看我之前發的文章《從開發到釋出一款基於Vue2x的響應式自適應輪播元件外掛VueSliderShow》
小菜5、即時檢索
上菜：
場景需求：通過輸入即時檢索列表裡面的內容，列表的檢索過濾，直接上程式碼（完整程式碼，本文後github連結）
<div class="search-box">
<div class="search-wrapper">
<input type="text" v-model="keyword" placeholder="Search title..." />
<label>Search Title</label>
</div>
<div class="wrapper">
<div class="card" v-for="post in filteredList">
<a v-bind:href="post.link" target="_blank">
<img v-bind:src="post.img" />
<small>Posted by: {{ post.author }}</small> {{ post.title }}
</a>
</div>
</div>
</div>
複製程式碼 methods:{
toggleOnOff() {
this.onOff = !this.onOff;
}
},
computed: {
filteredList() {
return this.postList.filter((post) => {
return post.title.toLowerCase().includes(this.keyword.toLowerCase());
});
}
}
複製程式碼原理：通過computed計算input框的內容，然後再展示內容
小菜6、粒子動效
上菜：點選網頁檢視效果
場景需求：看效果，particles.js介紹就略了,一個輕量級，無依賴的javascript外掛，用於粒子背景。原理的話canvas畫布渲染，如果你直接用particles.js在vue專案的話，可能要爬一些坑，所以推薦vue-particles，簡單看一下使用，具體使用可以移步vue-particles官網（完整程式碼，本文後github連結）
<vue-particles
color="#6495ED"
:particleOpacity="0.8"
:particlesNumber="60"
shapeType="circle"
:particleSize="4"
linesColor="#6495ED"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.6"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push">
</vue-particles>
複製程式碼小菜7、迴圈滾動新聞
上菜
場景需求：在顯示範圍有限的情況下，要顯示新聞全部內容，主要是控制新聞列表的父級的margintop值來實現的，主要程式碼如下（完整程式碼，本文後github連結）
computed: {
marginTop() {
return - this.activeIndex * 6;
}
},
mounted() {
setInterval(_ => {
if(this.list.length - 7 >0){
let vh = this.list.length -7
if(this.activeIndex < vh) {
this.activeIndex += 1
} else {
this.activeIndex = 0
}
}else{
this.activeIndex = 0
}
}, 2000);
}
複製程式碼最後：（未完待續）
因為前一份工作的關係，做的專案大多數都是入口網站專案，最近提了離職，偷閒現在這是階段，總結了這兩年來的一些前端經驗和一些小技巧，也有參考踏得網一些資源。 本來是想著寫一個基於Vue的入口網站UI元件的，後來覺得寫UI範圍太大，就分享一些通用的vue在前端頁面互動上一些小技巧吧，目前由於時間和工作關係，暫時更新比較慢，當然目前這個專案裡還有其他的一些小元件，比如返回頂部、github小掛件....，當然這些所謂“騷氣”的頁面效果，在效能上和實用性上沒有做過多的測試，包括文章寫的倉促，描述有誤之處，謝謝大家指正，後續會持續更新和優化，分享一些新的有趣的小元件小東西，都會發布更新在這篇文章和vue-portal-webUI（github原始碼）上，可下載體驗，也期待大家的交流....