當大多數人對Vue理解到爐火純青的時候，是否是該思考一下怎麼讓vue頁面騷氣起來

時間 2019-11-05

標籤大多數人 vue 理解爐火純青時候是否思考一下怎麼頁面起來欄目興趣愛好简体版

原文原文鏈接

寫在前面

當大多數人Vue理解的爐火純青的時候，是否是應該思考一下怎麼讓vue頁面騷氣起來，下面就我我的在接觸Vue實際工做中門戶網站在前端頁面交互應用和小技巧，炒幾道「小菜」給你們分享一下，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各類常見常遇到的情景吧，看懂代碼須要一些vue、axios、es六、scss基礎、數據基本上是mock，功能和場景的話，會在空閒的時候慢慢加上來，廢話很少說，直接上菜單：javascript

小菜0、頁面佈局之五彩斑斕的相似標籤欄

先來個效果熱熱身css

上菜：前端

場景需求：最近設計溼丟來這樣的頁面設計，要求響應式。正常老鐵們看到相似標籤欄的設計，做爲前端要切出來估計頭皮一發麻，基本上實現的話要麼簡單粗暴上背景圖，要麼幾個div，做爲對代碼有的潔癖的我就直接上v-for表單渲染，把中間這塊封裝了一個公用的容器組件wapper，因而乎下面代碼來了（完整代碼，見本文後github連接）vue

<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等分，而後各類陰影、圓角之類的一上效果槓槓的。java

[題外話：至於性能方面沒有作過多的思考，v-for表單渲染與其餘實現方式的性能對比，這裏也不作過多講，這樣看起來代碼是優雅的]ios

小菜一、愛心點贊，七夕特別貢獻

點贊場景，七夕了給相愛的ta一個贊吧css3

上菜：git

場景需求：七夕立刻就要到了，開始估計又要虐狗了，根據喜歡程度能夠進行屢次點擊，從由於人羣中偶然的一個回眸，日常到like,到love,再到love+,在到日常（點擊經過愛心顏色和文字提示表示親密度），項目中也經常出現，好比評論點贊，圖書推薦點贊等場景，這裏我把愛心抽離出一個heart組件，上核心代碼：es6

<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連接）github

[題外話：以上數據都是mock模擬，其實請求的是github裏面的數據，github提供的api能夠看到不少數據，感興趣的同窗能夠拿取githubapi裏本身的數據作一個關於本身的'大數據分析頁面'，很贊哦]

小菜二、讓新聞選項卡動起來

新聞選項卡，門戶網站出現機率賊高，告別枯燥無味翻動新聞選項卡，鼠標通過動起來

上菜：

場景需求：選項卡標題鼠標通過，對應切換新聞內容列表。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超出部分顯示更多按鈕，等等均可下載源碼看看]

小菜三、讓新聞卡片圖片點擊放大

新聞卡片，點擊圖片平滑過渡放大，關閉縮小

上菜：

場景需求：其實就是一個查看點擊查看大圖插件

<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 &amp;&amp; full" :width="fullWidth" :height="fullHeight"
                @load="onLoadFull" />
            </div>
        </transition>
    </div>
</template>
複製代碼

原理：經過transform:屬性scale實現圖片縮放，其中圖片是兩張圖小大圖切換，目前只是實現了功能，有待優化，因此不貼代碼了（完整代碼，本文後github連接）

小菜四、輪播圖

輪播圖，如今基於vue的開源的不少優秀的輪播圖插件,好比vue-awesome-swiper，這個功能就很少講，這邊的話我本身寫的：一、支持瀏覽器任意放縮，兼容移動端，二、支持自動切換，鼠標通過中止切換，分頁/任意頁點擊切換，左右切換，三、支持文字介紹（超過一行自動省略）

上菜：

值得一提的是：若是加載輪播圖組件（其餘組件有這種報錯可能）在加載的過程當中出現「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》

小菜五、即時檢索

上菜：

場景需求：經過輸入即時檢索列表裏面的內容，列表的檢索過濾，直接上代碼（完整代碼，本文後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框的內容，而後再展現內容

小菜六、粒子動效

上菜：點擊網頁查看效果

場景需求：看效果，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>
複製代碼

小菜七、循環滾動新聞

上菜

場景需求：在顯示範圍有限的狀況下，要顯示新聞所有內容，主要是控制新聞列表的父級的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源碼）上，可下載體驗，也期待你們的交流....