vue.js 标签隐藏_使用Vue.js显示标签的简单方法-CSDN博客

vue.js 标签隐藏

Vue组件，可轻松呈现标签 (A Vue component to easily render tabs)

The package contains a Vue component to easily display some tabs.

该软件包包含一个Vue组件，可轻松显示一些选项卡。

This is how they can be used:

这是如何使用它们：

<div>
    <tabs>
        <tab name="First tab">
            This is the content of the first tab
        </tab>
        <tab name="Second tab">
            This is the content of the second tab
        </tab>
        <tab name="Disabled tab" :is-disabled="true">
            This content will be unavailable while :is-disabled prop set to true
        </tab>
        <tab id="oh-hi-mark" name="Custom fragment">
            The fragment that is appended to the url can be customized
        </tab>
        <tab prefix="<span class='glyphicon glyphicon-star'></span> " 
             name="Prefix and suffix" 
             suffix=" <span class='badge'>4</span>">
            A prefix and a suffix can be added
        </tab>
    </tabs>
</div>

View demo 查看演示 Download Source 下载源

安装 (Installation)

You can install the package via yarn:

您可以通过yarn安装软件包：

yarn add vue-tabs-component

or npm:

或npm：

npm install vue-tabs-component --save

用法 (Usage)

The most common use case is to register the component globally.

最常见的用例是全局注册组件。

//in your app.js or similar file
import Vue from 'vue';
import {Tabs, Tab} from 'vue-tabs-component';

Vue.component('tabs', Tabs);
Vue.component('tab', Tab);

Alternatively you can do this to register the components:

或者，您可以执行以下操作来注册组件：

import Tabs from 'vue-tabs-component';

Vue.use(Tabs);

On your page you can now use html like this to render tabs:

现在，您可以在页面上使用html这样呈现标签：

<div>
    <tabs>
        <tab name="First tab">
            First tab content
        </tab>
        <tab name="Second tab">
            Second tab content
        </tab>
        <tab name="Third tab">
            Third tab content
        </tab>
    </tabs>
</div>

By default it will show the first tab.

默认情况下，它将显示第一个选项卡。

If you click on a tab a href representation of the name will be append to the url. For example clicking on the tab Second tab will append #second-tab to the url.

如果单击选项卡，则名称的href表示形式将附加到URL后面。例如，单击Second tab上的选项Second tab会将#second-tab附加到URL。

When loading a page with a fragment that matches the href of a tab, it will open up that tab. For example visiting /#third-tab will open up the tab with name Third tab.

当加载带有与选项卡的href匹配的片段的页面时，它将打开该选项卡。例如，访问/#third-tab将打开名称为Third tab 。

记住最后打开的标签页 (Remembering the last opened tab)

By default the component will remember which was the last open tab for 5 minutes . If you for instance click on Third tab and then visit / the third tab will be opened.

默认情况下，组件会记住5分钟内最后打开的选项卡。例如，如果您单击“ Third tab ，然后访问，那么将打开/第三选项卡。

You can change the cache life time by passing the lifetime in minutes in the cache-lifetime property of the tabs component.

您可以通过在tabs组件的cache-lifetime属性中以分钟为单位传递生存期，从而更改缓存的生存时间。

<tabs cache-lifetime="10">
  ...
</tabs>

禁用修改URL片段 (Disable modifying the url fragment)

When using with other libraries that use the url fragment, you can disable modifying the url fragment by passing the useUrlFragment options. This helps using it with vue-router, or using vue-tabs-component twice in the same page.

与使用url片段的其他库一起使用时，可以通过传递useUrlFragment选项来禁用修改url片段。这有助于将其与vue-router一起使用，或在同一页面中两次使用vue-tabs-component。

<tabs :options="{ useUrlFragment: false }">
  ...
</tabs>

在选项卡名称上添加后缀和前缀 (Adding a suffix and a prefix to the tab name)

You can add a suffix and a prefix to the tab by using the suffix and prefix attributes.

您可以通过使用suffix和prefix属性将suffix和prefix添加到选项卡。

<tab prefix="my prefix - " name="First tab" suffix=" - my suffix">
    First tab content
</tab>

The title of the tab will now be my prefix - First tab - my suffix.

选项卡的标题现在将是my prefix - First tab - my suffix 。

The fragment that's added to the url when clicking the tab will only be based on the name of a tab, the name-prefix and name-suffix attributes will be ignored.

点击标签当这样添加到URL中的片段将仅基于该name选项卡中， name-prefix和name-suffix属性将被忽略。

定制片段 (Customizing fragments)

When clicking on a tab it's name will be used as a fragment in the url. For example clicking on the Second tab will append #second-tab to the current url.

单击选项卡时，其名称将用作URL中的片段。例如，单击Second tab会将#second-tab附加到当前网址。

You can customize that fragment by using the id attribute.

您可以使用id属性来自定义该片段。

<div>
    <tabs>
        <tab id="custom-fragment" name="My tab">
            First tab content
        </tab>
    </tabs>
</div>

Clicking on My tab will then append #custom-fragment to the url.

单击My tab然后将#custom-fragment附加到URL。

CSS (CSS)

You can use the CSS from the docs as a starting point for your own styling. The output HTML has namespaced classes to target all nodes directly.

您可以将文档中的CSS用作自己样式的起点。输出HTML具有命名空间的类，以直接定位所有节点。

<div class="tabs-component">
    <ul class="tabs-component-tabs">
        <li class="tabs-component-tab">
            <a class="tabs-component-tab-a">…</a>
        </li>
    </ul>
    <div class="tabs-component-panels">
        <section class="tabs-component-panel">
            …
        </section>
    </div>
</div>