默认页面和封装卡片组件 day4
2019-07-23 本文已影响0人
zheng_zq
我们先解决上一篇文章最后的问题，做一个默认页面:
我们在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
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
效果图:
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
