1-.0实战：仿豆瓣app项目，创建自定义组件
创建组件
我们先来分析一下豆瓣app:
首页的背景是绿色的，并且有一个搜索框，其他页面都是灰色的背景，在的左侧，是一个返回按钮，右侧，有分享或者评论等图标，中间就是的标题。我们先不做有搜索框的。
我们先在文件中创建一个.vue文件，并且在less文件里新建一个颜色变量var.less（统一管理app的颜色，保持统一），我们先将有其他元素的组件的大致框架，以及样式先写出来。然后在index.vue里面引入。
//var.less
//APP默认颜色
@defaultColor:#42bd56;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);
//tabbar
@tabbarActiveColor: @defaultColor;
//header.vue< img class="m-icon-img" src="../../assets/images/ic_bar_back_white.png"/>返回
豆瓣app分享
/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
display: flex;
align-items: center;
height: 44px;
padding: 0 10px;
background: #fff;
color: @headerDefaultColor;
border-bottom:1px solid #eee;
a{
color: @headerDefaultColor;
}
.m-header-button{
width: 70px;
align-items:stretch;
&.is-left{
text-align: left;
}
&.is-right{
text-align: right;
}
.m-icon-img{
width: 20px;
height: 20px;
}
.margin-right-10{
margin-right: 10px;
}
}
.m-header-title{
flex: 1;
text-align: center;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.is-bg{
background:@headerBg;
color: #fff;
a{color: #fff;}
.m-header-title{
color: #fff;
}
}
&.is-fixed{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9;
}
}下图就是我们完成后的截图：
is-bg:是否显示背景色，默认是绿色
is-fixed:是否显示在顶部
去掉is-bg,显示白色背景的组件
var.less，修改一下
//tabbar.vue@import "../assets/less/var.less";
.m-tabbar-item{
flex: 1;
text-align: center;
.m-tabbar-item-icon{
display: block;
padding-top: 2px;
img{
width: 28px;
height: 28px;
}
}
.m-tabbar-item-text{
display: block;
font-size: 10px;
color:#949494;
}
&.is-active{
.m-tabbar-item-text{
color: @tabbarActiveColor;
}
}
}如果我们需要更换整个app的颜色，只需要在var.less更改相应的变量就可以了。例如：
改成黄色
//var.less //APP默认颜色 @defaultColor:#f6c210; //header @headerBg:@defaultColor; @headerDefaultColor:rgb(73,73,73); //tabbar @tabbarActiveColor: @defaultColor;
改成红色
//var.less //APP默认颜色 @defaultColor:#ff0000; //header @headerBg:@defaultColor; @headerDefaultColor:rgb(73,73,73); //tabbar @tabbarActiveColor: @defaultColor;
是不是非常的方便！！！
接下来我们就来把改造成可以配置属性的组件，可以传递props(title,fixed,bg),
export default{
props:{
title:{
type:String,
default:''
},
bg:{
type:Boolean,
default:false
},
fixed:{
type:Boolean,
default:false
}
}
}/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
display: flex;
align-items: center;
height: 44px;
padding: 0 10px;
background: #fff;
color: @headerDefaultColor;
border-bottom:1px solid #eee;
a{
color: @headerDefaultColor;
}
.m-header-button{
width: 70px;
align-items:stretch;
&.is-left{
text-align: left;
}
&.is-right{
text-align: right;
}
.m-icon-img{
width: 20px;
height: 20px;
}
.margin-right-10{
margin-right: 10px;
}
}
.m-header-title{
flex: 1;
text-align: center;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.is-bg{
background:@headerBg;
color: #fff;
a{color: #fff;}
.m-header-title{
color: #fff;
}
}
&.is-fixed{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9;
}
}大功告成！我们就来调用吧！
< img class="m-icon-img" src="../../assets/images/ic_bar_back_white.png"/>返回 分享 < img class="m-icon-img" src="../../assets/images/ic_bar_back_white.png"/>返回 分享 < img class="m-icon-img" src="../../assets/images/ic_bar_back_green.png"/>返回 < img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/> < img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/>
改造,完成路由跳转
上一章我们只完成了点击改变颜色，那么如何通过路由来进行跳转页面呢？
我们先新建底部的路由页面，豆瓣app这个项目说大不大说小也不小，为了规划好结构，我们将每一个路由都新建一个文件夹，然后在文件夹里面，新建这个页面。在每个页面都添加不同的组件，如图所示：
然后在每一个路由页面里面，我们都添加上组件。
拥有组件的示例：
Mine.vue
< img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/>
< img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/>
import mHeader from '../../components/header'
export default {
name: 'mine',
components: {
mHeader
}
}路由的页面完成后我们就需要在文件夹下面的index.js里面，来配置页面路由。如下：
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index/Index'
import Broadcast from '../pages/Broadcast/Broadcast'
import AudioBook from '../pages/AudioBook/AudioBook'
import Group from '../pages/Group/Group'
import Mine from '../pages/Mine/Mine'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/broadcast',
name: 'Broadcast',
component: Broadcast
},
{
path: '/audioBook',
name: 'AudioBook',
component: AudioBook
},
{
path: '/group',
name: 'Group',
component: Group
},
{
path: '/mine',
name: 'Mine',
component: Mine
},
{
path: '/Index',
redirect: '/'
},
{
path: '*',
redirect: '/'
},
]
})我们可以在浏览器输入配置的这个路由地址来访问这个页面是否存在。如果不存在详细检查路径是否正确。
接下来我们就来改造实现路由跳转。我们先将index.vue里的组件移入到app.vue里面，并且将每一个id改成对应的路由，添加一个属性，来判断当前item是否是路由跳转。然后在-item.vue里我们在props添加，click点击跳转的方法放到里面，并且根据传递的判断当前是否通过路由跳转.
App.vue
< img src="./assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_home_active.png" alt="" slot="icon-active">
首页< img src="./assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_subject_active.png" alt="" slot="icon-active">
书影音< img src="./assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_status_active.png" alt="" slot="icon-active">
广播< img src="./assets/images/ic_tab_group_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_group_active.png" alt="" slot="icon-active">
小组< img src="./assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_profile_active.png" alt="" slot="icon-active">
我的import mTabbar from './components/tabbar'
import mTabbarItem from './components/tabbar-item'
export default {
name: 'app',
components:{
mTabbar,
mTabbarItem
},
data() {
return {
select:"Index"
}
}
}-item.vue
export default{
props: {
id:{
type:String
},
isRouter:{
type:Boolean,
default:false
}
},
computed: {
isActive(){
if(this.$parent.value===this.id){
return true;
}
}
},
methods:{
goToRouter(){
this.$parent.$emit('input',this.id)
//判断是否为路由跳转
if(this.isRouter){
//根据id跳转到对应的路由页面
this.$router.push(this.id)
}
}
}
}@import "../assets/less/var.less";
.m-tabbar-item{
flex: 1;
text-align: center;
.m-tabbar-item-icon{
display: block;
padding-top: 2px;
img{
width: 28px;
height: 28px;
}
}
.m-tabbar-item-text{
display: block;
font-size: 10px;
color:#949494;
}
&.is-active{
.m-tabbar-item-text{
color: @tabbarActiveColor;
}
}
}