mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
chore: merge two prettier config (#4491)
This commit is contained in:
neverland
GitHub
parent
8629da1b75
commit
e3c07e52f9
@ -1,5 +1,4 @@
|
||||
{
|
||||
"printWidth": 90,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
"proseWrap": "never"
|
||||
}
|
||||
|
||||
@ -52,10 +52,6 @@
|
||||
"vue": "^3.2.1",
|
||||
"@vue/compiler-sfc": "^3.2.1"
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"proseWrap": "never"
|
||||
},
|
||||
"browserslist": [
|
||||
"Chrome >= 53",
|
||||
"ChromeAndroid >= 53",
|
||||
|
||||
@ -154,7 +154,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------- | --------- | ------ |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | 菜单选项 | _Array_ | `[]` |
|
||||
| title | 标题 | _string_ | - |
|
||||
| description `v1.0.0` | 选项上方的描述信息 | _string_ | - |
|
||||
@ -169,7 +169,7 @@ Page({
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
||||
| --- | --- | --- |
|
||||
| bind:select | 选中选项时触发，禁用或加载状态下不会触发 | event.detail: 选项对应的对象 |
|
||||
| bind:close | 关闭时触发 | - |
|
||||
| bind:cancel | 取消按钮点击时触发 | - |
|
||||
@ -186,7 +186,7 @@ Page({
|
||||
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| 键名 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标题 | _string_ | - |
|
||||
| subname | 二级标题 | _string_ | - |
|
||||
| color | 选项文字颜色 | _string_ | - |
|
||||
@ -194,7 +194,7 @@ Page({
|
||||
| disabled | 是否为禁用状态 | _boolean_ | - |
|
||||
| className | 为对应列添加额外的 class 类名 | _string_ | - |
|
||||
| openType | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - |
|
||||
| lang | 指定返回用户信息的语言，zh\_CN 简体中文，zh\_TW 繁体中文，en 英文 | _string_ | `en` |
|
||||
| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | _string_ | `en` |
|
||||
| sessionFrom | 会话来源，openType="contact"时有效 | _string_ | - |
|
||||
| sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | _string_ | 当前标题 |
|
||||
| sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | _string_ | 当前分享路径 |
|
||||
|
||||
@ -127,7 +127,7 @@ db.collection('region')
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------------------- | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 当前选中的省市区`code` | _string_ | - |
|
||||
| title | 顶部栏标题 | _string_ | - |
|
||||
| area-list | 省市区数据，格式见下方 | _object_ | - |
|
||||
@ -142,7 +142,7 @@ db.collection('region')
|
||||
### Events
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ------------ | ------------------ | ------------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| bind:confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
|
||||
| bind:cancel | 点击取消按钮时 | - |
|
||||
| bind:change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
@ -152,7 +152,7 @@ db.collection('region')
|
||||
通过 selectComponent 可以获取到 Area 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| ------ | ------------ | ------ | --------------------------------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| reset | code: string | - | 根据 code 重置所有选项，若不传 code，则重置到第一项 |
|
||||
|
||||
### 点击完成时返回的数据格式
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------- | --------- | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| id | 标识符 | _string_ | - |
|
||||
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
|
||||
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` |
|
||||
@ -138,7 +138,7 @@
|
||||
| custom-style | 自定义样式 | _string_ | - |
|
||||
| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - |
|
||||
| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - |
|
||||
| lang | 指定返回用户信息的语言，zh\_CN 简体中文，<br>zh\_TW 繁体中文，en 英文 | _string_ | `en` |
|
||||
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` |
|
||||
| session-from | 会话来源 | _string_ | - |
|
||||
| business-id | 客服消息子商户 id | _number_ | - |
|
||||
| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 |
|
||||
@ -151,7 +151,7 @@
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------------------- | ----------------------------------------------------------------------------------------------- | ---- |
|
||||
| --- | --- | --- |
|
||||
| bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | - |
|
||||
| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
|
||||
| bind:contact | 客服消息回调 | - |
|
||||
|
||||
@ -56,7 +56,12 @@ VantComponent({
|
||||
onClick(event: WechatMiniprogram.TouchEvent) {
|
||||
this.$emit('click', event);
|
||||
|
||||
const { canIUseGetUserProfile, openType, getUserProfileDesc, lang } = this.data;
|
||||
const {
|
||||
canIUseGetUserProfile,
|
||||
openType,
|
||||
getUserProfileDesc,
|
||||
lang,
|
||||
} = this.data;
|
||||
|
||||
if (openType === 'getUserInfo' && canIUseGetUserProfile) {
|
||||
wx.getUserProfile({
|
||||
|
||||
@ -266,7 +266,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------------------- | -------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` |
|
||||
| title | 日历标题 | _string_ | `日期选择` |
|
||||
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
|
||||
@ -289,7 +289,7 @@ Page({
|
||||
当 Calendar 的 `poppable` 为 `true` 时，支持以下 props:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | --------------------------------------- | --------- | -------- |
|
||||
| --- | --- | --- | --- |
|
||||
| show | 是否显示日历弹窗 | _boolean_ | `false` |
|
||||
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
|
||||
| round | 是否显示圆角弹窗 | _boolean_ | `true` |
|
||||
@ -301,7 +301,7 @@ Page({
|
||||
当 Calendar 的 `type` 为 `range` 时，支持以下 props:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | --------------------------------------------- | ------------------ | ------------------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
|
||||
| range-prompt | 范围选择超过最多可选天数时的提示文案 | _string \| null_ | `选择天数不能超过 xx 天` |
|
||||
| show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | _boolean_ | `true` |
|
||||
@ -312,7 +312,7 @@ Page({
|
||||
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容。
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| ---------- | ------------------------------------------------------------------ | -------- |
|
||||
| --- | --- | --- |
|
||||
| date | 日期对应的 Date 对象 | _Date_ |
|
||||
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
|
||||
| text | 中间显示的文字 | _string_ |
|
||||
@ -322,7 +322,7 @@ Page({
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ----------------------- | ------------------------------------------------------------------ | ------------------------------ |
|
||||
| --- | --- | --- |
|
||||
| select | 点击任意日期时触发 | _value: Date \| Date[]_ |
|
||||
| unselect | 当 Calendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ----------------------------------------------------------------- | ------------------ | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| thumb | 左侧图片 | _string_ | - |
|
||||
| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | _string_ | `aspectFit` |
|
||||
| title | 标题 | _string_ | - |
|
||||
|
||||
@ -135,7 +135,7 @@
|
||||
### Cell Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ---------------------------------------------------------- | ------------------ | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| title | 左侧标题 | _string \| number_ | - |
|
||||
| title-width | 标题宽度，须包含单位 | _string_ | - |
|
||||
|
||||
@ -182,12 +182,12 @@ Page({
|
||||
Page({
|
||||
data: {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
result: ['a', 'b'],
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
result: event.detail
|
||||
result: event.detail,
|
||||
});
|
||||
},
|
||||
|
||||
@ -197,7 +197,7 @@ Page({
|
||||
checkbox.toggle();
|
||||
},
|
||||
|
||||
noop() {}
|
||||
noop() {},
|
||||
});
|
||||
```
|
||||
|
||||
@ -212,7 +212,7 @@ Page({
|
||||
### Checkbox Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ------------------------------- | ------------------ | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标识 Checkbox 名称 | _string_ | - |
|
||||
| shape | 形状，可选值为 `round` `square` | _string_ | `round` |
|
||||
| value | 是否为选中状态 | _boolean_ | `false` |
|
||||
@ -226,7 +226,7 @@ Page({
|
||||
### CheckboxGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------- | --------- | ------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 所有选中项的 name | _Array_ | - |
|
||||
| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
|
||||
|
||||
@ -91,7 +91,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | -------------------------------------- | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 目标进度 | _number_ | `0` |
|
||||
| type | 指定 canvas 类型，可选值为 `2d` | _string_ | - |
|
||||
| size | 圆环直径，默认单位为 `px` | _number_ | `100` |
|
||||
|
||||
@ -153,7 +153,7 @@ Page({
|
||||
### Collapse Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | ------------------- | ---------------------------------------------------------------------- | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_<br>手风琴模式：_string \| number_ | - |
|
||||
| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
|
||||
| border | 是否显示外边框 | _boolean_ | `true` |
|
||||
@ -161,7 +161,7 @@ Page({
|
||||
### Collapse Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | -------------- | ------------------------------ |
|
||||
| ------ | -------------- | ------------------------------- |
|
||||
| change | 切换面板时触发 | activeNames: _string \| Array_ |
|
||||
| open | 展开面板时触发 | currentName: _string \| number_ |
|
||||
| close | 关闭面板时触发 | currentName: _string \| number_ |
|
||||
@ -169,7 +169,7 @@ Page({
|
||||
### CollapseItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | ---------------------------------------------------------- | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 唯一标识符，默认为索引值 | _string \| number_ | `index` |
|
||||
| title | 标题栏左侧内容 | _string \| number_ | - |
|
||||
| icon | 标题栏左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
|
||||
@ -28,7 +28,10 @@ Vant Weapp 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-C
|
||||
.van-button--primary {
|
||||
color: var(--button-primary-color, #fff);
|
||||
background: var(--button-primary-background-color, #07c160);
|
||||
border: var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160);
|
||||
border: var(--button-border-width, 1px) solid var(
|
||||
--button-primary-border-color,
|
||||
#07c160
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -54,12 +57,20 @@ page {
|
||||
<van-cell-group>
|
||||
<van-field label="评分">
|
||||
<view slot="input" style="width: 100%">
|
||||
<van-rate model:value="{{ rate }}" data-key="rate" bind:change="onChange" />
|
||||
<van-rate
|
||||
model:value="{{ rate }}"
|
||||
data-key="rate"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</view>
|
||||
</van-field>
|
||||
<van-field label="滑块" border="{{ false }}">
|
||||
<view slot="input" style="width: 100%">
|
||||
<van-slider value="{{ slider }}" data-key="slider" bind:change="onChange" />
|
||||
<van-slider
|
||||
value="{{ slider }}"
|
||||
data-key="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</view>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
@ -85,7 +96,7 @@ Page({
|
||||
sliderActiveBackgroundColor: '#07c160',
|
||||
buttonPrimaryBorderColor: '#07c160',
|
||||
buttonPrimaryBackgroundColor: '#07c160',
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
@ -93,7 +104,7 @@ Page({
|
||||
this.setData({
|
||||
[key]: event.detail,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -139,7 +139,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ---------------------------------------------- | --------- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| time | 倒计时时长，单位毫秒 | _number_ | - |
|
||||
| format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | _string_ | `HH:mm:ss` |
|
||||
| auto-start | 是否自动开始倒计时 | _boolean_ | `true` |
|
||||
|
||||
@ -176,7 +176,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | ------------------------------------------------------------------------------ | -------------------------- | ---------- |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 当前选中值 | _string \| number_ | - |
|
||||
| type | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | _string_ | `datetime` |
|
||||
| min-date | 可选的最小时间，精确到分钟 | _number_ | 十年前 |
|
||||
|
||||
@ -159,7 +159,7 @@ Page({
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| -------------------------- | --------- | --------- | -------------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| Dialog | `options` | `Promise` | 展示弹窗 |
|
||||
| Dialog.alert | `options` | `Promise` | 展示消息提示弹窗 |
|
||||
| Dialog.confirm | `options` | `Promise` | 展示消息确认弹窗 |
|
||||
@ -173,7 +173,7 @@ Page({
|
||||
通过函数调用 Dialog 时，支持传入以下选项：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 标题 | _string_ | - |
|
||||
| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` |
|
||||
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
|
||||
@ -201,7 +201,7 @@ Page({
|
||||
使用`confirmButtonOpenType`后，支持以下选项：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | open-type |
|
||||
| ---------------- | ------------------------------------------------------------------- | -------- | ------------ | ------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| appParameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` |
|
||||
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` |
|
||||
| sessionFrom | 会话来源 | _string_ | - | `contact` |
|
||||
@ -216,7 +216,7 @@ Page({
|
||||
通过组件调用 Dialog 时，支持以下 Props:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| show | 是否显示弹窗 | _boolean_ | - |
|
||||
| title | 标题 | _string_ | - |
|
||||
| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` |
|
||||
@ -247,7 +247,7 @@ Page({
|
||||
使用`confirm-button-open-type`后，支持以下 Props：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | open-type |
|
||||
| ------------------ | ------------------------------------------------------------------- | -------- | ------------ | ------------- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` |
|
||||
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` |
|
||||
| session-from | 会话来源 | _string_ | - | `contact` |
|
||||
@ -260,7 +260,7 @@ Page({
|
||||
### Events
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| --- | --- | --- |
|
||||
| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，<br>枚举为`confirm`,`cancel`,`overlay` |
|
||||
| bind:confirm | 点击确认按钮时触发 | - |
|
||||
| bind:cancel | 点击取消按钮时触发 | - |
|
||||
|
||||
@ -51,9 +51,7 @@
|
||||
<van-divider contentPosition="center" borderColor="#1989fa">
|
||||
border 颜色
|
||||
</van-divider>
|
||||
<van-divider contentPosition="center" fontSize="18">
|
||||
字体大小
|
||||
</van-divider>
|
||||
<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
@ -140,7 +140,7 @@ Page({
|
||||
### DropdownMenu Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------ | --------- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#ee0a24` |
|
||||
| z-index | 菜单栏 z-index 层级 | _number_ | `10` |
|
||||
| duration | 动画时长，单位毫秒 | _number_ | `200` |
|
||||
@ -175,7 +175,7 @@ Page({
|
||||
通过 selectComponent(id) 可访问。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ------------------------------------------------------------- | -------------- | ------ |
|
||||
| --- | --- | --- | --- |
|
||||
| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - |
|
||||
|
||||
### Option 数据结构
|
||||
|
||||
@ -53,9 +53,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
|
||||
```html
|
||||
<van-empty description="描述文字">
|
||||
<van-button round type="danger" class="bottom-button">
|
||||
按钮
|
||||
</van-button>
|
||||
<van-button round type="danger" class="bottom-button">按钮</van-button>
|
||||
</van-empty>
|
||||
|
||||
<style>
|
||||
@ -71,7 +69,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | --------------------------------------------------------------- | -------- | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
|
||||
| description | 图片下方的描述文字 | _string_ | - |
|
||||
|
||||
|
||||
@ -214,7 +214,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------- | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| label | 输入框左侧文本 | _string_ | - |
|
||||
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
||||
@ -261,7 +261,7 @@ Page({
|
||||
### Events
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| bind:input | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:change | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 |
|
||||
|
||||
@ -94,13 +94,13 @@ Page({
|
||||
### GoodsAction Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------- | --------- | ------ |
|
||||
| --- | --- | --- | --- |
|
||||
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
|
||||
|
||||
### GoodsActionIcon Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| text | 按钮文字 | _string_ | - |
|
||||
| icon | 图标类型，可选值见`icon`组件 | _string_ | - |
|
||||
| info | 图标右上角提示信息 | _string \| number_ | - |
|
||||
@ -121,7 +121,7 @@ Page({
|
||||
### GoodsActionButton Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------- | --------- | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| text | 按钮文字 | _string_ | - |
|
||||
| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - |
|
||||
| url | 点击后跳转的链接地址 | _string_ | - |
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
### Grid Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ----------------------------------------- | ------------------ | ---------- |
|
||||
| --- | --- | --- | --- |
|
||||
| column-num | 列数 | _number_ | `4` |
|
||||
| icon-size `v1.3.2` | 图标大小，默认单位为`px` | _string_ | `28px` |
|
||||
| gutter | 格子之间的间距，默认单位为`px` | _string \| number_ | `0` |
|
||||
@ -147,7 +147,7 @@
|
||||
### GridItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ---------------------------------------------------------- | ------------------ | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| text | 文字 | _string_ | - |
|
||||
| icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| icon-color | 图标颜色 | _string_ | - |
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ------------------------------------------ | ------------------ | ---------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 图标名称或图片链接 | _string_ | - |
|
||||
| dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
|
||||
| info | 图标右上角文字提示 | _string \| number_ | - |
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------ | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| src | 图片链接 | _string_ | - |
|
||||
| fit | 图片填充模式 | _string_ | _fill_ |
|
||||
| alt | 替代文本 | _string_ | - |
|
||||
|
||||
@ -106,11 +106,8 @@ Page({
|
||||
| ---- | -------------------------------- |
|
||||
| - | 锚点位置显示内容，默认为索引字符 |
|
||||
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 嵌套在滚动元素中 IndexAnchor 失效？
|
||||
|
||||
由于 `<IndexBar />` 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：`view` 使用 `overflow: scroll;` 或者 `scroll-view`，
|
||||
具体可查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html)。
|
||||
历史issue: [#4252](https://github.com/youzan/vant-weapp/issues/4252)
|
||||
由于 `<IndexBar />` 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：`view` 使用 `overflow: scroll;` 或者 `scroll-view`，具体可查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html)。历史 issue: [#4252](https://github.com/youzan/vant-weapp/issues/4252)
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ----------------------------- | ------------------ | ---------- |
|
||||
| --- | --- | --- | --- |
|
||||
| color | 颜色 | _string_ | `#c9c9c9` |
|
||||
| type | 类型，可选值为 `spinner` | _string_ | `circular` |
|
||||
| size | 加载图标大小，默认单位为 `px` | _string \| number_ | `30px` |
|
||||
|
||||
@ -11,7 +11,10 @@ export const link = Behavior({
|
||||
jumpLink(urlKey = 'url') {
|
||||
const url = this.data[urlKey];
|
||||
if (url) {
|
||||
if (this.data.linkType === 'navigateTo' && getCurrentPages().length > 9) {
|
||||
if (
|
||||
this.data.linkType === 'navigateTo' &&
|
||||
getCurrentPages().length > 9
|
||||
) {
|
||||
wx.redirectTo({ url });
|
||||
} else {
|
||||
wx[this.data.linkType]({ url });
|
||||
|
||||
@ -55,7 +55,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | ---------------------------------- | --------- | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 标题 | _string_ | `''` |
|
||||
| left-text | 左侧文案 | _string_ | `''` |
|
||||
| right-text | 右侧文案 | _string_ | `''` |
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------- | --------- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` |
|
||||
| text | 通知文本内容 | _string_ | `''` |
|
||||
| color | 通知文本颜色 | _string_ | `#ed6a0c` |
|
||||
|
||||
@ -84,14 +84,14 @@ Notify({
|
||||
### 方法
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------------ | -------- | ------------------- | ----------- |
|
||||
| ------------ | -------- | -------------------- | ----------- |
|
||||
| Notify | 展示提示 | `options \| message` | notify 实例 |
|
||||
| Notify.clear | 关闭提示 | `options` | `void` |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | ------------------------------------------------------ | ---------- | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| type `v1.0.0` | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` |
|
||||
| message `v1.0.0` | 展示文案，支持通过`\n`换行 | _string_ | `''` |
|
||||
| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000` |
|
||||
|
||||
@ -88,7 +88,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ------------------------------------------------ | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| show | 是否展示遮罩层 | _boolean_ | `false` |
|
||||
| z-index | z-index 层级 | _string \| number_ | `1` |
|
||||
| duration | 动画时长，单位秒 | _string \| number_ | `0.3` |
|
||||
|
||||
@ -147,7 +147,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | ------------------------------------------------------------------- | --------- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| columns | 对象数组，配置每一列显示的数据 | _Array_ | `[]` |
|
||||
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
|
||||
| toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` |
|
||||
@ -165,7 +165,7 @@ Page({
|
||||
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------- | ------------------ | ------------------------------------------------------------------------------------------------ |
|
||||
| --- | --- | --- |
|
||||
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
@ -193,7 +193,7 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
通过 selectComponent 可以获取到 picker 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| --------------- | ------------------------ | ----------- | -------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| getValues | - | values | 获取所有列选中的值 |
|
||||
| setValues | values | - | 设置所有列选中的值 |
|
||||
| getIndexes | - | indexes | 获取所有列选中值对应的索引 |
|
||||
|
||||
@ -107,8 +107,7 @@ Page({
|
||||
|
||||
使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
|
||||
|
||||
目前，组件可以通过 `lock-scroll` 属性处理部分滚动穿透问题。 **但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。**
|
||||
不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：
|
||||
目前，组件可以通过 `lock-scroll` 属性处理部分滚动穿透问题。 **但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。** 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：
|
||||
|
||||
#### [page-meta](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html)
|
||||
|
||||
@ -126,7 +125,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------------------ | ------------------ | -------- |
|
||||
| --- | --- | --- | --- |
|
||||
| show | 是否显示弹出层 | _boolean_ | `false` |
|
||||
| z-index | z-index 层级 | _number_ | `100` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | -------------------------- | ------------------ | ---------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| inactive | 是否置灰 | _boolean_ | `false` |
|
||||
| percentage | 进度百分比 | _number_ | `0` |
|
||||
| stroke-width | 进度条粗细，默认单位为`px` | _string \| number_ | `4px` |
|
||||
|
||||
@ -189,7 +189,7 @@ Page({
|
||||
### RadioGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------- | --------- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 当前选中项的标识符 | _any_ | - |
|
||||
| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
|
||||
|
||||
@ -129,7 +129,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ----------------------------------------------------------- | ------------------ | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 当前分值 | _number_ | - |
|
||||
| count | 图标总数 | _number_ | `5` |
|
||||
|
||||
@ -112,7 +112,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------ | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| label | 搜索框左侧文本 | _string_ | - |
|
||||
| shape | 形状，可选值为 `round` | _string_ | `square` |
|
||||
@ -152,7 +152,7 @@ Page({
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| action | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示 |
|
||||
| label | 自定义搜索框左侧文本 |
|
||||
| left-icon | 自定义输入框左侧图标，需要在`use-left-icon-slot`为 true 时才会显示 |
|
||||
|
||||
@ -158,7 +158,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ---------------------- | ------------------ | -------- |
|
||||
| --- | --- | --- | --- |
|
||||
| options | 分享选项 | _Option[]_ | `[]` |
|
||||
| title | 顶部标题 | _string_ | - |
|
||||
| cancel-text | 取消按钮文字 | _string_ | `'取消'` |
|
||||
@ -173,7 +173,7 @@ Page({
|
||||
`options`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| ----------- | --------------------------------------------------------------------------------------------------------------- | -------- |
|
||||
| --- | --- | --- |
|
||||
| name | 分享渠道名称 | _string_ |
|
||||
| description | 分享选项描述 | _string_ |
|
||||
| icon | 图标，可选值为 `qq` `link` `weibo` `wechat` `poster` `qrcode` `weapp-qrcode` `wechat-moments`，支持传入图片 URL | _string_ |
|
||||
|
||||
@ -114,7 +114,7 @@ Page({
|
||||
### SidebarItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ------------------------------------------------- | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 内容 | _string_ | `''` |
|
||||
| dot | 是否显示右上角小红点 | _boolean_ | `false` |
|
||||
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _string \| number_ | `''` |
|
||||
|
||||
@ -62,7 +62,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ------------------------------------------- | -------------------- | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| row | 段落占位图行数 | _number_ | `0` |
|
||||
| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _string \| string[]_ | `100%` |
|
||||
| title | 是否显示标题占位图 | _boolean_ | `false` |
|
||||
|
||||
@ -61,9 +61,7 @@ Page({
|
||||
|
||||
```html
|
||||
<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">
|
||||
<view class="custom-button" slot="button">
|
||||
{{ currentValue }}/100
|
||||
</view>
|
||||
<view class="custom-button" slot="button">{{ currentValue }}/100</view>
|
||||
</van-slider>
|
||||
```
|
||||
|
||||
@ -86,7 +84,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------------- | ---------------------------------------- | -------------------- | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 当前进度百分比，在双滑块模式下为数组格式 | _number \| number[]_ | `0` |
|
||||
| disabled | 是否禁用滑块 | _boolean_ | `false` |
|
||||
| max | 最大值 | _number_ | `100` |
|
||||
@ -116,7 +114,7 @@ Page({
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| --------------------- | ----------------------------------- | ------------------- |
|
||||
| --- | --- | --- |
|
||||
| button | 自定义滑块按钮 | _{ value: number }_ |
|
||||
| left-button `v1.8.4` | 自定义左侧滑块按钮（双滑块模式下） | _{ value: number }_ |
|
||||
| right-button `v1.8.4` | 自定义右侧滑块按钮 （双滑块模式下） | _{ value: number }_ |
|
||||
|
||||
@ -118,7 +118,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | --------------------------------------------------------- | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 输入值 | _string \| number_ | 最小值 |
|
||||
| min | 最小值 | _string \| number_ | `1` |
|
||||
|
||||
@ -119,7 +119,7 @@ Page({
|
||||
### Steps Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ------------------------------------------------ | -------- | ------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| active | 当前步骤 | _number_ | 0 |
|
||||
| direction | 显示方向，可选值为 `horizontal` `vertical` | _string_ | `horizontal` |
|
||||
| active-color | 激活状态颜色 | _string_ | `#07c160` |
|
||||
|
||||
@ -45,9 +45,7 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
|
||||
```html
|
||||
<view id="container" style="height: 150px;">
|
||||
<van-sticky container="{{ container }}">
|
||||
<van-button type="warning">
|
||||
指定容器
|
||||
</van-button>
|
||||
<van-button type="warning">指定容器</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
```
|
||||
@ -79,9 +77,7 @@ Page({
|
||||
>
|
||||
<view style="height: 400px; padding-top: 50px;">
|
||||
<van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
|
||||
<van-button type="warning">
|
||||
嵌套在 scroll-view 内
|
||||
</van-button>
|
||||
<van-button type="warning">嵌套在 scroll-view 内</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -113,7 +109,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ------------------------------------------------------------ | ---------- | ------ |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top | 吸顶时与顶部的距离，单位`px` | _number_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number_ | `99` |
|
||||
| container | 一个函数，返回容器对应的 NodesRef 节点 | _function_ | - |
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------------------ | ------------------- | -------- |
|
||||
| --- | --- | --- | --- |
|
||||
| price | 价格（单位分） | _number_ | - |
|
||||
| label | 价格文案 | _string_ | `合计：` |
|
||||
| suffix-label | 价格右侧文案 | _string_ | - |
|
||||
|
||||
@ -114,7 +114,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | --------------------------------------- | ------------------ | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标识符，可以在 close 事件的参数中获取到 | _string \| number_ | - |
|
||||
| left-width | 左侧滑动区域宽度 | _number_ | `0` |
|
||||
| right-width | 右侧滑动区域宽度 | _number_ | `0` |
|
||||
@ -132,7 +132,7 @@ Page({
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | ---------- | --------------------------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
|
||||
| close | 关闭时触发 | { position: 'left' \| 'right' , instance , name: string } |
|
||||
| open | 打开时触发 | { position: 'left' \| 'right' , name: string } |
|
||||
|
||||
@ -190,7 +190,7 @@ Page({
|
||||
### Tabs Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | -------------------------------------------------------------- | ------------------ | --------- |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 样式风格，可选值为`card` | _string_ | `line` |
|
||||
| color | 标签主题色 | _string_ | `#ee0a24` |
|
||||
| active | 当前选中标签的标识符 | _string \| number_ | `0` |
|
||||
@ -236,7 +236,7 @@ Page({
|
||||
### Tabs Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------------- | ------------------------ | ---------------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| bind:click | 点击标签时触发 | name：标签标识符，title：标题 |
|
||||
| bind:change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 |
|
||||
| bind:disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 |
|
||||
@ -256,7 +256,7 @@ Page({
|
||||
通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| ------ | ---- | ------ | ---------------------------------------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| resize | - | - | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
@ -177,7 +177,7 @@ Page({
|
||||
### Tabbar Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | -------------------------------------------------- | --------- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| active | 当前选中标签的索引 | _number_ | - |
|
||||
| fixed | 是否固定在底部 | _boolean_ | `true` |
|
||||
| placeholder | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
|
||||
@ -196,7 +196,7 @@ Page({
|
||||
### TabbarItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | -------------------------------------------------------------- | ------------------ | ---------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标签名称，作为匹配的标识符 | _string \| number_ | 当前标签的索引值 |
|
||||
| icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon#props) | _string_ | `van-icon` |
|
||||
|
||||
@ -125,7 +125,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ----------------------------------------------------- | --------- | ------- |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 类型，可选值为 `primary` `success` `danger` `warning` | _string_ | - |
|
||||
| size | 大小, 可选值为 `large` `medium` | _string_ | - |
|
||||
| color | 标签颜色 | _string_ | - |
|
||||
|
||||
@ -98,7 +98,7 @@ Toast({
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| ------------------------- | -------------------- | ---------- | ------------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| Toast | `options \| message` | toast 实例 | 展示提示 |
|
||||
| Toast.loading | `options \| message` | toast 实例 | 展示加载提示 |
|
||||
| Toast.success | `options \| message` | toast 实例 | 展示成功提示 |
|
||||
@ -110,7 +110,7 @@ Toast({
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ------------------------------------------------------ | ---------------- | ----------- |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 提示类型，可选值为 `loading` `success` `fail` `html` | _string_ | `text` |
|
||||
| position | 位置，可选值为 `top` `middle` `bottom` | _string_ | `middle` |
|
||||
| message | 内容 | _string_ | `''` |
|
||||
|
||||
@ -21,9 +21,7 @@
|
||||
将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。
|
||||
|
||||
```html
|
||||
<van-transition show="{{ show }}" custom-class="block">
|
||||
内容
|
||||
</van-transition>
|
||||
<van-transition show="{{ show }}" custom-class="block">内容</van-transition>
|
||||
```
|
||||
|
||||
### 动画类型
|
||||
@ -88,7 +86,7 @@ transition 组件内置了多种动画，可以通过`name`字段指定动画类
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| custom-class | 根节点样式类 |
|
||||
| enter-class | 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 |
|
||||
| enter-active-class | 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 |
|
||||
|
||||
@ -113,7 +113,7 @@ Page({
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ----------------------------- | --------------------------- | ---------- |
|
||||
| --- | --- | --- | --- |
|
||||
| items | 分类显示所需的数据 | _Array_ | `[]` |
|
||||
| height | 高度，默认单位为`px` | _number \| string_ | `300` |
|
||||
| main-active-index | 左侧选中项的索引 | _number_ | `0` |
|
||||
@ -124,7 +124,7 @@ Page({
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --------------- | -------------------------------- | -------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| bind:click-nav | 左侧导航点击时，触发的事件 | event.detail.index：被点击的导航的索引 |
|
||||
| bind:click-item | 右侧选择项被点击时，会触发的事件 | event.detail: 该点击项的数据 |
|
||||
|
||||
|
||||
@ -223,7 +223,7 @@ uploadFilePromise(fileName, chooseResult) {
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ---------------------------------------------------------------------------------------------- | -------------------- | --------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标识符，可以在回调函数的第二项参数中获取 | _string \| number_ | - |
|
||||
| accept | 接受的文件类型, 可选值为`all` `media` `image` `file` `video` | _string_ | `image` |
|
||||
| sizeType | 所选的图片的尺寸, 当`accept`为`image`类型时设置所选图片的尺寸可选值为`original` `compressed` | _string[]_ | `['original','compressed']` |
|
||||
@ -277,7 +277,7 @@ uploadFilePromise(fileName, chooseResult) {
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------------------ | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| bind:before-read | 文件读取前，在回调函数中返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 |
|
||||
| bind:after-read | 文件读取完成后 | `event.detail.file`: 当前读取的文件 |
|
||||
| bind:oversize | 文件超出大小限制 | - |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user