程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

Vue Tabbar 的封装

发布于2021-06-07 21:32     阅读(1356)     评论(0)     点赞(12)     收藏(4)


Tabbar 的封装


1. 通过脚手架创建项目

  • 创建项目

    vue init webpack tabbar
    
  • 选择配置

    ? Project name vuecli2test # 会根据这个名称创建一个文件夹,存放之后项目的内容该名称也会作为默认的项目名称,但是不能包含大写字母等
    ? Project description description # 项目名称 , 不能有大写字母
    ? Author renyi <2822930767@qq.com>	# 作者信息
    ? Vue build standalone	# 后面介绍
    ? Install vue-router? Yes	# 路由
    ? Use ESLint to lint your code? Yes	# ESLint 代码规范检测, 根据自己需求
    ? Pick an ESLint preset Standard	
    ? Set up unit tests No	# 单元测试
    ? Setup e2e tests with Nightwatch? No	# e2e测试,end to end安装Nightwatch,是一个利用selenium或 webdrivers或phantomis等进行自动化测试的框架
    ? Should we run `npm install` for you after the project has been created? (recommended) npm # 选择npm 或 yarn
    

2. 项目搭建

  • 以下是项目框架 , 我们先将底部的导航抽取成一个 TaBra 组件 , 再将 其中的 4 个部分再抽取成一个 组件 Tabra-Item

  • 1. 创建 TaBra.vue

    • 创建TaBra.vue 后 , 在其模板中准备一个插槽 , 用于抽取 Tabra-Item

    <template>
      <div id="tab-bar">
        <!--这里的插槽是给Tabra-Iteam准备的-->
        <slot></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "TabBar"
      }
    </script>
    
    <style scoped>
      #tab-bar{
        display: flex;
        background-color: #f6f6f6;
    
        position: fixed;
        left: 0px;
        right: 0px;
        bottom: 0px;
    
        box-shadow: 0px -1px 1px rgba(144, 147, 145, 0.2);
      }
    </style>
    
  • 2. 抽取Tabra-Item

    在组件中提供3个插槽 , 一个是未获取焦点的图片 , 一个是获取焦点后的图片 , 还有一个是文本

    <template>
      <div class="tab-bar-item">
          <slot name="item-icon"></slot>
          <slot name="item-icon-active"></slot>
          <slot name="item-text"></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "TabBarItem",
      }
    </script>
    
    <style scoped>
    
      .tab-bar-item{
        flex: 1;
        text-align: center;
        height: 49px;
      }
    
      .tab-bar-item img{
        height: 24px;
        width: 24px;
      }
    
      .activeText{
        color: red;
      }
    
    </style>
    
    
  • 3. 在Vue.app中引用

    使用tab-bar-item组件 , 通过父传子将 path 和 activetext 传递到子组件 , 因为此处是固定的 , 不是一个变量 , 所以可以不动态绑定

    path: 跳转的路径

    activeText: Tabra-Item 选中后的 text 颜色

    <Tab-bar-item> 传递2个图片 , 一个是选中的 , 一个是未选中的 , 可以通过具名插槽在 Tabra-Item 组件中通过 v-if 来判断显示哪一个

    <template>
      <div id="app">
        <router-view></router-view>
        <!--使用tab-bar组件-->
        <tab-bar>
          <!--使用tab-bar-item组件 , 通过父传子将 path 和 activetext 传递到子组件 , 因为此处是固定的 , 不是一个变量 , 所以可以不动态绑定
    		path: 跳转的路径
    		activeText: Tabra-Item 选中后的 text 颜色
    		-->
          <tab-bar-item class="tab-bar-item" path="/home" activeText="red">
            <!--传递2个图片 , 一个是选中的 , 一个是未选中的 , 可以通过具名插槽在Tabra-Item中通过v-if来判断显示哪一个-->
            <img class="" slot="item-icon" src="./assets/img/tabbar/home.svg"/>
            <img class="" slot="item-icon-active" src="./assets/img/tabbar/home_active.svg"/>
            <div slot="item-text">首页</div>
          </tab-bar-item>
          <tab-bar-item class="tab-bar-item" path="/category" activeText="red">
            <img slot="item-icon" src="./assets/img/tabbar/category.svg"/>
            <img slot="item-icon-active" src="./assets/img/tabbar/category_active.svg"/>
            <div slot="item-text">分类</div>
          </tab-bar-item>
          <tab-bar-item class="tab-bar-item" path="/cart" activeText="red">
            <img slot="item-icon" src="./assets/img/tabbar/cart.svg"/>
            <img slot="item-icon-active" src="./assets/img/tabbar/cart_active.svg"/>
            <div slot="item-text">购物车</div>
          </tab-bar-item>
          <tab-bar-item class="tab-bar-item" path="/profile" activeText="red">
            <img slot="item-icon" src="./assets/img/tabbar/profile.svg"/>
            <img slot="item-icon-active" src="./assets/img/tabbar/profile_active.svg"/>
            <div slot="item-text">我的</div>
          </tab-bar-item>
        </tab-bar>
      </div>
    </template>
    
    <script>
    
    // 导入组件
    import TabBar from './components/tabbar/TabBar'
    import TabBarItem from './components/tabbar/TabBarItem'
    
    export default {
      name: 'App',
      components: { //注册组件
        TabBar,
        TabBarItem
      }
    }
    </script>
    
    <style>
    
    </style>
    
    
  • 4. 我们创建4个对应 Tabra-Item 的组件

    创建4个组件 , 分别是home category cart profile , 通过路由进行跳转 , 既然需要跳转 , 那么就需要监听事件 , 我们在 Tabra-Item 中进行监听

    我们通过 props 属性获取第3步所传入的 path 属性, 通过调用 this.$router.push(this.path); 进行跳转

    我们通过 isActive 函数来判断当前 Tabra-Item 是否处于选中状态 , 如果处于选中状态 , 我们就显示选中的图片也就是显示具名插槽 item-icon-active

    通过 setActiveText 函数设置 文本颜色 我们在第3步时传入了一个文本颜色 activeText 我们可以用 :style="setActiveText" 动态绑定 style 的方式从 setActiveText 函数获取到 css 样式

    <template>
      <div class="tab-bar-item" @click="ItemClick">
        <div v-if="!isActive">
          <slot name="item-icon"></slot>
        </div>
        <div v-else>
          <slot name="item-icon-active"></slot>
        </div>
         <div :style="setActiveText">
           <slot name="item-text"></slot>
         </div>
      </div>
    </template>
    
    <script>
      export default {
        name: "TabBarItem",
        props: {
          path : String,
          activeText:{
            type: String,
            default(){
              return "black"
            }
          }
        },
        data(){
          return {
            active: true
          }
        },
        computed: {
          isActive() {
            // 将route中的 path 和当前的path进行匹配
            return this.$route.path.indexOf(this.path) != -1
          },
          setActiveText() {
            // 如果处于激活状态 返回 color: this.activeText
            return this.isActive ? {color: this.activeText} : {color: "black"}
          }
        },
        methods: {
          ItemClick() {
            this.$router.push(this.path);
          }
        }
      }
    </script>
    
    <style scoped>
    
      .tab-bar-item{
        flex: 1;
        text-align: center;
        height: 49px;
      }
    
      .tab-bar-item img{
        height: 24px;
        width: 24px;
      }
    
      .activeText{
        color: red;
      }
    
    </style>
    
    


所属网站分类: 技术文章 > 博客

作者:你看我迷人不

链接:http://www.phpheidong.com/blog/article/89928/7457676972290e2aa585/

来源:php黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)