perf(ui/breadcrumb): optimize breadcrumb docs

varletjs · Dec 26, 2022 · 2fb88fe · 2fb88fe
1 parent 7677275
commit 2fb88fe
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/packages/varlet-ui/src/breadcrumbs/docs/en-US.md b/packages/varlet-ui/src/breadcrumbs/docs/en-US.md
@@ -2,7 +2,7 @@
 
 ### Introduce
 
-Displays the location of the current page.
+Displays the location of the current page, making it easier to browser back.
 
 ### Basic Usage
 
@@ -11,7 +11,7 @@ In `var-breadcrumbs` , each `var-breadcrumb` is a tag that stands for every leve
 ```html
 <template>
   <var-breadcrumbs>
-    <var-breadcrumb>First Level</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/'}">Homepage</var-breadcrumb>
     <var-breadcrumb>Second Level</var-breadcrumb>
     <var-breadcrumb>Third Level</var-breadcrumb>
   </var-breadcrumbs>
@@ -25,7 +25,7 @@ This component has a `String` attribute `separator`, and it determines the separ
 ```html
 <template>
   <var-breadcrumbs separator="\">
-    <var-breadcrumb>First Level</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">Homepage</var-breadcrumb>
     <var-breadcrumb>Second Level</var-breadcrumb>
     <var-breadcrumb>Third Level</var-breadcrumb>
   </var-breadcrumbs>
@@ -39,7 +39,7 @@ Each level separator can be set separately，`var-breadcrumb` has a `String` att
 ```html
 <template>
   <var-breadcrumbs separator="\">
-    <var-breadcrumb>First Level</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">Homepage</var-breadcrumb>
     <var-breadcrumb separator="~">Second Level</var-breadcrumb>
     <var-breadcrumb>Third Level</var-breadcrumb>
   </var-breadcrumbs>
@@ -52,11 +52,11 @@ Set the slot to use custom content as the separator, it will cover `separator`.
 
 ```html
 <var-breadcrumbs>
-  <var-breadcrumb>
+  <var-breadcrumb :to="{ path: '/' }">
     <template #separator>
       <var-icon name="chevron-right" />
     </template>
-    First Level
+    Homepage
   </var-breadcrumb>
   <var-breadcrumb>
     <template #separator>
@@ -85,9 +85,10 @@ Set the slot to use custom content as the separator, it will cover `separator`.
 
 #### breadcrumb Props
 
-| Prop        | Description         | Type     | Default |
-| ----------- | ------------------- | -------- | ------- |
-| `separator` | separator character | _string_ | `/`     |
+| Prop        | Description                                            | Type                          | Default |
+| ----------- | ------------------------------------------------------ | ----------------------------- | ------- |
+| `separator` | separator character                                    | _string_                      | `/`     |
+| `to`        | target route of the link, same as `to` of `vue-router` | _string_ / _RouteLocationRow_ | `''`    |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/breadcrumbs/docs/zh-CN.md b/packages/varlet-ui/src/breadcrumbs/docs/zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-显示当前页面的路径
+显示当前页面的路径，快速返回之前的任意页面。
 
 ### 基本用法
 
@@ -11,7 +11,7 @@
 ```html
 <template>
   <var-breadcrumbs>
-    <var-breadcrumb>一级</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">首页</var-breadcrumb>
     <var-breadcrumb>二级</var-breadcrumb>
     <var-breadcrumb>三级</var-breadcrumb>
   </var-breadcrumbs>
@@ -25,7 +25,7 @@
 ```html
 <template>
   <var-breadcrumbs separator="\">
-    <var-breadcrumb>一级</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">首页</var-breadcrumb>
     <var-breadcrumb>二级</var-breadcrumb>
     <var-breadcrumb>三级</var-breadcrumb>
   </var-breadcrumbs>
@@ -39,7 +39,7 @@
 ```html
 <template>
   <var-breadcrumbs separator="\">
-    <var-breadcrumb>一级</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">首页</var-breadcrumb>
     <var-breadcrumb separator="~">二级</var-breadcrumb>
     <var-breadcrumb>三级</var-breadcrumb>
   </var-breadcrumbs>
@@ -52,11 +52,11 @@
 
 ```html
 <var-breadcrumbs>
-  <var-breadcrumb>
+  <var-breadcrumb :to="{ path: '/' }">
     <template #separator>
       <var-icon name="chevron-right" />
     </template>
-    一级
+    首页
   </var-breadcrumb>
   <var-breadcrumb>
     <template #separator>
@@ -85,9 +85,10 @@
 
 #### breadcrumb Props
 
-| 参数        | 说明   | 类型     | 默认值 |
-| ----------- | ------ | -------- | ------ |
-| `separator` | 分隔符 | _string_ | `/`    |
+| 参数        | 说明                                       | 类型                          | 默认值 |
+| ----------- | ------------------------------------------ | ----------------------------- | ------ |
+| `separator` | 分隔符                                     | _string_                      | `/`    |
+| `to`        | 路由跳转目标，同 `vue-router` 的 `to` 属性 | _string_ / _RouteLocationRow_ | `''`   |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/breadcrumbs/example/index.vue b/packages/varlet-ui/src/breadcrumbs/example/index.vue
@@ -19,21 +19,21 @@ watchLang(use)
 
   <app-type>{{ pack.separator }}</app-type>
   <var-breadcrumbs separator="\">
-    <var-breadcrumb>{{ pack.level1 }}</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">{{ pack.level1 }}</var-breadcrumb>
     <var-breadcrumb>{{ pack.level2 }}</var-breadcrumb>
     <var-breadcrumb>{{ pack.level3 }}</var-breadcrumb>
   </var-breadcrumbs>
 
   <app-type>{{ pack.eachLevelSeparator }}</app-type>
   <var-breadcrumbs>
-    <var-breadcrumb>{{ pack.level1 }}</var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">{{ pack.level1 }}</var-breadcrumb>
     <var-breadcrumb separator="~">{{ pack.level2 }}</var-breadcrumb>
     <var-breadcrumb>{{ pack.level3 }}</var-breadcrumb>
   </var-breadcrumbs>
 
   <app-type>{{ pack.separatorSlot }}</app-type>
   <var-breadcrumbs>
-    <var-breadcrumb>
+    <var-breadcrumb :to="{ path: '/' }">
       <template #separator>
         <var-icon name="chevron-right" />
       </template>