Vant的Tabbar标签栏引入自定义图标方式

要在Vant的Tabbar标签栏中引入自定义图标，必须经过以下步骤：

1. 准备图标资源

首先需要准备自己所需要使用的图标的资源。可以使用现有的iconfont字体图标库，也可以将自己的图标转换成字体图标库。请注意，如果使用的是自己的图标，请确保它们的尺寸是一致的。可以使用在线工具将图标转换成相应的字体格式，例如icomoon。

2. 安装Vant

安装Vant，可以使用npm或yarn来安装。

npm install vant -S

3. 引入Vant组件

在需要使用Tabbar标签栏的页面中引入Tabbar组件。

<template>
  <div>
    <van-tabs v-model="active">
      <van-tab v-for="(item, index) in tabs" :key="index" :dot="item.dot" :badge="item.badge" :name="item.name">
        <template #icon>
          <svg-icon :icon-class="item.icon" />
        </template>
        {{ item.title }}
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import SvgIcon from '@/components/SvgIcon';

export default {
  name: 'CustomTabbar',
  components: {
    VanTab: Tab,
    VanTabs: Tabs,
    SvgIcon
  },
  data() {
    return {
      active: 'home',
      tabs: [
        {
          name: 'home',
          title: '首页',
          icon: 'home-o'
        },
        {
          name: 'cart',
          title: '购物车',
          icon: 'cart-o',
          dot: true
        },
        {
          name: 'user',
          title: '我的',
          icon: 'user-o',
          badge: 5
        }
      ]
    };
  }
};
</script>

这里我们同时引入了自己的SvgIcon组件，用于处理自定义图标。

4. 写CSS

首先在public/index.html中引入字体图标库css文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <link href="//at.alicdn.com/t/font_xxxxxxx.css" rel="stylesheet">
    <!-- ... -->
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后在App.vue中添加对应的样式，例如：

<style scoped>
.vant-tabbar__icon svg {
  height: 22px;
  width: 22px;
}

.vant-tabbar__text {
  font-size: 13px;
}

.vant-tab {
  color: #666;
}

.vant-tab--active {
  color: #f56c6c;
}
</style>

5. 编写SvgIcon组件

我们的自定义图标都是以SVG格式存在，第一步需要将SVG转成Vue组件格式，因此需要在项目中定义一个可以接收图标名称并输出Vue组件的组件。

<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="`#${iconName}`" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      required: true,
      type: String
    }
  },
  computed: {
    iconName() {
      return `icon-${this.iconClass}`;
    }
  }
};
</script>

<style scoped>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

这个组件接收一个iconClass属性，表示图标名称。组件内部使用use标签引用了该名称对应的SVG，并将其渲染出来。

6. 使用自定义图标

在Tab组件标签内使用自定义的图标：

<template>
  <van-tabs v-model="active">
    <van-tab v-for="(item, index) in tabs" :key="index" :dot="item.dot" :badge="item.badge" :name="item.name">
      <template #icon>
        <svg-icon :icon-class="item.icon" />
      </template>
      {{ item.title }}
    </van-tab>
  </van-tabs>
</template>

<script>
import { Tab, Tabs } from 'vant';
import SvgIcon from '@/components/SvgIcon';

export default {
  name: 'CustomTabbar',
  components: {
    VanTab: Tab,
    VanTabs: Tabs,
    SvgIcon
  },
  data() {
    return {
      active: 'home',
      tabs: [
        {
          name: 'home',
          title: '首页',
          icon: 'home-o'
        },
        {
          name: 'cart',
          title: '购物车',
          icon: 'cart-o',
          dot: true
        },
        {
          name: 'user',
          title: '我的',
          icon: 'user-o',
          badge: 5
        }
      ]
    };
  }
};
</script>

这里我们在Tab组件的icon插槽内使用自己编写的SvgIcon组件，并传入该图标对应的类名，例如home-o。

到这里，自定义图标已经成功引入到了Vant的Tabbar标签栏组件中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vant的Tabbar标签栏引入自定义图标方式 - Python技术站