基础风格的标签页

```jsx
<template>
    <yz-tabs v-model="sctTab" @tab-click="handleClick">
        <yz-tab-pane name="test">test</yz-tab-pane>
        <yz-tab-pane name="test1">test1</yz-tab-pane>
        <yz-tab-pane name="test2222222222222222222">test2222222222222222222</yz-tab-pane>
        <yz-tab-pane name="test3">test3</yz-tab-pane>
    </yz-tabs>
</template>
<script>
     export default {
        data(){
            return {
                sctTab:'test'
            }
        },
        methods: {
            handleClick(tab) {
                console.log(tab);
            }
        }
     }
</script>
```

Radio风格的标签页

```jsx
<template>
    <yz-tabs type="radio" v-model="sctTab" @tab-click="handleClick">
        <yz-tab-pane name="test">test</yz-tab-pane>
        <yz-tab-pane name="test1">test1</yz-tab-pane>
        <yz-tab-pane name="test2222222222222222222">test2222222222222222222</yz-tab-pane>
        <yz-tab-pane name="test3">test3</yz-tab-pane>
    </yz-tabs>
</template>
<script>
     export default {
        data(){
            return {
                sctTab:'test'
            }
        },
        methods: {
            handleClick(tab) {
                console.log(tab);
            }
        }
     }
</script>
```

Card风格的标签页

```jsx
<template>
    <yz-tabs type="card" v-model="sctTab" @tab-click="handleClick">
        <yz-tab-pane name="test">test</yz-tab-pane>
        <yz-tab-pane name="test1">test1</yz-tab-pane>
        <yz-tab-pane name="test2222222222222222222">test2222222222222222222</yz-tab-pane>
        <yz-tab-pane name="test3">test3</yz-tab-pane>
    </yz-tabs>
</template>
<script>
     export default {
        data(){
            return {
                sctTab:'test'
            }
        },
        methods: {
            handleClick(tab) {
                console.log(tab);
            }
        }
     }
</script>
```

下划线风格的标签页

```jsx
<template>
    <yz-tabs type="underline" v-model="sctTab" @tab-click="handleClick">
        <yz-tab-pane name="test">test</yz-tab-pane>
        <yz-tab-pane name="test1">test1</yz-tab-pane>
        <yz-tab-pane name="test2222222222222222222">test2222222222222222222</yz-tab-pane>
        <yz-tab-pane name="test3">test3</yz-tab-pane>
    </yz-tabs>
</template>
<script>
     export default {
        data(){
            return {
                sctTab:'test'
            }
        },
        methods: {
            handleClick(tab) {
                console.log(tab);
            }
        }
     }
</script>
```