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

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

image.png

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

同样在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:

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

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

image.png

新增语句:

    

      

        
      
      

        
20
        
新增用户
      
    
  
  

到目前为止的整体效果:

image.png

理想中的效果如下图:

image.png

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

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

image.png

MyCard.vue:

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

image.png

home.vue:

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

home.vue里面改成以下这句代码:

效果跟之前一样，但是我们可以改变参数而轻松地制作出多个卡片。
第一种布局方式:flex:

效果如下:

image.png

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

image.png

home.vue:

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

image.png

image.png

效果图:

image.png

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

image.png

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

,
  data(){
    return{
      mycount:0
    }
  },
  mounted(){
    var timer = setInterval(() => {
      if(this.mycount

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

image.png