默认页面和封装卡片组件 day4

我们先解决上一篇文章最后的问题，做一个默认页面:
我们在views目录下新建一个home文件夹，再新建一个home.vue文件，如下图:

image.png

在里面随便写点什么
home.vue:

<template>
    <h1>默认主页面</h1>
</template>

<script>
export default {

}
</script>

<style>

</style>

同样在index.js里面添加路由，这次是嵌套路由，嵌套在Test01.vue，但是path为空。

image.png

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
import userlist from '@/views/user/userlist'
import login from '@/views/login/login'
import home from '@/views/home/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/',
      name: 'Test01',
      component: Test01,

      children: [
        {
          // path为空即默认页面 home.vue
          path: '',
          name: 'home',
          component: home
        },
        {
          path: 'userlist',
          name: 'userlist',
          component: userlist
        }
      ]
    }
  ]
})

效果图:

image.png

默认页面问题已经解决，但是我们可以注意到左边菜单栏的默认状态很不理想。
1.首先高亮处应该是“工作区域”，而不是用户统计。
2.其次用户管理item不应该展开。
我们修改以下两处代码即可解决以上两个问题:

image.png

1.把active-name改成"0"。
2.把open-names="['1']"改成open-names="[]"。

image.png

效果图:

image.png

我们可以看到工作区域高亮的区域右侧有蓝色边框，为了美观我们可以设置背景颜色为深色。

image.png

效果图:

image.png

我们再来添加一个面包屑
我们选用以下这个样式

image.png

home.vue:

<template>
    <div>
        <Breadcrumb>
        <BreadcrumbItem to="/">Home</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
        <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
    </Breadcrumb>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

稍微修改一下文字后的效果图:

image.png

接下来做一个卡片组件
先看看效果图:

image.png

我们先写一些公用样式:
在assets目录下新建css文件夹，新建common.css文件。
该样式主要处理一些居中对齐一类的问题。
common.css:

.flex{
    display: flex
}
.flex-1{
    /* 宽度自适应 */
    flex: 1
}
.flex-cl{
    /* 列对齐 */
    flex-direction: column;
}
.j-center{
    justify-content: center
}
.a-center{
    align-items: center
}
.j-bt{
    justify-content: space-between
}

在main.js中import公用样式

image.png

新增语句:

import './assets/css/common.css'

我们有了公用样式后编写Card就方便多了，我们选择以下样式:

image.png

改变其一些style后就可以实现以下效果:

image.png

新增语句:

<Card style="width:320px" padding="0">
    <div class="flex">
      <div
        class="flex a-center j-center"
        style="width:92px;height:110px;background:#2D8CF0">
        <Icon type="md-person-add" style="color:#ffffff;font-size:50px;" />
      </div>
      <div class="flex a-center j-center flex-1 flex-cl">
        <h1>20</h1>
        <div>新增用户</div>
      </div>
    </div>  
  </Card>

到目前为止的整体效果:

image.png

理想中的效果如下图:

image.png

所以为了方便后续的开发工作，我们将Card这个标签封装起来。
1.先进行无参封装。

在components目录下新建MyCard.vue文件，如下图:

image.png

MyCard.vue:

<template>
  <Card style="width:320px" padding="0">
    <div class="flex">
      <div
        class="flex a-center j-center"
        style="width:92px;height:110px;background:#2D8CF0">
        <Icon type="md-person-add" style="color:#ffffff;font-size:50px;" />
      </div>
      <div class="flex a-center j-center flex-1 flex-cl">
        <h1>20</h1>
        <div>新增用户</div>
      </div>
    </div>  
  </Card>
</template>

在home.vue里可以直接用MyCard了，如下图:

image.png

home.vue:

<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>工作区域</BreadcrumbItem>
      <BreadcrumbItem>首页</BreadcrumbItem>
    </Breadcrumb>
    <MyCard></MyCard>
  </div>
</template>
<script>
import MyCard from "@/components/MyCard";
export default {
  components: {
    MyCard
  }
};
</script>

只需用一行<MyCard></MyCard>就可以实现卡片的效果。
2.进行有参封装。
我们把卡片的图标(Icon)、背景颜色(bgcolor)、数量(count)和标题(title)。
MyCard.vue:

<template>
  <Card style="width:320px" padding="0">
    <div class="flex">
      <div
        class="flex a-center j-center"
        style="width:92px;height:110px;":style="{backgroundColor:bgcolor}">
        <Icon :type={{Icon}}  style="color:#ffffff;font-size:50px;" />
      </div>
      <div class="flex a-center j-center flex-1 flex-cl">
        <h1>{{count}}</h1>
        <div>{{title}}</div>
      </div>
    </div>  
  </Card>
</template>

<script>
export default{
  props:["Icon","bgcolor","count","title"]
};
</script>

home.vue里面改成以下这句代码:
<MyCard icon="md-person-add" title="新增用户" count="20" bgcolor="#2D8CF0"></MyCard>
效果跟之前一样，但是我们可以改变参数而轻松地制作出多个卡片。
第一种布局方式:flex:

 <div class="flex">
    <MyCard icon="md-person-add" title="新增用户" count="20" bgcolor="#2D8CF0"></MyCard>
    <MyCard icon="md-person-add" title="累计点击" count="232" bgcolor="#19be6b"></MyCard>
    <MyCard icon="md-person-add" title="新增问答" count="142" bgcolor="#ff9900"></MyCard>
    <MyCard icon="md-person-add" title="分享统计" count="657" bgcolor="#ed3f14"></MyCard>
   </div>

效果如下:

image.png

第二种布局方式 iView提供的Raw布局:

image.png

home.vue:

<template>
  <div>
    <Breadcrumb style="margin:10px">
      <BreadcrumbItem>工作区域</BreadcrumbItem>
      <BreadcrumbItem>首页</BreadcrumbItem>
    </Breadcrumb>

    <Row>
      <Col span="4">
        <MyCard icon="md-person-add" title="新增用户" count="20" bgcolor="#2D8CF0"></MyCard>
      </Col>
      <Col span="4">
        <MyCard icon="md-person-add" title="累计点击" count="232" bgcolor="#19be6b"></MyCard>
      </Col>
      <Col span="4">
        <MyCard icon="md-person-add" title="新增问答" count="142" bgcolor="#ff9900"></MyCard>
      </Col>
      <Col span="4">
        <MyCard icon="md-person-add" title="分享统计" count="657" bgcolor="#ed3f14"></MyCard>
      </Col>
      <Col span="4">
        <MyCard icon="md-person-add" title="新增互动" count="12" bgcolor="#e46cbb"></MyCard>
      </Col>
      <Col span="4">
        <MyCard icon="md-person-add" title="新增页面" count="14" bgcolor="#9a66e4"></MyCard>
      </Col>
    </Row>

  </div>
</template>
<script>
import MyCard from "@/components/MyCard";
export default {
  components: {
    MyCard
  }
};
</script>

为了避免卡片被选中，再写一个no-select的公用样式:

image.png

效果图:

image.png

我们可以让卡片里面的数字有动画的效果，比如说新增用户卡片从0慢慢增加到20。

image.png

我们写一个定时器，新增代码:

,
  data(){
    return{
      mycount:0
    }
  },
  mounted(){
    var timer = setInterval(() => {
      if(this.mycount<this.count) this.mycount++
      else  window.clearInterval(timer)
    },1);
  }

为了解决类型统一的问题，我们在count前面加一个“:”，如下图:

image.png