diff --git a/assets/iframe-router.8a0fc162.js b/assets/iframe-router.8a0fc162.js deleted file mode 100644 index de0df2581..000000000 --- a/assets/iframe-router.8a0fc162.js +++ /dev/null @@ -1,3455 +0,0 @@ -import{o as e,a as p,u as d}from"./vue-libs.1ccdd11c.js";const b=function(){const s=document.createElement("link").relList;if(s&&s.supports&&s.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))l(t);new MutationObserver(t=>{for(const c of t)if(c.type==="childList")for(const r of c.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&l(r)}).observe(document,{childList:!0,subtree:!0});function n(t){const c={};return t.integrity&&(c.integrity=t.integrity),t.referrerpolicy&&(c.referrerPolicy=t.referrerpolicy),t.crossorigin==="use-credentials"?c.credentials="include":t.crossorigin==="anonymous"?c.credentials="omit":c.credentials="same-origin",c}function l(t){if(t.ep)return;t.ep=!0;const c=n(t);fetch(t.href,c)}};b();var Un=(a,s)=>{const n=a.__vccOpts||a;for(const[l,t]of s)n[l]=t;return n};const v={class:"van-doc-markdown-body"},q=d('

\u66F4\u65B0\u65E5\u5FD7

v1.10.22

2023-07-24

Bug Fixes

v1.10.21

2023-07-10

Bug Fixes

Feature

v1.10.20

2023-07-03

Bug Fixes

Document

Feature

v1.10.19

2023-05-19

Bug Fixes

v1.10.18

2023-05-08

Bug Fixes

Feature

v1.10.17

2023-05-04

Bug Fixes

v1.10.16

2023-04-18

Bug Fixes

v1.10.15

2023-04-03

Bug Fixes

Feature

hotfix

v1.10.14

2023-02-27

Bug Fixes

Document

Feature

v1.10.13

2023-02-13

Bug Fixes

Feature

v1.10.12

2023-01-16

Bug Fixes

Document

Feature

v1.10.11

2023-01-03

Bug Fixes

Feature

v1.10.10

2022-12-16

Bug Fixes

Document

Feature

v1.10.9

2022-12-12

Bug Fixes

Feature

v1.10.8

2022-11-29

Bug Fixes

Document

Feature

v1.10.7

2022-11-18

Bug Fixes

Document

Feature

v1.10.6

2022-11-06

Bug Fixes

Feature

v1.10.5

2022-09-07

Feature

Bug Fixes

v1.10.4

2022-07-23

Feature

Bug Fixes

v1.10.3

2022-05-02

Feature

Bug Fixes

v1.10.2

2022-01-11

Bug Fixes

v1.10.1

2022-01-04

Bug Fixes

Document

Feature

v1.10.0

2021-12-21

Bug Fixes

Document

Feature

v1.9.2

2021-10-28

Bug Fixes

Feature

v1.9.1

2021-09-29

Bug Fixes

Document

Feature

v1.9.0

2021-09-27

Bug Fixes

Document

Feature

Performance

v1.8.7

2021-09-22

Features

1.8.6

2021-09-20

Features

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

1.8.4

2021-09-07

Bug Fixes

Features

v1.8.3

2021-08-30

Bug Fixes

Features

Performance Improvements

v1.8.2

2021-08-18

Bug Fixes

v1.8.1

2021-08-18

Feature

Bug Fixes

v1.8.0

2021-08-11

Feature

Performance

v1.7.2

2021-07-19

Bug Fixes

Features

1.7.1

2021-07-06

Bug Fixes

1.7.0

2021-07-04

Bug Fixes

Features

Improvements

1.6.9

2021-06-06

Bug Fixes

1.6.9-beta.2

2021-05-22

Bug Fixes

Features

1.6.8

2021-02-26

Features

Bug Fixes

Improvements

1.6.7

2021-01-27

Features

Bug Fixes

1.6.6

2021-01-21

Features

Bug Fixes

Improvements

1.6.5

2021-01-19

Features

Bug Fixes

Improvements

1.6.4

2020-12-18

Improvements

Bug Fixes

1.6.3

2020-12-09

Features

Improvements

Bug Fixes

1.6.2

2020-11-29

Features

Bug Fixes

Improvements

1.6.1

2020-11-12

Bug Fixes

1.6.0

2020-11-11

Features

Bug Fixes

1.5.2

2020-10-15

Features

Bug Fixes

1.5.1

2020-09-29

Features

Bug Fixes

1.5.0

2020-08-27

Features

Bug Fixes

1.4.4

2020-08-12

Bug Fixes

v1.4.3

2020-08-07

Features

v1.4.2

2020-08-03

Features

Bug Fixes

v1.4.1

2020-07-28

Features

Bug Fixes

v1.4.0

2020-07-17

Features

Bug Fixes

v1.3.3

2020-06-24

Features

Bug Fixes

v1.3.2

2020-06-04

Features

Bug Fixes

v1.3.1

2020-05-24

Features

Bug Fixes

v1.3.0

2020-05-08

\u652F\u6301\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A

1.3.0 \u4E2D\uFF0C\u6211\u4EEC\u4E3A\u6570\u4E2A\u8868\u5355\u7EC4\u4EF6\u652F\u6301\u4E86\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A\uFF0C\u6D89\u53CA\u7EC4\u4EF6\u6709

Slider #3107

Search #3106

Rate #3105

Features

Bug Fixes

v1.2.2

2020-04-21

Features

Bug Fixes

v1.2.1

2020-04-12

Features

Bug Fixes

v1.2.0

2020-04-04

Features

Bug Fixes

v1.1.0

2020-03-21

Features

Bug Fixes

v1.0.7

2020-03-04

Features

Bug Fixes

v1.0.6

2020-02-24

Features

Bug Fixes

v1.0.5

2020-02-07

Features

Bug Fixes

v1.0.4

2020-01-21

Features

Bug Fixes

v1.0.3

2020-01-09

Features

Bug Fixes

v1.0.2

2019-12-31

Features

Improvements

Bug Fixes

v1.0.1

2019-12-23

Features

Improvements

Bug Fixes

v1.0.0

2019-12-11

\u4E3B\u8981\u53D8\u52A8

\u65B0\u7EC4\u4EF6

\u5728 Vant Weapp 1.0 \u7248\u672C\u4E2D\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 11 \u4E2A\u5B9E\u7528\u7684\u57FA\u7840\u7EC4\u4EF6\uFF1A

\u6837\u5F0F\u5B9A\u5236

\u5728 1.0 \u8FED\u4EE3\u8BA1\u5212\u786E\u5B9A\u4E4B\u521D\uFF0C\u6211\u4EEC\u5C31\u4E0D\u65AD\u601D\u8003\u8FD9\u6837\u4E00\u4E2A\u95EE\u9898 -- \u8BE5\u5982\u4F55\u7ED9\u7528\u6237\u63D0\u4F9B\u52A8\u6001\u5207\u6362\u4E3B\u9898\u6837\u5F0F\u7684\u529F\u80FD\u5462\uFF1F

\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u73AF\u5883\u662F\u975E\u5E38\u7279\u6B8A\u7684\u3002\u4E0D\u5177\u6709\u52A8\u6001\u52A0\u8F7D\u4EE3\u7801\u7684\u673A\u5236\uFF0C\u540C\u65F6\u5FAE\u4FE1\u53C8\u9650\u5236\u4E86\u4EE3\u7801\u7684\u4E3B\u5305\u5927\u5C0F\u548C\u603B\u5927\u5C0F\u3002\u4F20\u7EDF\u7684\u57FA\u4E8E\u9884\u8BBE\u7684\u6837\u5F0F\u5B9A\u5236\u8FC7\u4E8E\u81C3\u80BF\uFF0C\u4E0D\u518D\u9002\u5408\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u73AF\u5883\u3002

\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684\u7EC4\u4EF6\u6A21\u578B\u76F8\u5F53\u4E8E\u4E00\u4E2A\u7B80\u5316\u7248\u7684 Shadow DOM\uFF0C\u5E78\u8FD0\u7684\u662F\uFF0C\u5C0F\u7A0B\u5E8F\u4E5F\u652F\u6301\u4E86 CSS \u81EA\u5B9A\u4E49\u5C5E\u6027 \u7684\u7279\u6027\u3002\u6700\u7EC8\uFF0C\u6211\u4EEC\u57FA\u4E8E CSS \u81EA\u5B9A\u4E49\u5C5E\u6027\u8BBE\u8BA1\u4E86\u6837\u5F0F\u5B9A\u5236\u7684\u65B9\u6848\uFF0C\u5F00\u53D1\u8005\u4F7F\u7528\u7075\u6D3B\u3001\u65B9\u4FBF\uFF0C\u7EC4\u4EF6\u7EF4\u62A4\u4E5F\u66F4\u7B80\u5355\u3002

\u4ECE 1.0 \u7248\u672C\u5F00\u59CB\uFF0CVant Weapp \u4E2D\u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u652F\u6301\u901A\u8FC7 CSS \u7EC4\u5B9A\u4E49\u5C5E\u6027 \u8FDB\u884C\u6837\u5F0F\u5B9A\u5236\uFF0C\u5177\u4F53\u4F7F\u7528\u59FF\u52BF\u53EF\u67E5\u770B\u76F8\u5173\u6587\u6863

\u5B9A\u5236\u4E3B\u9898

\u4E0D\u517C\u5BB9\u66F4\u65B0

1.0 \u7248\u672C\u4E2D\u5305\u542B\u5C11\u91CF\u4E0D\u517C\u5BB9\u66F4\u65B0\uFF0C\u4E3B\u8981\u662F\u547D\u540D\u8C03\u6574\u548C\u79FB\u9664\u4E2A\u522B\u5C5E\u6027\u3002\u5BF9\u4E8E\u6B63\u5728\u4F7F\u7528 0.x \u7248\u672C\u7684\u9879\u76EE\uFF0C\u8BF7\u6309\u7167\u4E0B\u65B9\u7684\u5217\u8868\u4F9D\u6B21\u68C0\u67E5\uFF0C\u5927\u90E8\u5206\u9879\u76EE\u53EF\u4EE5\u65E0\u75DB\u5347\u7EA7\u3002

Badge
Notify
SwitchCell
Transition

\u65B0\u7279\u6027

ActionSheet
Area
Button
Checkbox
Color
DatetimePicker
Dialog
Field
GoodsActionButton
GoodsActionIcon
GridItem
Icon
Loading
NoticeBar
Notify
Progress
Radio
Rate
SlidebarItem
Slider
SwipeCell
Switch
Stepper
Steps
Tabs
TreeSelect
',73),f=[q],y={__name:"changelog",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",v,f))}},_={class:"van-doc-markdown-body"},x=d(`

\u6837\u5F0F\u8986\u76D6

\u4ECB\u7ECD

Vant Weapp \u57FA\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u673A\u5236\uFF0C\u4E3A\u5F00\u53D1\u8005\u63D0\u4F9B\u4E86\u4EE5\u4E0B 3 \u79CD\u4FEE\u6539\u7EC4\u4EF6\u6837\u5F0F\u7684\u65B9\u6CD5

\u89E3\u9664\u6837\u5F0F\u9694\u79BB

\u6837\u5F0F\u9694\u79BB\u7684\u76F8\u5173\u80CC\u666F\u77E5\u8BC6\u8BF7\u67E5\u9605\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863


Vant Weapp \u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u5F00\u542F\u4E86addGlobalClass: true\u4EE5\u63A5\u53D7\u5916\u90E8\u6837\u5F0F\u7684\u5F71\u54CD\uFF0C\u53EF\u4EE5\u4F7F\u7528\u5982\u4E0B 2 \u79CD\u65B9\u5F0F\u8986\u76D6\u7EC4\u4EF6\u6837\u5F0F

\u5728\u9875\u9762\u4E2D\u4F7F\u7528 Vant Weapp \u7EC4\u4EF6\u65F6\uFF0C\u53EF\u76F4\u63A5\u5728\u9875\u9762\u7684\u6837\u5F0F\u6587\u4EF6\u4E2D\u8986\u76D6\u6837\u5F0F

<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>
-
/* page.wxss */
-.van-button--primary {
-  font-size: 20px;
-  background-color: pink;
-}
-

\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u4F7F\u7528 Vant Weapp \u7EC4\u4EF6\u65F6\uFF0C\u9700\u5F00\u542FstyleIsolation: 'shared'\u9009\u9879

<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>
-
Component({
-  options: {
-    styleIsolation: 'shared',
-  },
-});
-
.van-button--primary {
-  font-size: 20px;
-  background-color: pink;
-}
-

\u4F7F\u7528\u5916\u90E8\u6837\u5F0F\u7C7B

\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u76F8\u5173\u77E5\u8BC6\u80CC\u666F\u8BF7\u67E5\u9605\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863


Vant Weapp \u5F00\u653E\u4E86\u5927\u91CF\u7684\u5916\u90E8\u6837\u5F0F\u7C7B\u4F9B\u5F00\u53D1\u8005\u4F7F\u7528\uFF0C\u5177\u4F53\u7684\u6837\u5F0F\u7C7B\u540D\u79F0\u53EF\u67E5\u9605\u5BF9\u5E94\u7EC4\u4EF6\u7684\u201C\u5916\u90E8\u6837\u5F0F\u7C7B\u201D\u90E8\u5206\u3002

\u9700\u8981\u6CE8\u610F\u7684\u662F\u666E\u901A\u6837\u5F0F\u7C7B\u548C\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u4F18\u5148\u7EA7\u662F\u672A\u5B9A\u4E49\u7684\uFF0C\u56E0\u6B64\u4F7F\u7528\u65F6\u8BF7\u6DFB\u52A0!important\u4EE5\u4FDD\u8BC1\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u4F18\u5148\u7EA7\u3002

<van-cell
-  title="\u5355\u5143\u683C"
-  value="\u5185\u5BB9"
-  title-class="cell-title"
-  value-class="cell-value"
-/>
-
.cell-title {
-  color: pink !important;
-  font-size: 20px !important;
-}
-
-.cell-value {
-  color: green !important;
-  font-size: 12px !important;
-}
-

\u4F7F\u7528 CSS \u53D8\u91CF

Vant Weapp \u4E3A\u90E8\u5206 CSS \u5C5E\u6027\u5F00\u653E\u4E86\u57FA\u4E8E CSS \u5C5E\u6027\u7684\u5B9A\u5236\u65B9\u6848\u3002

\u76F8\u8F83\u4E8E \u89E3\u9664\u6837\u5F0F\u9694\u79BB \u548C \u4F7F\u7528\u5916\u90E8\u6837\u5F0F\u7C7B\uFF0C\u8FD9\u79CD\u65B9\u6848\u652F\u6301\u5728\u9875\u9762\u6216\u5E94\u7528\u7EA7\u522B\u5BF9\u591A\u4E2A\u7EC4\u4EF6\u7684\u6837\u5F0F\u505A\u6279\u91CF\u4FEE\u6539\u4EE5\u8FDB\u884C\u4E3B\u9898\u6837\u5F0F\u7684\u5B9A\u5236\u3002

\u5F53\u7136\uFF0C\u7528\u5B83\u6765\u4FEE\u6539\u5355\u4E2A\u7EC4\u4EF6\u7684\u90E8\u5206\u6837\u5F0F\u4E5F\u662F\u7EF0\u7EF0\u6709\u4F59\u7684\u3002\u5177\u4F53\u7684\u4F7F\u7528\u65B9\u6CD5\u8BF7\u67E5\u9605\u5B9A\u5236\u4E3B\u9898

`,5),w=[x],k={__name:"custom-style",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",_,w))}},z={class:"van-doc-markdown-body"},C=d('

Vant Weapp

\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u5C0F\u7A0B\u5E8F UI \u7EC4\u4EF6\u5E93

\u4ECB\u7ECD

Vant \u662F\u4E00\u4E2A\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93\uFF0C\u4E8E 2017 \u5E74\u5F00\u6E90\u3002

\u76EE\u524D Vant \u5B98\u65B9\u63D0\u4F9B\u4E86 Vue 2 \u7248\u672C\u3001Vue 3 \u7248\u672C\u548C\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248\u672C\uFF0C\u5E76\u7531\u793E\u533A\u56E2\u961F\u7EF4\u62A4 React \u7248\u672C\u548C\u652F\u4ED8\u5B9D\u5C0F\u7A0B\u5E8F\u7248\u672C\u3002

\u9884\u89C8

\u626B\u63CF\u4E0B\u65B9\u5C0F\u7A0B\u5E8F\u4E8C\u7EF4\u7801\uFF0C\u4F53\u9A8C\u7EC4\u4EF6\u5E93\u793A\u4F8B\uFF1A

Tips: \u4E3A\u4E86\u4FBF\u4E8E\u9884\u89C8\u7EC4\u4EF6\u6548\u679C\uFF0C\u672C\u6587\u6863\u7684\u53F3\u4FA7\u5185\u5D4C\u4E86 H5 \u7248\u7684 Vant \u9875\u9762\u4F5C\u4E3A\u53C2\u8003\u3002\u5728\u5B9E\u9645\u4F7F\u7528\u4E2D\uFF0C\u4E2A\u522B\u7EC4\u4EF6\u7684\u8868\u73B0\u53EF\u80FD\u4E0E\u5C0F\u7A0B\u5E8F\u4E0A\u7684\u8868\u73B0\u6709\u5DEE\u5F02\uFF0C\u8BF7\u4EE5\u5B9E\u9645\u6548\u679C\u4E3A\u51C6\u3002

\u5FEB\u901F\u4E0A\u624B

\u8BF7\u53C2\u8003 \u5FEB\u901F\u4E0A\u624B\u3002

\u94FE\u63A5

\u8D21\u732E

\u6838\u5FC3\u56E2\u961F

\u4EE5\u4E0B\u662F Vant \u548C Vant Weapp \u7684\u6838\u5FC3\u8D21\u732E\u8005\u4EEC\uFF1A

chenjiahancookfrontw91pangxie1991rex-zsdnemo-shen
chenjiahancookfrontwangnaiyipangxierex-zsdnemo-shen
LindysenJakeLaoyulandluckwjw-gavininottnzhousg
LindysenJakeLaoyulandluckwjw-gavininottnzhousg

\u8D21\u732E\u8005\u4EEC

\u611F\u8C22\u4EE5\u4E0B\u5C0F\u4F19\u4F34\u4EEC\u4E3A Vant Weapp \u53D1\u5C55\u505A\u51FA\u7684\u8D21\u732E\uFF1A

contributors

\u8D21\u732E\u4EE3\u7801

\u4F7F\u7528\u8FC7\u7A0B\u4E2D\u53D1\u73B0\u4EFB\u4F55\u95EE\u9898\u90FD\u53EF\u4EE5\u63D0 Issue \u7ED9\u6211\u4EEC\uFF0C\u5F53\u7136\uFF0C\u6211\u4EEC\u4E5F\u975E\u5E38\u6B22\u8FCE\u4F60\u7ED9\u6211\u4EEC\u53D1 PR\u3002

\u5F00\u6E90\u534F\u8BAE

\u672C\u9879\u76EE\u57FA\u4E8E MIT \u534F\u8BAE\uFF0C\u8BF7\u81EA\u7531\u5730\u4EAB\u53D7\u548C\u53C2\u4E0E\u5F00\u6E90\u3002

',10),P=[C],S={__name:"home",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",z,P))}},D={class:"van-doc-markdown-body"},I=d(`

\u5FEB\u901F\u4E0A\u624B

\u80CC\u666F\u77E5\u8BC6

\u4F7F\u7528 Vant Weapp \u524D\uFF0C\u8BF7\u786E\u4FDD\u4F60\u5DF2\u7ECF\u5B66\u4E60\u8FC7\u5FAE\u4FE1\u5B98\u65B9\u7684 \u5C0F\u7A0B\u5E8F\u7B80\u6613\u6559\u7A0B \u548C \u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4ECB\u7ECD\u3002

\u5B89\u88C5

\u6B65\u9AA4\u4E00 \u901A\u8FC7 npm \u5B89\u88C5

\u4F7F\u7528 npm \u6784\u5EFA\u524D\uFF0C\u8BF7\u5148\u9605\u8BFB\u5FAE\u4FE1\u5B98\u65B9\u7684 npm \u652F\u6301

# \u901A\u8FC7 npm \u5B89\u88C5
-npm i @vant/weapp -S --production
-
-# \u901A\u8FC7 yarn \u5B89\u88C5
-yarn add @vant/weapp --production
-
-# \u5B89\u88C5 0.x \u7248\u672C
-npm i vant-weapp -S --production
-

\u6B65\u9AA4\u4E8C \u4FEE\u6539 app.json

\u5C06 app.json \u4E2D\u7684 "style": "v2" \u53BB\u9664\uFF0C\u5C0F\u7A0B\u5E8F\u7684\u65B0\u7248\u57FA\u7840\u7EC4\u4EF6\u5F3A\u884C\u52A0\u4E0A\u4E86\u8BB8\u591A\u6837\u5F0F\uFF0C\u96BE\u4EE5\u8986\u76D6\uFF0C\u4E0D\u5173\u95ED\u5C06\u9020\u6210\u90E8\u5206\u7EC4\u4EF6\u6837\u5F0F\u6DF7\u4E71\u3002

\u6B65\u9AA4\u4E09 \u4FEE\u6539 project.config.json

\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u9879\u76EE\uFF0CminiprogramRoot \u9ED8\u8BA4\u4E3A miniprogram\uFF0Cpackage.json \u5728\u5176\u5916\u90E8\uFF0Cnpm \u6784\u5EFA\u65E0\u6CD5\u6B63\u5E38\u5DE5\u4F5C\u3002

\u9700\u8981\u624B\u52A8\u5728 project.config.json \u5185\u6DFB\u52A0\u5982\u4E0B\u914D\u7F6E\uFF0C\u4F7F\u5F00\u53D1\u8005\u5DE5\u5177\u53EF\u4EE5\u6B63\u786E\u7D22\u5F15\u5230 npm \u4F9D\u8D56\u7684\u4F4D\u7F6E\u3002

{
-  ...
-  "setting": {
-    ...
-    "packNpmManually": true,
-    "packNpmRelationList": [
-      {
-        "packageJsonPath": "./package.json",
-        "miniprogramNpmDistDir": "./miniprogram/"
-      }
-    ]
-  }
-}
-

\u6CE8\u610F\uFF1A \u7531\u4E8E\u76EE\u524D\u65B0\u7248\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u5C0F\u7A0B\u5E8F\u76EE\u5F55\u6587\u4EF6\u7ED3\u6784\u95EE\u9898\uFF0Cnpm\u6784\u5EFA\u7684\u6587\u4EF6\u76EE\u5F55\u4E3Aminiprogram_npm\uFF0C\u5E76\u4E14\u5F00\u53D1\u5DE5\u5177\u4F1A\u9ED8\u8BA4\u5728\u5F53\u524D\u76EE\u5F55\u4E0B\u521B\u5EFAminiprogram_npm\u7684\u6587\u4EF6\u540D\uFF0C\u6240\u4EE5\u65B0\u7248\u672C\u7684miniprogramNpmDistDir\u914D\u7F6E\u4E3A'./'\u5373\u53EF

\u6B65\u9AA4\u56DB \u6784\u5EFA npm \u5305

\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u70B9\u51FB \u5DE5\u5177 -> \u6784\u5EFA npm\uFF0C\u5E76\u52FE\u9009 \u4F7F\u7528 npm \u6A21\u5757 \u9009\u9879\uFF0C\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u5373\u53EF\u5F15\u5165\u7EC4\u4EF6\u3002

\u6B65\u9AA4\u4E94 typescript \u652F\u6301

\u5982\u679C\u4F60\u4F7F\u7528 typescript \u5F00\u53D1\u5C0F\u7A0B\u5E8F\uFF0C\u8FD8\u9700\u8981\u505A\u5982\u4E0B\u64CD\u4F5C\uFF0C\u4EE5\u83B7\u5F97\u987A\u7545\u7684\u5F00\u53D1\u4F53\u9A8C\u3002

\u5B89\u88C5 miniprogram-api-typings

# \u901A\u8FC7 npm \u5B89\u88C5
-npm i -D miniprogram-api-typings
-
-# \u901A\u8FC7 yarn \u5B89\u88C5
-yarn add -D miniprogram-api-typings
-

\u5728 tsconfig.json \u4E2D\u589E\u52A0\u5982\u4E0B\u914D\u7F6E\uFF0C\u4EE5\u9632\u6B62 tsc \u7F16\u8BD1\u62A5\u9519\u3002

\u8BF7\u5C06path/to/node_modules/@vant/weapp\u4FEE\u6539\u4E3A\u9879\u76EE\u7684 node_modules \u4E2D @vant/weapp \u6240\u5728\u7684\u76EE\u5F55\u3002

{
-  ...
-  "compilerOptions": {
-    ...
-    "baseUrl": ".",
-    "types": ["miniprogram-api-typings"],
-    "paths": {
-      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
-    },
-    "lib": ["ES6"]
-  }
-}
-

\u793A\u4F8B\u5DE5\u7A0B

\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A\u793A\u4F8B\u5DE5\u7A0B\uFF0C\u793A\u4F8B\u5DE5\u7A0B\u4F1A\u5E2E\u52A9\u4F60\u4E86\u89E3\u5982\u4E0B\u5185\u5BB9\uFF1A

\u4F7F\u7528

\u5F15\u5165\u7EC4\u4EF6

\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u53EA\u9700\u8981\u5728app.json\u6216index.json\u4E2D\u914D\u7F6E Button \u5BF9\u5E94\u7684\u8DEF\u5F84\u5373\u53EF\u3002

\u6240\u6709\u7EC4\u4EF6\u6587\u6863\u4E2D\u7684\u5F15\u5165\u8DEF\u5F84\u5747\u4EE5 npm \u5B89\u88C5\u4E3A\u4F8B\uFF0C\u5982\u679C\u4F60\u662F\u901A\u8FC7\u4E0B\u8F7D\u6E90\u4EE3\u7801\u7684\u65B9\u5F0F\u4F7F\u7528 @vant/weapp\uFF0C\u8BF7\u5C06\u8DEF\u5F84\u4FEE\u6539\u4E3A\u9879\u76EE\u4E2D @vant/weapp \u6240\u5728\u7684\u76EE\u5F55\u3002

// \u901A\u8FC7 npm \u5B89\u88C5
-// app.json
-"usingComponents": {
-  "van-button": "@vant/weapp/button/index"
-}
-
// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es6\u7248\u672C
-// app.json
-"usingComponents": {
-  "van-button": "path/to/@vant/weapp/dist/button/index"
-}
-
// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es5\u7248\u672C
-// app.json
-"usingComponents": {
-  "van-button": "path/to/@vant/weapp/lib/button/index"
-}
-

\u4F7F\u7528\u7EC4\u4EF6

\u5F15\u5165\u7EC4\u4EF6\u540E\uFF0C\u53EF\u4EE5\u5728 wxml \u4E2D\u76F4\u63A5\u4F7F\u7528\u7EC4\u4EF6

<van-button type="primary">\u6309\u94AE</van-button>
-

\u5176\u4ED6

\u5728\u5F00\u53D1\u8005\u5DE5\u5177\u4E2D\u9884\u89C8\u793A\u4F8B\u5C0F\u7A0B\u5E8F


-# \u5C06\u9879\u76EE\u514B\u9686\u5230\u672C\u5730
-git clone git@github.com:youzan/vant-weapp.git
-
-# \u5B89\u88C5\u9879\u76EE\u4F9D\u8D56
-cd vant-weapp && npm install
-
-# \u6267\u884C\u7EC4\u4EF6\u7F16\u8BD1
-npm run dev
-
-

\u63A5\u7740\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u5BFC\u5165example\u76EE\u5F55\u7684\u9879\u76EE\u5C31\u53EF\u4EE5\u9884\u89C8\u793A\u4F8B\u4E86\u3002

\u5173\u4E8E\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15

@vant/weapp \u90E8\u5206\u7EC4\u4EF6\u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u63A5\u53E3\uFF0C\u5176\u4E2D\u90E8\u5206\u63A5\u53E3\u6D89\u53CA\u83B7\u53D6\u7528\u6237\u9690\u79C1\u4FE1\u606F\u3002

\u4F8B\u5982 <Uploader /> \u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u9009\u62E9\u7528\u6237\u76F8\u518C\u4E2D\u56FE\u7247\u63A5\u53E3(wx.chooseImage)\u3002

\u5F53\u5C0F\u7A0B\u5E8F\u5F15\u5165 @vant/weapp \u5E76\u53D1\u5E03\u65F6\uFF0C \u6839\u636E\u5FAE\u4FE1\u300A\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u586B\u5199\u8BF4\u660E\u300B\uFF0C \u5982\u68C0\u6D4B\u5230\u4EE3\u7801\u4E2D\u5B58\u5728\u6D89\u53CA\u7528\u6237\u9690\u79C1\u4FE1\u606F\u63A5\u53E3\u5219\u9700\u586B\u5199\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u4FE1\u606F\uFF0C\u5982\u5DF2\u586B\u5199\u5219\u65E0\u9700\u91CD\u590D\u586B\u5199\u3002

`,15),$=[I],T={__name:"quickstart",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",D,$))}},A={class:"van-doc-markdown-body"},E=d(`

\u5B9A\u5236\u4E3B\u9898

\u80CC\u666F\u77E5\u8BC6

\u5C0F\u7A0B\u5E8F\u57FA\u4E8E Shadow DOM \u6765\u5B9E\u73B0\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u6240\u4EE5 Vant Weapp \u4F7F\u7528\u4E0E\u4E4B\u914D\u5957\u7684 CSS \u53D8\u91CF \u6765\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3002\u94FE\u63A5\u4E2D\u7684\u5185\u5BB9\u53EF\u4EE5\u5E2E\u52A9\u4F60\u5BF9\u8FD9\u4E24\u4E2A\u6982\u5FF5\u6709\u57FA\u672C\u7684\u8BA4\u8BC6\uFF0C\u907F\u514D\u8BB8\u591A\u4E0D\u5FC5\u8981\u7684\u56F0\u6270\u3002

CSS \u53D8\u91CF \u7684\u517C\u5BB9\u6027\u8981\u6C42\u53EF\u4EE5\u5728 \u8FD9\u91CC \u67E5\u770B\u3002\u5BF9\u4E8E\u4E0D\u652F\u6301 CSS \u53D8\u91CF \u7684\u8BBE\u5907\uFF0C\u5B9A\u5236\u4E3B\u9898\u5C06\u4E0D\u4F1A\u751F\u6548\uFF0C\u4E0D\u8FC7\u4E0D\u5FC5\u62C5\u5FC3\uFF0C\u9ED8\u8BA4\u6837\u5F0F\u4ECD\u4F1A\u751F\u6548\u3002

\u6837\u5F0F\u53D8\u91CF

\u5B9A\u5236\u4F7F\u7528\u7684 CSS \u53D8\u91CF \u4E0E Less \u53D8\u91CF \u540C\u540D\uFF0C\u4E0B\u9762\u662F\u4E00\u4E9B\u57FA\u672C\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u6240\u6709\u53EF\u7528\u7684\u989C\u8272\u53D8\u91CF\u8BF7\u53C2\u8003 \u914D\u7F6E\u6587\u4EF6\u3002

// Component Colors
-@text-color: #323233;
-@border-color: #ebedf0;
-@active-color: #f2f3f5;
-@background-color: #f8f8f8;
-@background-color-light: #fafafa;
-

\u5B9A\u5236\u65B9\u6CD5

\u5B9A\u5236\u5355\u4E2A\u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F

\u5728 wxss \u4E2D\u4E3A\u7EC4\u4EF6\u8BBE\u7F6E CSS \u53D8\u91CF

<van-button class="my-button">
-  \u9ED8\u8BA4\u6309\u94AE
-</van-button>
-
.my-button {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-}
-

\u6216\u901A\u8FC7 style \u5C5E\u6027\u6765\u8BBE\u7F6E CSS \u53D8\u91CF\uFF0C\u8FD9\u4F7F\u4F60\u80FD\u591F\u8F7B\u677E\u5B9E\u73B0\u4E3B\u9898\u7684\u52A8\u6001\u5207\u6362

<van-button style="{{ buttonStyle }}">
-  \u9ED8\u8BA4\u6309\u94AE
-</van-button>
-
Page({
-  data: {
-    buttonStyle: \`
-      --button-border-radius: 10px;
-      --button-default-color: green;
-    \`,
-  },
-
-  onLoad() {
-    setTimeout(() => {
-      this.setData({
-        buttonStyle: \`
-          --button-border-radius: 2px;
-          --button-default-color: pink;
-        \`,
-      });
-    }, 2000);
-  },
-});
-

\u5B9A\u5236\u591A\u4E2A\u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F

\u4E0E\u5355\u4E2A\u7EC4\u4EF6\u7684\u5B9A\u5236\u65B9\u5F0F\u7C7B\u4F3C\uFF0C\u53EA\u9700\u7528\u4E00\u4E2A container \u8282\u70B9\u5305\u88F9\u4F4F\u9700\u8981\u5B9A\u5236\u7684\u7EC4\u4EF6\uFF0C\u5E76\u5C06 CSS \u53D8\u91CF \u8BBE\u7F6E\u5728 container \u8282\u70B9\u4E0A

<view class="container">
-  <van-button bind:click="onClick">
-    \u9ED8\u8BA4\u6309\u94AE
-  </van-button>
-
-  <van-toast id="van-toast" />
-</view>
-
import Toast from '@vant/weapp/toast/toast';
-
-Page({
-  onClick() {
-    Toast('\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~');
-  },
-});
-
.container {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-  --toast-max-width: 100px;
-  --toast-background-color: pink;
-}
-

\u5B9A\u5236\u5168\u5C40\u4E3B\u9898\u6837\u5F0F

\u5728 app.wxss \u4E2D\uFF0C\u5199\u5165 CSS \u53D8\u91CF\uFF0C\u5373\u53EF\u5BF9\u5168\u5C40\u751F\u6548

page {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-  --toast-max-width: 100px;
-  --toast-background-color: pink;
-}
-
`,7),F=[E],B={__name:"theme",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",A,F))}},R={class:"van-doc-markdown-body"},N=d(`

ActionSheet \u52A8\u4F5C\u9762\u677F

\u4ECB\u7ECD

\u5E95\u90E8\u5F39\u8D77\u7684\u6A21\u6001\u9762\u677F\uFF0C\u5305\u542B\u4E0E\u5F53\u524D\u60C5\u5883\u76F8\u5173\u7684\u591A\u4E2A\u9009\u9879\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-action-sheet": "@vant/weapp/action-sheet/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u9700\u8981\u4F20\u5165\u4E00\u4E2Aactions\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u5C5E\u6027\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002

<van-action-sheet
-  show="{{ show }}"
-  actions="{{ actions }}"
-  bind:close="onClose"
-  bind:select="onSelect"
-/>
-
Page({
-  data: {
-    show: false,
-    actions: [
-      {
-        name: '\u9009\u9879',
-      },
-      {
-        name: '\u9009\u9879',
-      },
-      {
-        name: '\u9009\u9879',
-        subname: '\u63CF\u8FF0\u4FE1\u606F',
-        openType: 'share',
-      },
-    ],
-  },
-
-  onClose() {
-    this.setData({ show: false });
-  },
-
-  onSelect(event) {
-    console.log(event.detail);
-  },
-});
-

\u5C55\u793A\u53D6\u6D88\u6309\u94AE

\u8BBE\u7F6Ecancel-text\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5E95\u90E8\u5C55\u793A\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u5173\u95ED\u5F53\u524D\u83DC\u5355\u3002

<van-action-sheet
-  show="{{ show }}"
-  actions="{{ actions }}"
-  cancel-text="\u53D6\u6D88"
-/>
-

\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F

\u8BBE\u7F6Edescription\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u9009\u9879\u4E0A\u65B9\u663E\u793A\u63CF\u8FF0\u4FE1\u606F\u3002

<van-action-sheet
-  show="{{ show }}"
-  actions="{{ actions }}"
-  description="\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F"
-/>
-

\u9009\u9879\u72B6\u6001

\u9009\u9879\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u72B6\u6001\u6216\u7981\u7528\u72B6\u6001\u3002

<van-action-sheet
-  show="{{ show }}"
-  actions="{{ actions }}"
-  cancel-text="\u53D6\u6D88"
-/>
-
Page({
-  data: {
-    show: false,
-    actions: [
-      { name: '\u7740\u8272\u9009\u9879', color: '#ee0a24' },
-      { loading: true },
-      { name: '\u7981\u7528\u9009\u9879', disabled: true },
-    ],
-  },
-});
-

\u81EA\u5B9A\u4E49\u9762\u677F

\u901A\u8FC7\u8BBE\u7F6Etitle\u5C5E\u6027\u5C55\u793A\u6807\u9898\u680F\uFF0C\u540C\u65F6\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9\u3002

<van-action-sheet show="{{ show }}" title="\u6807\u9898">
-  <view>\u5185\u5BB9</view>
-</van-action-sheet>
-

\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B

\u9700\u8981\u4F20\u5165\u4E00\u4E2Aactions\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u5C5E\u6027\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002

<van-action-sheet
-  show="{{ show }}"
-  actions="{{ actions }}"
-  bind:close="onClose"
-  bind:getuserinfo="onGetUserInfo"
-/>
-
Page({
-  data: {
-    show: false,
-    actions: [
-      { name: '\u83B7\u53D6\u7528\u6237\u4FE1\u606F', color: '#07c160', openType: 'getUserInfo' },
-    ],
-  },
-
-  onClose() {
-    this.setData({ show: false });
-  },
-
-  onGetUserInfo(e) {
-    console.log(e.detail);
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
show\u662F\u5426\u663E\u793A\u52A8\u4F5C\u9762\u677Fboolean-
actions\u83DC\u5355\u9009\u9879Array[]
title\u6807\u9898string-
description v1.0.0\u9009\u9879\u4E0A\u65B9\u7684\u63CF\u8FF0\u4FE1\u606Fstring-
z-indexz-index \u5C42\u7EA7number100
cancel-text\u53D6\u6D88\u6309\u94AE\u6587\u5B57string-
overlay\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42boolean-
round v1.0.0\u662F\u5426\u663E\u793A\u5706\u89D2booleantrue
close-on-click-action\u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95EDbooleantrue
close-on-click-overlay\u70B9\u51FB\u906E\u7F69\u662F\u5426\u5173\u95ED\u83DC\u5355booleantrue
safe-area-inset-bottom\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BBbooleantrue

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:select\u9009\u4E2D\u9009\u9879\u65F6\u89E6\u53D1\uFF0C\u7981\u7528\u6216\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1event.detail: \u9009\u9879\u5BF9\u5E94\u7684\u5BF9\u8C61
bind:close\u5173\u95ED\u65F6\u89E6\u53D1-
bind:cancel\u53D6\u6D88\u6309\u94AE\u70B9\u51FB\u65F6\u89E6\u53D1-
bind:click-overlay\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1-
bind:getuserinfo\u7528\u6237\u70B9\u51FB\u8BE5\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C\u56DE\u8C03\u7684 detail \u6570\u636E\u4E0E wx.getUserInfo \u8FD4\u56DE\u7684\u4E00\u81F4\uFF0CopenType="getUserInfo"\u65F6\u6709\u6548-
bind:contact\u5BA2\u670D\u6D88\u606F\u56DE\u8C03\uFF0CopenType="contact"\u65F6\u6709\u6548-
bind:getphonenumber\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03\uFF0CopenType="getPhoneNumber"\u65F6\u6709\u6548-
bind:getrealtimephonenumber v1.10.21\u83B7\u53D6\u624B\u673A\u53F7\u5B9E\u65F6\u9A8C\u8BC1\u56DE\u8C03\uFF0CopenType="getRealtimePhoneNumber"\u65F6\u6709\u6548-
bind:error\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03\uFF0CopenType="launchApp"\u65F6\u6709\u6548-
bind:launchapp\u6253\u5F00 APP \u6210\u529F\u7684\u56DE\u8C03\uFF0CopenType="launchApp"\u65F6\u6709\u6548-
bind:opensetting\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03\uFF0CopenType="openSetting"\u65F6\u6709\u6548-

actions

API\u4E2D\u7684actions\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u914D\u7F6E\u6BCF\u4E00\u5217\uFF0C\u6BCF\u4E00\u5217\u6709\u4EE5\u4E0Bkey\uFF1A

\u952E\u540D\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u9898string-
subname\u4E8C\u7EA7\u6807\u9898string-
color\u9009\u9879\u6587\u5B57\u989C\u8272string-
loading\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001boolean-
disabled\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001boolean-
className\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class \u7C7B\u540Dstring-
openType\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863string-
lang\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0Czh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587stringen
sessionFrom\u4F1A\u8BDD\u6765\u6E90\uFF0CopenType="contact"\u65F6\u6709\u6548string-
sendMessageTitle\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898\uFF0CopenType="contact"\u65F6\u6709\u6548string\u5F53\u524D\u6807\u9898
sendMessagePath\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84\uFF0CopenType="contact"\u65F6\u6709\u6548string\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84
sendMessageImg\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u56FE\u7247\uFF0CopenType="contact"\u65F6\u6709\u6548string\u622A\u56FE
showMessageCard\u662F\u5426\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\uFF0C\u8BBE\u7F6E\u6B64\u53C2\u6570\u4E3A true\uFF0C\u7528\u6237\u8FDB\u5165\u5BA2\u670D\u4F1A\u8BDD\u4F1A\u5728\u53F3\u4E0B\u89D2\u663E\u793A"\u53EF\u80FD\u8981\u53D1\u9001\u7684\u5C0F\u7A0B\u5E8F"\u63D0\u793A\uFF0C\u7528\u6237\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u53D1\u9001\u5C0F\u7A0B\u5E8F\u6D88\u606F\uFF0CopenType="contact"\u65F6\u6709\u6548stringfalse
appParameter\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570\uFF0CopenType=launchApp \u65F6\u6709\u6548string-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class v1.10.7\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
list-class v1.10.7actions\u5BB9\u5668\u6837\u5F0F\u7C7B
`,15),M=[N],L={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",R,M))}},V={class:"van-doc-markdown-body"},U=d(`

Area \u7701\u5E02\u533A\u9009\u62E9

\u4ECB\u7ECD

\u7701\u5E02\u533A\u9009\u62E9\u7EC4\u4EF6\u901A\u5E38\u4E0E \u5F39\u51FA\u5C42 \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-area": "@vant/weapp/area/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u521D\u59CB\u5316\u7701\u5E02\u533A\u7EC4\u4EF6\u65F6\uFF0C\u9700\u8981\u901A\u8FC7 area-list \u5C5E\u6027\u4F20\u5165\u7701\u5E02\u533A\u6570\u636E\u3002

<van-area area-list="{{ areaList }}" />
-

areaList \u683C\u5F0F

areaList \u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u5305\u542B province_list\u3001city_list\u3001county_list \u4E09\u4E2A key\u3002

\u6BCF\u9879\u4EE5\u5730\u533A\u7801\u4F5C\u4E3A key\uFF0C\u7701\u5E02\u533A\u540D\u5B57\u4F5C\u4E3A value\u3002\u5730\u533A\u7801\u4E3A 6 \u4F4D\u6570\u5B57\uFF0C\u524D\u4E24\u4F4D\u4EE3\u8868\u7701\u4EFD\uFF0C\u4E2D\u95F4\u4E24\u4F4D\u4EE3\u8868\u57CE\u5E02\uFF0C\u540E\u4E24\u4F4D\u4EE3\u8868\u533A\u53BF\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\u3002\u6BD4\u5982\u5317\u4EAC\u7684\u5730\u533A\u7801\u4E3A 11\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\uFF0C\u4E3A 110000\u3002

\u793A\u4F8B\u6570\u636E\u5982\u4E0B\uFF1A

const areaList = {
-  province_list: {
-    110000: '\u5317\u4EAC\u5E02',
-    120000: '\u5929\u6D25\u5E02',
-  },
-  city_list: {
-    110100: '\u5317\u4EAC\u5E02',
-    120100: '\u5929\u6D25\u5E02',
-  },
-  county_list: {
-    110101: '\u4E1C\u57CE\u533A',
-    110102: '\u897F\u57CE\u533A',
-    // ....
-  },
-};
-

@vant/area-data

Vant \u5B98\u65B9\u63D0\u4F9B\u4E86\u4E00\u4EFD\u9ED8\u8BA4\u7684\u7701\u5E02\u533A\u6570\u636E\uFF0C\u53EF\u4EE5\u901A\u8FC7 @vant/area-data \u5F15\u5165\u3002

yarn add @vant/area-data
-
import { areaList } from '@vant/area-data';
-
-Page({
-  data: {
-    areaList,
-  },
-});
-

\u9009\u4E2D\u7701\u5E02\u533A

\u5982\u679C\u60F3\u9009\u4E2D\u67D0\u4E2A\u7701\u5E02\u533A\uFF0C\u9700\u8981\u4F20\u5165\u4E00\u4E2Avalue\u5C5E\u6027\uFF0C\u7ED1\u5B9A\u5BF9\u5E94\u7684\u7701\u5E02\u533Acode\u3002

<van-area area-list="{{ areaList }}" value="110101" />
-

\u914D\u7F6E\u663E\u793A\u5217

\u53EF\u4EE5\u901A\u8FC7columns-num\u5C5E\u6027\u914D\u7F6E\u7701\u5E02\u533A\u663E\u793A\u7684\u5217\u6570\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4F1A\u663E\u793A\u7701\u5E02\u533A\uFF0C\u5F53\u4F60\u8BBE\u7F6E\u4E3A2\uFF0C\u5219\u53EA\u4F1A\u663E\u793A\u7701\u5E02\u9009\u62E9\u3002

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="\u6807\u9898" />
-

\u914D\u7F6E\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57

\u53EF\u4EE5\u901A\u8FC7columns-placeholder\u5C5E\u6027\u914D\u7F6E\u6BCF\u4E00\u5217\u7684\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002

<van-area
-  area-list="{{ areaList }}"
-  columns-placeholder="{{ ['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9'] }}"
-  title="\u6807\u9898"
-/>
-

\u4E91\u5F00\u53D1\u793A\u4F8B

\u4F7F\u7528\u4E91\u5F00\u53D1\u83B7\u53D6\u7701\u5E02\u533A\u6570\u636E

\u5B9E\u9645\u9879\u76EE\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1\u7684\u80FD\u529B\uFF0C\u5C06\u7701\u5E02\u533A\u6570\u636E\u4FDD\u5B58\u5728\u4E91\u5F00\u53D1\u7684\u6570\u636E\u5E93\u4E2D\uFF0C\u5E76\u5728\u5C0F\u7A0B\u5E8F\u4E2D\u4F7F\u7528\u4E91\u5F00\u53D1\u7684\u63A5\u53E3\u5F02\u6B65\u83B7\u53D6\u6570\u636E\u3002

\u5728\u5C0F\u7A0B\u5E8F\u4E2D\u4F7F\u7528\u4E91\u80FD\u529B\u4E4B\u524D\u9700\u8981\u5148\u8C03\u7528wx.could.init\u65B9\u6CD5\u5B8C\u6210\u4E91\u80FD\u529B\u7684\u521D\u59CB\u5316\u3002

const db = wx.cloud.database();
-
-db.collection('region')
-  .limit(1)
-  .get()
-  .then((res) => {
-    if (res.data && res.data.length > 0) {
-      this.setData({
-        areaList: res.data[0],
-      });
-    }
-  })
-  .catch((err) => {
-    console.log(err);
-  });
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
value\u5F53\u524D\u9009\u4E2D\u7684\u7701\u5E02\u533Acodestring-
title\u9876\u90E8\u680F\u6807\u9898string-
area-list\u7701\u5E02\u533A\u6570\u636E\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9object-
columns-num\u7701\u5E02\u533A\u663E\u793A\u5217\u6570\uFF0C3-\u7701\u5E02\u533A\uFF0C2-\u7701\u5E02\uFF0C1-\u7701string | number3
columns-placeholder\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57string[][]
loading\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001booleanfalse
item-height\u9009\u9879\u9AD8\u5EA6number44
visible-item-count\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570number6
confirm-button-text\u786E\u8BA4\u6309\u94AE\u6587\u5B57string\u786E\u8BA4
cancel-button-text\u53D6\u6D88\u6309\u94AE\u6587\u5B57string\u53D6\u6D88
show-toolbar 1.10.3\u662F\u5426\u663E\u793A\u9876\u90E8\u680Fbooleantrue

Events

\u4E8B\u4EF6\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:confirm\u70B9\u51FB\u53F3\u4E0A\u65B9\u5B8C\u6210\u6309\u94AE\u4E00\u4E2A\u6570\u7EC4\u53C2\u6570\uFF0C\u5177\u4F53\u683C\u5F0F\u770B\u4E0B\u65B9\u6570\u636E\u683C\u5F0F\u7AE0\u8282
bind:cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6-
bind:change\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1Picker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15

\u65B9\u6CD5

\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Area \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
resetcode: string-\u6839\u636E code \u91CD\u7F6E\u6240\u6709\u9009\u9879\uFF0C\u82E5\u4E0D\u4F20 code\uFF0C\u5219\u91CD\u7F6E\u5230\u7B2C\u4E00\u9879

\u70B9\u51FB\u5B8C\u6210\u65F6\u8FD4\u56DE\u7684\u6570\u636E\u683C\u5F0F

\u8FD4\u56DE\u7684\u6570\u636E\u6574\u4F53\u4E3A\u4E00\u4E2A Object\uFF0C\u5305\u542B values, index \u4E24\u4E2A key\u3002

values \u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B columnsNum \u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u7684\u6570\u636E\u3002

code \u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u7F16\u7801\uFF0C name \u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u540D\u79F0\u3002

[
-  {
-    code: '110000',
-    name: '\u5317\u4EAC\u5E02',
-  },
-  {
-    code: '110100',
-    name: '\u5317\u4EAC\u5E02',
-  },
-  {
-    code: '110101',
-    name: '\u4E1C\u57CE\u533A',
-  },
-];
-

index \u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B columnsNum \u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u9879\u7684\u5E8F\u53F7\u3002

`,17),O=[U],G={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",V,O))}},W={class:"van-doc-markdown-body"},H=d(`

Button \u6309\u94AE

\u4ECB\u7ECD

\u6309\u94AE\u7528\u4E8E\u89E6\u53D1\u4E00\u4E2A\u64CD\u4F5C\uFF0C\u5982\u63D0\u4EA4\u8868\u5355\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-button": "@vant/weapp/button/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u6309\u94AE\u7C7B\u578B

\u652F\u6301default\u3001primary\u3001info\u3001warning\u3001danger\u4E94\u79CD\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3Adefault\u3002

<van-button type="default">\u9ED8\u8BA4\u6309\u94AE</van-button>
-<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>
-<van-button type="info">\u4FE1\u606F\u6309\u94AE</van-button>
-<van-button type="warning">\u8B66\u544A\u6309\u94AE</van-button>
-<van-button type="danger">\u5371\u9669\u6309\u94AE</van-button>
-

\u6734\u7D20\u6309\u94AE

\u901A\u8FC7plain\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002

<van-button plain type="primary">\u6734\u7D20\u6309\u94AE</van-button>
-<van-button plain type="info">\u6734\u7D20\u6309\u94AE</van-button>
-

\u7EC6\u8FB9\u6846

\u8BBE\u7F6Ehairline\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F 0.5px \u8FB9\u6846\uFF0C\u57FA\u4E8E\u4F2A\u7C7B\u5B9E\u73B0\u3002

<van-button plain hairline type="primary">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>
-<van-button plain hairline type="info">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>
-

\u7981\u7528\u72B6\u6001

\u901A\u8FC7disabled\u5C5E\u6027\u6765\u7981\u7528\u6309\u94AE\uFF0C\u6B64\u65F6\u6309\u94AE\u7684bind:click\u4E8B\u4EF6\u4E0D\u4F1A\u89E6\u53D1\u3002

<van-button disabled type="primary">\u7981\u7528\u72B6\u6001</van-button>
-<van-button disabled type="info">\u7981\u7528\u72B6\u6001</van-button>
-

\u52A0\u8F7D\u72B6\u6001

<van-button loading type="primary" />
-<van-button loading type="primary" loading-type="spinner" />
-<van-button loading type="info" loading-text="\u52A0\u8F7D\u4E2D..." />
-

\u6309\u94AE\u5F62\u72B6

<van-button square type="primary">\u65B9\u5F62\u6309\u94AE</van-button>
-<van-button round type="info">\u5706\u5F62\u6309\u94AE</van-button>
-

\u56FE\u6807\u6309\u94AE

\u901A\u8FC7icon\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u56FE\u6807\uFF0C\u652F\u6301 Icon \u7EC4\u4EF6\u91CC\u7684\u6240\u6709\u56FE\u6807\uFF0C\u4E5F\u53EF\u4EE5\u4F20\u5165\u56FE\u6807 URL\u3002

<van-button icon="star-o" type="primary" />
-<van-button icon="star-o" type="primary">\u6309\u94AE</van-button>
-<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">
-  \u6309\u94AE
-</van-button>
-

\u6309\u94AE\u5C3A\u5BF8

\u652F\u6301large\u3001normal\u3001small\u3001mini\u56DB\u79CD\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3Anormal\u3002

<van-button type="primary" size="large">\u5927\u53F7\u6309\u94AE</van-button>
-<van-button type="primary" size="normal">\u666E\u901A\u6309\u94AE</van-button>
-<van-button type="primary" size="small">\u5C0F\u578B\u6309\u94AE</van-button>
-<van-button type="primary" size="mini">\u8FF7\u4F60\u6309\u94AE</van-button>
-

\u5757\u7EA7\u5143\u7D20

\u901A\u8FC7block\u5C5E\u6027\u53EF\u4EE5\u5C06\u6309\u94AE\u7684\u5143\u7D20\u7C7B\u578B\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\u3002

<van-button type="primary" block>\u5757\u7EA7\u5143\u7D20</van-button>
-

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7color\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\u3002

<van-button color="#7232dd">\u5355\u8272\u6309\u94AE</van-button>
-<van-button color="#7232dd" plain>\u5355\u8272\u6309\u94AE</van-button>
-<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
-  \u6E10\u53D8\u8272\u6309\u94AE
-</van-button>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
id\u6807\u8BC6\u7B26string-
type\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary info warning dangerstringdefault
size\u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A normal large small ministringnormal
color v1.0.0\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165linear-gradient\u6E10\u53D8\u8272string-
icon\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
class-prefix\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027stringvan-icon
plain\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AEbooleanfalse
block\u662F\u5426\u4E3A\u5757\u7EA7\u5143\u7D20booleanfalse
round\u662F\u5426\u4E3A\u5706\u5F62\u6309\u94AEbooleanfalse
square\u662F\u5426\u4E3A\u65B9\u5F62\u6309\u94AEbooleanfalse
disabled\u662F\u5426\u7981\u7528\u6309\u94AEbooleanfalse
hairline\u662F\u5426\u4F7F\u7528 0.5px \u8FB9\u6846booleanfalse
loading\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001booleanfalse
loading-text\u52A0\u8F7D\u72B6\u6001\u63D0\u793A\u6587\u5B57string-
loading-type\u52A0\u8F7D\u72B6\u6001\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinnerstringcircular
loading-size\u52A0\u8F7D\u56FE\u6807\u5927\u5C0Fstring20px
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring-
open-type\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863string-
app-parameter\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570string-
lang\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C
zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587		stringen
session-from\u4F1A\u8BDD\u6765\u6E90string-
business-id\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 idnumber-
send-message-title\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898string\u5F53\u524D\u6807\u9898
send-message-path\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84string\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84
send-message-imgsendMessageImgstring\u622A\u56FE
show-message-card\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247stringfalse
dataset\u6309\u94AE dataset\uFF0Copen-type \u4E3A share \u65F6\uFF0C\u53EF\u5728 onShareAppMessage \u4E8B\u4EF6\u7684 event.target.dataset.detail \u4E2D\u770B\u5230\u4F20\u5165\u7684\u503Cany-
form-type\u7528\u4E8E form \u7EC4\u4EF6\uFF0C\u53EF\u9009\u503C\u4E3Asubmit reset\uFF0C\u70B9\u51FB\u5206\u522B\u4F1A\u89E6\u53D1 form \u7EC4\u4EF6\u7684 submit/reset \u4E8B\u4EF6string-

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click\u70B9\u51FB\u6309\u94AE\uFF0C\u4E14\u6309\u94AE\u72B6\u6001\u4E0D\u4E3A\u52A0\u8F7D\u6216\u7981\u7528\u65F6\u89E6\u53D1-
bind:getuserinfo\u7528\u6237\u70B9\u51FB\u8BE5\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C
\u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo		-
bind:contact\u5BA2\u670D\u6D88\u606F\u56DE\u8C03-
bind:getphonenumber\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03-
bind:getrealtimephonenumber v1.10.21\u83B7\u53D6\u624B\u673A\u53F7\u5B9E\u65F6\u9A8C\u8BC1\u56DE\u8C03\uFF0Copen-type=getRealtimePhoneNumber \u65F6\u6709\u6548-
bind:error\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03-
bind:opensetting\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03-
bind:chooseavatar\u5F53 open-type \u7684\u503C\u4E3A chooseAvatar \u65F6\uFF0C\u9009\u62E9\u5934\u50CF\u4E4B\u540E\u7684\u56DE\u8C03

Button \u63D0\u4F9B\u7684\u662F click \u4E8B\u4EF6\u800C\u4E0D\u662F\u539F\u751F tap \u4E8B\u4EF6\uFF0C\u6309\u94AE\u7981\u7528\u65F6\uFF0Cclick \u4E8B\u4EF6\u4E0D\u4F1A\u89E6\u53D1\uFF0Ctap \u4E8B\u4EF6\u4F9D\u7136\u4F1A\u89E6\u53D1\u3002

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
loading-class\u52A0\u8F7D\u56FE\u6807\u6837\u5F0F\u7C7B
`,18),K=[H],Q={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",W,K))}},J={class:"van-doc-markdown-body"},X=d(`

Calendar \u65E5\u5386

\u4ECB\u7ECD

\u65E5\u5386\u7EC4\u4EF6\u7528\u4E8E\u9009\u62E9\u65E5\u671F\u6216\u65E5\u671F\u533A\u95F4\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-calendar": "@vant/weapp/calendar/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u9009\u62E9\u5355\u4E2A\u65E5\u671F

\u4E0B\u9762\u6F14\u793A\u4E86\u7ED3\u5408\u5355\u5143\u683C\u6765\u4F7F\u7528\u65E5\u5386\u7EC4\u4EF6\u7684\u7528\u6CD5\uFF0C\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u89E6\u53D1confirm\u4E8B\u4EF6\u3002

<van-cell title="\u9009\u62E9\u5355\u4E2A\u65E5\u671F" value="{{ date }}" bind:click="onDisplay" />
-<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />
-
Page({
-  data: {
-    date: '',
-    show: false,
-  },
-
-  onDisplay() {
-    this.setData({ show: true });
-  },
-  onClose() {
-    this.setData({ show: false });
-  },
-  formatDate(date) {
-    date = new Date(date);
-    return \`\${date.getMonth() + 1}/\${date.getDate()}\`;
-  },
-  onConfirm(event) {
-    this.setData({
-      show: false,
-      date: this.formatDate(event.detail),
-    });
-  },
-});
-

\u9009\u62E9\u591A\u4E2A\u65E5\u671F

\u8BBE\u7F6Etype\u4E3Amultiple\u540E\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C\u6B64\u65F6confirm\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u5305\u542B\u82E5\u5E72\u4E2A\u9009\u4E2D\u7684\u65E5\u671F\u3002

<van-cell title="\u9009\u62E9\u591A\u4E2A\u65E5\u671F" value="{{ text }}" bind:click="onDisplay" />
-<van-calendar
-  show="{{ show }}"
-  type="multiple"
-  bind:close="onClose"
-  bind:confirm="onConfirm"
-/>
-
Page({
-  data: {
-    text: '',
-    show: false,
-  },
-
-  onDisplay() {
-    this.setData({ show: true });
-  },
-  onClose() {
-    this.setData({ show: false });
-  },
-  onConfirm(event) {
-    this.setData({
-      show: false,
-      text: \`\u9009\u62E9\u4E86 \${event.detail.length} \u4E2A\u65E5\u671F\`,
-    });
-  },
-});
-

\u9009\u62E9\u65E5\u671F\u533A\u95F4

\u8BBE\u7F6Etype\u4E3Arange\u540E\u53EF\u4EE5\u9009\u62E9\u65E5\u671F\u533A\u95F4\uFF0C\u6B64\u65F6confirm\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u7B2C\u4E00\u9879\u4E3A\u5F00\u59CB\u65F6\u95F4\uFF0C\u7B2C\u4E8C\u9879\u4E3A\u7ED3\u675F\u65F6\u95F4\u3002

<van-cell title="\u9009\u62E9\u65E5\u671F\u533A\u95F4" value="{{ date }}" bind:click="onDisplay" />
-<van-calendar
-  show="{{ show }}"
-  type="range"
-  bind:close="onClose"
-  bind:confirm="onConfirm"
-/>
-
Page({
-  data: {
-    date: '',
-    show: false,
-  },
-
-  onDisplay() {
-    this.setData({ show: true });
-  },
-  onClose() {
-    this.setData({ show: false });
-  },
-  formatDate(date) {
-    date = new Date(date);
-    return \`\${date.getMonth() + 1}/\${date.getDate()}\`;
-  },
-  onConfirm(event) {
-    const [start, end] = event.detail;
-    this.setData({
-      show: false,
-      date: \`\${this.formatDate(start)} - \${this.formatDate(end)}\`,
-    });
-  },
-});
-

Tips: \u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u65E5\u671F\u533A\u95F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E0D\u80FD\u4E3A\u540C\u4E00\u5929\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E allow-same-day \u5C5E\u6027\u6765\u5141\u8BB8\u9009\u62E9\u540C\u4E00\u5929\u3002

\u5FEB\u6377\u9009\u62E9

\u5C06show-confirm\u8BBE\u7F6E\u4E3Afalse\u53EF\u4EE5\u9690\u85CF\u786E\u8BA4\u6309\u94AE\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u7ACB\u5373\u89E6\u53D1confirm\u4E8B\u4EF6\u3002

<van-calendar show="{{ show }}" show-confirm="{{ false }}" />
-

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7color\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u65E5\u5386\u7684\u989C\u8272\uFF0C\u5BF9\u9009\u4E2D\u65E5\u671F\u548C\u5E95\u90E8\u6309\u94AE\u751F\u6548\u3002

<van-calendar show="{{ show }}" color="#07c160" />
-

\u81EA\u5B9A\u4E49\u65E5\u671F\u8303\u56F4

\u901A\u8FC7min-date\u548Cmax-date\u5B9A\u4E49\u65E5\u5386\u7684\u8303\u56F4\uFF0C\u9700\u8981\u6CE8\u610F\u7684\u662Fmin-date\u548Cmax-date\u7684\u533A\u95F4\u4E0D\u5B9C\u8FC7\u5927\uFF0C\u5426\u5219\u4F1A\u9020\u6210\u4E25\u91CD\u7684\u6027\u80FD\u95EE\u9898\u3002

<van-calendar
-  show="{{ show }}"
-  min-date="{{ minDate }}"
-  max-date="{{ maxDate }}"
-/>
-
Page({
-  data: {
-    show: false,
-    minDate: new Date(2010, 0, 1).getTime(),
-    maxDate: new Date(2010, 0, 31).getTime(),
-  },
-});
-

\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u5B57

\u901A\u8FC7confirm-text\u8BBE\u7F6E\u6309\u94AE\u6587\u5B57\uFF0C\u901A\u8FC7confirm-disabled-text\u8BBE\u7F6E\u6309\u94AE\u7981\u7528\u65F6\u7684\u6587\u5B57\u3002

<van-calendar
-  show="{{ show }}"
-  type="range"
-  confirm-text="\u5B8C\u6210"
-  confirm-disabled-text="\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4"
-/>
-

\u81EA\u5B9A\u4E49\u65E5\u671F\u6587\u6848

\u901A\u8FC7\u4F20\u5165formatter\u51FD\u6570\u6765\u5BF9\u65E5\u5386\u4E0A\u6BCF\u4E00\u683C\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />
-
Page({
-  data: {
-    formatter(day) {
-      const month = day.date.getMonth() + 1;
-      const date = day.date.getDate();
-
-      if (month === 5) {
-        if (date === 1) {
-          day.topInfo = '\u52B3\u52A8\u8282';
-        } else if (date === 4) {
-          day.topInfo = '\u4E94\u56DB\u9752\u5E74\u8282';
-        } else if (date === 11) {
-          day.text = '\u4ECA\u5929';
-        }
-      }
-
-      if (day.type === 'start') {
-        day.bottomInfo = '\u5165\u4F4F';
-      } else if (day.type === 'end') {
-        day.bottomInfo = '\u79BB\u5E97';
-      }
-
-      return day;
-    },
-  },
-});
-

\u81EA\u5B9A\u4E49\u5F39\u51FA\u4F4D\u7F6E

\u901A\u8FC7position\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3Atop\u3001left\u3001right\u3002

<van-calendar show="{{ show }}" round="false" position="right" />
-

\u65E5\u671F\u533A\u95F4\u6700\u5927\u8303\u56F4

\u9009\u62E9\u65E5\u671F\u533A\u95F4\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7max-range\u5C5E\u6027\u6765\u6307\u5B9A\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9009\u62E9\u7684\u8303\u56F4\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u4F1A\u5F39\u51FA\u76F8\u5E94\u7684\u63D0\u793A\u6587\u6848\u3002

<van-calendar type="range" max-range="{{ 3 }}" />
-

\u81EA\u5B9A\u4E49\u5468\u8D77\u59CB\u65E5

\u901A\u8FC7 first-day-of-week \u5C5E\u6027\u8BBE\u7F6E\u4E00\u5468\u4ECE\u54EA\u5929\u5F00\u59CB\u3002

<van-calendar first-day-of-week="{{ 1 }}" />
-

\u5E73\u94FA\u5C55\u793A

\u5C06poppable\u8BBE\u7F6E\u4E3Afalse\uFF0C\u65E5\u5386\u4F1A\u76F4\u63A5\u5C55\u793A\u5728\u9875\u9762\u5185\uFF0C\u800C\u4E0D\u662F\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u51FA\u73B0\u3002

<van-calendar
-  title="\u65E5\u5386"
-  poppable="{{ false }}"
-  show-confirm="{{ false }}"
-  class="calendar"
-/>
-
.calendar {
-  --calendar-height: 618px;
-}
-

Tips: \u6CE8\u610F\uFF0C\u5728\u81EA\u5B9A\u4E49calendar\u7684\u9AD8\u5EA6\u65F6\uFF0C\u9700\u8981\u786E\u4FDD\uFF0C\u6EDA\u52A8\u5230\u5F53\u524D\u6708\u4EFD\u65F6\uFF0C\u6240\u6709\u7684\u65E5\u671F\u8981\u5C55\u73B0\u5728.van-calendar__body\u5185\uFF0C\u5426\u5219\u53EF\u80FD\u4F1A\u51FA\u73B0\u6EDA\u52A8\u65F6\u5934\u90E8\u6708\u4EFD\u4E0E\u5F53\u524D\u6708\u4EFD\u4E0D\u540C\u6B65\u7684\u60C5\u51B5\u3002\u76EE\u524D\u5E73\u94FA\u578B\u9884\u8BBE\u9AD8\u5EA6618px,\u5F39\u7A97\u578B\u9AD8\u5EA690%\u3002

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
type\u9009\u62E9\u7C7B\u578B:
single\u8868\u793A\u9009\u62E9\u5355\u4E2A\u65E5\u671F\uFF0C
multiple\u8868\u793A\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C
range\u8868\u793A\u9009\u62E9\u65E5\u671F\u533A\u95F4		stringsingle
title\u65E5\u5386\u6807\u9898string\u65E5\u671F\u9009\u62E9
color\u4E3B\u9898\u8272\uFF0C\u5BF9\u5E95\u90E8\u6309\u94AE\u548C\u9009\u4E2D\u65E5\u671F\u751F\u6548string#ee0a24
min-date\u53EF\u9009\u62E9\u7684\u6700\u5C0F\u65E5\u671Ftimestamp\u5F53\u524D\u65E5\u671F
max-date\u53EF\u9009\u62E9\u7684\u6700\u5927\u65E5\u671Ftimestamp\u5F53\u524D\u65E5\u671F\u7684\u516D\u4E2A\u6708\u540E
default-date v1.10.21\u9ED8\u8BA4\u9009\u4E2D\u7684\u65E5\u671F\uFF0Ctype\u4E3Amultiple\u6216range\u65F6\u4E3A\u6570\u7EC4\uFF0C\u4F20\u5165 null \u8868\u793A\u9ED8\u8BA4\u4E0D\u9009\u62E9timestamp | timestamp[] | null\u4ECA\u5929
row-height\u65E5\u671F\u884C\u9AD8number | string64
formatter\u65E5\u671F\u683C\u5F0F\u5316\u51FD\u6570(day: Day) => Day-
poppable\u662F\u5426\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u65E5\u5386booleantrue
show-mark\u662F\u5426\u663E\u793A\u6708\u4EFD\u80CC\u666F\u6C34\u5370booleantrue
show-title\u662F\u5426\u5C55\u793A\u65E5\u5386\u6807\u9898booleantrue
show-subtitle\u662F\u5426\u5C55\u793A\u65E5\u5386\u526F\u6807\u9898\uFF08\u5E74\u6708\uFF09booleantrue
show-confirm\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AEbooleantrue
confirm-text\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57string\u786E\u5B9A
confirm-disabled-text\u786E\u8BA4\u6309\u94AE\u5904\u4E8E\u7981\u7528\u72B6\u6001\u65F6\u7684\u6587\u5B57string\u786E\u5B9A
first-day-of-week\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E50~60
readonly v1.9.1\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u4E0D\u80FD\u9009\u62E9\u65E5\u671Fbooleanfalse

Poppable Props

\u5F53 Calendar \u7684 poppable \u4E3A true \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
show\u662F\u5426\u663E\u793A\u65E5\u5386\u5F39\u7A97booleanfalse
position\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top right leftstringbottom
round\u662F\u5426\u663E\u793A\u5706\u89D2\u5F39\u7A97booleantrue
close-on-click-overlay\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95EDbooleantrue
safe-area-inset-bottom\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914Dbooleantrue

Range Props

\u5F53 Calendar \u7684 type \u4E3A range \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
max-range\u65E5\u671F\u533A\u95F4\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9ED8\u8BA4\u65E0\u9650\u5236number | string-
range-prompt\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848string | null\u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 xx \u5929
show-range-prompt\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848booleantrue
allow-same-day\u662F\u5426\u5141\u8BB8\u65E5\u671F\u8303\u56F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E3A\u540C\u4E00\u5929booleanfalse

Multiple Props

\u5F53 Calendar \u7684 type \u4E3A multiple \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
min-range\u65E5\u671F\u6700\u5C11\u53EF\u9009\u5929\u6570number | string1

Day \u6570\u636E\u7ED3\u6784

\u65E5\u5386\u4E2D\u7684\u6BCF\u4E2A\u65E5\u671F\u90FD\u5BF9\u5E94\u4E00\u4E2A Day \u5BF9\u8C61\uFF0C\u901A\u8FC7formatter\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 Day \u5BF9\u8C61\u7684\u5185\u5BB9\u3002

\u952E\u540D\u8BF4\u660E\u7C7B\u578B
date\u65E5\u671F\u5BF9\u5E94\u7684 Date \u5BF9\u8C61Date
type\u65E5\u671F\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3Aselected\u3001start\u3001middle\u3001end\u3001disabledstring
text\u4E2D\u95F4\u663E\u793A\u7684\u6587\u5B57string
topInfo\u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606Fstring
bottomInfo\u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606Fstring
className\u81EA\u5B9A\u4E49 classNamestring

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:select\u70B9\u51FB\u4EFB\u610F\u65E5\u671F\u65F6\u89E6\u53D1value: Date | Date[]
bind:unselect\u5F53 Calendar \u7684 type \u4E3A multiple \u65F6,\u70B9\u51FB\u5DF2\u9009\u4E2D\u7684\u65E5\u671F\u65F6\u89E6\u53D1value: Date
bind:confirm\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1\uFF0C\u82E5show-confirm\u4E3Atrue\uFF0C\u5219\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u540E\u89E6\u53D1value: Date | Date[]
bind:open\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1-
bind:close\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1-
bind:opened\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1-
bind:closed\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1-
bind:over-range\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u89E6\u53D1-
bind:click-subtitle v1.8.1\u70B9\u51FB\u65E5\u5386\u526F\u6807\u9898\u65F6\u89E6\u53D1WechatMiniprogram.TouchEvent

Slots

\u540D\u79F0\u8BF4\u660E
title\u81EA\u5B9A\u4E49\u6807\u9898
footer\u81EA\u5B9A\u4E49\u5E95\u90E8\u533A\u57DF\u5185\u5BB9

\u65B9\u6CD5

\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Calendar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
reset\u91CD\u7F6E\u9009\u4E2D\u7684\u65E5\u671F\u5230\u9ED8\u8BA4\u503C--
`,25),Z=[X],Y={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",J,Z))}},ss={class:"van-doc-markdown-body"},as=d(`

Card \u5546\u54C1\u5361\u7247

\u4ECB\u7ECD

\u5546\u54C1\u5361\u7247\uFF0C\u7528\u4E8E\u5C55\u793A\u5546\u54C1\u7684\u56FE\u7247\u3001\u4EF7\u683C\u7B49\u4FE1\u606F\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-card": "@vant/weapp/card/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-card
-  num="2"
-  price="2.00"
-  desc="\u63CF\u8FF0\u4FE1\u606F"
-  title="\u5546\u54C1\u6807\u9898"
-  thumb="{{ imageURL }}"
-/>
-

\u9AD8\u7EA7\u7528\u6CD5

\u53EF\u4EE5\u901A\u8FC7\u63D2\u69FD\u6DFB\u52A0\u5B9A\u5236\u5185\u5BB9\u3002

<van-card
-  num="2"
-  tag="\u6807\u7B7E"
-  price="10.00"
-  desc="\u63CF\u8FF0\u4FE1\u606F"
-  title="\u5546\u54C1\u6807\u9898"
-  thumb="{{ imageURL }}"
->
-  <view slot="footer">
-    <van-button size="mini">\u6309\u94AE</van-button>
-    <van-button size="mini">\u6309\u94AE</van-button>
-  </view>
-</van-card>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
thumb\u5DE6\u4FA7\u56FE\u7247string-
thumb-mode\u5DE6\u4FA7\u56FE\u7247\u88C1\u526A\u3001\u7F29\u653E\u7684\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8F image \u7EC4\u4EF6 mode \u5C5E\u6027\u503CstringaspectFit
title\u6807\u9898string-
desc\u63CF\u8FF0string-
tag\u6807\u7B7Estring-
num\u5546\u54C1\u6570\u91CFstring | number-
price\u5546\u54C1\u4EF7\u683Cstring | number-
origin-price\u5546\u54C1\u5212\u7EBF\u539F\u4EF7string | number-
centered\u5185\u5BB9\u662F\u5426\u5782\u76F4\u5C45\u4E2Dstringfalse
currency\u8D27\u5E01\u7B26\u53F7string\xA5
thumb-link\u70B9\u51FB\u5DE6\u4FA7\u56FE\u7247\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740string-
link-type\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunchstringnavigateTo
lazy-load\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7Dbooleanfalse

Slot

\u540D\u79F0\u8BF4\u660E
title\u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title\u5C5E\u6027\u5219\u4E0D\u751F\u6548
desc\u81EA\u5B9A\u4E49\u63CF\u8FF0\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86desc\u5C5E\u6027\u5219\u4E0D\u751F\u6548
num\u81EA\u5B9A\u4E49\u6570\u91CF
price\u81EA\u5B9A\u4E49\u4EF7\u683C
origin-price\u81EA\u5B9A\u4E49\u5546\u54C1\u539F\u4EF7\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86origin-price\u5C5E\u6027\u5219\u4E0D\u751F\u6548
price-top\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0A\u65B9\u533A\u57DF
bottom\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0B\u65B9\u533A\u57DF
thumb\u81EA\u5B9A\u4E49\u56FE\u7247\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86thumb\u5C5E\u6027\u5219\u4E0D\u751F\u6548
tag\u81EA\u5B9A\u4E49\u56FE\u7247\u89D2\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86tag\u5C5E\u6027\u5219\u4E0D\u751F\u6548
tags\u81EA\u5B9A\u4E49\u63CF\u8FF0\u4E0B\u65B9\u6807\u7B7E\u533A\u57DF
footer\u81EA\u5B9A\u4E49\u53F3\u4E0B\u89D2\u5185\u5BB9

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
thumb-class\u5DE6\u4FA7\u56FE\u7247\u6837\u5F0F\u7C7B
title-class\u6807\u9898\u6837\u5F0F\u7C7B
price-class\u4EF7\u683C\u6837\u5F0F\u7C7B
origin-price-class\u5212\u7EBF\u539F\u4EF7\u6837\u5F0F\u7C7B
desc-class\u63CF\u8FF0\u6837\u5F0F\u7C7B
num-class\u6570\u91CF\u6837\u5F0F\u7C7B
`,10),ts=[as],ns={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ss,ts))}},ls={class:"van-doc-markdown-body"},es=d(`

Cascader \u7EA7\u8054\u9009\u62E9

\u4ECB\u7ECD

\u7EA7\u8054\u9009\u62E9\u6846\uFF0C\u7528\u4E8E\u591A\u5C42\u7EA7\u6570\u636E\u7684\u9009\u62E9\uFF0C\u5178\u578B\u573A\u666F\u4E3A\u7701\u5E02\u533A\u9009\u62E9\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-cascader": "@vant/weapp/cascader/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u7EA7\u8054\u9009\u62E9\u7EC4\u4EF6\u53EF\u4EE5\u642D\u914D Field \u548C Popup \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A

<van-field
-  value="{{ fieldValue }}"
-  is-link
-  readonly
-  label="\u5730\u533A"
-  placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
-  bind:tap="onClick"
-/>
-<van-popup show="{{ show }}" round position="bottom">
-  <van-cascader
-    wx:if="{{ show }}"
-    value="{{ cascaderValue }}"
-    title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
-    options="{{ options }}"
-    bind:close="onClose"
-    bind:finish="onFinish"
-  />
-</van-popup>
-

-const options = [
-  {
-    text: '\u6D59\u6C5F\u7701',
-    value: '330000',
-    children: [{ text: '\u676D\u5DDE\u5E02', value: '330100' }],
-  },
-  {
-    text: '\u6C5F\u82CF\u7701',
-    value: '320000',
-    children: [{ text: '\u5357\u4EAC\u5E02', value: '320100' }],
-  },
-];
-
-Page({
-  data: {
-    show: false,
-    options,
-    fieldValue: '',
-    cascaderValue: '',
-  },
-
-  onClick() {
-    this.setData({
-      show: true,
-    });
-  },
-
-  onClose() {
-    this.setData({
-      show: false,
-    });
-  },
-
-  onFinish(e) {
-    const { selectedOptions, value } = e.detail;
-    const fieldValue = selectedOptions
-        .map((option) => option.text || option.name)
-        .join('/');
-    this.setData({
-      fieldValue,
-      cascaderValue: value,
-    })
-  },
-});
-

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7 active-color \u5C5E\u6027\u6765\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272\u3002

<van-cascader
-  value="{{ cascaderValue }}"
-  title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
-  options="{{ options }}"
-  active-color="#ee0a24"
-  bind:close="onClose"
-  bind:finish="onFinish"
-/>
-

\u5F02\u6B65\u52A0\u8F7D\u9009\u9879

\u53EF\u4EE5\u76D1\u542C change \u4E8B\u4EF6\u5E76\u52A8\u6001\u8BBE\u7F6E options\uFF0C\u5B9E\u73B0\u5F02\u6B65\u52A0\u8F7D\u9009\u9879\u3002

<van-field
-  value="{{ fieldValue }}"
-  is-link
-  readonly
-  label="\u5730\u533A"
-  placeholder="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
-  bind:tap="onClick"
-/>
-<van-popup show="{{ show }}" round position="bottom">
-  <van-cascader
-    wx:if="{{ show }}"
-    value="{{ cascaderValue }}"
-    title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
-    options="{{ options }}"
-    bind:close="onClose"
-    bind:change="onChange"
-    bind:finish="onFinish"
-  />
-</van-popup>
-
Page({
-  data: {
-    options: [
-      {
-        text: '\u6D59\u6C5F\u7701',
-        value: '330000',
-        children: [],
-      }
-    ];
-  },
-  onChange(e) {
-    const { value } = e.detail;
-    if (value === this.data.options[0].value) {
-      setTimeout(() => {
-        const children = [
-          { text: '\u676D\u5DDE\u5E02', value: '330100' },
-          { text: '\u5B81\u6CE2\u5E02', value: '330200' },
-        ];
-        this.setData({
-          'options[0].children': children,
-        })
-      }, 500);
-    }
-  },
-});
-
-

\u81EA\u5B9A\u4E49\u5B57\u6BB5\u540D

\u901A\u8FC7 field-names \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 options \u91CC\u7684\u5B57\u6BB5\u540D\u79F0\u3002

<van-cascader
-  value="{{ code }}"
-  title="\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A"
-  options="{{ options }}"
-  field-names="{{ fieldNames }}"
-/>
-
Page({
-  data: {
-    code: '',
-    fieldNames: {
-      text: 'name',
-      value: 'code',
-      children: 'items',
-    },
-    options: [
-      {
-        name: '\u6D59\u6C5F\u7701',
-        code: '330000',
-        items: [{ name: '\u676D\u5DDE\u5E02', code: '330100' }],
-      },
-      {
-        name: '\u6C5F\u82CF\u7701',
-        code: '320000',
-        items: [{ name: '\u5357\u4EAC\u5E02', code: '320100' }],
-      },
-    ],
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u9876\u90E8\u6807\u9898string-
value\u9009\u4E2D\u9879\u7684\u503Cstring | number-
options\u53EF\u9009\u9879\u6570\u636E\u6E90CascaderOption[][]
placeholder\u672A\u9009\u4E2D\u65F6\u7684\u63D0\u793A\u6587\u6848string\u8BF7\u9009\u62E9
active-color\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272string#1989fa
swipeable\u662F\u5426\u5F00\u542F\u624B\u52BF\u5DE6\u53F3\u6ED1\u52A8\u5207\u6362booleanfalse
closeable\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807booleantrue
show-header\u662F\u5426\u5C55\u793A\u6807\u9898\u680Fbooleantrue
close-icon\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 name \u5C5E\u6027stringcross
field-names\u81EA\u5B9A\u4E49 options \u7ED3\u6784\u4E2D\u7684\u5B57\u6BB5CascaderFieldNames{ text: 'text', value: 'value', children: 'children' }

CascaderOption \u6570\u636E\u7ED3\u6784

options \u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u4E2A\u53EF\u9009\u9879\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A

\u952E\u540D\u8BF4\u660E\u7C7B\u578B
text\u9009\u9879\u6587\u5B57\uFF08\u5FC5\u586B\uFF09string
value\u9009\u9879\u5BF9\u5E94\u7684\u503C\uFF08\u5FC5\u586B\uFF09string | number
color\u9009\u9879\u6587\u5B57\u989C\u8272string
children\u5B50\u9009\u9879\u5217\u8868CascaderOption[]
disabled\u662F\u5426\u7981\u7528\u9009\u9879boolean
className\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 classstring | Array | object

Events

\u4E8B\u4EF6\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:change\u9009\u4E2D\u9879\u53D8\u5316\u65F6\u89E6\u53D1event.detail\uFF1A{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }
bind:finish\u5168\u90E8\u9009\u9879\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1event.detail\uFF1A{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }
bind:close\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1-
bind:click-tab\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1event.detail\uFF1A{ tabIndex: number, title: string }

Slots

\u540D\u79F0\u8BF4\u660E\u53C2\u6570
title\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898-
`,13),ps=[es],ds={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ls,ps))}},cs={class:"van-doc-markdown-body"},os=d(`

Cell \u5355\u5143\u683C

\u4ECB\u7ECD

\u5355\u5143\u683C\u4E3A\u5217\u8868\u4E2D\u7684\u5355\u4E2A\u5C55\u793A\u9879\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-cell": "@vant/weapp/cell/index",
-  "van-cell-group": "@vant/weapp/cell-group/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

Cell\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u4E0ECellGroup\u642D\u914D\u4F7F\u7528\u3002CellGroup\u53EF\u4EE5\u4E3ACell\u63D0\u4F9B\u4E0A\u4E0B\u5916\u8FB9\u6846\u3002

<van-cell-group>
-  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
-  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" border="{{ false }}" />
-</van-cell-group>
-

\u5361\u7247\u98CE\u683C

\u901A\u8FC7 CellGroup \u7684 inset \u5C5E\u6027\uFF0C\u53EF\u4EE5\u5C06\u5355\u5143\u683C\u8F6C\u6362\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C\uFF08\u4ECE 1.7.2 \u7248\u672C\u5F00\u59CB\u652F\u6301\uFF09\u3002

<van-cell-group inset>
-  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
-  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />
-</van-cell-group>
-

\u5355\u5143\u683C\u5927\u5C0F

\u901A\u8FC7size\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u5355\u5143\u683C\u7684\u5927\u5C0F\u3002

<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" />
-<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" label="\u63CF\u8FF0\u4FE1\u606F" />
-

\u5C55\u793A\u56FE\u6807

\u901A\u8FC7icon\u5C5E\u6027\u5728\u6807\u9898\u5DE6\u4FA7\u5C55\u793A\u56FE\u6807\u3002

<van-cell title="\u5355\u5143\u683C" icon="location-o" />
-

\u5C55\u793A\u7BAD\u5934

\u8BBE\u7F6Eis-link\u5C5E\u6027\u540E\u4F1A\u5728\u5355\u5143\u683C\u53F3\u4FA7\u663E\u793A\u7BAD\u5934\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7arrow-direction\u5C5E\u6027\u63A7\u5236\u7BAD\u5934\u65B9\u5411\u3002

<van-cell title="\u5355\u5143\u683C" is-link />
-<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" />
-<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" arrow-direction="down" />
-

\u9875\u9762\u8DF3\u8F6C

\u53EF\u4EE5\u901A\u8FC7url\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7link-type\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002

<van-cell
-  is-link
-  title="\u5355\u5143\u683C"
-  link-type="navigateTo"
-  url="/pages/dashboard/index"
-/>
-

\u5206\u7EC4\u6807\u9898

\u901A\u8FC7CellGroup\u7684title\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u5206\u7EC4\u6807\u9898\u3002

<van-cell-group title="\u5206\u7EC41">
-  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
-</van-cell-group>
-<van-cell-group title="\u5206\u7EC42">
-  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
-</van-cell-group>
-

\u4F7F\u7528\u63D2\u69FD

\u5982\u4EE5\u4E0A\u7528\u6CD5\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-cell value="\u5185\u5BB9" icon="shop-o" is-link>
-  <view slot="title">
-    <view class="van-cell-text">\u5355\u5143\u683C</view>
-    <van-tag type="danger">\u6807\u7B7E</van-tag>
-  </view>
-</van-cell>
-<van-cell title="\u5355\u5143\u683C">
-  <van-icon slot="right-icon" name="search" class="custom-icon" />
-</van-cell>
-

\u5782\u76F4\u5C45\u4E2D

\u901A\u8FC7center\u5C5E\u6027\u53EF\u4EE5\u8BA9Cell\u7684\u5DE6\u53F3\u5185\u5BB9\u90FD\u5782\u76F4\u5C45\u4E2D\u3002

<van-cell center title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />
-

API

CellGroup Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u5206\u7EC4\u6807\u9898string-
inset v1.7.2\u662F\u5426\u5C55\u793A\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683Cbooleanfalse
border\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846booleantrue

CellGroup \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B

Cell Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
icon\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
title\u5DE6\u4FA7\u6807\u9898string | number-
title-width\u6807\u9898\u5BBD\u5EA6\uFF0C\u987B\u5305\u542B\u5355\u4F4Dstring-
value\u53F3\u4FA7\u5185\u5BB9string | number-
label\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606Fstring-
size\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A largestring-
border\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846booleantrue
center\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2Dbooleanfalse
url\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740string-
link-type\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunchstringnavigateTo
clickable\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleanfalse
is-link\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleanfalse
required\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7booleanfalse
arrow-direction\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up downstring-
use-label-slot\u662F\u5426\u4F7F\u7528 label slotbooleanfalse
title-style v1.4.0\u6807\u9898\u6837\u5F0Fstring-

Cell Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click\u70B9\u51FB\u5355\u5143\u683C\u65F6\u89E6\u53D1-

Cell Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49value\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86value\u5C5E\u6027\u5219\u4E0D\u751F\u6548
title\u81EA\u5B9A\u4E49title\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title\u5C5E\u6027\u5219\u4E0D\u751F\u6548
label\u81EA\u5B9A\u4E49label\u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6E use-label-slot\u5C5E\u6027
icon\u81EA\u5B9A\u4E49icon\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86icon\u5C5E\u6027\u5219\u4E0D\u751F\u6548
right-icon\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662Farrow\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86is-link\u5C5E\u6027\u5219\u4E0D\u751F\u6548

Cell \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
title-class\u6807\u9898\u6837\u5F0F\u7C7B
label-class\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B
value-class\u53F3\u4FA7\u5185\u5BB9\u6837\u5F0F\u7C7B
`,20),rs=[os],is={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",cs,rs))}},hs={class:"van-doc-markdown-body"},us=d(`

Checkbox \u590D\u9009\u6846

\u4ECB\u7ECD

\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u591A\u9009\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-checkbox": "@vant/weapp/checkbox/index",
-  "van-checkbox-group": "@vant/weapp/checkbox-group/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7value\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002

<van-checkbox value="{{ checked }}" bind:change="onChange">\u590D\u9009\u6846</van-checkbox>
-
Page({
-  data: {
-    checked: true,
-  },
-
-  onChange(event) {
-    this.setData({
-      checked: event.detail,
-    });
-  },
-});
-

\u7981\u7528\u72B6\u6001

\u901A\u8FC7\u8BBE\u7F6Edisabled\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u3002

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">
-  \u590D\u9009\u6846
-</van-checkbox>
-

\u81EA\u5B9A\u4E49\u5F62\u72B6

\u5C06shape\u5C5E\u6027\u8BBE\u7F6E\u4E3Asquare\uFF0C\u590D\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">
-  \u590D\u9009\u6846
-</van-checkbox>
-

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7checked-color\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u989C\u8272\u3002

<van-checkbox
-  value="{{ checked }}"
-  checked-color="#07c160"
-  bind:change="onChange"
->
-  \u590D\u9009\u6846
-</van-checkbox>
-

\u81EA\u5B9A\u4E49\u5927\u5C0F

\u901A\u8FC7icon-size\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002

<van-checkbox value="{{ checked }}" icon-size="25px">\u590D\u9009\u6846</van-checkbox>
-

\u81EA\u5B9A\u4E49\u56FE\u6807

\u901A\u8FC7 icon \u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\u3002

<van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">
-  \u81EA\u5B9A\u4E49\u56FE\u6807
-  <image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" />
-</van-checkbox>
-
Page({
-  data: {
-    checked: true,
-    activeIcon: '//img.yzcdn.cn/icon-active.png',
-    inactiveIcon: '//img.yzcdn.cn/icon-normal.png',
-  },
-
-  onChange(event) {
-    this.setData({
-      checked: event.detail,
-    });
-  },
-});
-

\u7981\u7528\u6587\u672C\u70B9\u51FB

\u901A\u8FC7\u8BBE\u7F6Elabel-disabled\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002

<van-checkbox value="{{ checked }}" label-disabled>\u590D\u9009\u6846</van-checkbox>
-

\u590D\u9009\u6846\u7EC4

\u9700\u8981\u4E0Evan-checkbox-group\u4E00\u8D77\u4F7F\u7528\uFF0C\u9009\u4E2D\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u901A\u8FC7value\u7ED1\u5B9A\u5728van-checkbox-group\u4E0A\uFF0C\u6570\u7EC4\u4E2D\u7684\u9879\u5373\u4E3A\u9009\u4E2D\u7684Checkbox\u7684name\u5C5E\u6027\u8BBE\u7F6E\u7684\u503C\u3002

<van-checkbox-group value="{{ result }}" bind:change="onChange">
-  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>
-  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>
-  <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>
-</van-checkbox-group>
-
Page({
-  data: {
-    result: ['a', 'b'],
-  },
-
-  onChange(event) {
-    this.setData({
-      result: event.detail,
-    });
-  },
-});
-

\u9650\u5236\u6700\u5927\u53EF\u9009\u6570

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">
-  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>
-  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>
-  <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>
-</van-checkbox-group>
-

\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528

\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165Cell\u548CCellGroup\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 checkbox \u7684 toggle \u65B9\u6CD5\u624B\u52A8\u89E6\u53D1\u5207\u6362\u3002

<van-checkbox-group value="{{ result }}" bind:change="onChange">
-  <van-cell-group>
-    <van-cell
-      wx:for="{{ list }}"
-      wx:key="index"
-      title="\u590D\u9009\u6846 {{ item }}"
-      value-class="value-class"
-      clickable
-      data-index="{{ index }}"
-      bind:click="toggle"
-    >
-      <van-checkbox
-        catch:tap="noop"
-        class="checkboxes-{{ index }}"
-        name="{{ item }}"
-      />
-    </van-cell>
-  </van-cell-group>
-</van-checkbox-group>
-
Page({
-  data: {
-    list: ['a', 'b', 'c'],
-    result: ['a', 'b'],
-  },
-
-  onChange(event) {
-    this.setData({
-      result: event.detail,
-    });
-  },
-
-  toggle(event) {
-    const { index } = event.currentTarget.dataset;
-    const checkbox = this.selectComponent(\`.checkboxes-\${index}\`);
-    checkbox.toggle();
-  },
-
-  noop() {},
-});
-
.value-class {
-  flex: none !important;
-}
-

API

Checkbox Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u8BC6 Checkbox \u540D\u79F0string-
shape\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A round squarestringround
value\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001booleanfalse
disabled\u662F\u5426\u7981\u7528\u5355\u9009\u6846booleanfalse
label-disabled\u662F\u5426\u7981\u7528\u5355\u9009\u6846\u5185\u5BB9\u70B9\u51FBbooleanfalse
label-position\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A leftstringright
use-icon-slot\u662F\u5426\u4F7F\u7528 icon slotbooleanfalse
checked-color\u9009\u4E2D\u72B6\u6001\u989C\u8272string#1989fa
icon-sizeicon \u5927\u5C0Fstring | number20px

CheckboxGroup Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26string-
value\u6240\u6709\u9009\u4E2D\u9879\u7684 nameArray-
disabled\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846booleanfalse
max\u8BBE\u7F6E\u6700\u5927\u53EF\u9009\u6570number0\uFF08\u65E0\u9650\u5236\uFF09
direction v1.7.0\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontalstringvertical

Checkbox Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D\u7EC4\u4EF6\u7684\u503C

Checkbox \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
icon-class\u56FE\u6807\u6837\u5F0F\u7C7B
label-class\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B

CheckboxGroup Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D\u7EC4\u4EF6\u7684\u503C

Checkbox Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u6587\u672C
icon\u81EA\u5B9A\u4E49\u56FE\u6807

Checkbox \u65B9\u6CD5

\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 checkbox \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
toggle--\u5207\u6362\u9009\u4E2D\u72B6\u6001
`,22),gs=[us],js={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",hs,gs))}},ms={class:"van-doc-markdown-body"},bs=d(`

Circle \u73AF\u5F62\u8FDB\u5EA6\u6761

\u4ECB\u7ECD

\u5706\u73AF\u5F62\u7684\u8FDB\u5EA6\u6761\u7EC4\u4EF6\uFF0C\u652F\u6301\u8FDB\u5EA6\u6E10\u53D8\u52A8\u753B\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-circle": "@vant/weapp/circle/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

value\u5C5E\u6027\u8868\u793A\u8FDB\u5EA6\u6761\u7684\u76EE\u6807\u8FDB\u5EA6\u3002

<van-circle value="{{ 30 }}" text="text" />
-

\u5BBD\u5EA6\u5B9A\u5236

\u901A\u8FC7stroke-width\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u5BBD\u5EA6\u3002

<van-circle value="{{ value }}" stroke-width="6" text="\u5BBD\u5EA6\u5B9A\u5236" />
-

\u989C\u8272\u5B9A\u5236

\u901A\u8FC7color\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u989C\u8272\uFF0Clayer-color\u5C5E\u6027\u6765\u63A7\u5236\u8F68\u9053\u989C\u8272\u3002

<van-circle
-  value="{{ value }}"
-  layer-color="#eeeeee"
-  color="#ee0a24"
-  text="\u989C\u8272\u5B9A\u5236"
-/>
-

\u6E10\u53D8\u8272

color\u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u6765\u5B9A\u4E49\u6E10\u53D8\u8272\u3002

<van-circle value="{{ value }}" color="{{ gradientColor }}" text="\u6E10\u53D8\u8272" />
-
Page({
-  data: {
-    value: 25,
-    gradientColor: {
-      '0%': '#ffd01e',
-      '100%': '#ee0a24',
-    },
-  },
-});
-

\u9006\u65F6\u9488\u65B9\u5411

\u5C06clockwise\u8BBE\u7F6E\u4E3Afalse\uFF0C\u8FDB\u5EA6\u4F1A\u4ECE\u9006\u65F6\u9488\u65B9\u5411\u5F00\u59CB\u3002

<van-circle
-  value="{{ value }}"
-  color="#07c160"
-  clockwise="{{ false }}"
-  text="\u9006\u65F6\u9488"
-/>
-

\u5927\u5C0F\u5B9A\u5236

\u901A\u8FC7size\u5C5E\u6027\u8BBE\u7F6E\u5706\u73AF\u76F4\u5F84\u3002

<van-circle value="{{ value }}" size="120" text="\u5927\u5C0F\u5B9A\u5236" />
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
value\u76EE\u6807\u8FDB\u5EA6number0
type\u6307\u5B9A canvas \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A 2dstring-
size\u5706\u73AF\u76F4\u5F84\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber100
color\u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u53EF\u4EE5\u5B9A\u4E49\u6E10\u53D8\u8272string | object#1989fa
layer-color\u8F68\u9053\u989C\u8272string#fff
fill\u586B\u5145\u989C\u8272string-
speed\u52A8\u753B\u901F\u5EA6\uFF08\u5355\u4F4D\u4E3A value/s\uFF09number50
text\u6587\u5B57string-
stroke-width\u8FDB\u5EA6\u6761\u5BBD\u5EA6number4
clockwise\u662F\u5426\u987A\u65F6\u9488\u589E\u52A0booleantrue

Slots

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u6587\u5B57\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86fill\uFF0C\u63D2\u69FD\u5185\u5BB9\u4F1A\u88AB\u539F\u751F\u7EC4\u4EF6\u8986\u76D6
`,13),vs=[bs],qs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ms,vs))}},fs={class:"van-doc-markdown-body"},ys=d(`

Layout \u5E03\u5C40

\u4ECB\u7ECD

Layout \u63D0\u4F9B\u4E86van-row\u548Cvan-col\u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-row": "@vant/weapp/row/index",
-  "van-col": "@vant/weapp/col/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

Layout \u7EC4\u4EF6\u63D0\u4F9B\u4E8624\u5217\u6805\u683C\uFF0C\u901A\u8FC7\u5728Col\u4E0A\u6DFB\u52A0span\u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0offset\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002

<van-row>
-  <van-col span="8">span: 8</van-col>
-  <van-col span="8">span: 8</van-col>
-  <van-col span="8">span: 8</van-col>
-</van-row>
-
-<van-row>
-  <van-col span="4">span: 4</van-col>
-  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
-</van-row>
-
-<van-row>
-  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
-</van-row>
-

\u8BBE\u7F6E\u5217\u5143\u7D20\u95F4\u8DDD

\u901A\u8FC7gutter\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002

<van-row gutter="20">
-  <van-col span="8">span: 8</van-col>
-  <van-col span="8">span: 8</van-col>
-  <van-col span="8">span: 8</van-col>
-</van-row>
-

API

Row Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
gutter\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09string | number-

Col Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
span\u5217\u5143\u7D20\u5BBD\u5EA6string | number-
offset\u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BBstring | number-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,10),_s=[ys],xs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",fs,_s))}},ws={class:"van-doc-markdown-body"},ks=d(`

Collapse \u6298\u53E0\u9762\u677F

\u4ECB\u7ECD

\u5C06\u4E00\u7EC4\u5185\u5BB9\u653E\u7F6E\u5728\u591A\u4E2A\u6298\u53E0\u9762\u677F\u4E2D\uFF0C\u70B9\u51FB\u9762\u677F\u7684\u6807\u9898\u53EF\u4EE5\u5C55\u5F00\u6216\u6536\u7F29\u5176\u5185\u5BB9\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-collapse": "@vant/weapp/collapse/index",
-  "van-collapse-item": "@vant/weapp/collapse-item/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7value\u63A7\u5236\u5C55\u5F00\u7684\u9762\u677F\u5217\u8868\uFF0CactiveNames\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002

<van-collapse value="{{ activeNames }}" bind:change="onChange">
-  <van-collapse-item title="\u6807\u98981" name="1">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-  <van-collapse-item title="\u6807\u98982" name="2">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-  <van-collapse-item title="\u6807\u98983" name="3" disabled>
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-</van-collapse>
-
Page({
-  data: {
-    activeNames: ['1'],
-  },
-  onChange(event) {
-    this.setData({
-      activeNames: event.detail,
-    });
-  },
-});
-

\u624B\u98CE\u7434

\u901A\u8FC7accordion\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u624B\u98CE\u7434\u6A21\u5F0F\uFF0C\u6700\u591A\u5C55\u5F00\u4E00\u4E2A\u9762\u677F\uFF0C\u6B64\u65F6activeName\u4E3A\u5B57\u7B26\u4E32\u683C\u5F0F\u3002

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">
-  <van-collapse-item title="\u6807\u98981" name="1">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-  <van-collapse-item title="\u6807\u98982" name="2">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-  <van-collapse-item title="\u6807\u98983" name="3">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-</van-collapse>
-
Page({
-  data: {
-    activeName: '1',
-  },
-  onChange(event) {
-    this.setData({
-      activeName: event.detail,
-    });
-  },
-});
-

\u4E8B\u4EF6\u76D1\u542C

van-collapse \u63D0\u4F9B\u4E86 change, open \u548C close \u4E8B\u4EF6\u3002change \u4E8B\u4EF6\u5728\u9762\u677F\u5207\u6362\u65F6\u89E6\u53D1\uFF0Copen \u4E8B\u4EF6\u5728\u9762\u677F\u5C55\u5F00\u65F6\u89E6\u53D1\uFF0Cclose \u4E8B\u4EF6\u5728\u9762\u677F\u5173\u95ED\u65F6\u89E6\u53D1\u3002

<van-collapse
-  value="{{ activeNames }}"
-  bind:change="onChange"
-  bind:open="onOpen"
-  bind:close="onClose"
->
-  <van-collapse-item title="\u6807\u98981" name="1">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-  <van-collapse-item title="\u6807\u98982" name="2">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-  <van-collapse-item title="\u6807\u98983" name="3">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-</van-collapse>
-
Page({
-  data: {
-    activeNames: ['1'],
-  },
-  onChange(event) {
-    this.setData({
-      activeNames: event.detail,
-    });
-  },
-  onOpen(event) {
-    Toast(\`\u5C55\u5F00: \${event.detail}\`);
-  },
-  onClose(event) {
-    Toast(\`\u5173\u95ED: \${event.detail}\`);
-  },
-});
-

\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9

<van-collapse value="{{ activeNames }}" bind:change="onChange">
-  <van-collapse-item name="1">
-    <view slot="title">\u6807\u98981<van-icon name="question-o" /></view>
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-  <van-collapse-item title="\u6807\u98982" name="2" icon="shop-o">
-    \u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
-  </van-collapse-item>
-</van-collapse>
-
Page({
-  data: {
-    activeNames: ['1'],
-  },
-  onChange(event) {
-    this.setData({
-      activeNames: event.detail,
-    });
-  },
-});
-

API

Collapse Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
value\u5F53\u524D\u5C55\u5F00\u9762\u677F\u7684 name\u975E\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A(string | number)[]
\u624B\u98CE\u7434\u6A21\u5F0F\uFF1Astring | number		-
accordion\u662F\u5426\u5F00\u542F\u624B\u98CE\u7434\u6A21\u5F0Fbooleanfalse
border\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846booleantrue

Collapse Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
change\u5207\u6362\u9762\u677F\u65F6\u89E6\u53D1activeNames: string | Array
open\u5C55\u5F00\u9762\u677F\u65F6\u89E6\u53D1currentName: string | number
close\u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1currentName: string | number

CollapseItem Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u503Cstring | numberindex
title\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9string | number-
size\u6807\u9898\u680F\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3Alargestring-
icon\u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
value\u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9string | number-
label\u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606Fstring-
border\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846booleantrue
is-link\u662F\u5426\u5C55\u793A\u6807\u9898\u680F\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleantrue
clickable\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleanfalse
disabled\u662F\u5426\u7981\u7528\u9762\u677Fbooleanfalse

CollapseItem Slot

\u540D\u79F0\u8BF4\u660E
-\u9762\u677F\u5185\u5BB9
value\u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9
icon\u81EA\u5B9A\u4E49icon
title\u81EA\u5B9A\u4E49title
right-icon\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662Farrow, \u9700\u8981\u5C06 is-link \u8BBE\u7F6E\u4E3A false, \u624D\u4F1A\u751F\u6548

Collapse \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B

CollapseItem \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
content-class\u5185\u5BB9\u6837\u5F0F\u7C7B
`,15),zs=[ks],Cs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ws,zs))}},Ps={class:"van-doc-markdown-body"},Ss=d(`

\u5185\u7F6E\u6837\u5F0F

\u4ECB\u7ECD

Vant \u4E2D\u9ED8\u8BA4\u5305\u542B\u4E86\u4E00\u4E9B\u5E38\u7528\u6837\u5F0F\uFF0C\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 className \u7684\u65B9\u5F0F\u4F7F\u7528\u3002

\u5F15\u5165

\u5728 app.wxss \u4E2D\u5F15\u5165\u5185\u7F6E\u6837\u5F0F\u3002

@import '@vant/weapp/common/index.wxss';
-

\u4EE3\u7801\u6F14\u793A

\u6587\u5B57\u7701\u7565

\u5F53\u6587\u672C\u5185\u5BB9\u957F\u5EA6\u8D85\u8FC7\u5BB9\u5668\u6700\u5927\u5BBD\u5EA6\u65F6\uFF0C\u81EA\u52A8\u7701\u7565\u591A\u4F59\u7684\u6587\u672C\u3002

<view class="van-ellipsis">
-  \u8FD9\u662F\u4E00\u6BB5\u5BBD\u5EA6\u9650\u5236 250px \u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
-</view>
-
-<!-- \u6700\u591A\u663E\u793A\u4E24\u884C -->
-<view class="van-multi-ellipsis--l2">
-  \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E24\u884C\u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
-</view>
-
-<!-- \u6700\u591A\u663E\u793A\u4E09\u884C -->
-<view class="van-multi-ellipsis--l3">
-  \u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E09\u884C\u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
-</view>
-

1px \u8FB9\u6846

\u4E3A\u5143\u7D20\u6DFB\u52A0 Retina \u5C4F\u5E55\u4E0B\u7684 1px \u8FB9\u6846\uFF08\u5373 hairline\uFF09\uFF0C\u57FA\u4E8E\u4F2A\u7C7B transform \u5B9E\u73B0\u3002

<!-- \u4E0A\u8FB9\u6846 -->
-<view class="van-hairline--top"></view>
-
-<!-- \u4E0B\u8FB9\u6846 -->
-<view class="van-hairline--bottom"></view>
-
-<!-- \u5DE6\u8FB9\u6846 -->
-<view class="van-hairline--left"></view>
-
-<!-- \u53F3\u8FB9\u6846 -->
-<view class="van-hairline--right"></view>
-
-<!-- \u4E0A\u4E0B\u8FB9\u6846 -->
-<view class="van-hairline--top-bottom"></view>
-
-<!-- \u5168\u8FB9\u6846 -->
-<view class="van-hairline--surround"></view>
-

\u5168\u5C40\u5B57\u4F53

\u63A8\u8350\u5728 app.wxss \u4E2D\u8BBE\u7F6E\u4EE5\u4E0B\u5168\u5C40\u5B57\u4F53\uFF0C\u4EE5\u4FDD\u8BC1\u5728\u4E0D\u540C\u8BBE\u5907\u4E0A\u63D0\u4F9B\u6700\u4F73\u7684\u89C6\u89C9\u4F53\u9A8C\u3002

page {
-  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
-    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
-    sans-serif;
-}
-
`,7),Ds=[Ss],Is={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ps,Ds))}},$s={class:"van-doc-markdown-body"},Ts=d(`

ConfigProvider \u5168\u5C40\u914D\u7F6E

\u4ECB\u7ECD

\u7528\u4E8E\u914D\u7F6E Vant Weapp \u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F\uFF0C\u4ECE v1.7.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-config-provider": "@vant/weapp/config-provider/index"
-}
-

\u5B9A\u5236\u4E3B\u9898

\u4ECB\u7ECD

Vant Weapp \u7EC4\u4EF6\u901A\u8FC7\u4E30\u5BCC\u7684 CSS \u53D8\u91CF \u6765\u7EC4\u7EC7\u6837\u5F0F\uFF0C\u901A\u8FC7\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3001\u52A8\u6001\u5207\u6362\u4E3B\u9898\u7B49\u6548\u679C\u3002

\u793A\u4F8B

\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u67E5\u770B\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u53EF\u4EE5\u770B\u5230 .van-button--primary \u7C7B\u540D\u4E0A\u5B58\u5728\u4EE5\u4E0B\u53D8\u91CF\uFF1A

.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
-    );
-}
-

\u81EA\u5B9A\u4E49 CSS \u53D8\u91CF

\u901A\u8FC7 CSS \u8986\u76D6

\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u4EE3\u7801\u4E2D\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0CButton \u7EC4\u4EF6\u7684\u6837\u5F0F\u4F1A\u968F\u4E4B\u53D1\u751F\u6539\u53D8\uFF1A

/* \u6DFB\u52A0\u8FD9\u6BB5\u6837\u5F0F\u540E\uFF0CPrimary Button \u4F1A\u53D8\u6210\u7EA2\u8272 */
-page {
-  --button-primary-background-color: red;
-}
-

\u901A\u8FC7 ConfigProvider \u8986\u76D6

ConfigProvider \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u8986\u76D6 CSS \u53D8\u91CF\u7684\u80FD\u529B\uFF0C\u4F60\u9700\u8981\u5728\u6839\u8282\u70B9\u5305\u88F9\u4E00\u4E2A ConfigProvider \u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 theme-vars \u5C5E\u6027\u6765\u914D\u7F6E\u4E00\u4E9B\u4E3B\u9898\u53D8\u91CF\u3002

<van-config-provider theme-vars="{{ themeVars }}">
-  <van-cell-group>
-    <van-field label="\u8BC4\u5206">
-      <view slot="input" style="width: 100%">
-        <van-rate
-          model:value="{{ rate }}"
-          data-key="rate"
-          bind:change="onChange"
-        />
-      </view>
-    </van-field>
-    <van-field label="\u6ED1\u5757" border="{{ false }}">
-      <view slot="input" style="width: 100%">
-        <van-slider
-          value="{{ slider }}"
-          data-key="slider"
-          bind:change="onChange"
-        />
-      </view>
-    </van-field>
-  </van-cell-group>
-
-  <view style="margin: 16px">
-    <van-button round block type="primary">\u63D0\u4EA4</van-button>
-  </view>
-</van-config-provider>
-
import Page from '../../common/page';
-
-Page({
-  data: {
-    rate: 4,
-    slider: 50,
-    themeVars: {
-      rateIconFullColor: '#07c160',
-      sliderBarHeight: '4px',
-      sliderButtonWidth: '20px',
-      sliderButtonHeight: '20px',
-      sliderActiveBackgroundColor: '#07c160',
-      buttonPrimaryBorderColor: '#07c160',
-      buttonPrimaryBackgroundColor: '#07c160',
-    },
-  },
-
-  onChange(event) {
-    const { key } = event.currentTarget.dataset;
-    this.setData({
-      [key]: event.detail,
-    });
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
theme-vars\u81EA\u5B9A\u4E49\u4E3B\u9898\u53D8\u91CFobject-
`,8),As=[Ts],Es={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",$s,As))}},Fs={class:"van-doc-markdown-body"},Bs=d(`

CountDown \u5012\u8BA1\u65F6

\u4ECB\u7ECD

\u7528\u4E8E\u5B9E\u65F6\u5C55\u793A\u5012\u8BA1\u65F6\u6570\u503C\uFF0C\u652F\u6301\u6BEB\u79D2\u7CBE\u5EA6\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-count-down": "@vant/weapp/count-down/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

time\u5C5E\u6027\u8868\u793A\u5012\u8BA1\u65F6\u603B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2\u3002

<van-count-down time="{{ time }}" />
-
Page({
-  data: {
-    time: 30 * 60 * 60 * 1000,
-  },
-});
-

\u81EA\u5B9A\u4E49\u683C\u5F0F

\u901A\u8FC7format\u5C5E\u6027\u8BBE\u7F6E\u5012\u8BA1\u65F6\u6587\u672C\u7684\u5185\u5BB9\u3002

<van-count-down time="{{ time }}" format="DD \u5929 HH \u65F6 mm \u5206 ss \u79D2" />
-

\u6BEB\u79D2\u7EA7\u6E32\u67D3

\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6Emillisecond\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002

<van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />
-

\u81EA\u5B9A\u4E49\u6837\u5F0F

\u8BBE\u7F6Euse-slot\u5C5E\u6027\u540E\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5012\u8BA1\u65F6\u6837\u5F0F\uFF0C\u9700\u8981\u901A\u8FC7bind:change\u4E8B\u4EF6\u83B7\u53D6timeData\u5BF9\u8C61\u5E76\u81EA\u884C\u6E32\u67D3\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9\u8868\u683C\u3002

<van-count-down use-slot time="{{ time }}" bind:change="onChange">
-  <text class="item">{{ timeData.hours }}</text>
-  <text class="item">{{ timeData.minutes }}</text>
-  <text class="item">{{ timeData.seconds }}</text>
-</van-count-down>
-
Page({
-  data: {
-    time: 30 * 60 * 60 * 1000,
-    timeData: {},
-  },
-
-  onChange(e) {
-    this.setData({
-      timeData: e.detail,
-    });
-  },
-});
-
.item {
-  display: inline-block;
-  width: 22px;
-  margin-right: 5px;
-  color: #fff;
-  font-size: 12px;
-  text-align: center;
-  background-color: #1989fa;
-  border-radius: 2px;
-}
-

\u624B\u52A8\u63A7\u5236

\u901A\u8FC7 selectComponent \u9009\u62E9\u5668\u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u53EF\u4EE5\u8C03\u7528start\u3001pause\u3001reset\u65B9\u6CD5\u3002

<van-count-down
-  class="control-count-down"
-  millisecond
-  time="{{ 3000 }}"
-  auto-start="{{ false }}"
-  format="ss:SSS"
-  bind:finish="finished"
-/>
-
-<van-grid clickable column-num="3">
-  <van-grid-item text="\u5F00\u59CB" icon="play-circle-o" bindclick="start" />
-  <van-grid-item text="\u6682\u505C" icon="pause-circle-o" bindclick="pause" />
-  <van-grid-item text="\u91CD\u7F6E" icon="replay" bindclick="reset" />
-</van-grid>
-
Page({
-  start() {
-    const countDown = this.selectComponent('.control-count-down');
-    countDown.start();
-  },
-
-  pause() {
-    const countDown = this.selectComponent('.control-count-down');
-    countDown.pause();
-  },
-
-  reset() {
-    const countDown = this.selectComponent('.control-count-down');
-    countDown.reset();
-  },
-
-  finished() {
-    Toast('\u5012\u8BA1\u65F6\u7ED3\u675F');
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
time\u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2number-
format\u65F6\u95F4\u683C\u5F0F\uFF0CDD-\u65E5\uFF0CHH-\u65F6\uFF0Cmm-\u5206\uFF0Css-\u79D2\uFF0CSSS-\u6BEB\u79D2stringHH:mm:ss
auto-start\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6booleantrue
millisecond\u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3booleanfalse
use-slot\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6837\u5F0F\u63D2\u69FDbooleanfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:finish\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1-
bind:change\u65F6\u95F4\u53D8\u5316\u65F6\u89E6\u53D1\uFF0C\u4EC5\u5728\u5F00\u542Fuse-slot\u540E\u624D\u4F1A\u89E6\u53D1timeData

timeData \u683C\u5F0F

\u540D\u79F0\u8BF4\u660E\u7C7B\u578B
days\u5269\u4F59\u5929\u6570number
hours\u5269\u4F59\u5C0F\u65F6number
minutes\u5269\u4F59\u5206\u949Fnumber
seconds\u5269\u4F59\u79D2\u6570number
milliseconds\u5269\u4F59\u6BEB\u79D2number

\u65B9\u6CD5

\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 CountDown \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
start--\u5F00\u59CB\u5012\u8BA1\u65F6
pause--\u6682\u505C\u5012\u8BA1\u65F6
reset--\u91CD\u8BBE\u5012\u8BA1\u65F6\uFF0C\u82E5auto-start\u4E3Atrue\uFF0C\u91CD\u8BBE\u540E\u4F1A\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6
`,14),Rs=[Bs],Ns={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Fs,Rs))}},Ms={class:"van-doc-markdown-body"},Ls=d(`

DatetimePicker \u65F6\u95F4\u9009\u62E9

\u4ECB\u7ECD

\u7528\u4E8E\u9009\u62E9\u65F6\u95F4\uFF0C\u652F\u6301\u65E5\u671F\u3001\u65F6\u5206\u7B49\u65F6\u95F4\u7EF4\u5EA6\uFF0C\u901A\u5E38\u4E0E \u5F39\u51FA\u5C42 \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-datetime-picker": "@vant/weapp/datetime-picker/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u9009\u62E9\u5B8C\u6574\u65F6\u95F4

value \u4E3A\u65F6\u95F4\u6233\u3002

<van-datetime-picker
-  type="datetime"
-  value="{{ currentDate }}"
-  min-date="{{ minDate }}"
-  max-date="{{ maxDate }}"
-  bind:input="onInput"
-/>
-
Page({
-  data: {
-    minHour: 10,
-    maxHour: 20,
-    minDate: new Date().getTime(),
-    maxDate: new Date(2019, 10, 1).getTime(),
-    currentDate: new Date().getTime(),
-  },
-
-  onInput(event) {
-    this.setData({
-      currentDate: event.detail,
-    });
-  },
-});
-

\u9009\u62E9\u65E5\u671F\uFF08\u5E74\u6708\u65E5\uFF09

value \u4E3A\u65F6\u95F4\u6233\uFF0C\u901A\u8FC7\u4F20\u5165 formatter \u51FD\u6570\u5BF9\u9009\u9879\u6587\u5B57\u8FDB\u884C\u5904\u7406\u3002

<van-datetime-picker
-  type="date"
-  value="{{ currentDate }}"
-  bind:input="onInput"
-  min-date="{{ minDate }}"
-  formatter="{{ formatter }}"
-/>
-
Page({
-  data: {
-    currentDate: new Date().getTime(),
-    minDate: new Date().getTime(),
-    formatter(type, value) {
-      if (type === 'year') {
-        return \`\${value}\u5E74\`;
-      }
-      if (type === 'month') {
-        return \`\${value}\u6708\`;
-      }
-      return value;
-    },
-  },
-
-  onInput(event) {
-    this.setData({
-      currentDate: event.detail,
-    });
-  },
-});
-

\u9009\u62E9\u65E5\u671F\uFF08\u5E74\u6708\uFF09

value \u4E3A\u65F6\u95F4\u6233\u3002

<van-datetime-picker
-  type="year-month"
-  value="{{ currentDate }}"
-  min-date="{{ minDate }}"
-  bind:input="onInput"
-/>
-
Page({
-  data: {
-    currentDate: new Date().getTime(),
-    minDate: new Date().getTime(),
-  },
-
-  onInput(event) {
-    this.setData({
-      currentDate: event.detail,
-    });
-  },
-});
-

\u9009\u62E9\u65F6\u95F4

value \u4E3A\u5B57\u7B26\u4E32\u3002

<van-datetime-picker
-  type="time"
-  value="{{ currentDate }}"
-  min-hour="{{ minHour }}"
-  max-hour="{{ maxHour }}"
-  bind:input="onInput"
-/>
-
Page({
-  data: {
-    currentDate: '12:00',
-    minHour: 10,
-    maxHour: 20,
-  },
-
-  onInput(event) {
-    this.setData({
-      currentDate: event.detail,
-    });
-  },
-});
-

\u9009\u9879\u8FC7\u6EE4\u5668

\u901A\u8FC7\u4F20\u5165 filter \u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6570\u7EC4\u8FDB\u884C\u8FC7\u6EE4\uFF0C\u5B9E\u73B0\u81EA\u5B9A\u4E49\u65F6\u95F4\u95F4\u9694\u3002

<van-datetime-picker
-  type="time"
-  value="{{ currentDate }}"
-  filter="{{ filter }}"
-/>
-
Page({
-  data: {
-    currentDate: '12:00',
-    filter(type, options) {
-      if (type === 'minute') {
-        return options.filter((option) => option % 5 === 0);
-      }
-
-      return options;
-    },
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
value\u5F53\u524D\u9009\u4E2D\u503Cstring | number-
type\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A date time year-month
\u4E0D\u5EFA\u8BAE\u52A8\u6001\u4FEE\u6539		stringdatetime
min-date\u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949Fnumber\u5341\u5E74\u524D
max-date\u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949Fnumber\u5341\u5E74\u540E
min-hour\u53EF\u9009\u7684\u6700\u5C0F\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578Bnumber0
max-hour\u53EF\u9009\u7684\u6700\u5927\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578Bnumber23
min-minute\u53EF\u9009\u7684\u6700\u5C0F\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578Bnumber0
max-minute\u53EF\u9009\u7684\u6700\u5927\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578Bnumber59
filter\u9009\u9879\u8FC7\u6EE4\u51FD\u6570(type \u53EF\u80FD\u503C\u4E3A year, month, day, hour, minute)(type, values) => values-
formatter\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570(type \u53EF\u80FD\u503C\u4E3A year, month, day, hour, minute)(type, value) => value-
title\u9876\u90E8\u680F\u6807\u9898string''
show-toolbar\u662F\u5426\u663E\u793A\u9876\u90E8\u680Fbooleantrue
loading\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001booleanfalse
item-height\u9009\u9879\u9AD8\u5EA6number44
confirm-button-text\u786E\u8BA4\u6309\u94AE\u6587\u5B57string\u786E\u8BA4
cancel-button-text\u53D6\u6D88\u6309\u94AE\u6587\u5B57string\u53D6\u6D88
visible-item-count\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570number6

Events

\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:input\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D value
bind:change\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u7EC4\u4EF6\u5B9E\u4F8B
bind:confirm\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D value
bind:cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6-

change \u4E8B\u4EF6

\u5728change\u4E8B\u4EF6\u4E2D\uFF0C\u53EF\u4EE5\u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\uFF0C\u5BF9\u7EC4\u4EF6\u8FDB\u884C\u76F8\u5E94\u7684\u66F4\u65B0\u7B49\u64CD\u4F5C\uFF1A

\u51FD\u6570\u8BF4\u660E
getColumnValue(index)\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C
setColumnValue(index, value)\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C
getColumnValues(index)\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C
setColumnValues(index, values)\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C
getValues()\u83B7\u53D6\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C\uFF0C\u8FD4\u56DE\u4E00\u4E2A\u6570\u7EC4
setValues(values)values\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u8BBE\u7F6E\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
active-class\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B
toolbar-class\u9876\u90E8\u680F\u6837\u5F0F\u7C7B
column-class\u5217\u6837\u5F0F\u7C7B
`,14),Vs=[Ls],Us={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ms,Vs))}},Os={class:"van-doc-markdown-body"},Gs=d(`

Dialog \u5F39\u51FA\u6846

\u4ECB\u7ECD

\u5F39\u51FA\u6A21\u6001\u6846\uFF0C\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3001\u6D88\u606F\u786E\u8BA4\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u5185\u5B8C\u6210\u7279\u5B9A\u7684\u4EA4\u4E92\u64CD\u4F5C\uFF0C\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-dialog": "@vant/weapp/dialog/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u6D88\u606F\u63D0\u793A

\u7528\u4E8E\u63D0\u793A\u4E00\u4E9B\u6D88\u606F\uFF0C\u53EA\u5305\u542B\u4E00\u4E2A\u786E\u8BA4\u6309\u94AE\u3002

<van-dialog id="van-dialog" />
-
import Dialog from '@vant/weapp/dialog/dialog';
-
-Dialog.alert({
-  title: '\u6807\u9898',
-  message: '\u5F39\u7A97\u5185\u5BB9',
-}).then(() => {
-  // on close
-});
-
-Dialog.alert({
-  message: '\u5F39\u7A97\u5185\u5BB9',
-}).then(() => {
-  // on close
-});
-

\u6D88\u606F\u786E\u8BA4

\u7528\u4E8E\u786E\u8BA4\u6D88\u606F\uFF0C\u5305\u542B\u53D6\u6D88\u548C\u786E\u8BA4\u6309\u94AE\u3002

<van-dialog id="van-dialog" />
-
import Dialog from '@vant/weapp/dialog/dialog';
-
-Dialog.confirm({
-  title: '\u6807\u9898',
-  message: '\u5F39\u7A97\u5185\u5BB9',
-})
-  .then(() => {
-    // on confirm
-  })
-  .catch(() => {
-    // on cancel
-  });
-

\u5706\u89D2\u6309\u94AE\u98CE\u683C

\u5C06 theme \u9009\u9879\u8BBE\u7F6E\u4E3A round-button \u53EF\u4EE5\u5C55\u793A\u5706\u89D2\u6309\u94AE\u98CE\u683C\u7684\u5F39\u7A97\u3002

<van-dialog id="van-dialog" />
-
import Dialog from '@vant/weapp/dialog/dialog';
-
-Dialog.alert({
-  title: '\u6807\u9898',
-  message: '\u5F39\u7A97\u5185\u5BB9',
-  theme: 'round-button',
-}).then(() => {
-  // on close
-});
-
-Dialog.alert({
-  message: '\u5F39\u7A97\u5185\u5BB9',
-  theme: 'round-button',
-}).then(() => {
-  // on close
-});
-

\u5F02\u6B65\u5173\u95ED

\u901A\u8FC7 beforeClose \u5C5E\u6027\u53EF\u4EE5\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u5728\u5F39\u7A97\u5173\u95ED\u524D\u8FDB\u884C\u7279\u5B9A\u64CD\u4F5C\u3002

<van-dialog id="van-dialog" />
-
import Dialog from '@vant/weapp/dialog/dialog';
-
-const beforeClose = (action) =>
-  new Promise((resolve) => {
-    setTimeout(() => {
-      if (action === 'confirm') {
-        resolve(true);
-      } else {
-        // \u62E6\u622A\u53D6\u6D88\u64CD\u4F5C
-        resolve(false);
-      }
-    }, 1000);
-  });
-
-Dialog.confirm({
-  title: '\u6807\u9898',
-  message: '\u5F39\u7A97\u5185\u5BB9',
-  beforeClose,
-});
-

\u7EC4\u4EF6\u8C03\u7528

\u5982\u679C\u9700\u8981\u5728\u5F39\u7A97\u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7EC4\u4EF6\u8C03\u7528\u7684\u65B9\u5F0F\u3002

<van-dialog
-  use-slot
-  title="\u6807\u9898"
-  show="{{ show }}"
-  show-cancel-button
-  confirm-button-open-type="getUserInfo"
-  bind:close="onClose"
-  bind:getuserinfo="getUserInfo"
->
-  <image src="https://img.yzcdn.cn/1.jpg" />
-</van-dialog>
-
Page({
-  data: {
-    show: true,
-  },
-
-  getUserInfo(event) {
-    console.log(event.detail);
-  },
-
-  onClose() {
-    this.setData({ show: false });
-  },
-});
-

\u81EA\u5B9A\u4E49\u6837\u5F0F

\u5982\u679C\u9700\u8981\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u5EFA\u8BAE\u4F7F\u7528 custom-class \u5B9E\u73B0\uFF0C\u4E0D\u5728\u63A8\u8350 className \u5C5E\u6027\uFF08\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u4F7F\u7528\u5E76\u4E0D\u4F1A\u751F\u6548\uFF09\uFF0C\u4F7F\u7528\u65B9\u6CD5\u5982\u4E0B

\u7EC4\u4EF6\u8C03\u7528

<van-dialog
-  title="\u6807\u9898"
-  message="\u5F39\u7A97\u5185\u5BB9"
-  show="{{ show }}"
-  custom-class="my-custom-class"
-/>
-

API \u8C03\u7528

<van-dialog id="van-dialog" custom-class="my-custom-class" />
-

API

\u65B9\u6CD5

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
DialogoptionsPromise\u5C55\u793A\u5F39\u7A97
Dialog.alertoptionsPromise\u5C55\u793A\u6D88\u606F\u63D0\u793A\u5F39\u7A97
Dialog.confirmoptionsPromise\u5C55\u793A\u6D88\u606F\u786E\u8BA4\u5F39\u7A97
Dialog.setDefaultOptionsoptionsvoid\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548
Dialog.resetDefaultOptions-void\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548
Dialog.close-void\u5173\u95ED\u5F39\u7A97
Dialog.stopLoading-void\u505C\u6B62\u6309\u94AE\u7684\u52A0\u8F7D\u72B6\u6001

Options

\u901A\u8FC7\u51FD\u6570\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u6807\u9898string-
width\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number320px
message\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7\\n\u6362\u884Cstring-
messageAlign\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3Aleft rightstringcenter
theme\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3Around-buttonstringdefault
zIndexz-index \u5C42\u7EA7number100
className\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548\uFF0C\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 custom-class \u4EE3\u66FF\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664string''
customStyle\u81EA\u5B9A\u4E49\u6837\u5F0Fstring''
selector\u81EA\u5B9A\u4E49\u9009\u62E9\u5668stringvan-dialog
showConfirmButton\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AEbooleantrue
showCancelButton\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AEbooleanfalse
confirmButtonText\u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848string\u786E\u8BA4
cancelButtonText\u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848string\u53D6\u6D88
overlay\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42booleantrue
overlayStyle\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0Fobject-
closeOnClickOverlay\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97booleanfalse
asyncClose\u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 beforeClose \u5C5E\u6027\u4EE3\u66FFbooleanfalse
beforeClose\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise(action) => boolean | Promise<boolean>-
context\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587object\u5F53\u524D\u9875\u9762
transition\u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3Afade nonestringscale
confirmButtonOpenType\u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863string-

OpenType Options

\u4F7F\u7528confirmButtonOpenType\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B\u9009\u9879\uFF1A

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503Copen-type
appParameter\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570string-launchApp
lang\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C
zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587		stringengetUserInfo
sessionFrom\u4F1A\u8BDD\u6765\u6E90string-contact
businessId\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 idnumber-contact
sendMessageTitle\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898string\u5F53\u524D\u6807\u9898contact
sendMessagePath\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84string\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84contact
sendMessageImgsendMessageImgstring\u622A\u56FEcontact
showMessageCard\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247stringfalsecontact

Props

\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props:

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
show\u662F\u5426\u663E\u793A\u5F39\u7A97boolean-
title\u6807\u9898string-
width\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number320px
message\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7\\n\u6362\u884Cstring-
theme\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3Around-buttonstringdefault
message-align\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3Aleft rightstringcenter
z-indexz-index \u5C42\u7EA7number100
class-name\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548\uFF0C\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 custom-class \u4EE3\u66FF\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664string''
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring''
show-confirm-button\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AEbooleantrue
show-cancel-button\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AEbooleanfalse
confirm-button-text\u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848string\u786E\u8BA4
cancel-button-text\u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848string\u53D6\u6D88
confirm-button-color\u786E\u8BA4\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272string#ee0a24
cancel-button-color\u53D6\u6D88\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272string#333
overlay\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42booleantrue
overlay-style v1.0.0\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0Fobject-
close-on-click-overlay\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97booleanfalse
use-slot\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FDbooleanfalse
use-title-slot\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6807\u9898\u7684\u63D2\u69FDbooleanfalse
use-confirm-button-slot 1.10.23\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u7684\u63D2\u69FDbooleanfalse
use-cancel-button-slot 1.10.23\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u7684\u63D2\u69FDbooleanfalse
async-close\u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 beforeClose \u5C5E\u6027\u4EE3\u66FFbooleanfalse
before-close\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE false \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise(action) => boolean | Promise<boolean>-
transition\u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3Afadestringscale
confirm-button-open-type\u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863string-

OpenType Props

\u4F7F\u7528confirm-button-open-type\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503Copen-type
app-parameter\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570string-launchApp
lang\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C
zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587		stringengetUserInfo
session-from\u4F1A\u8BDD\u6765\u6E90string-contact
business-id\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 idnumber-contact
send-message-title\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898string\u5F53\u524D\u6807\u9898contact
send-message-path\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84string\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84contact
send-message-imgsendMessageImgstring\u622A\u56FEcontact
show-message-card\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247stringfalsecontact

Events

\u4E8B\u4EF6\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:close\u5F39\u7A97\u5173\u95ED\u65F6\u89E6\u53D1event.detail: \u89E6\u53D1\u5173\u95ED\u4E8B\u4EF6\u7684\u6765\u6E90\uFF0C
\u679A\u4E3E\u4E3Aconfirm,cancel,overlay
bind:confirm\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\u89E6\u53D1-
bind:cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1-
bind:getuserinfo\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C
\u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo		-
bind:contact\u5BA2\u670D\u6D88\u606F\u56DE\u8C03-
bind:getphonenumber\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03-
bind:getrealtimephonenumber v1.10.21\u83B7\u53D6\u624B\u673A\u53F7\u5B9E\u65F6\u9A8C\u8BC1\u56DE\u8C03\uFF0Copen-type=getRealtimePhoneNumber \u65F6\u6709\u6548-
bind:error\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03-
bind:opensetting\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03-

Slot

\u540D\u79F0\u8BF4\u660E
title\u81EA\u5B9A\u4E49title\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title\u5C5E\u6027\u5219\u4E0D\u751F\u6548
confirm-button 1.10.23\u81EA\u5B9A\u4E49confirm-button\u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981 use-confirm-button-slot \u4E3A true
cancel-button 1.10.23\u81EA\u5B9A\u4E49cancel-button\u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981 use-cancel-button-slot \u4E3A true

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class v1.10.8\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
cancle-button-class v1.10.21\u53D6\u6D88\u6309\u94AE\u6837\u5F0F\u7C7B
confirm-button-class v1.10.21\u786E\u8BA4\u6309\u94AE\u6837\u5F0F\u7C7B
`,19),Ws=[Gs],Hs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Os,Ws))}},Ks={class:"van-doc-markdown-body"},Qs=d(`

Divider \u5206\u5272\u7EBF

\u4ECB\u7ECD

\u7528\u4E8E\u5C06\u5185\u5BB9\u5206\u9694\u4E3A\u591A\u4E2A\u533A\u57DF\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6\u7248\u672C\uFF0CES5\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B

"usingComponents": {
-  "van-divider": "@vant/weapp/divider/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-divider />
-

\u4F7F\u7528 hairline

<van-divider hairline />
-

\u865A\u7EBF

<van-divider dashed />
-

\u6587\u672C\u4F4D\u7F6E

<van-divider contentPosition="center">\u6587\u672C</van-divider>
-<van-divider contentPosition="left">\u6587\u672C</van-divider>
-<van-divider contentPosition="right">\u6587\u672C</van-divider>
-

\u81EA\u5B9A\u4E49\u5C5E\u6027

<van-divider contentPosition="center" textColor="#1989fa">\u6587\u672C\u989C\u8272</van-divider>
-<van-divider contentPosition="center" borderColor="#1989fa">
-  border \u989C\u8272
-</van-divider>
-<van-divider contentPosition="center" fontSize="18">\u5B57\u4F53\u5927\u5C0F</van-divider>
-

\u81EA\u5B9A\u4E49\u6837\u5F0F

<van-divider
-  contentPosition="center"
-  customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
->
-  \u6587\u672C
-</van-divider>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
dashed\u865A\u7EBFbooleanfalse
hairline\u7EC6\u7EBFbooleanfalse
content-position\u6587\u672C\u4F4D\u7F6E\uFF0Cleft center rightstring-
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring-

Slot

\u540D\u79F0\u8BF4\u660E
\u9ED8\u8BA4\u81EA\u5B9A\u4E49\u6587\u672C\u5185\u5BB9
`,13),Js=[Qs],Xs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ks,Js))}},Zs={class:"van-doc-markdown-body"},Ys=d(`

DropdownMenu \u4E0B\u62C9\u83DC\u5355

\u4ECB\u7ECD

\u5411\u4E0B\u5F39\u51FA\u7684\u83DC\u5355\u5217\u8868\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6\u7248\u672C\uFF0CES5\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
-  "van-dropdown-item": "@vant/weapp/dropdown-item/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-dropdown-menu>
-  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</van-dropdown-menu>
-
Page({
-  data: {
-    option1: [
-      { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
-      { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },
-      { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },
-    ],
-    option2: [
-      { text: '\u9ED8\u8BA4\u6392\u5E8F', value: 'a' },
-      { text: '\u597D\u8BC4\u6392\u5E8F', value: 'b' },
-      { text: '\u9500\u91CF\u6392\u5E8F', value: 'c' },
-    ],
-    value1: 0,
-    value2: 'a',
-  },
-});
-

\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9

<van-dropdown-menu>
-  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <van-dropdown-item id="item" title="{{ itemTitle }}">
-    <van-cell title="{{ switchTitle1 }}">
-      <van-switch
-        slot="right-icon"
-        size="24px"
-        style="height: 26px"
-        checked="{{ switch1 }}"
-        active-color="#ee0a24"
-        bind:change="onSwitch1Change"
-      />
-    </van-cell>
-    <van-cell title="{{ switchTitle2 }}">
-      <van-switch
-        slot="right-icon"
-        size="24px"
-        style="height: 26px"
-        checked="{{ switch2 }}"
-        active-color="#ee0a24"
-        bind:change="onSwitch2Change"
-      />
-    </van-cell>
-    <view style="padding: 5px 16px;">
-      <van-button type="danger" block round bind:click="onConfirm">
-        \u786E\u8BA4
-      </van-button>
-    </view>
-  </van-dropdown-item>
-</van-dropdown-menu>
-
Page({
-  data: {
-    switchTitle1: '\u5305\u90AE',
-    switchTitle2: '\u56E2\u8D2D',
-    itemTitle: '\u7B5B\u9009',
-    option1: [
-      { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
-      { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },
-      { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },
-    ],
-    value1: 0,
-  },
-
-  onConfirm() {
-    this.selectComponent('#item').toggle();
-  },
-
-  onSwitch1Change({ detail }) {
-    this.setData({ switch1: detail });
-  },
-
-  onSwitch2Change({ detail }) {
-    this.setData({ switch2: detail });
-  },
-});
-

\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u989C\u8272

<van-dropdown-menu active-color="#1989fa">
-  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</van-dropdown-menu>
-

\u5411\u4E0A\u5C55\u5F00

<van-dropdown-menu direction="up">
-  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-</van-dropdown-menu>
-

\u7981\u7528\u83DC\u5355

<van-dropdown-menu>
-  <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
-  <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
-</van-dropdown-menu>
-

\u5F02\u6B65\u6253\u5F00/\u5173\u95ED

\u901A\u8FC7 before-toggle \u4E8B\u4EF6\u53EF\u4EE5\u5728\u4E0B\u62C9\u83DC\u5355\u6253\u5F00\u6216\u8005\u5173\u95ED\u524D\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\uFF0C\u5B9E\u73B0\u72B6\u6001\u53D8\u66F4\u524D\u6821\u9A8C\u3001\u5F02\u6B65\u6253\u5F00/\u5173\u95ED\u7684\u76EE\u7684

<van-dropdown-menu>
-  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" use-before-toggle bind:before-toggle="onBeforeChange" />
-</van-dropdown-menu>
-
Page({
-  data: {
-    value1: 0,
-     option1: [
-      { text: '\u5168\u90E8\u5546\u54C1', value: 0 },
-      { text: '\u65B0\u6B3E\u5546\u54C1', value: 1 },
-      { text: '\u6D3B\u52A8\u5546\u54C1', value: 2 },
-    ],
-  },
-  onBeforeChange({ detail: { status, callback }}) {
-    wx.showModal({
-      title: '\u5F02\u6B65\u6253\u5F00/\u5173\u95ED',
-      content: \`\u786E\u5B9A\u8981\${status ? '\u6253\u5F00' : '\u5173\u95ED'}\u4E0B\u62C9\u83DC\u5355\u5417\uFF1F\`,
-      success: (res) => {
-        if (res.confirm) {
-          callback(true)
-        } else if (res.cancel) {
-          callback(false)
-        }
-      },
-    })
-  }
-});
-

API

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
active-color\u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272string#ee0a24
z-index\u83DC\u5355\u680F z-index \u5C42\u7EA7number10
duration\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2number200
direction\u83DC\u5355\u5C55\u5F00\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A upstringdown
overlay\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42booleantrue
safe-area-tab-bar v1.10.14\u662F\u5426\u7559\u51FA\u5E95\u90E8 tabbar \u5B89\u5168\u8DDD\u79BBbooleanfalse
close-on-click-overlay\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355booleantrue
close-on-click-outside\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8 menu \u540E\u5173\u95ED\u83DC\u5355booleantrue
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
value\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684 valuenumber | string-
title\u83DC\u5355\u9879\u6807\u9898string\u5F53\u524D\u9009\u4E2D\u9879\u6587\u5B57
options\u9009\u9879\u6570\u7EC4Option[][]
disabled\u662F\u5426\u7981\u7528\u83DC\u5355booleanfalse
title-class\u6807\u9898\u989D\u5916\u7C7B\u540D\uFF0C\u5EFA\u8BAE\u4F7F\u7528\u81EA\u5B9A\u4E49\u6837\u5F0F item-title-class \u4EE3\u66FFstring-
popup-style\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0Fstring-
use-before-toggle v1.10.12\u662F\u5426\u5F00\u542F\u4E0B\u62C9\u83DC\u5355\u6253\u5F00\u6216\u8005\u5173\u95ED\u524D\u6821\u9A8Cbooleanfalse
root-portal v1.10.14\u662F\u5426\u4ECE\u9875\u9762\u5B50\u6811\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 >= 2.25.2 booleanfalse
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u70B9\u51FB\u9009\u9879\u5BFC\u81F4 value \u53D8\u5316\u65F6\u89E6\u53D1value
open\u6253\u5F00\u83DC\u5355\u680F\u65F6\u89E6\u53D1-
close\u5173\u95ED\u83DC\u5355\u680F\u65F6\u89E6\u53D1-
opened\u6253\u5F00\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1-
closed\u5173\u95ED\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1-
before-toggle v1.10.12\u4E0B\u62C9\u83DC\u5355\u6253\u5F00\u6216\u8005\u5173\u95ED\u524D\u89E6\u53D1\uFF0C\u9700\u8981\u5C06use-before-toggle\u5C5E\u6027\u8BBE\u7F6E\u4E3Atrueevent.detail.status: true \u6253\u5F00\u4E0B\u62C9\u83DC\u5355\uFF0Cfalse \u5173\u95ED\u4E0B\u62C9\u83DC\u5355
event.detail.callback: \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528callback(false)\u7EC8\u6B62\u4E0B\u62C9\u83DC\u5355\u72B6\u6001\u53D8\u66F4

\u901A\u8FC7 selectComponent(id) \u53EF\u8BBF\u95EE\u3002

\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
toggle\u5207\u6362\u83DC\u5355\u5C55\u793A\u72B6\u6001\uFF0C\u4F20true\u4E3A\u663E\u793A\uFF0Cfalse\u4E3A\u9690\u85CF\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CDshow?: boolean-

Option \u6570\u636E\u7ED3\u6784

\u952E\u540D\u8BF4\u660E\u7C7B\u578B
text\u6587\u5B57string
value\u6807\u8BC6\u7B26number | string
icon\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5string
\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
title-class v1.10.7\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B
\u7C7B\u540D\u8BF4\u660E
custom-class v1.10.7\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
item-title-class v1.10.7\u9009\u9879\u6837\u5F0F\u7C7B
`,18),sa=[Ys],aa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Zs,sa))}},ta={class:"van-doc-markdown-body"},na=d(`

Empty \u7A7A\u72B6\u6001

\u4ECB\u7ECD

\u7A7A\u72B6\u6001\u65F6\u7684\u5360\u4F4D\u63D0\u793A\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6\u7248\u672C\uFF0CES5\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-empty": "@vant/weapp/empty/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-empty description="\u63CF\u8FF0\u6587\u5B57" />
-

\u56FE\u7247\u7C7B\u578B

Empty \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u5360\u4F4D\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u4EE5\u5728\u4E0D\u540C\u4E1A\u52A1\u573A\u666F\u4E0B\u4F7F\u7528\u3002

<!-- \u901A\u7528\u9519\u8BEF -->
-<van-empty image="error" description="\u63CF\u8FF0\u6587\u5B57" />
-<!-- \u7F51\u7EDC\u9519\u8BEF -->
-<van-empty image="network" description="\u63CF\u8FF0\u6587\u5B57" />
-<!-- \u641C\u7D22\u63D0\u793A -->
-<van-empty image="search" description="\u63CF\u8FF0\u6587\u5B57" />
-

\u81EA\u5B9A\u4E49\u56FE\u7247

\u9700\u8981\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u5728 image \u5C5E\u6027\u4E2D\u4F20\u5165\u4EFB\u610F\u56FE\u7247 URL\u3002

<van-empty
-  class="custom-image"
-  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
-  description="\u63CF\u8FF0\u6587\u5B57"
-/>
-

\u5E95\u90E8\u5185\u5BB9

\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728 Empty \u7EC4\u4EF6\u7684\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9\u3002

<van-empty description="\u63CF\u8FF0\u6587\u5B57">
-  <van-button round type="danger" class="bottom-button">\u6309\u94AE</van-button>
-</van-empty>
-
-<style>
-  .bottom-button {
-    width: 160px;
-    height: 40px;
-  }
-</style>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
image\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A error network search\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URLstringdefault
description\u56FE\u7247\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57string-

Slots

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u5E95\u90E8\u5185\u5BB9
image\u81EA\u5B9A\u4E49\u56FE\u6807
description\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57
`,11),la=[na],ea={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ta,la))}},pa={class:"van-doc-markdown-body"},da=d(`

Field \u8F93\u5165\u6846

\u4ECB\u7ECD

\u7528\u6237\u53EF\u4EE5\u5728\u6587\u672C\u6846\u5185\u8F93\u5165\u6216\u7F16\u8F91\u6587\u5B57\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-field": "@vant/weapp/field/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-cell-group>
-  <van-field
-    value="{{ value }}"
-    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
-    border="{{ false }}"
-    bind:change="onChange"
-  />
-</van-cell-group>
-
Page({
-  data: {
-    value: '',
-  },
-
-  onChange(event) {
-    // event.detail \u4E3A\u5F53\u524D\u8F93\u5165\u7684\u503C
-    console.log(event.detail);
-  },
-});
-

\u53CC\u5411\u7ED1\u5B9A

\u6700\u4F4E\u57FA\u7840\u5E93\u7248\u672C\u5728 2.9.3 \u4EE5\u4E0A\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A\u3002

<van-cell-group>
-  <van-field
-    model:value="{{ value }}"
-    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
-    border="{{ false }}"
-  />
-</van-cell-group>
-
Page({
-  data: {
-    value: '',
-  },
-});
-

\u81EA\u5B9A\u4E49\u7C7B\u578B

\u6839\u636Etype\u5C5E\u6027\u5B9A\u4E49\u4E0D\u540C\u7C7B\u578B\u7684\u8F93\u5165\u6846\u3002

<van-cell-group>
-  <van-field
-    value="{{ username }}"
-    required
-    clearable
-    label="\u7528\u6237\u540D"
-    icon="question-o"
-    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
-    bind:click-icon="onClickIcon"
-  />
-
-  <van-field
-    value="{{ password }}"
-    type="password"
-    label="\u5BC6\u7801"
-    placeholder="\u8BF7\u8F93\u5165\u5BC6\u7801"
-    required
-    border="{{ false }}"
-  />
-</van-cell-group>
-

\u7981\u7528\u8F93\u5165\u6846

<van-cell-group>
-  <van-field
-    value="\u8F93\u5165\u6846\u5DF2\u7981\u7528"
-    label="\u7528\u6237\u540D"
-    left-icon="contact"
-    disabled
-    border="{{ false }}"
-  />
-</van-cell-group>
-

\u9519\u8BEF\u63D0\u793A

\u901A\u8FC7error\u6216\u8005error-message\u5C5E\u6027\u589E\u52A0\u5BF9\u5E94\u7684\u9519\u8BEF\u63D0\u793A\u3002

<van-cell-group>
-  <van-field
-    value="{{ username }}"
-    label="\u7528\u6237\u540D"
-    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
-    error
-  />
-  <van-field
-    value="{{ phone }}"
-    label="\u624B\u673A\u53F7"
-    placeholder="\u8BF7\u8F93\u5165\u624B\u673A\u53F7"
-    error-message="\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF"
-    border="{{ false }}"
-  />
-</van-cell-group>
-

\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F

\u53EF\u4EE5\u901A\u8FC7input-align\u5C5E\u6027\u8BBE\u7F6E\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002

<van-cell-group>
-  <van-field
-    value="{{ username3 }}"
-    label="\u7528\u6237\u540D"
-    placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
-    input-align="right"
-  />
-</van-cell-group>
-

\u9AD8\u5EA6\u81EA\u9002\u5E94

\u5BF9\u4E8E textarea\uFF0C\u53EF\u4EE5\u901A\u8FC7autosize\u5C5E\u6027\u8BBE\u7F6E\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002

<van-cell-group>
-  <van-field
-    value="{{ message }}"
-    label="\u7559\u8A00"
-    type="textarea"
-    placeholder="\u8BF7\u8F93\u5165\u7559\u8A00"
-    autosize
-    border="{{ false }}"
-  />
-</van-cell-group>
-

\u63D2\u5165\u6309\u94AE

\u901A\u8FC7 button slot \u53EF\u4EE5\u5728\u8F93\u5165\u6846\u5C3E\u90E8\u63D2\u5165\u6309\u94AE\u3002

<van-cell-group>
-  <van-field
-    value="{{ sms }}"
-    center
-    clearable
-    label="\u77ED\u4FE1\u9A8C\u8BC1\u7801"
-    placeholder="\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801"
-    border="{{ false }}"
-    use-button-slot
-  >
-    <van-button slot="button" size="small" type="primary">
-      \u53D1\u9001\u9A8C\u8BC1\u7801
-    </van-button>
-  </van-field>
-</van-cell-group>
-

\u66FF\u6362\u8F93\u5165\u6846\u503C

\u5728\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u4E2D\uFF0Cbind:input \u4E8B\u4EF6\u53EF\u4EE5\u901A\u8FC7\u8FD4\u56DE\u5B57\u7B26\u4E32\u6216\u8005\u4E00\u4E2A\u5BF9\u8C61\u6765\u66FF\u6362\u8F93\u5165\u6846\u7684\u503C\u4EE5\u53CA\u8C03\u6574\u5149\u6807\u7684\u4F4D\u7F6E\uFF0C\u5728 vant-weapp \u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8C03\u7528 change \u6216 input \u53C2\u6570\u4E2D\u7684 callback \u51FD\u6570\uFF0C\u4F20\u5165\u53C2\u6570\u6765\u5B9E\u73B0

<van-field
-  value="{{ value }}"
-  placeholder="\u8BF7\u8F93\u5165\u7528\u6237\u540D"
-  border="{{ false }}"
-  clearable
-  extra-event-params
-  bind:change="onChange"
-/>
-
Page({
-  data: {
-    value: '',
-  },
-  onChange(e) {
-    const { value, callback } = e.detail;
-
-    callback({
-      value: value + 1,
-      cursor: 0,
-    });
-  },
-});
-

\u5E38\u89C1\u95EE\u9898

\u771F\u673A\u4E0A\u4E3A\u4EC0\u4E48\u4F1A\u51FA\u73B0\u805A\u7126\u65F6 placeholder \u52A0\u7C97\u3001\u95EA\u70C1\u7684\u73B0\u8C61\uFF1F

\u7531\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u548C textarea \u7EC4\u4EF6\u662F\u539F\u751F\u7EC4\u4EF6\uFF0C\u805A\u7126\u65F6\u4F1A\u5C06\u539F\u751F\u7684\u8F93\u5165\u6846\u8986\u76D6\u5728\u5BF9\u5E94\u4F4D\u7F6E\u4E0A\uFF0C\u5BFC\u81F4\u4E86\u8FD9\u4E2A\u73B0\u8C61\u7684\u4EA7\u751F\u3002

\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B\u5FAE\u4FE1\u5F00\u653E\u793E\u533A\u3002

\u771F\u673A\u4E0A placeholder \u4E3A\u4EC0\u4E48\u4F1A\u76D6\u8FC7 popup \u7B49\u5176\u5B83\u7EC4\u4EF6\uFF1F

\u7531\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u548C textarea \u7EC4\u4EF6\u662F\u539F\u751F\u7EC4\u4EF6\uFF0C\u9075\u5FAA\u539F\u751F\u7EC4\u4EF6\u7684\u9650\u5236\uFF0C\u8BE6\u60C5\u53EF\u4EE5\u67E5\u770B\u539F\u751F\u7EC4\u4EF6\u8BF4\u660E\u3002

textarea \u7684 placeholder \u5728\u771F\u673A\u4E0A\u4E3A\u4EC0\u4E48\u4F1A\u504F\u79FB\uFF1F

\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 textarea \u7EC4\u4EF6\u5728 Android \u548C iOS \u4E2D\u9ED8\u8BA4\u6837\u5F0F\u4E0D\u540C\uFF0C\u5728 iOS \u4E2D\u4F1A\u6709\u9ED8\u8BA4\u7684 padding\uFF0C\u4E14\u65E0\u6CD5\u7F6E 0\u3002

\u540C\u65F6 placeholder-style \u5BF9 vertical-align\u3001line-height \u7B49\u5927\u91CF css \u5C5E\u6027\u90FD\u4E0D\u751F\u6548\u3002

\u8FD9\u4E00\u7CFB\u5217\u7684\u95EE\u9898\u5BFC\u81F4\u4E86 placeholder \u5728\u771F\u673A\u4E0A\u53EF\u80FD\u4F1A\u51FA\u73B0\u504F\u79FB\u3002

\u5FAE\u4FE1\u5DF2\u7ECF\u5728 2.10.0 \u57FA\u7840\u5E93\u7248\u672C\u540E\u652F\u6301\u79FB\u9664\u9ED8\u8BA4\u7684 padding\uFF0C\u4F46\u4F4E\u7248\u672C\u4ECD\u6709\u95EE\u9898\u3002\u8BE6\u60C5\u53EF\u4EE5\u67E5\u770B \u5FAE\u4FE1\u5F00\u653E\u793E\u533A\u3002

\u624B\u5199\u8F93\u5165\u6CD5\u4E3A\u4EC0\u4E48\u4F1A\u4E22\u5931\u90E8\u5206\u5B57\u7B26 / \u624B\u5199\u8F93\u5165\u6CD5\u4E3A\u4EC0\u4E48\u4E0D\u4F1A\u89E6\u53D1 input \u4E8B\u4EF6\uFF1F

\u8FD9\u662F\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u5982\u679C\u9700\u8981\u517C\u5BB9\u624B\u5199\u8F93\u5165\u6CD5\u7684\u573A\u666F\uFF0C\u53EF\u4EE5\u5728 blur \u4E8B\u4EF6\u4E2D\u53D6\u5230\u8F93\u5165\u7684\u503C\u3002

\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B\u5FAE\u4FE1\u5F00\u653E\u793E\u533A\u3002

\u5982\u4F55\u6269\u5927\u70B9\u51FB\u533A\u57DF\uFF1F\u70B9\u51FB label\u3001\u9519\u8BEF\u4FE1\u606F \u90FD\u80FD\u805A\u7126\u5524\u8D77\u952E\u76D8\u5462\uFF1F

\u5347\u7EA7\u81F3 1.10.21 \u7248\u672C\u53CA\u4EE5\u4E0A\uFF0C\u914D\u7F6E name \u5C5E\u6027\u5373\u53EF

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26\u3002\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E name \u6765\u6269\u5927\u70B9\u51FB\u533A\u57DFstring-
label\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672Cstring-
size\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A largestring-
value\u5F53\u524D\u8F93\u5165\u7684\u503Cstring | number-
type\u53EF\u8BBE\u7F6E\u4E3A\u4EFB\u610F\u539F\u751F\u7C7B\u578B, \u5982 number idcard textarea digitstringtext
fixed\u5982\u679C type \u4E3A textarea \u4E14\u5728\u4E00\u4E2A position:fixed \u7684\u533A\u57DF\uFF0C\u9700\u8981\u663E\u793A\u6307\u5B9A\u5C5E\u6027 fixed \u4E3A truebooleanfalse
focus\u83B7\u53D6\u7126\u70B9booleanfalse
border\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846booleantrue
disabled\u662F\u5426\u7981\u7528\u8F93\u5165\u6846booleanfalse
readonly\u662F\u5426\u53EA\u8BFBbooleanfalse
clearable\u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6booleanfalse
clickable\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleanfalse
required\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7booleanfalse
center\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2Dbooleanfalse
password\u662F\u5426\u662F\u5BC6\u7801\u7C7B\u578Bbooleanfalse
title-width\u6807\u9898\u5BBD\u5EA6string6.2em
maxlength\u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6number-1
placeholder\u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26string-
placeholder-style\u6307\u5B9A placeholder \u7684\u6837\u5F0Fstring-
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring-
is-link\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988booleanfalse
arrow-direction\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A left up downstring-
show-word-limit\u662F\u5426\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\uFF0C\u9700\u8981\u8BBE\u7F6Emaxlength\u5C5E\u6027booleanfalse
error\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2booleanfalse
error-message\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793Astring''
error-message-align\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightstring''
input-align\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightstringleft
autosize\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u53EA\u5BF9 textarea \u6709\u6548\uFF0C
\u53EF\u4F20\u5165\u5BF9\u8C61,\u5982 { maxHeight: 100, minHeight: 50 }\uFF0C
\u5355\u4F4D\u4E3Apx		boolean | objectfalse
left-icon\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
right-icon\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
confirm-type\u8BBE\u7F6E\u952E\u76D8\u53F3\u4E0B\u89D2\u6309\u94AE\u7684\u6587\u5B57\uFF0C\u4EC5\u5728 type='text' \u65F6\u751F\u6548stringdone
confirm-hold\u70B9\u51FB\u952E\u76D8\u53F3\u4E0B\u89D2\u6309\u94AE\u65F6\u662F\u5426\u4FDD\u6301\u952E\u76D8\u4E0D\u6536\u8D77\uFF0C\u5728 type='textarea' \u65F6\u65E0\u6548booleanfalse
hold-keyboardfocus \u65F6\uFF0C\u70B9\u51FB\u9875\u9762\u7684\u65F6\u5019\u4E0D\u6536\u8D77\u952E\u76D8booleanfalse
cursor-spacing\u8F93\u5165\u6846\u805A\u7126\u65F6\u5E95\u90E8\u4E0E\u952E\u76D8\u7684\u8DDD\u79BBnumber50
adjust-position\u952E\u76D8\u5F39\u8D77\u65F6\uFF0C\u662F\u5426\u81EA\u52A8\u4E0A\u63A8\u9875\u9762booleantrue
show-confirm-bar\u662F\u5426\u663E\u793A\u952E\u76D8\u4E0A\u65B9\u5E26\u6709\u201D\u5B8C\u6210\u201C\u6309\u94AE\u90A3\u4E00\u680F\uFF0C\u53EA\u5BF9 textarea \u6709\u6548booleantrue
selection-start\u5149\u6807\u8D77\u59CB\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-end \u642D\u914D\u4F7F\u7528number-1
selection-end\u5149\u6807\u7ED3\u675F\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-start \u642D\u914D\u4F7F\u7528number-1
auto-focus\u81EA\u52A8\u805A\u7126\uFF0C\u62C9\u8D77\u952E\u76D8booleanfalse
disable-default-padding\u662F\u5426\u53BB\u6389 iOS \u4E0B\u7684\u9ED8\u8BA4\u5185\u8FB9\u8DDD\uFF0C\u53EA\u5BF9 textarea \u6709\u6548booleantrue
cursor\u6307\u5B9A focus \u65F6\u7684\u5149\u6807\u4F4D\u7F6Enumber-1
clear-trigger v1.8.4\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C
focus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A		stringfocus
always-embed v1.9.2\u5F3A\u5236 input \u5904\u4E8E\u540C\u5C42\u72B6\u6001\uFF0C\u9ED8\u8BA4 focus \u65F6 input \u4F1A\u5207\u5230\u975E\u540C\u5C42\u72B6\u6001 (\u4EC5\u5728 iOS \u4E0B\u751F\u6548)booleanfalse
extra-event-params v1.10.12\u5F00\u542F\u4E8B\u4EF6\u589E\u5F3A\u6A21\u5F0F\uFF0C\u4F1A\u5728 input \u548C change \u4E8B\u4EF6\u989D\u5916\u63D0\u4F9B cursor \u548C keyCode \u53C2\u6570\uFF0C\u8BA1\u5212\u5728\u4E0B\u4E00\u4E2A\u5927\u7248\u672C\u4F5C\u4E3A\u9ED8\u8BA4\u884C\u4E3Abooleanfalse

Events

\u4E8B\u4EF6\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:input\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u8F93\u5165\u503C; \u5728 extra-event-params \u4E3A true \u65F6\u4E3A InputDetail
bind:change\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u8F93\u5165\u503C; \u5728 extra-event-params \u4E3A true \u65F6\u4E3A InputDetail
bind:confirm\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u8F93\u5165\u503C
bind:click-icon\u70B9\u51FB\u5C3E\u90E8\u56FE\u6807\u65F6\u89E6\u53D1-
bind:focus\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1event.detail.value: \u5F53\u524D\u8F93\u5165\u503C;
event.detail.height: \u952E\u76D8\u9AD8\u5EA6
bind:blur\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1event.detail.value: \u5F53\u524D\u8F93\u5165\u503C;
event.detail.cursor: \u6E38\u6807\u4F4D\u7F6E(\u5982\u679C type \u4E0D\u4E3A textarea\uFF0C\u503C\u4E3A 0)
bind:clear\u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1-
bind:click-input\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1-
bind:linechange\u8F93\u5165\u6846\u884C\u6570\u53D8\u5316\u65F6\u8C03\u7528\uFF0C\u53EA\u5BF9 textarea \u6709\u6548event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange\u952E\u76D8\u9AD8\u5EA6\u53D1\u751F\u53D8\u5316\u7684\u65F6\u5019\u89E6\u53D1\u6B64\u4E8B\u4EF6event.detail = { height: height, duration: duration }

InputDetail

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
value\u5F53\u524D\u8F93\u5165\u503Cstring-
cursor\u5149\u6807\u4F4D\u7F6Enumber-
keyCode\u952E\u503Cnumber-
callback\u8C03\u7528\u8BE5\u51FD\u6570\u4F20 { value: string, cursor: number } \u6765\u66FF\u6362\u8F93\u5165\u6846\u7684\u5185\u5BB9\uFF0C\u5177\u4F53\u7528\u6CD5\u53EF\u4EE5\u53C2\u8003 wx-inputfunction-

Slot

\u540D\u79F0\u8BF4\u660E
label\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u6807\u7B7E\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86label\u5C5E\u6027\u5219\u4E0D\u751F\u6548
left-icon\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807
right-icon\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807
button\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u6309\u94AE
input\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\uFF0C\u4F7F\u7528\u6B64\u63D2\u69FD\u540E\uFF0C\u4E0E\u8F93\u5165\u6846\u76F8\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u5C06\u5931\u6548

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class v1.10.21\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
label-class\u5DE6\u4FA7\u6587\u672C\u6837\u5F0F\u7C7B
input-class\u8F93\u5165\u6846\u6837\u5F0F\u7C7B
right-icon-class\u53F3\u4FA7\u56FE\u6807\u6837\u5F0F\u7C7B
`,25),ca=[da],oa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",pa,ca))}},ra={class:"van-doc-markdown-body"},ia=d(`

GoodsAction \u5546\u54C1\u5BFC\u822A

\u4ECB\u7ECD

\u7528\u4E8E\u4E3A\u5546\u54C1\u76F8\u5173\u64CD\u4F5C\u63D0\u4F9B\u4FBF\u6377\u4EA4\u4E92\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-goods-action": "@vant/weapp/goods-action/index",
-  "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
-  "van-goods-action-button": "@vant/weapp/goods-action-button/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" bind:click="onClickIcon" />
-  <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" bind:click="onClickIcon" />
-  <van-goods-action-button
-    text="\u52A0\u5165\u8D2D\u7269\u8F66"
-    type="warning"
-    bind:click="onClickButton"
-  />
-  <van-goods-action-button text="\u7ACB\u5373\u8D2D\u4E70" bind:click="onClickButton" />
-</van-goods-action>
-
Page({
-  onClickIcon() {
-    Toast('\u70B9\u51FB\u56FE\u6807');
-  },
-
-  onClickButton() {
-    Toast('\u70B9\u51FB\u6309\u94AE');
-  },
-});
-

\u63D0\u793A\u4FE1\u606F

\u8BBE\u7F6Edot\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Einfo\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002

<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" dot />
-  <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" info="5" />
-  <van-goods-action-icon icon="shop-o" text="\u5E97\u94FA" />
-  <van-goods-action-button text="\u52A0\u5165\u8D2D\u7269\u8F66" type="warning" />
-  <van-goods-action-button text="\u7ACB\u5373\u8D2D\u4E70" />
-</van-goods-action>
-

\u81EA\u5B9A\u4E49\u6309\u94AE\u989C\u8272

\u901A\u8FC7color\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165linear-gradient\u6E10\u53D8\u8272\u3002

<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" />
-  <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" info="5" />
-  <van-goods-action-icon icon="shop-o" text="\u5E97\u94FA" />
-  <van-goods-action-button color="#be99ff" text="\u52A0\u5165\u8D2D\u7269\u8F66" type="warning" />
-  <van-goods-action-button color="#7232dd" text="\u7ACB\u5373\u8D2D\u4E70" />
-</van-goods-action>
-

\u6734\u7D20\u6309\u94AE

\u901A\u8FC7plain\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002

<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="\u5BA2\u670D" />
-  <van-goods-action-icon icon="cart-o" text="\u8D2D\u7269\u8F66" info="5" />
-  <van-goods-action-icon icon="shop-o" text="\u5E97\u94FA" />
-  <van-goods-action-button color="#7232dd" text="\u52A0\u5165\u8D2D\u7269" type="warning" />
-  <van-goods-action-button plain color="#7232dd" text="\u7ACB\u5373\u8D2D\u4E70" />
-</van-goods-action>
-

API

GoodsAction Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
safe-area-inset-bottom\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BBbooleantrue

GoodsActionIcon Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
text\u6309\u94AE\u6587\u5B57string-
icon\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u89C1icon\u7EC4\u4EF6string-
info\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606Fstring | number-
color v1.10.15\u56FE\u6807\u989C\u8272stringinherit
size\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px\uFF0C2em\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number-
url\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740string-
link-type\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunchstringnavigateTo
id\u6807\u8BC6\u7B26string-
disabled\u662F\u5426\u7981\u7528\u6309\u94AEbooleanfalse
loading\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001booleanfalse
open-type\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863string-
app-parameter\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570string-
lang\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C
zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587		stringen
session-from\u4F1A\u8BDD\u6765\u6E90string-
send-message-title\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898string\u5F53\u524D\u6807\u9898
send-message-path\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84string\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84
send-message-imgsendMessageImgstring\u622A\u56FE
show-message-card\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247stringfalse
class-prefix v1.10.1\u7C7B\u540D\u524D\u7F00stringvan-icon

GoodsActionButton Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
text\u6309\u94AE\u6587\u5B57string-
color\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 linear-gradient \u6E10\u53D8\u8272string-
url\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740string-
link-type\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunchstringnavigateTo
id\u6807\u8BC6\u7B26string-
type\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary warning dangerstringdanger
plain\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AEbooleanfalse
size\u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A normal large small ministringnormal
disabled\u662F\u5426\u7981\u7528\u6309\u94AEbooleanfalse
loading\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001booleanfalse
open-type\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863string-
app-parameter\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570string-
lang\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C
zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587		stringen
session-from\u4F1A\u8BDD\u6765\u6E90string-
send-message-title\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898string\u5F53\u524D\u6807\u9898
send-message-path\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84string\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84
send-message-imgsendMessageImgstring\u622A\u56FE
show-message-card\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247stringfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03-

GoodsActionIcon Slot

\u540D\u79F0\u8BF4\u660E
icon\u81EA\u5B9A\u4E49\u56FE\u6807

GoodsActionButton Slot

\u540D\u79F0\u8BF4\u660E
-\u6309\u94AE\u663E\u793A\u5185\u5BB9

GoodsActionIcon \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
icon-class\u56FE\u6807\u6837\u5F0F\u7C7B
text-class\u6587\u5B57\u6837\u5F0F\u7C7B
info-class v1.10.20\u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u6837\u5F0F\u7C7B

GoodsActionButton \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,17),ha=[ia],ua={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ra,ha))}},ga={class:"van-doc-markdown-body"},ja=d(`

Grid \u5BAB\u683C

\u4ECB\u7ECD

\u5BAB\u683C\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u628A\u9875\u9762\u5206\u9694\u6210\u7B49\u5BBD\u5EA6\u7684\u533A\u5757\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-grid": "@vant/weapp/grid/index",
-  "van-grid-item": "@vant/weapp/grid-item/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

\u901A\u8FC7icon\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u5185\u7684\u56FE\u6807\uFF0Ctext\u5C5E\u6027\u8BBE\u7F6E\u6587\u5B57\u5185\u5BB9\u3002

<van-grid>
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
-</van-grid>
-

\u81EA\u5B9A\u4E49\u5217\u6570

\u9ED8\u8BA4\u4E00\u884C\u5C55\u793A\u56DB\u4E2A\u683C\u5B50\uFF0C\u53EF\u4EE5\u901A\u8FC7column-num\u81EA\u5B9A\u4E49\u5217\u6570\u3002

<van-grid column-num="3">
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 6 }}" />
-</van-grid>
-

\u81EA\u5B9A\u4E49\u5185\u5BB9

\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u683C\u5B50\u5C55\u793A\u7684\u5185\u5BB9\u3002

<van-grid column-num="3" border="{{ false }}">
-  <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
-    <image
-      style="width: 100%; height: 90px;"
-      src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg"
-    />
-  </van-grid-item>
-</van-grid>
-

\u6B63\u65B9\u5F62\u683C\u5B50

\u8BBE\u7F6Esquare\u5C5E\u6027\u540E\uFF0C\u683C\u5B50\u7684\u9AD8\u5EA6\u4F1A\u548C\u5BBD\u5EA6\u4FDD\u6301\u4E00\u81F4\u3002

<van-grid square>
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 8 }}" />
-</van-grid>
-

\u683C\u5B50\u95F4\u8DDD

\u901A\u8FC7gutter\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u8DDD\u79BB\u3002

<van-grid gutter="{{ 10 }}">
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 8 }}" />
-</van-grid>
-

\u5185\u5BB9\u6A2A\u6392

\u5C06direction\u5C5E\u6027\u8BBE\u7F6E\u4E3Ahorizontal\uFF0C\u53EF\u4EE5\u8BA9\u5BAB\u683C\u7684\u5185\u5BB9\u5448\u6A2A\u5411\u6392\u5217\u3002

<van-grid direction="horizontal" column-num="2">
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
-  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
-</van-grid>
-

\u9875\u9762\u8DF3\u8F6C

\u53EF\u4EE5\u901A\u8FC7url\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7link-type\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002

<van-grid clickable column-num="2">
-  <van-grid-item
-    icon="home-o"
-    link-type="navigateTo"
-    url="/pages/dashboard/index"
-    text="Navigate \u8DF3\u8F6C"
-  />
-  <van-grid-item
-    icon="search"
-    link-type="reLaunch"
-    url="/pages/dashboard/index"
-    text="ReLaunch \u8DF3\u8F6C"
-  />
-</van-grid>
-

\u63D0\u793A\u4FE1\u606F

\u8BBE\u7F6Edot\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Ebadge\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002

<van-grid column-num="2">
-  <van-grid-item icon="home-o" text="\u6587\u5B57" dot />
-  <van-grid-item icon="search" text="\u6587\u5B57" badge="99+" />
-</van-grid>
-

API

Grid Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
column-num\u5217\u6570number4
icon-size v1.3.2\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring28px
gutter\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number0
border\u662F\u5426\u663E\u793A\u8FB9\u6846booleantrue
center\u662F\u5426\u5C06\u683C\u5B50\u5185\u5BB9\u5C45\u4E2D\u663E\u793Abooleantrue
square\u662F\u5426\u5C06\u683C\u5B50\u56FA\u5B9A\u4E3A\u6B63\u65B9\u5F62booleanfalse
clickable\u662F\u5426\u5F00\u542F\u683C\u5B50\u70B9\u51FB\u53CD\u9988booleanfalse
direction\u683C\u5B50\u5185\u5BB9\u6392\u5217\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontalstringvertical
reverse v1.7.0\u662F\u5426\u8C03\u6362\u56FE\u6807\u548C\u6587\u672C\u7684\u4F4D\u7F6Ebooleanfalse
use-slot\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FDbooleanfalse

Grid \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B

GridItem Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
text\u6587\u5B57string-
icon\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
icon-color\u56FE\u6807\u989C\u8272string-
icon-prefix v1.7.0\u7B2C\u4E09\u65B9\u56FE\u6807\u524D\u7F00stringvan-icon
dot\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9booleanfalse
badge\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9string | number-
url\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740string-
link-type\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:click\u70B9\u51FB\u683C\u5B50\u65F6\u89E6\u53D1-

GridItem Slots

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u5BAB\u683C\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6Euse-slot\u5C5E\u6027
icon\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86use-slot\u6216\u8005icon\u5C5E\u6027\u5219\u4E0D\u751F\u6548
text\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86use-slot\u6216\u8005text\u5C5E\u6027\u5219\u4E0D\u751F\u6548

GridItem \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
content-class\u5185\u5BB9\u6837\u5F0F\u7C7B
icon-class\u56FE\u6807\u6837\u5F0F\u7C7B
text-class\u6587\u672C\u6837\u5F0F\u7C7B
`,19),ma=[ja],ba={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ga,ma))}},va={class:"van-doc-markdown-body"},qa=d(`

Icon \u56FE\u6807

\u4ECB\u7ECD

\u57FA\u4E8E\u5B57\u4F53\u7684\u56FE\u6807\u96C6\uFF0C\u53EF\u4EE5\u901A\u8FC7 Icon \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u5728\u5176\u4ED6\u7EC4\u4EF6\u4E2D\u901A\u8FC7 icon \u5C5E\u6027\u5F15\u7528\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-icon": "@vant/weapp/icon/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

Icon\u7684name\u5C5E\u6027\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\u3002

<van-icon name="close" />
-<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
-

\u63D0\u793A\u4FE1\u606F

\u8BBE\u7F6Edot\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Einfo\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002

<van-icon name="chat" dot />
-<van-icon name="chat" info="9" />
-<van-icon name="chat" info="99+" />
-

\u56FE\u6807\u989C\u8272

\u8BBE\u7F6Ecolor\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u989C\u8272\u3002

<van-icon name="chat" color="red" />
-

\u56FE\u6807\u5927\u5C0F

\u8BBE\u7F6Esize\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u5927\u5C0F\u3002

<van-icon name="chat" size="50px" />
-

\u81EA\u5B9A\u4E49\u56FE\u6807

\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u53EF\u4EE5\u5F15\u5165\u7B2C\u4E09\u65B9 iconfont \u5BF9\u5E94\u7684\u5B57\u4F53\u6587\u4EF6\u548C CSS \u6587\u4EF6\uFF0C\u4E4B\u540E\u5C31\u53EF\u4EE5\u5728 Icon \u7EC4\u4EF6\u4E2D\u76F4\u63A5\u4F7F\u7528\u3002\u4F8B\u5982\uFF0C\u53EF\u4EE5\u5728 app.wxss \u6587\u4EF6\u4E2D\u5F15\u5165\u3002

/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */
-@font-face {
-  font-family: 'my-icon';
-  src: url('./my-icon.ttf') format('truetype');
-}
-
-.my-icon {
-  font-family: 'my-icon';
-}
-
-.my-icon-extra::before {
-  content: '\\e626';
-}
-
<!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon -->
-<van-icon class-prefix="my-icon" name="extra" />
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5string-
dot\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9booleanfalse
info\u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u63D0\u793Astring | number-
color\u56FE\u6807\u989C\u8272stringinherit
size v1.10.20\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px\uFF0C2em\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | numberinherit
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring-
class-prefix\u7C7B\u540D\u524D\u7F00stringvan-icon

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click\u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
info-class\u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u6837\u5F0F\u7C7B

\u5E38\u89C1\u95EE\u9898

\u5F00\u53D1\u8005\u5DE5\u5177\u4E0A\u63D0\u793A Failed to load font \u662F\u4EC0\u4E48\u60C5\u51B5\uFF1F

\u8FD9\u4E2A\u662F\u5F00\u53D1\u8005\u5DE5\u5177\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u53EF\u4EE5\u5FFD\u7565\uFF0C\u5177\u4F53\u53EF\u4EE5\u67E5\u770B\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863 - \u6CE8\u610F\u4E8B\u9879\u7B2C 5 \u6761\u3002

`,15),fa=[qa],ya={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",va,fa))}},_a={class:"van-doc-markdown-body"},xa=d(`

Image \u56FE\u7247

\u4ECB\u7ECD

\u589E\u5F3A\u7248\u7684 img \u6807\u7B7E\uFF0C\u63D0\u4F9B\u591A\u79CD\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u3001\u52A0\u8F7D\u4E2D\u63D0\u793A\u3001\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-image": "@vant/weapp/image/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u57FA\u7840\u7528\u6CD5\u4E0E\u539F\u751F image \u6807\u7B7E\u4E00\u81F4\uFF0C\u53EF\u4EE5\u8BBE\u7F6Esrc\u3001width\u3001height\u7B49\u539F\u751F\u5C5E\u6027\u3002

<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
-

\u586B\u5145\u6A21\u5F0F

\u901A\u8FC7fit\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1\u4E0B\u65B9\u8868\u683C\u3002

<van-image
-  width="10rem"
-  height="10rem"
-  fit="contain"
-  src="https://img.yzcdn.cn/vant/cat.jpeg"
-/>
-

\u5706\u5F62\u56FE\u7247

\u901A\u8FC7round\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u53D8\u5706\uFF0C\u6CE8\u610F\u5F53\u56FE\u7247\u5BBD\u9AD8\u4E0D\u76F8\u7B49\u4E14fit\u4E3Acontain\u6216scale-down\u65F6\uFF0C\u5C06\u65E0\u6CD5\u586B\u5145\u4E00\u4E2A\u5B8C\u6574\u7684\u5706\u5F62\u3002

<van-image
-  round
-  width="10rem"
-  height="10rem"
-  src="https://img.yzcdn.cn/vant/cat.jpeg"
-/>
-

\u56FE\u7247\u61D2\u52A0\u8F7D

\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u5728\u5373\u5C06\u8FDB\u5165\u4E00\u5B9A\u8303\u56F4\uFF08\u4E0A\u4E0B\u4E09\u5C4F\uFF09\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u3002

<van-image
-  width="100"
-  height="100"
-  lazy-load
-  src="https://img.yzcdn.cn/vant/cat.jpeg"
-/>
-

\u52A0\u8F7D\u4E2D\u63D0\u793A

Image\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u4E2D\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7loading\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-image use-loading-slot>
-  <van-loading slot="loading" type="spinner" size="20" vertical />
-</van-image>
-

\u52A0\u8F7D\u5931\u8D25\u63D0\u793A

Image\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7error\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-image use-error-slot>
-  <text slot="error">\u52A0\u8F7D\u5931\u8D25</text>
-</van-image>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
src\u56FE\u7247\u94FE\u63A5string-
fit\u56FE\u7247\u586B\u5145\u6A21\u5F0Fstringfill
alt\u66FF\u4EE3\u6587\u672Cstring-
width\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number-
height\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number-
radius\u5706\u89D2\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number0
round\u662F\u5426\u663E\u793A\u4E3A\u5706\u5F62booleanfalse
lazy-load\u662F\u5426\u61D2\u52A0\u8F7Dbooleanfalse
webp v1.10.11\u662F\u5426\u89E3\u6790 webp \u683C\u5F0Fbooleanfalse
show-error\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u63D0\u793Abooleantrue
show-loading\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u4E2D\u63D0\u793Abooleantrue
use-error-slot\u662F\u5426\u4F7F\u7528 error \u63D2\u69FDbooleanfalse
use-loading-slot\u662F\u5426\u4F7F\u7528 loading \u63D2\u69FDbooleanfalse
show-menu-by-longpress\u662F\u5426\u5F00\u542F\u957F\u6309\u56FE\u7247\u663E\u793A\u8BC6\u522B\u5C0F\u7A0B\u5E8F\u7801\u83DC\u5355booleanfalse

\u56FE\u7247\u586B\u5145\u6A21\u5F0F \b

\u540D\u79F0\u542B\u4E49
contain\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u957F\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765
cover\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u77ED\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765\uFF0C\u88C1\u526A\u957F\u8FB9
fill\u62C9\u4F38\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u586B\u6EE1\u5143\u7D20
widthFix\u7F29\u653E\u6A21\u5F0F\uFF0C\u5BBD\u5EA6\u4E0D\u53D8\uFF0C\u9AD8\u5EA6\u81EA\u52A8\u53D8\u5316\uFF0C\u4FDD\u6301\u539F\u56FE\u5BBD\u9AD8\u6BD4\u4E0D\u53D8
heightFix\u7F29\u653E\u6A21\u5F0F\uFF0C\u9AD8\u5EA6\u4E0D\u53D8\uFF0C\u5BBD\u5EA6\u81EA\u52A8\u53D8\u5316\uFF0C\u4FDD\u6301\u539F\u56FE\u5BBD\u9AD8\u6BD4\u4E0D\u53D8
none\u4FDD\u6301\u56FE\u7247\u539F\u6709\u5C3A\u5BF8

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:click\u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1event: Event
bind:load\u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1event: Event
bind:error\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u65F6\u89E6\u53D1event: Event

Slots

\u540D\u79F0\u8BF4\u660E
loading\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D\u7684\u63D0\u793A\u5185\u5BB9
error\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u65F6\u7684\u63D0\u793A\u5185\u5BB9

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
image-class\u56FE\u7247\u6837\u5F0F\u7C7B
loading-classloading \u6837\u5F0F\u7C7B
error-classerror \u6837\u5F0F\u7C7B
`,16),wa=[xa],ka={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",_a,wa))}},za={class:"van-doc-markdown-body"},Ca=d(`

IndexBar \u7D22\u5F15\u680F

\u4ECB\u7ECD

\u7528\u4E8E\u5217\u8868\u7684\u7D22\u5F15\u5206\u7C7B\u663E\u793A\u548C\u5FEB\u901F\u5B9A\u4F4D\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-index-bar": "@vant/weapp/index-bar/index",
-  "van-index-anchor": "@vant/weapp/index-anchor/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u70B9\u51FB\u7D22\u5F15\u680F\u65F6\uFF0C\u4F1A\u81EA\u52A8\u8DF3\u8F6C\u5230\u5BF9\u5E94\u7684IndexAnchor\u951A\u70B9\u4F4D\u7F6E\u3002

<van-index-bar>
-  <view>
-    <van-index-anchor index="A" />
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-  </view>
-
-  <view>
-    <van-index-anchor index="B" />
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-  </view>
-
-  ...
-</van-index-bar>
-

\u81EA\u5B9A\u4E49\u7D22\u5F15\u5217\u8868

\u53EF\u4EE5\u901A\u8FC7index-list\u5C5E\u6027\u81EA\u5B9A\u4E49\u5C55\u793A\u7684\u7D22\u5F15\u5B57\u7B26\u5217\u8868\u3002

<van-index-bar index-list="{{ indexList }}">
-  <view>
-    <van-index-anchor index="1">\u6807\u98981</van-index-anchor>
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-  </view>
-
-  <view>
-    <van-index-anchor index="2">\u6807\u98982</van-index-anchor>
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-    <van-cell title="\u6587\u672C" />
-  </view>
-
-  ...
-</van-index-bar>
-
Page({
-  data: {
-    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-  },
-});
-

API

IndexBar Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
index-list\u7D22\u5F15\u5B57\u7B26\u5217\u8868string[] | number[]A-Z-
z-indexz-index \u5C42\u7EA7number1-
sticky\u662F\u5426\u5F00\u542F\u951A\u70B9\u81EA\u52A8\u5438\u9876booleantrue-
sticky-offset-top\u951A\u70B9\u81EA\u52A8\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BBnumber0-
highlight-color\u7D22\u5F15\u5B57\u7B26\u9AD8\u4EAE\u989C\u8272string#07c160-

IndexAnchor Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
use-slot\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FDbooleanfalse-
index\u7D22\u5F15\u5B57\u7B26string | number--

IndexBar Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
select\u9009\u4E2D\u5B57\u7B26\u65F6\u89E6\u53D1index: \u7D22\u5F15\u5B57\u7B26

IndexAnchor Slots

\u540D\u79F0\u8BF4\u660E
-\u951A\u70B9\u4F4D\u7F6E\u663E\u793A\u5185\u5BB9\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u5B57\u7B26

\u5E38\u89C1\u95EE\u9898

\u5D4C\u5957\u5728\u6EDA\u52A8\u5143\u7D20\u4E2D IndexAnchor \u5931\u6548\uFF1F

\u7531\u4E8E <IndexBar /> \u5185\u90E8\u4F7F\u7528 wx.pageScrollTo \u6EDA\u52A8\u5230\u6307\u5B9A\u4F4D\u7F6E\uFF0C\u56E0\u6B64\u53EA\u652F\u6301\u9875\u9762\u7EA7\u6EDA\u52A8\uFF0C\u65E0\u6CD5\u5728\u6EDA\u52A8\u5143\u7D20\u4E2D\u5D4C\u5957\u4F7F\u7528\uFF0C\u4F8B\u5982\uFF1Aview \u4F7F\u7528 overflow: scroll; \u6216\u8005 scroll-view\uFF0C\u5177\u4F53\u53EF\u67E5\u770B\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863\u3002\u5386\u53F2 issue: #4252

`,13),Pa=[Ca],Sa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",za,Pa))}},Da={class:"van-doc-markdown-body"},Ia=d(`

Loading \u52A0\u8F7D

\u4ECB\u7ECD

\u52A0\u8F7D\u56FE\u6807\uFF0C\u7528\u4E8E\u8868\u793A\u52A0\u8F7D\u4E2D\u7684\u8FC7\u6E21\u72B6\u6001\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-loading": "@vant/weapp/loading/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u52A0\u8F7D\u7C7B\u578B

<van-loading /> <van-loading type="spinner" />
-

\u81EA\u5B9A\u4E49\u989C\u8272

<van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
-

\u52A0\u8F7D\u6587\u6848

<van-loading size="24px">\u52A0\u8F7D\u4E2D...</van-loading>
-

\u5782\u76F4\u6392\u5217

<van-loading size="24px" vertical>\u52A0\u8F7D\u4E2D...</van-loading>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
color\u989C\u8272string#c9c9c9
type\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A spinnerstringcircular
size\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxstring | number30px
text-size v1.0.0\u6587\u5B57\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A\u4E3A pxstring | number14px
vertical v1.0.0\u662F\u5426\u5782\u76F4\u6392\u5217\u56FE\u6807\u548C\u6587\u5B57\u5185\u5BB9booleanfalse

Slots

\u540D\u79F0\u8BF4\u660E
-\u52A0\u8F7D\u6587\u6848

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,12),$a=[Ia],Ta={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Da,$a))}},Aa={class:"van-doc-markdown-body"},Ea=d(`

NavBar \u5BFC\u822A\u680F

\u4ECB\u7ECD

\u4E3A\u9875\u9762\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\uFF0C\u5E38\u7528\u4E8E\u9875\u9762\u9876\u90E8\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-nav-bar": "@vant/weapp/nav-bar/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-nav-bar
-  title="\u6807\u9898"
-  left-text="\u8FD4\u56DE"
-  right-text="\u6309\u94AE"
-  left-arrow
-  bind:click-left="onClickLeft"
-  bind:click-right="onClickRight"
-/>
-
Page({
-  onClickLeft() {
-    wx.showToast({ title: '\u70B9\u51FB\u8FD4\u56DE', icon: 'none' });
-  },
-  onClickRight() {
-    wx.showToast({ title: '\u70B9\u51FB\u6309\u94AE', icon: 'none' });
-  },
-});
-

\u9AD8\u7EA7\u7528\u6CD5

\u901A\u8FC7 slot \u5B9A\u5236\u5185\u5BB9\u3002

<van-nav-bar title="\u6807\u9898" left-text="\u8FD4\u56DE" left-arrow>
-  <van-icon name="search" slot="right" />
-</van-nav-bar>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u6807\u9898string''
left-text\u5DE6\u4FA7\u6587\u6848string''
right-text\u53F3\u4FA7\u6587\u6848string''
left-arrow\u662F\u5426\u663E\u793A\u5DE6\u4FA7\u7BAD\u5934booleanfalse
fixed\u662F\u5426\u56FA\u5B9A\u5728\u9876\u90E8booleanfalse
placeholder\u56FA\u5B9A\u5728\u9876\u90E8\u65F6\u662F\u5426\u5F00\u542F\u5360\u4F4Dbooleanfalse
border\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846booleantrue
z-index\u5143\u7D20 z-indexnumber1
custom-style\u6839\u8282\u70B9\u81EA\u5B9A\u4E49\u6837\u5F0Fstring-
safe-area-inset-top\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09booleantrue

Slot

\u540D\u79F0\u8BF4\u660E
title\u81EA\u5B9A\u4E49\u6807\u9898
left\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u533A\u57DF\u5185\u5BB9
right\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click-left\u70B9\u51FB\u5DE6\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1-
bind:click-right\u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
title-class\u6807\u9898\u6837\u5F0F\u7C7B
`,11),Fa=[Ea],Ba={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Aa,Fa))}},Ra={class:"van-doc-markdown-body"},Na=d(`

NoticeBar \u901A\u77E5\u680F

\u4ECB\u7ECD

\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u5C55\u793A\u4E00\u7EC4\u6D88\u606F\u901A\u77E5\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-notice-bar": "@vant/weapp/notice-bar/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-notice-bar
-  left-icon="volume-o"
-  text="\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002"
-/>
-

\u6EDA\u52A8\u64AD\u653E

\u901A\u77E5\u680F\u7684\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u4F1A\u81EA\u52A8\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u901A\u8FC7 scrollable \u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u8BE5\u884C\u4E3A\u3002

<!-- \u6587\u5B57\u8F83\u77ED\u65F6\uFF0C\u901A\u8FC7\u8BBE\u7F6E scrollable \u5C5E\u6027\u5F00\u542F\u6EDA\u52A8\u64AD\u653E -->
-<van-notice-bar scrollable text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002" />
-
-<!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E -->
-<van-notice-bar
-  scrollable="{{ false }}"
-  text="\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002"
-/>
-

\u591A\u884C\u5C55\u793A

\u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E wrapable \u5C5E\u6027\u6765\u5F00\u542F\u591A\u884C\u5C55\u793A\u3002

<van-notice-bar
-  wrapable
-  scrollable="{{ false }}"
-  text="\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002"
-/>
-

\u901A\u77E5\u680F\u6A21\u5F0F

\u901A\u77E5\u680F\u652F\u6301 closeable \u548C link \u4E24\u79CD\u6A21\u5F0F\u3002

<!-- closeable \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u5173\u95ED\u6309\u94AE -->
-<van-notice-bar mode="closeable" text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002" />
-
-<!-- link \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u94FE\u63A5\u7BAD\u5934 -->
-<van-notice-bar mode="link" text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002" />
-

\u81EA\u5B9A\u4E49\u6837\u5F0F

\u901A\u8FC7 color \u5C5E\u6027\u8BBE\u7F6E\u6587\u672C\u989C\u8272\uFF0C\u901A\u8FC7 background \u5C5E\u6027\u8BBE\u7F6E\u80CC\u666F\u8272\u3002

<van-notice-bar
-  color="#1989fa"
-  background="#ecf9ff"
-  left-icon="info-o"
-  text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002"
-/>
-

\u81EA\u5B9A\u4E49\u6EDA\u52A8\u901F\u7387

\u4F7F\u7528speed\u5C5E\u6027\u63A7\u5236\u6EDA\u52A8\u901F\u7387\u3002

<van-notice-bar
-  text="{{ text }}"
-  speed="{{speedValue}}"
-  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
-/>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
mode\u901A\u77E5\u680F\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A closeable linkstring''
text\u901A\u77E5\u6587\u672C\u5185\u5BB9string''
color\u901A\u77E5\u6587\u672C\u989C\u8272string#ed6a0c
background\u6EDA\u52A8\u6761\u80CC\u666Fstring#fffbe8
left-icon\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5string-
delay\u52A8\u753B\u5EF6\u8FDF\u65F6\u95F4 (ms)number1
speed\u6EDA\u52A8\u901F\u7387 (px/s)number60
scrollable\u662F\u5426\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u9ED8\u8BA4\u5F00\u542Fboolean-
wrapable\u662F\u5426\u5F00\u542F\u6587\u672C\u6362\u884C\uFF0C\u53EA\u5728\u7981\u7528\u6EDA\u52A8\u65F6\u751F\u6548booleanfalse
open-type\u5FAE\u4FE1\u5F00\u653E\u80FD\u529Bstringnavigate

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click\u70B9\u51FB\u901A\u77E5\u680F\u65F6\u89E6\u53D1event: Event
bind:close\u5173\u95ED\u901A\u77E5\u680F\u65F6\u89E6\u53D1event: Event

Slot

\u540D\u79F0\u8BF4\u660E
-\u901A\u77E5\u6587\u672C\u5185\u5BB9\uFF0C\u4EC5\u5728 text \u5C5E\u6027\u4E3A\u7A7A\u65F6\u6709\u6548
left-icon\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807
right-icon\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--notice-bar-height40px-
--notice-bar-padding0 var(--van-padding-md)-
--notice-bar-wrapable-paddingvar(--van-padding-xs) var(--van-padding-md)-
--notice-bar-text-colorvar(--van-orange-dark)-
--notice-bar-font-sizevar(--van-font-size-md)-
--notice-bar-line-height24px-
--notice-bar-background-colorvar(--van-orange-light)-
--notice-bar-icon-size16px-
--notice-bar-icon-min-width24px-
`,16),Ma=[Na],La={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ra,Ma))}},Va={class:"van-doc-markdown-body"},Ua=d(`

Notify \u6D88\u606F\u63D0\u793A

\u4ECB\u7ECD

\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A\u6D88\u606F\u63D0\u793A\uFF0C\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-notify": "@vant/weapp/notify/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

import Notify from '@vant/weapp/notify/notify';
-
-Notify('\u901A\u77E5\u5185\u5BB9');
-
<!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u5BF9\u5E94\u7684\u8282\u70B9 -->
-<van-notify id="van-notify" />
-

\u901A\u77E5\u7C7B\u578B

\u652F\u6301primary\u3001success\u3001warning\u3001danger\u56DB\u79CD\u901A\u77E5\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3Adanger\u3002

// \u4E3B\u8981\u901A\u77E5
-Notify({ type: 'primary', message: '\u901A\u77E5\u5185\u5BB9' });
-
-// \u6210\u529F\u901A\u77E5
-Notify({ type: 'success', message: '\u901A\u77E5\u5185\u5BB9' });
-
-// \u5371\u9669\u901A\u77E5
-Notify({ type: 'danger', message: '\u901A\u77E5\u5185\u5BB9' });
-
-// \u8B66\u544A\u901A\u77E5
-Notify({ type: 'warning', message: '\u901A\u77E5\u5185\u5BB9' });
-

\u81EA\u5B9A\u4E49\u901A\u77E5

\u81EA\u5B9A\u4E49\u6D88\u606F\u901A\u77E5\u7684\u989C\u8272\u548C\u5C55\u793A\u65F6\u957F\u3002

Notify({
-  message: '\u81EA\u5B9A\u4E49\u989C\u8272',
-  color: '#ad0000',
-  background: '#ffe1e1',
-});
-
-Notify({
-  message: '\u81EA\u5B9A\u4E49\u65F6\u957F',
-  duration: 1000,
-});
-

\u81EA\u5B9A\u4E49\u9009\u62E9\u5668

Notify({
-  message: '\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668',
-  duration: 1000,
-  selector: '#custom-selector',
-});
-
<!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u81EA\u5B9A\u4E49\u8282\u70B9 -->
-<van-notify id="custom-selector" />
-

API

\u65B9\u6CD5

\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
Notify\u5C55\u793A\u63D0\u793Aoptions | messagenotify \u5B9E\u4F8B
Notify.clear\u5173\u95ED\u63D0\u793Aoptionsvoid

Options

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
type v1.0.0\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success warningstringdanger
message v1.0.0\u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7\\n\u6362\u884Cstring''
duration\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Cnotify \u4E0D\u4F1A\u6D88\u5931number3000
selector\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668stringvan-notify
color\u5B57\u4F53\u989C\u8272string#fff
top\u9876\u90E8\u8DDD\u79BBnumber0
background\u80CC\u666F\u989C\u8272string-
context\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587object\u5F53\u524D\u9875\u9762
onClick\u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570Function-
onOpened\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570Function-
onClose\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570Function-
safeAreaInsetTop\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09booleanfalse
`,11),Oa=[Ua],Ga={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Va,Oa))}},Wa={class:"van-doc-markdown-body"},Ha=d(`

Overlay \u906E\u7F69\u5C42

\u4ECB\u7ECD

\u521B\u5EFA\u4E00\u4E2A\u906E\u7F69\u5C42\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-overlay": "@vant/weapp/overlay/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-button type="primary" bind:click="onClickShow">\u663E\u793A\u906E\u7F69\u5C42</van-button>
-<van-overlay show="{{ show }}" bind:click="onClickHide" />
-
Page({
-  data: {
-    show: false,
-  },
-
-  onClickShow() {
-    this.setData({ show: true });
-  },
-
-  onClickHide() {
-    this.setData({ show: false });
-  },
-});
-

\u5D4C\u5165\u5185\u5BB9

\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728\u906E\u7F69\u5C42\u4E0A\u5D4C\u5165\u4EFB\u610F\u5185\u5BB9\u3002

<van-button type="primary" bind:click="onClickShow">\u5D4C\u5165\u5185\u5BB9</van-button>
-<van-overlay show="{{ show }}" bind:click="onClickHide">
-  <view class="wrapper">
-    <view class="block" catch:tap="noop" />
-  </view>
-</van-overlay>
-
Page({
-  data: {
-    show: false,
-  },
-
-  onClickShow() {
-    this.setData({ show: true });
-  },
-
-  onClickHide() {
-    this.setData({ show: false });
-  },
-
-  noop() {},
-});
-
.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.block {
-  width: 120px;
-  height: 120px;
-  background-color: #fff;
-}
-

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
show\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42booleanfalse
z-indexz-index \u5C42\u7EA7string | number1
duration\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2string | number0.3
class-name\u81EA\u5B9A\u4E49\u7C7B\u540Dstring-
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring-
lock-scroll v1.7.3\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8\uFF0C\u9501\u5B9A\u65F6\u8499\u5C42\u91CC\u7684\u5185\u5BB9\u4E5F\u5C06\u65E0\u6CD5\u6EDA\u52A8booleantrue
root-portal v1.10.14\u662F\u5426\u4ECE\u9875\u9762\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 >= 2.25.2 booleanfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:click\u70B9\u51FB\u65F6\u89E6\u53D1-

Slots

\u540D\u79F0\u8BF4\u660E
-\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u7528\u4E8E\u5728\u906E\u7F69\u5C42\u4E0A\u65B9\u5D4C\u5165\u5185\u5BB9

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,10),Ka=[Ha],Qa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Wa,Ka))}},Ja={class:"van-doc-markdown-body"},Xa=d(`

Panel \u9762\u677F

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-panel": "@vant/weapp/panel/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u9762\u677F\u53EA\u662F\u4E00\u4E2A\u5BB9\u5668\uFF0C\u91CC\u9762\u53EF\u4EE5\u653E\u5165\u81EA\u5B9A\u4E49\u7684\u5185\u5BB9\u3002

<van-panel title="\u6807\u9898" desc="\u63CF\u8FF0\u4FE1\u606F" status="\u72B6\u6001">
-  <view>\u5185\u5BB9</view>
-</van-panel>
-

\u9AD8\u7EA7\u7528\u6CD5

\u4F7F\u7528slot\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-panel title="\u6807\u9898" desc="\u63CF\u8FF0\u4FE1\u606F" status="\u72B6\u6001">
-  <view>\u5185\u5BB9</view>
-  <view slot="footer">
-    <van-button size="small">\u6309\u94AE</van-button>
-    <van-button size="small" type="danger">\u6309\u94AE</van-button>
-  </view>
-</van-panel>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u6807\u9898string-
desc\u63CF\u8FF0string-
status\u72B6\u6001string-

Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u5185\u5BB9
header\u81EA\u5B9A\u4E49 header\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title\u3001desc\u3001status\u5C5E\u6027\u5219\u4E0D\u751F\u6548
footer\u81EA\u5B9A\u4E49 footer

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
header-class\u5934\u90E8\u6837\u5F0F\u7C7B
footer-class\u5E95\u90E8\u6837\u5F0F\u7C7B
`,9),Za=[Xa],Ya={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ja,Za))}},st={class:"van-doc-markdown-body"},at=d(`

Picker \u9009\u62E9\u5668

\u4ECB\u7ECD

\u63D0\u4F9B\u591A\u4E2A\u9009\u9879\u96C6\u5408\u4F9B\u7528\u6237\u9009\u62E9\uFF0C\u652F\u6301\u5355\u5217\u9009\u62E9\u548C\u591A\u5217\u7EA7\u8054\uFF0C\u901A\u5E38\u4E0E \u5F39\u51FA\u5C42 \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-picker": "@vant/weapp/picker/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-picker columns="{{ columns }}" bind:change="onChange" />
-
import Toast from '@vant/weapp/toast/toast';
-
-Page({
-  data: {
-    columns: ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u5609\u5174', '\u6E56\u5DDE'],
-  },
-
-  onChange(event) {
-    const { picker, value, index } = event.detail;
-    Toast(\`\u5F53\u524D\u503C\uFF1A\${value}, \u5F53\u524D\u7D22\u5F15\uFF1A\${index}\`);
-  },
-});
-

\u9ED8\u8BA4\u9009\u4E2D\u9879

\u5355\u5217\u9009\u62E9\u5668\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7default-index\u5C5E\u6027\u8BBE\u7F6E\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\u503C\u3002

<van-picker
-  columns="{{ columns }}"
-  default-index="{{ 2 }}"
-  bind:change="onChange"
-/>
-

\u5C55\u793A\u9876\u90E8\u680F

<van-picker
-  show-toolbar
-  title="\u6807\u9898"
-  columns="{{ columns }}"
-  bind:cancel="onCancel"
-  bind:confirm="onConfirm"
-/>
-
import Toast from '@vant/weapp/toast/toast';
-
-Page({
-  data: {
-    columns: ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u5609\u5174', '\u6E56\u5DDE'],
-  },
-
-  onConfirm(event) {
-    const { picker, value, index } = event.detail;
-    Toast(\`\u5F53\u524D\u503C\uFF1A\${value}, \u5F53\u524D\u7D22\u5F15\uFF1A\${index}\`);
-  },
-
-  onCancel() {
-    Toast('\u53D6\u6D88');
-  },
-});
-

\u591A\u5217\u8054\u52A8

<van-picker columns="{{ columns }}" bind:change="onChange" />
-
const citys = {
-  \u6D59\u6C5F: ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u5609\u5174', '\u6E56\u5DDE'],
-  \u798F\u5EFA: ['\u798F\u5DDE', '\u53A6\u95E8', '\u8386\u7530', '\u4E09\u660E', '\u6CC9\u5DDE'],
-};
-
-Page({
-  data: {
-    columns: [
-      {
-        values: Object.keys(citys),
-        className: 'column1',
-      },
-      {
-        values: citys['\u6D59\u6C5F'],
-        className: 'column2',
-        defaultIndex: 2,
-      },
-    ],
-  },
-
-  onChange(event) {
-    const { picker, value, index } = event.detail;
-    picker.setColumnValues(1, citys[value[0]]);
-  },
-});
-

\u7981\u7528\u9009\u9879

\u9009\u9879\u53EF\u4EE5\u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u901A\u8FC7\u8BBE\u7F6E disabled \u6765\u7981\u7528\u8BE5\u9009\u9879\u3002

<van-picker columns="{{ columns }}" />
-
Page({
-  data: {
-    columns: [
-      { text: '\u676D\u5DDE', disabled: true },
-      { text: '\u5B81\u6CE2' },
-      { text: '\u6E29\u5DDE' },
-    ],
-  },
-});
-

\u52A0\u8F7D\u72B6\u6001

\u5F53 Picker \u6570\u636E\u662F\u901A\u8FC7\u5F02\u6B65\u83B7\u53D6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 loading \u5C5E\u6027\u663E\u793A\u52A0\u8F7D\u63D0\u793A\u3002

<van-picker columns="{{ columns }}" loading />
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
columns\u5BF9\u8C61\u6570\u7EC4\uFF0C\u914D\u7F6E\u6BCF\u4E00\u5217\u663E\u793A\u7684\u6570\u636EArray[]
show-toolbar\u662F\u5426\u663E\u793A\u9876\u90E8\u680Fbooleanfalse
toolbar-position\u9876\u90E8\u680F\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3Abottomstringtop
title\u9876\u90E8\u680F\u6807\u9898string''
loading\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001booleanfalse
value-key\u9009\u9879\u5BF9\u8C61\u4E2D\uFF0C\u6587\u5B57\u5BF9\u5E94\u7684 keystringtext
item-height\u9009\u9879\u9AD8\u5EA6number44
confirm-button-text\u786E\u8BA4\u6309\u94AE\u6587\u5B57string\u786E\u8BA4
cancel-button-text\u53D6\u6D88\u6309\u94AE\u6587\u5B57string\u53D6\u6D88
visible-item-count\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570number6
default-index\u5355\u5217\u9009\u62E9\u5668\u7684\u9ED8\u8BA4\u9009\u4E2D\u9879\u7D22\u5F15\uFF0C
\u591A\u5217\u9009\u62E9\u5668\u8BF7\u53C2\u8003\u4E0B\u65B9\u7684 Columns \u914D\u7F6E		number0

Events

Picker \u7EC4\u4EF6\u7684\u4E8B\u4EF6\u4F1A\u6839\u636E columns \u662F\u5355\u5217\u6216\u591A\u5217\u8FD4\u56DE\u4E0D\u540C\u7684\u53C2\u6570\u3002

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:confirm\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1\u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15
\u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15
bind:cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15
\u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15
bind:change\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1\u5355\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15
\u591A\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15

Columns \u6570\u636E\u7ED3\u6784

\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0Ccolumns\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u914D\u7F6E\u6BCF\u4E00\u5217\uFF0C\u6BCF\u4E00\u5217\u6709\u4EE5\u4E0Bkey\u3002

key\u8BF4\u660E
values\u5217\u4E2D\u5BF9\u5E94\u7684\u5907\u9009\u503C
defaultIndex\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\uFF0C\u9ED8\u8BA4\u4E3A 0

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
active-class\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B
toolbar-class\u9876\u90E8\u680F\u6837\u5F0F\u7C7B
column-class\u5217\u6837\u5F0F\u7C7B

\u65B9\u6CD5

\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 picker \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
getValues-values\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C
setValuesvalues-\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C
getIndexes-indexes\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15
setIndexesindexes-\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15
getColumnValuecolumnIndexvalue\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C
setColumnValuecolumnIndex, value-\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C
getColumnIndexcolumnIndexoptionIndex\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15
setColumnIndexcolumnIndex, optionIndex-\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15
getColumnValuescolumnIndexvalues\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879
setColumnValuescolumnIndex, values-\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879
`,16),tt=[at],nt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",st,tt))}},lt={class:"van-doc-markdown-body"},et=d(`

Popup \u5F39\u51FA\u5C42

\u4ECB\u7ECD

\u5F39\u51FA\u5C42\u5BB9\u5668\uFF0C\u7528\u4E8E\u5C55\u793A\u5F39\u7A97\u3001\u4FE1\u606F\u63D0\u793A\u7B49\u5185\u5BB9\uFF0C\u652F\u6301\u591A\u4E2A\u5F39\u51FA\u5C42\u53E0\u52A0\u5C55\u793A\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-popup": "@vant/weapp/popup/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7show\u5C5E\u6027\u63A7\u5236\u5F39\u51FA\u5C42\u662F\u5426\u5C55\u793A\u3002

<van-cell title="\u5C55\u793A\u5F39\u51FA\u5C42" is-link bind:click="showPopup" />
-
-<van-popup show="{{ show }}" bind:close="onClose">\u5185\u5BB9</van-popup>
-
Page({
-  data: {
-    show: false,
-  },
-
-  showPopup() {
-    this.setData({ show: true });
-  },
-
-  onClose() {
-    this.setData({ show: false });
-  },
-});
-

\u5F39\u51FA\u4F4D\u7F6E

\u901A\u8FC7position\u5C5E\u6027\u8BBE\u7F6E\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u5C45\u4E2D\u5F39\u51FA\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3Atop\u3001bottom\u3001left\u3001right\u3002

<van-popup
-  show="{{ show }}"
-  position="top"
-  custom-style="height: 20%;"
-  bind:close="onClose"
-/>
-

\u5173\u95ED\u56FE\u6807

\u8BBE\u7F6Ecloseable\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5F39\u51FA\u5C42\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5173\u95ED\u56FE\u6807\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7close-icon\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528close-icon-position\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002

<van-popup
-  show="{{ show }}"
-  closeable
-  position="bottom"
-  custom-style="height: 20%"
-  bind:close="onClose"
-/>
-
-<!-- \u81EA\u5B9A\u4E49\u56FE\u6807 -->
-<van-popup
-  show="{{ show }}"
-  closeable
-  close-icon="close"
-  position="bottom"
-  custom-style="height: 20%"
-  bind:close="onClose"
-/>
-
-<!-- \u56FE\u6807\u4F4D\u7F6E -->
-<van-popup
-  show="{{ show }}"
-  closeable
-  close-icon-position="top-left"
-  position="bottom"
-  custom-style="height: 20%"
-  bind:close="onClose"
-/>
-

\u5706\u89D2\u5F39\u7A97

\u8BBE\u7F6Eround\u5C5E\u6027\u540E\uFF0C\u5F39\u7A97\u4F1A\u6839\u636E\u5F39\u51FA\u4F4D\u7F6E\u6DFB\u52A0\u4E0D\u540C\u7684\u5706\u89D2\u6837\u5F0F\u3002

<van-popup
-  show="{{ show }}"
-  round
-  position="bottom"
-  custom-style="height: 20%"
-  bind:close="onClose"
-/>
-

\u7981\u6B62\u6EDA\u52A8\u7A7F\u900F

\u4F7F\u7528\u7EC4\u4EF6\u65F6\uFF0C\u4F1A\u53D1\u73B0\u5185\u5BB9\u90E8\u5206\u6EDA\u52A8\u5230\u5E95\u65F6\uFF0C\u7EE7\u7EED\u5212\u52A8\u4F1A\u5BFC\u81F4\u5E95\u5C42\u9875\u9762\u7684\u6EDA\u52A8\uFF0C\u8FD9\u5C31\u662F\u6EDA\u52A8\u7A7F\u900F\u3002

\u76EE\u524D\uFF0C\u7EC4\u4EF6\u53EF\u4EE5\u901A\u8FC7 lock-scroll \u5C5E\u6027\u5904\u7406\u90E8\u5206\u6EDA\u52A8\u7A7F\u900F\u95EE\u9898\u3002 \u4F46\u7531\u4E8E\u5C0F\u7A0B\u5E8F\u81EA\u8EAB\u539F\u56E0\uFF0C\u5F39\u7A97\u5185\u5BB9\u533A\u57DF\u4ECD\u4F1A\u51FA\u73B0\u6EDA\u52A8\u7A7F\u900F\u3002 \u4E0D\u8FC7\uFF0C\u6211\u4EEC\u4E3A\u5F00\u53D1\u8005\u63D0\u4F9B\u4E86\u4E00\u4E2A\u63A8\u8350\u65B9\u6848\u4EE5\u5B8C\u6574\u89E3\u51B3\u6EDA\u52A8\u7A7F\u900F\uFF1A

page-meta

\u5F53\u5C0F\u7A0B\u5E8F\u57FA\u7840\u5E93\u6700\u4F4E\u7248\u672C\u5728 2.9.0 \u4EE5\u4E0A\u65F6\uFF0C\u5373\u53EF\u4F7F\u7528 page-meta \u7EC4\u4EF6\u52A8\u6001\u4FEE\u6539\u9875\u9762\u6837\u5F0F

<!-- page-meta \u53EA\u80FD\u662F\u9875\u9762\u5185\u7684\u7B2C\u4E00\u4E2A\u8282\u70B9 -->
-<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />
-
-<van-popup show="{{ show }}" catch:touchstart />
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
show\u662F\u5426\u663E\u793A\u5F39\u51FA\u5C42booleanfalse
z-indexz-index \u5C42\u7EA7number100
overlay\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42booleantrue
position\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top bottom right leftstringcenter
duration\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2number | object300
round\u662F\u5426\u663E\u793A\u5706\u89D2booleanfalse
custom-style\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0Fstring''
overlay-style\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0Fstring''
close-on-click-overlay\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95EDbooleantrue
closeable\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807booleanfalse
close-icon\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5stringcross
close-icon-position\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top-left
bottom-left bottom-right		stringtop-right
safe-area-inset-bottom\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BBbooleantrue
safe-area-inset-top\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09booleanfalse
safe-area-tab-bar\u662F\u5426\u7559\u51FA\u5E95\u90E8 tabbar \u5B89\u5168\u8DDD\u79BB\uFF08\u5728\u4F7F\u7528 tabbar \u7EC4\u4EF6 & \u5C0F\u7A0B\u5E8F\u81EA\u5B9A\u4E49 tabbar \u65F6\uFF0Cpopup \u7EC4\u4EF6\u5C42\u7EA7\u65E0\u6CD5\u76D6\u4F4F tabbar\uFF09booleanfalse
lock-scroll v1.7.3\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8booleantrue
root-portal v1.10.14\u662F\u5426\u4ECE\u9875\u9762\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 >= 2.25.2 booleanfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:close\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1-
bind:click-overlay\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1-
bind:before-enter\u8FDB\u5165\u524D\u89E6\u53D1-
bind:enter\u8FDB\u5165\u4E2D\u89E6\u53D1-
bind:after-enter\u8FDB\u5165\u540E\u89E6\u53D1-
bind:before-leave\u79BB\u5F00\u524D\u89E6\u53D1-
bind:leave\u79BB\u5F00\u4E2D\u89E6\u53D1-
bind:after-leave\u79BB\u5F00\u540E\u89E6\u53D1-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,13),pt=[et],dt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",lt,pt))}},ct={class:"van-doc-markdown-body"},ot=d(`

Progress \u8FDB\u5EA6\u6761

\u4ECB\u7ECD

\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u7684\u5F53\u524D\u8FDB\u5EA6\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-progress": "@vant/weapp/progress/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4E3A\u84DD\u8272\uFF0C\u4F7F\u7528percentage\u5C5E\u6027\u6765\u8BBE\u7F6E\u5F53\u524D\u8FDB\u5EA6\u3002

<van-progress percentage="50" />
-

\u7EBF\u6761\u7C97\u7EC6

\u901A\u8FC7stroke-width\u53EF\u4EE5\u8BBE\u7F6E\u8FDB\u5EA6\u6761\u7684\u7C97\u7EC6\u3002

<van-progress :percentage="50" stroke-width="8" />
-

\u7F6E\u7070

\u8BBE\u7F6Einactive\u5C5E\u6027\u540E\u8FDB\u5EA6\u6761\u5C06\u7F6E\u7070\u3002

<van-progress inactive percentage="50" />
-

\u6837\u5F0F\u5B9A\u5236

\u53EF\u4EE5\u4F7F\u7528pivot-text\u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0Ccolor\u5C5E\u6027\u81EA\u5B9A\u4E49\u8FDB\u5EA6\u6761\u989C\u8272\u3002

<van-progress pivot-text="\u6A59\u8272" color="#f2826a" percentage="25" />
-
-<van-progress pivot-text="\u7EA2\u8272" color="#ee0a24" percentage="50" />
-
-<van-progress
-  percentage="75"
-  pivot-text="\u7D2B\u8272"
-  pivot-color="#7232dd"
-  color="linear-gradient(to right, #be99ff, #7232dd)"
-/>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
inactive\u662F\u5426\u7F6E\u7070booleanfalse
percentage\u8FDB\u5EA6\u767E\u5206\u6BD4number0
stroke-width\u8FDB\u5EA6\u6761\u7C97\u7EC6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number4px
show-pivot\u662F\u5426\u663E\u793A\u8FDB\u5EA6\u6587\u5B57booleantrue
color\u8FDB\u5EA6\u6761\u989C\u8272string#1989fa
text-color\u8FDB\u5EA6\u6587\u5B57\u989C\u8272string#fff
track-color\u8F68\u9053\u989C\u8272string#e5e5e5
pivot-text\u6587\u5B57\u663E\u793Astring\u767E\u5206\u6BD4\u6587\u5B57
pivot-color\u6587\u5B57\u80CC\u666F\u8272string\u4E0E\u8FDB\u5EA6\u6761\u989C\u8272\u4E00\u81F4

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,11),rt=[ot],it={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ct,rt))}},ht={class:"van-doc-markdown-body"},ut=d(`

Radio \u5355\u9009\u6846

\u4ECB\u7ECD

\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-radio": "@vant/weapp/radio/index",
-  "van-radio-group": "@vant/weapp/radio-group/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7value\u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u4E2D\u9879\u7684 name \u3002

<van-radio-group value="{{ radio }}" bind:change="onChange">
-  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
-  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
-</van-radio-group>
-
Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-});
-

\u6C34\u5E73\u6392\u5217

\u5C06direction\u5C5E\u6027\u8BBE\u7F6E\u4E3Ahorizontal\u540E\uFF0C\u5355\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002

<van-radio-group
-  value="{{ radio }}"
-  bind:change="onChange"
-  direction="horizontal"
->
-  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
-  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
-</van-radio-group>
-

\u7981\u7528\u72B6\u6001

\u901A\u8FC7disabled\u5C5E\u6027\u7981\u6B62\u9009\u9879\u5207\u6362\uFF0C\u5728Radio\u4E0A\u8BBE\u7F6Ediabled\u53EF\u4EE5\u7981\u7528\u5355\u4E2A\u9009\u9879\u3002

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">
-  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>
-  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>
-</van-radio-group>
-

\u81EA\u5B9A\u4E49\u5F62\u72B6

\u5C06shape\u5C5E\u6027\u8BBE\u7F6E\u4E3Asquare\uFF0C\u5355\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002

<van-radio-group value="{{ radio }}" bind:change="onChange">
-  <van-radio name="1" shape="square">\u5355\u9009\u6846 1</van-radio>
-  <van-radio name="2" shape="square">\u5355\u9009\u6846 2</van-radio>
-</van-radio-group>
-

\u81EA\u5B9A\u4E49\u989C\u8272

\u901A\u8FC7checked-color\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002

<van-radio-group value="{{ radio }}" bind:change="onChange">
-  <van-radio name="1" checked-color="#07c160">\u5355\u9009\u6846 1</van-radio>
-  <van-radio name="2" checked-color="#07c160">\u5355\u9009\u6846 2</van-radio>
-</van-radio-group>
-

\u81EA\u5B9A\u4E49\u5927\u5C0F

\u901A\u8FC7icon-size\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002

<van-radio-group value="{{ radio }}" bind:change="onChange">
-  <van-radio name="1" icon-size="24px">\u5355\u9009\u6846 1</van-radio>
-  <van-radio name="2" icon-size="24px">\u5355\u9009\u6846 2</van-radio>
-</van-radio-group>
-

\u81EA\u5B9A\u4E49\u56FE\u6807

\u901A\u8FC7icon\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u9700\u8981\u8BBE\u7F6Euse-icon-slot\u5C5E\u6027\u3002

<van-radio-group value="{{ radio }}" bind:change="onChange">
-  <van-radio use-icon-slot value="{{ radio }}" name="1">
-    \u81EA\u5B9A\u4E49\u56FE\u6807
-    <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />
-  </van-radio>
-  <van-radio use-icon-slot value="{{ radio }}" name="2">
-    \u81EA\u5B9A\u4E49\u56FE\u6807
-    <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />
-  </van-radio>
-</van-radio-group>
-
Page({
-  data: {
-    radio: true,
-    icon: {
-      normal: '//img.yzcdn.cn/icon-normal.png',
-      active: '//img.yzcdn.cn/icon-active.png',
-    },
-  },
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-});
-

\u7981\u7528\u6587\u672C\u70B9\u51FB

\u901A\u8FC7\u8BBE\u7F6Elabel-disabled\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u5355\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002

<van-radio-group value="{{ radio }}" bind:change="onChange">
-  <van-radio name="1" label-disabled>\u5355\u9009\u6846 1</van-radio>
-  <van-radio name="2" label-disabled>\u5355\u9009\u6846 2</van-radio>
-</van-radio-group>
-

\u4E0E Cell \u7EC4\u4EF6\u4E00\u8D77\u4F7F\u7528

\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165Cell\u548CCellGroup\u7EC4\u4EF6\u3002

<van-radio-group value="{{ radio }}" bind:change="onChange">
-  <van-cell-group>
-    <van-cell title="\u5355\u9009\u6846 1" clickable data-name="1" bind:click="onClick">
-      <van-radio slot="right-icon" name="1" />
-    </van-cell>
-    <van-cell title="\u5355\u9009\u6846 2" clickable data-name="2" bind:click="onClick">
-      <van-radio slot="right-icon" name="2" />
-    </van-cell>
-  </van-cell-group>
-</van-radio-group>
-
Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-
-  onClick(event) {
-    const { name } = event.currentTarget.dataset;
-    this.setData({
-      radio: name,
-    });
-  },
-});
-

API

RadioGroup Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26string-
value\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26any-
disabled\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846booleanfalse
direction v1.6.7\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontalstringvertical

Radio Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u8BC6\u7B26string-
shape\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A squarestringround
disabled\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001booleanfalse
label-disabled\u662F\u5426\u7981\u7528\u6587\u672C\u5185\u5BB9\u70B9\u51FBbooleanfalse
label-position\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A leftstringright
icon-size\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number20px
checked-color\u9009\u4E2D\u72B6\u6001\u989C\u8272string#1989fa
use-icon-slot\u662F\u5426\u4F7F\u7528 icon \u63D2\u69FDbooleanfalse

Radio Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D\u9009\u4E2D\u9879\u7684 name

Radio \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
icon-class\u56FE\u6807\u6837\u5F0F\u7C7B
label-class\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B

RadioGroup Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D\u9009\u4E2D\u9879\u7684 name
`,19),gt=[ut],jt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ht,gt))}},mt={class:"van-doc-markdown-body"},bt=d(`

Rate \u8BC4\u5206

\u4ECB\u7ECD

\u7528\u4E8E\u5BF9\u4E8B\u7269\u8FDB\u884C\u8BC4\u7EA7\u64CD\u4F5C\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-rate": "@vant/weapp/rate/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-rate value="{{ value }}" bind:change="onChange" />
-
Page({
-  data: {
-    value: 3,
-  },
-
-  onChange(event) {
-    this.setData({
-      value: event.detail,
-    });
-  },
-});
-

\u81EA\u5B9A\u4E49\u56FE\u6807

<van-rate
-  value="{{ value }}"
-  icon="like"
-  void-icon="like-o"
-  bind:change="onChange"
-/>
-

\u81EA\u5B9A\u4E49\u6837\u5F0F

<van-rate
-  value="{{ value }}"
-  size="{{ 25 }}"
-  color="#ffd21e"
-  void-icon="star"
-  void-color="#eee"
-  bind:change="onChange"
-/>
-

\u534A\u661F

<van-rate
-  value="{{ value }}"
-  allow-half
-  void-icon="star"
-  void-color="#eee"
-  bind:change="onChange"
-/>
-
Page({
-  data: {
-    value: 2.5,
-  },
-
-  onChange(event) {
-    this.setData({
-      value: event.detail,
-    });
-  },
-});
-

\u81EA\u5B9A\u4E49\u6570\u91CF

<van-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />
-

\u7981\u7528\u72B6\u6001

<van-rate disabled value="{{ value }}" bind:change="onChange" />
-

\u53EA\u8BFB\u72B6\u6001

<van-rate readonly value="{{ value }}" bind:change="onChange" />
-

\u76D1\u542C change \u4E8B\u4EF6

\u8BC4\u5206\u53D8\u5316\u65F6\uFF0C\u4F1A\u89E6\u53D1 change \u4E8B\u4EF6\u3002

<van-rate value="{{ value }}" bind:change="onChange" />
-
Page({
-  data: {
-    value: 2,
-  },
-
-  onChange(event) {
-    Toast('\u5F53\u524D\u503C\uFF1A' + event.detail);
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26string-
value\u5F53\u524D\u5206\u503Cnumber-
count\u56FE\u6807\u603B\u6570number5
size\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxstring | number20px
gutter\u56FE\u6807\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxstring | number4px
color\u9009\u4E2D\u65F6\u7684\u989C\u8272string#ffd21e
void-color\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272string#c7c7c7
icon\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6stringstar
void-icon\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6stringstar-o
allow-half\u662F\u5426\u5141\u8BB8\u534A\u9009booleanfalse
readonly\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001booleanfalse
disabled\u662F\u5426\u7981\u7528\u8BC4\u5206booleanfalse
disabled-color\u7981\u7528\u65F6\u7684\u989C\u8272string#bdbdbd
touchable\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u6ED1\u52A8\u624B\u52BF\u9009\u62E9\u8BC4\u5206booleantrue

Events

\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:change\u5F53\u524D\u5206\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6event.detail:\u5F53\u524D\u5206\u503C

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
icon-class\u56FE\u6807\u6837\u5F0F\u7C7B
`,16),vt=[bt],qt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",mt,vt))}},ft={class:"van-doc-markdown-body"},yt=d(`

Search \u641C\u7D22

\u4ECB\u7ECD

\u7528\u4E8E\u641C\u7D22\u573A\u666F\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-search": "@vant/weapp/search/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

van-search \u4E2D\uFF0Cvalue \u7528\u4E8E\u63A7\u5236\u641C\u7D22\u6846\u4E2D\u7684\u6587\u5B57\u3002background \u53EF\u4EE5\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272\u3002

<van-search value="{{ value }}" placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />
-

\u4E8B\u4EF6\u76D1\u542C

van-search \u63D0\u4F9B\u4E86 search \u548C cancel \u4E8B\u4EF6\u3002search \u4E8B\u4EF6\u5728\u7528\u6237\u70B9\u51FB\u952E\u76D8\u4E0A\u7684\u641C\u7D22\u6309\u94AE\u89E6\u53D1\u3002cancel \u4E8B\u4EF6\u5728\u7528\u6237\u70B9\u51FB\u641C\u7D22\u6846\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u3002

<van-search
-  value="{{ value }}"
-  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
-  show-action
-  bind:search="onSearch"
-  bind:cancel="onCancel"
-/>
-

\u641C\u7D22\u6846\u5185\u5BB9\u5BF9\u9F50

\u901A\u8FC7 input-align \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002

<van-search
-  value="{{ value }}"
-  input-align="center"
-  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
-/>
-

\u7981\u7528\u641C\u7D22\u6846

\u901A\u8FC7 disabled \u5C5E\u6027\u53EF\u4EE5\u5C06\u7EC4\u4EF6\u8BBE\u7F6E\u4E3A\u7981\u7528\u72B6\u6001\u3002

<van-search disabled value="{{ value }}" placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD" />
-

\u81EA\u5B9A\u4E49\u80CC\u666F\u8272

\u901A\u8FC7background\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5916\u90E8\u7684\u80CC\u666F\u8272\uFF0C\u901A\u8FC7shape\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3Around\u3002

<van-search
-  value="{{ value }}"
-  shape="round"
-  background="#4fc08d"
-  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
-/>
-

\u81EA\u5B9A\u4E49\u6309\u94AE

van-search \u652F\u6301\u81EA\u5B9A\u4E49\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\uFF0C\u4F7F\u7528\u540D\u5B57\u4E3A action \u7684 slot\uFF0C\u5E76\u8BBE\u7F6E use-action-slot \u4E3A true \u5373\u53EF\u3002

<van-search
-  value="{{ value }}"
-  label="\u5730\u5740"
-  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
-  use-action-slot
-  bind:change="onChange"
-  bind:search="onSearch"
->
-  <view slot="action" bind:tap="onClick">\u641C\u7D22</view>
-</van-search>
-
Page({
-  data: {
-    value: '',
-  },
-  onChange(e) {
-    this.setData({
-      value: e.detail,
-    });
-  },
-  onSearch() {
-    Toast('\u641C\u7D22' + this.data.value);
-  },
-  onClick() {
-    Toast('\u641C\u7D22' + this.data.value);
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26string-
label\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672Cstring-
shape\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A roundstringsquare
value\u5F53\u524D\u8F93\u5165\u7684\u503Cstring | number-
background\u641C\u7D22\u6846\u80CC\u666F\u8272string#f2f2f2
show-action\u662F\u5426\u5728\u641C\u7D22\u6846\u53F3\u4FA7\u663E\u793A\u53D6\u6D88\u6309\u94AEbooleanfalse
action-text v1.0.0\u53D6\u6D88\u6309\u94AE\u6587\u5B57string\u53D6\u6D88
focus\u83B7\u53D6\u7126\u70B9booleanfalse
error\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2booleanfalse
disabled\u662F\u5426\u7981\u7528\u8F93\u5165\u6846booleanfalse
readonly\u662F\u5426\u53EA\u8BFBbooleanfalse
clearable\u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6booleantrue
clear-trigger v1.8.4\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0Calways \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C
focus \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A		stringfocus
clear-icon v1.8.4\u6E05\u9664\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5stringclear
maxlength\u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6number-1
use-action-slot\u662F\u5426\u4F7F\u7528 action slotbooleanfalse
placeholder\u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26string-
placeholder-style\u6307\u5B9A\u5360\u4F4D\u7B26\u7684\u6837\u5F0Fstring-
input-align\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A center rightstringleft
use-left-icon-slot\u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807 slotbooleanfalse
use-right-icon-slot\u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807 slotbooleanfalse
left-icon\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6\uFF08\u5982\u679C\u8BBE\u7F6E\u4E86 use-left-icon-slot\uFF0C\u5219\u8BE5\u5C5E\u6027\u65E0\u6548\uFF09stringsearch
right-icon\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6\uFF08\u5982\u679C\u8BBE\u7F6E\u4E86 use-right-icon-slot\uFF0C\u5219\u8BE5\u5C5E\u6027\u65E0\u6548\uFF09string-
cursor-spacing\u8F93\u5165\u6846\u805A\u7126\u65F6\u5E95\u90E8\u4E0E\u952E\u76D8\u7684\u8DDD\u79BBnumber0

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:search\u786E\u5B9A\u641C\u7D22\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u8F93\u5165\u503C
bind:change\u8F93\u5165\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u8F93\u5165\u503C
bind:cancel\u53D6\u6D88\u641C\u7D22\u641C\u7D22\u65F6\u89E6\u53D1-
bind:focus\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1-
bind:blur\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1-
bind:clear\u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1-
bind:click-input\u70B9\u51FB\u641C\u7D22\u533A\u57DF\u65F6\u89E6\u53D1-

Slot

\u540D\u79F0\u8BF4\u660E
action\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u53F3\u4FA7\u6309\u94AE\uFF0C\u9700\u8981\u5728use-action-slot\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A
label\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C
left-icon\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728use-left-icon-slot\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A
right-icon\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728use-right-icon-slot\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
field-class\u641C\u7D22\u6846\u6837\u5F0F\u7C7B
input-class\u8F93\u5165\u6846\u6837\u5F0F\u7C7B
cancel-class\u53D6\u6D88\u6309\u94AE\u6837\u5F0F\u7C7B
`,15),_t=[yt],xt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ft,_t))}},wt={class:"van-doc-markdown-body"},kt=d(`

ShareSheet \u5206\u4EAB\u9762\u677F

\u4ECB\u7ECD

\u5E95\u90E8\u5F39\u8D77\u7684\u5206\u4EAB\u9762\u677F\uFF0C\u7528\u4E8E\u5C55\u793A\u5404\u5206\u4EAB\u6E20\u9053\u5BF9\u5E94\u7684\u64CD\u4F5C\u6309\u94AE\uFF0C\u4E0D\u542B\u5177\u4F53\u7684\u5206\u4EAB\u903B\u8F91\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-share-sheet": "@vant/weapp/share-sheet/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u5206\u4EAB\u9762\u677F\u901A\u8FC7 options \u5C5E\u6027\u6765\u5B9A\u4E49\u5206\u4EAB\u9009\u9879\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u683C\u5F0F\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002

<van-cell title="\u663E\u793A\u5206\u4EAB\u9762\u677F" bind:click="onClick" />
-<van-share-sheet
-  show="{{ showShare }}"
-  title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"
-  options="{{ options }}"
-  bind:select="onSelect"
-  bind:close="onClose"
-/>
-
Page({
-  data: {
-    showShare: false,
-    options: [
-      { name: '\u5FAE\u4FE1', icon: 'wechat', openType: 'share' },
-      { name: '\u5FAE\u535A', icon: 'weibo' },
-      { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },
-      { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },
-      { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },
-    ],
-  },
-
-  onClick(event) {
-    this.setData({ showShare: true });
-  },
-
-  onClose() {
-    this.setData({ showShare: false });
-  },
-
-  onSelect(event) {
-    Toast(event.detail.name);
-    this.onClose();
-  },
-});
-

\u5C55\u793A\u591A\u884C\u9009\u9879

\u5F53\u5206\u4EAB\u9009\u9879\u7684\u6570\u91CF\u8F83\u591A\u65F6\uFF0C\u53EF\u4EE5\u5C06 options \u5B9A\u4E49\u4E3A\u6570\u7EC4\u5D4C\u5957\u7684\u683C\u5F0F\uFF0C\u6BCF\u4E2A\u5B50\u6570\u7EC4\u4F1A\u4F5C\u4E3A\u4E00\u884C\u9009\u9879\u5C55\u793A\u3002

<van-share-sheet
-  show="{{ showShare }}"
-  title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"
-  options="{{ options }}"
-/>
-
Page({
-  data: {
-    showShare: false,
-    options: [
-      [
-        { name: '\u5FAE\u4FE1', icon: 'wechat' },
-        { name: '\u5FAE\u535A', icon: 'weibo' },
-        { name: 'QQ', icon: 'qq' },
-      ],
-      [
-        { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },
-        { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },
-        { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },
-      ],
-    ],
-  },
-});
-

\u81EA\u5B9A\u4E49\u56FE\u6807

\u9664\u4E86\u4F7F\u7528\u5185\u7F6E\u7684\u51E0\u79CD\u56FE\u6807\u5916\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728 icon \u4E2D\u4F20\u5165\u56FE\u7247 URL \u6765\u4F7F\u7528\u81EA\u5B9A\u4E49\u7684\u56FE\u6807\u3002

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />
-
Page({
-  data: {
-    showShare: false,
-    options: [
-      {
-        name: '\u540D\u79F0',
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
-      },
-      {
-        name: '\u540D\u79F0',
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
-      },
-      {
-        name: '\u540D\u79F0',
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
-      },
-    ],
-  },
-});
-

\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F

\u901A\u8FC7 description \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57, \u5728 options \u5185\u8BBE\u7F6E description \u5C5E\u6027\u53EF\u4EE5\u6DFB\u52A0\u5206\u4EAB\u9009\u9879\u63CF\u8FF0\u3002

<van-share-sheet
-  show="{{ showShare }}"
-  options="{{ options }}"
-  title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"
-  description="\u63CF\u8FF0\u4FE1\u606F"
-/>
-
Page({
-  data: {
-    showShare: false,
-    options: [
-      { name: '\u5FAE\u4FE1', icon: 'wechat' },
-      { name: '\u5FAE\u535A', icon: 'weibo' },
-      {
-        name: '\u590D\u5236\u94FE\u63A5',
-        icon: 'link',
-        description: '\u63CF\u8FF0\u4FE1\u606F',
-      },
-      { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },
-      { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },
-    ],
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
show\u662F\u5426\u663E\u793A\u5206\u4EAB\u9762\u677Fbooleanfalse
options\u5206\u4EAB\u9009\u9879Option[][]
title\u9876\u90E8\u6807\u9898string-
cancel-text\u53D6\u6D88\u6309\u94AE\u6587\u5B57string'\u53D6\u6D88'
description\u6807\u9898\u4E0B\u65B9\u7684\u8F85\u52A9\u63CF\u8FF0\u6587\u5B57string-
duration\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2number | string300
overlay\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42booleantrue
close-on-click-overlay\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95EDbooleantrue
safe-area-inset-bottom\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914Dbooleantrue

Option \u6570\u636E\u7ED3\u6784

options\u5C5E\u6027\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A

\u952E\u540D\u8BF4\u660E\u7C7B\u578B
name\u5206\u4EAB\u6E20\u9053\u540D\u79F0string
description\u5206\u4EAB\u9009\u9879\u63CF\u8FF0string
icon\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u4E3A qq link weibo wechat poster qrcode weapp-qrcode wechat-moments\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URLstring
openType\u6309\u94AE open-type\uFF0C\u53EF\u7528\u4E8E\u5B9E\u73B0\u5206\u4EAB\u529F\u80FD\uFF0C\u53EF\u9009\u503C\u4E3A sharestring

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:select\u70B9\u51FB\u5206\u4EAB\u9009\u9879\u65F6\u89E6\u53D1option: Option, index: number
bind:close\u5173\u95ED\u65F6\u89E6\u53D1-
bind:cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1-
bind:click-overlay\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1-

Slots

\u540D\u79F0\u8BF4\u660E
title\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898
description\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57
`,13),zt=[kt],Ct={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",wt,zt))}},Pt={class:"van-doc-markdown-body"},St=d(`

Sidebar \u4FA7\u8FB9\u5BFC\u822A

\u4ECB\u7ECD

\u5782\u76F4\u5C55\u793A\u7684\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-sidebar": "@vant/weapp/sidebar/index",
-  "van-sidebar-item": "@vant/weapp/sidebar-item/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7\u5728van-sidebar\u4E0A\u8BBE\u7F6EactiveKey\u5C5E\u6027\u6765\u63A7\u5236\u9009\u4E2D\u9879\u3002

<van-sidebar active-key="{{ activeKey }}">
-  <van-sidebar-item title="\u6807\u7B7E\u540D" />
-  <van-sidebar-item title="\u6807\u7B7E\u540D" />
-  <van-sidebar-item title="\u6807\u7B7E\u540D" />
-</van-sidebar>
-
Page({
-  data: {
-    activeKey: 0,
-  },
-});
-

\u5FBD\u6807\u63D0\u793A

\u8BBE\u7F6Edot\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6Ebadge\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002

<van-sidebar active-key="{{ activeKey }}">
-  <van-sidebar-item title="\u6807\u7B7E\u540D" dot />
-  <van-sidebar-item title="\u6807\u7B7E\u540D" badge="5" />
-  <van-sidebar-item title="\u6807\u7B7E\u540D" badge="99+" />
-</van-sidebar>
-

\u7981\u7528\u9009\u9879

\u901A\u8FC7disabled\u5C5E\u6027\u7981\u7528\u9009\u9879\u3002

<van-sidebar active-key="{{ activeKey }}">
-  <van-sidebar-item title="\u6807\u7B7E\u540D" />
-  <van-sidebar-item title="\u6807\u7B7E\u540D" disabled />
-  <van-sidebar-item title="\u6807\u7B7E\u540D" />
-</van-sidebar>
-

\u76D1\u542C\u5207\u6362\u4E8B\u4EF6

\u8BBE\u7F6Echange\u65B9\u6CD5\u6765\u76D1\u542C\u5207\u6362\u5BFC\u822A\u9879\u65F6\u7684\u4E8B\u4EF6\u3002

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">
-  <van-sidebar-item title="\u6807\u7B7E\u540D 1" />
-  <van-sidebar-item title="\u6807\u7B7E\u540D 2" />
-  <van-sidebar-item title="\u6807\u7B7E\u540D 3" />
-</van-sidebar>
-
-<van-notify id="van-notify" />
-
import Notify from '@vant/weapp/notify/notify';
-
-Page({
-  data: {
-    activeKey: 0,
-  },
-
-  onChange(event) {
-    Notify({ type: 'primary', message: event.detail });
-  },
-});
-

API

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
activeKey\u9009\u4E2D\u9879\u7684\u7D22\u5F15string | number0
\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
change\u5207\u6362\u5FBD\u7AE0\u65F6\u89E6\u53D1\u5F53\u524D\u9009\u4E2D\u5FBD\u7AE0\u7684\u7D22\u5F15
\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B

SidebarItem Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u5185\u5BB9string''
dot\u662F\u5426\u663E\u793A\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9booleanfalse
info\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9\uFF08\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 badge \u5C5E\u6027\uFF09string | number''
badge v1.5.0\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9string | number''
disabled\u662F\u5426\u7981\u7528\u8BE5\u9879booleanfalse

SidebarItem Slot

\u540D\u79F0\u8BF4\u660E
title\u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86title\u5C5E\u6027\u5219\u4E0D\u751F\u6548

SidebarItem Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
click\u70B9\u51FB\u5FBD\u7AE0\u65F6\u89E6\u53D1event.detail \u4E3A\u5F53\u524D\u5FBD\u7AE0\u7684\u7D22\u5F15

SidebarItem \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,16),Dt=[St],It={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Pt,Dt))}},$t={class:"van-doc-markdown-body"},Tt=d(`

Skeleton \u9AA8\u67B6\u5C4F

\u4ECB\u7ECD

\u7528\u4E8E\u5728\u5185\u5BB9\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u5C55\u793A\u4E00\u7EC4\u5360\u4F4D\u56FE\u5F62\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-skeleton": "@vant/weapp/skeleton/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7title\u5C5E\u6027\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE\uFF0C\u901A\u8FC7row\u5C5E\u6027\u914D\u7F6E\u5360\u4F4D\u6BB5\u843D\u884C\u6570\u3002

<van-skeleton title row="3" />
-

\u663E\u793A\u5934\u50CF

\u901A\u8FC7avatar\u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002

<van-skeleton title avatar row="3" />
-

\u5C55\u793A\u5B50\u7EC4\u4EF6

\u5C06loading\u5C5E\u6027\u8BBE\u7F6E\u6210false\u8868\u793A\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\uFF0C\u6B64\u65F6\u4F1A\u9690\u85CF\u5360\u4F4D\u56FE\uFF0C\u5E76\u663E\u793ASkeleton\u7684\u5B50\u7EC4\u4EF6\u3002

<van-skeleton title avatar row="3" loading="{{ loading }}">
-  <view>\u5B9E\u9645\u5185\u5BB9</view>
-</van-skeleton>
-
Page({
-  data: {
-    loading: true,
-  },
-  onReady() {
-    this.setData({
-      loading: false,
-    });
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
row\u6BB5\u843D\u5360\u4F4D\u56FE\u884C\u6570number0
row-width\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6\uFF0C\u53EF\u4F20\u6570\u7EC4\u6765\u8BBE\u7F6E\u6BCF\u4E00\u884C\u7684\u5BBD\u5EA6string | string[]100%
title\u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FEbooleanfalse
title-width\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6string | number40%
avatar\u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FEbooleanfalse
avatar-size\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0Fstring | number32px
avatar-shape\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3Asquarestringround
loading\u662F\u5426\u663E\u793A\u5360\u4F4D\u56FE\uFF0C\u4F20false\u65F6\u4F1A\u5C55\u793A\u5B50\u7EC4\u4EF6\u5185\u5BB9booleantrue
animate\u662F\u5426\u5F00\u542F\u52A8\u753Bbooleantrue
`,9),At=[Tt],Et={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",$t,At))}},Ft={class:"van-doc-markdown-body"},Bt=d(`

Slider \u6ED1\u5757

\u4ECB\u7ECD

\u6ED1\u52A8\u8F93\u5165\u6761\uFF0C\u7528\u4E8E\u5728\u7ED9\u5B9A\u7684\u8303\u56F4\u5185\u9009\u62E9\u4E00\u4E2A\u503C\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-slider": "@vant/weapp/slider/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

<van-slider value="50" bind:change="onChange" />
-
Page({
-  onChange(event) {
-    wx.showToast({
-      icon: 'none',
-      title: \`\u5F53\u524D\u503C\uFF1A\${event.detail}\`,
-    });
-  },
-});
-

\u53CC\u6ED1\u5757

\u6DFB\u52A0 range \u5C5E\u6027\u5C31\u53EF\u4EE5\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F\uFF0C\u786E\u4FDD value \u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\u3002

<van-slider value="{{ [10, 50] }}" range @change="onChange" />
-
Page({
-  onChange(event) {
-    wx.showToast({
-      icon: 'none',
-      title: \`\u5F53\u524D\u503C\uFF1A\${event.detail}\`,
-    });
-  },
-});
-

\u6307\u5B9A\u9009\u62E9\u8303\u56F4

<van-slider min="-50" max="50" />
-

\u7981\u7528

<van-slider value="50" disabled />
-

\u6307\u5B9A\u6B65\u957F

<van-slider value="50" step="10" />
-

\u81EA\u5B9A\u4E49\u6837\u5F0F

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />
-

\u81EA\u5B9A\u4E49\u6309\u94AE

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">
-  <view class="custom-button" slot="button">{{ currentValue }}/100</view>
-</van-slider>
-
Page({
-  data: {
-    currentValue: 50,
-  },
-
-  onDrag(event) {
-    this.setData({
-      currentValue: event.detail.value,
-    });
-  },
-});
-

\u5782\u76F4\u65B9\u5411

\u8BBE\u7F6E vertical \u5C5E\u6027\u540E\uFF0C\u6ED1\u5757\u4F1A\u5782\u76F4\u5C55\u793A\uFF0C\u4E14\u9AD8\u5EA6\u4E3A 100% \u7236\u5143\u7D20\u9AD8\u5EA6\u3002

<view style="height: 150px;">
-  <van-slider value="50" vertical bind:change="onChange" />
-  <van-slider
-    value="{{ [10, 50] }}"
-    range
-    vertical
-    style="margin-left: 100px;"
-    bind:change="onChange"
-  />
-</view>
-
Page({
-  onChange(event) {
-    wx.showToast({
-      icon: 'none',
-      title: \`\u5F53\u524D\u503C\uFF1A\${event.detail}\`,
-    });
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
value\u5F53\u524D\u8FDB\u5EA6\u767E\u5206\u6BD4\uFF0C\u5728\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\u4E3A\u6570\u7EC4\u683C\u5F0Fnumber | number[]0
disabled\u662F\u5426\u7981\u7528\u6ED1\u5757booleanfalse
max\u6700\u5927\u503Cnumber100
min\u6700\u5C0F\u503Cnumber0
step\u6B65\u957Fnumber1
bar-height\u8FDB\u5EA6\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxstring | number2px
active-color\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u6001\u989C\u8272string#1989fa
inactive-color\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u989C\u8272string#e5e5e5
use-slot-button\u662F\u5426\u4F7F\u7528\u6309\u94AE\u63D2\u69FDbooleanfalse
range v1.8.4\u662F\u5426\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0Fbooleanfalse
vertical v1.8.5\u662F\u5426\u5782\u76F4\u5C55\u793Abooleanfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:drag\u62D6\u52A8\u8FDB\u5EA6\u6761\u65F6\u89E6\u53D1event.detail.value: \u5F53\u524D\u8FDB\u5EA6
bind:change\u8FDB\u5EA6\u503C\u6539\u53D8\u540E\u89E6\u53D1event.detail: \u5F53\u524D\u8FDB\u5EA6
bind:drag-start\u5F00\u59CB\u62D6\u52A8\u65F6\u89E6\u53D1-
bind:drag-end\u7ED3\u675F\u62D6\u52A8\u65F6\u89E6\u53D1-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B

Slots

\u540D\u79F0\u8BF4\u660E\u53C2\u6570
button\u81EA\u5B9A\u4E49\u6ED1\u5757\u6309\u94AE{ value: number }
left-button v1.8.4\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09{ value: number }
right-button v1.8.4\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6ED1\u5757\u6309\u94AE \uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09{ value: number }
`,17),Rt=[Bt],Nt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ft,Rt))}},Mt={class:"van-doc-markdown-body"},Lt=d(`

Stepper \u6B65\u8FDB\u5668

\u4ECB\u7ECD

\u6B65\u8FDB\u5668\u7531\u589E\u52A0\u6309\u94AE\u3001\u51CF\u5C11\u6309\u94AE\u548C\u8F93\u5165\u6846\u7EC4\u6210\uFF0C\u7528\u4E8E\u5728\u4E00\u5B9A\u8303\u56F4\u5185\u8F93\u5165\u3001\u8C03\u6574\u6570\u5B57\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-stepper": "@vant/weapp/stepper/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7value\u8BBE\u7F6E\u8F93\u5165\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7change\u4E8B\u4EF6\u76D1\u542C\u5230\u8F93\u5165\u503C\u7684\u53D8\u5316\u3002

<van-stepper value="{{ 1 }}" bind:change="onChange" />
-
Page({
-  onChange(event) {
-    console.log(event.detail);
-  },
-});
-

\u6B65\u957F\u8BBE\u7F6E

\u901A\u8FC7step\u5C5E\u6027\u8BBE\u7F6E\u6BCF\u6B21\u70B9\u51FB\u589E\u52A0\u6216\u51CF\u5C11\u6309\u94AE\u65F6\u53D8\u5316\u7684\u503C\uFF0C\u9ED8\u8BA4\u4E3A1\u3002

<van-stepper value="{{ 1 }}" step="2" />
-

\u9650\u5236\u8F93\u5165\u8303\u56F4

\u901A\u8FC7min\u548Cmax\u5C5E\u6027\u9650\u5236\u8F93\u5165\u503C\u7684\u8303\u56F4\u3002

<van-stepper value="{{ 5 }}" min="5" max="8" />
-

\u9650\u5236\u8F93\u5165\u6574\u6570

\u8BBE\u7F6Einteger\u5C5E\u6027\u540E\uFF0C\u8F93\u5165\u6846\u5C06\u9650\u5236\u53EA\u80FD\u8F93\u5165\u6574\u6570\u3002

<van-stepper value="{{ 1 }}" integer />
-

\u7981\u7528\u72B6\u6001

\u901A\u8FC7\u8BBE\u7F6Edisabled\u5C5E\u6027\u6765\u7981\u7528\u6B65\u8FDB\u5668\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u65E0\u6CD5\u70B9\u51FB\u6309\u94AE\u6216\u4FEE\u6539\u8F93\u5165\u6846\u3002

<van-stepper value="{{ 1 }}" disabled />
-

\u5173\u95ED\u957F\u6309

\u901A\u8FC7\u8BBE\u7F6Elong-press\u5C5E\u6027\u51B3\u5B9A\u6B65\u8FDB\u5668\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF\u3002

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />
-

\u56FA\u5B9A\u5C0F\u6570\u4F4D\u6570

\u901A\u8FC7\u8BBE\u7F6Edecimal-length\u5C5E\u6027\u53EF\u4EE5\u4FDD\u7559\u56FA\u5B9A\u7684\u5C0F\u6570\u4F4D\u6570\u3002

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
-

\u5F02\u6B65\u53D8\u66F4

\u5982\u679C\u9700\u8981\u5F02\u6B65\u5730\u4FEE\u6539\u8F93\u5165\u6846\u7684\u503C\uFF0C\u53EF\u4EE5\u8BBE\u7F6Easync-change\u5C5E\u6027\uFF0C\u5E76\u5728change\u4E8B\u4EF6\u4E2D\u624B\u52A8\u4FEE\u6539value\u3002

<van-stepper value="{{ value }}" async-change bind:change="onChange" />
-
Page({
-  data: {
-    value: 1,
-  },
-
-  onChange(value) {
-    Toast.loading({ forbidClick: true });
-
-    setTimeout(() => {
-      Toast.clear();
-      this.setData({ value });
-    }, 500);
-  },
-});
-

\u81EA\u5B9A\u4E49\u5927\u5C0F

\u901A\u8FC7input-width\u5C5E\u6027\u8BBE\u7F6E\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u901A\u8FC7button-size\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u5927\u5C0F\u548C\u8F93\u5165\u6846\u9AD8\u5EA6\u3002

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26string-
value\u8F93\u5165\u503Cstring | number\u6700\u5C0F\u503C
min\u6700\u5C0F\u503Cstring | number1
max\u6700\u5927\u503Cstring | number-
step\u6B65\u957Fstring | number1
integer\u662F\u5426\u53EA\u5141\u8BB8\u8F93\u5165\u6574\u6570booleanfalse
disabled\u662F\u5426\u7981\u7528booleanfalse
disable-input\u662F\u5426\u7981\u7528\u8F93\u5165\u6846booleanfalse
async-change\u662F\u5426\u5F00\u542F\u5F02\u6B65\u53D8\u66F4\uFF0C\u5F00\u542F\u540E\u9700\u8981\u624B\u52A8\u63A7\u5236\u8F93\u5165\u503Cbooleanfalse
input-width\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxstring | number32px
button-size\u6309\u94AE\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px\uFF0C\u8F93\u5165\u6846\u9AD8\u5EA6\u4F1A\u548C\u6309\u94AE\u5927\u5C0F\u4FDD\u6301\u4E00\u81F4string | number28px
show-plus\u662F\u5426\u663E\u793A\u589E\u52A0\u6309\u94AEbooleantrue
show-minus\u662F\u5426\u663E\u793A\u51CF\u5C11\u6309\u94AEbooleantrue
decimal-length\u56FA\u5B9A\u663E\u793A\u7684\u5C0F\u6570\u4F4D\u6570number-
theme\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A roundstring-
disable-plus\u662F\u5426\u7981\u7528\u589E\u52A0\u6309\u94AEboolean-
disable-minus\u662F\u5426\u7981\u7528\u51CF\u5C11\u6309\u94AEboolean-
long-press\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BFbooleantrue
always-embed v1.9.3\u5F3A\u5236 input \u5904\u4E8E\u540C\u5C42\u72B6\u6001\uFF0C\u9ED8\u8BA4 focus \u65F6 input \u4F1A\u5207\u5230\u975E\u540C\u5C42\u72B6\u6001 (\u4EC5\u5728 iOS \u4E0B\u751F\u6548)booleanfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6event.detail: \u5F53\u524D\u8F93\u5165\u7684\u503C
bind:overlimit\u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1-
bind:plus\u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1-
bind:minus\u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1-
bind:focus\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1-
bind:blur\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1-

Slot

\u540D\u79F0\u8BF4\u660E
plus\u52A0\u53F7\u6309\u94AE
minus\u51CF\u53F7\u6309\u94AE

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
input-class\u8F93\u5165\u6846\u6837\u5F0F\u7C7B
plus-class\u52A0\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B
minus-class\u51CF\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B
`,18),Vt=[Lt],Ut={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Mt,Vt))}},Ot={class:"van-doc-markdown-body"},Gt=d(`

Steps \u6B65\u9AA4\u6761

\u4ECB\u7ECD

\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u6D41\u7A0B\u7684\u5404\u4E2A\u73AF\u8282\uFF0C\u8BA9\u7528\u6237\u4E86\u89E3\u5F53\u524D\u7684\u64CD\u4F5C\u5728\u6574\u4F53\u6D41\u7A0B\u4E2D\u7684\u4F4D\u7F6E\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-steps": "@vant/weapp/steps/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-steps steps="{{ steps }}" active="{{ active }}" />
-
Page({
-  data: {
-    steps: [
-      {
-        text: '\u6B65\u9AA4\u4E00',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-      },
-      {
-        text: '\u6B65\u9AA4\u4E8C',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-      },
-      {
-        text: '\u6B65\u9AA4\u4E09',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-      },
-      {
-        text: '\u6B65\u9AA4\u56DB',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-      },
-    ],
-  },
-});
-

\u81EA\u5B9A\u4E49\u6837\u5F0F

\u53EF\u4EE5\u901A\u8FC7 active-icon \u548C active-color \u5C5E\u6027\u8BBE\u7F6E\u6FC0\u6D3B\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u548C\u989C\u8272\u3002

<van-steps
-  steps="{{ steps }}"
-  active="{{ active }}"
-  active-icon="success"
-  active-color="#38f"
-/>
-

\u81EA\u5B9A\u4E49\u56FE\u6807

\u53EF\u4EE5\u901A\u8FC7 inactiveIcon \u548C activeIcon \u5C5E\u6027\u5206\u522B\u8BBE\u7F6E\u6BCF\u4E00\u9879\u7684\u56FE\u6807\u3002

<van-steps steps="{{ steps }}" active="{{ active }}" />
-
Page({
-  data: {
-    steps: [
-      {
-        text: '\u6B65\u9AA4\u4E00',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-        inactiveIcon: 'location-o',
-        activeIcon: 'success',
-      },
-      {
-        text: '\u6B65\u9AA4\u4E8C',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-        inactiveIcon: 'like-o',
-        activeIcon: 'plus',
-      },
-      {
-        text: '\u6B65\u9AA4\u4E09',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-        inactiveIcon: 'star-o',
-        activeIcon: 'cross',
-      },
-      {
-        text: '\u6B65\u9AA4\u56DB',
-        desc: '\u63CF\u8FF0\u4FE1\u606F',
-        inactiveIcon: 'phone-o',
-        activeIcon: 'fail',
-      },
-    ],
-  },
-});
-

\u7AD6\u5411\u6B65\u9AA4\u6761

\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6Edirection\u5C5E\u6027\u6765\u6539\u53D8\u6B65\u9AA4\u6761\u7684\u663E\u793A\u65B9\u5F0F\u3002

<van-steps
-  steps="{{ steps }}"
-  active="{{ active }}"
-  direction="vertical"
-  active-color="#ee0a24"
-/>
-

API

Steps Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
active\u5F53\u524D\u6B65\u9AA4number0
steps\u6B65\u9AA4\u914D\u7F6E\u96C6\u5408\uFF0C\u89C1\u4E0B\u9762\u914D\u7F6E\u9879Step \u914D\u7F6E\u9879\u6570\u7EC4[]
direction\u663E\u793A\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontal verticalstringhorizontal
active-color\u6FC0\u6D3B\u72B6\u6001\u989C\u8272string#07c160
inactive-color\u672A\u6FC0\u6D3B\u72B6\u6001\u989C\u8272string#969799
active-icon\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6stringchecked
inactive-icon\u672A\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-

Events

\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:click-step\u70B9\u51FB\u6B65\u9AA4\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6event.detail:\u5F53\u524D\u6B65\u9AA4\u7684\u7D22\u5F15

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
desc-class\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B

Step \u914D\u7F6E\u9879

\u952E\u540D\u8BF4\u660E\u7C7B\u578B
text\u5F53\u524D\u6B65\u9AA4\u540D\u79F0string
desc\u5F53\u524D\u6B65\u9AA4\u63CF\u8FF0\u4FE1\u606Fstring
activeIcon\u5F53\u524D\u6B65\u9AA4\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807string
inactiveIcon\u5F53\u524D\u6B65\u9AA4\u672A\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string
`,13),Wt=[Gt],Ht={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ot,Wt))}},Kt={class:"van-doc-markdown-body"},Qt=d(`

Sticky \u7C98\u6027\u5E03\u5C40

\u4ECB\u7ECD

Sticky \u7EC4\u4EF6\u4E0E CSS \u4E2Dposition: sticky\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u4E00\u81F4\uFF0C\u5F53\u7EC4\u4EF6\u5728\u5C4F\u5E55\u8303\u56F4\u5185\u65F6\uFF0C\u4F1A\u6309\u7167\u6B63\u5E38\u7684\u5E03\u5C40\u6392\u5217\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u51FA\u5C4F\u5E55\u8303\u56F4\u65F6\uFF0C\u59CB\u7EC8\u4F1A\u56FA\u5B9A\u5728\u5C4F\u5E55\u9876\u90E8\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-sticky": "@vant/weapp/sticky/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u5C06\u5185\u5BB9\u5305\u88F9\u5728Sticky\u7EC4\u4EF6\u5185\u5373\u53EF\u3002

<van-sticky>
-  <van-button type="primary">\u57FA\u7840\u7528\u6CD5</van-button>
-</van-sticky>
-

\u5438\u9876\u8DDD\u79BB

\u901A\u8FC7offset-top\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002

<van-sticky offset-top="{{ 50 }}">
-  <van-button type="info">\u5438\u9876\u8DDD\u79BB</van-button>
-</van-sticky>
-

\u6307\u5B9A\u5BB9\u5668

\u901A\u8FC7container\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u9875\u9762\u6EDA\u52A8\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u59CB\u7EC8\u4FDD\u6301\u5728\u5BB9\u5668\u8303\u56F4\u5185\uFF0C\u5F53\u7EC4\u4EF6\u5373\u5C06\u8D85\u51FA\u5BB9\u5668\u5E95\u90E8\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u539F\u4F4D\u7F6E\u3002

<view id="container" style="height: 150px;">
-  <van-sticky container="{{ container }}">
-    <van-button type="warning">\u6307\u5B9A\u5BB9\u5668</van-button>
-  </van-sticky>
-</view>
-
Page({
-  data: {
-    container: null,
-  },
-
-  onReady() {
-    this.setData({
-      container: () => wx.createSelectorQuery().select('#container'),
-    });
-  },
-});
-

\u5D4C\u5957\u5728 scroll-view \u5185\u4F7F\u7528

\u901A\u8FC7 scroll-top \u4E0E offset-top \u5C5E\u6027\u53EF\u4EE5\u5B9E\u73B0\u5728 scroll-view \u5185\u5D4C\u5957\u4F7F\u7528\u3002

<scroll-view
-  bind:scroll="onScroll"
-  scroll-y
-  id="scroller"
-  style="height: 200px;"
->
-  <view style="height: 400px; padding-top: 50px;">
-    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
-      <van-button type="warning">\u5D4C\u5957\u5728 scroll-view \u5185</van-button>
-    </van-sticky>
-  </view>
-</scroll-view>
-
Page({
-  data: {
-    scrollTop: 0,
-    offsetTop: 0,
-  },
-
-  onScroll(event) {
-    wx.createSelectorQuery()
-      .select('#scroller')
-      .boundingClientRect((res) => {
-        this.setData({
-          scrollTop: event.detail.scrollTop,
-          offsetTop: res.top,
-        });
-      })
-      .exec();
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
offset-top\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u5355\u4F4Dpxnumber0
z-index\u5438\u9876\u65F6\u7684 z-indexnumber99
container\u4E00\u4E2A\u51FD\u6570\uFF0C\u8FD4\u56DE\u5BB9\u5668\u5BF9\u5E94\u7684 NodesRef \u8282\u70B9function-
scroll-top\u5F53\u524D\u6EDA\u52A8\u533A\u57DF\u7684\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u975E null \u65F6\u4F1A\u7981\u7528\u9875\u9762\u6EDA\u52A8\u4E8B\u4EF6\u7684\u76D1\u542Cnumber-

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:scroll\u6EDA\u52A8\u65F6\u89E6\u53D1{ scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 }
`,11),Jt=[Qt],Xt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Kt,Jt))}},Zt={class:"van-doc-markdown-body"},Yt=d(`

SubmitBar \u63D0\u4EA4\u8BA2\u5355\u680F

\u4ECB\u7ECD

\u7528\u4E8E\u5C55\u793A\u8BA2\u5355\u91D1\u989D\u4E0E\u63D0\u4EA4\u8BA2\u5355\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-submit-bar": "@vant/weapp/submit-bar/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-submit-bar
-  price="{{ 3050 }}"
-  button-text="\u63D0\u4EA4\u8BA2\u5355"
-  bind:submit="onSubmit"
-/>
-

\u7981\u7528\u72B6\u6001

\u7981\u7528\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1submit\u4E8B\u4EF6\u3002

<van-submit-bar
-  disabled
-  price="{{ 3050 }}"
-  button-text="\u63D0\u4EA4\u8BA2\u5355"
-  tip="\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, \u6211\u4EEC\u5DF2\u4E3A\u60A8\u63A8\u8350\u5FEB\u9012"
-  tip-icon="info-o"
-  bind:submit="onSubmit"
-/>
-

\u52A0\u8F7D\u72B6\u6001

\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1submit\u4E8B\u4EF6\u3002

<van-submit-bar
-  loading
-  price="{{ 3050 }}"
-  button-text="\u63D0\u4EA4\u8BA2\u5355"
-  bind:submit="onSubmit"
-/>
-

\u9AD8\u7EA7\u7528\u6CD5

\u901A\u8FC7\u63D2\u69FD\u63D2\u5165\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-submit-bar
-  price="{{ 3050 }}"
-  button-text="\u63D0\u4EA4\u8BA2\u5355"
-  bind:submit="onClickButton"
-  tip="{{ true }}"
->
-  <van-tag type="primary">\u6807\u7B7E</van-tag>
-  <view slot="tip">\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, <text>\u4FEE\u6539\u5730\u5740</text></view>
-</van-submit-bar>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
price\u4EF7\u683C\uFF08\u5355\u4F4D\u5206\uFF09number-
label\u4EF7\u683C\u6587\u6848string\u5408\u8BA1\uFF1A
suffix-label\u4EF7\u683C\u53F3\u4FA7\u6587\u6848string-
button-text\u6309\u94AE\u6587\u5B57string-
button-type\u6309\u94AE\u7C7B\u578Bstringdanger
tip\u63D0\u793A\u6587\u6848string | boolean-
tip-icon\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
disabled\u662F\u5426\u7981\u7528\u6309\u94AEbooleanfalse
loading\u662F\u5426\u663E\u793A\u52A0\u8F7D\u4E2D\u7684\u6309\u94AEbooleanfalse
currency\u8D27\u5E01\u7B26\u53F7string\xA5
safe-area-inset-bottom\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BBbooleantrue
decimal-length\u4EF7\u683C\u5C0F\u6570\u70B9\u540E\u4F4D\u6570number2

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:submit\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03-

Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u5DE6\u4FA7\u5185\u5BB9
top\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u4E0A\u65B9\u5185\u5BB9
tip\u63D0\u793A\u6587\u6848\u4E2D\u7684\u989D\u5916\u64CD\u4F5C\u548C\u8BF4\u660E

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
price-class\u4EF7\u683C\u6837\u5F0F\u7C7B
button-class\u6309\u94AE\u6837\u5F0F\u7C7B
bar-class\u8BA2\u5355\u680F\u6837\u5F0F\u7C7B
`,13),sn=[Yt],an={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Zt,sn))}},tn={class:"van-doc-markdown-body"},nn=d(`

SwipeCell \u6ED1\u52A8\u5355\u5143\u683C

\u4ECB\u7ECD

\u53EF\u4EE5\u5DE6\u53F3\u6ED1\u52A8\u6765\u5C55\u793A\u64CD\u4F5C\u6309\u94AE\u7684\u5355\u5143\u683C\u7EC4\u4EF6\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-swipe-cell": "@vant/weapp/swipe-cell/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
-  <view slot="left" class="van-swipe-cell__left">\u9009\u62E9</view>
-  <van-cell-group>
-    <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
-  </van-cell-group>
-  <view slot="right" class="van-swipe-cell__right">\u5220\u9664</view>
-</van-swipe-cell>
-

\u5F02\u6B65\u5173\u95ED

\u5F53\u5F00\u542Fasync-close\u65F6\uFF0C \u901A\u8FC7\u7ED1\u5B9Aclose\u4E8B\u4EF6\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u5185\u5BB9\u70B9\u51FB\u65F6\u7684\u5173\u95ED\u884C\u4E3A\u3002

<van-swipe-cell
-  id="swipe-cell"
-  right-width="{{ 65 }}"
-  left-width="{{ 65 }}"
-  async-close
-  bind:close="onClose"
->
-  <view slot="left">\u9009\u62E9</view>
-  <van-cell-group>
-    <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
-  </van-cell-group>
-  <view slot="right">\u5220\u9664</view>
-</van-swipe-cell>
-
Page({
-  onClose(event) {
-    const { position, instance } = event.detail;
-    switch (position) {
-      case 'left':
-      case 'cell':
-        instance.close();
-        break;
-      case 'right':
-        Dialog.confirm({
-          message: '\u786E\u5B9A\u5220\u9664\u5417\uFF1F',
-        }).then(() => {
-          instance.close();
-        });
-        break;
-    }
-  },
-});
-

\u4E3B\u52A8\u6253\u5F00

<van-swipe-cell
-  id="swipe-cell2"
-  right-width="{{ 65 }}"
-  left-width="{{ 65 }}"
-  name="\u793A\u4F8B"
-  bind:open="onOpen"
->
-  <view slot="left" class="van-swipe-cell__left">\u9009\u62E9</view>
-  <van-cell-group>
-    <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />
-  </van-cell-group>
-  <view slot="right" class="van-swipe-cell__right">\u5220\u9664</view>
-</van-swipe-cell>
-
Page({
-  onOpen(event) {
-    const { position, name } = event.detail;
-    switch (position) {
-      case 'left':
-        Notify({
-          type: 'primary',
-          message: \`\${name}\${position}\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1\`,
-        });
-        break;
-      case 'right':
-        Notify({
-          type: 'primary',
-          message: \`\${name}\${position}\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1\`,
-        });
-        break;
-    }
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728 close \u4E8B\u4EF6\u7684\u53C2\u6570\u4E2D\u83B7\u53D6\u5230string | number-
left-width\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6number0
right-width\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6number0
async-close\u662F\u5426\u5F02\u6B65\u5173\u95EDbooleanfalse
disabled v1.3.4\u662F\u5426\u7981\u7528\u6ED1\u52A8booleanfalse

Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9
left\u5DE6\u4FA7\u6ED1\u52A8\u5185\u5BB9
right\u53F3\u4FA7\u6ED1\u52A8\u5185\u5BB9

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click\u70B9\u51FB\u65F6\u89E6\u53D1\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (left right cell outside)
bind:close\u5173\u95ED\u65F6\u89E6\u53D1{ position: 'left' | 'right' , instance , name: string }
bind:open\u6253\u5F00\u65F6\u89E6\u53D1{ position: 'left' | 'right' , name: string }

close \u53C2\u6570

\u53C2\u6570\u7C7B\u578B\u8BF4\u660E
positionstring\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (left right cell outside)
instanceobjectSwipeCell \u5B9E\u4F8B
name\u6807\u8BC6\u7B26string

\u65B9\u6CD5

\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 SwipeCell \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
openposition: left | right-\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F
close--\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F
`,13),ln=[nn],en={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",tn,ln))}},pn={class:"van-doc-markdown-body"},dn=d(`

Switch \u5F00\u5173

\u4ECB\u7ECD

\u7528\u4E8E\u5728\u6253\u5F00\u548C\u5173\u95ED\u72B6\u6001\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-switch": "@vant/weapp/switch/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-switch checked="{{ checked }}" bind:change="onChange" />
-
Page({
-  data: {
-    checked: true,
-  },
-
-  onChange({ detail }) {
-    // \u9700\u8981\u624B\u52A8\u5BF9 checked \u72B6\u6001\u8FDB\u884C\u66F4\u65B0
-    this.setData({ checked: detail });
-  },
-});
-

\u7981\u7528\u72B6\u6001

<van-switch checked="{{ checked }}" disabled />
-

\u52A0\u8F7D\u72B6\u6001

<van-switch checked="{{ checked }}" loading />
-

\u81EA\u5B9A\u4E49\u5927\u5C0F

<van-switch checked="{{ checked }}" size="24px" />
-

\u81EA\u5B9A\u4E49\u989C\u8272

<van-switch
-  checked="{{ checked }}"
-  active-color="#07c160"
-  inactive-color="#ee0a24"
-/>
-

\u5F02\u6B65\u63A7\u5236

<van-switch checked="{{ checked }}" bind:change="onChange" />
-
Page({
-  data: {
-    checked: true,
-  },
-
-  onChange({ detail }) {
-    wx.showModal({
-      title: '\u63D0\u793A',
-      content: '\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F',
-      success: (res) => {
-        if (res.confirm) {
-          this.setData({ checked2: detail });
-        }
-      },
-    });
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26string-
checked\u5F00\u5173\u9009\u4E2D\u72B6\u6001anyfalse
loading\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001booleanfalse
disabled\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001booleanfalse
size\u5F00\u5173\u5C3A\u5BF8string30px
active-color\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272string#1989fa
inactive-color\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272string#fff
active-value\u6253\u5F00\u65F6\u7684\u503Canytrue
inactive-value\u5173\u95ED\u65F6\u7684\u503Canyfalse

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:change\u5F00\u5173\u72B6\u6001\u5207\u6362\u56DE\u8C03event.detail: \u662F\u5426\u9009\u4E2D\u5F00\u5173

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
node-class\u5706\u70B9\u6837\u5F0F\u7C7B
`,14),cn=[dn],on={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",pn,cn))}},rn={class:"van-doc-markdown-body"},hn=d(`

Tab \u6807\u7B7E\u9875

\u4ECB\u7ECD

\u9009\u9879\u5361\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-tab": "@vant/weapp/tab/index",
-  "van-tabs": "@vant/weapp/tabs/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7active\u8BBE\u5B9A\u5F53\u524D\u6FC0\u6D3B\u6807\u7B7E\u5BF9\u5E94\u7684\u7D22\u5F15\u503C\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u542F\u7528\u7B2C\u4E00\u4E2A\u6807\u7B7E\u3002

<van-tabs active="{{ active }}" bind:change="onChange">
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
-</van-tabs>
-
Page({
-  data: {
-    active: 1,
-  },
-
-  onChange(event) {
-    wx.showToast({
-      title: \`\u5207\u6362\u5230\u6807\u7B7E \${event.detail.name}\`,
-      icon: 'none',
-    });
-  },
-});
-

\u901A\u8FC7\u540D\u79F0\u5339\u914D

\u5728\u6807\u7B7E\u6307\u5B9Aname\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cactive\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684name\uFF08\u6B64\u65F6\u65E0\u6CD5\u901A\u8FC7\u7D22\u5F15\u503C\u6765\u5339\u914D\u6807\u7B7E\uFF09\u3002

<van-tabs active="a">
-  <van-tab title="\u6807\u7B7E 1" name="a">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2" name="b">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3" name="c">\u5185\u5BB9 3</van-tab>
-</van-tabs>
-

\u6A2A\u5411\u6EDA\u52A8

\u591A\u4E8E 5 \u4E2A\u6807\u7B7E\u65F6\uFF0CTab \u53EF\u4EE5\u6A2A\u5411\u6EDA\u52A8\u3002

<van-tabs active="{{ active }}">
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
-  <van-tab title="\u6807\u7B7E 5">\u5185\u5BB9 5</van-tab>
-  <van-tab title="\u6807\u7B7E 6">\u5185\u5BB9 6</van-tab>
-</van-tabs>
-

\u7981\u7528\u6807\u7B7E

\u8BBE\u7F6Edisabled\u5C5E\u6027\u5373\u53EF\u7981\u7528\u6807\u7B7E\u3002\u5982\u679C\u9700\u8981\u76D1\u542C\u7981\u7528\u6807\u7B7E\u7684\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u53EF\u4EE5\u5728van-tabs\u4E0A\u76D1\u542Cdisabled\u4E8B\u4EF6\u3002

<van-tabs bind:disabled="onClickDisabled">
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2" disabled>\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-</van-tabs>
-
Page({
-  onClickDisabled(event) {
-    wx.showToast({
-      title: \`\u6807\u7B7E \${event.detail.name} \u5DF2\u88AB\u7981\u7528\`,
-      icon: 'none',
-    });
-  },
-});
-

\u6837\u5F0F\u98CE\u683C

Tab\u652F\u6301\u4E24\u79CD\u6837\u5F0F\u98CE\u683C\uFF1Aline\u548Ccard\uFF0C\u9ED8\u8BA4\u4E3Aline\u6837\u5F0F\uFF0C\u53EF\u4EE5\u901A\u8FC7type\u5C5E\u6027\u4FEE\u6539\u6837\u5F0F\u98CE\u683C\u3002

<van-tabs type="card">
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-</van-tabs>
-

\u70B9\u51FB\u4E8B\u4EF6

\u53EF\u4EE5\u5728van-tabs\u4E0A\u7ED1\u5B9Aclick\u4E8B\u4EF6\uFF0C\u5728\u56DE\u8C03\u53C2\u6570\u7684event.detail\u4E2D\u53EF\u4EE5\u53D6\u5F97\u88AB\u70B9\u51FB\u6807\u7B7E\u7684\u6807\u9898\u548C\u6807\u8BC6\u7B26\u3002

<van-tabs bind:click="onClick">
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-</van-tabs>
-
Page({
-  onClick(event) {
-    wx.showToast({
-      title: \`\u70B9\u51FB\u6807\u7B7E \${event.detail.name}\`,
-      icon: 'none',
-    });
-  },
-});
-

\u7C98\u6027\u5E03\u5C40

\u901A\u8FC7sticky\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u7C98\u6027\u5E03\u5C40\uFF0C\u7C98\u6027\u5E03\u5C40\u4E0B\uFF0C\u5F53 Tab \u6EDA\u52A8\u5230\u9876\u90E8\u65F6\u4F1A\u81EA\u52A8\u5438\u9876\u3002

<van-tabs sticky>
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
-</van-tabs>
-

\u5207\u6362\u52A8\u753B

\u53EF\u4EE5\u901A\u8FC7animated\u6765\u8BBE\u7F6E\u662F\u5426\u542F\u7528\u5207\u6362 tab \u65F6\u7684\u52A8\u753B\u3002

<van-tabs animated>
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
-</van-tabs>
-

\u6ED1\u52A8\u5207\u6362

\u901A\u8FC7swipeable\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6ED1\u52A8\u5207\u6362\u6807\u7B7E\u9875\u3002

<van-tabs swipeable>
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
-</van-tabs>
-

\u5D4C\u5957 popup

\u5982\u679C\u5C06 van-tabs \u5D4C\u5957\u5728 van-popup \u7B49\u4F1A\u9690\u85CF\u5185\u5BB9\u7684\u7EC4\u4EF6\u6216\u8282\u70B9\u5185\uFF0C\u5F53 van-tabs \u663E\u793A\u65F6\u4E0B\u5212\u7EBF\u5C06\u4E0D\u4F1A\u6B63\u5E38\u663E\u793A\u3002

\u6B64\u65F6\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 wx:if \u624B\u52A8\u63A7\u5236 van-tabs \u7684\u6E32\u67D3\u6765\u89C4\u907F\u8FD9\u79CD\u573A\u666F\u3002

<van-popup show="{{ show }}">
-  <van-tabs wx:if="{{ show }}">
-    <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-    <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-    <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-    <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
-  </van-tabs>
-</van-popup>
-

\u5F02\u6B65\u5207\u6362

\u901A\u8FC7 before-change \u4E8B\u4EF6\u53EF\u4EE5\u5728\u5207\u6362\u6807\u7B7E\u524D\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\uFF0C\u5B9E\u73B0\u5207\u6362\u524D\u6821\u9A8C\u3001\u5F02\u6B65\u5207\u6362\u7684\u76EE\u7684

<van-tabs active="{{ active }}" use-before-change="{{ true }}" bind:change="onChange" bind:before-change="onBeforeChange" >
-  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>
-  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>
-  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>
-  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>
-</van-tabs>
-
Page({
-  data: {
-    active: 1,
-  },
-
-  onChange(event) {
-    wx.showToast({
-      title: \`\u5207\u6362\u5230\u6807\u7B7E \${event.detail.name}\`,
-      icon: 'none',
-    });
-  },
-  onBeforeChange(event) {
-    const { callback, title } = event.detail;
-    
-    wx.showModal({
-      title: '\u5F02\u6B65\u5207\u6362',
-      content: \`\u786E\u5B9A\u8981\u5207\u6362\u81F3 \${title} tab\u5417\uFF1F\`,
-      success: (res) => {
-        if (res.confirm) {
-          callback(true)
-        } else if (res.cancel) {
-          callback(false)
-        }
-      },
-    })
-  }
-});
-

API

Tabs Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
type\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3Acardstringline
color\u6807\u7B7E\u4E3B\u9898\u8272string#ee0a24
active\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u6807\u8BC6\u7B26string | number0
duration\u52A8\u753B\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2number0.3
line-width\u5E95\u90E8\u6761\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4Dpxstring | number40px
line-height\u5E95\u90E8\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4Dpxstring | number3px
animated\u662F\u5426\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753Bbooleanfalse
border\u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846\uFF0C\u4EC5\u5728 line \u98CE\u683C\u4E0B\u751F\u6548booleanfalse
ellipsis\u662F\u5426\u7701\u7565\u8FC7\u957F\u7684\u6807\u9898\u6587\u5B57booleantrue
sticky\u662F\u5426\u4F7F\u7528\u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40booleanfalse
swipeable\u662F\u5426\u5F00\u542F\u624B\u52BF\u6ED1\u52A8\u5207\u6362booleanfalse
lazy-render\u662F\u5426\u5F00\u542F\u6807\u7B7E\u9875\u5185\u5BB9\u5EF6\u8FDF\u6E32\u67D3booleantrue
offset-top\u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40\u4E0B\u4E0E\u9876\u90E8\u7684\u6700\u5C0F\u8DDD\u79BB\uFF0C\u5355\u4F4Dpxnumber-
swipe-threshold\u6EDA\u52A8\u9608\u503C\uFF0C\u6807\u7B7E\u6570\u91CF\u8D85\u8FC7\u9608\u503C\u4E14\u603B\u5BBD\u5EA6\u8D85\u8FC7\u6807\u7B7E\u680F\u5BBD\u5EA6\u65F6\u5F00\u59CB\u6A2A\u5411\u6EDA\u52A8number5
title-active-color\u6807\u9898\u9009\u4E2D\u6001\u989C\u8272string-
title-inactive-color\u6807\u9898\u9ED8\u8BA4\u6001\u989C\u8272string-
z-indexz-index \u5C42\u7EA7number1
use-before-change v1.10.10\u662F\u5426\u5F00\u542F\u5207\u6362\u524D\u6821\u9A8Cbooleanfalse

Tab Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26string | number\u6807\u7B7E\u7684\u7D22\u5F15\u503C
title\u6807\u9898string-
disabled\u662F\u5426\u7981\u7528\u6807\u7B7Ebooleanfalse
dot\u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9boolean-
info\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606Fstring | number-
title-style\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0Fstring-

Tabs Slot

\u540D\u79F0\u8BF4\u660E
nav-left\u6807\u9898\u5DE6\u4FA7\u5185\u5BB9
nav-right\u6807\u9898\u53F3\u4FA7\u5185\u5BB9

Tab Slot

\u540D\u79F0\u8BF4\u660E
-\u6807\u7B7E\u9875\u5185\u5BB9

Tabs Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:click\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898
bind:before-change v1.10.10tab \u5207\u6362\u524D\u4F1A\u89E6\u53D1\uFF0C\u5728\u56DE\u8C03\u51FD\u6570\u4E2D\u8FD4\u56DE false \u53EF\u7EC8\u6B62 tab \u5207\u6362\uFF0C\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u540C\u65F6\u9700\u8981\u5C06use-before-change\u5C5E\u6027\u8BBE\u7F6E\u4E3Atrueevent.detail.name: \u5F53\u524D\u5207\u6362\u7684 tab \u6807\u8BC6\u7B26\uFF0C event.detail.title: \u5F53\u524D\u5207\u6362\u7684 tab \u6807\u9898\uFF0C event.detail.index: \u5F53\u524D\u5207\u6362\u7684 tab \u4E0B\u6807\uFF0Cevent.detail.callback: \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528callback(false)\u7EC8\u6B62 tab \u5207\u6362
bind:change\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E\u6539\u53D8\u65F6\u89E6\u53D1name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898
bind:disabled\u70B9\u51FB\u88AB\u7981\u7528\u7684\u6807\u7B7E\u65F6\u89E6\u53D1name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898
bind:scroll\u6EDA\u52A8\u65F6\u89E6\u53D1{ scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 }

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
nav-class\u6807\u7B7E\u680F\u6837\u5F0F\u7C7B
tab-class\u6807\u7B7E\u6837\u5F0F\u7C7B
tab-active-class\u6807\u7B7E\u6FC0\u6D3B\u6001\u6837\u5F0F\u7C7B
wrap-class\u6807\u7B7E\u680F\u6839\u8282\u70B9\u6837\u5F0F\u7C7B

\u65B9\u6CD5

\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Tabs \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
resize--\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8

\u5E38\u89C1\u95EE\u9898

\u7EC4\u4EF6\u4ECE\u9690\u85CF\u72B6\u6001\u5207\u6362\u5230\u663E\u793A\u72B6\u6001\u65F6\uFF0C\u5E95\u90E8\u6761\u4F4D\u7F6E\u9519\u8BEF\uFF1F

Tabs \u7EC4\u4EF6\u5728\u6302\u8F7D\u65F6\uFF0C\u4F1A\u83B7\u53D6\u81EA\u8EAB\u7684\u5BBD\u5EA6\uFF0C\u5E76\u8BA1\u7B97\u51FA\u5E95\u90E8\u6761\u7684\u4F4D\u7F6E\u3002\u5982\u679C\u7EC4\u4EF6\u4E00\u5F00\u59CB\u5904\u4E8E\u9690\u85CF\u72B6\u6001\uFF0C\u5219\u83B7\u53D6\u5230\u7684\u5BBD\u5EA6\u6C38\u8FDC\u4E3A 0\uFF0C\u56E0\u6B64\u65E0\u6CD5\u5C55\u793A\u5E95\u90E8\u6761\u4F4D\u7F6E\u3002

\u89E3\u51B3\u65B9\u6CD5

\u65B9\u6CD5\u4E00\uFF0C\u4F7F\u7528 wx:if \u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\uFF0C\u4F7F\u7EC4\u4EF6\u91CD\u65B0\u521D\u59CB\u5316\u3002

<van-tabs wx:if="show" />
-

\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\u3002

<van-tabs id="tabs" />
-
this.selectComponent('#tabs').resize();
-
`,25),un=[hn],gn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",rn,un))}},jn={class:"van-doc-markdown-body"},mn=d(`

Tabbar \u6807\u7B7E\u680F

\u4ECB\u7ECD

\u5E95\u90E8\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u9875\u9762\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-tabbar": "@vant/weapp/tabbar/index",
-  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-tabbar active="{{ active }}" bind:change="onChange">
-  <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>
-</van-tabbar>
-
Page({
-  data: {
-    active: 0,
-  },
-  onChange(event) {
-    // event.detail \u7684\u503C\u4E3A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u7D22\u5F15
-    this.setData({ active: event.detail });
-  },
-});
-

\u901A\u8FC7\u540D\u79F0\u5339\u914D

\u5728\u6807\u7B7E\u6307\u5B9Aname\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0Cv-model\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684name\u3002

<van-tabbar active="{{ active }}" bind:change="onChange">
-  <van-tabbar-item name="home" icon="home-o">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item name="search" icon="search">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item name="friends" icon="friends-o">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item name="setting" icon="setting-o">\u6807\u7B7E</van-tabbar-item>
-</van-tabbar>
-
Page({
-  data: {
-    active: 'home',
-  },
-  onChange(event) {
-    this.setData({ active: event.detail });
-  },
-});
-

\u663E\u793A\u5FBD\u6807

<van-tabbar active="{{ active }}" bind:change="onChange">
-  <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="search" dot>\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="friends-o" info="5">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="setting-o" info="20">\u6807\u7B7E</van-tabbar-item>
-</van-tabbar>
-

\u81EA\u5B9A\u4E49\u56FE\u6807

\u53EF\u4EE5\u901A\u8FC7 slot \u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5176\u4E2D icon slot \u4EE3\u8868\u672A\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\uFF0Cicon-active slot \u4EE3\u8868\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u3002

<van-tabbar active="{{ active }}" bind:change="onChange">
-  <van-tabbar-item info="3">
-    <image
-      slot="icon"
-      src="{{ icon.normal }}"
-      mode="aspectFit"
-      style="width: 30px; height: 18px;"
-    />
-    <image
-      slot="icon-active"
-      src="{{ icon.active }}"
-      mode="aspectFit"
-      style="width: 30px; height: 18px;"
-    />
-    \u81EA\u5B9A\u4E49
-  </van-tabbar-item>
-  <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>
-</van-tabbar>
-
Page({
-  data: {
-    active: 0,
-    icon: {
-      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
-      active: 'https://img.yzcdn.cn/vant/user-active.png',
-    },
-  },
-  onChange(event) {
-    this.setData({ active: event.detail });
-  },
-});
-

\u81EA\u5B9A\u4E49\u989C\u8272

<van-tabbar
-  active="{{ active }}"
-  active-color="#07c160"
-  inactive-color="#000"
-  bind:change="onChange"
->
-  <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>
-  <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>
-</van-tabbar>
-
Page({
-  data: {
-    active: 0,
-  },
-  onChange(event) {
-    this.setData({ active: event.detail });
-  },
-});
-

\u5207\u6362\u6807\u7B7E\u4E8B\u4EF6

<van-tabbar active="{{ active }}" bind:change="onChange">
-  <van-tabbar-item icon="home-o">\u6807\u7B7E1</van-tabbar-item>
-  <van-tabbar-item icon="search">\u6807\u7B7E2</van-tabbar-item>
-  <van-tabbar-item icon="friends-o">\u6807\u7B7E3</van-tabbar-item>
-  <van-tabbar-item icon="setting-o">\u6807\u7B7E4</van-tabbar-item>
-</van-tabbar>
-
Page({
-  data: {
-    active: 0,
-  },
-  onClick(event) {
-    wx.showToast({
-      title: \`\u70B9\u51FB\u6807\u7B7E \${event.detail + 1}\`,
-      icon: 'none',
-    });
-  },
-});
-

\u7ED3\u5408\u81EA\u5B9A\u4E49 tabBar

\u8BF7\u53C2\u8003 \u5FAE\u4FE1\u5B98\u65B9\u6587\u6863 \u4E0E \u4EE3\u7801\u7247\u6BB5\u3002

API

Tabbar Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
active\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15number-
fixed\u662F\u5426\u56FA\u5B9A\u5728\u5E95\u90E8booleantrue
placeholder\u56FA\u5B9A\u5728\u5E95\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20booleanfalse
border\u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846booleantrue
z-index\u5143\u7D20 z-indexnumber1
active-color\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272string#1989fa
inactive-color\u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272string#7d7e80
safe-area-inset-bottom\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BBbooleantrue

Tabbar Event

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:change\u5207\u6362\u6807\u7B7E\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u540D\u79F0\u6216\u7D22\u5F15\u503C

TabbarItem Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26string | number\u5F53\u524D\u6807\u7B7E\u7684\u7D22\u5F15\u503C
icon\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6string-
icon-prefix\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027stringvan-icon
dot\u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9boolean-
info\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606Fstring | number-
url v1.10.13\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740, \u9700\u8981\u4EE5 / \u5F00\u5934string-
link-type v1.10.13\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A redirectTo\u3001switchTab\u3001reLaunchstringredirectTo

TabbarItem Slot

\u540D\u79F0\u8BF4\u660E
icon\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807
icon-active\u9009\u4E2D\u65F6\u7684\u56FE\u6807
`,16),bn=[mn],vn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",jn,bn))}},qn={class:"van-doc-markdown-body"},fn=d(`

Tag \u6807\u7B7E

\u4ECB\u7ECD

\u7528\u4E8E\u6807\u8BB0\u5173\u952E\u8BCD\u548C\u6982\u62EC\u4E3B\u8981\u5185\u5BB9\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-tag": "@vant/weapp/tag/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7 type \u5C5E\u6027\u63A7\u5236\u6807\u7B7E\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u7070\u8272\u3002

<van-tag type="primary">\u6807\u7B7E</van-tag>
-<van-tag type="success">\u6807\u7B7E</van-tag>
-<van-tag type="danger">\u6807\u7B7E</van-tag>
-<van-tag type="warning">\u6807\u7B7E</van-tag>
-

\u7A7A\u5FC3\u6837\u5F0F

\u8BBE\u7F6E plain \u5C5E\u6027\u8BBE\u7F6E\u4E3A\u7A7A\u5FC3\u6837\u5F0F\u3002

<van-tag plain type="primary">\u6807\u7B7E</van-tag>
-<van-tag plain type="success">\u6807\u7B7E</van-tag>
-<van-tag plain type="danger">\u6807\u7B7E</van-tag>
-<van-tag plain type="warning">\u6807\u7B7E</van-tag>
-

\u5706\u89D2\u6837\u5F0F

\u901A\u8FC7 round \u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002

<van-tag round type="primary">\u6807\u7B7E</van-tag>
-<van-tag round type="success">\u6807\u7B7E</van-tag>
-<van-tag round type="danger">\u6807\u7B7E</van-tag>
-<van-tag round type="warning">\u6807\u7B7E</van-tag>
-

\u6807\u8BB0\u6837\u5F0F

\u901A\u8FC7 mark \u8BBE\u7F6E\u4E3A\u6807\u8BB0\u6837\u5F0F(\u534A\u5706\u89D2)\u3002

<van-tag mark type="primary">\u6807\u7B7E</van-tag>
-<van-tag mark type="success">\u6807\u7B7E</van-tag>
-<van-tag mark type="danger">\u6807\u7B7E</van-tag>
-<van-tag mark type="warning">\u6807\u7B7E</van-tag>
-

\u81EA\u5B9A\u4E49\u989C\u8272

<van-tag color="#f2826a">\u6807\u7B7E</van-tag>
-<van-tag color="#7232dd">\u6807\u7B7E</van-tag>
-<van-tag color="#7232dd" plain>\u6807\u7B7E</van-tag>
-<van-tag color="#ffe1e1" text-color="#ad0000">\u6807\u7B7E</van-tag>
-

\u6807\u7B7E\u5927\u5C0F

<van-tag type="danger">\u6807\u7B7E</van-tag>
-<van-tag type="danger" size="medium">\u6807\u7B7E</van-tag>
-<van-tag type="danger" size="large">\u6807\u7B7E</van-tag>
-

\u53EF\u5173\u95ED\u6807\u7B7E

\u6DFB\u52A0 closeable \u5C5E\u6027\u8868\u793A\u6807\u7B7E\u662F\u53EF\u5173\u95ED\u7684\uFF0C\u5173\u95ED\u6807\u7B7E\u65F6\u4F1A\u89E6\u53D1 close \u4E8B\u4EF6\uFF0C\u5728 close \u4E8B\u4EF6\u4E2D\u53EF\u4EE5\u6267\u884C\u9690\u85CF\u6807\u7B7E\u7684\u903B\u8F91\u3002

<van-tag
-  wx:if="{{ show.primary }}"
-  closeable
-  size="medium"
-  type="primary"
-  id="primary"
-  bind:close="onClose"
->
-  \u6807\u7B7E
-</van-tag>
-<van-tag
-  wx:if="{{ show.success }}"
-  closeable
-  size="medium"
-  type="success"
-  id="success"
-  bind:close="onClose"
->
-  \u6807\u7B7E
-</van-tag>
-
Page({
-  data: {
-    show: {
-      primary: true,
-      success: true,
-    },
-  },
-  onClose(event) {
-    this.setData({
-      [\`show.\${event.target.id}\`]: false,
-    });
-  },
-});
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
type\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A primary success danger warningstring-
size\u5927\u5C0F, \u53EF\u9009\u503C\u4E3A large mediumstring-
color\u6807\u7B7E\u989C\u8272string-
plain\u662F\u5426\u4E3A\u7A7A\u5FC3\u6837\u5F0Fbooleanfalse
round\u662F\u5426\u4E3A\u5706\u89D2\u6837\u5F0Fbooleanfalse
mark\u662F\u5426\u4E3A\u6807\u8BB0\u6837\u5F0Fbooleanfalse
text-color\u6587\u672C\u989C\u8272\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E color \u5C5E\u6027stringwhite
closeable\u662F\u5426\u4E3A\u53EF\u5173\u95ED\u6807\u7B7Ebooleanfalse

Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49 Tag \u663E\u793A\u5185\u5BB9

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:close\u5173\u95ED\u6807\u7B7E\u65F6\u89E6\u53D1-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
`,16),yn=[fn],_n={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",qn,yn))}},xn={class:"van-doc-markdown-body"},wn=d(`

Toast \u8F7B\u63D0\u793A

\u4ECB\u7ECD

\u5728\u9875\u9762\u4E2D\u95F4\u5F39\u51FA\u9ED1\u8272\u534A\u900F\u660E\u63D0\u793A\uFF0C\u7528\u4E8E\u6D88\u606F\u901A\u77E5\u3001\u52A0\u8F7D\u63D0\u793A\u3001\u64CD\u4F5C\u7ED3\u679C\u63D0\u793A\u7B49\u573A\u666F\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-toast": "@vant/weapp/toast/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u6587\u5B57\u63D0\u793A

import Toast from '@vant/weapp/toast/toast';
-
-Toast('\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~');
-
<van-toast id="van-toast" />
-

\u52A0\u8F7D\u63D0\u793A

\u4F7F\u7528 Toast.loading \u65B9\u6CD5\u5C55\u793A\u52A0\u8F7D\u63D0\u793A\uFF0C\u901A\u8FC7 forbidClick \u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u80CC\u666F\u70B9\u51FB\uFF0C\u901A\u8FC7 loadingType \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\u3002

Toast.loading({
-  message: '\u52A0\u8F7D\u4E2D...',
-  forbidClick: true,
-});
-
-// \u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807
-Toast.loading({
-  message: '\u52A0\u8F7D\u4E2D...',
-  forbidClick: true,
-  loadingType: 'spinner',
-});
-

\u6210\u529F/\u5931\u8D25\u63D0\u793A

Toast.success('\u6210\u529F\u6587\u6848');
-Toast.fail('\u5931\u8D25\u6587\u6848');
-

\u52A8\u6001\u66F4\u65B0\u63D0\u793A

const toast = Toast.loading({
-  duration: 0, // \u6301\u7EED\u5C55\u793A toast
-  forbidClick: true,
-  message: '\u5012\u8BA1\u65F6 3 \u79D2',
-  selector: '#custom-selector',
-});
-
-let second = 3;
-const timer = setInterval(() => {
-  second--;
-  if (second) {
-    toast.setData({
-      message: \`\u5012\u8BA1\u65F6 \${second} \u79D2\`,
-    });
-  } else {
-    clearInterval(timer);
-    Toast.clear();
-  }
-}, 1000);
-
<van-toast id="custom-selector" />
-

OnClose \u56DE\u8C03\u51FD\u6570

Toast({
-  type: 'success',
-  message: '\u63D0\u4EA4\u6210\u529F',
-  onClose: () => {
-    console.log('\u6267\u884COnClose\u51FD\u6570');
-  },
-});
-

API

\u65B9\u6CD5

\u65B9\u6CD5\u540D\u53C2\u6570\u8FD4\u56DE\u503C\u4ECB\u7ECD
Toastoptions | messagetoast \u5B9E\u4F8B\u5C55\u793A\u63D0\u793A
Toast.loadingoptions | messagetoast \u5B9E\u4F8B\u5C55\u793A\u52A0\u8F7D\u63D0\u793A
Toast.successoptions | messagetoast \u5B9E\u4F8B\u5C55\u793A\u6210\u529F\u63D0\u793A
Toast.failoptions | messagetoast \u5B9E\u4F8B\u5C55\u793A\u5931\u8D25\u63D0\u793A
Toast.clearclearAllvoid\u5173\u95ED\u63D0\u793A
Toast.setDefaultOptionsoptionsvoid\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548
Toast.resetDefaultOptions-void\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548

Options

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
type\u63D0\u793A\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A loading success fail htmlstringtext
position\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top middle bottomstringmiddle
message\u5185\u5BB9string''
mask\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42booleanfalse
forbidClick\u662F\u5426\u7981\u6B62\u80CC\u666F\u70B9\u51FBbooleanfalse
loadingType\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A spinnerstringcircular
zIndexz-index \u5C42\u7EA7number1000
duration\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Ctoast \u4E0D\u4F1A\u6D88\u5931number2000
selector\u81EA\u5B9A\u4E49\u9009\u62E9\u5668stringvan-toast
context\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587object\u5F53\u524D\u9875\u9762
onClose\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570Function-

Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u5185\u5BB9
`,13),kn=[wn],zn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",xn,kn))}},Cn={class:"van-doc-markdown-body"},Pn=d(`

Transition \u52A8\u753B

\u4ECB\u7ECD

\u4F7F\u5143\u7D20\u4ECE\u4E00\u79CD\u6837\u5F0F\u9010\u6E10\u53D8\u5316\u4E3A\u53E6\u4E00\u79CD\u6837\u5F0F\u7684\u6548\u679C\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-transition": "@vant/weapp/transition/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u5C06\u5143\u7D20\u5305\u88F9\u5728 transition \u7EC4\u4EF6\u5185\uFF0C\u5728\u5143\u7D20\u5C55\u793A/\u9690\u85CF\u65F6\uFF0C\u4F1A\u6709\u76F8\u5E94\u7684\u8FC7\u6E21\u52A8\u753B\u3002

<van-transition show="{{ show }}" custom-class="block">\u5185\u5BB9</van-transition>
-

\u52A8\u753B\u7C7B\u578B

transition \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u52A8\u753B\uFF0C\u53EF\u4EE5\u901A\u8FC7name\u5B57\u6BB5\u6307\u5B9A\u52A8\u753B\u7C7B\u578B\u3002

<van-transition name="fade-up" />
-

\u9AD8\u7EA7\u7528\u6CD5

\u53EF\u4EE5\u901A\u8FC7\u5916\u90E8\u6837\u5F0F\u7C7B\u81EA\u5B9A\u4E49\u8FC7\u6E21\u6548\u679C\uFF0C\u8FD8\u53EF\u4EE5\u5B9A\u5236\u8FDB\u5165\u548C\u79FB\u51FA\u7684\u6301\u7EED\u65F6\u95F4\u3002

<van-transition
-  show="{{ show }}"
-  name=""
-  duration="{{ { enter: 300, leave: 1000 } }}"
-  enter-class="van-enter-class"
-  enter-active-class="van-enter-active-class"
-  leave-active-class="van-leave-active-class"
-  leave-to-class="van-leave-to-class"
-/>
-
.van-enter-active-class,
-.van-leave-active-class {
-  transition-property: background-color, transform;
-}
-
-.van-enter-class,
-.van-leave-to-class {
-  background-color: red;
-  transform: rotate(-360deg) translate3d(-100%, -100%, 0);
-}
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u52A8\u753B\u7C7B\u578Bstringfade
show\u662F\u5426\u5C55\u793A\u7EC4\u4EF6booleantrue
duration\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2number | object300
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring-

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u53C2\u6570
bind:before-enter\u8FDB\u5165\u524D\u89E6\u53D1-
bind:enter\u8FDB\u5165\u4E2D\u89E6\u53D1-
bind:after-enter\u8FDB\u5165\u540E\u89E6\u53D1-
bind:before-leave\u79BB\u5F00\u524D\u89E6\u53D1-
bind:leave\u79BB\u5F00\u4E2D\u89E6\u53D1-
bind:after-leave\u79BB\u5F00\u540E\u89E6\u53D1-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
enter-class\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u5F00\u59CB\u72B6\u6001\u3002\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u524D\u751F\u6548\uFF0C\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u540E\u7684\u4E0B\u4E00\u5E27\u79FB\u9664\u3002
enter-active-class\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u751F\u6548\u65F6\u7684\u72B6\u6001\u3002\u5728\u6574\u4E2A\u8FDB\u5165\u8FC7\u6E21\u7684\u9636\u6BB5\u4E2D\u5E94\u7528\uFF0C\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u524D\u751F\u6548\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002\u8FD9\u4E2A\u7C7B\u53EF\u4EE5\u88AB\u7528\u6765\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u8FC7\u7A0B\u65F6\u95F4\uFF0C\u5EF6\u8FDF\u548C\u66F2\u7EBF\u51FD\u6570\u3002
enter-to-class\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u7ED3\u675F\u72B6\u6001\u3002\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u540E\u4E0B\u4E00\u5E27\u751F\u6548 (\u4E0E\u6B64\u540C\u65F6 enter-class \u88AB\u79FB\u9664)\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002
leave-class\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u5F00\u59CB\u72B6\u6001\u3002\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u65F6\u7ACB\u523B\u751F\u6548\uFF0C\u4E0B\u4E00\u5E27\u88AB\u79FB\u9664\u3002
leave-active-class\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u751F\u6548\u65F6\u7684\u72B6\u6001\u3002\u5728\u6574\u4E2A\u79BB\u5F00\u8FC7\u6E21\u7684\u9636\u6BB5\u4E2D\u5E94\u7528\uFF0C\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u65F6\u7ACB\u523B\u751F\u6548\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002\u8FD9\u4E2A\u7C7B\u53EF\u4EE5\u88AB\u7528\u6765\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u8FC7\u7A0B\u65F6\u95F4\uFF0C\u5EF6\u8FDF\u548C\u66F2\u7EBF\u51FD\u6570\u3002
leave-to-class\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u7ED3\u675F\u72B6\u6001\u3002\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u4E4B\u540E\u4E0B\u4E00\u5E27\u751F\u6548 (\u4E0E\u6B64\u540C\u65F6 leave-class \u88AB\u5220\u9664)\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002

\u52A8\u753B\u7C7B\u578B

\u540D\u79F0\u8BF4\u660E
fade\u6DE1\u5165
fade-up\u4E0A\u6ED1\u6DE1\u5165
fade-down\u4E0B\u6ED1\u6DE1\u5165
fade-left\u5DE6\u6ED1\u6DE1\u5165
fade-right\u53F3\u6ED1\u6DE1\u5165
slide-up\u4E0A\u6ED1\u8FDB\u5165
slide-down\u4E0B\u6ED1\u8FDB\u5165
slide-left\u5DE6\u6ED1\u8FDB\u5165
slide-right\u53F3\u6ED1\u8FDB\u5165
`,12),Sn=[Pn],Dn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Cn,Sn))}},In={class:"van-doc-markdown-body"},$n=d(`

TreeSelect \u5206\u7C7B\u9009\u62E9

\u4ECB\u7ECD

\u7528\u4E8E\u4ECE\u4E00\u7EC4\u76F8\u5173\u8054\u7684\u6570\u636E\u96C6\u5408\u4E2D\u8FDB\u884C\u9009\u62E9\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-tree-select": "@vant/weapp/tree-select/index"
-}
-

\u4EE3\u7801\u6F14\u793A

\u5355\u9009\u6A21\u5F0F

\u53EF\u4EE5\u5728\u4EFB\u610F\u4F4D\u7F6E\u4E0A\u4F7F\u7528 van-tree-select \u6807\u7B7E\u3002\u4F20\u5165\u5BF9\u5E94\u7684\u6570\u636E\u5373\u53EF\u3002\u6B64\u7EC4\u4EF6\u652F\u6301\u5355\u9009\u6216\u591A\u9009\uFF0C\u5177\u4F53\u884C\u4E3A\u5B8C\u5168\u57FA\u4E8E\u4E8B\u4EF6 click-item \u7684\u5B9E\u73B0\u903B\u8F91\u5982\u4F55\u4E3A\u5C5E\u6027 active-id \u8D4B\u503C\uFF0C\u5F53 active-id \u4E3A\u6570\u7EC4\u65F6\u5373\u4E3A\u591A\u9009\u72B6\u6001\u3002

<van-tree-select
-  items="{{ items }}"
-  main-active-index="{{ mainActiveIndex }}"
-  active-id="{{ activeId }}"
-  bind:click-nav="onClickNav"
-  bind:click-item="onClickItem"
-/>
-
Page({
-  data: {
-    mainActiveIndex: 0,
-    activeId: null,
-  },
-
-  onClickNav({ detail = {} }) {
-    this.setData({
-      mainActiveIndex: detail.index || 0,
-    });
-  },
-
-  onClickItem({ detail = {} }) {
-    const activeId = this.data.activeId === detail.id ? null : detail.id;
-
-    this.setData({ activeId });
-  },
-});
-

\u591A\u9009\u6A21\u5F0F

<van-tree-select
-  items="{{ items }}"
-  main-active-index="{{ mainActiveIndex }}"
-  active-id="{{ activeId }}"
-  max="{{ max }}"
-  bind:click-nav="onClickNav"
-  bind:click-item="onClickItem"
-/>
-
Page({
-  data: {
-    mainActiveIndex: 0,
-    activeId: [],
-    max: 2,
-  },
-
-  onClickNav({ detail = {} }) {
-    this.setData({
-      mainActiveIndex: detail.index || 0,
-    });
-  },
-
-  onClickItem({ detail = {} }) {
-    const { activeId } = this.data;
-
-    const index = activeId.indexOf(detail.id);
-    if (index > -1) {
-      activeId.splice(index, 1);
-    } else {
-      activeId.push(detail.id);
-    }
-
-    this.setData({ activeId });
-  },
-});
-

\u81EA\u5B9A\u4E49\u5185\u5BB9

<van-tree-select
-  items="{{ items }}"
-  height="55vw"
-  main-active-index="{{ mainActiveIndex }}"
-  active-id="{{ activeId }}"
-  bind:click-nav="onClickNav"
-  bind:click-item="onClickItem"
->
-  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />
-</van-tree-select>
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
items\u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636EArray[]
height\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxnumber | string300
main-active-index\u5DE6\u4FA7\u9009\u4E2D\u9879\u7684\u7D22\u5F15number0
active-id\u53F3\u4FA7\u9009\u4E2D\u9879\u7684 id\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4string | number | Array0
max\u53F3\u4FA7\u9879\u6700\u5927\u9009\u4E2D\u4E2A\u6570numberInfinity
selected-icon v1.5.0\u81EA\u5B9A\u4E49\u53F3\u4FA7\u680F\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807stringsuccess

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:click-nav\u5DE6\u4FA7\u5BFC\u822A\u70B9\u51FB\u65F6\uFF0C\u89E6\u53D1\u7684\u4E8B\u4EF6event.detail.index\uFF1A\u88AB\u70B9\u51FB\u7684\u5BFC\u822A\u7684\u7D22\u5F15
bind:click-item\u53F3\u4FA7\u9009\u62E9\u9879\u88AB\u70B9\u51FB\u65F6\uFF0C\u4F1A\u89E6\u53D1\u7684\u4E8B\u4EF6event.detail: \u8BE5\u70B9\u51FB\u9879\u7684\u6570\u636E

Slots

\u540D\u79F0\u8BF4\u660E
content\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9\uFF0C\u5982\u679C\u5B58\u5728 items\uFF0C\u5219\u63D2\u5165\u5728\u9876\u90E8

items \u6570\u636E\u7ED3\u6784

items \u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B\u4E00\u7CFB\u5217\u63CF\u8FF0\u5206\u7C7B\u7684\u5BF9\u8C61\u3002\u6BCF\u4E2A\u5206\u7C7B\u91CC\uFF0Ctext \u8868\u793A\u5F53\u524D\u5206\u7C7B\u7684\u540D\u79F0\u3002children \u8868\u793A\u5206\u7C7B\u91CC\u7684\u53EF\u9009\u9879\uFF0C\u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0Cid \u88AB\u7528\u6765\u552F\u4E00\u6807\u8BC6\u6BCF\u4E2A\u9009\u9879\u3002

[
-  {
-    // \u5BFC\u822A\u540D\u79F0
-    text: '\u6240\u6709\u57CE\u5E02',
-    // \u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u5FBD\u6807\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301
-    badge: 3,
-    // \u662F\u5426\u5728\u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301
-    dot: true,
-    // \u7981\u7528\u9009\u9879
-    disabled: false,
-    // \u8BE5\u5BFC\u822A\u4E0B\u6240\u6709\u7684\u53EF\u9009\u9879
-    children: [
-      {
-        // \u540D\u79F0
-        text: '\u6E29\u5DDE',
-        // id\uFF0C\u4F5C\u4E3A\u5339\u914D\u9009\u4E2D\u72B6\u6001\u7684\u6807\u8BC6
-        id: 1,
-        // \u7981\u7528\u9009\u9879
-        disabled: true,
-      },
-      {
-        text: '\u676D\u5DDE',
-        id: 2,
-      },
-    ],
-  },
-];
-

\u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
main-item-class\u5DE6\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B
content-item-class\u53F3\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B
main-active-class\u5DE6\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B
content-active-class\u53F3\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B
main-disabled-class\u5DE6\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B
content-disabled-class\u53F3\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B
`,13),Tn=[$n],An={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",In,Tn))}},En={class:"van-doc-markdown-body"},Fn=d(`

Uploader \u6587\u4EF6\u4E0A\u4F20

\u4ECB\u7ECD

\u7528\u4E8E\u5C06\u672C\u5730\u7684\u56FE\u7247\u6216\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\uFF0C\u5E76\u5728\u4E0A\u4F20\u8FC7\u7A0B\u4E2D\u5C55\u793A\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u8FDB\u5EA6\u3002\u76EE\u524D Uploader \u7EC4\u4EF6\u4E0D\u5305\u542B\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\u7684\u63A5\u53E3\u903B\u8F91\uFF0C\u8BE5\u6B65\u9AA4\u9700\u8981\u81EA\u884C\u5B9E\u73B0\u3002

\u5F15\u5165

\u5728app.json\u6216index.json\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3AES6\u7248\u672C\uFF0CES5\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B\u3002

"usingComponents": {
-  "van-uploader": "@vant/weapp/uploader/index"
-}
-

Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1\u5FEB\u901F\u4E0A\u624B

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1after-read\u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684\u6587\u4EF6\u7684\u4E34\u65F6\u5730\u5740\uFF0C\u7136\u540E\u518D\u4F7F\u7528wx.uploadFile\u5C06\u56FE\u7247\u4E0A\u4F20\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u3002

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
-
Page({
-  data: {
-    fileList: [],
-  },
-
-  afterRead(event) {
-    const { file } = event.detail;
-    // \u5F53\u8BBE\u7F6E mutiple \u4E3A true \u65F6, file \u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u5426\u5219\u4E3A\u5BF9\u8C61\u683C\u5F0F
-    wx.uploadFile({
-      url: 'https://example.weixin.qq.com/upload', // \u4EC5\u4E3A\u793A\u4F8B\uFF0C\u975E\u771F\u5B9E\u7684\u63A5\u53E3\u5730\u5740
-      filePath: file.url,
-      name: 'file',
-      formData: { user: 'test' },
-      success(res) {
-        // \u4E0A\u4F20\u5B8C\u6210\u9700\u8981\u66F4\u65B0 fileList
-        const { fileList = [] } = this.data;
-        fileList.push({ ...file, url: res.data });
-        this.setData({ fileList });
-      },
-    });
-  },
-});
-

\u56FE\u7247\u9884\u89C8

\u901A\u8FC7\u5411\u7EC4\u4EF6\u4F20\u5165file-list\u5C5E\u6027\uFF0C\u53EF\u4EE5\u7ED1\u5B9A\u5DF2\u7ECF\u4E0A\u4F20\u7684\u56FE\u7247\u5217\u8868\uFF0C\u5E76\u5C55\u793A\u56FE\u7247\u5217\u8868\u7684\u9884\u89C8\u56FE\u3002file-list \u7684\u8BE6\u7EC6\u7ED3\u6784\u53EF\u89C1\u4E0B\u65B9\u3002

<van-uploader file-list="{{ fileList }}" />
-
Page({
-  data: {
-    fileList: [
-      {
-        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-        name: '\u56FE\u72471',
-      },
-      // Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6
-      // \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E
-      {
-        url: 'http://iph.href.lu/60x60?text=default',
-        name: '\u56FE\u72472',
-        isImage: true,
-        deletable: true,
-      },
-    ],
-  },
-});
-

\u56FE\u7247\u53EF\u5220\u9664\u72B6\u6001

\u901A\u8FC7deletable\u5C5E\u6027\u53EF\u63A7\u5236\u662F\u5426\u5F00\u542F\u6240\u6709\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0Cdeletable\u9ED8\u8BA4\u4E3Atrue\uFF0C\u5373\u6240\u6709\u56FE\u7247\u90FD\u53EF\u5220\u9664\u3002

\u82E5\u5E0C\u671B\u63A7\u5236\u5355\u5F20\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0C\u53EF\u5C06deletable\u5C5E\u6027\u8BBE\u7F6E\u4E3Atrue\uFF0C\u5E76\u5728fileList\u4E2D\u4E3A\u6BCF\u4E00\u9879\u8BBE\u7F6Edeletable\u5C5E\u6027\u3002

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />
-
Page({
-  data: {
-    fileList: [
-      {
-        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-      },
-      {
-        url: 'https://img.yzcdn.cn/vant/tree.jpg',
-        deletable: false,
-      },
-    ],
-  },
-});
-

\u4E0A\u4F20\u72B6\u6001

\u901A\u8FC7status\u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0Cuploading\u8868\u793A\u4E0A\u4F20\u4E2D\uFF0Cfailed\u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0Cdone\u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002

<van-uploader file-list="{{ fileList }}" />
-
Page({
-  data: {
-    fileList: [
-      {
-        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-        status: 'uploading',
-        message: '\u4E0A\u4F20\u4E2D',
-      },
-      {
-        url: 'https://img.yzcdn.cn/vant/tree.jpg',
-        status: 'failed',
-        message: '\u4E0A\u4F20\u5931\u8D25',
-      },
-    ],
-  },
-});
-

\u9650\u5236\u4E0A\u4F20\u6570\u91CF

\u901A\u8FC7max-count\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u6570\u91CF\uFF0C\u4E0A\u4F20\u6570\u91CF\u8FBE\u5230\u9650\u5236\u540E\uFF0C\u4F1A\u81EA\u52A8\u9690\u85CF\u4E0A\u4F20\u533A\u57DF\u3002

<van-uploader
-  file-list="{{ fileList }}"
-  max-count="2"
-  bind:after-read="afterRead"
-/>
-

\u81EA\u5B9A\u4E49\u4E0A\u4F20\u6837\u5F0F

\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002

<van-uploader>
-  <van-button icon="photo" type="primary">\u4E0A\u4F20\u56FE\u7247</van-button>
-</van-uploader>
-

\u4E0A\u4F20\u524D\u6821\u9A8C

\u5C06use-before-read\u5C5E\u6027\u8BBE\u7F6E\u4E3Atrue\uFF0C\u7136\u540E\u7ED1\u5B9A before-read \u4E8B\u4EF6\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\uFF0C\u8C03\u7528 callback \u65B9\u6CD5\u4F20\u5165 true \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u4F20\u5165 false \u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002

<van-uploader
-  file-list="{{ fileList }}"
-  accept="media"
-  use-before-read
-  bind:before-read="beforeRead"
-  bind:after-read="afterRead"
-/>
-
Page({
-  data: {
-    fileList: [],
-  },
-
-  beforeRead(event) {
-    const { file, callback } = event.detail;
-    callback(file.type === 'image');
-  },
-});
-

\u4E91\u5F00\u53D1\u793A\u4F8B

\u4E0A\u4F20\u56FE\u7247\u81F3\u4E91\u5B58\u50A8

\u5728\u5F00\u53D1\u4E2D\uFF0C\u53EF\u4EE5\u5229\u7528\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1\u7684\u4E91\u5B58\u50A8\u80FD\u529B\uFF0C\u5C06\u56FE\u7247\u4E0A\u4F20\u81F3\u4E91\u5B58\u50A8\u5185\u3002\u7136\u540E\u6839\u636E\u8FD4\u56DE\u7684fileiId\u6765\u4E0B\u8F7D\u56FE\u7247\u3001\u5220\u9664\u56FE\u7247\u548C\u66FF\u6362\u4E34\u65F6\u94FE\u63A5\u3002

// \u4E0A\u4F20\u56FE\u7247
-uploadToCloud() {
-  wx.cloud.init();
-  const { fileList } = this.data;
-  if (!fileList.length) {
-    wx.showToast({ title: '\u8BF7\u9009\u62E9\u56FE\u7247', icon: 'none' });
-  } else {
-    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(\`my-photo\${index}.png\`, file));
-    Promise.all(uploadTasks)
-      .then(data => {
-        wx.showToast({ title: '\u4E0A\u4F20\u6210\u529F', icon: 'none' });
-        const newFileList = data.map(item => ({ url: item.fileID }));
-        this.setData({ cloudPath: data, fileList: newFileList });
-      })
-      .catch(e => {
-        wx.showToast({ title: '\u4E0A\u4F20\u5931\u8D25', icon: 'none' });
-        console.log(e);
-      });
-  }
-}
-
-uploadFilePromise(fileName, chooseResult) {
-  return wx.cloud.uploadFile({
-    cloudPath: fileName,
-    filePath: chooseResult.url
-  });
-}
-

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728\u56DE\u8C03\u51FD\u6570\u7684\u7B2C\u4E8C\u9879\u53C2\u6570\u4E2D\u83B7\u53D6string | number-
accept\u63A5\u53D7\u7684\u6587\u4EF6\u7C7B\u578B, \u53EF\u9009\u503C\u4E3Aall media image file videostringimage
sizeType\u6240\u9009\u7684\u56FE\u7247\u7684\u5C3A\u5BF8, \u5F53accept\u4E3Aimage | media \u7C7B\u578B\u65F6\u8BBE\u7F6E\u6240\u9009\u56FE\u7247\u7684\u5C3A\u5BF8\u53EF\u9009\u503C\u4E3Aoriginal compressedstring[]['original','compressed']
preview-size\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apxstring | number80px
preview-image\u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FEbooleantrue
preview-full-image\u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8booleantrue
multiple\u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301booleanfalse
disabled\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20booleanfalse
show-upload\u662F\u5426\u5C55\u793A\u6587\u4EF6\u4E0A\u4F20\u6309\u94AEbooleantrue
deletable\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AEbooleantrue
capture\u56FE\u7247\u6216\u8005\u89C6\u9891\u9009\u53D6\u6A21\u5F0F\uFF0C\u5F53accept\u4E3Aimage | media \u7C7B\u578B\u65F6\u8BBE\u7F6Ecapture\u53EF\u9009\u503C\u4E3Acamera\u53EF\u4EE5\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934string[]['album', 'camera']
max-size\u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3Abytenumber-
max-count\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236number-
upload-text\u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793Astring-
video-fit 1.10.21video \u5C01\u9762\u7684\u9884\u89C8\u56FE\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8Fvideo\u7EC4\u4EF6\u7684object-fit\u5C5E\u6027stringcontain
image-fit\u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8Fimage\u7EC4\u4EF6\u7684mode\u5C5E\u6027stringscaleToFill
use-before-read\u662F\u5426\u5F00\u542F\u6587\u4EF6\u8BFB\u53D6\u524D\u4E8B\u4EF6boolean-
camera\u5F53 accept \u4E3A video | media \u65F6\u751F\u6548\uFF0C\u53EF\u9009\u503C\u4E3A back frontstring-
compressed\u5F53 accept \u4E3A video \u65F6\u751F\u6548\uFF0C\u662F\u5426\u538B\u7F29\u89C6\u9891\uFF0C\u9ED8\u8BA4\u4E3Atrueboolean-
max-duration\u5F53 accept \u4E3A video | media \u65F6\u751F\u6548\uFF0C\u62CD\u6444\u89C6\u9891\u6700\u957F\u62CD\u6444\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2number60
media-type v1.10.8\u5F53 accept \u4E3A media \u65F6\u751F\u6548\uFF0C\u9009\u62E9\u7684\u6587\u4EF6\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A image videostring[]['image', 'video']
extension v1.10.11\u5F53 accept \u4E3A file \u65F6\u751F\u6548\uFF0C\u6839\u636E\u6587\u4EF6\u62D3\u5C55\u540D\u8FC7\u6EE4\u53EF\u9009\u62E9\u6587\u4EF6\u3002\u6BCF\u4E00\u9879\u90FD\u4E0D\u80FD\u662F\u7A7A\u5B57\u7B26\u4E32\u3002\u9ED8\u8BA4\u4E0D\u8FC7\u6EE4string[] | undefined-
showmenu v1.10.13\u9884\u89C8\u56FE\u7247\u65F6\uFF0C\u662F\u5426\u663E\u793A\u957F\u6309\u83DC\u5355booleantrue
upload-icon\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6stringplus

accept \u7684\u5408\u6CD5\u503C

\u53C2\u6570\u8BF4\u660E
media\u56FE\u7247\u548C\u89C6\u9891
image\u56FE\u7247
video\u89C6\u9891
file\u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u56FE\u7247\u548C\u89C6\u9891\u4EE5\u5916\u7684\u6587\u4EF6
all\u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u6240\u6709\u6587\u4EF6

FileList

file-list \u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u5305\u542B\u4EE5\u4E0B key\u3002

\u53C2\u6570\u8BF4\u660E
url\u56FE\u7247\u548C\u89C6\u9891\u7684\u7F51\u7EDC\u8D44\u6E90\u5730\u5740
name\u6587\u4EF6\u540D\u79F0\uFF0C\u89C6\u9891\u5C06\u5728\u5168\u5C4F\u9884\u89C8\u65F6\u4F5C\u4E3A\u6807\u9898\u663E\u793A
thumb\u56FE\u7247\u7F29\u7565\u56FE\u6216\u89C6\u9891\u5C01\u9762\u7684\u7F51\u7EDC\u8D44\u6E90\u5730\u5740\uFF0C\u4EC5\u5BF9\u56FE\u7247\u548C\u89C6\u9891\u6709\u6548\uFF0Caccept \u4E3A video\u65F6\uFF0C\u771F\u673A\u4E0D\u4F1A\u8FD4\u56DE\u8BE5\u5C5E\u6027\uFF0C\u5EFA\u8BAE\u4F7F\u7528 media \u548C media-type \u914D\u5408\u5B8C\u6210\u89C6\u9891\u4E0A\u4F20
type\u6587\u4EF6\u7C7B\u578B\uFF0C\u53EF\u9009\u503Cimage video file
isImage\u624B\u52A8\u6807\u8BB0\u56FE\u7247\u8D44\u6E90
isVideo\u624B\u52A8\u6807\u8BB0\u89C6\u9891\u8D44\u6E90

Slot

\u540D\u79F0\u8BF4\u660E
-\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:before-read\u6587\u4EF6\u8BFB\u53D6\u524D\uFF0C\u5728\u56DE\u8C03\u51FD\u6570\u4E2D\u8FD4\u56DE false \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u540C\u65F6\u9700\u8981\u5C06use-before-read\u5C5E\u6027\u8BBE\u7F6E\u4E3Atrueevent.detail.file: \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6\uFF0Cevent.detail.callback: \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528callback(false)\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6
bind:after-read\u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540Eevent.detail.file: \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6
bind:oversize\u6587\u4EF6\u8D85\u51FA\u5927\u5C0F\u9650\u5236-
bind:click-preview\u70B9\u51FB\u9884\u89C8\u56FE\u7247event.detail.index: \u70B9\u51FB\u56FE\u7247\u7684\u5E8F\u53F7\u503C
bind:delete\u5220\u9664\u56FE\u7247event.detail.index: \u5220\u9664\u56FE\u7247\u7684\u5E8F\u53F7\u503C
`,18),Bn=[Fn],Rn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",En,Bn))}},h={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u5C0F\u7A0B\u5E8F UI \u7EC4\u4EF6\u5E93",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/v2/mobile.html?weapp=1",routeMapper:a=>`/zh-CN${{"/common":"/style","/transition":"/style"}[a]||a}`,syncPathFromSimulator:!1},links:[{logo:"https://img.yzcdn.cn/vant/vant-o.svg",url:"https://vant-contrib.gitee.io/vant/"},{logo:"https://b.yzcdn.cn/vant/logo/github.svg",url:"https://github.com/youzan/vant-weapp"}],baiduAnalytics:{seed:"af5d41bc4e446e76665dbe3ec18d55c3"},nav:[{title:"\u5F00\u53D1\u6307\u5357",items:[{path:"home",title:"\u4ECB\u7ECD"},{path:"quickstart",title:"\u5FEB\u901F\u4E0A\u624B"},{path:"changelog",title:"\u66F4\u65B0\u65E5\u5FD7"},{path:"custom-style",title:"\u6837\u5F0F\u8986\u76D6"},{path:"theme",title:"\u5B9A\u5236\u4E3B\u9898"}]},{title:"\u57FA\u7840\u7EC4\u4EF6",items:[{path:"button",title:"Button \u6309\u94AE"},{path:"cell",title:"Cell \u5355\u5143\u683C"},{path:"config-provider",title:"ConfigProvider \u5168\u5C40\u914D\u7F6E"},{path:"icon",title:"Icon \u56FE\u6807"},{path:"image",title:"Image \u56FE\u7247"},{path:"col",title:"Layout \u5E03\u5C40"},{path:"popup",title:"Popup \u5F39\u51FA\u5C42"},{path:"common",title:"Style \u5185\u7F6E\u6837\u5F0F"},{path:"toast",title:"Toast \u8F7B\u63D0\u793A"},{path:"transition",title:"transition \u52A8\u753B"}]},{title:"\u8868\u5355\u7EC4\u4EF6",items:[{path:"calendar",title:"Calendar \u65E5\u5386"},{path:"cascader",title:"Cascader \u7EA7\u8054\u9009\u62E9"},{path:"checkbox",title:"Checkbox \u590D\u9009\u6846"},{path:"datetime-picker",title:"DatetimePicker \u65F6\u95F4\u9009\u62E9"},{path:"field",title:"Field \u8F93\u5165\u6846"},{path:"picker",title:"Picker \u9009\u62E9\u5668"},{path:"radio",title:"Radio \u5355\u9009\u6846"},{path:"rate",title:"Rate \u8BC4\u5206"},{path:"search",title:"Search \u641C\u7D22"},{path:"slider",title:"Slider \u6ED1\u5757"},{path:"stepper",title:"Stepper \u6B65\u8FDB\u5668"},{path:"switch",title:"Switch \u5F00\u5173"},{path:"uploader",title:"Uploader \u6587\u4EF6\u4E0A\u4F20"}]},{title:"\u53CD\u9988\u7EC4\u4EF6",items:[{path:"action-sheet",title:"ActionSheet \u52A8\u4F5C\u9762\u677F"},{path:"dialog",title:"Dialog \u5F39\u51FA\u6846"},{path:"dropdown-menu",title:"DropdownMenu \u4E0B\u62C9\u83DC\u5355"},{path:"loading",title:"Loading \u52A0\u8F7D"},{path:"notify",title:"Notify \u6D88\u606F\u901A\u77E5"},{path:"overlay",title:"Overlay \u906E\u7F69\u5C42"},{path:"share-sheet",title:"ShareSheet \u5206\u4EAB\u9762\u677F"},{path:"swipe-cell",title:"SwipeCell \u6ED1\u52A8\u5355\u5143\u683C"}]},{title:"\u5C55\u793A\u7EC4\u4EF6",items:[{path:"circle",title:"Circle \u73AF\u5F62\u8FDB\u5EA6\u6761"},{path:"collapse",title:"Collapse \u6298\u53E0\u9762\u677F"},{path:"count-down",title:"CountDown \u5012\u8BA1\u65F6"},{path:"divider",title:"Divider \u5206\u5272\u7EBF"},{path:"empty",title:"Empty \u7A7A\u72B6\u6001"},{path:"notice-bar",title:"NoticeBar \u901A\u77E5\u680F"},{path:"progress",title:"Progress \u8FDB\u5EA6\u6761"},{path:"skeleton",title:"Skeleton \u9AA8\u67B6\u5C4F"},{path:"steps",title:"Steps \u6B65\u9AA4\u6761"},{path:"sticky",title:"Sticky \u7C98\u6027\u5E03\u5C40"},{path:"tag",title:"Tag \u6807\u7B7E"}]},{title:"\u5BFC\u822A\u7EC4\u4EF6",items:[{path:"grid",title:"Grid \u5BAB\u683C"},{path:"index-bar",title:"IndexBar \u7D22\u5F15\u680F"},{path:"nav-bar",title:"NavBar \u5BFC\u822A\u680F"},{path:"sidebar",title:"Sidebar \u4FA7\u8FB9\u5BFC\u822A"},{path:"tab",title:"Tab \u6807\u7B7E\u9875"},{path:"tabbar",title:"Tabbar \u6807\u7B7E\u680F"},{path:"tree-select",title:"TreeSelect \u5206\u7C7B\u9009\u62E9"}]},{title:"\u4E1A\u52A1\u7EC4\u4EF6",items:[{path:"area",title:"Area \u7701\u5E02\u533A\u9009\u62E9"},{path:"card",title:"Card \u5546\u54C1\u5361\u7247"},{path:"submit-bar",title:"SubmitBar \u63D0\u4EA4\u8BA2\u5355\u680F"},{path:"goods-action",title:"GoodsAction \u5546\u54C1\u5BFC\u822A"}]},{title:"\u5E9F\u5F03",items:[{path:"panel",title:"Panel \u9762\u677F"}]}]}},On={Changelog:y,CustomStyle:k,Home:S,Quickstart:T,Theme:B,ActionSheet:L,Area:G,Button:Q,Calendar:Y,Card:ns,Cascader:ds,Cell:is,Checkbox:js,Circle:qs,Col:xs,Collapse:Cs,Common:Is,ConfigProvider:Es,CountDown:Ns,DatetimePicker:Us,Dialog:Hs,Divider:Xs,DropdownMenu:aa,Empty:ea,Field:oa,GoodsAction:ua,Grid:ba,Icon:ya,Image:ka,IndexBar:Sa,Loading:Ta,NavBar:Ba,NoticeBar:La,Notify:Ga,Overlay:Qa,Panel:Ya,Picker:nt,Popup:dt,Progress:it,Radio:jt,Rate:qt,Search:xt,ShareSheet:Ct,Sidebar:It,Skeleton:Et,Slider:Nt,Stepper:Ut,Steps:Ht,Sticky:Xt,SubmitBar:an,SwipeCell:en,Switch:on,Tab:gn,Tabbar:vn,Tag:_n,Toast:zn,Transition:Dn,TreeSelect:An,Uploader:Rn},Gn="1.10.22",Nn=navigator.userAgent.toLowerCase(),Wn=/ios|iphone|ipod|ipad|android/.test(Nn);function Hn(a,s="-"){return a.replace(/([a-z\d])([A-Z])/g,"$1"+s+"$2").replace(/([A-Z])([A-Z][a-z\d]+)/g,"$1"+s+"$2").toLowerCase()}function Kn(a){const s=document.createElement("textarea");s.value=a,s.setAttribute("readonly",""),s.style.position="absolute",s.style.left="-9999px",document.body.appendChild(s);const n=document.getSelection();if(!n)return;const l=n.rangeCount>0?n.getRangeAt(0):!1;s.select(),document.execCommand("copy"),document.body.removeChild(s),l&&(n.removeAllRanges(),n.addRange(l))}const u="zh-CN",Mn="en-US",g="vant-cli-lang";let o=u;function Qn(){return o}function Jn(a){o=a,localStorage.setItem(g,a)}function Xn(a){const s=localStorage.getItem(g);if(s){o=s;return}if(navigator.language&&navigator.language.indexOf("zh-")!==-1){o=u;return}o=a||Mn}let i=[],j=!1;function Ln(a){j?a():i.push(a)}window.top===window?window.addEventListener("message",a=>{a.data.type==="iframeReady"&&(j=!0,i.forEach(s=>s()),i=[])}):window.top.postMessage({type:"iframeReady"},"*");function m(){var n,l;const a=window.vueRouter,{path:s}=a.currentRoute.value;return(n=h.site.simulator)!=null&&n.routeMapper?(l=h.site.simulator)==null?void 0:l.routeMapper(s):s}function Zn(){window.top.postMessage({type:"replacePath",value:m()},"*")}function Yn(){const a=document.querySelector("iframe");a&&Ln(()=>{a.contentWindow.postMessage({type:"replacePath",value:m()},"*")})}function sl(a){window.addEventListener("message",s=>{var l,t;if(((l=s.data)==null?void 0:l.type)!=="replacePath")return;const n=((t=s.data)==null?void 0:t.value)||"";a.currentRoute.value.path!==n&&a.replace(n).catch(()=>{})})}export{Un as _,h as a,Xn as b,Kn as c,On as d,Yn as e,Hn as f,Qn as g,Zn as h,Wn as i,sl as l,Gn as p,Jn as s}; diff --git a/assets/main.a69dce64.js b/assets/main.a69dce64.js deleted file mode 100644 index f255a806d..000000000 --- a/assets/main.a69dce64.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as h,p as B,c as A,a as m,s as j,i as M,b as F,l as R,d as S,e as q,f as V,g as z}from"./iframe-router.8a0fc162.js";import{r as u,c as C,n as p,a as r,o as i,F as y,b as $,d,t as f,e as v,f as g,g as I,h as Y,w as b,T as W,i as w,j as U,v as G,p as J,k as K,l as Q,m as X,q as Z,s as ee}from"./vue-libs.1ccdd11c.js";const te={name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const e=(this.item.title||this.item.name).split(" ");return`${e[0]} ${e.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path?!0:this.item.path==="home"?this.$route.path===this.base:!1}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},ne=["href","innerHTML"],oe=["innerHTML"];function se(e,n,t,a,s,o){const c=u("router-link");return t.item.path?(i(),C(c,{key:0,class:p({active:o.active}),to:o.path,innerHTML:o.itemName},null,8,["class","to","innerHTML"])):t.item.link?(i(),r("a",{key:1,href:t.item.link,innerHTML:o.itemName},null,8,ne)):(i(),r("a",{key:2,innerHTML:o.itemName},null,8,oe))}var x=h(te,[["render",se]]);const ae={name:"VanDocNav",components:{[x.name]:x},props:{lang:String,navConfig:Array},data(){return{top:64,bottom:0}},computed:{style(){return{top:this.top+"px",bottom:this.bottom+"px"}},base(){return this.lang?`/${this.lang}/`:"/"}},created(){window.addEventListener("scroll",this.onScroll),this.onScroll()},methods:{onScroll(){const{pageYOffset:e}=window;this.top=Math.max(0,64-e)}}},ie={class:"van-doc-nav__title"};function re(e,n,t,a,s,o){const c=u("van-doc-nav-link");return i(),r("div",{class:"van-doc-nav",style:I(o.style)},[(i(!0),r(y,null,$(t.navConfig,(l,_)=>(i(),r("div",{class:"van-doc-nav__group",key:_},[d("div",ie,f(l.title),1),l.items?(i(!0),r(y,{key:0},$(l.items,(k,T)=>(i(),r("div",{key:T,class:"van-doc-nav__item"},[v(c,{item:k,base:o.base},null,8,["item","base"])]))),128)):g("",!0)]))),128))],4)}var ce=h(ae,[["render",re]]);const le="modulepreload",H={},de="/vant-weapp/",N=function(n,t){return!t||t.length===0?n():Promise.all(t.map(a=>{if(a=`${de}${a}`,a in H)return;H[a]=!0;const s=a.endsWith(".css"),o=s?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${a}"]${o}`))return;const c=document.createElement("link");if(c.rel=s?"stylesheet":le,s||(c.as="script",c.crossOrigin=""),c.href=a,document.head.appendChild(c),s)return new Promise((l,_)=>{c.addEventListener("load",l),c.addEventListener("error",()=>_(new Error(`Unable to preload CSS for ${a}`)))})})).then(()=>n())};const ue={name:"VanDocSearch",props:{lang:String,searchConfig:Object},watch:{lang(){this.initDocsearch()}},mounted(){this.initDocsearch()},methods:{initDocsearch(){this.searchConfig&&(N(()=>Promise.resolve({}),["assets/style.37bc7816.css"]),N(()=>import("./index.3665b69b.js"),[]).then(e=>{e.default({...this.searchConfig,container:"#docsearch"})}))}}},he={id:"docsearch"};function _e(e,n,t,a,s,o){return i(),r("div",he)}var me=h(ue,[["render",_e]]);const ge={name:"VanDocHeader",components:{SearchInput:me},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data(){return{packageVersion:B,showVersionPop:!1}},computed:{langLink(){return`#${this.$route.path.replace(this.lang,this.anotherLang.lang)}`},langLabel(){return this.anotherLang.label},anotherLang(){const e=this.langConfigs.filter(n=>n.lang!==this.lang);return e.length?e[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const e=!this.showVersionPop,n=e?"add":"remove";document.body[`${n}EventListener`]("click",this.checkHideVersionPop),this.showVersionPop=e},checkHideVersionPop(e){this.$refs.version.contains(e.target)||(this.showVersionPop=!1)},onSwitchLang(e){this.$router.push(this.$route.path.replace(e.from,e.to))},onSwitchVersion(e){e.link&&(location.href=e.link)}}},fe={class:"van-doc-header"},ve={class:"van-doc-row"},pe={class:"van-doc-header__top"},ye={class:"van-doc-header__logo"},we=["src"],ke={class:"van-doc-header__title"},Se={key:0,class:"van-doc-header__subtitle"},$e={class:"van-doc-header__top-nav"},be=["href"],Ce=["src"],Le={key:1},Te={key:0,ref:"version",class:"van-doc-header__top-nav-item"},Ve={key:0,class:"van-doc-header__version-pop"},xe=["onClick"],He={key:1,class:"van-doc-header__top-nav-item"},Ne=["href"];function De(e,n,t,a,s,o){const c=u("search-input");return i(),r("div",fe,[d("div",ve,[d("div",pe,[d("a",ye,[d("img",{src:t.config.logo},null,8,we),d("span",ke,f(t.config.title),1),t.config.subtitle?(i(),r("span",Se,f(t.config.subtitle),1)):g("",!0)]),d("ul",$e,[(i(!0),r(y,null,$(t.config.links,(l,_)=>(i(),r("li",{key:_,class:"van-doc-header__top-nav-item"},[d("a",{class:"van-doc-header__link",target:"_blank",href:l.url},[l.logo?(i(),r("img",{key:0,src:l.logo},null,8,Ce)):l.text?(i(),r("span",Le,f(l.text),1)):g("",!0)],8,be)]))),128)),t.versions?(i(),r("li",Te,[d("span",{class:"van-doc-header__cube van-doc-header__version",onClick:n[0]||(n[0]=(...l)=>o.toggleVersionPop&&o.toggleVersionPop(...l))},[Y(f(s.packageVersion)+" ",1),v(W,{name:"van-doc-dropdown"},{default:b(()=>[s.showVersionPop?(i(),r("div",Ve,[(i(!0),r(y,null,$(t.versions,(l,_)=>(i(),r("div",{key:_,class:"van-doc-header__version-pop-item",onClick:k=>o.onSwitchVersion(l)},f(l.label),9,xe))),128))])):g("",!0)]),_:1})])],512)):g("",!0),o.langLabel&&o.langLink?(i(),r("li",He,[d("a",{class:"van-doc-header__cube",href:o.langLink},f(o.langLabel),9,Ne)])):g("",!0),o.searchConfig?(i(),C(c,{key:2,lang:t.lang,"search-config":o.searchConfig},null,8,["lang","search-config"])):g("",!0)])])])])}var Pe=h(ge,[["render",De]]);const Ae={name:"VanDocContent",computed:{currentPage(){const{path:e}=this.$route;return e?e.split("/").slice(-1)[0]:this.$route.name}},watch:{$route(e,n){n.path!==e.path&&setTimeout(()=>{this.copyAction()})}},mounted(){this.copyAction()},methods:{onClick({target:e}){["H2","H3","H4","H5"].includes(e.tagName)&&this.scrollToAnchor(e)},scrollToAnchor(e){e.id&&this.$router.push({name:this.$route.name,hash:"#"+e.id})},copyAction(){const e=document.querySelectorAll(".van-doc-card pre code");if(!(!e||!e.length))for(let n=0;n{if(a)return;const s=t.innerText;A(s),t.classList.add("code-copy-success"),a=setTimeout(()=>{t.classList.remove("code-copy-success"),a=null},1400)})}}}};function Ie(e,n,t,a,s,o){return i(),r("div",{class:p(["van-doc-content",`van-doc-content--${o.currentPage}`]),onClick:n[0]||(n[0]=(...c)=>o.onClick&&o.onClick(...c))},[w(e.$slots,"default")],2)}var Ee=h(Ae,[["render",Ie]]);const Oe={name:"VanDocContainer",props:{hasSimulator:Boolean}};function Be(e,n,t,a,s,o){return i(),r("div",{class:p(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":t.hasSimulator}])},[w(e.$slots,"default")],2)}var je=h(Oe,[["render",Be]]);const Me={name:"VanDocSimulator",props:{src:String},data(){return{scrollTop:window.scrollY,windowHeight:window.innerHeight}},computed:{isFixed(){return this.scrollTop>60},simulatorStyle(){return{height:Math.min(640,this.windowHeight-90)+"px"}}},mounted(){window.addEventListener("scroll",()=>{this.scrollTop=window.scrollY}),window.addEventListener("resize",()=>{this.windowHeight=window.innerHeight})}},Fe=["src"];function Re(e,n,t,a,s,o){return i(),r("div",{class:p(["van-doc-simulator",{"van-doc-simulator-fixed":o.isFixed}])},[d("iframe",{ref:"iframe",src:t.src,style:I(o.simulatorStyle),frameborder:"0"},null,12,Fe)],2)}var qe=h(Me,[["render",Re]]);const ze={name:"VanDoc",components:{DocNav:ce,DocHeader:Pe,DocContent:Ee,DocContainer:je,DocSimulator:qe},props:{lang:String,versions:Array,simulator:String,hasSimulator:Boolean,langConfigs:Array,config:{type:Object,required:!0},base:{type:String,default:""}},emits:["switch-version"],watch:{$route(){this.setNav()}},created(){this.setNav(),this.keyboardHandler()},methods:{setNav(){const{nav:e}=this.config,n=e.reduce((s,o)=>s.concat(o.items),[]),t=this.$route.path.split("/").pop();let a;for(let s=0,o=n.length;s{switch(e.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next");break}})}}},Ye={class:"van-doc"};function We(e,n,t,a,s,o){const c=u("doc-header"),l=u("doc-nav"),_=u("doc-content"),k=u("doc-container"),T=u("doc-simulator");return i(),r("div",Ye,[v(c,{lang:t.lang,config:t.config,versions:t.versions,"lang-configs":t.langConfigs,onSwitchVersion:n[0]||(n[0]=O=>e.$emit("switch-version",O))},null,8,["lang","config","versions","lang-configs"]),v(l,{lang:t.lang,"nav-config":t.config.nav},null,8,["lang","nav-config"]),v(k,{"has-simulator":t.hasSimulator},{default:b(()=>[v(_,null,{default:b(()=>[w(e.$slots,"default")]),_:3})]),_:3},8,["has-simulator"]),t.hasSimulator?(i(),C(T,{key:0,src:t.simulator},null,8,["src"])):g("",!0)])}var Ue=h(ze,[["render",We]]);const Ge={components:{VanDoc:Ue},data(){return{hasSimulator:!0}},computed:{simulator(){var n,t;return(n=m.site.simulator)!=null&&n.url?(t=m.site.simulator)==null?void 0:t.url:`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:e}=this.$route.meta;return e||""},langConfigs(){const{locales:e={}}=m.site;return Object.keys(e).map(n=>({lang:n,label:e[n].langLabel||""}))},config(){const{locales:e}=m.site;return e?e[this.lang]:m.site},versions(){return m.site.versions||null}},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(e){j(e),this.setTitleAndToogleSimulator()},config:{handler(e){e&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){this.$route.hash&&this.$nextTick(()=>{const e=document.querySelector(this.$route.hash);e&&e.scrollIntoView()})},methods:{setTitleAndToogleSimulator(){let{title:e}=this.config;const t=this.config.nav.reduce((a,s)=>[...a,...s.items],[]).find(a=>a.path===this.$route.meta.name);t&&t.title?e=t.title+" - "+e:this.config.description&&(e+=` - ${this.config.description}`),document.title=e,this.hasSimulator=!(m.site.hideSimulator||this.config.hideSimulator||t&&t.hideSimulator)}}},Je={class:"app"};function Ke(e,n,t,a,s,o){const c=u("router-view"),l=u("van-doc");return i(),r("div",Je,[o.config?(i(),C(l,{key:0,lang:o.lang,config:o.config,versions:o.versions,simulator:o.simulator,"has-simulator":s.hasSimulator,"lang-configs":o.langConfigs},{default:b(()=>[v(c)]),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):g("",!0)])}var Qe=h(Ge,[["render",Ke]]);const Xe={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data(){return{showSource:!1,copyStatus:"ready"}},methods:{unescape,toggleSource(){this.showSource=!this.showSource},copySourceCode(){A(unescape(this.originCode)),this.copyStatus="copied",setTimeout(()=>{this.copyStatus="ready"},2e3)}}},Ze=e=>(J("data-v-356bb874"),e=e(),K(),e),et={class:"demo-playground--code"},tt={class:"demo-playground--code--actions"},nt=Ze(()=>d("span",null,null,-1)),ot=["data-status"],st=["innerHTML"];function at(e,n,t,a,s,o){return i(),r("div",{class:p({"demo-playground":!t.inline,transform:t.transform})},[t.inline?w(e.$slots,"default",{key:0},void 0,!0):(i(),r(y,{key:1},[d("div",{class:p(["demo-playground--previewer",{compact:t.compact}])},[w(e.$slots,"default",{},void 0,!0)],2),d("div",et,[d("div",tt,[nt,d("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":s.copyStatus,onClick:n[0]||(n[0]=(...c)=>o.copySourceCode&&o.copySourceCode(...c))},null,8,ot),d("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:n[1]||(n[1]=(...c)=>o.toggleSource&&o.toggleSource(...c))})]),U(d("div",{innerHTML:o.unescape(t.codeSnippet),class:"demo-playground--code--content"},null,8,st),[[G,s.showSource]])])],64))],2)}var D=h(Xe,[["render",at],["__scopeId","data-v-356bb874"]]);M&&location.replace("mobile.html"+location.hash);const{locales:E,defaultLang:it}=m.site;F(it);function rt(e){if(e.indexOf("_")!==-1){const n=e.split("_"),t=n.shift();return{component:`${V(t)}`,lang:n.join("-")}}return{component:`${V(e)}`,lang:""}}function ct(e){const n=e.path.split("/")[1];return Object.keys(E).indexOf(n)!==-1?n:z()}function lt(){const e=[],n=Object.keys(S);E?e.push({name:"notFound",path:"/:path(.*)+",redirect:a=>({name:ct(a)})}):e.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}});function t(a,s){e.push({name:s||"home",path:`/${s||""}`,component:a,meta:{lang:s}})}return n.forEach(a=>{const{component:s,lang:o}=rt(a);s==="home"&&t(S[a],o),o?e.push({name:`${o}/${s}`,path:`/${o}/${s}`,component:S[a],meta:{lang:o,name:s}}):e.push({name:`${s}`,path:`/${s}`,component:S[a],meta:{name:s}})}),e}const L=Q({history:X(),routes:lt(),scrollBehavior(e){return e.hash?{el:e.hash}:{top:0}}});L.afterEach(()=>{Z(q)});var P;((P=m.site.simulator)==null?void 0:P.syncPathFromSimulator)!==!1&&R(L);window.vueRouter=L;window.app=ee(Qe).use(L).component(D.name,D);setTimeout(()=>{window.app.mount("#app")},0); diff --git a/assets/mobile.1e8f7d24.js b/assets/mobile.1e8f7d24.js deleted file mode 100644 index 19c1600a6..000000000 --- a/assets/mobile.1e8f7d24.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as g,f as C,b as H,l as M,g as j,h as P}from"./iframe-router.8a0fc162.js";import{a as l,t as w,f as O,i as D,o as c,n as A,d as h,r as y,F as N,b as F,c as T,w as L,h as V,e as b,l as X,m as Y,x as W,q,j as U,v as G,y as J,K as Q,s as Z}from"./vue-libs.1ccdd11c.js";const I={name:"DemoBlock",props:{card:Boolean,title:String}},ee={class:"van-doc-demo-block"},te={key:0,class:"van-doc-demo-block__title"},ne={key:1,class:"van-doc-demo-block__card"};function oe(e,r,o,s,i,n){return c(),l("div",ee,[o.title?(c(),l("h2",te,w(o.title),1)):O("",!0),o.card?(c(),l("div",ne,[D(e.$slots,"default")])):D(e.$slots,"default",{key:2})])}var S=g(I,[["render",oe]]);const se={name:"DemoSection",computed:{demoName(){const{meta:e}=this.$route||{};return e&&e.name?`demo-${C(e.name)}`:""}}};function ae(e,r,o,s,i,n){return c(),l("section",{class:A(["van-doc-demo-section",n.demoName])},[D(e.$slots,"default")],2)}var K=g(se,[["render",ae]]);const x={},B={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u5C0F\u7A0B\u5E8F UI \u7EC4\u4EF6\u5E93",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/v2/mobile.html?weapp=1",syncPathFromSimulator:!1},links:[{logo:"https://img.yzcdn.cn/vant/vant-o.svg",url:"https://vant-contrib.gitee.io/vant/"},{logo:"https://b.yzcdn.cn/vant/logo/github.svg",url:"https://github.com/youzan/vant-weapp"}],baiduAnalytics:{seed:"af5d41bc4e446e76665dbe3ec18d55c3"},nav:[]}},ce={},re={viewBox:"0 0 1024 1024"},ie=h("path",{fill:"#B6C3D2",d:"M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"},null,-1),ue=h("path",{fill:"#B6C3D2",d:"M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"},null,-1),le=[ie,ue];function me(e,r){return c(),l("svg",re,le)}var de=g(ce,[["render",me]]);const _e={components:{ArrowRight:de},props:{lang:String,group:Object},data(){return{active:[]}},computed:{base(){return this.lang?`/${this.lang}`:""}}},he={class:"demo-home-nav"},pe={class:"demo-home-nav__title"},fe={class:"demo-home-nav__group"};function ve(e,r,o,s,i,n){const d=y("arrow-right"),p=y("router-link");return c(),l("div",he,[h("div",pe,w(o.group.title),1),h("div",fe,[(c(!0),l(N,null,F(o.group.items,m=>(c(),T(p,{class:"demo-home-nav__block",key:m.path,to:`${n.base}/${m.path}`},{default:L(()=>[V(w(m.title)+" ",1),b(d,{class:"demo-home-nav__icon"})]),_:2},1032,["to"]))),128))])])}var ge=g(_e,[["render",ve]]);const ye={components:{DemoHomeNav:ge},computed:{lang(){const{lang:e}=this.$route.meta;return e},config(){const{locales:e}=B.site;return e?e[this.lang]:B.site},smallTitle(){return this.config.title.length>=8}}},we={class:"demo-home"},$e=["src"],ke={key:0,class:"demo-home__desc"};function be(e,r,o,s,i,n){const d=y("demo-home-nav");return c(),l("div",we,[h("h1",{class:A(["demo-home__title",{"demo-home__title--small":n.smallTitle}])},[h("img",{src:n.config.logo},null,8,$e),h("span",null,w(n.config.title),1)],2),n.config.description?(c(),l("h2",ke,w(n.config.description),1)):O("",!0),(c(!0),l(N,null,F(n.config.nav,(p,m)=>(c(),T(d,{key:m,lang:n.lang,group:p},null,8,["lang","group"]))),128))])}var z=g(ye,[["render",be]]);const{locales:E,defaultLang:Te}=B.site;H(Te);function xe(e){const r=e.path.split("/")[1];return Object.keys(E).indexOf(r)!==-1?r:j()}function De(){const e=[],r=Object.keys(x),o=E?Object.keys(E):[];return o.length?(e.push({name:"NotFound",path:"/:path(.*)+",redirect:s=>({name:xe(s)})}),o.forEach(s=>{e.push({name:s,path:`/${s}`,component:z,meta:{lang:s}})})):(e.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),e.push({name:"home",path:"/",component:z})),r.forEach(s=>{const i=C(s);o.length?o.forEach(n=>{e.push({name:`${n}/${i}`,path:`/${n}/${i}`,component:x[s],meta:{name:s,lang:n}})}):e.push({name:i,path:`/${i}`,component:x[s],meta:{name:s}})}),e}const $=X({history:Y(),routes:De(),scrollBehavior:(e,r,o)=>o||{x:0,y:0}});W($.currentRoute,()=>{$.currentRoute.value.redirectedFrom||q(P)});M($);window.vueRouter=$;const Le={data(){return{path:"M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"}},computed:{title(){const{name:e}=this.$route.meta||{};return e?e.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},Be={class:"demo-nav"},Ee={class:"demo-nav__title"},Ne=["d"];function Se(e,r,o,s,i,n){return U((c(),l("div",Be,[h("div",Ee,w(n.title),1),(c(),l("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:r[0]||(r[0]=(...d)=>n.onBack&&n.onBack(...d))},[h("path",{fill:"#969799","fill-rule":"evenodd",d:i.path},null,8,Ne)]))],512)),[[G,n.title]])}var Ke=g(Le,[["render",Se]]);const ze={components:{DemoNav:Ke}};function Ce(e,r,o,s,i,n){const d=y("demo-nav"),p=y("demo-section"),m=y("router-view");return c(),l(N,null,[b(d),b(m,null,{default:L(({Component:k})=>[(c(),T(Q,null,[b(p,null,{default:L(()=>[(c(),T(J(k)))]),_:2},1024)],1024))]),_:1})],64)}var Oe=g(ze,[["render",Ce]]);(function(){if(typeof window=="undefined")return;var e,r="ontouchstart"in window;document.createTouch||(document.createTouch=function(a,t,u,_,f,v,R){return new o(t,u,{pageX:_,pageY:f,screenX:v,screenY:R,clientX:_-window.pageXOffset,clientY:f-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var a=s(),t=0;t{window.app.mount("#app")},0);