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>