From acf3aa87235626e73417ea309a254079507dffd7 Mon Sep 17 00:00:00 2001 From: Jecyu Date: Sun, 3 Oct 2021 22:01:50 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(breadcrumb):=20=E6=96=B0=E5=A2=9E=20br?= =?UTF-8?q?eadcrumb=20=E7=BB=84=E4=BB=B6=EF=BC=9A=E5=9F=BA=E7=A1=80?= =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/breadcrumb/index.ts | 19 ++ devui/breadcrumb/src/breadcrumb-item-types.ts | 5 + devui/breadcrumb/src/breadcrumb-item.scss | 39 ++++ devui/breadcrumb/src/breadcrumb-item.tsx | 25 ++ devui/breadcrumb/src/breadcrumb-types.ts | 5 + devui/breadcrumb/src/breadcrumb.scss | 10 + devui/breadcrumb/src/breadcrumb.tsx | 14 ++ docs/.vitepress/config/sidebar.ts | 215 ++++++++++++++++++ docs/components/breadcrumb/index.md | 26 +++ 9 files changed, 358 insertions(+) create mode 100644 devui/breadcrumb/index.ts create mode 100644 devui/breadcrumb/src/breadcrumb-item-types.ts create mode 100644 devui/breadcrumb/src/breadcrumb-item.scss create mode 100644 devui/breadcrumb/src/breadcrumb-item.tsx create mode 100644 devui/breadcrumb/src/breadcrumb-types.ts create mode 100644 devui/breadcrumb/src/breadcrumb.scss create mode 100644 devui/breadcrumb/src/breadcrumb.tsx create mode 100644 docs/.vitepress/config/sidebar.ts create mode 100644 docs/components/breadcrumb/index.md diff --git a/devui/breadcrumb/index.ts b/devui/breadcrumb/index.ts new file mode 100644 index 00000000..e06a2df4 --- /dev/null +++ b/devui/breadcrumb/index.ts @@ -0,0 +1,19 @@ +import type { App } from 'vue' +import Breadcrumb from './src/breadcrumb' +import BreadcrumbItem from './src/breadcrumb-item' + +Breadcrumb.install = function (app: App): void { + app.component(Breadcrumb.name, Breadcrumb) + app.component(BreadcrumbItem.name, BreadcrumbItem) +} + +export { Breadcrumb } + +export default { + title: 'Breadcrumb 面包屑', + category: '导航', + status: '开发中', + install(app: App): void { + app.use(Breadcrumb as any) + }, +} diff --git a/devui/breadcrumb/src/breadcrumb-item-types.ts b/devui/breadcrumb/src/breadcrumb-item-types.ts new file mode 100644 index 00000000..89920466 --- /dev/null +++ b/devui/breadcrumb/src/breadcrumb-item-types.ts @@ -0,0 +1,5 @@ +import type { ExtractPropTypes } from 'vue' + +export const breadcrumbItemProps = {} as const + +export type BreadcrumbItemProps = ExtractPropTypes diff --git a/devui/breadcrumb/src/breadcrumb-item.scss b/devui/breadcrumb/src/breadcrumb-item.scss new file mode 100644 index 00000000..dd06a51a --- /dev/null +++ b/devui/breadcrumb/src/breadcrumb-item.scss @@ -0,0 +1,39 @@ +@import '../../style/theme/color'; +@import '../../style/core/_font'; +@import '../../style/core/animation'; + +.devui-breadcrumb-font-style { + font-size: $devui-font-size; + color: $devui-aide-text; + line-height: 18px; +} + +.devui-breadcrumb-item { + @extend.devui-breadcrumb-font-style; + + cursor: auto; + + a { + @extend.devui-breadcrumb-font-style; + + cursor: pointer; + + &:hover { + color: $devui-text; + text-decoration: none; + } + } + + a, + span { + transition: + color $devui-animation-duration-slow + $devui-animation-ease-in-out-smooth; + } +} + +.devui-breadcrumb-separator { + @extend.devui-breadcrumb-font-style; + + margin: 0 4px; +} diff --git a/devui/breadcrumb/src/breadcrumb-item.tsx b/devui/breadcrumb/src/breadcrumb-item.tsx new file mode 100644 index 00000000..52590a96 --- /dev/null +++ b/devui/breadcrumb/src/breadcrumb-item.tsx @@ -0,0 +1,25 @@ +import { defineComponent } from 'vue' +import './breadcrumb-item.scss' + +import { + breadcrumbItemProps, + BreadcrumbItemProps, +} from './breadcrumb-item-types' + +export default defineComponent({ + name: 'DBreadcrumbItem', + props: breadcrumbItemProps, + setup(props: BreadcrumbItemProps, { slots }) { + return () => { + const renderBreadcrumbSperator = () => { + return / + } + return ( +
+ {slots?.default()} + {renderBreadcrumbSperator()} +
+ ) + } + }, +}) diff --git a/devui/breadcrumb/src/breadcrumb-types.ts b/devui/breadcrumb/src/breadcrumb-types.ts new file mode 100644 index 00000000..3151432d --- /dev/null +++ b/devui/breadcrumb/src/breadcrumb-types.ts @@ -0,0 +1,5 @@ +import type { ExtractPropTypes } from 'vue' + +export const breadcrumbProps = {} as const + +export type BreadcrumbProps = ExtractPropTypes diff --git a/devui/breadcrumb/src/breadcrumb.scss b/devui/breadcrumb/src/breadcrumb.scss new file mode 100644 index 00000000..231d8ebb --- /dev/null +++ b/devui/breadcrumb/src/breadcrumb.scss @@ -0,0 +1,10 @@ +.devui-breadcrumb { + display: flex; + align-items: center; + + .devui-breadcrumb-item:last-child { + .devui-breadcrumb-separator { + display: none; + } + } +} diff --git a/devui/breadcrumb/src/breadcrumb.tsx b/devui/breadcrumb/src/breadcrumb.tsx new file mode 100644 index 00000000..b6a03f8a --- /dev/null +++ b/devui/breadcrumb/src/breadcrumb.tsx @@ -0,0 +1,14 @@ +import './breadcrumb.scss' + +import { defineComponent } from 'vue' +import { breadcrumbProps, BreadcrumbProps } from './breadcrumb-types' + +export default defineComponent({ + name: 'DBreadcrumb', + props: breadcrumbProps, + setup(props: BreadcrumbProps, { slots }) { + return () => { + return
{slots?.default()}
+ } + }, +}) diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts new file mode 100644 index 00000000..fe2c11e5 --- /dev/null +++ b/docs/.vitepress/config/sidebar.ts @@ -0,0 +1,215 @@ +export default { + '/': [ + { + "text": "快速开始", + "link": "/" + }, + { + "text": "通用", + "children": [ + { + "text": "Button 按钮", + "link": "/components/button/" + }, + { + "text": "Fullscreen 全屏", + "link": "/components/fullscreen/" + }, + { + "text": "Icon 图标", + "link": "/components/icon/" + }, + { + "text": "Overlay 遮罩层", + "link": "/components/overlay/" + }, + { + "text": "Panel 面板", + "link": "/components/panel/" + }, + { + "text": "Ripple 水波纹", + "link": "/components/ripple/" + }, + { + "text": "Search 搜索框", + "link": "/components/search/" + }, + { + "text": "Status 状态", + "link": "/components/status/" + }, + { + "text": "Sticky 便贴", + "link": "/components/sticky/" + } + ] + }, + { + "text": "导航", + "children": [ + { + "text": "Accordion 手风琴", + "link": "/components/accordion/" + }, + { + "text": "Anchor 锚点", + "link": "/components/anchor/" + }, + { + "text": "Breadcrumb 面包屑", + "link": "/components/breadcrumb/", + "status": "开发中" + }, + { + "text": "InputNumber 数字输入框", + "link": "/components/input-number/" + }, + { + "text": "Pagination 分页", + "link": "/components/pagination/", + "status": "已完成" + }, + { + "text": "StepsGuide 操作指引", + "link": "/components/steps-guide/", + "status": "开发中" + }, + { + "text": "Tabs 选项卡", + "link": "/components/tabs/" + } + ] + }, + { + "text": "反馈", + "children": [ + { + "text": "Alert 警告", + "link": "/components/alert/" + }, + { + "text": "Loading 加载提示", + "link": "/components/loading/", + "status": "已完成" + }, + { + "text": "Popover 悬浮提示", + "link": "/components/popover/", + "status": "开发中" + }, + { + "text": "Progress 进度条", + "link": "/components/progress/" + }, + { + "text": "Toast 全局提示", + "link": "/components/toast/" + }, + { + "text": "Tooltip提示", + "link": "/components/tooltip/" + } + ] + }, + { + "text": "数据录入", + "children": [ + { + "text": "Checkbox 复选框", + "link": "/components/checkbox/" + }, + { + "text": "DatePicker 日期选择器", + "link": "/components/date-picker/" + }, + { + "text": "EditableSelect 可输入下拉选择框", + "link": "/components/editable-select/" + }, + { + "text": "Input 输入框", + "link": "/components/input/" + }, + { + "text": "Radio 单选框", + "link": "/components/radio/" + }, + { + "text": "Rate 评分", + "link": "/components/rate/" + }, + { + "text": "Select 下拉框", + "link": "/components/select/" + }, + { + "text": "Slider 滑块", + "link": "/components/slider/" + }, + { + "text": "Switch 开关", + "link": "/components/switch/" + }, + { + "text": "TagInput 标签输入框", + "link": "/components/tag-input/" + }, + { + "text": "Transfer 穿梭框", + "link": "/components/transfer/" + }, + { + "text": "Upload 上传", + "link": "/components/upload/" + } + ] + }, + { + "text": "数据展示", + "children": [ + { + "text": "Avatar 头像", + "link": "/components/avatar/" + }, + { + "text": "Badge 徽标", + "link": "/components/badge/" + }, + { + "text": "Card 卡片", + "link": "/components/card/" + }, + { + "text": "Carousel 走马灯", + "link": "/components/carousel/" + }, + { + "text": "ImagePreview 图片预览", + "link": "/components/image-preview/" + }, + { + "text": "QuadrantDiagram 象限图", + "link": "/components/quadrant-diagram/" + }, + { + "text": "Skeleton 骨架屏", + "link": "/components/skeleton/" + }, + { + "text": "Tree 树", + "link": "/components/tree/" + } + ] + }, + { + "text": "布局", + "children": [ + { + "text": "Splitter 分割器", + "link": "/components/splitter/" + } + ] + } + ] +} diff --git a/docs/components/breadcrumb/index.md b/docs/components/breadcrumb/index.md new file mode 100644 index 00000000..b82cc0a8 --- /dev/null +++ b/docs/components/breadcrumb/index.md @@ -0,0 +1,26 @@ +# Breadcrumb + +显示当前页面层级的组件。 + +**何时使用** + +1. 用户需要了解当前出于什么层级时； +2. 用户需要快速返回之前的层级时； +3. 用户需要导航至与指定层级相同的任意页面时。 + +### 基础面包屑 + +:::demo +```vue + +``` +::: \ No newline at end of file -- Gitee From 64af5fa8ef4462c4c7d5aae9feaa633aa8ecb67a Mon Sep 17 00:00:00 2001 From: Jecyu Date: Mon, 4 Oct 2021 22:12:19 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat(breadcrumb):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E4=BC=A0=E5=85=A5=20source=20=E8=87=AA=E5=8A=A8=E7=94=9F?= =?UTF-8?q?=E6=88=90=20breadcrumb-item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/breadcrumb/src/breadcrumb-types.ts | 16 +++++++- devui/breadcrumb/src/breadcrumb.tsx | 35 +++++++++++++++-- docs/components/breadcrumb/index.md | 49 +++++++++++++++++++++++- 3 files changed, 93 insertions(+), 7 deletions(-) diff --git a/devui/breadcrumb/src/breadcrumb-types.ts b/devui/breadcrumb/src/breadcrumb-types.ts index 3151432d..15054f4e 100644 --- a/devui/breadcrumb/src/breadcrumb-types.ts +++ b/devui/breadcrumb/src/breadcrumb-types.ts @@ -1,5 +1,17 @@ -import type { ExtractPropTypes } from 'vue' +import type { ExtractPropTypes, PropType } from 'vue' -export const breadcrumbProps = {} as const +export interface SourceConfig { + title: string // 显示的名称 + link?: string // 跳转的路径 + target?: string // 规定在何处打开链接文档 + noNavigation?: boolean // 链接是否不可跳转,一般用于当前所处位置不可跳转的配置 +} + +export const breadcrumbProps = { + source: { + type: Array as PropType>, + default: [], + }, +} as const export type BreadcrumbProps = ExtractPropTypes diff --git a/devui/breadcrumb/src/breadcrumb.tsx b/devui/breadcrumb/src/breadcrumb.tsx index b6a03f8a..81196cd5 100644 --- a/devui/breadcrumb/src/breadcrumb.tsx +++ b/devui/breadcrumb/src/breadcrumb.tsx @@ -1,14 +1,41 @@ -import './breadcrumb.scss' - import { defineComponent } from 'vue' -import { breadcrumbProps, BreadcrumbProps } from './breadcrumb-types' +import { + breadcrumbProps, + BreadcrumbProps, + SourceConfig, +} from './breadcrumb-types' +import DBreadcrumbItem from './breadcrumb-item' +import './breadcrumb.scss' export default defineComponent({ name: 'DBreadcrumb', + components: { + DBreadcrumbItem, + }, props: breadcrumbProps, setup(props: BreadcrumbProps, { slots }) { + const renderBreadItemList = (source: SourceConfig[]) => { + return source.map((item: SourceConfig) => { + return ( + + {!item.noNavigation ? ( + + {item.title} + + ) : null} + {item.noNavigation ? {item.title} : null} + + ) + }) + } return () => { - return
{slots?.default()}
+ return ( +
+ {props.source && props.source.length + ? renderBreadItemList(props.source) + : slots?.default()} +
+ ) } }, }) diff --git a/docs/components/breadcrumb/index.md b/docs/components/breadcrumb/index.md index b82cc0a8..484154b9 100644 --- a/docs/components/breadcrumb/index.md +++ b/docs/components/breadcrumb/index.md @@ -23,4 +23,51 @@ ``` -::: \ No newline at end of file +::: + +### 传入source + +:::demo + +```vue + + +``` +::: + +### API + +### d-breadcrumb 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :----: | :------------------------------------: | :--: | :------------------------------------------------- | ------------------------- | +| source | [`Array`](#sourceconfig) | [] | 可选，面包屑根据配置的 source 按照默认渲染方式显示 | [传入source](#传入source) | + +### 接口 & 类型定义 + +SourceConfig +```ts +export interface SourceConfig { + title: string; // 显示的名称 + link?: string; // 跳转的路径 + target?: string // 规定在何处打开链接文档 + noNavigation?: boolean; // 链接是否不可跳转，一般用于当前所处位置不可跳转的配置 +} +``` \ No newline at end of file -- Gitee From f9a216d989cce4cd48d6753130af1362a5960756 Mon Sep 17 00:00:00 2001 From: Jecyu Date: Wed, 6 Oct 2021 10:20:53 +0800 Subject: [PATCH 3/4] =?UTF-8?q?docs(common):=20=E5=88=A0=E9=99=A4=E8=AF=AF?= =?UTF-8?q?=E6=8F=90=E4=BA=A4=E7=9A=84=20sidebar=20=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config/sidebar.ts | 215 ------------------------------ 1 file changed, 215 deletions(-) delete mode 100644 docs/.vitepress/config/sidebar.ts diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts deleted file mode 100644 index fe2c11e5..00000000 --- a/docs/.vitepress/config/sidebar.ts +++ /dev/null @@ -1,215 +0,0 @@ -export default { - '/': [ - { - "text": "快速开始", - "link": "/" - }, - { - "text": "通用", - "children": [ - { - "text": "Button 按钮", - "link": "/components/button/" - }, - { - "text": "Fullscreen 全屏", - "link": "/components/fullscreen/" - }, - { - "text": "Icon 图标", - "link": "/components/icon/" - }, - { - "text": "Overlay 遮罩层", - "link": "/components/overlay/" - }, - { - "text": "Panel 面板", - "link": "/components/panel/" - }, - { - "text": "Ripple 水波纹", - "link": "/components/ripple/" - }, - { - "text": "Search 搜索框", - "link": "/components/search/" - }, - { - "text": "Status 状态", - "link": "/components/status/" - }, - { - "text": "Sticky 便贴", - "link": "/components/sticky/" - } - ] - }, - { - "text": "导航", - "children": [ - { - "text": "Accordion 手风琴", - "link": "/components/accordion/" - }, - { - "text": "Anchor 锚点", - "link": "/components/anchor/" - }, - { - "text": "Breadcrumb 面包屑", - "link": "/components/breadcrumb/", - "status": "开发中" - }, - { - "text": "InputNumber 数字输入框", - "link": "/components/input-number/" - }, - { - "text": "Pagination 分页", - "link": "/components/pagination/", - "status": "已完成" - }, - { - "text": "StepsGuide 操作指引", - "link": "/components/steps-guide/", - "status": "开发中" - }, - { - "text": "Tabs 选项卡", - "link": "/components/tabs/" - } - ] - }, - { - "text": "反馈", - "children": [ - { - "text": "Alert 警告", - "link": "/components/alert/" - }, - { - "text": "Loading 加载提示", - "link": "/components/loading/", - "status": "已完成" - }, - { - "text": "Popover 悬浮提示", - "link": "/components/popover/", - "status": "开发中" - }, - { - "text": "Progress 进度条", - "link": "/components/progress/" - }, - { - "text": "Toast 全局提示", - "link": "/components/toast/" - }, - { - "text": "Tooltip提示", - "link": "/components/tooltip/" - } - ] - }, - { - "text": "数据录入", - "children": [ - { - "text": "Checkbox 复选框", - "link": "/components/checkbox/" - }, - { - "text": "DatePicker 日期选择器", - "link": "/components/date-picker/" - }, - { - "text": "EditableSelect 可输入下拉选择框", - "link": "/components/editable-select/" - }, - { - "text": "Input 输入框", - "link": "/components/input/" - }, - { - "text": "Radio 单选框", - "link": "/components/radio/" - }, - { - "text": "Rate 评分", - "link": "/components/rate/" - }, - { - "text": "Select 下拉框", - "link": "/components/select/" - }, - { - "text": "Slider 滑块", - "link": "/components/slider/" - }, - { - "text": "Switch 开关", - "link": "/components/switch/" - }, - { - "text": "TagInput 标签输入框", - "link": "/components/tag-input/" - }, - { - "text": "Transfer 穿梭框", - "link": "/components/transfer/" - }, - { - "text": "Upload 上传", - "link": "/components/upload/" - } - ] - }, - { - "text": "数据展示", - "children": [ - { - "text": "Avatar 头像", - "link": "/components/avatar/" - }, - { - "text": "Badge 徽标", - "link": "/components/badge/" - }, - { - "text": "Card 卡片", - "link": "/components/card/" - }, - { - "text": "Carousel 走马灯", - "link": "/components/carousel/" - }, - { - "text": "ImagePreview 图片预览", - "link": "/components/image-preview/" - }, - { - "text": "QuadrantDiagram 象限图", - "link": "/components/quadrant-diagram/" - }, - { - "text": "Skeleton 骨架屏", - "link": "/components/skeleton/" - }, - { - "text": "Tree 树", - "link": "/components/tree/" - } - ] - }, - { - "text": "布局", - "children": [ - { - "text": "Splitter 分割器", - "link": "/components/splitter/" - } - ] - } - ] -} -- Gitee From ceda75f49860a30165ab7a543b8e802623d489e9 Mon Sep 17 00:00:00 2001 From: Jecyu Date: Wed, 6 Oct 2021 10:55:52 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat(breadcrumb):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E9=80=9A=E8=BF=87=20prop=20=E6=88=96=20slot=20=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=88=86=E9=9A=94=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/breadcrumb/src/breadcrumb-item-types.ts | 31 +++++- devui/breadcrumb/src/breadcrumb-item.tsx | 11 +- devui/breadcrumb/src/breadcrumb-types.ts | 11 +- devui/breadcrumb/src/breadcrumb.tsx | 12 ++- devui/shared/util/props-util.ts | 8 ++ docs/components/breadcrumb/index.md | 102 ++++++++++++++++-- 6 files changed, 157 insertions(+), 18 deletions(-) create mode 100644 devui/shared/util/props-util.ts diff --git a/devui/breadcrumb/src/breadcrumb-item-types.ts b/devui/breadcrumb/src/breadcrumb-item-types.ts index 89920466..04542fad 100644 --- a/devui/breadcrumb/src/breadcrumb-item-types.ts +++ b/devui/breadcrumb/src/breadcrumb-item-types.ts @@ -1,5 +1,32 @@ -import type { ExtractPropTypes } from 'vue' +import type { ExtractPropTypes, PropType } from 'vue' -export const breadcrumbItemProps = {} as const +export interface MenuConfig { + name: string // 显示的名称 + link: string // 跳转的路径，可为绝对路径与相对路径，注意需要与路由的配置一致 + target?: string // 规定在何处打开链接文档 +} + +export const breadcrumbItemProps = { + /** + * 可选，是否需要显示下拉箭头及下拉列表内容 + */ + showMenu: { + type: Boolean, + default: false + }, + /** + * 可选，showMenu 为 true 时传入，下拉列表的显示内容 + */ + menuList: { + type: Array as PropType> + }, + /** + * 可选，showMenu 为 true 时传入，下拉列表是否需要搜索功能 + */ + isSearch: { + type: Boolean, + dafault: false + } +} as const export type BreadcrumbItemProps = ExtractPropTypes diff --git a/devui/breadcrumb/src/breadcrumb-item.tsx b/devui/breadcrumb/src/breadcrumb-item.tsx index 52590a96..39a2674a 100644 --- a/devui/breadcrumb/src/breadcrumb-item.tsx +++ b/devui/breadcrumb/src/breadcrumb-item.tsx @@ -1,18 +1,19 @@ -import { defineComponent } from 'vue' -import './breadcrumb-item.scss' +import { defineComponent, inject } from 'vue' import { breadcrumbItemProps, - BreadcrumbItemProps, + BreadcrumbItemProps } from './breadcrumb-item-types' +import './breadcrumb-item.scss' export default defineComponent({ name: 'DBreadcrumbItem', props: breadcrumbItemProps, setup(props: BreadcrumbItemProps, { slots }) { + const separatorIcon = inject('separatorIcon') return () => { const renderBreadcrumbSperator = () => { - return / + return {separatorIcon} } return (
@@ -21,5 +22,5 @@ export default defineComponent({
) } - }, + } }) diff --git a/devui/breadcrumb/src/breadcrumb-types.ts b/devui/breadcrumb/src/breadcrumb-types.ts index 15054f4e..f8d43be8 100644 --- a/devui/breadcrumb/src/breadcrumb-types.ts +++ b/devui/breadcrumb/src/breadcrumb-types.ts @@ -8,10 +8,19 @@ export interface SourceConfig { } export const breadcrumbProps = { + /** + * 可选，面包屑根据配置的 source 按照默认渲染方式显示 + */ source: { type: Array as PropType>, - default: [], + default: [] }, + /** + * 可选，自定义分隔符样式 + */ + separatorIcon: { + type: String + } } as const export type BreadcrumbProps = ExtractPropTypes diff --git a/devui/breadcrumb/src/breadcrumb.tsx b/devui/breadcrumb/src/breadcrumb.tsx index 81196cd5..0da81a29 100644 --- a/devui/breadcrumb/src/breadcrumb.tsx +++ b/devui/breadcrumb/src/breadcrumb.tsx @@ -1,19 +1,23 @@ -import { defineComponent } from 'vue' +import { defineComponent, provide } from 'vue' import { breadcrumbProps, BreadcrumbProps, - SourceConfig, + SourceConfig } from './breadcrumb-types' import DBreadcrumbItem from './breadcrumb-item' +import { getPropsSlot } from '../../shared/util/props-util' import './breadcrumb.scss' export default defineComponent({ name: 'DBreadcrumb', components: { - DBreadcrumbItem, + DBreadcrumbItem }, props: breadcrumbProps, setup(props: BreadcrumbProps, { slots }) { + const separatorIcon = getPropsSlot(slots, props, 'separatorIcon') ?? '/' + provide('separatorIcon', separatorIcon) + const renderBreadItemList = (source: SourceConfig[]) => { return source.map((item: SourceConfig) => { return ( @@ -37,5 +41,5 @@ export default defineComponent({ ) } - }, + } }) diff --git a/devui/shared/util/props-util.ts b/devui/shared/util/props-util.ts new file mode 100644 index 00000000..9411ed4d --- /dev/null +++ b/devui/shared/util/props-util.ts @@ -0,0 +1,8 @@ +import type { Slots, VNode } from 'vue' +export function getPropsSlot( + slots: Slots, + props: unknown, + prop = 'default' +): VNode | string | undefined { + return props[prop] ?? slots[prop]?.() +} diff --git a/docs/components/breadcrumb/index.md b/docs/components/breadcrumb/index.md index 484154b9..fd4499ac 100644 --- a/docs/components/breadcrumb/index.md +++ b/docs/components/breadcrumb/index.md @@ -23,12 +23,11 @@ ``` -::: +::: ### 传入source :::demo - ```vue