mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
c2d5a18f59
@ -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
|
||||
|
||||
|
||||
@ -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)。
|
||||
|
||||
## 快速上手
|
||||
|
||||
|
||||
@ -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 样式无法被编译。
|
||||
|
||||
### 在桌面端使用
|
||||
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# 更新日志
|
||||
|
||||
### v2.6.0
|
||||
|
||||
`2020-09-27`
|
||||
|
||||
- 优化站点样式
|
||||
|
||||
### v2.5.5
|
||||
|
||||
`2020-09-26`
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--title {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--text {
|
||||
|
||||
@ -85,7 +85,6 @@ export default {
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&--small {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
background-color: #fff;
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@ -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
|
||||
<van-action-bar>
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
|
||||
### 徽标提示
|
||||
|
||||
在 ActionBarIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||
在 ActionBarIcon 组件上设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-action-bar>
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
|
||||
### 自定义图标颜色
|
||||
|
||||
通过 ActionBarIcon 的`color`属性可以自定义图标的颜色
|
||||
通过 ActionBarIcon 的 `color` 属性可以自定义图标的颜色。
|
||||
|
||||
```html
|
||||
<van-action-bar>
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
|
||||
### 自定义按钮颜色
|
||||
|
||||
通过 ActionBarButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
|
||||
通过 ActionBarButton 的 `color` 属性可以自定义按钮的颜色，支持传入 `linear-gradient` 渐变色。
|
||||
|
||||
```html
|
||||
<van-action-bar>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
省市区三级联动选择，通常与[弹出层](#/zh-CN/popup)组件配合使用
|
||||
省市区三级联动选择，通常与[弹出层](#/zh-CN/popup)组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,7 +18,7 @@ app.use(Area);
|
||||
|
||||
### 基础用法
|
||||
|
||||
要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
|
||||
要初始化一个 `Area` 组件，你需要传入一个 `area-list` 属性，数据格式具体可看下面数据格式章节。
|
||||
|
||||
```html
|
||||
<van-area title="标题" :area-list="areaList" />
|
||||
@ -26,7 +26,7 @@ app.use(Area);
|
||||
|
||||
### 选中省市区
|
||||
|
||||
如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
|
||||
如果想选中某个省市区，需要传入一个 `value` 属性，绑定对应的省市区 `code`。
|
||||
|
||||
```html
|
||||
<van-area title="标题" :area-list="areaList" value="110101" />
|
||||
@ -34,7 +34,7 @@ app.use(Area);
|
||||
|
||||
### 配置显示列
|
||||
|
||||
可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择
|
||||
可以通过 `columns-num` 属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为 `2`，则只会显示省市选择。
|
||||
|
||||
```html
|
||||
<van-area title="标题" :area-list="areaList" :columns-num="2" />
|
||||
@ -42,7 +42,7 @@ app.use(Area);
|
||||
|
||||
### 配置列占位提示文字
|
||||
|
||||
可以通过`columns-placeholder`属性配置每一列的占位提示文字
|
||||
可以通过 `columns-placeholder` 属性配置每一列的占位提示文字。
|
||||
|
||||
```html
|
||||
<van-area
|
||||
|
||||
@ -26,7 +26,7 @@ app.use(Card);
|
||||
|
||||
### 营销信息
|
||||
|
||||
通过`origin-price`设置商品原价，通过`tag`设置商品左上角标签
|
||||
通过 `origin-price` 设置商品原价，通过 `tag` 设置商品左上角标签。
|
||||
|
||||
```html
|
||||
<van-card
|
||||
@ -42,7 +42,7 @@ app.use(Card);
|
||||
|
||||
### 自定义内容
|
||||
|
||||
`Card`组件提供了多个插槽，可以灵活地自定义内容
|
||||
`Card` 组件提供了多个插槽，可以灵活地自定义内容。
|
||||
|
||||
```html
|
||||
<van-card
|
||||
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
|
||||
### Custom Icon
|
||||
|
||||
Use icon slot to custom icon
|
||||
Use icon slot to custom icon.
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">
|
||||
|
||||
@ -15,7 +15,7 @@ app.use(CheckboxGroup);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定复选框的勾选状态
|
||||
通过 `v-model` 绑定复选框的勾选状态。
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">复选框</van-checkbox>
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过设置`disabled`属性可以禁用复选框
|
||||
通过设置 `disabled` 属性可以禁用复选框。
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
@ -41,7 +41,7 @@ export default {
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`shape`属性设置为`square`，复选框的形状会变成方形
|
||||
将 `shape` 属性设置为 `square`，复选框的形状会变成方形。
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性设置选中状态的图标颜色
|
||||
通过 `checked-color` 属性设置选中状态的图标颜色。
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
|
||||
@ -57,7 +57,7 @@ export default {
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`icon-size`属性可以自定义图标的大小
|
||||
通过 `icon-size` 属性可以自定义图标的大小。
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" icon-size="24px">复选框</van-checkbox>
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标，可以通过`slotProps`判断是否为选中状态
|
||||
通过 `icon` 插槽自定义图标，可以通过 `slotProps` 判断是否为选中状态.
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换
|
||||
设置 `label-disabled` 属性后，点击图标以外的内容不会触发复选框切换。
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
|
||||
@ -104,7 +104,7 @@ export default {
|
||||
|
||||
### 复选框组
|
||||
|
||||
复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态
|
||||
复选框可以与复选框组一起使用，复选框组通过 `v-model` 数组绑定复选框的勾选状态。
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
@ -125,7 +125,7 @@ export default {
|
||||
|
||||
### 水平排列
|
||||
|
||||
将`direction`属性设置为`horizontal`后，复选框组会变成水平排列
|
||||
将 `direction` 属性设置为 `horizontal` 后，复选框组会变成水平排列。
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" direction="horizontal">
|
||||
@ -146,7 +146,7 @@ export default {
|
||||
|
||||
### 限制最大可选数
|
||||
|
||||
通过`max`属性可以限制复选框组的最大可选数
|
||||
通过 `max` 属性可以限制复选框组的最大可选数。
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
@ -158,7 +158,7 @@ export default {
|
||||
|
||||
### 全选与反选
|
||||
|
||||
通过`CheckboxGroup`实例上的`toggleAll`方法可以实现全选与反选
|
||||
通过 `CheckboxGroup` 实例上的 `toggleAll` 方法可以实现全选与反选。
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" ref="checkboxGroup">
|
||||
@ -191,7 +191,7 @@ export default {
|
||||
|
||||
### 搭配单元格组件使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件，并通过`Checkbox`实例上的 toggle 方法触发切换
|
||||
此时你需要再引入 `Cell` 和 `CellGroup` 组件，并通过 `Checkbox` 实例上的 toggle 方法触发切换。
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
|
||||
@ -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
|
||||
<van-circle
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
|
||||
### 宽度定制
|
||||
|
||||
通过`stroke-width`属性来控制进度条宽度
|
||||
通过 `stroke-width` 属性来控制进度条宽度。
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
|
||||
### 颜色定制
|
||||
|
||||
通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色
|
||||
通过 `color` 属性来控制进度条颜色，`layer-color` 属性来控制轨道颜色。
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
|
||||
### 渐变色
|
||||
|
||||
`color`属性支持传入对象格式来定义渐变色
|
||||
`color` 属性支持传入对象格式来定义渐变色。
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
|
||||
### 逆时针方向
|
||||
|
||||
将`clockwise`设置为`false`，进度会从逆时针方向开始
|
||||
将 `clockwise` 设置为 `false`，进度会从逆时针方向开始。
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
@ -108,7 +108,7 @@ export default {
|
||||
|
||||
### 大小定制
|
||||
|
||||
通过`size`属性设置圆环直径
|
||||
通过 `size` 属性设置圆环直径。
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### Intro
|
||||
|
||||
Quickly and easily create layouts with `van-row` and `van-col`
|
||||
Quickly and easily create layouts with `van-row` and `van-col`.
|
||||
|
||||
### Install
|
||||
|
||||
@ -41,7 +41,7 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
|
||||
|
||||
### Column Spacing
|
||||
|
||||
Set grid spacing using `gutter` attribute. The default value is 0
|
||||
Set grid spacing using `gutter` attribute. The default value is 0.
|
||||
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
@ -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
|
||||
<van-row type="flex">
|
||||
|
||||
@ -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
|
||||
<van-row>
|
||||
@ -41,7 +40,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
|
||||
### 设置列元素间距
|
||||
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||
通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0。
|
||||
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
@ -53,7 +52,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
|
||||
### Flex 布局
|
||||
|
||||
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐
|
||||
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐。
|
||||
|
||||
```html
|
||||
<!-- 左对齐 -->
|
||||
|
||||
@ -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
|
||||
<van-collapse v-model="activeNames">
|
||||
|
||||
@ -15,7 +15,7 @@ app.use(CollapseItem);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`控制展开的面板列表，`activeNames`为数组格式
|
||||
通过 `v-model` 控制展开的面板列表，`activeNames` 为数组格式。
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
### 手风琴
|
||||
|
||||
通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式
|
||||
通过 `accordion` 可以设置为手风琴模式，最多展开一个面板，此时 `activeName` 为字符串格式。
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeName" accordion>
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(Divider);
|
||||
|
||||
### 基础用法
|
||||
|
||||
默认渲染一条水平分割线
|
||||
默认渲染一条水平分割线。
|
||||
|
||||
```html
|
||||
<van-divider />
|
||||
@ -22,7 +22,7 @@ app.use(Divider);
|
||||
|
||||
### 展示文字
|
||||
|
||||
通过插槽在可以分割线中间插入内容
|
||||
通过插槽在可以分割线中间插入内容。
|
||||
|
||||
```html
|
||||
<van-divider>文字</van-divider>
|
||||
@ -30,7 +30,7 @@ app.use(Divider);
|
||||
|
||||
### 内容位置
|
||||
|
||||
通过`content-position`指定内容所在位置
|
||||
通过 `content-position` 指定内容所在位置。
|
||||
|
||||
```html
|
||||
<van-divider content-position="left">文字</van-divider>
|
||||
@ -39,7 +39,7 @@ app.use(Divider);
|
||||
|
||||
### 虚线
|
||||
|
||||
添加`dashed`属性使分割线渲染为虚线
|
||||
添加 `dashed` 属性使分割线渲染为虚线。
|
||||
|
||||
```html
|
||||
<van-divider dashed>文字</van-divider>
|
||||
@ -47,7 +47,7 @@ app.use(Divider);
|
||||
|
||||
### 自定义样式
|
||||
|
||||
可以直接通过`style`属性设置分割线的样式
|
||||
可以直接通过 `style` 属性设置分割线的样式。
|
||||
|
||||
```html
|
||||
<van-divider
|
||||
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
|
||||
### Custom Active Color
|
||||
|
||||
Use `active-color` prop to custom active color of the title and options
|
||||
Use `active-color` prop to custom active color of the title and options.
|
||||
|
||||
```html
|
||||
<van-dropdown-menu active-color="#1989fa">
|
||||
|
||||
@ -45,7 +45,7 @@ export default {
|
||||
|
||||
### 自定义菜单内容
|
||||
|
||||
通过插槽可以自定义`DropdownItem`的内容，此时需要使用实例上的`toggle`方法手动控制菜单的显示
|
||||
通过插槽可以自定义 `DropdownItem` 的内容，此时需要使用实例上的 `toggle` 方法手动控制菜单的显示。
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
@ -94,7 +94,7 @@ export default {
|
||||
|
||||
### 自定义选中态颜色
|
||||
|
||||
通过`active-color`属性可以自定义菜单标题和选项的选中态颜色
|
||||
通过 `active-color` 属性可以自定义菜单标题和选项的选中态颜色。
|
||||
|
||||
```html
|
||||
<van-dropdown-menu active-color="#1989fa">
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
|
||||
### 向上展开
|
||||
|
||||
将`direction`属性值设置为`up`，菜单即可向上展开
|
||||
将 `direction` 属性值设置为 `up`，菜单即可向上展开。
|
||||
|
||||
```html
|
||||
<van-dropdown-menu direction="up">
|
||||
|
||||
@ -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
|
||||
<!-- Error -->
|
||||
|
||||
@ -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
|
||||
<van-empty
|
||||
@ -56,7 +56,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
|
||||
### 底部内容
|
||||
|
||||
通过默认插槽可以在 Empty 组件的下方插入内容
|
||||
通过默认插槽可以在 Empty 组件的下方插入内容。
|
||||
|
||||
```html
|
||||
<van-empty description="描述文字">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件
|
||||
用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件。
|
||||
|
||||
### 引入
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
|
||||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -19,7 +19,7 @@ app.use(GridItem);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`icon`属性设置格子内的图标，`text`属性设置文字内容
|
||||
通过 `icon` 属性设置格子内的图标，`text` 属性设置文字内容。
|
||||
|
||||
```html
|
||||
<van-grid>
|
||||
@ -32,7 +32,7 @@ app.use(GridItem);
|
||||
|
||||
### 自定义列数
|
||||
|
||||
默认一行展示四个格子，可以通过`column-num`自定义列数
|
||||
默认一行展示四个格子，可以通过 `column-num` 自定义列数。
|
||||
|
||||
```html
|
||||
<van-grid :column-num="3">
|
||||
@ -42,7 +42,7 @@ app.use(GridItem);
|
||||
|
||||
### 自定义内容
|
||||
|
||||
通过插槽可以自定义格子展示的内容
|
||||
通过插槽可以自定义格子展示的内容。
|
||||
|
||||
```html
|
||||
<van-grid :border="false" :column-num="3">
|
||||
@ -60,7 +60,7 @@ app.use(GridItem);
|
||||
|
||||
### 正方形格子
|
||||
|
||||
设置`square`属性后，格子的高度会和宽度保持一致
|
||||
设置 `square` 属性后，格子的高度会和宽度保持一致。
|
||||
|
||||
```html
|
||||
<van-grid square>
|
||||
@ -70,7 +70,7 @@ app.use(GridItem);
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过`gutter`属性设置格子之间的距离
|
||||
通过 `gutter` 属性设置格子之间的距离。
|
||||
|
||||
```html
|
||||
<van-grid :gutter="10">
|
||||
@ -80,7 +80,7 @@ app.use(GridItem);
|
||||
|
||||
### 内容横排
|
||||
|
||||
将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
|
||||
将 `direction` 属性设置为 `horizontal`，可以让宫格的内容呈横向排列。
|
||||
|
||||
```html
|
||||
<van-grid direction="horizontal" :column-num="2">
|
||||
@ -92,7 +92,7 @@ app.use(GridItem);
|
||||
|
||||
### 页面导航
|
||||
|
||||
通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接
|
||||
通过 `to` 属性设置 `vue-router` 跳转链接，通过 `url` 属性设置 URL 跳转链接。
|
||||
|
||||
```html
|
||||
<van-grid clickable :column-num="2">
|
||||
@ -103,7 +103,7 @@ app.use(GridItem);
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||
设置 `dot` 属性后，会在图标右上角展示一个小红点。设置 `badge` 属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-grid :column-num="2">
|
||||
|
||||
@ -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
|
||||
<van-icon name="chat-o" />
|
||||
@ -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
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
@ -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
|
||||
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用
|
||||
基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 `icon` 属性引用。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,7 +18,7 @@ app.use(Icon);
|
||||
|
||||
### 基础用法
|
||||
|
||||
`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例
|
||||
`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" />
|
||||
@ -27,7 +27,7 @@ app.use(Icon);
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||
设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" dot />
|
||||
@ -37,7 +37,7 @@ app.use(Icon);
|
||||
|
||||
### 图标颜色
|
||||
|
||||
`Icon`的`color`属性用来设置图标的颜色
|
||||
`Icon` 的 `color` 属性用来设置图标的颜色。
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
@ -46,7 +46,7 @@ app.use(Icon);
|
||||
|
||||
### 图标大小
|
||||
|
||||
`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
|
||||
`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
|
||||
@ -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
|
||||
/* 引入第三方或自定义的字体图标样式 */
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -63,7 +63,7 @@ ImagePreview({
|
||||
|
||||
### 展示关闭按钮
|
||||
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
|
||||
设置 `closeable` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标，使用`close-icon-position` 属性可以自定义图标位置。
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
|
||||
@ -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
|
||||
<van-image
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
|
||||
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,7 +18,7 @@ app.use(VanImage);
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性
|
||||
基础用法与原生 `img` 标签一致，可以设置 `src`、`width`、`height`、`alt` 等原生属性。
|
||||
|
||||
```html
|
||||
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
||||
@ -26,7 +26,7 @@ app.use(VanImage);
|
||||
|
||||
### 填充模式
|
||||
|
||||
通过`fit`属性可以设置图片填充模式，可选值见下方表格
|
||||
通过 `fit` 属性可以设置图片填充模式，可选值见下方表格。
|
||||
|
||||
```html
|
||||
<van-image
|
||||
@ -39,7 +39,7 @@ app.use(VanImage);
|
||||
|
||||
### 圆形图片
|
||||
|
||||
通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
|
||||
通过 `round` 属性可以设置图片变圆，注意当图片宽高不相等且 `fit` 为 `contain` 或 `scale-down` 时，将无法填充一个完整的圆形。
|
||||
|
||||
```html
|
||||
<van-image
|
||||
@ -52,7 +52,7 @@ app.use(VanImage);
|
||||
|
||||
### 图片懒加载
|
||||
|
||||
设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
|
||||
设置 `lazy-load` 属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用。
|
||||
|
||||
```html
|
||||
<van-image
|
||||
@ -73,7 +73,7 @@ app.use(Lazyload);
|
||||
|
||||
### 加载中提示
|
||||
|
||||
`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
|
||||
`Image` 组件提供了默认的加载中提示，支持通过 `loading` 插槽自定义内容。
|
||||
|
||||
```html
|
||||
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
|
||||
@ -85,7 +85,7 @@ app.use(Lazyload);
|
||||
|
||||
### 加载失败提示
|
||||
|
||||
`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
|
||||
`Image` 组件提供了默认的加载失败提示，支持通过 `error` 插槽自定义内容。
|
||||
|
||||
```html
|
||||
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
|
||||
|
||||
@ -15,7 +15,7 @@ app.use(IndexAnchor);
|
||||
|
||||
### 基础用法
|
||||
|
||||
点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置
|
||||
点击索引栏时，会自动跳转到对应的 `IndexAnchor` 锚点位置。
|
||||
|
||||
```html
|
||||
<van-index-bar>
|
||||
@ -35,7 +35,7 @@ app.use(IndexAnchor);
|
||||
|
||||
### 自定义索引列表
|
||||
|
||||
可以通过`index-list`属性自定义展示的索引字符列表，
|
||||
可以通过 `index-list` 属性自定义展示的索引字符列表。
|
||||
|
||||
```html
|
||||
<van-index-bar :index-list="indexList">
|
||||
|
||||
@ -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
|
||||
<img v-for="img in imageList" v-lazy="img" />
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
|
||||
### 背景图懒加载
|
||||
|
||||
和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
|
||||
和图片懒加载不同，背景图懒加载需要使用 `v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
|
||||
|
||||
```html
|
||||
<div v-for="img in imageList" v-lazy:background-image="img" />
|
||||
@ -50,7 +50,7 @@ export default {
|
||||
|
||||
### 组件懒加载
|
||||
|
||||
将需要懒加载的组件放在`lazy-component`标签中，即可实现组件懒加载。
|
||||
将需要懒加载的组件放在 `lazy-component` 标签中，即可实现组件懒加载。
|
||||
|
||||
```js
|
||||
// 注册时设置`lazyComponent`选项
|
||||
|
||||
@ -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
|
||||
<van-list
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
|
||||
### 错误提示
|
||||
|
||||
若列表数据加载失败，将`error`设置成`true`即可显示错误提示，用户点击错误提示后会重新触发 load 事件。
|
||||
若列表数据加载失败，将 `error` 设置成 `true` 即可显示错误提示，用户点击错误提示后会重新触发 load 事件。
|
||||
|
||||
```html
|
||||
<van-list
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
|
||||
### 下拉刷新
|
||||
|
||||
List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果
|
||||
List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
|
||||
@ -15,19 +15,25 @@ app.use(Loading);
|
||||
### Type
|
||||
|
||||
```html
|
||||
<van-loading /> <van-loading type="spinner" />
|
||||
<van-loading />
|
||||
|
||||
<van-loading type="spinner" />
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
```html
|
||||
<van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
|
||||
<van-loading color="#1989fa" />
|
||||
|
||||
<van-loading type="spinner" color="#1989fa" />
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
```html
|
||||
<van-loading size="24" /> <van-loading type="spinner" size="24px" />
|
||||
<van-loading size="24" />
|
||||
|
||||
<van-loading type="spinner" size="24px" />
|
||||
```
|
||||
|
||||
### Text
|
||||
|
||||
@ -14,31 +14,37 @@ app.use(Loading);
|
||||
|
||||
### 加载类型
|
||||
|
||||
通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner`
|
||||
通过 `type` 属性可以设置加载图标的类型，默认为 `circular`，可选值为 `spinner`。
|
||||
|
||||
```html
|
||||
<van-loading /> <van-loading type="spinner" />
|
||||
<van-loading />
|
||||
|
||||
<van-loading type="spinner" />
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性设置加载图标的颜色
|
||||
通过 `color` 属性设置加载图标的颜色。
|
||||
|
||||
```html
|
||||
<van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
|
||||
<van-loading color="#1989fa" />
|
||||
|
||||
<van-loading type="spinner" color="#1989fa" />
|
||||
```
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`size`属性设置加载图标的大小，默认单位为`px`
|
||||
通过 `size` 属性设置加载图标的大小，默认单位为 `px`。
|
||||
|
||||
```html
|
||||
<van-loading size="24" /> <van-loading type="spinner" size="24px" />
|
||||
<van-loading size="24" />
|
||||
|
||||
<van-loading type="spinner" size="24px" />
|
||||
```
|
||||
|
||||
### 加载文案
|
||||
|
||||
可以使用默认插槽在图标的右侧插入加载文案
|
||||
可以使用默认插槽在图标的右侧插入加载文案。
|
||||
|
||||
```html
|
||||
<van-loading size="24px">加载中...</van-loading>
|
||||
@ -46,7 +52,7 @@ app.use(Loading);
|
||||
|
||||
### 垂直排列
|
||||
|
||||
设置`vertical`属性后，图标和文案会垂直排列
|
||||
设置 `vertical` 属性后，图标和文案会垂直排列。
|
||||
|
||||
```html
|
||||
<van-loading size="24px" vertical>加载中...</van-loading>
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
|
||||
### 使用插槽
|
||||
|
||||
通过插槽自定义导航栏两侧的内容
|
||||
通过插槽自定义导航栏两侧的内容。
|
||||
|
||||
```html
|
||||
<van-nav-bar title="标题" left-text="返回" left-arrow>
|
||||
|
||||
@ -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
|
||||
<van-cell plain type="primary" @touchstart.stop="show = true">
|
||||
@ -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
|
||||
<van-cell plain type="primary" @touchstart.stop="show = true">
|
||||
|
||||
@ -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
|
||||
<van-cell @touchstart.stop="show = true">
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
|
||||
### 带右侧栏的键盘
|
||||
|
||||
将 theme 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景
|
||||
将 theme 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景。
|
||||
|
||||
```html
|
||||
<van-number-keyboard
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
|
||||
### 身份证号键盘
|
||||
|
||||
通过 `extra-key` 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 `extra-key` 设置为 `X`
|
||||
通过 `extra-key` 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 `extra-key` 设置为 `X`。
|
||||
|
||||
```html
|
||||
<van-cell plain type="primary" @touchstart.stop="show = true">
|
||||
@ -90,7 +90,7 @@ export default {
|
||||
|
||||
### 键盘标题
|
||||
|
||||
通过 `title` 属性可以设置键盘标题
|
||||
通过 `title` 属性可以设置键盘标题。
|
||||
|
||||
```html
|
||||
<van-cell plain type="primary" @touchstart.stop="show = true">
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
|
||||
### 配置多个按键
|
||||
|
||||
当 theme 为 `custom` 时，支持以数组的形式配置两个 `extra-key`
|
||||
当 theme 为 `custom` 时，支持以数组的形式配置两个 `extra-key`。
|
||||
|
||||
```html
|
||||
<van-cell plain type="primary" @touchstart.stop="show = true">
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
|
||||
### 双向绑定
|
||||
|
||||
可以通过 `v-model` 绑定键盘当前输入值
|
||||
可以通过 `v-model` 绑定键盘当前输入值。
|
||||
|
||||
```html
|
||||
<van-field readonly clickable :value="value" @touchstart.stop="show = true" />
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
|
||||
创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -35,7 +35,7 @@ export default {
|
||||
|
||||
### 嵌入内容
|
||||
|
||||
通过默认插槽可以在遮罩层上嵌入任意内容
|
||||
通过默认插槽可以在遮罩层上嵌入任意内容。
|
||||
|
||||
```html
|
||||
<van-overlay :show="show" @click="show = false">
|
||||
|
||||
@ -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
|
||||
<!-- PasswordInput -->
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用
|
||||
带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
|
||||
### 错误提示
|
||||
|
||||
通过`error-info`属性可以设置错误提示信息，例如当输入六位时提示密码错误
|
||||
通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
|
||||
@ -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
|
||||
<van-picker title="Title" :columns="columns" :loading="loading" />
|
||||
|
||||
@ -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
|
||||
<van-picker
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
|
||||
### 默认选中项
|
||||
|
||||
单列选择时，可以通过`default-index`属性设置初始选中项的索引
|
||||
单列选择时，可以通过 `default-index` 属性设置初始选中项的索引。
|
||||
|
||||
```html
|
||||
<van-picker title="标题" :columns="columns" :default-index="2" />
|
||||
@ -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
|
||||
<van-picker title="标题" :columns="columns" />
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
|
||||
### 级联选择
|
||||
|
||||
使用`columns`的`children`字段可以实现选项级联的效果（从 2.4.5 版本开始支持）
|
||||
使用 `columns` 的 `children` 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。
|
||||
|
||||
```html
|
||||
<van-picker title="标题" :columns="columns" />
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
|
||||
### 禁用选项
|
||||
|
||||
选项可以为对象结构，通过设置 disabled 来禁用该选项
|
||||
选项可以为对象结构，通过设置 `disabled` 来禁用该选项。
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" />
|
||||
@ -167,7 +167,7 @@ export default {
|
||||
|
||||
### 动态设置选项
|
||||
|
||||
通过 Picker 上的实例方法可以更灵活地控制选择器，比如使用`setColumnValues`方法实现多列联动
|
||||
通过 Picker 上的实例方法可以更灵活地控制选择器，比如使用 `setColumnValues` 方法实现多列联动。
|
||||
|
||||
```html
|
||||
<van-picker ref="picker" :columns="columns" @change="onChange" />
|
||||
@ -195,7 +195,7 @@ export default {
|
||||
|
||||
### 加载状态
|
||||
|
||||
若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示
|
||||
若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示。
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" :loading="loading" />
|
||||
@ -220,7 +220,7 @@ export default {
|
||||
|
||||
### 搭配弹出层使用
|
||||
|
||||
在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup 和 Field 实现该效果
|
||||
在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup 和 Field 实现该效果。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
### Position
|
||||
|
||||
Use `position` prop to set popup display position
|
||||
Use `position` prop to set popup display position.
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
|
||||
@ -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
|
||||
<!-- mount to body -->
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
|
||||
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,7 +18,7 @@ app.use(Popup);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 `v-model:show` 控制弹出层是否展示
|
||||
通过 `v-model:show` 控制弹出层是否展示。
|
||||
|
||||
```html
|
||||
<van-cell is-link @click="showPopup">展示弹出层</van-cell>
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
|
||||
### 弹出位置
|
||||
|
||||
通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
|
||||
通过 `position` 属性设置弹出位置，默认居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
|
||||
|
||||
```html
|
||||
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
|
||||
### 关闭图标
|
||||
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
|
||||
设置 `closeable` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标，使用 `close-icon-position` 属性可以自定义图标位置。
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
|
||||
### 圆角弹窗
|
||||
|
||||
设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
|
||||
设置 `round` 属性后，弹窗会根据弹出位置添加不同的圆角样式。
|
||||
|
||||
```html
|
||||
<van-popup
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
|
||||
### 指定挂载位置
|
||||
|
||||
弹出层默认挂载到组件所在位置，可以通过`teleport`属性指定挂载位置
|
||||
弹出层默认挂载到组件所在位置，可以通过 `teleport` 属性指定挂载位置。
|
||||
|
||||
```html
|
||||
<!-- 挂载到 body 节点下 -->
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(Progress);
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Use 'percentage' prop to set current progress
|
||||
Use `percentage` prop to set current progress.
|
||||
|
||||
```html
|
||||
<van-progress :percentage="50" />
|
||||
@ -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
|
||||
<van-progress pivot-text="Orange" color="#f2826a" :percentage="25" />
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(Progress);
|
||||
|
||||
### 基础用法
|
||||
|
||||
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||
进度条默认为蓝色，使用 `percentage` 属性来设置当前进度。
|
||||
|
||||
```html
|
||||
<van-progress :percentage="50" />
|
||||
@ -22,7 +22,7 @@ app.use(Progress);
|
||||
|
||||
### 线条粗细
|
||||
|
||||
通过`stroke-width`可以设置进度条的粗细
|
||||
通过 `stroke-width` 可以设置进度条的粗细。
|
||||
|
||||
```html
|
||||
<van-progress :percentage="50" stroke-width="8" />
|
||||
@ -30,7 +30,7 @@ app.use(Progress);
|
||||
|
||||
### 置灰
|
||||
|
||||
设置`inactive`属性后进度条将置灰
|
||||
设置 `inactive` 属性后进度条将置灰。
|
||||
|
||||
```html
|
||||
<van-progress inactive :percentage="50" />
|
||||
@ -38,7 +38,7 @@ app.use(Progress);
|
||||
|
||||
### 样式定制
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
可以使用 `pivot-text` 属性自定义文字，`color` 属性自定义进度条颜色。
|
||||
|
||||
```html
|
||||
<van-progress pivot-text="橙色" color="#f2826a" :percentage="25" />
|
||||
|
||||
@ -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
|
||||
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
|
||||
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
|
||||
### 成功提示
|
||||
|
||||
通过`success-text`可以设置刷新成功后的顶部提示文案
|
||||
通过 `success-text` 可以设置刷新成功后的顶部提示文案。
|
||||
|
||||
```html
|
||||
<van-pull-refresh
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
|
||||
### 自定义提示
|
||||
|
||||
通过插槽可以自定义下拉刷新过程中的提示内容
|
||||
通过插槽可以自定义下拉刷新过程中的提示内容。
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
|
||||
|
||||
@ -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
|
||||
<van-radio-group v-model="radio">
|
||||
@ -102,8 +102,8 @@ Use icon slot to custom icon
|
||||
<style>
|
||||
.img-icon {
|
||||
height: 20px;
|
||||
}</style
|
||||
>>
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
@ -15,7 +15,7 @@ app.use(RadioGroup);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定值当前选中项的 name
|
||||
通过 `v-model` 绑定值当前选中项的 name。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
|
||||
### 水平排列
|
||||
|
||||
将`direction`属性设置为`horizontal`后，单选框组会变成水平排列
|
||||
将 `direction` 属性设置为 `horizontal` 后，单选框组会变成水平排列。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项
|
||||
通过 `disabled` 属性禁止选项切换，在 `Radio` 上设置 `disabled` 可以禁用单个选项。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio" disabled>
|
||||
@ -58,7 +58,7 @@ export default {
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`shape`属性设置为`square`，单选框的形状会变成方形
|
||||
将 `shape` 属性设置为 `square`，单选框的形状会变成方形。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性设置选中状态的图标颜色
|
||||
通过 `checked-color` 属性设置选中状态的图标颜色。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`icon-size`属性可以自定义图标的大小
|
||||
通过 `icon-size` 属性可以自定义图标的大小。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
@ -91,7 +91,7 @@ export default {
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过`icon`插槽自定义图标，并通过`slotProps`判断是否为选中状态
|
||||
通过 `icon` 插槽自定义图标，并通过 `slotProps` 判断是否为选中状态。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击图标以外的内容不会触发单选框切换
|
||||
设置 `label-disabled` 属性后，点击图标以外的内容不会触发单选框切换。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
@ -141,7 +141,7 @@ export default {
|
||||
|
||||
### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
此时你需要再引入 `Cell` 和 `CellGroup` 组件。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(Search);
|
||||
|
||||
### 基础用法
|
||||
|
||||
v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色。
|
||||
`v-model` 用于控制搜索框中的文字，`background` 可以自定义搜索框外部背景色。
|
||||
|
||||
```html
|
||||
<van-search v-model="value" placeholder="请输入搜索关键词" />
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(Skeleton);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数
|
||||
通过 `title` 属性显示标题占位图，通过 `row` 属性配置占位段落行数。
|
||||
|
||||
```html
|
||||
<van-skeleton title :row="3" />
|
||||
@ -22,7 +22,7 @@ app.use(Skeleton);
|
||||
|
||||
### 显示头像
|
||||
|
||||
通过`avatar`属性显示头像占位图
|
||||
通过 `avatar` 属性显示头像占位图。
|
||||
|
||||
```html
|
||||
<van-skeleton title avatar :row="3" />
|
||||
@ -30,7 +30,7 @@ app.use(Skeleton);
|
||||
|
||||
### 展示子组件
|
||||
|
||||
将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件
|
||||
将 `loading` 属性设置成 `false` 表示内容加载完成，此时会隐藏占位图，并显示 `Skeleton` 的子组件。
|
||||
|
||||
```html
|
||||
<van-skeleton title avatar :row="3" :loading="loading">
|
||||
|
||||
@ -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
|
||||
<van-slider v-model="value" range @change="onChange" />
|
||||
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
### 双滑块
|
||||
|
||||
添加`range`属性就可以开启双滑块模式，确保`value`的值是一个数组
|
||||
添加 `range` 属性就可以开启双滑块模式，确保 `value` 的值是一个数组。
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" range @change="onChange" />
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字
|
||||
步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,7 +18,7 @@ app.use(Stepper);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定输入值，可以通过`change`事件监听到输入值的变化
|
||||
通过 `v-model` 绑定输入值，可以通过 `change` 事件监听到输入值的变化。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" />
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
|
||||
### 步长设置
|
||||
|
||||
通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为`1`
|
||||
通过 `step` 属性设置每次点击增加或减少按钮时变化的值，默认为 `1`。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" step="2" />
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
|
||||
### 限制输入范围
|
||||
|
||||
通过`min`和`max`属性限制输入值的范围
|
||||
通过 `min` 和 `max` 属性限制输入值的范围。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" min="5" max="8" />
|
||||
@ -52,7 +52,7 @@ export default {
|
||||
|
||||
### 限制输入整数
|
||||
|
||||
设置`integer`属性后，输入框将限制只能输入整数
|
||||
设置 `integer` 属性后，输入框将限制只能输入整数。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" integer />
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过设置`disabled`属性来禁用步进器，禁用状态下无法点击按钮或修改输入框
|
||||
通过设置 `disabled` 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" disabled />
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
|
||||
### 禁用输入框
|
||||
|
||||
通过设置`disable-input`属性来禁用输入框，此时按钮仍然可以点击
|
||||
通过设置 `disable-input` 属性来禁用输入框，此时按钮仍然可以点击。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" disable-input />
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
|
||||
### 固定小数位数
|
||||
|
||||
通过设置`decimal-length`属性可以保留固定的小数位数
|
||||
通过设置 `decimal-length` 属性可以保留固定的小数位数。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" step="0.2" :decimal-length="1" />
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
|
||||
通过 `input-width` 属性设置输入框宽度，通过 `button-size` 属性设置按钮大小和输入框高度。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" input-width="40px" button-size="32px" />
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
|
||||
### 异步变更
|
||||
|
||||
如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
|
||||
如果需要异步地修改输入框的值，可以设置 `async-change` 属性，并在 `change` 事件中手动修改 `value`。
|
||||
|
||||
```html
|
||||
<van-stepper :model-value="value" async-change @change="onChange" />
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
|
||||
### 圆角风格
|
||||
|
||||
将 theme 设置为 `round` 来展示圆角风格的步进器
|
||||
将 `theme` 设置为 `round` 来展示圆角风格的步进器。
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" theme="round" button-size="22" disable-input />
|
||||
|
||||
@ -15,7 +15,7 @@ app.use(Steps);
|
||||
|
||||
### 基础用法
|
||||
|
||||
`active`属性表示当前步骤的索引，从 0 起计
|
||||
`active` 属性表示当前步骤的索引，从 0 起计。
|
||||
|
||||
```html
|
||||
<van-steps :active="active">
|
||||
@ -38,7 +38,7 @@ export default {
|
||||
|
||||
### 自定义样式
|
||||
|
||||
可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色
|
||||
可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色。
|
||||
|
||||
```html
|
||||
<van-steps :active="active" active-icon="success" active-color="#38f">
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
|
||||
### 竖向步骤条
|
||||
|
||||
可以通过设置`direction`属性来改变步骤条的显示方向
|
||||
可以通过设置 `direction` 属性来改变步骤条的显示方向。
|
||||
|
||||
```html
|
||||
<van-steps direction="vertical" :active="0">
|
||||
|
||||
@ -18,7 +18,7 @@ app.use(Sticky);
|
||||
|
||||
### 基础用法
|
||||
|
||||
将内容包裹在`Sticky`组件内即可
|
||||
将内容包裹在 `Sticky` 组件内即可。
|
||||
|
||||
```html
|
||||
<van-sticky>
|
||||
@ -28,7 +28,7 @@ app.use(Sticky);
|
||||
|
||||
### 吸顶距离
|
||||
|
||||
通过`offset-top`属性可以设置组件在吸顶时与顶部的距离
|
||||
通过 `offset-top` 属性可以设置组件在吸顶时与顶部的距离。
|
||||
|
||||
```html
|
||||
<van-sticky :offset-top="50">
|
||||
@ -38,7 +38,7 @@ app.use(Sticky);
|
||||
|
||||
### 指定容器
|
||||
|
||||
通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部
|
||||
通过 `container` 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部。
|
||||
|
||||
```html
|
||||
<div ref="container" style="height: 150px;">
|
||||
|
||||
@ -20,7 +20,7 @@ app.use(SubmitBar);
|
||||
|
||||
### 禁用状态
|
||||
|
||||
禁用状态下不会触发`submit`事件
|
||||
禁用状态下不会触发 `submit` 事件。
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
@ -35,7 +35,7 @@ app.use(SubmitBar);
|
||||
|
||||
### 加载状态
|
||||
|
||||
加载状态下不会触发`submit`事件
|
||||
加载状态下不会触发 `submit` 事件。
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
@ -48,7 +48,7 @@ app.use(SubmitBar);
|
||||
|
||||
### 高级用法
|
||||
|
||||
通过插槽插入自定义内容
|
||||
通过插槽插入自定义内容。
|
||||
|
||||
```html
|
||||
<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(SwipeCell);
|
||||
|
||||
### 基础用法
|
||||
|
||||
`SwipeCell`组件提供了`left`和`right`两个插槽，用于定义两侧滑动区域的内容
|
||||
`SwipeCell` 组件提供了 `left` 和 `right` 两个插槽，用于定义两侧滑动区域的内容。
|
||||
|
||||
```html
|
||||
<van-swipe-cell>
|
||||
@ -31,7 +31,7 @@ app.use(SwipeCell);
|
||||
|
||||
### 自定义内容
|
||||
|
||||
`SwipeCell`内容可以嵌套任意内容，比如嵌套一个商品卡片
|
||||
`SwipeCell` 可以嵌套任意内容，比如嵌套一个商品卡片。
|
||||
|
||||
```html
|
||||
<van-swipe-cell>
|
||||
@ -62,7 +62,7 @@ app.use(SwipeCell);
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过传入`before-close`回调函数，可以自定义两侧滑动内容关闭时的行为
|
||||
通过传入 `before-close` 回调函数，可以自定义两侧滑动内容关闭时的行为。
|
||||
|
||||
```html
|
||||
<van-swipe-cell :before-close="beforeClose">
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(Switch);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定开关的选中状态，`true`表示开，`false`表示关
|
||||
通过 `v-model` 绑定开关的选中状态，`true` 表示开，`false` 表示关。
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" />
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用开关，禁用状态下开关不可点击
|
||||
通过 `disabled` 属性来禁用开关，禁用状态下开关不可点击。
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" disabled />
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
|
||||
### 加载状态
|
||||
|
||||
通过`loading`属性设置开关为加载状态，加载状态下开关不可点击
|
||||
通过 `loading` 属性设置开关为加载状态，加载状态下开关不可点击。
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" loading />
|
||||
@ -48,7 +48,7 @@ export default {
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过`size`属性自定义开关的大小
|
||||
通过 `size` 属性自定义开关的大小。
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" size="24px" />
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
`active-color`属性表示打开时的背景色，`inactive-color`表示关闭时的背景色
|
||||
`active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
|
||||
### Custom Icon
|
||||
|
||||
Use `icon` slot to custom icon
|
||||
Use `icon` slot to custom icon.
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
|
||||
@ -15,7 +15,7 @@ app.use(TabbarItem);
|
||||
|
||||
### 基础用法
|
||||
|
||||
`v-model`默认绑定选中标签的索引值，通过修改`v-model`即可切换选中的标签
|
||||
`v-model` 默认绑定选中标签的索引值，通过修改 `v-model` 即可切换选中的标签。
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
@ -38,7 +38,7 @@ export default {
|
||||
|
||||
### 通过名称匹配
|
||||
|
||||
在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`
|
||||
在标签指定 `name` 属性的情况下，`v-model` 的值为当前标签的 `name`。
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||
设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
@ -74,7 +74,7 @@ export default {
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断标签是否选中
|
||||
通过 `icon` 插槽自定义图标，可以通过 `slot-scope` 判断标签是否选中。
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
|
||||
### 路由模式
|
||||
|
||||
标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
|
||||
标签栏支持路由模式，用于搭配 `vue-router` 使用。路由模式下会匹配页面路径和标签的 `to` 属性，并自动选中对应的标签。
|
||||
|
||||
```html
|
||||
<router-view />
|
||||
|
||||
@ -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 毫秒
|
||||
|
||||
@ -14,7 +14,7 @@ app.use(TreeSelect);
|
||||
|
||||
### 单选模式
|
||||
|
||||
`item`为分类显示所需的数据，数据格式见下方示例。`main-active-index`表示左侧高亮选项的索引，`active-id`表示右侧高亮选项的 id
|
||||
`item` 为分类显示所需的数据，数据格式见下方示例。`main-active-index` 表示左侧高亮选项的索引，`active-id` 表示右侧高亮选项的 id。
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
@ -38,7 +38,7 @@ export default {
|
||||
|
||||
### 多选模式
|
||||
|
||||
`active-id`为数组格式时，可以选中多个右侧选项
|
||||
`active-id` 为数组格式时，可以选中多个右侧选项。
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
|
||||
### 自定义内容
|
||||
|
||||
通过`content`插槽可以自定义右侧区域的内容
|
||||
通过 `content` 插槽可以自定义右侧区域的内容。
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||
设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
|
||||
@ -137,8 +137,8 @@ export default {
|
||||
<style>
|
||||
.preview-cover {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
color: #fff;
|
||||
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
|
||||
### 文件预览
|
||||
|
||||
通过`v-model`可以绑定已经上传的文件列表，并展示文件列表的预览图。
|
||||
通过 `v-model` 可以绑定已经上传的文件列表，并展示文件列表的预览图。
|
||||
|
||||
```html
|
||||
<van-uploader v-model="fileList" multiple />
|
||||
@ -157,8 +157,8 @@ export default {
|
||||
<style>
|
||||
.preview-cover {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
color: #fff;
|
||||
@ -210,7 +210,7 @@ export default {
|
||||
|
||||
### 禁用文件上传
|
||||
|
||||
通过 `disabled` 属性禁用文件上传
|
||||
通过 `disabled` 属性禁用文件上传。
|
||||
|
||||
```html
|
||||
<van-uploader disabled />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user