Vue 基于 ant-design-vue 封装 TabBar

最新推荐文章于 2024-02-01 14:28:33 发布
最新推荐文章于 2024-02-01 14:28:33 发布
阅读量1.2k 收藏 2
点赞数
文章标签： vue js 封装 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kxh166/article/details/111943691
版权

Vue 基于 ant-design-vue 封装 TabBar

目录

BaseTabBar目录

BaseTabBarItem

<template>
  <a-badge
    v-if="true"
    :class="[
      isCenter
        ? 'base-tabbar-center-item-badge-wrap'
        : 'base-tabbar-item-badge-wrap',
      'animate__animated',
      isActive ? 'animate__zoomIn' : ''
    ]"
    :style="{
      '--animate-duration': '.35s',
      'animation-fill-mode': 'forwards'
    }"
    :color="badge.color"
    :count="badge.count"
    :overflow-count="badge.overflowCount"
    :dot="badge.dot"
    @click="clickTabBar"
  >
    <div
      :class="[
        isCenter ? 'base-tabbar-center-item-wrap' : 'base-tabbar-item-wrap',
        isActive
          ? 'base-tabbar-item-wrap-active'
          : 'base-tabbar-item-wrap-unactive'
      ]"
    >
      <div
        class="base-tabbar-item-icon"
        :style="
          isCenter
            ? {
                'background-color': activeColor,
                'border-radius':
                  !item.centerShape || item.centerShape == 'circle'
                    ? '50%'
                    : '15%'
              }
            : {}
        "
      >
        <slot name="icon"
          ><icon
            :icon="item.icon"
            :color="isActive && !isCenter ? activeColor : color"
          ></icon
        ></slot>
      </div>
      <div
        :class="[
          'base-tabbar-item-text',
          'animate__animated',
          !isActive && showTextOnActive
            ? 'animate__zoomOut base-tabbar-item-text-unactive'
            : ''
        ]"
      >
        <slot name="text"
          ><span
            v-text="item.text"
            :style="{ color: isActive ? activeColor : color }"
          ></span
        ></slot>
      </div>
    </div>
  </a-badge>
</template>

<script>
function isString(string) {
  return typeof string === "string";
}

function pushRoute(route) {
  // Vue刷新页面的三种方式
  // https://blog.csdn.net/weixin_43885417/article/details/91310674
  if (!route) {
    return;
  }
  let currentRoutePath = router.currentRoute.path;
  if (
    route && router.currentRoute && isString(route)
      ? currentRoutePath == route
      : currentRoutePath == route.path
  ) {
    return;
  }
  router.push(route);
}
	
export default {
  name: "BaseTabBarItem",
  data() {
    return {};
  },
  props: {
    // 中间是否隐藏 是则不是中间的样式
    centerVisible: {
      type: [Boolean],
      default: true,
      required: false
    },
    // 激活时才显示文字
    showTextOnActive: {
      type: [Boolean],
      default: false,
      required: false
    },
    color: {
      type: [String],
      default: "",
      required: false
    },
    activeColor: {
      type: [String],
      default: "",
      required: false
    },
    itemKey: {
      type: [String, Number],
      default: "",
      required: false
    },
    activeItemKey: {
      type: [String, Number],
      default: "",
      required: false
    },
    item: {
      type: [Object],
      default() {
        //   index: 1,
        //   icon: "Antd_home",
        //   text: "首页",
        //   route: { path: "/pvtnote/home" },
        //   badge: JSON.stringify({ count: 0 }),
        //   isCenter: true,
        //   // circle square
        //   centerShape: "circle"
        return {};
      },
      required: false
    }
  },
  computed: {
    badge() {
      let badge = this.item.badge;
      return badge
        ? isString(badge)
          ? JSON.parse(badge)
          : badge
        : { count: 0 };
    },
    isActive() {
      let activeItemKey = this.activeItemKey;
      return activeItemKey && activeItemKey == this.itemKey;
    },
    isCenter() {
      return this.item.isCenter && this.centerVisible;
    }
  },
  methods: {
    pushRoute,
    clickTabBar() {
      this.$emit("click", this.itemKey);
      this.$emit("change", this.itemKey);
      let route = this.item.route;
      if (route) {
        this.pushRoute(this.item.route);
      }
    }
  }
};
</script>

<style>
.base-tabbar-item-badge-wrap {
  cursor: pointer;
  width: 3.3rem;
  padding: 0 0 0.1rem;
}
.base-tabbar-item-badge-wrap sup,
.base-tabbar-center-item-badge-wrap sup {
  animation: none;
  position: absolute;
}

/* ant-design-vue 修改 badge 样式 避免徽章在底部导航栏突出显示 */
.base-tabbar-item-badge-wrap .ant-badge-count,
.base-tabbar-item-badge-wrap .ant-badge-dot,
.base-tabbar-item-badge-wrap .ant-badge .ant-scroll-number-custom-component {
  transform: translate(30%, 10%);
}

.base-tabbar-item-wrap,
.base-tabbar-center-item-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.base-tabbar-center-item-wrap .icon,
.base-tabbar-item-wrap .icon {
  margin: 0.3rem 0;
}

.base-tabbar-center-item-wrap .icon,
.base-tabbar-center-item-wrap .icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.base-tabbar-item-wrap .icon,
.base-tabbar-item-wrap .icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.base-tabbar-center-item-wrap .base-tabbar-item-text,
.base-tabbar-item-wrap .base-tabbar-item-text {
  font-size: 0.5rem;
  color: black;
}

.base-tabbar-center-item-wrap .base-tabbar-item-text {
  font-size: 0.75rem;
  margin-top: 0.45rem;
}

.base-tabbar-center-item-wrap .base-tabbar-item-text-unactive,
.base-tabbar-item-wrap .base-tabbar-item-text-unactive {
  display: none;
}

/* Center */
.base-tabbar-center-item-badge-wrap {
  cursor: pointer;
  width: 3.5rem;
  position: relative;
  top: -1.3rem;
}

.base-tabbar-center-item-wrap .base-tabbar-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.7rem;
  height: 3.7rem;
  /* border-radius: 20%; */
  border: 0.5rem solid #ffffff;
  box-shadow: 0 0 0.35rem 0 #e2e1e1;
  box-shadow: 0 0 6px rgba(180, 160, 120, 0.8);
}
</style>

BaseTabBar

<template>
  <div class="base-tabbar-wrap" :style="{ bottom }">
    <slot name="baseTabBarItem">
      <base-tab-bar-item
        v-for="(baseTabBar, index) in baseTabBars"
        :item="baseTabBar"
        :key="index"
        :item-key="index"
        :active-item-key="realActiveItemKey"
        :centerVisible="centerVisible"
        @click="clickTabBar"
        @change="changeTabBar(index)"
        v-bind="$props"
      ></base-tab-bar-item>
    </slot>
  </div>
</template>

<script>
import BaseTabBarItem from "./BaseTabBarItem";

export default {
  name: "BaseTabBar",
  components: { BaseTabBarItem },
  data() {
    return {
      inActiveItemKey: ""
    };
  },
  props: {
    centerVisible: {
      type: [Boolean],
      default: true,
      required: false
    },
    visible: {
      type: [Boolean],
      default: true,
      required: false
    },
    showTextOnActive: {
      type: [Boolean],
      default: false,
      required: false
    },
    color: {
      type: [String],
      default: "",
      required: false
    },
    activeColor: {
      type: [String],
      default: "",
      required: false
    },
    activeItemKey: {
      type: [String, Number],
      default: "",
      required: false
    },
    baseTabBars: {
      type: [Array],
      default: function() {
        return [
          {
            icon: "Antd_home",
            text: "首页",
            route: {},
            badge: JSON.stringify({
              color: "red",
              count: 12,
              overflowCount: 99,
              dot: false
            })
          }
        ];
      },
      required: false
    }
  },
  computed: {
    realActiveItemKey() {
      let activeItemKey = this.activeItemKey;
      let isNotNull = activeItemKey | (activeItemKey == 0);
      return isNotNull ? activeItemKey : this.inActiveItemKey;
    },
    bottom() {
      return this.visible ? 0 : "-7.25%";
    }
  },
  methods: {
    changeTabBar(key) {
      this.inActiveItemKey = key;
      this.$emit("change", key);
    },
    clickTabBar() {
      this.$emit("click");
    }
  },
  mounted() {
    let activeItemKey = this.activeItemKey;
    let isNotNull = activeItemKey | (activeItemKey == 0);
    return isNotNull ? activeItemKey : this.inActiveItemKey;
  }
};
</script>

<style>
.base-tabbar-wrap {
  height: 7.25%;
  max-height: 7.25%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  position: fixed;
  width: 100%;
  bottom: 0;
  transition: bottom 0.25s;
}
</style>

API

BaseTabBarItem

参数说明类型默认值
centerVisible是否中间隐藏 是则不是中间的样式 用于底部工具栏出现时隐藏中间样式Booleanfalse
showTextOnActive是否激活时才显示文字Booleanfalse
color文字颜色String
activeColor激活时文字颜色String
itemKey项键String，Number
activeItemKey激活项键 用于激活时显示String，Number
icon图标组件 - 图标组件需要自己实现Slot
text文字Slot
item项Object
事件
事件名称说明类型默认值
click点击回调function(itemKey){}
change改变回调function(itemKey){}
Item
参数说明类型默认值
icon图标 - 这里是自己实现的图标组件所需参数String
text文字String
route路由Object，String
badge徽章Object，String
isCenter是否中间样式Boolean
centerShape中间形状Stringcircle，square

BaseTabBar

参数说明类型默认值
centerVisible是否中间隐藏 是则不是中间的样式 用于底部工具栏出现时隐藏中间样式Booleantrue
showTextOnActive是否激活时才显示文字Booleanfalse
visible是否隐藏 是则不显示Booleantrue
color文字颜色String
activeColor激活时文字颜色String
activeItemKey激活项键 用于激活时显示String，Number
baseTabBarstab项数组Array
事件
事件名称说明类型默认值
click点击回调function(){}
change改变回调function(itemKey){}

示例

BaseTabBar 中间样式
BaseTabBar 普通样式

kxh166
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现消息badge 标记_Badge组件_element-ui源码分析笔记 - SegmentFault 思否
weixin_39727402的博客
12-30 1650
Badge组件主要用于数字或状态的标记，对于消息类的提醒功能，使用这组件还是很常见的。具体显示效果如下图：不管组件复杂还是简单，编码实现这个组件的都不是源码分析目的。源码分析，在于通过一步步的实现这个功能，在这个过程中，看自己能学到什么，发现哪些问题。然后通过这些问题，去扩展知识点，最终完成 实践 - 思考 - 扩展 这三步。1.实现基本功能，按钮右上角显示消息第一步的实现很简单，具体的可以看示例...
ant-design-vue 中标签页tab上额外的元素(tabBarExtraContent) , tab选项卡头增加文字
pipizhou16的博客
06-24 5455
在ant-design-vue的标签页上，在tab选项卡头增加文字。
5.3-badge组件
qq_63202674的博客
05-03 821
badge组件 用途：应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 不支持 不支持 子组件 支持单个子组件。 说明 仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。 属性 除支持通用属性外，还支持如下属性： .
在vue框架下使用badge标签位置无法默认样式
weixin_42423062的博客
03-19 5388
在vue框架下使用badge标签 今天突然遇到一个问题，在页面图标设计提示信息条数的小徽章标签，放在图标页不会显示在又上角，在文档默认情况下是右上角。但是实际操作不是。 问题解决 重新设计badge的css样式，把下面css样式代码写入可解决问题。 .vux-badge{ position: absolute; } ...
antdv tabs标题栏tabbar顶部吸附固定
qq_44367273的博客
12-24 4283
antdv tabs标签页组件tabBar顶部吸附，方便在抽屉里使用tabs组件时且tab内容过长时切页
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
基于vue Ant-Design 的表单设计器，快速开发.zip
05-04
vue基于vue Ant-Design 的表单设计器，快速开发.zip 基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-...
基于 vue、ant-design-vue 的自定义Antdv 工作流组件
06-26
本项目“基于vue、ant-design-vue的自定义Antdv工作流组件”就是一个这样的解决方案，旨在提供一个高度可定制、功能丰富的Web工作流平台。 首先，我们要理解Vue.js，它是一个轻量级的前端框架，以其易学易用、高效...
基于vue+ant-design-vue创建后台管理系统模板.zip
最新发布
05-08
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板，使用json-server做数据mock。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行 运行数据mock服务 // enter server directory cd ...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
antd-design 中的 Descriptions组件修改label的默认样式——插槽的使用
m0_54883970的博客
02-26 1993
最近我的很多同事都在用antd design，我这边还是倾向于用目前熟悉的 elementUi。 同事那边遇到一个需求，需要改变antd design中的description组件中部分label的样式。 比如下方中红线标注的客户地址的样式。 我一开始以为这个是table表格写的。后来一问才知道是antd design中的description组件。 同事用下面的方法动态绑定class，发现并没有什么用…… antd design与elementUI在很多方面都是类似的。我想到elementUi中的ta
如何优雅地修改antd组件内部样式
广兰路地铁的博客
03-26 4687
前言 在前端领域，antd无疑是react生态下使用最为广泛的UI类库，antd对常见的表单类输入组件进行了高度封装，带来开箱即用的便利性，但是与此同时，对其样式的控制也愈发困难。大家应该都有过被产品或者交互逼着修改antd样式的经历。次数多了，很难再通过"这是开源的控件，样式不好修改"搪塞过去。那么问题来了，如何优雅第修改antd的样式? 具体方法 经过探索，大致有以下几种思路： 直接添加类名或者style 这个是最常规的方法，能够直接作用于当前的元素，但是有的时候我们会发现antd的组件最终在dom层
antd 修改table滚动条样式
weixin_45346457的博客
11-09 4068
引用Table的组件的css文件中加入下面的样式： // table scrollbar .ant-table-body { &::-webkit-scrollbar { height: 5px; } &::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0
记录一次使用ant design 中 ConfigProvider来修改样式导致样式改变的问题（Tabs嵌套Tabs）
【爱打盹的喵】的专栏
02-01 713
如代码所示，外层Tabs中又包含了一个内层的Tab，因此内层的Tabs样式也会被 ConfigProvider 所影响，导致内层Tab样式跟外层Tab样式一样。要想只改变外部Tabs样式，而内部样式不变的方法，我只知道，通过ConfigProvider还原内部Tabs样式。在修改外层tabs样式时，使用到了antd5中的ConfigProvider，通过token进行样式修改。
如何修改antd的样式
zqz123321_的博客
11-29 2998
如何修改antd的样式
修改antd中选择器修改不了的样式
蓝枫秋千的踩坑记录
02-24 2435
据官网的API进行修改 直接添加样式进行修改 重点: 如果不能直接修改样式的组件，该怎么修改它的默认样式呢？ 解决方案: 通过修改antd全局样式 F12打开控制台的审查元素,找到需要修改的元素 如图中箭头的选择器是antd的,我们的项目中如果直接是修改不了的 通过global关键字来全局修改即可生效 :global(.ant-tabs .ant-tabs-left-bar .ant...
Ant-design 源码分析之数据展示（十二）Tabs
qq_37588125的博客
12-26 2564
Ant-design 源码分析之数据展示（十二）Tabs 2021SC@SDUSC 一、组件结构 1、ant代码结构
Badge徽标数
qq_43796489的博客
06-11 984
TodoList.js // ------------------外部资源 import React, { Component } from 'react'; import { Badge } from 'antd'; import { NotificationOutlined } from '@ant-design/icons'; // ------------------内部私有 import './App.css' class TodoList extends Component { re
vue 根据数字显示状态
一介布衣的博客
05-19 2076
<s-table size="default" ref="table" rowKey="id" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns" :data="loadData" > <span slot="status" slot-scope="text"> <a-badge :statu...
vue 删除ant-design-vue
08-25
- *2* [ant-design-vue-pro-learn:ant-design-vue-pro开源项目学习代码](https://download.csdn.net/download/weixin_42116794/16066195)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值