nutui/src/packages/__VUE/tabbar/demo.vue

<template>
  <div class="demo full">
    <h2>{{ translate('basic') }}</h2>

    <nut-tabbar @tab-switch="tabSwitch">
      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
    </nut-tabbar>
    <h2>{{ translate('byName') }}</h2>

    <nut-tabbar @tab-switch="tabSwitch" v-model:visible="activeName">
      <nut-tabbar-item name="home" :tab-title="translate('title')" icon="home"></nut-tabbar-item>
      <nut-tabbar-item name="category" :tab-title="translate('title')" icon="category"></nut-tabbar-item>
      <nut-tabbar-item name="find" :tab-title="translate('title')" icon="find"></nut-tabbar-item>
      <nut-tabbar-item name="cart" :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
      <nut-tabbar-item name="my" :tab-title="translate('title')" icon="my"></nut-tabbar-item>
    </nut-tabbar>
    <h2>{{ translate('customImg') }}</h2>

    <nut-tabbar @tab-switch="tabSwitch">
      <nut-tabbar-item
        :tab-title="translate('title')"
        img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
        activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
      ></nut-tabbar-item>
      <nut-tabbar-item
        :tab-title="translate('title')"
        img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
        activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
      ></nut-tabbar-item>
      <nut-tabbar-item
        :tab-title="translate('title')"
        img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
        activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
      ></nut-tabbar-item>
      <nut-tabbar-item
        :tab-title="translate('title')"
        img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
        activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
      ></nut-tabbar-item>
      <nut-tabbar-item
        :tab-title="translate('title')"
        img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
        activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
      ></nut-tabbar-item>
    </nut-tabbar>

    <h2>{{ translate('customCheck') }}</h2>
    <nut-tabbar v-model:visible="active" size="18px">
      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
    </nut-tabbar>

    <h2>{{ translate('showBadge') }}</h2>
    <nut-tabbar>
      <nut-tabbar-item :tab-title="translate('title')" icon="home" num="11"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="category" :dot="true"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="cart" num="110"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
    </nut-tabbar>

    <h2>{{ translate('customColor') }}</h2>
    <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
    </nut-tabbar>
    <h2>{{ translate('customQuantity') }}</h2>
    <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
    </nut-tabbar>
    <h2>{{ translate('fixedBottom') }}</h2>
    <nut-tabbar :bottom="true" :safeAreaInsetBottom="true">
      <nut-tabbar-item :tab-title="translate('title')" href="" icon="home"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" href="######" icon="my"></nut-tabbar-item>
    </nut-tabbar>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { createDemo, translate } = createComponent('tabbar');
import { useTranslate } from '@/sites/assets/util/useTranslate';
useTranslate({
  'zh-CN': {
    basic: '基本用法',
    byName: '通过名称匹配',
    customImg: '自定义图片',
    customCheck: '自定义选中',
    showBadge: '徽标提示',
    customColor: '自定义颜色',
    customQuantity: '自定义数量',
    fixedBottom: '固定底部',
    title: '标签'
  },
  'en-US': {
    basic: 'Basic Usage',
    byName: 'Match by name',
    customImg: 'Custom Img',
    customCheck: 'Custom Check',
    showBadge: 'Show Badge',
    customColor: 'Custom Color',
    customQuantity: 'Custom Quantity',
    fixedBottom: 'Fixed Bottom',
    title: 'tab'
  }
});
export default createDemo({
  props: {},
  setup() {
    const active = ref(2);
    const activeName = ref('category');
    function tabSwitch(item: Record<string, unknown>, index: number) {
      console.log(item, index);
    }
    return {
      active,
      activeName,
      tabSwitch,
      translate
    };
  }
});
</script>

<style lang="scss" scoped></style>