diff --git a/README.md b/README.md index a19a848e4..f3f32ab16 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ npm i vant@next -S yarn add vant@next ``` -> Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035) +> Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035). ## Quickstart diff --git a/README.zh-CN.md b/README.zh-CN.md index e736f57ce..7fc234fd2 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -51,7 +51,7 @@ npm i vant@next -S yarn add vant@next ``` -> Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035) +> Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035)。 ## 快速上手 diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index 4b5554fc1..9f5c18634 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -31,7 +31,7 @@ npm i vant@next -S yarn add vant@next ``` -> Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035) +> Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035)。 ### 示例工程 @@ -85,7 +85,7 @@ module.exports = { import { Button } from 'vant'; ``` -> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入 +> Tips: 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。 ### 方式二. 手动按需引入组件 @@ -109,7 +109,7 @@ const app = createApp(); app.use(Vant); ``` -> 配置按需引入后，将不允许直接导入所有组件 +> Tips: 配置按需引入后，将不允许直接导入所有组件。 ### 方式四. 通过 CDN 引入 @@ -170,7 +170,7 @@ module.exports = { }; ``` -> 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译 +> Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。 ### 在桌面端使用 diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md index 52f56347d..d35af81aa 100644 --- a/packages/vant-cli/changelog.md +++ b/packages/vant-cli/changelog.md @@ -1,5 +1,11 @@ # 更新日志 +### v2.6.0 + +`2020-09-27` + +- 优化站点样式 + ### v2.5.5 `2020-09-26` diff --git a/packages/vant-cli/site/common/style/highlight.less b/packages/vant-cli/site/common/style/highlight.less index 07cf774c5..51cafa1d5 100644 --- a/packages/vant-cli/site/common/style/highlight.less +++ b/packages/vant-cli/site/common/style/highlight.less @@ -3,15 +3,18 @@ code { position: relative; display: block; + padding: 16px; overflow-x: auto; color: @van-doc-code-color; font-weight: 400; - font-size: 13.4px; + font-size: 14px; font-family: @van-doc-code-font-family; line-height: 26px; white-space: pre-wrap; word-wrap: break-word; -webkit-font-smoothing: auto; + background-color: #fafafa; + border-radius: 16px; } pre { diff --git a/packages/vant-cli/site/desktop/components/Content.vue b/packages/vant-cli/site/desktop/components/Content.vue index e962f81e6..1bb0dcee6 100644 --- a/packages/vant-cli/site/desktop/components/Content.vue +++ b/packages/vant-cli/site/desktop/components/Content.vue @@ -73,30 +73,30 @@ export default { h2 { margin: 45px 0 20px; - font-size: 22px; + font-size: 25px; } h3 { margin-bottom: 16px; - font-weight: 500; + font-weight: 600; font-size: 18px; } h4 { margin: 24px 0 12px; - font-weight: 500; - font-size: 15px; + font-weight: 600; + font-size: 16px; } h5 { margin: 24px 0 12px; - font-weight: 500; - font-size: 14px; + font-weight: 600; + font-size: 15px; } p { color: @van-doc-text-color; - font-size: 14px; + font-size: 15px; line-height: 26px; } @@ -104,13 +104,13 @@ export default { width: 100%; margin-top: 12px; color: @van-doc-text-color; - font-size: 13px; + font-size: 14px; line-height: 1.5; border-collapse: collapse; th { padding: 8px 10px; - font-weight: 500; + font-weight: 600; text-align: left; &:first-child { @@ -134,8 +134,8 @@ export default { margin: 0; padding: 2px 6px; color: @van-doc-blue; - font-weight: 500; - font-size: 10px; + font-weight: 600; + font-size: 11px; background-color: fade(@van-doc-blue, 10%); border-radius: 20px; } @@ -148,7 +148,7 @@ export default { em { color: @van-doc-green; - font-size: 12.5px; + font-size: 14px; font-family: @van-doc-code-font-family; font-style: normal; -webkit-font-smoothing: auto; @@ -161,7 +161,7 @@ export default { margin: 5px 0 5px 10px; padding-left: 15px; color: @van-doc-text-color; - font-size: 14px; + font-size: 15px; line-height: 26px; &::before { @@ -188,12 +188,12 @@ export default { li > code, table code { display: inline; - margin: 2px 3px; + margin: 0 2px; padding: 2px 5px; - font-size: 13px; + font-size: 14px; font-family: inherit; word-break: keep-all; - background-color: #f0f2f5; + background-color: @van-doc-background-color; border-radius: 4px; -webkit-font-smoothing: antialiased; } @@ -208,11 +208,8 @@ export default { } blockquote { - margin: 20px 0 0; + margin: 16px 0 0; padding: 16px; - color: rgba(52, 73, 94, 0.8); - font-weight: 500; - font-size: 14px; background-color: #ecf9ff; border-radius: @van-doc-border-radius; } @@ -228,7 +225,7 @@ export default { strong { display: block; margin: 24px 0 12px; - font-weight: 500; + font-weight: 600; font-size: 15px; } diff --git a/packages/vant-cli/site/desktop/components/Nav.vue b/packages/vant-cli/site/desktop/components/Nav.vue index 69bb56b33..7c39a81cc 100644 --- a/packages/vant-cli/site/desktop/components/Nav.vue +++ b/packages/vant-cli/site/desktop/components/Nav.vue @@ -112,7 +112,7 @@ export default { &__title { padding: 8px 0 8px @van-doc-padding; color: #455a64; - font-weight: 500; + font-weight: 600; font-size: 15px; line-height: 28px; } diff --git a/packages/vant-cli/site/desktop/components/SearchInput.vue b/packages/vant-cli/site/desktop/components/SearchInput.vue index d803dcaf1..5f192e1fe 100644 --- a/packages/vant-cli/site/desktop/components/SearchInput.vue +++ b/packages/vant-cli/site/desktop/components/SearchInput.vue @@ -83,7 +83,7 @@ export default { } .algolia-docsearch-suggestion--title { - font-weight: 500; + font-weight: 600; } .algolia-docsearch-suggestion--text { diff --git a/packages/vant-cli/site/mobile/components/DemoHome.vue b/packages/vant-cli/site/mobile/components/DemoHome.vue index fea60e281..7c7f62562 100644 --- a/packages/vant-cli/site/mobile/components/DemoHome.vue +++ b/packages/vant-cli/site/mobile/components/DemoHome.vue @@ -85,7 +85,6 @@ export default { span { margin-left: 16px; - font-weight: 500; } &--small { diff --git a/packages/vant-cli/site/mobile/components/DemoHomeNav.vue b/packages/vant-cli/site/mobile/components/DemoHomeNav.vue index 2ba2d074d..02d5d28ab 100644 --- a/packages/vant-cli/site/mobile/components/DemoHomeNav.vue +++ b/packages/vant-cli/site/mobile/components/DemoHomeNav.vue @@ -58,7 +58,7 @@ export default { margin: 0 0 12px; padding-left: 20px; color: #323233; - font-weight: 500; + font-weight: 600; font-size: 14px; line-height: 40px; background: #f7f8fa; diff --git a/packages/vant-cli/site/mobile/components/DemoNav.vue b/packages/vant-cli/site/mobile/components/DemoNav.vue index 899d3ee6e..40dc32240 100644 --- a/packages/vant-cli/site/mobile/components/DemoNav.vue +++ b/packages/vant-cli/site/mobile/components/DemoNav.vue @@ -46,7 +46,7 @@ export default { background-color: #fff; &__title { - font-weight: 500; + font-weight: 600; font-size: 17px; text-transform: capitalize; } diff --git a/src/action-bar/README.md b/src/action-bar/README.md index ebe5bbc69..da8d84b75 100644 --- a/src/action-bar/README.md +++ b/src/action-bar/README.md @@ -42,7 +42,7 @@ export default { ### Icon Badge -Use `badge` prop to show badge in icon +Use `badge` prop to show badge in icon. ```html diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md index 8bfad8a5f..de8aad212 100644 --- a/src/action-bar/README.zh-CN.md +++ b/src/action-bar/README.zh-CN.md @@ -42,7 +42,7 @@ export default { ### 徽标提示 -在 ActionBarIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 +在 ActionBarIcon 组件上设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。 ```html @@ -56,7 +56,7 @@ export default { ### 自定义图标颜色 -通过 ActionBarIcon 的`color`属性可以自定义图标的颜色 +通过 ActionBarIcon 的 `color` 属性可以自定义图标的颜色。 ```html @@ -70,7 +70,7 @@ export default { ### 自定义按钮颜色 -通过 ActionBarButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色 +通过 ActionBarButton 的 `color` 属性可以自定义按钮的颜色，支持传入 `linear-gradient` 渐变色。 ```html diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index 2e028b181..b4a86c72d 100644 --- a/src/area/README.zh-CN.md +++ b/src/area/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -省市区三级联动选择，通常与[弹出层](#/zh-CN/popup)组件配合使用 +省市区三级联动选择，通常与[弹出层](#/zh-CN/popup)组件配合使用。 ### 引入 @@ -18,7 +18,7 @@ app.use(Area); ### 基础用法 -要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节 +要初始化一个 `Area` 组件，你需要传入一个 `area-list` 属性，数据格式具体可看下面数据格式章节。 ```html @@ -26,7 +26,7 @@ app.use(Area); ### 选中省市区 -如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code` +如果想选中某个省市区，需要传入一个 `value` 属性，绑定对应的省市区 `code`。 ```html @@ -34,7 +34,7 @@ app.use(Area); ### 配置显示列 -可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择 +可以通过 `columns-num` 属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为 `2`，则只会显示省市选择。 ```html @@ -42,7 +42,7 @@ app.use(Area); ### 配置列占位提示文字 -可以通过`columns-placeholder`属性配置每一列的占位提示文字 +可以通过 `columns-placeholder` 属性配置每一列的占位提示文字。 ```html diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index 1fba2ed11..bd44db025 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -15,7 +15,7 @@ app.use(CheckboxGroup); ### 基础用法 -通过`v-model`绑定复选框的勾选状态 +通过 `v-model` 绑定复选框的勾选状态。 ```html 复选框 @@ -33,7 +33,7 @@ export default { ### 禁用状态 -通过设置`disabled`属性可以禁用复选框 +通过设置 `disabled` 属性可以禁用复选框。 ```html 复选框 @@ -41,7 +41,7 @@ export default { ### 自定义形状 -将`shape`属性设置为`square`，复选框的形状会变成方形 +将 `shape` 属性设置为 `square`，复选框的形状会变成方形。 ```html 复选框 @@ -49,7 +49,7 @@ export default { ### 自定义颜色 -通过`checked-color`属性设置选中状态的图标颜色 +通过 `checked-color` 属性设置选中状态的图标颜色。 ```html 复选框 @@ -57,7 +57,7 @@ export default { ### 自定义大小 -通过`icon-size`属性可以自定义图标的大小 +通过 `icon-size` 属性可以自定义图标的大小。 ```html 复选框 @@ -65,7 +65,7 @@ export default { ### 自定义图标 -通过 icon 插槽自定义图标，可以通过`slotProps`判断是否为选中状态 +通过 `icon` 插槽自定义图标，可以通过 `slotProps` 判断是否为选中状态. ```html @@ -96,7 +96,7 @@ export default { ### 禁用文本点击 -设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换 +设置 `label-disabled` 属性后，点击图标以外的内容不会触发复选框切换。 ```html 复选框 @@ -104,7 +104,7 @@ export default { ### 复选框组 -复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态 +复选框可以与复选框组一起使用，复选框组通过 `v-model` 数组绑定复选框的勾选状态。 ```html @@ -125,7 +125,7 @@ export default { ### 水平排列 -将`direction`属性设置为`horizontal`后，复选框组会变成水平排列 +将 `direction` 属性设置为 `horizontal` 后，复选框组会变成水平排列。 ```html @@ -146,7 +146,7 @@ export default { ### 限制最大可选数 -通过`max`属性可以限制复选框组的最大可选数 +通过 `max` 属性可以限制复选框组的最大可选数。 ```html @@ -158,7 +158,7 @@ export default { ### 全选与反选 -通过`CheckboxGroup`实例上的`toggleAll`方法可以实现全选与反选 +通过 `CheckboxGroup` 实例上的 `toggleAll` 方法可以实现全选与反选。 ```html @@ -191,7 +191,7 @@ export default { ### 搭配单元格组件使用 -此时你需要再引入`Cell`和`CellGroup`组件，并通过`Checkbox`实例上的 toggle 方法触发切换 +此时你需要再引入 `Cell` 和 `CellGroup` 组件，并通过 `Checkbox` 实例上的 toggle 方法触发切换。 ```html diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index 8013d3581..de0cc7f57 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(Circle); ### 基础用法 -`rate`属性表示进度条的目标进度，`v-model:currentRate`表示动画过程中的实时进度。当`rate`发生变化时，`v-model:currentRate`会以`speed`的速度变化，直至达到`rate`设定的值。 +`rate` 属性表示进度条的目标进度，`v-model:currentRate` 表示动画过程中的实时进度。当 `rate` 发生变化时，`v-model:currentRate` 会以 `speed` 的速度变化，直至达到 `rate` 设定的值。 ```html @@ -53,7 +53,7 @@ Set grid spacing using `gutter` attribute. The default value is 0 ### Flex Layout -Setting `type` to `flex` to enable flex layout +Setting `type` to `flex` to enable flex layout. ```html diff --git a/src/col/README.zh-CN.md b/src/col/README.zh-CN.md index 17972322a..f81bad273 100644 --- a/src/col/README.zh-CN.md +++ b/src/col/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -Layout 提供了`van-row`和`van-col`两个组件来进行行列布局 +Layout 提供了 `van-row` 和 `van-col` 两个组件来进行行列布局。 ### 引入 @@ -19,8 +19,7 @@ app.use(Row); ### 基础用法 -Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比 -此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同 +Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性设置列所占的宽度百分比。此外，添加 `offset` 属性可以设置列的偏移宽度，计算方式与 span 相同。 ```html @@ -41,7 +40,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置 ### 设置列元素间距 -通过`gutter`属性可以设置列元素之间的间距，默认间距为 0 +通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0。 ```html @@ -53,7 +52,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置 ### Flex 布局 -将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐 +将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐。 ```html diff --git a/src/collapse/README.md b/src/collapse/README.md index c8c4373b1..7ad8dbc21 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -15,7 +15,7 @@ app.use(CollapseItem); ### Basic Usage -Use `v-model` to control the name of active panels +Use `v-model` to control the name of active panels. ```html diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index 51e524a8a..44ac4adf0 100644 --- a/src/collapse/README.zh-CN.md +++ b/src/collapse/README.zh-CN.md @@ -15,7 +15,7 @@ app.use(CollapseItem); ### 基础用法 -通过`v-model`控制展开的面板列表，`activeNames`为数组格式 +通过 `v-model` 控制展开的面板列表，`activeNames` 为数组格式。 ```html @@ -37,7 +37,7 @@ export default { ### 手风琴 -通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式 +通过 `accordion` 可以设置为手风琴模式，最多展开一个面板，此时 `activeName` 为字符串格式。 ```html diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md index ff38113c6..497639234 100644 --- a/src/divider/README.zh-CN.md +++ b/src/divider/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(Divider); ### 基础用法 -默认渲染一条水平分割线 +默认渲染一条水平分割线。 ```html @@ -22,7 +22,7 @@ app.use(Divider); ### 展示文字 -通过插槽在可以分割线中间插入内容 +通过插槽在可以分割线中间插入内容。 ```html 文字 @@ -30,7 +30,7 @@ app.use(Divider); ### 内容位置 -通过`content-position`指定内容所在位置 +通过 `content-position` 指定内容所在位置。 ```html 文字 @@ -39,7 +39,7 @@ app.use(Divider); ### 虚线 -添加`dashed`属性使分割线渲染为虚线 +添加 `dashed` 属性使分割线渲染为虚线。 ```html 文字 @@ -47,7 +47,7 @@ app.use(Divider); ### 自定义样式 -可以直接通过`style`属性设置分割线的样式 +可以直接通过 `style` 属性设置分割线的样式。 ```html diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 4ebf86179..59ebfe36a 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -45,7 +45,7 @@ export default { ### 自定义菜单内容 -通过插槽可以自定义`DropdownItem`的内容，此时需要使用实例上的`toggle`方法手动控制菜单的显示 +通过插槽可以自定义 `DropdownItem` 的内容，此时需要使用实例上的 `toggle` 方法手动控制菜单的显示。 ```html @@ -94,7 +94,7 @@ export default { ### 自定义选中态颜色 -通过`active-color`属性可以自定义菜单标题和选项的选中态颜色 +通过 `active-color` 属性可以自定义菜单标题和选项的选中态颜色。 ```html @@ -105,7 +105,7 @@ export default { ### 向上展开 -将`direction`属性值设置为`up`，菜单即可向上展开 +将 `direction` 属性值设置为 `up`，菜单即可向上展开。 ```html diff --git a/src/empty/README.md b/src/empty/README.md index 60a87c205..f80be3f2a 100644 --- a/src/empty/README.md +++ b/src/empty/README.md @@ -20,7 +20,7 @@ app.use(Empty); ### Image Type -Use the image prop to display different placeholder images +Use the image prop to display different placeholder images. ```html diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md index 18e4ff7b1..f53532fd8 100644 --- a/src/empty/README.zh-CN.md +++ b/src/empty/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -空状态时的占位提示，2.6 版本开始支持此组件 +空状态时的占位提示，2.6 版本开始支持此组件。 ### 引入 @@ -24,7 +24,7 @@ app.use(Empty); ### 图片类型 -Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用 +Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。 ```html @@ -37,7 +37,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 ### 自定义图片 -需要自定义图片时，可以在 image 属性中传入任意图片 URL +需要自定义图片时，可以在 image 属性中传入任意图片 URL。 ```html diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index fa87665a8..d4106d2b1 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件 +用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件。 ### 引入 diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md index 676dc353b..f986b7316 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航 +宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。 ### 引入 @@ -19,7 +19,7 @@ app.use(GridItem); ### 基础用法 -通过`icon`属性设置格子内的图标，`text`属性设置文字内容 +通过 `icon` 属性设置格子内的图标，`text` 属性设置文字内容。 ```html @@ -32,7 +32,7 @@ app.use(GridItem); ### 自定义列数 -默认一行展示四个格子，可以通过`column-num`自定义列数 +默认一行展示四个格子，可以通过 `column-num` 自定义列数。 ```html @@ -42,7 +42,7 @@ app.use(GridItem); ### 自定义内容 -通过插槽可以自定义格子展示的内容 +通过插槽可以自定义格子展示的内容。 ```html @@ -60,7 +60,7 @@ app.use(GridItem); ### 正方形格子 -设置`square`属性后，格子的高度会和宽度保持一致 +设置 `square` 属性后，格子的高度会和宽度保持一致。 ```html @@ -70,7 +70,7 @@ app.use(GridItem); ### 格子间距 -通过`gutter`属性设置格子之间的距离 +通过 `gutter` 属性设置格子之间的距离。 ```html @@ -80,7 +80,7 @@ app.use(GridItem); ### 内容横排 -将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列 +将 `direction` 属性设置为 `horizontal`，可以让宫格的内容呈横向排列。 ```html @@ -92,7 +92,7 @@ app.use(GridItem); ### 页面导航 -通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接 +通过 `to` 属性设置 `vue-router` 跳转链接，通过 `url` 属性设置 URL 跳转链接。 ```html @@ -103,7 +103,7 @@ app.use(GridItem); ### 徽标提示 -设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 +设置 `dot` 属性后，会在图标右上角展示一个小红点。设置 `badge` 属性后，会在图标右上角展示相应的徽标。 ```html diff --git a/src/icon/README.md b/src/icon/README.md index e30747930..fab273bb6 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -14,7 +14,7 @@ app.use(Icon); ### Basic Usage -Use `name` prop to set icon name or icon URL +Use `name` prop to set icon name or icon URL. ```html @@ -35,7 +35,7 @@ Use `badge` prop, the badge will be displayed in the upper right corner of the i ### Icon Color -Use `color` prop to set icon color +Use `color` prop to set icon color. ```html @@ -44,7 +44,7 @@ Use `color` prop to set icon color ### Icon Size -Use `size` prop to set icon size +Use `size` prop to set icon size. ```html diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index 3aa71c301..980d46dcb 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用 +基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 `icon` 属性引用。 ### 引入 @@ -18,7 +18,7 @@ app.use(Icon); ### 基础用法 -`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例 +`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。 ```html @@ -27,7 +27,7 @@ app.use(Icon); ### 徽标提示 -设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 +设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。 ```html @@ -37,7 +37,7 @@ app.use(Icon); ### 图标颜色 -`Icon`的`color`属性用来设置图标的颜色 +`Icon` 的 `color` 属性用来设置图标的颜色。 ```html @@ -46,7 +46,7 @@ app.use(Icon); ### 图标大小 -`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px` +`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。 ```html @@ -54,7 +54,7 @@ app.use(Icon); ### 使用本地字体文件 -Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader` +Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置 `url-loader`。 ```js import 'vant/lib/icon/local.css'; @@ -62,7 +62,7 @@ import 'vant/lib/icon/local.css'; ### 自定义图标 -如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用 +如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。 ```css /* 引入第三方或自定义的字体图标样式 */ diff --git a/src/image-preview/README.md b/src/image-preview/README.md index df70fda0a..67739b83b 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -35,7 +35,7 @@ ImagePreview({ ### Show Close Icon -After setting the `closeable` attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the `close-icon` attribute, and the icon location can be customized by using the `close-icon-position` attribute +After setting the `closeable` attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the `close-icon` attribute, and the icon location can be customized by using the `close-icon-position` attribute. ```js ImagePreview({ diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 8a5e78809..78e17b0a8 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -63,7 +63,7 @@ ImagePreview({ ### 展示关闭按钮 -设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。 +设置 `closeable` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标，使用`close-icon-position` 属性可以自定义图标位置。 ```js ImagePreview({ diff --git a/src/image/README.md b/src/image/README.md index 2cdf20c7d..e043826e1 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -31,7 +31,7 @@ app.use(VanImage); ### Round -Show round image, it may not works at `fit=contain` and `fit=scale-down` +Show round image, it may not works at `fit=contain` and `fit=scale-down`. ```html @@ -26,7 +26,7 @@ app.use(VanImage); ### 填充模式 -通过`fit`属性可以设置图片填充模式，可选值见下方表格 +通过 `fit` 属性可以设置图片填充模式，可选值见下方表格。 ```html @@ -85,7 +85,7 @@ app.use(Lazyload); ### 加载失败提示 -`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容 +`Image` 组件提供了默认的加载失败提示，支持通过 `error` 插槽自定义内容。 ```html diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index fe5ea775d..73b40b8b6 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -15,7 +15,7 @@ app.use(IndexAnchor); ### 基础用法 -点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置 +点击索引栏时，会自动跳转到对应的 `IndexAnchor` 锚点位置。 ```html @@ -35,7 +35,7 @@ app.use(IndexAnchor); ### 自定义索引列表 -可以通过`index-list`属性自定义展示的索引字符列表， +可以通过 `index-list` 属性自定义展示的索引字符列表。 ```html diff --git a/src/lazyload/README.zh-CN.md b/src/lazyload/README.zh-CN.md index a07f0c977..b12ed5d8d 100644 --- a/src/lazyload/README.zh-CN.md +++ b/src/lazyload/README.zh-CN.md @@ -2,7 +2,7 @@ ### 引入 -`Lazyload` 是 `Vue` 指令，使用前需要对指令进行注册 +`Lazyload` 是 `Vue` 指令，使用前需要对指令进行注册。 ```js import { createApp } from 'vue'; @@ -21,7 +21,7 @@ app.use(Lazyload, { ### 基础用法 -将`v-lazy`指令的值设置为你需要懒加载的图片 +将 `v-lazy` 指令的值设置为你需要懒加载的图片。 ```html @@ -42,7 +42,7 @@ export default { ### 背景图懒加载 -和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。 +和图片懒加载不同，背景图懒加载需要使用 `v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。 ```html
@@ -50,7 +50,7 @@ export default { ### 组件懒加载 -将需要懒加载的组件放在`lazy-component`标签中，即可实现组件懒加载。 +将需要懒加载的组件放在 `lazy-component` 标签中，即可实现组件懒加载。 ```js // 注册时设置`lazyComponent`选项 diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index 6a5099e1d..3955d1306 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -18,7 +18,7 @@ app.use(List); ### 基础用法 -List 组件通过`loading`和`finished`两个变量控制加载状态，当组件滚动到底部时，会触发`load`事件并将`loading`设置成`true`。此时可以发起异步操作并更新数据，数据更新完毕后，将`loading`设置成`false`即可。若数据已全部加载完毕，则直接将`finished`设置成`true`即可。 +List 组件通过 `loading` 和 `finished` 两个变量控制加载状态，当组件滚动到底部时，会触发 `load` 事件并将 `loading` 设置成 `true`。此时可以发起异步操作并更新数据，数据更新完毕后，将 `loading` 设置成 `false` 即可。若数据已全部加载完毕，则直接将 `finished` 设置成 `true` 即可。 ```html diff --git a/src/loading/README.md b/src/loading/README.md index ad7b0636b..cbc7fbf99 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -15,19 +15,25 @@ app.use(Loading); ### Type ```html - + + + ``` ### Color ```html - + + + ``` ### Size ```html - + + + ``` ### Text diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index 98ad87167..e9e41aae4 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -14,31 +14,37 @@ app.use(Loading); ### 加载类型 -通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner` +通过 `type` 属性可以设置加载图标的类型，默认为 `circular`，可选值为 `spinner`。 ```html - + + + ``` ### 自定义颜色 -通过`color`属性设置加载图标的颜色 +通过 `color` 属性设置加载图标的颜色。 ```html - + + + ``` ### 自定义大小 -通过`size`属性设置加载图标的大小，默认单位为`px` +通过 `size` 属性设置加载图标的大小，默认单位为 `px`。 ```html - + + + ``` ### 加载文案 -可以使用默认插槽在图标的右侧插入加载文案 +可以使用默认插槽在图标的右侧插入加载文案。 ```html 加载中... @@ -46,7 +52,7 @@ app.use(Loading); ### 垂直排列 -设置`vertical`属性后，图标和文案会垂直排列 +设置 `vertical` 属性后，图标和文案会垂直排列。 ```html 加载中... diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 70e0f8f81..83f63d70b 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -42,7 +42,7 @@ export default { ### 使用插槽 -通过插槽自定义导航栏两侧的内容 +通过插槽自定义导航栏两侧的内容。 ```html diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index fae8eacd5..a3af15944 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -62,7 +62,7 @@ export default { ### IdNumber Keyboard -Use `extra-key` prop to set the content of bottom left button +Use `extra-key` prop to set the content of bottom left button. ```html @@ -81,7 +81,7 @@ Use `extra-key` prop to set the content of bottom left button ### Keyboard With Title -Use `title` prop to set keyboard title +Use `title` prop to set keyboard title. ```html diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 5599c182b..782f5e17f 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用 +数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。 ### 引入 @@ -18,7 +18,7 @@ app.use(NumberKeyboard); ### 默认样式 -数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作 +数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作。 ```html @@ -56,7 +56,7 @@ export default { ### 带右侧栏的键盘 -将 theme 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景 +将 theme 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景。 ```html @@ -90,7 +90,7 @@ export default { ### 键盘标题 -通过 `title` 属性可以设置键盘标题 +通过 `title` 属性可以设置键盘标题。 ```html @@ -109,7 +109,7 @@ export default { ### 配置多个按键 -当 theme 为 `custom` 时，支持以数组的形式配置两个 `extra-key` +当 theme 为 `custom` 时，支持以数组的形式配置两个 `extra-key`。 ```html @@ -127,7 +127,7 @@ export default { ### 双向绑定 -可以通过 `v-model` 绑定键盘当前输入值 +可以通过 `v-model` 绑定键盘当前输入值。 ```html diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md index be2537e16..41da85523 100644 --- a/src/overlay/README.zh-CN.md +++ b/src/overlay/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作 +创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。 ### 引入 @@ -35,7 +35,7 @@ export default { ### 嵌入内容 -通过默认插槽可以在遮罩层上嵌入任意内容 +通过默认插槽可以在遮罩层上嵌入任意内容。 ```html diff --git a/src/password-input/README.md b/src/password-input/README.md index e14e28b0c..ab7cec4d7 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -80,7 +80,7 @@ export default { ### Hint Error -Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits +Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits. ```html diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index b09e04a56..8aa2aa537 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用 +带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。 ### 引入 @@ -80,7 +80,7 @@ export default { ### 错误提示 -通过`error-info`属性可以设置错误提示信息，例如当输入六位时提示密码错误 +通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。 ```html diff --git a/src/picker/README.md b/src/picker/README.md index 8bc98736f..7bc0dc8d5 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -173,7 +173,7 @@ export default { ### Loading -When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt +When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt. ```html diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index efa63a6b3..492e6a7bb 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -提供多个选项集合供用户选择，支持单列选择和多列级联，通常与[弹出层](#/zh-CN/popup)组件配合使用 +提供多个选项集合供用户选择，支持单列选择和多列级联，通常与[弹出层](#/zh-CN/popup)组件配合使用。 ### 引入 @@ -20,11 +20,11 @@ app.use(Picker); #### 选项配置 -Picker 组件通过`columns`属性配置选项数据，`columns`是一个包含字符串或对象的数组。 +Picker 组件通过 `columns` 属性配置选项数据，`columns` 是一个包含字符串或对象的数组。 #### 顶部栏 -顶部栏包含标题、确认按钮和取消按钮，点击确认按钮触发`confirm`事件，点击取消按钮触发`cancel`事件 +顶部栏包含标题、确认按钮和取消按钮，点击确认按钮触发 `confirm` 事件，点击取消按钮触发 `cancel` 事件。 ```html @@ -69,7 +69,7 @@ export default { ### 多列选择 -`columns`属性可以通过对象数组的形式配置多列选择，对象中可以配置选项数据、初始选中项等，详细格式见[下方表格](#/zh-CN/picker#column-shu-ju-jie-gou)。 +`columns` 属性可以通过对象数组的形式配置多列选择，对象中可以配置选项数据、初始选中项等，详细格式见[下方表格](#/zh-CN/picker#column-shu-ju-jie-gou)。 ```html @@ -98,7 +98,7 @@ export default { ### 级联选择 -使用`columns`的`children`字段可以实现选项级联的效果（从 2.4.5 版本开始支持） +使用 `columns` 的 `children` 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。 ```html @@ -145,7 +145,7 @@ export default { ### 禁用选项 -选项可以为对象结构，通过设置 disabled 来禁用该选项 +选项可以为对象结构，通过设置 `disabled` 来禁用该选项。 ```html @@ -167,7 +167,7 @@ export default { ### 动态设置选项 -通过 Picker 上的实例方法可以更灵活地控制选择器，比如使用`setColumnValues`方法实现多列联动 +通过 Picker 上的实例方法可以更灵活地控制选择器，比如使用 `setColumnValues` 方法实现多列联动。 ```html @@ -195,7 +195,7 @@ export default { ### 加载状态 -若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示 +若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示。 ```html @@ -220,7 +220,7 @@ export default { ### 搭配弹出层使用 -在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup 和 Field 实现该效果 +在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup 和 Field 实现该效果。 ```html @@ -83,7 +83,7 @@ Use `position` prop to set popup display position ### Get Container -Use `teleport` prop to specify mount location +Use `teleport` prop to specify mount location. ```html diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 5ff0ff169..51838db87 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示 +弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。 ### 引入 @@ -18,7 +18,7 @@ app.use(Popup); ### 基础用法 -通过 `v-model:show` 控制弹出层是否展示 +通过 `v-model:show` 控制弹出层是否展示。 ```html 展示弹出层 @@ -43,7 +43,7 @@ export default { ### 弹出位置 -通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right` +通过 `position` 属性设置弹出位置，默认居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。 ```html @@ -51,7 +51,7 @@ export default { ### 关闭图标 -设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置 +设置 `closeable` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标，使用 `close-icon-position` 属性可以自定义图标位置。 ```html diff --git a/src/progress/README.md b/src/progress/README.md index 0e42f70c4..362a2486f 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -14,7 +14,7 @@ app.use(Progress); ### Basic Usage -Use 'percentage' prop to set current progress +Use `percentage` prop to set current progress. ```html @@ -34,7 +34,7 @@ Use 'percentage' prop to set current progress ### Custom Style -Use `pivot-text` to custom text，use `color` to custom bar color +Use `pivot-text` to custom text，use `color` to custom bar color. ```html diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md index bce49f8be..f7afac58b 100644 --- a/src/progress/README.zh-CN.md +++ b/src/progress/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(Progress); ### 基础用法 -进度条默认为蓝色，使用`percentage`属性来设置当前进度 +进度条默认为蓝色，使用 `percentage` 属性来设置当前进度。 ```html @@ -22,7 +22,7 @@ app.use(Progress); ### 线条粗细 -通过`stroke-width`可以设置进度条的粗细 +通过 `stroke-width` 可以设置进度条的粗细。 ```html @@ -30,7 +30,7 @@ app.use(Progress); ### 置灰 -设置`inactive`属性后进度条将置灰 +设置 `inactive` 属性后进度条将置灰。 ```html @@ -38,7 +38,7 @@ app.use(Progress); ### 样式定制 -可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 +可以使用 `pivot-text` 属性自定义文字，`color` 属性自定义进度条颜色。 ```html diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index 5cc03f5d0..ed8fff9bd 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -60,7 +60,7 @@ Use `success-text` to set the success prompt after the refresh is successful ### Custom Tips -Use slots to custom tips +Use slots to custom tips. ```html diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index e0ef5036b..0c84b9bda 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -46,7 +46,7 @@ export default { ### 成功提示 -通过`success-text`可以设置刷新成功后的顶部提示文案 +通过 `success-text` 可以设置刷新成功后的顶部提示文案。 ```html diff --git a/src/radio/README.md b/src/radio/README.md index 3a8bda38c..d312caa7b 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -15,7 +15,7 @@ app.use(RadioGroup); ### Basic Usage -Use `v-model` to bind the name of checked radio +Use `v-model` to bind the name of checked radio. ```html @@ -102,8 +102,8 @@ Use icon slot to custom icon > + } + ``` ```js diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md index a81cafd1e..91ff58ea6 100644 --- a/src/radio/README.zh-CN.md +++ b/src/radio/README.zh-CN.md @@ -15,7 +15,7 @@ app.use(RadioGroup); ### 基础用法 -通过`v-model`绑定值当前选中项的 name +通过 `v-model` 绑定值当前选中项的 name。 ```html @@ -36,7 +36,7 @@ export default { ### 水平排列 -将`direction`属性设置为`horizontal`后，单选框组会变成水平排列 +将 `direction` 属性设置为 `horizontal` 后，单选框组会变成水平排列。 ```html @@ -47,7 +47,7 @@ export default { ### 禁用状态 -通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项 +通过 `disabled` 属性禁止选项切换，在 `Radio` 上设置 `disabled` 可以禁用单个选项。 ```html @@ -58,7 +58,7 @@ export default { ### 自定义形状 -将`shape`属性设置为`square`，单选框的形状会变成方形 +将 `shape` 属性设置为 `square`，单选框的形状会变成方形。 ```html @@ -69,7 +69,7 @@ export default { ### 自定义颜色 -通过`checked-color`属性设置选中状态的图标颜色 +通过 `checked-color` 属性设置选中状态的图标颜色。 ```html @@ -80,7 +80,7 @@ export default { ### 自定义大小 -通过`icon-size`属性可以自定义图标的大小 +通过 `icon-size` 属性可以自定义图标的大小。 ```html @@ -91,7 +91,7 @@ export default { ### 自定义图标 -通过`icon`插槽自定义图标，并通过`slotProps`判断是否为选中状态 +通过 `icon` 插槽自定义图标，并通过 `slotProps` 判断是否为选中状态。 ```html @@ -130,7 +130,7 @@ export default { ### 禁用文本点击 -设置`label-disabled`属性后，点击图标以外的内容不会触发单选框切换 +设置 `label-disabled` 属性后，点击图标以外的内容不会触发单选框切换。 ```html @@ -141,7 +141,7 @@ export default { ### 与 Cell 组件一起使用 -此时你需要再引入`Cell`和`CellGroup`组件 +此时你需要再引入 `Cell` 和 `CellGroup` 组件。 ```html diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index 816b577a4..8ad31380c 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(Search); ### 基础用法 -v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色。 +`v-model` 用于控制搜索框中的文字，`background` 可以自定义搜索框外部背景色。 ```html diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md index c46a7f7df..5b6358c68 100644 --- a/src/skeleton/README.zh-CN.md +++ b/src/skeleton/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(Skeleton); ### 基础用法 -通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数 +通过 `title` 属性显示标题占位图，通过 `row` 属性配置占位段落行数。 ```html @@ -22,7 +22,7 @@ app.use(Skeleton); ### 显示头像 -通过`avatar`属性显示头像占位图 +通过 `avatar` 属性显示头像占位图。 ```html @@ -30,7 +30,7 @@ app.use(Skeleton); ### 展示子组件 -将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件 +将 `loading` 属性设置成 `false` 表示内容加载完成，此时会隐藏占位图，并显示 `Skeleton` 的子组件。 ```html diff --git a/src/slider/README.md b/src/slider/README.md index 4d7c31131..d0824d8df 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -37,7 +37,7 @@ export default { ### Dual thumb -Add `range` attribute to open dual thumb mode +Add `range` attribute to open dual thumb mode. ```html diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index 7dcfea626..1d0f3b7e4 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -37,7 +37,7 @@ export default { ### 双滑块 -添加`range`属性就可以开启双滑块模式，确保`value`的值是一个数组 +添加 `range` 属性就可以开启双滑块模式，确保 `value` 的值是一个数组。 ```html diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md index 997123fe7..117c20887 100644 --- a/src/stepper/README.zh-CN.md +++ b/src/stepper/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字 +步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。 ### 引入 @@ -18,7 +18,7 @@ app.use(Stepper); ### 基础用法 -通过`v-model`绑定输入值，可以通过`change`事件监听到输入值的变化 +通过 `v-model` 绑定输入值，可以通过 `change` 事件监听到输入值的变化。 ```html @@ -36,7 +36,7 @@ export default { ### 步长设置 -通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为`1` +通过 `step` 属性设置每次点击增加或减少按钮时变化的值，默认为 `1`。 ```html @@ -44,7 +44,7 @@ export default { ### 限制输入范围 -通过`min`和`max`属性限制输入值的范围 +通过 `min` 和 `max` 属性限制输入值的范围。 ```html @@ -52,7 +52,7 @@ export default { ### 限制输入整数 -设置`integer`属性后，输入框将限制只能输入整数 +设置 `integer` 属性后，输入框将限制只能输入整数。 ```html @@ -60,7 +60,7 @@ export default { ### 禁用状态 -通过设置`disabled`属性来禁用步进器，禁用状态下无法点击按钮或修改输入框 +通过设置 `disabled` 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。 ```html @@ -68,7 +68,7 @@ export default { ### 禁用输入框 -通过设置`disable-input`属性来禁用输入框，此时按钮仍然可以点击 +通过设置 `disable-input` 属性来禁用输入框，此时按钮仍然可以点击。 ```html @@ -76,7 +76,7 @@ export default { ### 固定小数位数 -通过设置`decimal-length`属性可以保留固定的小数位数 +通过设置 `decimal-length` 属性可以保留固定的小数位数。 ```html @@ -84,7 +84,7 @@ export default { ### 自定义大小 -通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度 +通过 `input-width` 属性设置输入框宽度，通过 `button-size` 属性设置按钮大小和输入框高度。 ```html @@ -92,7 +92,7 @@ export default { ### 异步变更 -如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value` +如果需要异步地修改输入框的值，可以设置 `async-change` 属性，并在 `change` 事件中手动修改 `value`。 ```html @@ -124,7 +124,7 @@ export default { ### 圆角风格 -将 theme 设置为 `round` 来展示圆角风格的步进器 +将 `theme` 设置为 `round` 来展示圆角风格的步进器。 ```html diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index 934cc70e6..c2116d3e0 100644 --- a/src/steps/README.zh-CN.md +++ b/src/steps/README.zh-CN.md @@ -15,7 +15,7 @@ app.use(Steps); ### 基础用法 -`active`属性表示当前步骤的索引，从 0 起计 +`active` 属性表示当前步骤的索引，从 0 起计。 ```html @@ -38,7 +38,7 @@ export default { ### 自定义样式 -可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色 +可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色。 ```html @@ -51,7 +51,7 @@ export default { ### 竖向步骤条 -可以通过设置`direction`属性来改变步骤条的显示方向 +可以通过设置 `direction` 属性来改变步骤条的显示方向。 ```html diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md index 85e7afcb3..15e6d8e8e 100644 --- a/src/sticky/README.zh-CN.md +++ b/src/sticky/README.zh-CN.md @@ -18,7 +18,7 @@ app.use(Sticky); ### 基础用法 -将内容包裹在`Sticky`组件内即可 +将内容包裹在 `Sticky` 组件内即可。 ```html @@ -28,7 +28,7 @@ app.use(Sticky); ### 吸顶距离 -通过`offset-top`属性可以设置组件在吸顶时与顶部的距离 +通过 `offset-top` 属性可以设置组件在吸顶时与顶部的距离。 ```html @@ -38,7 +38,7 @@ app.use(Sticky); ### 指定容器 -通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部 +通过 `container` 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部。 ```html
diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index 04f624f8b..d388b4827 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -20,7 +20,7 @@ app.use(SubmitBar); ### 禁用状态 -禁用状态下不会触发`submit`事件 +禁用状态下不会触发 `submit` 事件。 ```html diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index b7190001f..4680d4c3d 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(SwipeCell); ### 基础用法 -`SwipeCell`组件提供了`left`和`right`两个插槽，用于定义两侧滑动区域的内容 +`SwipeCell` 组件提供了 `left` 和 `right` 两个插槽，用于定义两侧滑动区域的内容。 ```html @@ -31,7 +31,7 @@ app.use(SwipeCell); ### 自定义内容 -`SwipeCell`内容可以嵌套任意内容，比如嵌套一个商品卡片 +`SwipeCell` 可以嵌套任意内容，比如嵌套一个商品卡片。 ```html @@ -62,7 +62,7 @@ app.use(SwipeCell); ### 异步关闭 -通过传入`before-close`回调函数，可以自定义两侧滑动内容关闭时的行为 +通过传入 `before-close` 回调函数，可以自定义两侧滑动内容关闭时的行为。 ```html diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md index 1a6c020da..4ca654661 100644 --- a/src/switch/README.zh-CN.md +++ b/src/switch/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(Switch); ### 基础用法 -通过`v-model`绑定开关的选中状态，`true`表示开，`false`表示关 +通过 `v-model` 绑定开关的选中状态，`true` 表示开，`false` 表示关。 ```html @@ -32,7 +32,7 @@ export default { ### 禁用状态 -通过`disabled`属性来禁用开关，禁用状态下开关不可点击 +通过 `disabled` 属性来禁用开关，禁用状态下开关不可点击。 ```html @@ -40,7 +40,7 @@ export default { ### 加载状态 -通过`loading`属性设置开关为加载状态，加载状态下开关不可点击 +通过 `loading` 属性设置开关为加载状态，加载状态下开关不可点击。 ```html @@ -48,7 +48,7 @@ export default { ### 自定义大小 -通过`size`属性自定义开关的大小 +通过 `size` 属性自定义开关的大小。 ```html @@ -56,7 +56,7 @@ export default { ### 自定义颜色 -`active-color`属性表示打开时的背景色，`inactive-color`表示关闭时的背景色 +`active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。 ```html diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 240031d3d..f528f506a 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -68,7 +68,7 @@ export default { ### Custom Icon -Use `icon` slot to custom icon +Use `icon` slot to custom icon. ```html diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index a563d7b2c..5ec4d6910 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -15,7 +15,7 @@ app.use(TabbarItem); ### 基础用法 -`v-model`默认绑定选中标签的索引值，通过修改`v-model`即可切换选中的标签 +`v-model` 默认绑定选中标签的索引值，通过修改 `v-model` 即可切换选中的标签。 ```html @@ -38,7 +38,7 @@ export default { ### 通过名称匹配 -在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name` +在标签指定 `name` 属性的情况下，`v-model` 的值为当前标签的 `name`。 ```html @@ -61,7 +61,7 @@ export default { ### 徽标提示 -设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 +设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。 ```html @@ -74,7 +74,7 @@ export default { ### 自定义图标 -通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断标签是否选中 +通过 `icon` 插槽自定义图标，可以通过 `slot-scope` 判断标签是否选中。 ```html @@ -139,7 +139,7 @@ export default { ### 路由模式 -标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签 +标签栏支持路由模式，用于搭配 `vue-router` 使用。路由模式下会匹配页面路径和标签的 `to` 属性，并自动选中对应的标签。 ```html diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index f9057d144..aa5731c95 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -83,7 +83,7 @@ Toast({ ### 动态更新提示 -执行 Toast 方法时会返回对应的 Toast 实例，通过修改实例上的 message 属性可以实现动态更新提示的效果。 +执行 Toast 方法时会返回对应的 Toast 实例，通过修改实例上的 `message` 属性可以实现动态更新提示的效果。 ```js const toast = Toast.loading({ @@ -133,7 +133,7 @@ toast2.clear(); ### 修改默认配置 -通过`Toast.setDefaultOptions`函数可以全局修改 Toast 的默认配置。 +通过 `Toast.setDefaultOptions` 函数可以全局修改 Toast 的默认配置。 ```js // 将所有 Toast 的展示时长设置为 2000 毫秒 diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index fff3fa8cf..98457593b 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -14,7 +14,7 @@ app.use(TreeSelect); ### 单选模式 -`item`为分类显示所需的数据，数据格式见下方示例。`main-active-index`表示左侧高亮选项的索引，`active-id`表示右侧高亮选项的 id +`item` 为分类显示所需的数据，数据格式见下方示例。`main-active-index` 表示左侧高亮选项的索引，`active-id` 表示右侧高亮选项的 id。 ```html .preview-cover { position: absolute; - box-sizing: border-box; bottom: 0; + box-sizing: border-box; width: 100%; padding: 4px; color: #fff; diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 3d1118aab..9472037d0 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -33,7 +33,7 @@ export default { ### 文件预览 -通过`v-model`可以绑定已经上传的文件列表，并展示文件列表的预览图。 +通过 `v-model` 可以绑定已经上传的文件列表，并展示文件列表的预览图。 ```html @@ -157,8 +157,8 @@ export default {