vue.js 组件用作标签_Vue.js的纤薄标签组件

vue.js 组件用作标签

标签 (tabs)

A slim tab component for Vue.js (1.3 kB minified).

Vue.js的超薄标签组件(最小1.3 kB)。

View demo 查看演示 View Github 查看Github

安装 (Install)

yarn add vue-slim-tabs

CDN: UNPKG | jsDelivr

CDN： UNPKG | jsDelivr

用法 (Usage)

<template>
  <tabs>
    <tab title="Vue">
      This is Vue
    </tab>
    <tab title="React">
      This is React
    </tab>
    <tab title="Svelte">
      This is Svelte
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-slim-tabs'

export default {
  components: {
    Tabs, Tab
  }
}
</script>

<!-- optionally use our default style -->
<style src="vue-slim-tabs/themes/default.css"></style>

You can use it as a plugin if you don't mind registering components globally:

如果您不介意在全球范围内注册组件，则可以将其用作插件：

import * as Tabs from 'vue-slim-tabs'

Vue.use(Tabs)

Use a slot as tab title

使用广告位作为标签标题

<template>
  <tabs>
    <tab title-slot="vue">
      This is Vue
    </tab>

    <template slot="vue">
      <strong>Vue</strong>
    </template>
  </tabs>
</template>

道具 (Props)

<Tabs> (<Tabs>)

defaultIndex (defaultIndex)

Type: Number Default: 0

类型： Number默认值： 0

Index of selected tab on the first render.

第一个渲染上选定选项卡的索引。

onSelect (onSelect)

Type: function Default: undefined

类型： function默认值： undefined

The function to invoke as user selects a tab by clicking:

作为用户调用的函数通过单击选择一个选项卡：

function onSelect(e, index) {
  // e: click event
  // index: index of selected tab
}

<Tab> (<Tab>)

标题 (title)

Type: string vNode Required: required unless titleSlot is set

类型： string vNode必需：必需，除非设置了titleSlot

Use a string or vNode as tab title.

使用字符串或vNode作为选项卡标题。

titleSlot (titleSlot)

Type: string

类型： string

Use a slot as the tab title.

使用插槽作为选项卡标题。

残障人士 (disabled)

Type: Boolean Default: undefined

类型： Boolean值默认值： undefined

Disable relevant tab, i.e. make it unselectable.

禁用相关选项卡，即使其变为不可选择。

发展历程 (Development)

Run the example with Poi:

使用Poi运行示例：

cd vue-slim-tabs
yarn
yarn dev

贡献 (Contributing)

1. Fork it!

   叉子！

2. Create your feature branch: git checkout -b my-new-feature

   创建功能分支： git checkout -b my-new-feature

3. Commit your changes: git commit -am 'Add some feature'

   提交更改： git commit -am 'Add some feature'

4. Push to the branch: git push origin my-new-feature

   推送到分支： git push origin my-new-feature

5. Submit a pull request :D

   提交拉取请求：D

翻译自: https://vuejsexamples.com/a-slim-tab-component-for-vue-js/

vue.js 组件用作标签