@ths-base/breadcrumb-base

v2.0.7

Published

10 months ago

基础面包屑，可自定义字体大小，间隔符，是否显示图标。

0High
0Medium
0Low

thssilu

ansevenlet

[email protected]

基础面包屑，可自定义字体大小，间隔符，是否显示图标。

示例

浅色主题

<template>
  <t-breadcrumb-base
    :data="data"
    :separator="separator"
    :key-field="keyField"
    :customIcon="customIcon"
    :activeItem="activeItem"
    :c-style="cStyle"
    >
  </t-breadcrumb-base>
  <br />
  <el-button @click="handleChange">改变分隔符</el-button>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import { useSetThemeStyle } from '../../../site/hooks/theme';
// 引入图片
import img1 from '../../../site/assets/images/list-card.png';
import img2 from '../../../site/assets/images/steps/login-finish.svg';
export default defineComponent({
  setup() {
    const { setThemeStyle } = useSetThemeStyle();
    const data = [
      {
        // 数组形式的数据测试
        label: '首页', // 标签显示的文字
        icon: img1, // 标签前的图标
        activeIcon: img2,
        path: '/', // 标签对应的路径
      },
      {
        label: '活动管理',
        path: '/',
        icon: img1, // 标签前的图标
      },
      {
        label: '活动列表',
      },
      {
        label: '活动详情',
        icon: img1, // 标签前的图标
        path: '/', // 标签对应的路径
        activeIcon: img2,
      },
    ];
    const state = reactive({
      data,
      separator: '>',
      customIcon: true,
      activeItem: '活动详情',
      cStyle: {
        wrapper: {
          default: {
            width: '100%',
            padding: '12px'
          }
        },
      },
    });

    // 数据对应显示的字段名
    const keyField = {
      label: 'label', // 标签名称
      icon: 'icon', // 标签前的图标的class名
      path: 'path', // 标签对应的路径
    };

    /**
     * 点击面包屑
     * @param item 点击后获取到的当前面包屑的数据
     */
    const clickBreadcrumb = (item1: unknown) => {
      console.log(item1);
    };

    /**
     * 改变分隔符
     */
    const handleChange = () => {
      state.separator = '/';
    };

    /**
     *  初始化主题色及背景色
     */
    onMounted(() => {
      setThemeStyle();
    });

    return {
      ...toRefs(state),
      handleChange,
      clickBreadcrumb,
      keyField,
    };
  },
});
</script>

深色主题

<template>
  <t-breadcrumb-base
    :custom-icon="false" 
    :data="data"
    :key-field="keyField"
    :c-style="cStyle"
    activeItem="活动详情"
  >
  </t-breadcrumb-base>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import { useSetThemeStyle } from '../../../site/hooks/theme';
export default defineComponent({
  setup() {
    const { setThemeStyle } = useSetThemeStyle();
    const separator = '>'; // 显示的间隔符
    const cStyle = { // 默认样式
      wrapper: {
        default: {
          width: '100%',
          background: '#000050',
          padding: '12px'
        }
      },
      itemWrapper: {
        default: {
          color: '#fff'
        },
        hover: {
          color: 'red'
        },
        active: {
          color: '#0052D9'
        }
      },
      icon: {
        default: {
          color: '#fff'
        }
      }
    };
    const data = [
      {
        // 数组形式的数据测试
        label1: '首页', // 标签显示的文字
        icon: 'edit', // 标签前的图标
        path: '/', // 标签对应的路径
      },
      {
        label1: '活动管理',
        path: '/',
        icon: 'edit', // 标签前的图标
      },
      {
        label1: '活动列表',
      },
      {
        label1: '活动详情',
        icon: 'edit', // 标签前的图标
      },
    ];

    // 数据对应显示的字段名
    const keyField = {
      label: 'label1', // 标签名称
      icon: 'icon', // 标签前的图标的class名
      path: 'path', // 标签对应的路径
      active: 'label1',
    };

    /**
     * 点击面包屑
     * @param item 点击后获取到的当前面包屑的数据
     */
    const clickBreadcrumb = (item1: unknown) => {
      console.log(item1);
    };

    /**
     *  初始化主题色及背景色
     */
    onMounted(() => {
      setThemeStyle();
    });

    return {
      data,
      separator,
      clickBreadcrumb,
      keyField,
      cStyle,
    };
  },
});
</script>

自定义样式

<template>
  <t-breadcrumb-base class="light" :c-style="cStyle" :data="data"  activeItem="活动详情" :key-field="keyField">
  </t-breadcrumb-base>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import { useSetThemeStyle } from '../../../site/hooks/theme';

export default defineComponent({
  setup() {
    const { setThemeStyle } = useSetThemeStyle();
    const separator = '>'; // 显示的间隔符
    const cStyle = { // 默认样式
      wrapper: {
        default:{
          padding: '20px',
          'background-color': 'pink',
        }
      },
      itemWrapper: {
        default: {
          color:'red',
          'font-size': '20px'
        },
        hover: {
          color:'green',
        },
        active: {
          color:'blue',
        },
      },
      icon: {
        default: {
          color: 'yellow',
        },
      },
    };
    const data = [
      {
        // 数组形式的数据测试
        label: '首页', // 标签显示的文字
        icon: 'edit', // 标签前的图标
        path: '/', // 标签对应的路径
      },
      {
        label: '活动管理',
        icon: 'edit', // 标签前的图标
      },
      {
        label: '活动列表',
      },
      {
        label: '活动详情',
        icon: 'edit', // 标签前的图标
        path: '/', // 标签对应的路径
      },
    ];

    // 数据对应显示的字段名
    const keyField = {
      label: 'label', // 标签名称
      icon: 'icon', // 标签前的图标的class名
      path: 'path', // 标签对应的路径
    };

    /**
     * 点击面包屑
     * @param item 点击后获取到的当前面包屑的数据
     */
    const clickBreadcrumb = (item1: unknown) => {
      console.log(item1);
    };

    const state = reactive({
      cStyle, // 组件样式
      data,
    });

    /**
     *  初始化主题色及背景色
     */
    onMounted(() => {
      setThemeStyle();
    });

    return {
      ...toRefs(state),
      separator,
      clickBreadcrumb,
      keyField,
    };
  },
});
</script>

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/breadcrumb-base
yarn add @ths-base/breadcrumb-base

使用

import TBreadcrumbBase from '@ths-base/breadcrumb-base';
import '@ths-base/breadcrumb-base/lib/index.css';
createApp(App).use(TBreadcrumbBase);

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TBreadcrumbBase);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ----------- | ------------ | --------------- | ------------- | ------ | ------ | | separator | 间隔符 | string | / > 等 | > | | | show-icon | 是否显示图标 | boolean | | true | | | custom-icon | 是否是自定义图标，默认使用element-plus里的图标 | boolean | true|false | false | | | data | 数据 | array | object | | | | | key-field | 字段名关键字 | object | | | | | c-style | 自定义样式 | object | -- | -- | | | active | 激活项 | string | -- | -- | |

keyField 的属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ----- | -------------------------------------------------- | ------ | ------ | ------ | ------ | | label | data 数据中对应文字的字段名称 | string | | label | | | icon | data 数据中对应文字前显示图标对应的 class 字段名称/图标路径 | string | | icon | | | activeIcon | data 数据中对应文字前激活项的图标路径 | string | | activeIcon | | | path | data 数据中对应的路由路径字段名称 | string | | path | | | active | 激活项判断的唯一标识 | string | | label | |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | | ---------------- | ------------------------ | ------------ | | wrapper | default | 容器 | | itemWrapper | default / hover / active | 单项容器 | | icon | default / hover / active | 图标 |

变量使用说明

| 颜色变量 | 说明 | | ----------------------------- | ------------ | | --t-breadcrumb-base-background | 容器背景色 | | --t-breadcrumb-base-item-color | 单项标签文字颜色 | | --t-breadcrumb-base-icon-color | 图标颜色（使用字体图标时） | | ---t-breadcrumb-base-select-color | 单项选中时字体、图标（使用字体图标时）颜色 | | --t-breadcrumb-base-hover-color | 单项hover时字体、图标（使用字体图标时）颜色 |

事件

| 事件名称 | 说明 | 回调参数 | | ---------------- | -------------- | -------------- | | breadcrumb-click | 点击面包屑事件 | 当前点击的对象 |

作者：张金秀

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme