Vue CLI 2 脚手架 TabBar 组件封装
2023-02-18 16:45:58 时间
- 1. 前言
- 2. 清理脚手架
- 3. 搭建 tabbar 基本布局
- 4. 书写 tabbar 基本样式
- 5. TabBar 组件封装
- 6. TabBarItem 组件封装
- 7. 给 TabBarItem 组件传入选中时的图片
- 8. TabBarItem 组件和路由结合效果
- 9. TabBarItem 组件的颜色动态控制
1. 前言
本文记录在 vue cli 2 中封装 tabbar 组件详细步骤,主要是为了感受 vue 的组件封装思想,也是前面学习 vue 基础的练习案例
2. 清理脚手架
删除图片: src/assets/logo.png
删除 HelloWorld 组件: src/components/HelloWorld.vue
清理 HelloWorld 组件: src/router/index.js (HelloWorld 组件路由配置)
清理 APP 组件: src/App.vue, 去除样式代码和模板内容,清理后内容如下:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
</style>
3. 搭建 tabbar 基本布局
APP 组件
<template>
<div id="app">
<div id="tab-bar">
<div>首页</div>
<div>分类</div>
<div>购物车</div>
<div>我的</div>
</div>
</div>
</template>
tabbar 图片存放目录: src/assets/img/tabbar
基础样式文件: src/assets/css/base.css
body {
margin: 0;
padding: 0;
}
在 APP 组件的 style 标签中导入基础样式文件
<style>
@import "./assets/css/base.css";
</style>
4. 书写 tabbar 基本样式
补充: tabbar 高度一般都是 49px,文字大小 14px
模板内容
<template>
<div id="app">
<div id="tab-bar">
<div class="tab-bar-item">首页</div>
<div class="tab-bar-item">分类</div>
<div class="tab-bar-item">购物车</div>
<div class="tab-bar-item">我的</div>
</div>
</div>
</template>
样式代码
@import "./assets/css/base.css";
#tab-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #f6f6f6;
box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.1);
}
.tab-bar-item {
flex: 1;
height: 49px;
text-align: center;
font-size: 14px;
}
效果如下图所示
5. TabBar 组件封装
创建 TabBar 组件: src/components/tabbar/TabBar.vue
将 APP.vue 中的 tabbar 代码抽离到 TabBar 组件中,TabBar 组件内容:
<template>
<div id="tab-bar">
<div class="tab-bar-item">首页</div>
<div class="tab-bar-item">分类</div>
<div class="tab-bar-item">购物车</div>
<div class="tab-bar-item">我的</div>
</div>
</template>
<script>
export default {
name: "TabBar",
};
</script>
<style scoped>
#tab-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #f6f6f6;
box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.1);
}
.tab-bar-item {
flex: 1;
height: 49px;
text-align: center;
font-size: 14px;
}
</style>
调整 TabBar 组件
<div id="tab-bar">
<div class="tab-bar-item">
<img src="@/assets/img/tabbar/home.png" />
<div>首页</div>
</div>
<div class="tab-bar-item">
<img src="@/assets/img/tabbar/category.png" />
<div>分类</div>
</div>
<div class="tab-bar-item">
<img src="@/assets/img/tabbar/cart.png" />
相关文章
- Springboot返回数据null转空字符串
- java记录项目的UV值与PV值
- 小米手机自拍图标-小米Civi 1S体验:这次,男生也能自拍美颜了
- java文件网络路径转MultipartFile
- 百度短信接口以及人脸实名认证接口
- 怎样使用摄像机-索尼高清摄像机使用方法简要介绍【教程】
- 小米手机自拍图标-小米Civi 1S vs 小米9:最强自拍手机的后置镜头咋样?
- spring框架
- hexo博客插入音视频
- java实用小功能案例
- Excel自动化办公
- Open-CV图像处理
- open-CV的初步学习
- 树莓派 usb-使用您的树莓派
- NLP和知识图谱-neo4j安装和使用
- adobe cs6 系列软件通用破解补丁-Adobe CC全系列注册机-Adobe CC通用破解补丁1.1 中文免费版
- 内存对齐
- 树莓派 usb-jetson nano opencv 打开 CSI摄像头_树莓派(四)——摄像头
- 算法错题本
- IO模式详解