当大多数人对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源码）上，可下载体验，也期待你们的交流....