vz-ui

主题

Tabs 标签栏 ​

基础用法 ​

html
<vz-tabs v-model:current="currentActive" :list="tabsList"></vz-tabs>
typescript
import { ref } from "vue";

const tabsList = ref([
  {
    value: "a",
    label: "标签一",
  },
  {
    value: "b",
    label: "标签二",
  },
  {
    value: "c",
    label: "标签三",
  },
]);

const currentActive = ref("a");

禁用标签 ​

html
<vz-tabs
  v-model:current="currentActiveDisabled"
  :list="tabsListDisabled"
  @change="handleChange"
  @click="handleClick"
></vz-tabs>
typescript
import { ref } from "vue";

const tabsListDisabled = ref([
  {
    value: "a",
    label: "标签一",
  },
  {
    value: "b",
    label: "标签二",
    disabled: true,
  },
  {
    value: "c",
    label: "标签三",
  },
]);

const currentActiveDisabled = ref("a");

function handleChange({ current, index }) {
  console.log("CHANGE", current, index);
}

function handleClick({ current, index }) {
  console.log("CLICK", current, index);
}

标签栏滚动 ​

html
<vz-tabs v-model:current="currentActiveScroll" :list="tabsListScroll"></vz-tabs>
typescript
import { ref } from "vue";

const tabsListScroll = ref([
  {
    value: "a",
    label: "标签一",
  },
  {
    value: "b",
    label: "标签二",
  },
  {
    value: "c",
    label: "标签三",
  },
  {
    value: "d",
    label: "标签四",
  },
  {
    value: "e",
    label: "标签五",
  },
  {
    value: "f",
    label: "标签六",
  },
  {
    value: "g",
    label: "标签七",
  },
  {
    value: "h",
    label: "标签八",
  },
  {
    value: "i",
    label: "标签九",
  },
  {
    value: "j",
    label: "标签十",
  },
]);

const currentActiveScroll = ref("a");

显示图标 ​

html
<vz-tabs v-model:current="currentActiveIcon" :list="tabsListIcon"></vz-tabs>
typescript
import { ref } from "vue";

const tabsListIcon = ref([
  {
    value: "a",
    label: "标签一",
    icon: "vz-icon-home",
  },
  {
    value: "b",
    label: "标签二",
    icon: "vz-icon-home",
  },
  {
    value: "c",
    label: "标签三",
    icon: "vz-icon-home",
  },
]);

const currentActiveIcon = ref("a");

显示徽章 ​

html
<vz-tabs v-model:current="currentActiveBadge" :list="tabsListBadge"></vz-tabs>
typescript
import { ref } from "vue";

const tabsListBadge = ref([
  {
    value: "a",
    label: "标签一",
    badge: "New",
  },
  {
    value: "b",
    label: "标签二",
    badge: 1,
  },
  {
    value: "c",
    label: "标签三",
    dot: true,
  },
]);

const currentActiveBadge = ref("a");

滑块宽度 ​

html
<vz-tabs v-model:current="currentActiveBarWidth" :list="tabsListBarWidth" bar-width="auto"></vz-tabs>
typescript
import { ref } from "vue";

const tabsListBarWidth = ref([
  {
    value: "a",
    label: "标签一",
  },
  {
    value: "b",
    label: "标签二",
  },
  {
    value: "c",
    label: "标签三零三",
  },
]);

const currentActiveBarWidth = ref("a");

等分布局 ​

html
<vz-tabs v-model:current="currentActiveEqual" :list="tabsListEqual" equal></vz-tabs>
typescript
import { ref } from "vue";

const tabsListEqual = ref([
  {
    value: "a",
    label: "标签一",
  },
  {
    value: "b",
    label: "标签二",
  },
  {
    value: "c",
    label: "标签三零三",
  },
]);

const currentActiveEqual = ref("a");

紧凑布局 ​

html
<vz-tabs v-model:current="currentActiveDense" :list="tabsListDense" dense></vz-tabs>
typescript
import { ref } from "vue";

const tabsListDense = ref([
  {
    value: "a",
    label: "标签一",
  },
  {
    value: "b",
    label: "标签二",
  },
  {
    value: "c",
    label: "标签三",
  },
]);

const currentActiveDense = ref("a");

自定义颜色 ​

html
<vz-tabs
  v-model:current="currentActiveColor"
  :list="tabsListColor"
  active-color="var(--vz-color-success)"
  inactive-color="var(--vz-text-color-thin)"
  bar-height="10rpx"
  bar-bg="linear-gradient(135deg, var(--vz-color-success), var(--vz-color-primary))"
  bar-radius="10rpx 0 10rpx 0"
></vz-tabs>
typescript
import { ref } from "vue";

const tabsListColor = ref([
  {
    value: "a",
    label: "标签一",
  },
  {
    value: "b",
    label: "标签二",
  },
  {
    value: "c",
    label: "标签三",
  },
]);

const currentActiveColor = ref("a");

Props ​

属性名说明类型默认值
v-model:current / current当前选中的标签（value / index）string / number0
list标签列表TabsList[]
active-color滑块和当前选中标签文字的颜色string--vz-color-primary
inactive-color未选中时标签文字的颜色stringinherit
equal等分布局。未出现滚动条，且文字字数不同时才可看到效果booleanfalse
dense紧凑布局。标签适应内容宽度booleanfalse
px标签栏 paddingstring / number-
height标签栏高度string / number--vz-height-base
bg标签栏背景string-
item-px标签 paddingstring / number16rpx
item-min-width标签最小宽度string / number20%
bar-width滑块宽度string / number60rpx
bar-height滑块高度string / number4rpx
bar-bg滑块背景string--vz-color-primary
bar-radius滑块圆角string--vz-height-base
i-class根节点样式类string-
i-style根节点样式Vue.CSSProperties-

list ​

属性名说明类型
label标签文案string
valuecurrent 绑定值string / number
disabled是否禁用boolean
icon图标string
badge徽章显示值number / string
dot徽章是否以圆点形式显示boolean
offset徽章偏移量 [水平, 垂直][number, number]

Events ​

事件名说明参数
change选中的标签改变时触发{ current, index }
click点击标签时触发{ current, index }

Slots ​

插槽名说明
default默认插槽

CSS ​

变量名说明默认值
--vz-tabs-pxprops.px-
--vz-tabs-heightprops.height--vz-height-base
--vz-tabs-bgprops.bg-
--vz-tabs-item-pxprops.itemPx16rpx
--vz-tabs-item-min-widthprops.itemMinWidth20%
--vz-tabs-active-colorprops.activeColor--vz-color-primary
--vz-tabs-inactive-colorprops.inactiveColorinherit
--vz-tabs-text-size文字大小inherit
--vz-tabs-disabled-color禁用时文字颜色--vz-text-color-disabled
--vz-tabs-icon-gap图标与文字之间的间距--vz-gap-base
--vz-tabs-bar-bottom滑块相对标签栏底部距离0
--vz-tabs-bar-widthprops.barWidth60rpx
--vz-tabs-bar-heightprops.barHeight4rpx
--vz-tabs-bar-bgprops.barBg--vz-color-primary
--vz-tabs-bar-radiusprops.barRadius--vz-height-base

SCSS ​

scss
$tabs: (
  "item-px": 16rpx,
  "item-min-width": 20%,
  "height": getCssVar("height", "base"),
  "active-color": getCssVar("color", "primary"),
  "disabled-color": getCssVar("text-color", "disabled"),
  "bar-bottom": 0,
  "bar-width": 60rpx,
  "bar-height": 4rpx,
  "icon-gap": getCssVar("gap", "base"),
);