Vue学习笔记之16-tarbar地开发思路

页面下方有一个单独的TabBar组件, 如何封装

自定义TabBar组件, 在App组件中使用
让TabBar处在底部, 并且在 .vue文件中的style标签中设置相关的样式

页面中会有很多公共的样式, 我们如何处理公共样式呢?

在项目的assets文件夹中创建一个名为css的文件夹, 在该文件夹中创建一个名为 base.css 的文件
在base.css文件中写入公共的样式
在 .vue组件文件中的 style标签中使用 @import url 来引入公共的样式

<!-- 这个是 .vue组件中的代码 -->
<style>
/* 在style标签中使用@import url 来引入样式 */
@import "./assets/css/base.css";
</style>

为了组件的可复用性, 所以要将组件尽可能地分离

将上面写好的底部TabBar组件
从App.vue中抽取出来, 放到components文件夹中新建地tabbar文件夹中新建的TabBar.vue文件中
再将TabBar.vue中的TabBarItem抽取出来, 放到components/tabbar 中新建的TabBarItem.vue文件中

TabBar中显示的内容要由外界决定

所以TabBar.vue要定义插槽
flex布局平分TabBar

自定义的TabBarItem 可以传入图片和文字

所以TabBarItem 要定义两个具名插槽: 一个用于插图片, 一个用于插文字
给两个插槽外层包装div, 用于设置样式
最后一层一层地在App.vue 中引用组件并且填充插槽, 实现底部TabBar的效果

记住一点就很好理解了, slot插槽是让别人来插的

<!-- 这里是TabBar.vue的代码 -->
<template><div id="tabbar"><!-- 定义一个插槽, 用于在App.vue中填充 --><slot></slot></div>
</template>

<!-- 这里是TabBarItem.vue的代码 -->
<template><div class="flex-item"><!-- 定义了两个具名插槽, 用于在App.vue中填充 --><slot name="item-icon"></slot><slot name="item-text"></slot></div>
</template>

<template><div id="app"><!-- tar-bar标签里面的内容就是用于填充TabBar.vue中的插槽的 --><tar-bar><!-- tar-bar-item标签里面的内容就是用于填充TabBarItem.vue中的插槽的 --><tar-bar-item><img slot="item-icon" src="./assets/img/tabbar/home.svg" alt="" /><div slot="item-text">首页</div></tar-bar-item>    </tar-bar></div>
</template>

我们可以看到现在的底部tabbar只有一张图片和一个标题

我们需要传入高亮的图片, 让活跃的tabbar-item 变高亮
定义另外一个插槽, 插入active-icon的数据
定义一个变量, 通过v-show来决定是否显示对应的icon
注意: 如果使用v-show的话, 要将插槽嵌套在一个div中, 将v-show定义在这个div中, 通过div来决定是否显示插槽
- 因为插槽的本质就是让填充的标签取代
- 如果将v-show直接定义在插槽中的话, 填充的标签会将v-show这个属性覆盖, 达不到想要的效果
- 所以建议如果要给插槽添加属性的话, 就要用一个div包裹插槽, 将属性定义在div中, 通过div来改变插槽

<!-- 这是TabBarItem中的代码 -->
<template><div class="flex-item"><!-- 通过用一个div包裹slot插槽的做法来保证, 添加的属性可以生效 --><div v-show="isActive"><slot name="item-icon"></slot></div><div v-show="!isActive"><slot name="item-icon-active"></slot></div><div :class="{ active: !isActive }"><slot name="item-text"></slot></div></div>
</template><script>
export default {name: "TabBarItem",data() {return {isActive: false,};},
};
</script>

TabBar实现路由思路

安装路由: npm install vue-router --save (运行时依赖安装)
完成router/index.js 的内容, 创建对应的组件
- 不要将所有的组件都放在components文件夹中哪个, 这个文件夹只用来放置公共的组件
- 在项目根目录中创建文件夹 views 这个文件夹就是用来放置各个页面的组件间
- 在这个views文件夹中再创建以下文件夹
  - home文件夹
  - category文件夹
  - cart文件夹
  - profile文件夹
- 这几个文件夹分别放置各自页面中的所有组件, 文件夹中也可以创建其他文件夹
在index.js中编写映射关系
在main.js中注册router
在App.vue中加入router-view 组件

让TabBar中的按钮根据当前活动的路由转换颜色

点击TabBar的item跳转到对应的路由, 监听item的点击, 通过this.$router.replace() 替换路由路径
通过this.$route.path.indexOf(this.path) !== -1 来判断当前路由是否为active, 如果是则展示active的icon
动态计算active的样式
- 封装新的计算属性: this.isActive ? {color: “red”} : {}

给路径起别名

如果我们的项目文件很多的话, 写路径的时候很不方便
所以我们可以给一些常用的路径起别名, 方便使用
来到项目根目录中的 build/webpack.base.config.js 文件
示例: 看下列代码

module.exports = {// ...resolve: {extensions: ['.js', '.vue', '.json'],// 在这里可以给路径起别名// 注意: 在vue-cli>=3 中才可以在给路径起别名的时候引用其他的别名, 在vue-cli2 中要写入完整的路径alias: {'@': resolve('src'),'assets' : resolve('src/assets'),'components' : resolve('src/components'),'views' : resolve('src/views')}}
}

路径别名的使用
- 在JavaScript代码中直接写别名即可
- 如果在HTML代码中, 要在别名前加符号 “~”

<template><div><!-- 在HTML代码中,在别名前加 "~" , 如这个img标签中的src属性所示 --><img slot="item-icon" src="~assets/img/tabbar/home.svg" alt="" /><img slot="item-icon" src="~assets/img/tabbar/home_active.svg" alt="" /><div>
</template>
<script>
// 在JS代码中可以直接使用别名
import TarBar from "components/tabbar/TabBar.vue";
import TarBarItem from "components/tabbar/TabBarItem.vue";export default {name: "MainTabBar",components: { TarBar, TarBarItem },
};
</script>

Vue学习笔记之16-tarbar地开发思路相关推荐

Vue学习笔记（二） —— 组件开发
简介在了解了Vue语法的基础知识和常用特性之后,在进行正式的开发之前,非常有必要的对组件化的相关知识进行了解.本文就是为介绍组件的相关知识点的. 1.组件化开发思想现实生活中的组件化思想主要是:标 ...
Vue学习笔记之10-组件化开发
什么是组件化将一个复杂的问题, 拆解为很多个可以处理的小问题, 再将其放到整体当中,大问题就可以迎刃而解其实就是动态规划问题组件化也是类似的思想如果将一个页面中所有的处理逻辑全部放在一起,处 ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
Vue学习笔记（四）—— 前端路由
介绍本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
Vue学习笔记（三） —— 前后端交互
简介本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue 新手学习笔记：vue-element-admin 之入门开发教程（v4.0.0 之前）
说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架框架布了都没看过干就完事,不过 ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
vue 学习笔记第无弹
1. 在 webpack 中配置 .vue 组件页面的解析运行cnpm i vue -S将 vue 安装为运行依赖: 运行cnpm i vue-loader vue-template-compile ...

Vue学习笔记之16-tarbar地开发思路

页面下方有一个单独的TabBar组件, 如何封装

页面中会有很多公共的样式, 我们如何处理公共样式呢?

为了组件的可复用性, 所以要将组件尽可能地分离

TabBar中显示的内容要由外界决定

自定义的TabBarItem 可以传入图片和文字

记住一点就很好理解了, slot插槽是让别人来插的

我们可以看到现在的底部tabbar只有一张图片和一个标题

TabBar实现路由思路

让TabBar中的按钮根据当前活动的路由转换颜色

给路径起别名

Vue学习笔记之16-tarbar地开发思路相关推荐

最新文章

热门文章