Writing in the front
When most people understand Vue at a perfect speed, is it right to think about how to let Vue page SAO qi up, the following is my personal contact with Vue in the actual work of portal website in front page interaction applications and tips, fry a few “dishes” to share with you, I encapsulate it as a project vue-portal-webui (Github source code), not to say UI, but also a variety of common scenarios encountered it, to understand the code requires some VUE, AXIos, ES6, SCSS foundation, data is basically mock, functions and scenarios, will be added slowly at idle time. Without further ado, straight to the menu:
Side dish 0, page layout of the multicolored similar TAB bar
Let’s warm up for the effects
Serving:
Scene requirements: Recent design wet throw to such a page design, request responsive. If you see a design similar to the TAB bar, you will feel numb if you cut it out as the front end. Basically, if you want to realize it, you can either add a simple background image or several divs. As a neat person, I will directly render on the V-for form, and enclose a common container component wapper in the middle part. So here’s the code (see github link for the full code later in this article)
<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>Copy the codePrinciple: V-for to go through the number group, add color to the background, the style part is not posted code, principle is cSS3 calculation attribute calC divided into 6 equal points, and then a variety of shadows, rounded corners and so on on the effect of the bar.
[Side note: I haven’t done much thinking about performance, and I won’t talk too much about v-for form rendering versus other implementations, so the code looks elegant.]
Side dish 1, love praise, Tanabata special contribution
Thumbs up scene, Tanabata to love ta a thumbs up
Serving:
Scene requirements: Chinese Valentine’s Day is coming, and it is estimated that the dog will be abused again. Multiple clicks can be made according to the degree of liking, from an accidental glance in the crowd, from ordinary to like, to love, and then to love+, and from ordinary to ordinary (clicking on the color of love and text prompts to indicate closeness), which often appear in projects, such as comments and likes. Here I take the heart out of a heart component and go to the core code:
<template>
<a href="javascript:void(0)"
@click="handleHeart()"
:class="{ 'like' : heart.level === 1, 'love' : heart.level === 2, 'stalker' : heart.level === 3 }"
class="heart"> < I > has < / I > < / a > < / template >Copy the code 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(); // Write to database},updateDB() {}},created() {
if(! this.existing) { this.heart.level = 0; }else{ this.heart.level = this.existing; }}Copy the codePrinciple: In fact, I have already mentioned in the previous article “from bronze to king 10 CSS3 pseudo-class using skills and application, understand a ha”. In fact, it is to use the pseudo-class to achieve the mouse prompt, click to modify the loop heart. Level, switch class to modify the prompt (pseudo-class transparency). And heart colors (full code, github link later in this article)
Github provides an API that allows you to see a lot of data. If you are interested, you can create a ‘big data analysis page’ based on your own data from GithubAPI.
Tip 2: Get the News TAB moving
News TAB, portal sites appear high probability thief, bid farewell to the boring turn news TAB, the mouse after moving up
Serving:
Scenario requirement: Switch the news content list when the cursor passes over the title of the TAB. Jq depth patients, who usually see an effect similar to the scrolling push effect, must want to manipulate DOM ah, so easy. Again, code obsessives, es6 and VUE combine to get you as far away from DOM manipulation as possible. Post the code below (full code, github link)
<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> more >></a></li> </ul> </div> </div>Copy the codetebHover(index){ this.activeTab = index; This.marginleft = -1*(this.activeTab)*100}Copy the codePrinciple: let the news content area of the news-Listbox width 300% (because there are three options), beyond part of the hidden, the title option only need to mouse through the time with index, calculate the margin-left, with CSS3 animation, a few lines of ES6 to achieve the above effect!
[Aside: The above data is a mock simulation, there are actually a lot of interesting highlights, such as how to make the first data of the news different from other Li, time capture, li beyond the part of the display of more buttons, etc., can be downloaded source code to see.]
3. Click on the news card picture to enlarge it
News card, click picture smooth transition to enlarge, close zoom
Serving:
Scene requirements: actually a view click to view the larger image plug-in
<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>
Copy the codePrinciple: Achieve image scaling by transform: attribute scale, where the image is two images of small and large switching, currently only realize the function, to be optimized, so do not paste code (complete code, this article after github link)
Side dish 4. Rotation chart
Vue-awese-swiper is an open source plugin for vote-swiper, which is based on vUE. 1, support browser arbitrary expansion and contraction, compatible with mobile terminal, 2, support automatic switching, stop switching after the mouse, paging/any page click switch, left and right switch, 3, support text introduction (more than one line is automatically omitted)
Serving:
Error in render: “TypeError: Cannot read property ‘url’ of undefined” Error in render: “TypeError: Cannot read property ‘url’ of undefined”
This is due to a problem with the order in which axios requests and components are rendered. In this case, you only need to load the components after AXIos requests the data. I recommend using V-if to determine if the length of the data is greater than 0, indicating that the data has been requested.
<div class="slider-wapper">
<slider :slides="slides" :inv="invTime" v-if="slides.length > 0"></slider>
</div>
Copy the codeFor the corresponding carousel component, those who are interested can see my previous article “From development to Release of VueSliderShow, a Responsive adaptive carousel component plug-in based on Vue2x”.
5. Instant search
Serving:
Scene requirements: By entering the contents of the instant search list, list search filter, directly on the code (complete code, github link after this article)
<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>
Copy the code methods:{
toggleOnOff() { this.onOff = ! this.onOff; } }, computed: {filteredList() {
return this.postList.filter((post) => {
returnpost.title.toLowerCase().includes(this.keyword.toLowerCase()); }); }}Copy the codeHow it works: Use computed content in an input box, and then display the content
6, particle dynamic effect
To serve: Click on the web page to see the effect
This is a lightweight, non-dependent javascript plugin for particle backgrounds. If you directly use “Particles. Js” in vue project, you may have to work in some pits. Therefore, IT is recommended to use “Vue-Particles”.
<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>
Copy the code7. A news cycle
serving
To display the entire content of the news, control the parent margintop value of the news list. The main code is as follows:
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);
}
Copy the codeAnd finally :(to be continued)
Due to the relationship of the previous job, most of the projects are portal website projects. Recently, I proposed to resign and take a break. Now this is the stage, I have summarized some front-end experience and some tips in the past two years. Originally, I was thinking of writing a UI component of portal website based on Vue, but later I felt that the scope of WRITING UI was too large, so I would like to share some common tips on front-end page interaction of Vue. Currently, due to time and work, the update is relatively slow. Of course, there are other small components in this project at present. Go back to the top, github widget…. Of course, these so-called “slatty” page effects have not been tested too much in terms of performance and practicability, including the hasty writing of the article and the mistakes in the description. Thank you for your correction. We will continue to update and optimize the following pages and share some new and interesting small items. Will publish updates on this article and vuE-portal-webui (github source code), downloadable experience, also look forward to your exchange….