页面标题

文字标题

页面标题

页面标题

页面标题

设置

<template>
    <div class="care-pagetitle">
        <div class="care-pagetitle__content">
            页面标题
        </div>
    </div>

    <div class="care-pagetitle">
        <div class="care-pagetitle__content">
            <i class="care-icon-setting"></i>页面标题
        </div>
    </div>

    <div class="care-pagetitle">
        <div class="care-pagetitle__content">
            <i class="care-icon-setting"></i>页面标题
        </div>
        <div class="care-pagetitle__operations">
            设置<i class="care-icon-arrow-right-small"></i>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码

面包屑标题

页面1/

页面2/

页面3/

<template>
    <div class="care-pagetitle">
        <div class="care-pagetitle__content">
            <t-breadcrumb>
                <template v-slot:default>
                    <t-breadcrumbItem>页面1</t-breadcrumbItem>
                    <t-breadcrumbItem>页面2</t-breadcrumbItem>
                    <t-breadcrumbItem>页面3</t-breadcrumbItem>
                </template>
                <template v-slot:separator>/</template>
            </t-breadcrumb>
        </div>
        <div class="care-pagetitle__operations">
            <t-button theme="primary" variant="base">填充按钮</t-button>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码

标题+tab

页面1/

页面2/

页面3/

<template>
    <div class="care-pagetitle">
        <div class="care-pagetitle__content">
            <t-breadcrumb>
                <template v-slot:default>
                    <t-breadcrumbItem>页面1</t-breadcrumbItem>
                    <t-breadcrumbItem>页面2</t-breadcrumbItem>
                    <t-breadcrumbItem>页面3</t-breadcrumbItem>
                </template>
                <template v-slot:separator>/</template>
            </t-breadcrumb>
            <!-- 方式一： t-tab-pannel 方式 -->
            <t-tabs v-model="value">
                <!-- 默认插槽 和 具名插槽（panel）都是用来渲染面板内容 -->
                <t-tab-panel value="first" label="选项卡" :destroyOnHide="false">
                </t-tab-panel>
                <t-tab-panel value="second" label="选项卡" :destroyOnHide="false">
                </t-tab-panel>
                <t-tab-panel value="third" label="选项卡"/>
            </t-tabs>
        </div>
        <div class="care-pagetitle__operations">
            <t-button theme="primary" variant="base">填充按钮</t-button>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
        value: 'first',
        tab: 1,
    };
  }
};
</script>

显示代码 复制代码 复制代码