E-DataV

Appearance

On this page

Tab ​

信息

此Tab组件与ElementUi及AntDesign的Tab组件不同，不包含Panel切换，它类似于RadioButtonGroup，至于未来是否会增加panel切换，暂时未定。大屏中经常需要使用到Tab，比如时间切换，地区切换等，此组件可满足大部分需求

基本示例 ​

点击查看代码
vue
<template>
  <div id="app">
    <e-tab style="width:500px;height:160px;" :columns="3" @change="handleChange">
        <e-tab-item value="tab1">
            Tab1
        </e-tab-item>
        <e-tab-item value="tab2">
            Tab2
        </e-tab-item>
        <e-tab-item value="tab3">
            Tab3
        </e-tab-item>
    </e-tab>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>
vue
<template>
    <e-tab style="width:500px;height: 160px;" :items="items" :columns="3" @change="handleClick"></e-tab>
</template>
<script setup>
import { ETab } from 'e-datav-vue3';

const items = [
    { label: 'Tab1', value: 'tab1' },
    { label: 'Tab2', value: 'tab2' },
    { label: 'Tab3', value: 'tab3' }
]

const handleClick = (value) => {
    console.log(value);
}
</script>
js
import { Tab } from 'e-datav-react';

function Page() {
  const items = [
    { label: 'Tab1', value: 'tab1' },
    { label: 'Tab2', value: 'tab2' },
    { label: 'Tab3', value: 'tab3' }
  ]

  const handleChange = (value) => {
    console.log(value);
  }

  return (
    <div style="height:160px;width:500px;">
      <Tab items={items} onChange={handleChange} columns={3}></Tab>
    </div>
  )
}

export default Page

带图标示例 ​

点击查看代码
vue
<template>
  <div id="app">
    <e-tab style="width:500px;height:160px;" :columns="3" @change="handleChange">
        <e-tab-item value="tab1">
            <template slot="icon"><a-icon type="down-square" /></template>
            Tab1
        </e-tab-item>
        <e-tab-item value="tab2">
            <template slot="icon"><a-icon type="pause-circle" /></template>
            Tab2
        </e-tab-item>
        <e-tab-item value="tab3">
            <template slot="icon"><a-icon type="redo" /></template>
            Tab3
        </e-tab-item>
    </e-tab>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>
vue
<template>
    <e-tab style="width:500px;height: 160px;" :items="items" :columns="3" @change="handleClick"></e-tab>
</template>
<script setup>
import { ETab } from 'e-datav-vue3';
import { h } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';

const items = [
    { label: 'Tab1', value: 'tab1', icon: () => h(MailOutlined) },
    { label: 'Tab2', value: 'tab2', icon: () => h(MailOutlined) },
    { label: 'Tab3', value: 'tab3', icon: () => h(MailOutlined) }
]

const handleClick = (value) => {
    console.log(value);
}
</script>
js
import { Tab } from 'e-datav-react';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

function Page() {
  const items = [
    { label: 'Tab1', value: 'tab1', icon: <AppstoreOutlined /> },
    { label: 'Tab2', value: 'tab2', icon: <MailOutlined /> },
    { label: 'Tab3', value: 'tab3', icon: <SettingOutlined /> }
  ]

  const handleChange = (value) => {
    console.log(value);
  }

  return (
    <div style="height:160px;width:500px;">
      <Tab items={items} onChange={handleChange} columns={3}></Tab>
    </div>
  )
}

export default Page

竖列示例 ​

点击查看代码
vue
<template>
  <div id="app">
    <e-tab style="width:500px;height:160px;" :columns="1" @change="handleChange">
        <e-tab-item value="tab1">
            Tab1
        </e-tab-item>
        <e-tab-item value="tab2">
            Tab2
        </e-tab-item>
        <e-tab-item value="tab3">
            Tab3
        </e-tab-item>
    </e-tab>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>
vue
<template>
    <e-tab style="height:300px;width:200px;" :items="items" :columns="1" @change="handleClick"></e-tab>
</template>
<script setup>
import { ETab } from 'e-datav-vue3';

const items = [
    { label: 'Tab1', value: 'tab1' },
    { label: 'Tab2', value: 'tab2' },
    { label: 'Tab3', value: 'tab3' }
]

const handleClick = (value) => {
    console.log(value);
}
</script>
js
import { Tab } from 'e-datav-react';

function Page() {
  const items = [
    { label: 'Tab1', value: 'tab1' },
    { label: 'Tab2', value: 'tab2' },
    { label: 'Tab3', value: 'tab3' }
  ]

  const handleChange = (value) => {
    console.log(value);
  }

  return (
    <div style="height:300px;width:200px;">
      <Tab items={items} onChange={handleChange} columns={1}></Tab>
    </div>
  )
}

export default Page

属性 ​

字段类型备注
valueNumber或String非必填，必须是数字或字符串，指定当前值，若不指定，则会默认选中items中的第一个
itemsTabItem[]项，必填，仅Vue3和React有该属性
columnsNumber列数，非必填，默认值3，表示显示3列，单竖列效果即传值1即可
marginNumber间距，非必填，默认每项间距10px
fontSizeNumber文本字号，非必填，默认16
fontColorNumber文本颜色，非必填，默认#fff
backgroundColorNumber背景色，非必填，默认transparent
durationNumber动画持续时间，非必填，默认值3，表示3秒
borderColorsNumber边框渐变颜色，非必填，默认值['#1CE3B6', '#1F38F1', '#F95A5A']

事件 ​

名称
备注
change切换时触发，参数为value值，如：tab1

TabItem ​

字段类型备注
labelString文本，必填
valueNumber或String值，必填
iconVue3:Function,React:ReactNode图标，非必填，Vue3 返回一个h函数，可自定义图标，如：() => h('div', { class: 'icon' })，也可使用第三方图标库