From e7e35843a8a98bca066ba8e93fc34de0fa286997 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 28 Sep 2021 12:06:00 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20youzan/v?= =?UTF-8?q?ant-weapp@42738c9d39768c43f9cd54317b838fe5dfbeacfa=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- chunks.1630f4ae.js | 2 - chunks.1630f4ae.js.LICENSE.txt | 5 - site-desktop.cb7fb9cc.js | 2 - site-desktop.cb7fb9cc.js.LICENSE.txt | 1 - site-mobile.425f260b.js | 1 - vite/assets/iframe-router.af4eced8.js | 1 - vite/assets/main.206a7a43.js | 8 - vite/assets/main.33235344.js | 8 - vite/assets/main.5e9c7f08.js | 8 - vite/assets/main.6d70fb31.js | 8 - vite/assets/main.a57ec5f0.js | 8 - vite/assets/main.bec8a985.js | 11876 ------------------------ vite/assets/main.e6aeb5ab.css | 1 - vite/assets/main.e9e2ce12.js | 3 - vite/assets/mobile.c499ae33.js | 1 - vite/assets/nested.10c14f50.js | 1 - vite/assets/nested.4a8a3fe1.js | 1 - vite/assets/nested.5a8fa4c0.js | 1 - vite/assets/nested.69dfa8e2.js | 1 - vite/assets/nested.d8b7fefd.js | 1 - vite/assets/nested.e4962f14.js | 1 - vite/assets/style.195d65f1.css | 1 - vite/assets/style.7e455d8b.css | 1 - vite/assets/vue-libs.1fd58d42.js | 6 - vite/index.html | 37 - vite/mobile.html | 40 - 26 files changed, 12024 deletions(-) delete mode 100644 chunks.1630f4ae.js delete mode 100644 chunks.1630f4ae.js.LICENSE.txt delete mode 100644 site-desktop.cb7fb9cc.js delete mode 100644 site-desktop.cb7fb9cc.js.LICENSE.txt delete mode 100644 site-mobile.425f260b.js delete mode 100644 vite/assets/iframe-router.af4eced8.js delete mode 100644 vite/assets/main.206a7a43.js delete mode 100644 vite/assets/main.33235344.js delete mode 100644 vite/assets/main.5e9c7f08.js delete mode 100644 vite/assets/main.6d70fb31.js delete mode 100644 vite/assets/main.a57ec5f0.js delete mode 100644 vite/assets/main.bec8a985.js delete mode 100644 vite/assets/main.e6aeb5ab.css delete mode 100644 vite/assets/main.e9e2ce12.js delete mode 100644 vite/assets/mobile.c499ae33.js delete mode 100644 vite/assets/nested.10c14f50.js delete mode 100644 vite/assets/nested.4a8a3fe1.js delete mode 100644 vite/assets/nested.5a8fa4c0.js delete mode 100644 vite/assets/nested.69dfa8e2.js delete mode 100644 vite/assets/nested.d8b7fefd.js delete mode 100644 vite/assets/nested.e4962f14.js delete mode 100644 vite/assets/style.195d65f1.css delete mode 100644 vite/assets/style.7e455d8b.css delete mode 100644 vite/assets/vue-libs.1fd58d42.js delete mode 100644 vite/index.html delete mode 100644 vite/mobile.html diff --git a/chunks.1630f4ae.js b/chunks.1630f4ae.js deleted file mode 100644 index 3c544c6e..00000000 --- a/chunks.1630f4ae.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see chunks.1630f4ae.js.LICENSE.txt */ -(self.webpackChunk_vant_weapp=self.webpackChunk_vant_weapp||[]).push([[962],{2610:function(E,C,s){"use strict";s.d(C,{Bj:function(){return n},qq:function(){return i},Fl:function(){return IE},X3:function(){return jE},PG:function(){return FE},dq:function(){return yE},Xl:function(){return vE},Jd:function(){return j},WL:function(){return TE},qj:function(){return DE},iH:function(){return xE},lk:function(){return m},Um:function(){return hE},XI:function(){return wE},IU:function(){return mE},j:function(){return v},X$:function(){return f},SU:function(){return _E}});var u=s(3577);let a;const t=[];class n{constructor(E=!1){this.active=!0,this.effects=[],this.cleanups=[],!E&&a&&(this.parent=a,this.index=(a.scopes||(a.scopes=[])).push(this)-1)}run(E){if(this.active)try{return this.on(),E()}finally{this.off()}}on(){this.active&&(t.push(this),a=this)}off(){this.active&&(t.pop(),a=t[t.length-1])}stop(E){if(this.active){if(this.effects.forEach((E=>E.stop())),this.cleanups.forEach((E=>E())),this.scopes&&this.scopes.forEach((E=>E.stop(!0))),this.parent&&!E){const E=this.parent.scopes.pop();E&&E!==this&&(this.parent.scopes[this.index]=E,E.index=this.index)}this.active=!1}}}const l=E=>{const C=new Set(E);return C.w=0,C.n=0,C},e=E=>(E.w&c)>0,A=E=>(E.n&c)>0,p=new WeakMap;let d=0,c=1;const o=[];let r;const D=Symbol(""),h=Symbol("");class i{constructor(E,C=null,s){this.fn=E,this.scheduler=C,this.active=!0,this.deps=[],function(E,C){(C=C||a)&&C.active&&C.effects.push(E)}(this,s)}run(){if(!this.active)return this.fn();if(!o.includes(this))try{return o.push(r=this),g.push(F),F=!0,c=1<<++d,d<=30?(({deps:E})=>{if(E.length)for(let C=0;C{const{deps:C}=E;if(C.length){let s=0;for(let u=0;u0?o[E-1]:void 0}}stop(){this.active&&(B(this),this.onStop&&this.onStop(),this.active=!1)}}function B(E){const{deps:C}=E;if(C.length){for(let s=0;s{("length"===C||C>=a)&&A.push(E)}));else switch(void 0!==s&&A.push(e.get(s)),C){case"add":(0,u.kJ)(E)?(0,u.S0)(s)&&A.push(e.get("length")):(A.push(e.get(D)),(0,u._N)(E)&&A.push(e.get(h)));break;case"delete":(0,u.kJ)(E)||(A.push(e.get(D)),(0,u._N)(E)&&A.push(e.get(h)));break;case"set":(0,u._N)(E)&&A.push(e.get(D))}if(1===A.length)A[0]&&y(A[0]);else{const E=[];for(const C of A)C&&E.push(...C);y(l(E))}}function y(E,C){for(const C of(0,u.kJ)(E)?E:[...E])(C!==r||C.allowRecurse)&&(C.scheduler?C.scheduler():C.run())}const x=(0,u.fY)("__proto__,__v_isRef,__isVue"),w=new Set(Object.getOwnPropertyNames(Symbol).map((E=>Symbol[E])).filter(u.yk)),k=P(),z=P(!1,!0),_=P(!0),S=T();function T(){const E={};return["includes","indexOf","lastIndexOf"].forEach((C=>{E[C]=function(...E){const s=mE(this);for(let E=0,C=this.length;E{E[C]=function(...E){j();const s=mE(this)[C].apply(this,E);return m(),s}})),E}function P(E=!1,C=!1){return function(s,a,t){if("__v_isReactive"===a)return!E;if("__v_isReadonly"===a)return E;if("__v_raw"===a&&t===(E?C?rE:oE:C?cE:dE).get(s))return s;const n=(0,u.kJ)(s);if(!E&&n&&(0,u.RI)(S,a))return Reflect.get(S,a,t);const l=Reflect.get(s,a,t);return((0,u.yk)(a)?w.has(a):x(a))?l:(E||v(s,0,a),C?l:yE(l)?n&&(0,u.S0)(a)?l:l.value:(0,u.Kn)(l)?E?iE(l):DE(l):l)}}const I=L(),$=L(!0);function L(E=!1){return function(C,s,a,t){let n=C[s];if(!E&&(a=mE(a),n=mE(n),!(0,u.kJ)(C)&&yE(n)&&!yE(a)))return n.value=a,!0;const l=(0,u.kJ)(C)&&(0,u.S0)(s)?Number(s)!0,deleteProperty:(E,C)=>!0},N=(0,u.l7)({},R,{get:z,set:$}),O=E=>(0,u.Kn)(E)?DE(E):E,H=E=>(0,u.Kn)(E)?iE(E):E,U=E=>E,V=E=>Reflect.getPrototypeOf(E);function Z(E,C,s=!1,u=!1){const a=mE(E=E.__v_raw),t=mE(C);C!==t&&!s&&v(a,0,C),!s&&v(a,0,t);const{has:n}=V(a),l=u?U:s?H:O;return n.call(a,C)?l(E.get(C)):n.call(a,t)?l(E.get(t)):void(E!==a&&E.get(C))}function G(E,C=!1){const s=this.__v_raw,u=mE(s),a=mE(E);return E!==a&&!C&&v(u,0,E),!C&&v(u,0,a),E===a?s.has(E):s.has(E)||s.has(a)}function W(E,C=!1){return E=E.__v_raw,!C&&v(mE(E),0,D),Reflect.get(E,"size",E)}function J(E){E=mE(E);const C=mE(this);return V(C).has.call(C,E)||(C.add(E),f(C,"add",E,E)),this}function K(E,C){C=mE(C);const s=mE(this),{has:a,get:t}=V(s);let n=a.call(s,E);n||(E=mE(E),n=a.call(s,E));const l=t.call(s,E);return s.set(E,C),n?(0,u.aU)(C,l)&&f(s,"set",E,C):f(s,"add",E,C),this}function X(E){const C=mE(this),{has:s,get:u}=V(C);let a=s.call(C,E);a||(E=mE(E),a=s.call(C,E)),u&&u.call(C,E);const t=C.delete(E);return a&&f(C,"delete",E,void 0),t}function Q(){const E=mE(this),C=0!==E.size,s=E.clear();return C&&f(E,"clear",void 0,void 0),s}function Y(E,C){return function(s,u){const a=this,t=a.__v_raw,n=mE(t),l=C?U:E?H:O;return!E&&v(n,0,D),t.forEach(((E,C)=>s.call(u,l(E),l(C),a)))}}function EE(E,C,s){return function(...a){const t=this.__v_raw,n=mE(t),l=(0,u._N)(n),e="entries"===E||E===Symbol.iterator&&l,A="keys"===E&&l,p=t[E](...a),d=s?U:C?H:O;return!C&&v(n,0,A?h:D),{next(){const{value:E,done:C}=p.next();return C?{value:E,done:C}:{value:e?[d(E[0]),d(E[1])]:d(E),done:C}},[Symbol.iterator](){return this}}}}function CE(E){return function(...C){return"delete"!==E&&this}}function sE(){const E={get(E){return Z(this,E)},get size(){return W(this)},has:G,add:J,set:K,delete:X,clear:Q,forEach:Y(!1,!1)},C={get(E){return Z(this,E,!1,!0)},get size(){return W(this)},has:G,add:J,set:K,delete:X,clear:Q,forEach:Y(!1,!0)},s={get(E){return Z(this,E,!0)},get size(){return W(this,!0)},has(E){return G.call(this,E,!0)},add:CE("add"),set:CE("set"),delete:CE("delete"),clear:CE("clear"),forEach:Y(!0,!1)},u={get(E){return Z(this,E,!0,!0)},get size(){return W(this,!0)},has(E){return G.call(this,E,!0)},add:CE("add"),set:CE("set"),delete:CE("delete"),clear:CE("clear"),forEach:Y(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((a=>{E[a]=EE(a,!1,!1),s[a]=EE(a,!0,!1),C[a]=EE(a,!1,!0),u[a]=EE(a,!0,!0)})),[E,s,C,u]}const[uE,aE,tE,nE]=sE();function lE(E,C){const s=C?E?nE:tE:E?aE:uE;return(C,a,t)=>"__v_isReactive"===a?!E:"__v_isReadonly"===a?E:"__v_raw"===a?C:Reflect.get((0,u.RI)(s,a)&&a in C?s:C,a,t)}const eE={get:lE(!1,!1)},AE={get:lE(!1,!0)},pE={get:lE(!0,!1)},dE=new WeakMap,cE=new WeakMap,oE=new WeakMap,rE=new WeakMap;function DE(E){return E&&E.__v_isReadonly?E:BE(E,!1,R,eE,dE)}function hE(E){return BE(E,!1,N,AE,cE)}function iE(E){return BE(E,!0,M,pE,oE)}function BE(E,C,s,a,t){if(!(0,u.Kn)(E))return E;if(E.__v_raw&&(!C||!E.__v_isReactive))return E;const n=t.get(E);if(n)return n;const l=(e=E).__v_skip||!Object.isExtensible(e)?0:function(E){switch(E){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((0,u.W7)(e));var e;if(0===l)return E;const A=new Proxy(E,2===l?a:s);return t.set(E,A),A}function FE(E){return gE(E)?FE(E.__v_raw):!(!E||!E.__v_isReactive)}function gE(E){return!(!E||!E.__v_isReadonly)}function jE(E){return FE(E)||gE(E)}function mE(E){const C=E&&E.__v_raw;return C?mE(C):E}function vE(E){return(0,u.Nj)(E,"__v_skip",!0),E}function bE(E){b()&&((E=mE(E)).dep||(E.dep=l()),q(E.dep))}function qE(E,C){(E=mE(E)).dep&&y(E.dep)}const fE=E=>(0,u.Kn)(E)?DE(E):E;function yE(E){return Boolean(E&&!0===E.__v_isRef)}function xE(E){return zE(E)}function wE(E){return zE(E,!0)}class kE{constructor(E,C=!1){this._shallow=C,this.dep=void 0,this.__v_isRef=!0,this._rawValue=C?E:mE(E),this._value=C?E:fE(E)}get value(){return bE(this),this._value}set value(E){E=this._shallow?E:mE(E),(0,u.aU)(E,this._rawValue)&&(this._rawValue=E,this._value=this._shallow?E:fE(E),qE(this))}}function zE(E,C=!1){return yE(E)?E:new kE(E,C)}function _E(E){return yE(E)?E.value:E}const SE={get:(E,C,s)=>_E(Reflect.get(E,C,s)),set:(E,C,s,u)=>{const a=E[C];return yE(a)&&!yE(s)?(a.value=s,!0):Reflect.set(E,C,s,u)}};function TE(E){return FE(E)?E:new Proxy(E,SE)}class PE{constructor(E,C,s){this._setter=C,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new i(E,(()=>{this._dirty||(this._dirty=!0,qE(this))})),this.__v_isReadonly=s}get value(){const E=mE(this);return bE(E),E._dirty&&(E._dirty=!1,E._value=E.effect.run()),E._value}set value(E){this._setter(E)}}function IE(E,C){let s,a;return(0,u.mf)(E)?(s=E,a=u.dG):(s=E.get,a=E.set),new PE(s,a,(0,u.mf)(E)||!E.set)}Promise.resolve()},3577:function(E,C,s){"use strict";function u(E,C){const s=Object.create(null),u=E.split(",");for(let E=0;E!!s[E.toLowerCase()]:E=>!!s[E]}s.d(C,{Z6:function(){return h},kT:function(){return D},NO:function(){return B},dG:function(){return i},_A:function(){return H},kC:function(){return Z},Nj:function(){return K},l7:function(){return m},aU:function(){return W},RI:function(){return q},rs:function(){return V},ir:function(){return J},kJ:function(){return f},mf:function(){return k},e1:function(){return a},S0:function(){return R},_N:function(){return y},tR:function(){return j},Kn:function(){return S},F7:function(){return g},PO:function(){return L},tI:function(){return T},Gg:function(){return M},DM:function(){return x},Pq:function(){return t},HD:function(){return z},yk:function(){return _},WV:function(){return d},hq:function(){return c},fY:function(){return u},C_:function(){return p},j5:function(){return n},Od:function(){return v},zw:function(){return o},hR:function(){return G},He:function(){return X},W7:function(){return $}});const a=u("Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt"),t=u("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function n(E){if(f(E)){const C={};for(let s=0;s{if(E){const s=E.split(e);s.length>1&&(C[s[0].trim()]=s[1].trim())}})),C}function p(E){let C="";if(z(E))C=E;else if(f(E))for(let s=0;sd(E,C)))}const o=E=>null==E?"":f(E)||S(E)&&E.toString===P?JSON.stringify(E,r,2):String(E),r=(E,C)=>C&&C.__v_isRef?r(E,C.value):y(C)?{[`Map(${C.size})`]:[...C.entries()].reduce(((E,[C,s])=>(E[`${C} =>`]=s,E)),{})}:x(C)?{[`Set(${C.size})`]:[...C.values()]}:!S(C)||f(C)||L(C)?C:String(C),D={},h=[],i=()=>{},B=()=>!1,F=/^on[^a-z]/,g=E=>F.test(E),j=E=>E.startsWith("onUpdate:"),m=Object.assign,v=(E,C)=>{const s=E.indexOf(C);s>-1&&E.splice(s,1)},b=Object.prototype.hasOwnProperty,q=(E,C)=>b.call(E,C),f=Array.isArray,y=E=>"[object Map]"===I(E),x=E=>"[object Set]"===I(E),w=E=>E instanceof Date,k=E=>"function"==typeof E,z=E=>"string"==typeof E,_=E=>"symbol"==typeof E,S=E=>null!==E&&"object"==typeof E,T=E=>S(E)&&k(E.then)&&k(E.catch),P=Object.prototype.toString,I=E=>P.call(E),$=E=>I(E).slice(8,-1),L=E=>"[object Object]"===I(E),R=E=>z(E)&&"NaN"!==E&&"-"!==E[0]&&""+parseInt(E,10)===E,M=u(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),N=E=>{const C=Object.create(null);return s=>C[s]||(C[s]=E(s))},O=/-(\w)/g,H=N((E=>E.replace(O,((E,C)=>C?C.toUpperCase():"")))),U=/\B([A-Z])/g,V=N((E=>E.replace(U,"-$1").toLowerCase())),Z=N((E=>E.charAt(0).toUpperCase()+E.slice(1))),G=N((E=>E?`on${Z(E)}`:"")),W=(E,C)=>!Object.is(E,C),J=(E,C)=>{for(let s=0;s{Object.defineProperty(E,C,{configurable:!0,enumerable:!1,value:s})},X=E=>{const C=parseFloat(E);return isNaN(C)?E:C}},6462:function(E,C,s){"use strict";var u=s(3645),a=s.n(u)()(!1);a.push([E.id,"",""]),C.Z=a},3645:function(E){"use strict";E.exports=function(E){var C=[];return C.toString=function(){return this.map((function(C){var s=function(E,C){var s,u,a,t=E[1]||"",n=E[3];if(!n)return t;if(C&&"function"==typeof btoa){var l=(s=n,u=btoa(unescape(encodeURIComponent(JSON.stringify(s)))),a="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(u),"/*# ".concat(a," */")),e=n.sources.map((function(E){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(E," */")}));return[t].concat(e).concat([l]).join("\n")}return[t].join("\n")}(C,E);return C[2]?"@media ".concat(C[2]," {").concat(s,"}"):s})).join("")},C.i=function(E,s,u){"string"==typeof E&&(E=[[null,E,""]]);var a={};if(u)for(var t=0;t(0,u.h)("section",{innerHTML:a})}},3697:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3E%u6837%u5F0F%u8986%u76D6%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3EVant%20Weapp%20%u57FA%u4E8E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u7684%u673A%u5236%uFF0C%u4E3A%u5F00%u53D1%u8005%u63D0%u4F9B%u4E86%u4EE5%u4E0B%203%20%u79CD%u4FEE%u6539%u7EC4%u4EF6%u6837%u5F0F%u7684%u65B9%u6CD5%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-chu-yang-shi-ge-chi%22%3E%u89E3%u9664%u6837%u5F0F%u9694%u79BB%3C/h3%3E%0A%3Cp%3E%u6837%u5F0F%u9694%u79BB%u7684%u76F8%u5173%u80CC%u666F%u77E5%u8BC6%u8BF7%u67E5%u9605%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html%23%25E7%25BB%2584%25E4%25BB%25B6%25E6%25A0%25B7%25E5%25BC%258F%25E9%259A%2594%25E7%25A6%25BB%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u6587%u6863%3C/a%3E%3C/p%3E%0A%3Cbr%20/%3E%0A%3Cp%3EVant%20Weapp%20%u7684%u6240%u6709%u7EC4%u4EF6%u90FD%u5F00%u542F%u4E86%3Ccode%3EaddGlobalClass%3A%20true%3C/code%3E%u4EE5%u63A5%u53D7%u5916%u90E8%u6837%u5F0F%u7684%u5F71%u54CD%uFF0C%u53EF%u4EE5%u4F7F%u7528%u5982%u4E0B%202%20%u79CD%u65B9%u5F0F%u8986%u76D6%u7EC4%u4EF6%u6837%u5F0F%3C/p%3E%0A%3Cblockquote%3E%0A%3Cp%3E%u5728%u9875%u9762%u4E2D%u4F7F%u7528%20Vant%20Weapp%20%u7EC4%u4EF6%u65F6%uFF0C%u53EF%u76F4%u63A5%u5728%u9875%u9762%u7684%u6837%u5F0F%u6587%u4EF6%u4E2D%u8986%u76D6%u6837%u5F0F%3C/p%3E%0A%3C/blockquote%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u4E3B%u8981%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E/*%20page.wxss%20*/%3C/span%3E%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.van-button--primary%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-size%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E20px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20pink%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3E%u5728%u81EA%u5B9A%u4E49%u7EC4%u4EF6%u4E2D%u4F7F%u7528%20Vant%20Weapp%20%u7EC4%u4EF6%u65F6%uFF0C%u9700%u5F00%u542F%3Ccode%3EstyleIsolation%3A%20%27shared%27%3C/code%3E%u9009%u9879%3C/p%3E%0A%3C/blockquote%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u4E3B%u8981%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EComponent%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EstyleIsolation%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bshared%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.van-button--primary%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-size%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E20px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20pink%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-yong-wai-bu-yang-shi-lei%22%3E%u4F7F%u7528%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Cp%3E%u5916%u90E8%u6837%u5F0F%u7C7B%u7684%u76F8%u5173%u77E5%u8BC6%u80CC%u666F%u8BF7%u67E5%u9605%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html%23%25E5%25A4%2596%25E9%2583%25A8%25E6%25A0%25B7%25E5%25BC%258F%25E7%25B1%25BB%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u6587%u6863%3C/a%3E%3C/p%3E%0A%3Cbr%20/%3E%0A%3Cp%3EVant%20Weapp%20%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%3C/p%3E%0A%3Cp%3E%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%3Ccode%3E%21important%3C/code%3E%u4EE5%u4FDD%u8BC1%u5916%u90E8%u6837%u5F0F%u7C7B%u7684%u4F18%u5148%u7EA7%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcell-title%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcell-value%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.cell-title%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ecolor%3C/span%3E%3A%20pink%20%3Cspan%20class%3D%22hljs-meta%22%3E%21important%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-size%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E20px%3C/span%3E%20%3Cspan%20class%3D%22hljs-meta%22%3E%21important%3C/span%3E%3B%0A%7D%0A%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.cell-value%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ecolor%3C/span%3E%3A%20green%20%3Cspan%20class%3D%22hljs-meta%22%3E%21important%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-size%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E12px%3C/span%3E%20%3Cspan%20class%3D%22hljs-meta%22%3E%21important%3C/span%3E%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-yong-css-bian-liang%22%3E%u4F7F%u7528%20CSS%20%u53D8%u91CF%3C/h3%3E%0A%3Cp%3EVant%20Weapp%20%u4E3A%u90E8%u5206%20CSS%20%u5C5E%u6027%u5F00%u653E%u4E86%u57FA%u4E8E%20CSS%20%u5C5E%u6027%u7684%u5B9A%u5236%u65B9%u6848%u3002%3C/p%3E%0A%3Cp%3E%u76F8%u8F83%u4E8E%20%u89E3%u9664%u6837%u5F0F%u9694%u79BB%20%u548C%20%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%3C/p%3E%0A%3Cp%3E%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%3Ca%20href%3D%22%23/theme%22%20target%3D%22_blank%22%3E%u5B9A%u5236%u4E3B%u9898%3C/a%3E%3C/p%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},7825:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Cdiv%20class%3D%22card%22%3E%0A%20%20%3Cdiv%20class%3D%22van-doc-intro%22%3E%0A%20%20%20%20%3Cimg%20class%3D%22van-doc-intro__logo%22%20style%3D%22width%3A%20120px%3B%20height%3A%20120px%3B%20box-shadow%3A%20none%3B%22%20src%3D%22//img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png%22%3E%0A%20%20%20%20%3Ch2%20style%3D%22margin%3A%200%3B%20font-size%3A%2032px%3B%20line-height%3A%2060px%3B%22%3EVant%20Weapp%3C/h2%3E%0A%20%20%20%20%3Cp%3E%u8F7B%u91CF%u3001%u53EF%u9760%u7684%u5C0F%u7A0B%u5E8F%20UI%20%u7EC4%u4EF6%u5E93%3C/p%3E%0A%20%20%3C/div%3E%0A%3C/div%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3EVant%20%u662F%3Cstrong%3E%u6709%u8D5E%u524D%u7AEF%u56E2%u961F%3C/strong%3E%u5F00%u6E90%u7684%u79FB%u52A8%u7AEF%u7EC4%u4EF6%u5E93%uFF0C%u4E8E%202016%20%u5E74%u5F00%u6E90%uFF0C%u5DF2%u6301%u7EED%u7EF4%u62A4%204%20%u5E74%u65F6%u95F4%u3002Vant%20%u5BF9%u5185%u627F%u8F7D%u4E86%u6709%u8D5E%u6240%u6709%u6838%u5FC3%u4E1A%u52A1%uFF0C%u5BF9%u5916%u670D%u52A1%u5341%u591A%u4E07%u5F00%u53D1%u8005%uFF0C%u662F%u4E1A%u754C%u4E3B%u6D41%u7684%u79FB%u52A8%u7AEF%u7EC4%u4EF6%u5E93%u4E4B%u4E00%u3002%3C/p%3E%0A%3Cp%3E%u76EE%u524D%20Vant%20%u5B98%u65B9%u63D0%u4F9B%u4E86%20%3Ca%20href%3D%22https%3A//vant-contrib.gitee.io/vant%22%20target%3D%22_blank%22%3EVue%20%u7248%u672C%3C/a%3E%u548C%3Ca%20href%3D%22http%3A//vant-contrib.gitee.io/vant-weapp%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u7248%u672C%3C/a%3E%uFF0C%u5E76%u7531%u793E%u533A%u56E2%u961F%u7EF4%u62A4%20%3Ca%20href%3D%22https%3A//github.com/mxdi9i7/vant-react%22%20target%3D%22_blank%22%3EReact%20%u7248%u672C%3C/a%3E%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yu-lan%22%3E%u9884%u89C8%3C/h3%3E%0A%3Cp%3E%u626B%u63CF%u4E0B%u65B9%u5C0F%u7A0B%u5E8F%u4E8C%u7EF4%u7801%uFF0C%u4F53%u9A8C%u7EC4%u4EF6%u5E93%u793A%u4F8B%uFF1A%3C/p%3E%0A%3Cimg%20src%3D%22https%3A//img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg%22%20style%3D%22width%3A%20200px%3B%20height%3A%20200px%3B%20margin-top%3A%2015px%3B%20box-shadow%3A%20none%22%20%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22kuai-su-shang-shou%22%3E%u5FEB%u901F%u4E0A%u624B%3C/h3%3E%0A%3Cp%3E%u8BF7%u53C2%u8003%20%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gong-xian-dai-ma%22%3E%u8D21%u732E%u4EE3%u7801%3C/h3%3E%0A%3Cp%3E%u4F7F%u7528%u8FC7%u7A0B%u4E2D%u53D1%u73B0%u4EFB%u4F55%u95EE%u9898%u90FD%u53EF%u4EE5%u63D0%20%3Ca%20href%3D%22https%3A//github.com/youzan/vant-weapp/issues%22%20target%3D%22_blank%22%3EIssue%3C/a%3E%20%u7ED9%u6211%u4EEC%uFF0C%u5F53%u7136%uFF0C%u6211%u4EEC%u4E5F%u975E%u5E38%u6B22%u8FCE%u4F60%u7ED9%u6211%u4EEC%u53D1%20%3Ca%20href%3D%22https%3A//github.com/youzan/vant-weapp/pulls%22%20target%3D%22_blank%22%3EPR%3C/a%3E%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-ru-wo-men%22%3E%u52A0%u5165%u6211%u4EEC%3C/h3%3E%0A%3Cp%3E%3Cstrong%3E%u6709%u8D5E%u524D%u7AEF%u56E2%u961F%3C/strong%3E%u662F%u7531%u4E00%u7FA4%u5E74%u8F7B%u3001%u76AE%u5B9E%u3001%u5BF9%u6280%u672F%u9971%u542B%u70ED%u60C5%u7684%u5C0F%u4F19%u4F34%u7EC4%u6210%u7684%uFF0C%u76EE%u524D%u5171%u6709%20100%20%u591A%u540D%u524D%u7AEF%u5DE5%u7A0B%u5E08%uFF0C%u5206%u5E03%u5728%u4E1A%u52A1%u4E2D%u53F0%u3001%u7535%u5546%u3001%u96F6%u552E%u3001%u7F8E%u4E1A%u3001%u8D44%u4EA7%u3001%u6709%u8D5E%u4E91%u3001%u8D4B%u80FD%u5E73%u53F0%u3001%u589E%u957F%u4E2D%u5FC3%u7B49%u4E1A%u52A1%u7EBF%u3002%3C/p%3E%0A%3Cp%3E%u6211%u4EEC%u70ED%u7231%u5206%u4EAB%u548C%u5F00%u6E90%uFF0C%u5D07%u5C1A%u7528%u5DE5%u7A0B%u5E08%u7684%u65B9%u5F0F%u89E3%u51B3%u95EE%u9898%uFF0C%u56E0%u6B64%u9020%u4E86%u5F88%u591A%u5DE5%u5177%u6765%u89E3%u51B3%u6211%u4EEC%u9047%u5230%u7684%u95EE%u9898%uFF0C%u76EE%u524D%u6211%u4EEC%u7EF4%u62A4%u7684%u5F00%u6E90%u4EA7%u54C1%u6709%uFF1A%3C/p%3E%0A%3Cimg%20src%3D%22https%3A//img.yzcdn.cn/public_files/2019/07/22/f4b70763c55c8710c52c667ecf192c05.jpeg%22%20style%3D%22width%3A%20320px%3B%20height%3A%20303px%3B%20box-shadow%3A%20none%3B%22%3E%0A%3Cp%3E%u6211%u4EEC%u6B63%u5728%u5BFB%u627E%u66F4%u591A%u4F18%u79C0%u7684%u5C0F%u4F19%u4F34%uFF0C%u4E00%u8D77%u62D3%u5C55%u524D%u7AEF%u6280%u672F%u7684%u8FB9%u754C%uFF0C%u671F%u5F85%u4F60%u7684%u52A0%u5165%uFF01%3C/p%3E%0A%3Cul%3E%0A%3Cli%3E%3Ca%20target%3D%22_blank%22%20href%3D%22https%3A//app.mokahr.com/apply/youzan/3750%23/jobs/%3Fkeyword%3D%25E5%2589%258D%25E7%25AB%25AF%26_k%3Dtueqds%22%3E%u804C%u4F4D%u8BE6%u60C5%3C/a%3E%uFF08Base%3A%20%u676D%u5DDE/%u6DF1%u5733%uFF09%3C/li%3E%0A%3Cli%3E%3Ca%20target%3D%22_blank%22%20href%3D%22https%3A//tech.youzan.com/tag/front-end/%22%3E%u56E2%u961F%u535A%u5BA2%3C/a%3E%3C/li%3E%0A%3Cli%3E%3Ca%20target%3D%22_blank%22%20href%3D%22https%3A//github.com/youzan%22%3E%u5F00%u6E90%u9879%u76EE%3C/a%3E%3C/li%3E%0A%3C/ul%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22lian-jie%22%3E%u94FE%u63A5%3C/h3%3E%0A%3Cul%3E%0A%3Cli%3E%3Ca%20href%3D%22https%3A//github.com/youzan/vant-weapp/issues%22%20target%3D%22_blank%22%3E%u610F%u89C1%u53CD%u9988%3C/a%3E%3C/li%3E%0A%3Cli%3E%3Ca%20href%3D%22https%3A//job.youzan.com%22%20target%3D%22_blank%22%3E%u52A0%u5165%u6211%u4EEC%3C/a%3E%3C/li%3E%0A%3Cli%3E%3Ca%20href%3D%22%23/changelog%22%20target%3D%22_blank%22%3E%u66F4%u65B0%u65E5%u5FD7%3C/a%3E%3C/li%3E%0A%3Cli%3E%3Ca%20href%3D%22https%3A//github.com/youzan/vant%22%20target%3D%22_blank%22%3EVant%20Vue%20%u7248%3C/a%3E%3C/li%3E%0A%3C/ul%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22kai-yuan-xie-yi%22%3E%u5F00%u6E90%u534F%u8BAE%3C/h3%3E%0A%3Cp%3E%u672C%u9879%u76EE%u57FA%u4E8E%20%3Ca%20href%3D%22https%3A//zh.wikipedia.org/wiki/MIT%25E8%25A8%25B1%25E5%258F%25AF%25E8%25AD%2589%22%20target%3D%22_blank%22%3EMIT%3C/a%3E%20%u534F%u8BAE%uFF0C%u8BF7%u81EA%u7531%u5730%u4EAB%u53D7%u548C%u53C2%u4E0E%u5F00%u6E90%3C/p%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9483:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3E%u5FEB%u901F%u4E0A%u624B%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bei-jing-zhi-shi%22%3E%u80CC%u666F%u77E5%u8BC6%3C/h3%3E%0A%3Cp%3E%u4F7F%u7528%20Vant%20Weapp%20%u524D%uFF0C%u8BF7%u786E%u4FDD%u4F60%u5DF2%u7ECF%u5B66%u4E60%u8FC7%u5FAE%u4FE1%u5B98%u65B9%u7684%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/framework/%22%20target%3D%22_blank%22%3E%u5C0F%u7A0B%u5E8F%u7B80%u6613%u6559%u7A0B%3C/a%3E%20%u548C%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/framework/custom-component/%22%20target%3D%22_blank%22%3E%u81EA%u5B9A%u4E49%u7EC4%u4EF6%u4ECB%u7ECD%3C/a%3E%u3002%3C/p%3E%0A%3C/div%3E%3Ch2%20id%3D%22an-zhuang%22%3E%u5B89%u88C5%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bu-zou-yi-tong-guo-npm-an-zhuang%22%3E%u6B65%u9AA4%u4E00%20%u901A%u8FC7%20npm%20%u5B89%u88C5%3C/h3%3E%0A%3Cblockquote%3E%0A%3Cp%3E%u4F7F%u7528%20npm%20%u6784%u5EFA%u524D%uFF0C%u8BF7%u5148%u9605%u8BFB%u5FAE%u4FE1%u5B98%u65B9%u7684%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/devtools/npm.html%22%20target%3D%22_blank%22%3Enpm%20%u652F%u6301%3C/a%3E%3C/p%3E%0A%3C/blockquote%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-bash%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u901A%u8FC7%20npm%20%u5B89%u88C5%3C/span%3E%0Anpm%20i%20@vant/weapp%20-S%20--production%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u901A%u8FC7%20yarn%20%u5B89%u88C5%3C/span%3E%0Ayarn%20add%20@vant/weapp%20--production%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u5B89%u88C5%200.x%20%u7248%u672C%3C/span%3E%0Anpm%20i%20vant-weapp%20-S%20--production%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bu-zou-er-xiu-gai-app.json%22%3E%u6B65%u9AA4%u4E8C%20%u4FEE%u6539%20app.json%3C/h3%3E%0A%3Cp%3E%u5C06%20app.json%20%u4E2D%u7684%20%3Ccode%3E%26quot%3Bstyle%26quot%3B%3A%20%26quot%3Bv2%26quot%3B%3C/code%3E%20%u53BB%u9664%uFF0C%u5C0F%u7A0B%u5E8F%u7684%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html%23style%22%20target%3D%22_blank%22%3E%u65B0%u7248%u57FA%u7840%u7EC4%u4EF6%3C/a%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bu-zou-san-xiu-gai-project.config.json%22%3E%u6B65%u9AA4%u4E09%20%u4FEE%u6539%20project.config.json%3C/h3%3E%0A%3Cp%3E%u5F00%u53D1%u8005%u5DE5%u5177%u521B%u5EFA%u7684%u9879%u76EE%uFF0C%3Ccode%3EminiprogramRoot%3C/code%3E%20%u9ED8%u8BA4%u4E3A%20%3Ccode%3Eminiprogram%3C/code%3E%uFF0C%3Ccode%3Epackage.json%3C/code%3E%20%u5728%u5176%u5916%u90E8%uFF0Cnpm%20%u6784%u5EFA%u65E0%u6CD5%u6B63%u5E38%u5DE5%u4F5C%u3002%3C/p%3E%0A%3Cp%3E%u9700%u8981%u624B%u52A8%u5728%20%3Ccode%3Eproject.config.json%3C/code%3E%20%u5185%u6DFB%u52A0%u5982%u4E0B%u914D%u7F6E%uFF0C%u4F7F%u5F00%u53D1%u8005%u5DE5%u5177%u53EF%u4EE5%u6B63%u786E%u7D22%u5F15%u5230%20npm%20%u4F9D%u8D56%u7684%u4F4D%u7F6E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%7B%0A%20%20...%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bsetting%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%20%20...%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3BpackNpmManually%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3BpackNpmRelationList%26quot%3B%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3BpackageJsonPath%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B./package.json%26quot%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3BminiprogramNpmDistDir%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B./miniprogram/%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cp%3E%u6CE8%u610F%uFF1A%20%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%27./%27%u5373%u53EF%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bu-zou-si-gou-jian-npm-bao%22%3E%u6B65%u9AA4%u56DB%20%u6784%u5EFA%20npm%20%u5305%3C/h3%3E%0A%3Cp%3E%u6253%u5F00%u5FAE%u4FE1%u5F00%u53D1%u8005%u5DE5%u5177%uFF0C%u70B9%u51FB%20%3Cstrong%3E%u5DE5%u5177%20-%26gt%3B%20%u6784%u5EFA%20npm%3C/strong%3E%uFF0C%u5E76%u52FE%u9009%20%3Cstrong%3E%u4F7F%u7528%20npm%20%u6A21%u5757%3C/strong%3E%20%u9009%u9879%uFF0C%u6784%u5EFA%u5B8C%u6210%u540E%uFF0C%u5373%u53EF%u5F15%u5165%u7EC4%u4EF6%u3002%3C/p%3E%0A%3Cimg%20style%3D%22width%3A%20500px%3B%22%20src%3D%22https%3A//img.yzcdn.cn/public_files/2019/08/15/fa0549210055976cb63798503611ce3d.png%22%20/%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bu-zou-wu-typescript-zhi-chi%22%3E%u6B65%u9AA4%u4E94%20typescript%20%u652F%u6301%3C/h3%3E%0A%3Cp%3E%u5982%u679C%u4F60%u4F7F%u7528%20typescript%20%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%3C/p%3E%0A%3Ch4%20id%3D%22an-zhuang-miniprogram-api-typings%22%3E%u5B89%u88C5%20miniprogram-api-typings%3C/h4%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-bash%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u901A%u8FC7%20npm%20%u5B89%u88C5%3C/span%3E%0Anpm%20i%20-D%20miniprogram-api-typings%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u901A%u8FC7%20yarn%20%u5B89%u88C5%3C/span%3E%0Ayarn%20add%20-D%20miniprogram-api-typings%0A%3C/code%3E%3C/pre%3E%0A%3Ch4%20id%3D%22zai-tsconfig.json-zhong-zeng-jia-ru-xia-pei-zhi-yi-fang-zhi-tsc-bian-yi-bao-cuo.%22%3E%u5728%20tsconfig.json%20%u4E2D%u589E%u52A0%u5982%u4E0B%u914D%u7F6E%uFF0C%u4EE5%u9632%u6B62%20tsc%20%u7F16%u8BD1%u62A5%u9519%u3002%3C/h4%3E%0A%3Cp%3E%u8BF7%u5C06%3Ccode%3Epath/to/node_modules/@vant/weapp%3C/code%3E%u4FEE%u6539%u4E3A%u9879%u76EE%u7684%20%3Ccode%3Enode_modules%3C/code%3E%20%u4E2D%20@vant/weapp%20%u6240%u5728%u7684%u76EE%u5F55%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%7B%0A%20%20...%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3BcompilerOptions%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%20%20...%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3BbaseUrl%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B.%26quot%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Btypes%26quot%3B%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bminiprogram-api-typings%26quot%3B%3C/span%3E%5D%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bpaths%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3B@vant/weapp/*%26quot%3B%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bpath/to/node_modules/@vant/weapp/dist/*%26quot%3B%3C/span%3E%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Blib%26quot%3B%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BES6%26quot%3B%3C/span%3E%5D%0A%20%20%7D%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-li-gong-cheng%22%3E%u793A%u4F8B%u5DE5%u7A0B%3C/h3%3E%0A%3Cp%3E%u6211%u4EEC%u63D0%u4F9B%u4E86%u4E00%u4E2A%3Ca%20href%3D%22https%3A//github.com/youzan/vant-demo%22%20target%3D%22_blank%22%3E%u793A%u4F8B%u5DE5%u7A0B%3C/a%3E%uFF0C%u793A%u4F8B%u5DE5%u7A0B%u4F1A%u5E2E%u52A9%u4F60%u4E86%u89E3%u5982%u4E0B%u5185%u5BB9%uFF1A%3C/p%3E%0A%3Cul%3E%0A%3Cli%3E%u57FA%u4E8E%20Vant%20Weapp%20%u642D%u5EFA%u5C0F%u7A0B%u5E8F%u5E94%u7528%3C/li%3E%0A%3Cli%3E%u6837%u5F0F%u8986%u76D6%u65B9%u6848%3C/li%3E%0A%3C/ul%3E%0A%3C/div%3E%3Ch2%20id%3D%22shi-yong%22%3E%u4F7F%u7528%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru-zu-jian%22%3E%u5F15%u5165%u7EC4%u4EF6%3C/h3%3E%0A%3Cp%3E%u4EE5%20Button%20%u7EC4%u4EF6%u4E3A%u4F8B%uFF0C%u53EA%u9700%u8981%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u914D%u7F6E%20Button%20%u5BF9%u5E94%u7684%u8DEF%u5F84%u5373%u53EF%u3002%3C/p%3E%0A%3Cp%3E%u6240%u6709%u7EC4%u4EF6%u6587%u6863%u4E2D%u7684%u5F15%u5165%u8DEF%u5F84%u5747%u4EE5%20npm%20%u5B89%u88C5%u4E3A%u4F8B%uFF0C%u5982%u679C%u4F60%u662F%u901A%u8FC7%u4E0B%u8F7D%u6E90%u4EE3%u7801%u7684%u65B9%u5F0F%u4F7F%u7528%20@vant/weapp%uFF0C%u8BF7%u5C06%u8DEF%u5F84%u4FEE%u6539%u4E3A%u9879%u76EE%u4E2D%20@vant/weapp%20%u6240%u5728%u7684%u76EE%u5F55%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u901A%u8FC7%20npm%20%u5B89%u88C5%3C/span%3E%0A%3Cspan%20class%3D%22hljs-comment%22%3E//%20app.json%3C/span%3E%0A%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-button%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/button/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u901A%u8FC7%u4E0B%u8F7D%u6E90%u7801%u4F7F%u7528%20es6%u7248%u672C%3C/span%3E%0A%3Cspan%20class%3D%22hljs-comment%22%3E//%20app.json%3C/span%3E%0A%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-button%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bpath/to/@vant/weapp/dist/button/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u901A%u8FC7%u4E0B%u8F7D%u6E90%u7801%u4F7F%u7528%20es5%u7248%u672C%3C/span%3E%0A%3Cspan%20class%3D%22hljs-comment%22%3E//%20app.json%3C/span%3E%0A%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-button%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bpath/to/@vant/weapp/lib/button/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-yong-zu-jian%22%3E%u4F7F%u7528%u7EC4%u4EF6%3C/h3%3E%0A%3Cp%3E%u5F15%u5165%u7EC4%u4EF6%u540E%uFF0C%u53EF%u4EE5%u5728%20wxml%20%u4E2D%u76F4%u63A5%u4F7F%u7528%u7EC4%u4EF6%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-xml%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22qi-ta%22%3E%u5176%u4ED6%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zai-kai-fa-zhe-gong-ju-zhong-yu-lan-shi-li-xiao-cheng-xu%22%3E%u5728%u5F00%u53D1%u8005%u5DE5%u5177%u4E2D%u9884%u89C8%u793A%u4F8B%u5C0F%u7A0B%u5E8F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-bash%22%3E%0A%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u5C06%u9879%u76EE%u514B%u9686%u5230%u672C%u5730%3C/span%3E%0Agit%20%3Cspan%20class%3D%22hljs-built_in%22%3Eclone%3C/span%3E%20git@github.com%3Ayouzan/vant-weapp.git%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u5B89%u88C5%u9879%u76EE%u4F9D%u8D56%3C/span%3E%0A%3Cspan%20class%3D%22hljs-built_in%22%3Ecd%3C/span%3E%20vant-weapp%20%26amp%3B%26amp%3B%20npm%20install%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%23%20%u6267%u884C%u7EC4%u4EF6%u7F16%u8BD1%3C/span%3E%0Anpm%20run%20dev%0A%0A%3C/code%3E%3C/pre%3E%0A%3Cp%3E%u63A5%u7740%u6253%u5F00%u5FAE%u4FE1%u5F00%u53D1%u8005%u5DE5%u5177%uFF0C%u5BFC%u5165%3Ccode%3Eexample%3C/code%3E%u76EE%u5F55%u7684%u9879%u76EE%u5C31%u53EF%u4EE5%u9884%u89C8%u793A%u4F8B%u4E86%u3002%3C/p%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},7844:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3E%u5B9A%u5236%u4E3B%u9898%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bei-jing-zhi-shi%22%3E%u80CC%u666F%u77E5%u8BC6%3C/h3%3E%0A%3Cp%3E%u5C0F%u7A0B%u5E8F%u57FA%u4E8E%20%3Ca%20href%3D%22https%3A//developers.google.com/web/fundamentals/web-components/shadowdom%3Fhl%3Dzh-cn%22%20target%3D%22_blank%22%3EShadow%20DOM%3C/a%3E%20%u6765%u5B9E%u73B0%u81EA%u5B9A%u4E49%u7EC4%u4EF6%uFF0C%u6240%u4EE5%20Vant%20Weapp%20%u4F7F%u7528%u4E0E%u4E4B%u914D%u5957%u7684%20%3Ca%20href%3D%22https%3A//developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties%22%20target%3D%22_blank%22%3ECSS%20%u53D8%u91CF%3C/a%3E%20%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%3C/p%3E%0A%3Cp%3ECSS%20%u53D8%u91CF%20%u7684%u517C%u5BB9%u6027%u8981%u6C42%u53EF%u4EE5%u5728%20%3Ca%20href%3D%22https%3A//caniuse.com/%23feat%3Dcss-variables%22%20target%3D%22_blank%22%3E%u8FD9%u91CC%3C/a%3E%20%u67E5%u770B%u3002%u5BF9%u4E8E%u4E0D%u652F%u6301%20CSS%20%u53D8%u91CF%20%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yang-shi-bian-liang%22%3E%u6837%u5F0F%u53D8%u91CF%3C/h3%3E%0A%3Cp%3E%u5B9A%u5236%u4F7F%u7528%u7684%20CSS%20%u53D8%u91CF%20%u4E0E%20Less%20%u53D8%u91CF%20%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%20%3Ca%20href%3D%22https%3A//github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less%22%20target%3D%22_blank%22%3E%u914D%u7F6E%u6587%u4EF6%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-less%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E//%20Component%20Colors%3C/span%3E%0A%3Cspan%20class%3D%22hljs-variable%22%3E@text-color%3A%3C/span%3E%20%3Cspan%20class%3D%22hljs-number%22%3E%23323233%3C/span%3E%3B%0A%3Cspan%20class%3D%22hljs-variable%22%3E@border-color%3A%3C/span%3E%20%3Cspan%20class%3D%22hljs-number%22%3E%23ebedf0%3C/span%3E%3B%0A%3Cspan%20class%3D%22hljs-variable%22%3E@active-color%3A%3C/span%3E%20%3Cspan%20class%3D%22hljs-number%22%3E%23f2f3f5%3C/span%3E%3B%0A%3Cspan%20class%3D%22hljs-variable%22%3E@background-color%3A%3C/span%3E%20%3Cspan%20class%3D%22hljs-number%22%3E%23f8f8f8%3C/span%3E%3B%0A%3Cspan%20class%3D%22hljs-variable%22%3E@background-color-light%3A%3C/span%3E%20%3Cspan%20class%3D%22hljs-number%22%3E%23fafafa%3C/span%3E%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22ding-zhi-fang-fa%22%3E%u5B9A%u5236%u65B9%u6CD5%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ding-zhi-dan-ge-zu-jian-de-zhu-ti-yang-shi%22%3E%u5B9A%u5236%u5355%u4E2A%u7EC4%u4EF6%u7684%u4E3B%u9898%u6837%u5F0F%3C/h3%3E%0A%3Cblockquote%3E%0A%3Cp%3E%u5728%20wxss%20%u4E2D%u4E3A%u7EC4%u4EF6%u8BBE%u7F6E%20CSS%20%u53D8%u91CF%3C/p%3E%0A%3C/blockquote%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmy-button%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u9ED8%u8BA4%u6309%u94AE%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-less%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.my-button%3C/span%3E%20%7B%0A%20%20--button-%3Cspan%20class%3D%22hljs-attribute%22%3Eborder-radius%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E10px%3C/span%3E%3B%0A%20%20--button-default-%3Cspan%20class%3D%22hljs-attribute%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E%23f2f3f5%3C/span%3E%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3E%u6216%u901A%u8FC7%20style%20%u5C5E%u6027%u6765%u8BBE%u7F6E%20CSS%20%u53D8%u91CF%uFF0C%u8FD9%u4F7F%u4F60%u80FD%u591F%u8F7B%u677E%u5B9E%u73B0%u4E3B%u9898%u7684%u52A8%u6001%u5207%u6362%3C/p%3E%0A%3C/blockquote%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20buttonStyle%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u9ED8%u8BA4%u6309%u94AE%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EbuttonStyle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%0A%20%20%20%20%20%20--button-border-radius%3A%2010px%3B%0A%20%20%20%20%20%20--button-default-color%3A%20green%3B%0A%20%20%20%20%60%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonLoad%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3EsetTimeout%3C/span%3E%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EbuttonStyle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%0A%20%20%20%20%20%20%20%20%20%20--button-border-radius%3A%202px%3B%0A%20%20%20%20%20%20%20%20%20%20--button-default-color%3A%20pink%3B%0A%20%20%20%20%20%20%20%20%60%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%7D%2C%20%3Cspan%20class%3D%22hljs-number%22%3E2000%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ding-zhi-duo-ge-zu-jian-de-zhu-ti-yang-shi%22%3E%u5B9A%u5236%u591A%u4E2A%u7EC4%u4EF6%u7684%u4E3B%u9898%u6837%u5F0F%3C/h3%3E%0A%3Cblockquote%3E%0A%3Cp%3E%u4E0E%u5355%u4E2A%u7EC4%u4EF6%u7684%u5B9A%u5236%u65B9%u5F0F%u7C7B%u4F3C%uFF0C%u53EA%u9700%u7528%u4E00%u4E2A%20container%20%u8282%u70B9%u5305%u88F9%u4F4F%u9700%u8981%u5B9A%u5236%u7684%u7EC4%u4EF6%uFF0C%u5E76%u5C06%20CSS%20%u53D8%u91CF%20%u8BBE%u7F6E%u5728%20container%20%u8282%u70B9%u4E0A%3C/p%3E%0A%3C/blockquote%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcontainer%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClick%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u9ED8%u8BA4%u6309%u94AE%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-toast%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-toast%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Toast%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/vant-weapp/dist/toast/toast%26%23x27%3B%3C/span%3E%3B%0A%0APage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClick%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6211%u662F%u63D0%u793A%u6587%u6848%uFF0C%u5EFA%u8BAE%u4E0D%u8D85%u8FC7%u5341%u4E94%u5B57%7E%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-less%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.container%3C/span%3E%20%7B%0A%20%20--button-%3Cspan%20class%3D%22hljs-attribute%22%3Eborder-radius%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E10px%3C/span%3E%3B%0A%20%20--button-default-%3Cspan%20class%3D%22hljs-attribute%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E%23f2f3f5%3C/span%3E%3B%0A%20%20--toast-%3Cspan%20class%3D%22hljs-attribute%22%3Emax-width%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E100px%3C/span%3E%3B%0A%20%20--toast-%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20pink%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ding-zhi-quan-ju-zhu-ti-yang-shi%22%3E%u5B9A%u5236%u5168%u5C40%u4E3B%u9898%u6837%u5F0F%3C/h3%3E%0A%3Cblockquote%3E%0A%3Cp%3E%u5728%20app.wxss%20%u4E2D%uFF0C%u5199%u5165%20CSS%20%u53D8%u91CF%uFF0C%u5373%u53EF%u5BF9%u5168%u5C40%u751F%u6548%3C/p%3E%0A%3C/blockquote%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-less%22%3E%3Cspan%20class%3D%22hljs-selector-tag%22%3Epage%3C/span%3E%20%7B%0A%20%20--button-%3Cspan%20class%3D%22hljs-attribute%22%3Eborder-radius%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E10px%3C/span%3E%3B%0A%20%20--button-default-%3Cspan%20class%3D%22hljs-attribute%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E%23f2f3f5%3C/span%3E%3B%0A%20%20--toast-%3Cspan%20class%3D%22hljs-attribute%22%3Emax-width%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E100px%3C/span%3E%3B%0A%20%20--toast-%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20pink%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},5273:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EActionSheet%20%u52A8%u4F5C%u9762%u677F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-action-sheet%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/action-sheet/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u9700%u8981%u4F20%u5165%u4E00%u4E2A%3Ccode%3Eactions%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-action-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20actions%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aselect%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSelect%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u9009%u9879%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u9009%u9879%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u9009%u9879%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esubname%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EopenType%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bshare%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonSelect%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28event.detail%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-xiang-zhuang-tai%22%3E%u9009%u9879%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u9009%u9879%u53EF%u4EE5%u8BBE%u7F6E%u4E3A%u52A0%u8F7D%u72B6%u6001%u6216%u7981%u7528%u72B6%u6001%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-action-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20actions%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecancel-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u53D6%u6D88%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u7740%u8272%u9009%u9879%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23ee0a24%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u7981%u7528%u9009%u9879%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-qu-xiao-an-niu%22%3E%u5C55%u793A%u53D6%u6D88%u6309%u94AE%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Ecancel-text%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-action-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20actions%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecancel-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u53D6%u6D88%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-miao-shu-xin-xi%22%3E%u5C55%u793A%u63CF%u8FF0%u4FE1%u606F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Edescription%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u9009%u9879%u4E0A%u65B9%u663E%u793A%u63CF%u8FF0%u4FE1%u606F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-action-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20actions%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8FD9%u662F%u4E00%u6BB5%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-biao-ti-lan%22%3E%u5C55%u793A%u6807%u9898%u680F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Etitle%3C/code%3E%u5C5E%u6027%u5C55%u793A%u6807%u9898%u680F%uFF0C%u540C%u65F6%u53EF%u4EE5%u4F7F%u7528%u63D2%u69FD%u81EA%u5B9A%u4E49%u83DC%u5355%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-action-sheet%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-action-sheet%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wei-xin-kai-fang-neng-li%22%3E%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%3C/h3%3E%0A%3Cp%3E%u9700%u8981%u4F20%u5165%u4E00%u4E2A%3Ccode%3Eactions%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-action-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20actions%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Agetuserinfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonGetUserInfo%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactions%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u83B7%u53D6%u7528%u6237%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%2307c160%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3EopenType%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3BgetUserInfo%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonGetUserInfo%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Ee%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28e.detail%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eactions%3C/td%3E%0A%3Ctd%3E%u83DC%u5355%u9009%u9879%3C/td%3E%0A%3Ctd%3E%3Cem%3EArray%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edescription%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u4E0A%u65B9%u7684%u63CF%u8FF0%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E100%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-text%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eround%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5706%u89D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-action%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u70B9%u51FB%u9009%u9879%u540E%u5173%u95ED%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-overlay%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u906E%u7F69%u662F%u5426%u5173%u95ED%u83DC%u5355%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-bottom%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%20iPhoneX%20%u7559%u51FA%u5E95%u90E8%u5B89%u5168%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aselect%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u9009%u9879%u65F6%u89E6%u53D1%uFF0C%u7981%u7528%u6216%u52A0%u8F7D%u72B6%u6001%u4E0B%u4E0D%u4F1A%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u9009%u9879%u5BF9%u5E94%u7684%u5BF9%u8C61%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Acancel%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u70B9%u51FB%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-overlay%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u906E%u7F69%u5C42%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Agetuserinfo%3C/td%3E%0A%3Ctd%3E%u7528%u6237%u70B9%u51FB%u8BE5%u6309%u94AE%u65F6%uFF0C%u4F1A%u8FD4%u56DE%u83B7%u53D6%u5230%u7684%u7528%u6237%u4FE1%u606F%uFF0C%u56DE%u8C03%u7684%20detail%20%u6570%u636E%u4E0E%20wx.getUserInfo%20%u8FD4%u56DE%u7684%u4E00%u81F4%uFF0C%3Ca%20href%3D%22%23/action-sheet%23actions%22%3EopenType%3C/a%3E%3D%26quot%3BgetUserInfo%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Acontact%3C/td%3E%0A%3Ctd%3E%u5BA2%u670D%u6D88%u606F%u56DE%u8C03%uFF0C%3Ca%20href%3D%22%23/action-sheet%23actions%22%3EopenType%3C/a%3E%3D%26quot%3Bcontact%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Agetphonenumber%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u7528%u6237%u624B%u673A%u53F7%u56DE%u8C03%uFF0C%3Ca%20href%3D%22%23/action-sheet%23actions%22%3EopenType%3C/a%3E%3D%26quot%3BgetPhoneNumber%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aerror%3C/td%3E%0A%3Ctd%3E%u5F53%u4F7F%u7528%u5F00%u653E%u80FD%u529B%u65F6%uFF0C%u53D1%u751F%u9519%u8BEF%u7684%u56DE%u8C03%uFF0C%3Ca%20href%3D%22%23/action-sheet%23actions%22%3EopenType%3C/a%3E%3D%26quot%3BlaunchApp%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Alaunchapp%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%20APP%20%u6210%u529F%u7684%u56DE%u8C03%uFF0C%3Ca%20href%3D%22%23/action-sheet%23actions%22%3EopenType%3C/a%3E%3D%26quot%3BlaunchApp%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aopensetting%3C/td%3E%0A%3Ctd%3E%u5728%u6253%u5F00%u6388%u6743%u8BBE%u7F6E%u9875%u540E%u56DE%u8C03%uFF0C%3Ca%20href%3D%22%23/action-sheet%23actions%22%3EopenType%3C/a%3E%3D%26quot%3BopenSetting%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22actions%22%3Eactions%3C/h3%3E%0A%3Cp%3E%3Ccode%3EAPI%3C/code%3E%u4E2D%u7684%3Ccode%3Eactions%3C/code%3E%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%u4E0B%3Ccode%3Ekey%3C/code%3E%uFF1A%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u952E%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esubname%3C/td%3E%0A%3Ctd%3E%u4E8C%u7EA7%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u6587%u5B57%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u7981%u7528%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EclassName%3C/td%3E%0A%3Ctd%3E%u4E3A%u5BF9%u5E94%u5217%u6DFB%u52A0%u989D%u5916%u7684%20class%20%u7C7B%u540D%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EopenType%3C/td%3E%0A%3Ctd%3E%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%uFF0C%u5177%u4F53%u652F%u6301%u53EF%u53C2%u8003%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/button.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5B98%u65B9%u6587%u6863%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elang%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%u8FD4%u56DE%u7528%u6237%u4FE1%u606F%u7684%u8BED%u8A00%uFF0Czh_CN%20%u7B80%u4F53%u4E2D%u6587%uFF0Czh_TW%20%u7E41%u4F53%u4E2D%u6587%uFF0Cen%20%u82F1%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Een%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsessionFrom%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u6765%u6E90%uFF0CopenType%3D%26quot%3Bcontact%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsendMessageTitle%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u6807%u9898%uFF0CopenType%3D%26quot%3Bcontact%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsendMessagePath%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u70B9%u51FB%u8DF3%u8F6C%u5C0F%u7A0B%u5E8F%u8DEF%u5F84%uFF0CopenType%3D%26quot%3Bcontact%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u4EAB%u8DEF%u5F84%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsendMessageImg%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u56FE%u7247%uFF0CopenType%3D%26quot%3Bcontact%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u622A%u56FE%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EshowMessageCard%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%uFF0C%u8BBE%u7F6E%u6B64%u53C2%u6570%u4E3A%20true%uFF0C%u7528%u6237%u8FDB%u5165%u5BA2%u670D%u4F1A%u8BDD%u4F1A%u5728%u53F3%u4E0B%u89D2%u663E%u793A%26quot%3B%u53EF%u80FD%u8981%u53D1%u9001%u7684%u5C0F%u7A0B%u5E8F%26quot%3B%u63D0%u793A%uFF0C%u7528%u6237%u70B9%u51FB%u540E%u53EF%u4EE5%u5FEB%u901F%u53D1%u9001%u5C0F%u7A0B%u5E8F%u6D88%u606F%uFF0CopenType%3D%26quot%3Bcontact%26quot%3B%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EappParameter%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%20APP%20%u65F6%uFF0C%u5411%20APP%20%u4F20%u9012%u7684%u53C2%u6570%uFF0CopenType%3DlaunchApp%20%u65F6%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2352:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EArea%20%u7701%u5E02%u533A%u9009%u62E9%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7701%u5E02%u533A%u9009%u62E9%u7EC4%u4EF6%u901A%u5E38%u4E0E%20%3Ca%20href%3D%22%23/popup%22%20target%3D%22_blank%22%3E%u5F39%u51FA%u5C42%3C/a%3E%20%u7EC4%u4EF6%u914D%u5408%u4F7F%u7528%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-area%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/area/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u521D%u59CB%u5316%u7701%u5E02%u533A%u7EC4%u4EF6%u65F6%uFF0C%u9700%u8981%u901A%u8FC7%20%3Ccode%3Earea-list%3C/code%3E%20%u5C5E%u6027%u4F20%u5165%u7701%u5E02%u533A%u6570%u636E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-area%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Earea-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20areaList%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22arealist-ge-shi%22%3EareaList%20%u683C%u5F0F%3C/h3%3E%0A%3Cp%3EareaList%20%u4E3A%u5BF9%u8C61%u7ED3%u6784%uFF0C%u5305%u542B%20%3Ccode%3Eprovince_list%3C/code%3E%u3001%3Ccode%3Ecity_list%3C/code%3E%u3001%3Ccode%3Ecounty_list%3C/code%3E%20%u4E09%u4E2A%20key%u3002%3C/p%3E%0A%3Cp%3E%u6BCF%u9879%u4EE5%u5730%u533A%u7801%u4F5C%u4E3A%20key%uFF0C%u7701%u5E02%u533A%u540D%u5B57%u4F5C%u4E3A%20value%u3002%u5730%u533A%u7801%u4E3A%206%20%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%200%20%u8865%u8DB3%206%20%u4F4D%u3002%u6BD4%u5982%u5317%u4EAC%u7684%u5730%u533A%u7801%u4E3A%20%3Ccode%3E11%3C/code%3E%uFF0C%u4EE5%200%20%u8865%u8DB3%206%20%u4F4D%uFF0C%u4E3A%20%3Ccode%3E110000%3C/code%3E%u3002%3C/p%3E%0A%3Cp%3E%u793A%u4F8B%u6570%u636E%u5982%u4E0B%uFF1A%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20areaList%20%3D%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprovince_list%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-number%22%3E110000%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5317%u4EAC%u5E02%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-number%22%3E120000%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5929%u6D25%u5E02%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecity_list%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-number%22%3E110100%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5317%u4EAC%u5E02%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-number%22%3E120100%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5929%u6D25%u5E02%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecounty_list%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-number%22%3E110101%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E1C%u57CE%u533A%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-number%22%3E110102%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u897F%u57CE%u533A%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20....%3C/span%3E%0A%20%20%7D%2C%0A%7D%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22vant-area-data%22%3E@vant/area-data%3C/h3%3E%0A%3Cp%3EVant%20%u5B98%u65B9%u63D0%u4F9B%u4E86%u4E00%u4EFD%u9ED8%u8BA4%u7684%u7701%u5E02%u533A%u6570%u636E%uFF0C%u53EF%u4EE5%u901A%u8FC7%20%3Ca%20href%3D%22https%3A//github.com/youzan/vant/tree/dev/packages/vant-area-data%22%20target%3D%22_blank%22%3E@vant/area-data%3C/a%3E%20%u5F15%u5165%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-bash%22%3Eyarn%20add%20@vant/area-data%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-ts%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20%7B%20areaList%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B@vant/area-data%26%23x27%3B%3C/span%3E%3B%0A%0APage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20areaList%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-zhong-sheng-shi-qu%22%3E%u9009%u4E2D%u7701%u5E02%u533A%3C/h3%3E%0A%3Cp%3E%u5982%u679C%u60F3%u9009%u4E2D%u67D0%u4E2A%u7701%u5E02%u533A%uFF0C%u9700%u8981%u4F20%u5165%u4E00%u4E2A%3Ccode%3Evalue%3C/code%3E%u5C5E%u6027%uFF0C%u7ED1%u5B9A%u5BF9%u5E94%u7684%u7701%u5E02%u533A%3Ccode%3Ecode%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-area%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Earea-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20areaList%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B110101%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22pei-zhi-xian-shi-lie%22%3E%u914D%u7F6E%u663E%u793A%u5217%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Ecolumns-num%3C/code%3E%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%u4E3A%3Ccode%3E2%3C/code%3E%uFF0C%u5219%u53EA%u4F1A%u663E%u793A%u7701%u5E02%u9009%u62E9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-area%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Earea-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20areaList%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns-num%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%202%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22pei-zhi-lie-zhan-wei-ti-shi-wen-zi%22%3E%u914D%u7F6E%u5217%u5360%u4F4D%u63D0%u793A%u6587%u5B57%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Ecolumns-placeholder%3C/code%3E%u5C5E%u6027%u914D%u7F6E%u6BCF%u4E00%u5217%u7684%u5360%u4F4D%u63D0%u793A%u6587%u5B57%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-area%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Earea-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20areaList%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns-placeholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20%5B%26%23x27%3B%u8BF7%u9009%u62E9%26%23x27%3B%2C%20%26%23x27%3B%u8BF7%u9009%u62E9%26%23x27%3B%2C%20%26%23x27%3B%u8BF7%u9009%u62E9%26%23x27%3B%5D%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22yun-kai-fa-shi-li%22%3E%u4E91%u5F00%u53D1%u793A%u4F8B%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-yong-yun-kai-fa-huo-qu-sheng-shi-qu-shu-ju%22%3E%u4F7F%u7528%u4E91%u5F00%u53D1%u83B7%u53D6%u7701%u5E02%u533A%u6570%u636E%3C/h3%3E%0A%3Cp%3E%u5B9E%u9645%u9879%u76EE%u4E2D%uFF0C%u53EF%u4EE5%u901A%u8FC7%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html%22%20target%3D%22_blank%22%3E%u5C0F%u7A0B%u5E8F%u4E91%u5F00%u53D1%3C/a%3E%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%3C/p%3E%0A%3Cp%3E%u5728%u5C0F%u7A0B%u5E8F%u4E2D%u4F7F%u7528%u4E91%u80FD%u529B%u4E4B%u524D%u9700%u8981%u5148%u8C03%u7528%3Ccode%3Ewx.could.init%3C/code%3E%u65B9%u6CD5%u5B8C%u6210%u4E91%u80FD%u529B%u7684%u521D%u59CB%u5316%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20db%20%3D%20wx.cloud.database%28%29%3B%0A%0Adb.collection%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bregion%26%23x27%3B%3C/span%3E%29%0A%20%20.limit%28%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%29%0A%20%20.get%28%29%0A%20%20.then%28%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eres%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28res.data%20%26amp%3B%26amp%3B%20res.data.length%20%26gt%3B%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EareaList%3C/span%3E%3A%20res.data%5B%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%5D%2C%0A%20%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%7D%0A%20%20%7D%29%0A%20%20.catch%28%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eerr%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28err%29%3B%0A%20%20%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u7684%u7701%u5E02%u533A%3Ccode%3Ecode%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u680F%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Earea-list%3C/td%3E%0A%3Ctd%3E%u7701%u5E02%u533A%u6570%u636E%uFF0C%u683C%u5F0F%u89C1%u4E0B%u65B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolumns-num%3C/td%3E%0A%3Ctd%3E%u7701%u5E02%u533A%u663E%u793A%u5217%u6570%uFF0C3-%u7701%u5E02%u533A%uFF0C2-%u7701%u5E02%uFF0C1-%u7701%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E3%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolumns-placeholder%3C/td%3E%0A%3Ctd%3E%u5217%u5360%u4F4D%u63D0%u793A%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eitem-height%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u9AD8%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E44%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evisible-item-count%3C/td%3E%0A%3Ctd%3E%u53EF%u89C1%u7684%u9009%u9879%u4E2A%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E6%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-button-text%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u786E%u8BA4%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-button-text%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u53D6%u6D88%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aconfirm%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u53F3%u4E0A%u65B9%u5B8C%u6210%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%u4E00%u4E2A%u6570%u7EC4%u53C2%u6570%uFF0C%u5177%u4F53%u683C%u5F0F%u770B%u4E0B%u65B9%u6570%u636E%u683C%u5F0F%u7AE0%u8282%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Acancel%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u53D6%u6D88%u6309%u94AE%u65F6%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u6539%u53D8%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3EPicker%20%u5B9E%u4F8B%uFF0C%u6240%u6709%u5217%u9009%u4E2D%u503C%uFF0C%u5F53%u524D%u5217%u5BF9%u5E94%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%20%u53EF%u4EE5%u83B7%u53D6%u5230%20Area%20%u5B9E%u4F8B%u5E76%u8C03%u7528%u5B9E%u4F8B%u65B9%u6CD5%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ereset%3C/td%3E%0A%3Ctd%3Ecode%3A%20string%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u6839%u636E%20code%20%u91CD%u7F6E%u6240%u6709%u9009%u9879%uFF0C%u82E5%u4E0D%u4F20%20code%uFF0C%u5219%u91CD%u7F6E%u5230%u7B2C%u4E00%u9879%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dian-ji-wan-cheng-shi-fan-hui-de-shu-ju-ge-shi%22%3E%u70B9%u51FB%u5B8C%u6210%u65F6%u8FD4%u56DE%u7684%u6570%u636E%u683C%u5F0F%3C/h3%3E%0A%3Cp%3E%u8FD4%u56DE%u7684%u6570%u636E%u6574%u4F53%u4E3A%u4E00%u4E2A%20Object%uFF0C%u5305%u542B%20%3Ccode%3Evalues%3C/code%3E%2C%20%3Ccode%3Eindexs%3C/code%3E%20%u4E24%u4E2A%20key%u3002%3C/p%3E%0A%3Cp%3E%3Ccode%3Evalues%3C/code%3E%20%u6574%u4F53%u4E3A%u4E00%u4E2A%u6570%u7EC4%uFF0C%u6570%u7EC4%u5185%u5305%u542B%20%3Ccode%3EcolumnsNum%3C/code%3E%20%u4E2A%u6570%u636E%uFF0C%20%u6BCF%u4E2A%u6570%u636E%u5BF9%u5E94%u4E00%u5217%u9009%u9879%u4E2D%u88AB%u9009%u4E2D%u7684%u6570%u636E%u3002%3C/p%3E%0A%3Cp%3E%3Ccode%3Ecode%3C/code%3E%20%u4EE3%u8868%u88AB%u9009%u4E2D%u7684%u5730%u533A%u7F16%u7801%uFF0C%20%3Ccode%3Ename%3C/code%3E%20%u4EE3%u8868%u88AB%u9009%u4E2D%u7684%u5730%u533A%u540D%u79F0%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%5B%0A%20%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecode%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B110000%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5317%u4EAC%u5E02%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecode%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B110100%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5317%u4EAC%u5E02%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecode%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B110101%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E1C%u57CE%u533A%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%5D%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cp%3E%3Ccode%3Eindexs%3C/code%3E%20%u4E3A%u4E00%u4E2A%u6570%u7EC4%uFF0C%u6570%u7EC4%u5185%u5305%u542B%20%3Ccode%3EcolumnsNum%3C/code%3E%20%u4E2A%u6570%u636E%uFF0C%20%u6BCF%u4E2A%u6570%u636E%u5BF9%u5E94%u4E00%u5217%u9009%u9879%u4E2D%u88AB%u9009%u4E2D%u9879%u7684%u5E8F%u53F7%u3002%3C/p%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},3063:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EButton%20%u6309%u94AE%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u6309%u94AE%u7528%u4E8E%u89E6%u53D1%u4E00%u4E2A%u64CD%u4F5C%uFF0C%u5982%u63D0%u4EA4%u8868%u5355%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-button%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/button/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22an-niu-lei-xing%22%3E%u6309%u94AE%u7C7B%u578B%3C/h3%3E%0A%3Cp%3E%u652F%u6301%3Ccode%3Edefault%3C/code%3E%u3001%3Ccode%3Eprimary%3C/code%3E%u3001%3Ccode%3Einfo%3C/code%3E%u3001%3Ccode%3Ewarning%3C/code%3E%u3001%3Ccode%3Edanger%3C/code%3E%u4E94%u79CD%u7C7B%u578B%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3Edefault%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdefault%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u9ED8%u8BA4%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u4E3B%u8981%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u4FE1%u606F%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u8B66%u544A%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5371%u9669%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22po-su-an-niu%22%3E%u6734%u7D20%u6309%u94AE%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eplain%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6734%u7D20%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6734%u7D20%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xi-bian-kuang%22%3E%u7EC6%u8FB9%u6846%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Ehairline%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u5F00%u542F%200.5px%20%u8FB9%u6846%uFF0C%u57FA%u4E8E%u4F2A%u7C7B%u5B9E%u73B0%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ehairline%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u7EC6%u8FB9%u6846%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ehairline%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u7EC6%u8FB9%u6846%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-zhuang-tai%22%3E%u7981%u7528%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Edisabled%3C/code%3E%u5C5E%u6027%u6765%u7981%u7528%u6309%u94AE%uFF0C%u6B64%u65F6%u6309%u94AE%u7684%3Ccode%3Ebind%3Aclick%3C/code%3E%u4E8B%u4EF6%u4E0D%u4F1A%u89E6%u53D1%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u7981%u7528%u72B6%u6001%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u7981%u7528%u72B6%u6001%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-zhuang-tai%22%3E%u52A0%u8F7D%u72B6%u6001%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading-type%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bspinner%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u52A0%u8F7D%u4E2D...%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22an-niu-xing-zhuang%22%3E%u6309%u94AE%u5F62%u72B6%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esquare%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u65B9%u5F62%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5706%u5F62%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-biao-an-niu%22%3E%u56FE%u6807%u6309%u94AE%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eicon%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u6309%u94AE%u56FE%u6807%uFF0C%u652F%u6301%20Icon%20%u7EC4%u4EF6%u91CC%u7684%u6240%u6709%u56FE%u6807%uFF0C%u4E5F%u53EF%u4EE5%u4F20%u5165%u56FE%u6807%20URL%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bstar-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bstar-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/logo.png%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u6309%u94AE%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22an-niu-chi-cun%22%3E%u6309%u94AE%u5C3A%u5BF8%3C/h3%3E%0A%3Cp%3E%u652F%u6301%3Ccode%3Elarge%3C/code%3E%u3001%3Ccode%3Enormal%3C/code%3E%u3001%3Ccode%3Esmall%3C/code%3E%u3001%3Ccode%3Emini%3C/code%3E%u56DB%u79CD%u5C3A%u5BF8%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3Enormal%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blarge%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5927%u53F7%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bnormal%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u666E%u901A%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsmall%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5C0F%u578B%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmini%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u8FF7%u4F60%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22kuai-ji-yuan-su%22%3E%u5757%u7EA7%u5143%u7D20%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eblock%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u5C06%u6309%u94AE%u7684%u5143%u7D20%u7C7B%u578B%u8BBE%u7F6E%u4E3A%u5757%u7EA7%u5143%u7D20%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eblock%3C/span%3E%26gt%3B%3C/span%3E%u5757%u7EA7%u5143%u7D20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Ecolor%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%u6309%u94AE%u7684%u989C%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u8272%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%26gt%3B%3C/span%3E%u5355%u8272%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blinear-gradient%28to%20right%2C%20%234bb0ff%2C%20%236149f6%29%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u6E10%u53D8%u8272%u6309%u94AE%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eid%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eprimary%3C/code%3E%20%3Ccode%3Einfo%3C/code%3E%20%3Ccode%3Ewarning%3C/code%3E%20%3Ccode%3Edanger%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edefault%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u5C3A%u5BF8%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Enormal%3C/code%3E%20%3Ccode%3Elarge%3C/code%3E%20%3Ccode%3Esmall%3C/code%3E%20%3Ccode%3Emini%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Enormal%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u989C%u8272%uFF0C%u652F%u6301%u4F20%u5165%3Ccode%3Elinear-gradient%3C/code%3E%u6E10%u53D8%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclass-prefix%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u7C7B%u540D%u524D%u7F00%uFF0C%u540C%20Icon%20%u7EC4%u4EF6%u7684%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3Eclass-prefix%20%u5C5E%u6027%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evan-icon%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplain%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u6734%u7D20%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eblock%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u5757%u7EA7%u5143%u7D20%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eround%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u5706%u5F62%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esquare%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u65B9%u5F62%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ehairline%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%200.5px%20%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u4E3A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading-text%3C/td%3E%0A%3Ctd%3E%u52A0%u8F7D%u72B6%u6001%u63D0%u793A%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading-type%3C/td%3E%0A%3Ctd%3E%u52A0%u8F7D%u72B6%u6001%u56FE%u6807%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Espinner%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ecircular%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading-size%3C/td%3E%0A%3Ctd%3E%u52A0%u8F7D%u56FE%u6807%u5927%u5C0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E20px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen-type%3C/td%3E%0A%3Ctd%3E%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%uFF0C%u5177%u4F53%u652F%u6301%u53EF%u53C2%u8003%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/button.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5B98%u65B9%u6587%u6863%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eapp-parameter%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%20APP%20%u65F6%uFF0C%u5411%20APP%20%u4F20%u9012%u7684%u53C2%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elang%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%u8FD4%u56DE%u7528%u6237%u4FE1%u606F%u7684%u8BED%u8A00%uFF0Czh_CN%20%u7B80%u4F53%u4E2D%u6587%uFF0C%3Cbr%3Ezh_TW%20%u7E41%u4F53%u4E2D%u6587%uFF0Cen%20%u82F1%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Een%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esession-from%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u6765%u6E90%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebusiness-id%3C/td%3E%0A%3Ctd%3E%u5BA2%u670D%u6D88%u606F%u5B50%u5546%u6237%20id%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-title%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-path%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u70B9%u51FB%u8DF3%u8F6C%u5C0F%u7A0B%u5E8F%u8DEF%u5F84%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u4EAB%u8DEF%u5F84%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-img%3C/td%3E%0A%3Ctd%3EsendMessageImg%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u622A%u56FE%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-message-card%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edataset%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%20dataset%uFF0Copen-type%20%u4E3A%20%3Ccode%3Eshare%3C/code%3E%20%u65F6%uFF0C%u53EF%u5728%20onShareAppMessage%20%u4E8B%u4EF6%u7684%20%3Ccode%3Eevent.target.dataset.detail%3C/code%3E%20%u4E2D%u770B%u5230%u4F20%u5165%u7684%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Eany%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eform-type%3C/td%3E%0A%3Ctd%3E%u7528%u4E8E%20form%20%u7EC4%u4EF6%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Esubmit%3C/code%3E%20%3Ccode%3Ereset%3C/code%3E%uFF0C%u70B9%u51FB%u5206%u522B%u4F1A%u89E6%u53D1%20form%20%u7EC4%u4EF6%u7684%20submit/reset%20%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u6309%u94AE%uFF0C%u4E14%u6309%u94AE%u72B6%u6001%u4E0D%u4E3A%u52A0%u8F7D%u6216%u7981%u7528%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Agetuserinfo%3C/td%3E%0A%3Ctd%3E%u7528%u6237%u70B9%u51FB%u8BE5%u6309%u94AE%u65F6%uFF0C%u4F1A%u8FD4%u56DE%u83B7%u53D6%u5230%u7684%u7528%u6237%u4FE1%u606F%uFF0C%3Cbr%3E%u4ECE%u8FD4%u56DE%u53C2%u6570%u7684%20detail%20%u4E2D%u83B7%u53D6%u5230%u7684%u503C%u540C%20wx.getUserInfo%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Acontact%3C/td%3E%0A%3Ctd%3E%u5BA2%u670D%u6D88%u606F%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Agetphonenumber%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u7528%u6237%u624B%u673A%u53F7%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aerror%3C/td%3E%0A%3Ctd%3E%u5F53%u4F7F%u7528%u5F00%u653E%u80FD%u529B%u65F6%uFF0C%u53D1%u751F%u9519%u8BEF%u7684%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aopensetting%3C/td%3E%0A%3Ctd%3E%u5728%u6253%u5F00%u6388%u6743%u8BBE%u7F6E%u9875%u540E%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3Cblockquote%3E%0A%3Cp%3EButton%20%u63D0%u4F9B%u7684%u662F%20click%20%u4E8B%u4EF6%u800C%u4E0D%u662F%u539F%u751F%20tap%20%u4E8B%u4EF6%uFF0C%u6309%u94AE%u7981%u7528%u65F6%uFF0Cclick%20%u4E8B%u4EF6%u4E0D%u4F1A%u89E6%u53D1%uFF0Ctap%20%u4E8B%u4EF6%u4F9D%u7136%u4F1A%u89E6%u53D1%u3002%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading-class%3C/td%3E%0A%3Ctd%3E%u52A0%u8F7D%u56FE%u6807%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},8703:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ECalendar%20%u65E5%u5386%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u65E5%u5386%u7EC4%u4EF6%u7528%u4E8E%u9009%u62E9%u65E5%u671F%u6216%u65E5%u671F%u533A%u95F4%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-calendar%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/calendar/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-ze-dan-ge-ri-qi%22%3E%u9009%u62E9%u5355%u4E2A%u65E5%u671F%3C/h3%3E%0A%3Cp%3E%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%u53D1%3Ccode%3Econfirm%3C/code%3E%u4E8B%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u9009%u62E9%u5355%u4E2A%u65E5%u671F%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20date%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonDisplay%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aconfirm%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonConfirm%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonDisplay%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EformatDate%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Edate%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20date%20%3D%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28date%29%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%60%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bdate.getMonth%28%29%20+%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%7D%3C/span%3E/%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bdate.getDate%28%29%7D%3C/span%3E%60%3C/span%3E%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonConfirm%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.formatDate%28event.detail%29%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-ze-duo-ge-ri-qi%22%3E%u9009%u62E9%u591A%u4E2A%u65E5%u671F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Etype%3C/code%3E%u4E3A%3Ccode%3Emultiple%3C/code%3E%u540E%u53EF%u4EE5%u9009%u62E9%u591A%u4E2A%u65E5%u671F%uFF0C%u6B64%u65F6%3Ccode%3Econfirm%3C/code%3E%u4E8B%u4EF6%u8FD4%u56DE%u7684%20date%20%u4E3A%u6570%u7EC4%u7ED3%u6784%uFF0C%u6570%u7EC4%u5305%u542B%u82E5%u5E72%u4E2A%u9009%u4E2D%u7684%u65E5%u671F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u9009%u62E9%u591A%u4E2A%u65E5%u671F%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20text%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonDisplay%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmultiple%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aconfirm%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonConfirm%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonDisplay%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonConfirm%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%u9009%u62E9%u4E86%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail.length%7D%3C/span%3E%20%u4E2A%u65E5%u671F%60%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-ze-ri-qi-qu-jian%22%3E%u9009%u62E9%u65E5%u671F%u533A%u95F4%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Etype%3C/code%3E%u4E3A%3Ccode%3Erange%3C/code%3E%u540E%u53EF%u4EE5%u9009%u62E9%u65E5%u671F%u533A%u95F4%uFF0C%u6B64%u65F6%3Ccode%3Econfirm%3C/code%3E%u4E8B%u4EF6%u8FD4%u56DE%u7684%20date%20%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u9009%u62E9%u65E5%u671F%u533A%u95F4%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20date%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonDisplay%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Brange%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aconfirm%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonConfirm%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonDisplay%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EformatDate%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Edate%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20date%20%3D%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28date%29%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%60%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bdate.getMonth%28%29%20+%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%7D%3C/span%3E/%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bdate.getDate%28%29%7D%3C/span%3E%60%3C/span%3E%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonConfirm%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%5Bstart%2C%20end%5D%20%3D%20event.detail%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%3Cspan%20class%3D%22hljs-subst%22%3E%24%7B%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.formatDate%28start%29%7D%3C/span%3E%20-%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7B%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.formatDate%28end%29%7D%3C/span%3E%60%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3ETips%3A%20%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%20allow-same-day%20%u5C5E%u6027%u6765%u5141%u8BB8%u9009%u62E9%u540C%u4E00%u5929%u3002%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22kuai-jie-xuan-ze%22%3E%u5FEB%u6377%u9009%u62E9%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Eshow-confirm%3C/code%3E%u8BBE%u7F6E%u4E3A%3Ccode%3Efalse%3C/code%3E%u53EF%u4EE5%u9690%u85CF%u786E%u8BA4%u6309%u94AE%uFF0C%u8FD9%u79CD%u60C5%u51B5%u4E0B%u9009%u62E9%u5B8C%u6210%u540E%u4F1A%u7ACB%u5373%u89E6%u53D1%3Ccode%3Econfirm%3C/code%3E%u4E8B%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow-confirm%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Ecolor%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2307c160%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-ri-qi-fan-wei%22%3E%u81EA%u5B9A%u4E49%u65E5%u671F%u8303%u56F4%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Emin-date%3C/code%3E%u548C%3Ccode%3Emax-date%3C/code%3E%u5B9A%u4E49%u65E5%u5386%u7684%u8303%u56F4%uFF0C%u9700%u8981%u6CE8%u610F%u7684%u662F%3Ccode%3Emin-date%3C/code%3E%u548C%3Ccode%3Emax-date%3C/code%3E%u7684%u533A%u95F4%u4E0D%u5B9C%u8FC7%u5927%uFF0C%u5426%u5219%u4F1A%u9020%u6210%u4E25%u91CD%u7684%u6027%u80FD%u95EE%u9898%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emin-date%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20minDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emax-date%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20maxDate%20%7D%7D%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EminDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%3Cspan%20class%3D%22hljs-number%22%3E2010%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%29.getTime%28%29%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmaxDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%3Cspan%20class%3D%22hljs-number%22%3E2010%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E31%3C/span%3E%29.getTime%28%29%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-an-niu-wen-zi%22%3E%u81EA%u5B9A%u4E49%u6309%u94AE%u6587%u5B57%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Econfirm-text%3C/code%3E%u8BBE%u7F6E%u6309%u94AE%u6587%u5B57%uFF0C%u901A%u8FC7%3Ccode%3Econfirm-disabled-text%3C/code%3E%u8BBE%u7F6E%u6309%u94AE%u7981%u7528%u65F6%u7684%u6587%u5B57%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Brange%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Econfirm-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5B8C%u6210%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Econfirm-disabled-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u9009%u62E9%u7ED3%u675F%u65F6%u95F4%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-ri-qi-wen-an%22%3E%u81EA%u5B9A%u4E49%u65E5%u671F%u6587%u6848%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u4F20%u5165%3Ccode%3Eformatter%3C/code%3E%u51FD%u6570%u6765%u5BF9%u65E5%u5386%u4E0A%u6BCF%u4E00%u683C%u7684%u5185%u5BB9%u8FDB%u884C%u683C%u5F0F%u5316%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Brange%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eformatter%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20formatter%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Eformatter%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eday%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20month%20%3D%20day.date.getMonth%28%29%20+%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%3B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20date%20%3D%20day.date.getDate%28%29%3B%0A%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28month%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-number%22%3E5%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28date%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20day.topInfo%20%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u52B3%u52A8%u8282%26%23x27%3B%3C/span%3E%3B%0A%20%20%20%20%20%20%20%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Eelse%3C/span%3E%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28date%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-number%22%3E4%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20day.topInfo%20%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E94%u56DB%u9752%u5E74%u8282%26%23x27%3B%3C/span%3E%3B%0A%20%20%20%20%20%20%20%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Eelse%3C/span%3E%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28date%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-number%22%3E11%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20day.text%20%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4ECA%u5929%26%23x27%3B%3C/span%3E%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28day.type%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bstart%26%23x27%3B%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20day.bottomInfo%20%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5165%u4F4F%26%23x27%3B%3C/span%3E%3B%0A%20%20%20%20%20%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Eelse%3C/span%3E%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28day.type%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bend%26%23x27%3B%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20day.bottomInfo%20%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u79BB%u5E97%26%23x27%3B%3C/span%3E%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20day%3B%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-dan-chu-wei-zhi%22%3E%u81EA%u5B9A%u4E49%u5F39%u51FA%u4F4D%u7F6E%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eposition%3C/code%3E%u5C5E%u6027%u81EA%u5B9A%u4E49%u5F39%u51FA%u5C42%u7684%u5F39%u51FA%u4F4D%u7F6E%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Etop%3C/code%3E%u3001%3Ccode%3Eleft%3C/code%3E%u3001%3Ccode%3Eright%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfalse%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eposition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ri-qi-qu-jian-zui-da-fan-wei%22%3E%u65E5%u671F%u533A%u95F4%u6700%u5927%u8303%u56F4%3C/h3%3E%0A%3Cp%3E%u9009%u62E9%u65E5%u671F%u533A%u95F4%u65F6%uFF0C%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Emax-range%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Brange%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emax-range%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%203%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-zhou-qi-shi-ri%22%3E%u81EA%u5B9A%u4E49%u5468%u8D77%u59CB%u65E5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Efirst-day-of-week%3C/code%3E%20%u5C5E%u6027%u8BBE%u7F6E%u4E00%u5468%u4ECE%u54EA%u5929%u5F00%u59CB%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Efirst-day-of-week%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ping-pu-zhan-shi%22%3E%u5E73%u94FA%u5C55%u793A%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Epoppable%3C/code%3E%u8BBE%u7F6E%u4E3A%3Ccode%3Efalse%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-calendar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u65E5%u5386%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Epoppable%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow-confirm%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcalendar%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.calendar%3C/span%3E%20%7B%0A%20%20--calendar-%3Cspan%20class%3D%22hljs-attribute%22%3Eheight%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E500px%3C/span%3E%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u9009%u62E9%u7C7B%u578B%3A%3Cbr%3E%3Ccode%3Esingle%3C/code%3E%u8868%u793A%u9009%u62E9%u5355%u4E2A%u65E5%u671F%uFF0C%3Cbr%3E%3Ccode%3Emultiple%3C/code%3E%u8868%u793A%u9009%u62E9%u591A%u4E2A%u65E5%u671F%uFF0C%3Cbr%3E%3Ccode%3Erange%3C/code%3E%u8868%u793A%u9009%u62E9%u65E5%u671F%u533A%u95F4%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Esingle%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u65E5%u5386%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u65E5%u671F%u9009%u62E9%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u4E3B%u9898%u8272%uFF0C%u5BF9%u5E95%u90E8%u6309%u94AE%u548C%u9009%u4E2D%u65E5%u671F%u751F%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23ee0a24%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emin-date%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u62E9%u7684%u6700%u5C0F%u65E5%u671F%3C/td%3E%0A%3Ctd%3E%3Cem%3Etimestamp%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u65E5%u671F%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-date%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u62E9%u7684%u6700%u5927%u65E5%u671F%3C/td%3E%0A%3Ctd%3E%3Cem%3Etimestamp%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u65E5%u671F%u7684%u516D%u4E2A%u6708%u540E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edefault-date%3C/td%3E%0A%3Ctd%3E%u9ED8%u8BA4%u9009%u4E2D%u7684%u65E5%u671F%uFF0C%3Ccode%3Etype%3C/code%3E%u4E3A%3Ccode%3Emultiple%3C/code%3E%u6216%3Ccode%3Erange%3C/code%3E%u65F6%u4E3A%u6570%u7EC4%3C/td%3E%0A%3Ctd%3E%3Cem%3Etimestamp%20%7C%20timestamp%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u4ECA%u5929%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Erow-height%3C/td%3E%0A%3Ctd%3E%u65E5%u671F%u884C%u9AD8%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20string%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E64%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eformatter%3C/td%3E%0A%3Ctd%3E%u65E5%u671F%u683C%u5F0F%u5316%u51FD%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3E%28day%3A%20Day%29%20%3D%26gt%3B%20Day%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epoppable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4EE5%u5F39%u5C42%u7684%u5F62%u5F0F%u5C55%u793A%u65E5%u5386%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-mark%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u6708%u4EFD%u80CC%u666F%u6C34%u5370%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-title%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u65E5%u5386%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-subtitle%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u65E5%u5386%u526F%u6807%u9898%uFF08%u5E74%u6708%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-confirm%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u786E%u8BA4%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-text%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u7684%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u786E%u5B9A%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-disabled-text%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u5904%u4E8E%u7981%u7528%u72B6%u6001%u65F6%u7684%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u786E%u5B9A%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efirst-day-of-week%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u5468%u8D77%u59CB%u65E5%3C/td%3E%0A%3Ctd%3E%3Cem%3E0%7E6%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22poppable-props%22%3EPoppable%20Props%3C/h3%3E%0A%3Cp%3E%u5F53%20Canlendar%20%u7684%20%3Ccode%3Epoppable%3C/code%3E%20%u4E3A%20%3Ccode%3Etrue%3C/code%3E%20%u65F6%uFF0C%u652F%u6301%u4EE5%u4E0B%20props%3A%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u65E5%u5386%u5F39%u7A97%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eposition%3C/td%3E%0A%3Ctd%3E%u5F39%u51FA%u4F4D%u7F6E%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Etop%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%20%3Ccode%3Eleft%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ebottom%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eround%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5706%u89D2%u5F39%u7A97%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-overlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u70B9%u51FB%u906E%u7F69%u5C42%u540E%u5173%u95ED%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-bottom%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u5E95%u90E8%u5B89%u5168%u533A%u9002%u914D%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22range-props%22%3ERange%20Props%3C/h3%3E%0A%3Cp%3E%u5F53%20Canlendar%20%u7684%20%3Ccode%3Etype%3C/code%3E%20%u4E3A%20%3Ccode%3Erange%3C/code%3E%20%u65F6%uFF0C%u652F%u6301%u4EE5%u4E0B%20props%3A%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-range%3C/td%3E%0A%3Ctd%3E%u65E5%u671F%u533A%u95F4%u6700%u591A%u53EF%u9009%u5929%u6570%uFF0C%u9ED8%u8BA4%u65E0%u9650%u5236%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20string%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Erange-prompt%3C/td%3E%0A%3Ctd%3E%u8303%u56F4%u9009%u62E9%u8D85%u8FC7%u6700%u591A%u53EF%u9009%u5929%u6570%u65F6%u7684%u63D0%u793A%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20null%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u9009%u62E9%u5929%u6570%u4E0D%u80FD%u8D85%u8FC7%20xx%20%u5929%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-range-prompt%3C/td%3E%0A%3Ctd%3E%u8303%u56F4%u9009%u62E9%u8D85%u8FC7%u6700%u591A%u53EF%u9009%u5929%u6570%u65F6%uFF0C%u662F%u5426%u5C55%u793A%u63D0%u793A%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eallow-same-day%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5141%u8BB8%u65E5%u671F%u8303%u56F4%u7684%u8D77%u6B62%u65F6%u95F4%u4E3A%u540C%u4E00%u5929%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22day-shu-ju-jie-gou%22%3EDay%20%u6570%u636E%u7ED3%u6784%3C/h3%3E%0A%3Cp%3E%u65E5%u5386%u4E2D%u7684%u6BCF%u4E2A%u65E5%u671F%u90FD%u5BF9%u5E94%u4E00%u4E2A%20Day%20%u5BF9%u8C61%uFF0C%u901A%u8FC7%3Ccode%3Eformatter%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%20Day%20%u5BF9%u8C61%u7684%u5185%u5BB9%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u952E%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Edate%3C/td%3E%0A%3Ctd%3E%u65E5%u671F%u5BF9%u5E94%u7684%20Date%20%u5BF9%u8C61%3C/td%3E%0A%3Ctd%3E%3Cem%3EDate%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u65E5%u671F%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Eselected%3C/code%3E%u3001%3Ccode%3Estart%3C/code%3E%u3001%3Ccode%3Emiddle%3C/code%3E%u3001%3Ccode%3Eend%3C/code%3E%u3001%3Ccode%3Edisabled%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u4E2D%u95F4%u663E%u793A%u7684%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EtopInfo%3C/td%3E%0A%3Ctd%3E%u4E0A%u65B9%u7684%u63D0%u793A%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EbottomInfo%3C/td%3E%0A%3Ctd%3E%u4E0B%u65B9%u7684%u63D0%u793A%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eselect%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u4EFB%u610F%u65E5%u671F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Cem%3Evalue%3A%20Date%20%7C%20Date%5B%5D%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eunselect%3C/td%3E%0A%3Ctd%3E%u5F53%20Canlendar%20%u7684%20%3Ccode%3Etype%3C/code%3E%20%u4E3A%20%3Ccode%3Emultiple%3C/code%3E%20%u65F6%2C%u70B9%u51FB%u5DF2%u9009%u4E2D%u7684%u65E5%u671F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Cem%3Evalue%3A%20Date%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm%3C/td%3E%0A%3Ctd%3E%u65E5%u671F%u9009%u62E9%u5B8C%u6210%u540E%u89E6%u53D1%uFF0C%u82E5%3Ccode%3Eshow-confirm%3C/code%3E%u4E3A%3Ccode%3Etrue%3C/code%3E%uFF0C%u5219%u70B9%u51FB%u786E%u8BA4%u6309%u94AE%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Cem%3Evalue%3A%20Date%20%7C%20Date%5B%5D%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u5F39%u51FA%u5C42%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u5F39%u51FA%u5C42%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopened%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u5F39%u51FA%u5C42%u4E14%u52A8%u753B%u7ED3%u675F%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclosed%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u5F39%u51FA%u5C42%u4E14%u52A8%u753B%u7ED3%u675F%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eover-range%3C/td%3E%0A%3Ctd%3E%u8303%u56F4%u9009%u62E9%u8D85%u8FC7%u6700%u591A%u53EF%u9009%u5929%u6570%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclick-subtitle%20%3Ccode%3Ev1.8.1%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u65E5%u5386%u526F%u6807%u9898%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Cem%3EWechatMiniprogram.TouchEvent%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efooter%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5E95%u90E8%u533A%u57DF%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%20%u53EF%u4EE5%u83B7%u53D6%u5230%20Calendar%20%u5B9E%u4F8B%u5E76%u8C03%u7528%u5B9E%u4F8B%u65B9%u6CD5%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ereset%3C/td%3E%0A%3Ctd%3E%u91CD%u7F6E%u9009%u4E2D%u7684%u65E5%u671F%u5230%u9ED8%u8BA4%u503C%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},441:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ECard%20%u5546%u54C1%u5361%u7247%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u5546%u54C1%u5361%u7247%uFF0C%u7528%u4E8E%u5C55%u793A%u5546%u54C1%u7684%u56FE%u7247%u3001%u4EF7%u683C%u7B49%u4FE1%u606F%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-card%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/card/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-card%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Enum%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprice%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2.00%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5546%u54C1%u6807%u9898%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ethumb%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20imageURL%20%7D%7D%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gao-ji-yong-fa%22%3E%u9AD8%u7EA7%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%u63D2%u69FD%u6DFB%u52A0%u5B9A%u5236%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-card%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Enum%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etag%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprice%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B10.00%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5546%u54C1%u6807%u9898%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ethumb%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20imageURL%20%7D%7D%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfooter%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmini%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmini%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-card%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ethumb%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u56FE%u7247%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ethumb-mode%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u56FE%u7247%u88C1%u526A%u3001%u7F29%u653E%u7684%u6A21%u5F0F%uFF0C%u53EF%u9009%u503C%u53C2%u8003%u5C0F%u7A0B%u5E8F%20image%20%u7EC4%u4EF6%20mode%20%u5C5E%u6027%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EaspectFit%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edesc%3C/td%3E%0A%3Ctd%3E%u63CF%u8FF0%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etag%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Enum%3C/td%3E%0A%3Ctd%3E%u5546%u54C1%u6570%u91CF%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eprice%3C/td%3E%0A%3Ctd%3E%u5546%u54C1%u4EF7%u683C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eorigin-price%3C/td%3E%0A%3Ctd%3E%u5546%u54C1%u5212%u7EBF%u539F%u4EF7%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecentered%3C/td%3E%0A%3Ctd%3E%u5185%u5BB9%u662F%u5426%u5782%u76F4%u5C45%u4E2D%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecurrency%3C/td%3E%0A%3Ctd%3E%u8D27%u5E01%u7B26%u53F7%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%A5%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ethumb-link%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5DE6%u4FA7%u56FE%u7247%u540E%u8DF3%u8F6C%u7684%u94FE%u63A5%u5730%u5740%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elink-type%3C/td%3E%0A%3Ctd%3E%u94FE%u63A5%u8DF3%u8F6C%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3EredirectTo%3C/code%3E%20%3Ccode%3EswitchTab%3C/code%3E%20%3Ccode%3EreLaunch%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EnavigateTo%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elazy-load%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u56FE%u7247%u61D2%u52A0%u8F7D%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6807%u9898%u680F%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Etitle%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edesc%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u63CF%u8FF0%u680F%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Edesc%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Enum%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6570%u91CF%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eprice%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u4EF7%u683C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eorigin-price%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5546%u54C1%u539F%u4EF7%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Eorigin-price%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eprice-top%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u4EF7%u683C%u4E0A%u65B9%u533A%u57DF%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebottom%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u4EF7%u683C%u4E0B%u65B9%u533A%u57DF%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ethumb%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u56FE%u7247%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Ethumb%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etag%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u56FE%u7247%u89D2%u6807%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Etag%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etags%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u63CF%u8FF0%u4E0B%u65B9%u6807%u7B7E%u533A%u57DF%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efooter%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4E0B%u89D2%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ethumb-class%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u56FE%u7247%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-class%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eprice-class%3C/td%3E%0A%3Ctd%3E%u4EF7%u683C%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eorigin-price-class%3C/td%3E%0A%3Ctd%3E%u5212%u7EBF%u539F%u4EF7%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edesc-class%3C/td%3E%0A%3Ctd%3E%u63CF%u8FF0%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Enum-class%3C/td%3E%0A%3Ctd%3E%u6570%u91CF%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},1987:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ECell%20%u5355%u5143%u683C%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u5355%u5143%u683C%u4E3A%u5217%u8868%u4E2D%u7684%u5355%u4E2A%u5C55%u793A%u9879%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-cell%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/cell/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-cell-group%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/cell-group/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%3Ccode%3ECell%3C/code%3E%u53EF%u4EE5%u5355%u72EC%u4F7F%u7528%uFF0C%u4E5F%u53EF%u4EE5%u4E0E%3Ccode%3ECellGroup%3C/code%3E%u642D%u914D%u4F7F%u7528%u3002%3Ccode%3ECellGroup%3C/code%3E%u53EF%u4EE5%u4E3A%3Ccode%3ECell%3C/code%3E%u63D0%u4F9B%u4E0A%u4E0B%u5916%u8FB9%u6846%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22qia-pian-feng-ge%22%3E%u5361%u7247%u98CE%u683C%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3ECellGroup%3C/code%3E%20%u7684%20%3Ccode%3Einset%3C/code%3E%20%u5C5E%u6027%uFF0C%u53EF%u4EE5%u5C06%u5355%u5143%u683C%u8F6C%u6362%u4E3A%u5706%u89D2%u5361%u7247%u98CE%u683C%uFF08%u4ECE%201.7.2%20%u7248%u672C%u5F00%u59CB%u652F%u6301%uFF09%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einset%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dan-yuan-ge-da-xiao%22%3E%u5355%u5143%u683C%u5927%u5C0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Esize%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u63A7%u5236%u5355%u5143%u683C%u7684%u5927%u5C0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blarge%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blarge%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-tu-biao%22%3E%u5C55%u793A%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eicon%3C/code%3E%u5C5E%u6027%u5728%u6807%u9898%u5DE6%u4FA7%u5C55%u793A%u56FE%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blocation-o%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-jian-tou%22%3E%u5C55%u793A%u7BAD%u5934%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Eis-link%3C/code%3E%u5C5E%u6027%u540E%u4F1A%u5728%u5355%u5143%u683C%u53F3%u4FA7%u663E%u793A%u7BAD%u5934%uFF0C%u5E76%u4E14%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Earrow-direction%3C/code%3E%u5C5E%u6027%u63A7%u5236%u7BAD%u5934%u65B9%u5411%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eis-link%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eis-link%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eis-link%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Earrow-direction%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdown%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ye-mian-tiao-zhuan%22%3E%u9875%u9762%u8DF3%u8F6C%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Eurl%3C/code%3E%u5C5E%u6027%u8FDB%u884C%u9875%u9762%u8DF3%u8F6C%uFF0C%u901A%u8FC7%3Ccode%3Elink-type%3C/code%3E%u5C5E%u6027%u63A7%u5236%u8DF3%u8F6C%u7C7B%u578B%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eis-link%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elink-type%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BnavigateTo%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B/pages/dashboard/index%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fen-zu-biao-ti%22%3E%u5206%u7EC4%u6807%u9898%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3ECellGroup%3C/code%3E%u7684%3Ccode%3Etitle%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u6307%u5B9A%u5206%u7EC4%u6807%u9898%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5206%u7EC41%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5206%u7EC42%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-yong-cha-cao%22%3E%u4F7F%u7528%u63D2%u69FD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bshop-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eis-link%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btitle%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-cell-text%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u5143%u683C%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright-icon%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcustom-icon%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22chui-zhi-ju-zhong%22%3E%u5782%u76F4%u5C45%u4E2D%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Ecenter%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u8BA9%3Ccode%3ECell%3C/code%3E%u7684%u5DE6%u53F3%u5185%u5BB9%u90FD%u5782%u76F4%u5C45%u4E2D%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecenter%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cellgroup-props%22%3ECellGroup%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u5206%u7EC4%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E-%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einset%20%3Ccode%3Ev1.7.2%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u4E3A%u5706%u89D2%u5361%u7247%u98CE%u683C%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5916%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cellgroup-wai-bu-yang-shi-lei%22%3ECellGroup%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cell-props%22%3ECell%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-width%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u5BBD%u5EA6%uFF0C%u987B%u5305%u542B%u5355%u4F4D%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u4E0B%u65B9%u7684%u63CF%u8FF0%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u5355%u5143%u683C%u5927%u5C0F%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Elarge%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u4E0B%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecenter%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u5185%u5BB9%u5782%u76F4%u5C45%u4E2D%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eurl%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u540E%u8DF3%u8F6C%u7684%u94FE%u63A5%u5730%u5740%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elink-type%3C/td%3E%0A%3Ctd%3E%u94FE%u63A5%u8DF3%u8F6C%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3EredirectTo%3C/code%3E%20%3Ccode%3EswitchTab%3C/code%3E%20%3Ccode%3EreLaunch%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EnavigateTo%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclickable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u70B9%u51FB%u53CD%u9988%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eis-link%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u53F3%u4FA7%u7BAD%u5934%u5E76%u5F00%u542F%u70B9%u51FB%u53CD%u9988%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Erequired%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u8868%u5355%u5FC5%u586B%u661F%u53F7%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Earrow-direction%3C/td%3E%0A%3Ctd%3E%u7BAD%u5934%u65B9%u5411%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eleft%3C/code%3E%20%3Ccode%3Eup%3C/code%3E%20%3Ccode%3Edown%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-label-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%20label%20slot%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-style%20%3Ccode%3Ev1.4.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cell-event%22%3ECell%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5355%u5143%u683C%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cell-slot%22%3ECell%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%3Ccode%3Evalue%3C/code%3E%u663E%u793A%u5185%u5BB9%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Evalue%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%3Ccode%3Etitle%3C/code%3E%u663E%u793A%u5185%u5BB9%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Etitle%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%3Ccode%3Elabel%3C/code%3E%u663E%u793A%u5185%u5BB9%uFF0C%u9700%u8981%u8BBE%u7F6E%20%3Ccode%3Euse-label-slot%3C/code%3E%u5C5E%u6027%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%3Ccode%3Eicon%3C/code%3E%u663E%u793A%u5185%u5BB9%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Eicon%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4FA7%u6309%u94AE%uFF0C%u9ED8%u8BA4%u662F%3Ccode%3Earrow%3C/code%3E%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Eis-link%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cell-wai-bu-yang-shi-lei%22%3ECell%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-class%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-class%3C/td%3E%0A%3Ctd%3E%u63CF%u8FF0%u4FE1%u606F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue-class%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u5185%u5BB9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},4189:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ECheckbox%20%u590D%u9009%u6846%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u5728%u4E00%u7EC4%u5907%u9009%u9879%u4E2D%u8FDB%u884C%u591A%u9009%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-checkbox%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/checkbox/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-checkbox-group%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/checkbox-group/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Evalue%3C/code%3E%u7ED1%u5B9A%u590D%u9009%u6846%u7684%u52FE%u9009%u72B6%u6001%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-zhuang-tai%22%3E%u7981%u7528%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Edisabled%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u7981%u7528%u590D%u9009%u6846%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u590D%u9009%u6846%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-xing-zhuang%22%3E%u81EA%u5B9A%u4E49%u5F62%u72B6%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Eshape%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u4E3A%3Ccode%3Esquare%3C/code%3E%uFF0C%u590D%u9009%u6846%u7684%u5F62%u72B6%u4F1A%u53D8%u6210%u65B9%u5F62%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshape%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsquare%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u590D%u9009%u6846%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Echecked-color%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%u9009%u4E2D%u72B6%u6001%u4E0B%u7684%u56FE%u6807%u989C%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2307c160%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%u590D%u9009%u6846%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-da-xiao%22%3E%u81EA%u5B9A%u4E49%u5927%u5C0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eicon-size%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%u56FE%u6807%u7684%u5927%u5C0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon-size%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B25px%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-biao%22%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20icon%20%u63D2%u69FD%u81EA%u5B9A%u4E49%u56FE%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-icon-slot%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u81EA%u5B9A%u4E49%u56FE%u6807%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bicon%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%3F%20activeIcon%20%3A%20inactiveIcon%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B//img.yzcdn.cn/icon-active.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EinactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B//img.yzcdn.cn/icon-normal.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-wen-ben-dian-ji%22%3E%u7981%u7528%u6587%u672C%u70B9%u51FB%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Elabel-disabled%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u7981%u7528%u590D%u9009%u6846%u6587%u672C%u70B9%u51FB%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel-disabled%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fu-xuan-kuang-zu%22%3E%u590D%u9009%u6846%u7EC4%3C/h3%3E%0A%3Cp%3E%u9700%u8981%u4E0E%3Ccode%3Evan-checkbox-group%3C/code%3E%u4E00%u8D77%u4F7F%u7528%uFF0C%u9009%u4E2D%u503C%u662F%u4E00%u4E2A%u6570%u7EC4%uFF0C%u901A%u8FC7%3Ccode%3Evalue%3C/code%3E%u7ED1%u5B9A%u5728%3Ccode%3Evan-checkbox-group%3C/code%3E%u4E0A%uFF0C%u6570%u7EC4%u4E2D%u7684%u9879%u5373%u4E3A%u9009%u4E2D%u7684%3Ccode%3ECheckbox%3C/code%3E%u7684%3Ccode%3Ename%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u7684%u503C%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20result%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Ba%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%20a%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bb%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%20b%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bc%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%20c%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eresult%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Ba%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bb%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eresult%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xian-zhi-zui-da-ke-xuan-shu%22%3E%u9650%u5236%u6700%u5927%u53EF%u9009%u6570%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20result%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emax%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%202%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Ba%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%20a%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bb%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%20b%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bc%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u590D%u9009%u6846%20c%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22da-pei-dan-yuan-ge-zu-jian-shi-yong%22%3E%u642D%u914D%u5355%u5143%u683C%u7EC4%u4EF6%u4F7F%u7528%3C/h3%3E%0A%3Cp%3E%u6B64%u65F6%u4F60%u9700%u8981%u518D%u5F15%u5165%3Ccode%3ECell%3C/code%3E%u548C%3Ccode%3ECellGroup%3C/code%3E%u7EC4%u4EF6%uFF0C%u5E76%u901A%u8FC7%20checkbox%20%u7684%20toggle%20%u65B9%u6CD5%u624B%u52A8%u89E6%u53D1%u5207%u6362%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20result%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Afor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20list%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Akey%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bindex%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u590D%u9009%u6846%20%7B%7B%20item%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvalue-class%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclickable%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata-index%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20index%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btoggle%26quot%3B%3C/span%3E%0A%20%20%20%20%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecatch%3Atap%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bnoop%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcheckboxes-%7B%7B%20index%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20item%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-checkbox-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elist%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Ba%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bb%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bc%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eresult%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Ba%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bb%26%23x27%3B%3C/span%3E%5D%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eresult%3C/span%3E%3A%20event.detail%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Etoggle%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20index%20%7D%20%3D%20event.currentTarget.dataset%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20checkbox%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.selectComponent%28%3Cspan%20class%3D%22hljs-string%22%3E%60.checkboxes-%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bindex%7D%3C/span%3E%60%3C/span%3E%29%3B%0A%20%20%20%20checkbox.toggle%28%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Enoop%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%7D%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.value-class%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Eflex%3C/span%3E%3A%20none%20%3Cspan%20class%3D%22hljs-meta%22%3E%21important%3C/span%3E%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22checkbox-props%22%3ECheckbox%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%20Checkbox%20%u540D%u79F0%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshape%3C/td%3E%0A%3Ctd%3E%u5F62%u72B6%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eround%3C/code%3E%20%3Ccode%3Esquare%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eround%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u9009%u4E2D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u5355%u9009%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-disabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u5355%u9009%u6846%u5185%u5BB9%u70B9%u51FB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-position%3C/td%3E%0A%3Ctd%3E%u6587%u672C%u4F4D%u7F6E%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eleft%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-icon-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%20icon%20slot%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Echecked-color%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u72B6%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%231989fa%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-size%3C/td%3E%0A%3Ctd%3Eicon%20%u5927%u5C0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E20px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22checkboxgroup-props%22%3ECheckboxGroup%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5728%u8868%u5355%u5185%u63D0%u4EA4%u65F6%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u6240%u6709%u9009%u4E2D%u9879%u7684%20name%3C/td%3E%0A%3Ctd%3E%3Cem%3EArray%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6240%u6709%u5355%u9009%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u6700%u5927%u53EF%u9009%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%uFF08%u65E0%u9650%u5236%uFF09%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edirection%20%3Ccode%3Ev1.7.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6392%u5217%u65B9%u5411%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ehorizontal%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evertical%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22checkbox-event%22%3ECheckbox%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5F53%u7ED1%u5B9A%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u7EC4%u4EF6%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22checkbox-wai-bu-yang-shi-lei%22%3ECheckbox%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-class%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-class%3C/td%3E%0A%3Ctd%3E%u63CF%u8FF0%u4FE1%u606F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22checkboxgroup-event%22%3ECheckboxGroup%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5F53%u7ED1%u5B9A%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u7EC4%u4EF6%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22checkbox-slot%22%3ECheckbox%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6587%u672C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22checkbox-fang-fa%22%3ECheckbox%20%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%20%u53EF%u4EE5%u83B7%u53D6%u5230%20checkbox%20%u5B9E%u4F8B%u5E76%u8C03%u7528%u5B9E%u4F8B%u65B9%u6CD5%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etoggle%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u5207%u6362%u9009%u4E2D%u72B6%u6001%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2727:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ECircle%20%u73AF%u5F62%u8FDB%u5EA6%u6761%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u5706%u73AF%u5F62%u7684%u8FDB%u5EA6%u6761%u7EC4%u4EF6%uFF0C%u652F%u6301%u8FDB%u5EA6%u6E10%u53D8%u52A8%u753B%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-circle%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/circle/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evalue%3C/code%3E%u5C5E%u6027%u8868%u793A%u8FDB%u5EA6%u6761%u7684%u76EE%u6807%u8FDB%u5EA6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-circle%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2030%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btext%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22kuan-du-ding-zhi%22%3E%u5BBD%u5EA6%u5B9A%u5236%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Estroke-width%3C/code%3E%u5C5E%u6027%u6765%u63A7%u5236%u8FDB%u5EA6%u6761%u5BBD%u5EA6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-circle%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estroke-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B6%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5BBD%u5EA6%u5B9A%u5236%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yan-se-ding-zhi%22%3E%u989C%u8272%u5B9A%u5236%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Ecolor%3C/code%3E%u5C5E%u6027%u6765%u63A7%u5236%u8FDB%u5EA6%u6761%u989C%u8272%uFF0C%3Ccode%3Elayer-color%3C/code%3E%u5C5E%u6027%u6765%u63A7%u5236%u8F68%u9053%u989C%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-circle%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elayer-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23eeeeee%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ee0a24%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u989C%u8272%u5B9A%u5236%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jian-bian-se%22%3E%u6E10%u53D8%u8272%3C/h3%3E%0A%3Cp%3E%3Ccode%3Ecolor%3C/code%3E%u5C5E%u6027%u652F%u6301%u4F20%u5165%u5BF9%u8C61%u683C%u5F0F%u6765%u5B9A%u4E49%u6E10%u53D8%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-circle%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20gradientColor%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6E10%u53D8%u8272%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E25%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EgradientColor%3C/span%3E%3A%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B0%25%26%23x27%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23ffd01e%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B100%25%26%23x27%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23ee0a24%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ni-shi-zhen-fang-xiang%22%3E%u9006%u65F6%u9488%u65B9%u5411%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Eclockwise%3C/code%3E%u8BBE%u7F6E%u4E3A%3Ccode%3Efalse%3C/code%3E%uFF0C%u8FDB%u5EA6%u4F1A%u4ECE%u9006%u65F6%u9488%u65B9%u5411%u5F00%u59CB%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-circle%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2307c160%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclockwise%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u9006%u65F6%u9488%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22da-xiao-ding-zhi%22%3E%u5927%u5C0F%u5B9A%u5236%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Esize%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u5706%u73AF%u76F4%u5F84%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-circle%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B120%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5927%u5C0F%u5B9A%u5236%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u76EE%u6807%u8FDB%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%20canvas%20%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3E2d%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u5706%u73AF%u76F4%u5F84%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%20%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E100%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6761%u989C%u8272%uFF0C%u4F20%u5165%u5BF9%u8C61%u683C%u5F0F%u53EF%u4EE5%u5B9A%u4E49%u6E10%u53D8%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20object%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%231989fa%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elayer-color%3C/td%3E%0A%3Ctd%3E%u8F68%u9053%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23fff%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efill%3C/td%3E%0A%3Ctd%3E%u586B%u5145%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Espeed%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u901F%u5EA6%uFF08%u5355%u4F4D%u4E3A%20value/s%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E50%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Estroke-width%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6761%u5BBD%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E4%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclockwise%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u987A%u65F6%u9488%u589E%u52A0%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6587%u5B57%u5185%u5BB9%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Efill%3C/code%3E%uFF0C%u63D2%u69FD%u5185%u5BB9%u4F1A%u88AB%u539F%u751F%u7EC4%u4EF6%u8986%u76D6%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9136:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ELayout%20%u5E03%u5C40%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3ELayout%20%u63D0%u4F9B%u4E86%3Ccode%3Evan-row%3C/code%3E%u548C%3Ccode%3Evan-col%3C/code%3E%u4E24%u4E2A%u7EC4%u4EF6%u6765%u8FDB%u884C%u884C%u5217%u5E03%u5C40%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-row%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/row/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-col%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/col/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-ben-yong-fa%22%3E%u57FA%u672C%u7528%u6CD5%3C/h3%3E%0A%3Cp%3ELayout%20%u7EC4%u4EF6%u63D0%u4F9B%u4E86%3Ccode%3E24%u5217%u6805%u683C%3C/code%3E%uFF0C%u901A%u8FC7%u5728%3Ccode%3ECol%3C/code%3E%u4E0A%u6DFB%u52A0%3Ccode%3Espan%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u5217%u6240%u5360%u7684%u5BBD%u5EA6%u767E%u5206%u6BD4%u3002%u6B64%u5916%uFF0C%u6DFB%u52A0%3Ccode%3Eoffset%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u5217%u7684%u504F%u79FB%u5BBD%u5EA6%uFF0C%u8BA1%u7B97%u65B9%u5F0F%u4E0E%20span%20%u76F8%u540C%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Espan%3A%208%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Espan%3A%208%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Espan%3A%208%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B4%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Espan%3A%204%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B10%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoffset%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B4%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Eoffset%3A%204%2C%20span%3A%2010%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoffset%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B12%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B12%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Eoffset%3A%2012%2C%20span%3A%2012%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22she-zhi-lie-yuan-su-jian-ju%22%3E%u8BBE%u7F6E%u5217%u5143%u7D20%u95F4%u8DDD%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Egutter%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u5217%u5143%u7D20%u4E4B%u95F4%u7684%u95F4%u8DDD%uFF0C%u9ED8%u8BA4%u95F4%u8DDD%u4E3A%200%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Egutter%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B20%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Espan%3A%208%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Espan%3A%208%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Espan%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%26gt%3B%3C/span%3Espan%3A%208%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-col%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-row%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22row-props%22%3ERow%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Egutter%3C/td%3E%0A%3Ctd%3E%u5217%u5143%u7D20%u4E4B%u95F4%u7684%u95F4%u8DDD%uFF08%u5355%u4F4D%u4E3A%20px%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22col-props%22%3ECol%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Espan%3C/td%3E%0A%3Ctd%3E%u5217%u5143%u7D20%u5BBD%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoffset%3C/td%3E%0A%3Ctd%3E%u5217%u5143%u7D20%u504F%u79FB%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},5723:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ECollapse%20%u6298%u53E0%u9762%u677F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-collapse%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/collapse/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-collapse-item%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/collapse-item/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Evalue%3C/code%3E%u63A7%u5236%u5C55%u5F00%u7684%u9762%u677F%u5217%u8868%uFF0C%3Ccode%3EactiveNames%3C/code%3E%u4E3A%u6570%u7EC4%u683C%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeNames%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u5FAE%u5546%u57CE%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u63D0%u4F9B%u591A%u6837%u5E97%u94FA%u6A21%u677F%uFF0C%u5FEB%u901F%u642D%u5EFA%u7F51%u4E0A%u5546%u57CE%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u96F6%u552E%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u7F51%u5E97%u5438%u7C89%u83B7%u5BA2%u3001%u4F1A%u5458%u5206%u5C42%u8425%u9500%u3001%u4E00%u673A%u591A%u79CD%u6536%u6B3E%uFF0C%u544A%u522B%u7ECF%u8425%u4F4E%u6548%u548C%u5BA2%u6237%u6D41%u5931%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u7F8E%u4E1A%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u7EBF%u4E0A%u62D3%u5BA2%uFF0C%u968F%u65F6%u9884%u7EA6%uFF0C%u8D34%u5FC3%u987A%u624B%u7684%u5F00%u5355%u6536%u94F6%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveNames%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B1%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveNames%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shou-feng-qin%22%3E%u624B%u98CE%u7434%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eaccordion%3C/code%3E%u53EF%u4EE5%u8BBE%u7F6E%u4E3A%u624B%u98CE%u7434%u6A21%u5F0F%uFF0C%u6700%u591A%u5C55%u5F00%u4E00%u4E2A%u9762%u677F%uFF0C%u6B64%u65F6%3Ccode%3EactiveName%3C/code%3E%u4E3A%u5B57%u7B26%u4E32%u683C%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eaccordion%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeName%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u5FAE%u5546%u57CE%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u63D0%u4F9B%u591A%u6837%u5E97%u94FA%u6A21%u677F%uFF0C%u5FEB%u901F%u642D%u5EFA%u7F51%u4E0A%u5546%u57CE%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u96F6%u552E%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u7F51%u5E97%u5438%u7C89%u83B7%u5BA2%u3001%u4F1A%u5458%u5206%u5C42%u8425%u9500%u3001%u4E00%u673A%u591A%u79CD%u6536%u6B3E%uFF0C%u544A%u522B%u7ECF%u8425%u4F4E%u6548%u548C%u5BA2%u6237%u6D41%u5931%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u7F8E%u4E1A%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u7EBF%u4E0A%u62D3%u5BA2%uFF0C%u968F%u65F6%u9884%u7EA6%uFF0C%u8D34%u5FC3%u987A%u624B%u7684%u5F00%u5355%u6536%u94F6%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveName%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B1%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveName%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-jian-jian-ting%22%3E%u4E8B%u4EF6%u76D1%u542C%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evan-collapse%3C/code%3E%20%u63D0%u4F9B%u4E86%20%3Ccode%3Echange%3C/code%3E%2C%20%3Ccode%3Eopen%3C/code%3E%20%u548C%20%3Ccode%3Eclose%3C/code%3E%20%u4E8B%u4EF6%u3002%3Ccode%3Echange%3C/code%3E%20%u4E8B%u4EF6%u5728%u9762%u677F%u5207%u6362%u65F6%u89E6%u53D1%uFF0C%3Ccode%3Eopen%3C/code%3E%20%u4E8B%u4EF6%u5728%u9762%u677F%u5C55%u5F00%u65F6%u89E6%u53D1%uFF0C%3Ccode%3Eclose%3C/code%3E%20%u4E8B%u4EF6%u5728%u9762%u677F%u5173%u95ED%u65F6%u89E6%u53D1%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeNames%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aopen%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonOpen%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u5FAE%u5546%u57CE%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u63D0%u4F9B%u591A%u6837%u5E97%u94FA%u6A21%u677F%uFF0C%u5FEB%u901F%u642D%u5EFA%u7F51%u4E0A%u5546%u57CE%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u96F6%u552E%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u7F51%u5E97%u5438%u7C89%u83B7%u5BA2%u3001%u4F1A%u5458%u5206%u5C42%u8425%u9500%u3001%u4E00%u673A%u591A%u79CD%u6536%u6B3E%uFF0C%u544A%u522B%u7ECF%u8425%u4F4E%u6548%u548C%u5BA2%u6237%u6D41%u5931%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u7F8E%u4E1A%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u7EBF%u4E0A%u62D3%u5BA2%uFF0C%u968F%u65F6%u9884%u7EA6%uFF0C%u8D34%u5FC3%u987A%u624B%u7684%u5F00%u5355%u6536%u94F6%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveNames%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B1%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveNames%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonOpen%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%60%u5C55%u5F00%3A%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail%7D%3C/span%3E%60%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%60%u5173%u95ED%3A%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail%7D%3C/span%3E%60%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-biao-ti-nei-rong%22%3E%u81EA%u5B9A%u4E49%u6807%u9898%u5185%u5BB9%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeNames%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btitle%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6709%u8D5E%u5FAE%u5546%u57CE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bquestion-o%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u63D0%u4F9B%u591A%u6837%u5E97%u94FA%u6A21%u677F%uFF0C%u5FEB%u901F%u642D%u5EFA%u7F51%u4E0A%u5546%u57CE%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6709%u8D5E%u96F6%u552E%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bshop-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u7F51%u5E97%u5438%u7C89%u83B7%u5BA2%u3001%u4F1A%u5458%u5206%u5C42%u8425%u9500%u3001%u4E00%u673A%u591A%u79CD%u6536%u6B3E%uFF0C%u544A%u522B%u7ECF%u8425%u4F4E%u6548%u548C%u5BA2%u6237%u6D41%u5931%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-collapse%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveNames%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B1%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveNames%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22collapse-props%22%3ECollapse%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5C55%u5F00%u9762%u677F%u7684%20name%3C/td%3E%0A%3Ctd%3E%u975E%u624B%u98CE%u7434%u6A21%u5F0F%uFF1A%3Cem%3E%28string%20%7C%20number%29%5B%5D%3C/em%3E%3Cbr%3E%u624B%u98CE%u7434%u6A21%u5F0F%uFF1A%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eaccordion%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u624B%u98CE%u7434%u6A21%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5916%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22collapse-event%22%3ECollapse%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Echange%3C/td%3E%0A%3Ctd%3E%u5207%u6362%u9762%u677F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3EactiveNames%3A%20%3Cem%3Estring%20%7C%20Array%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen%3C/td%3E%0A%3Ctd%3E%u5C55%u5F00%u9762%u677F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3EcurrentName%3A%20%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u9762%u677F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3EcurrentName%3A%20%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22collapseitem-props%22%3ECollapseItem%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u552F%u4E00%u6807%u8BC6%u7B26%uFF0C%u9ED8%u8BA4%u4E3A%u7D22%u5F15%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eindex%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u680F%u5DE6%u4FA7%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u680F%u5DE6%u4FA7%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u680F%u53F3%u4FA7%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u680F%u63CF%u8FF0%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5185%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eis-link%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u6807%u9898%u680F%u53F3%u4FA7%u7BAD%u5934%u5E76%u5F00%u542F%u70B9%u51FB%u53CD%u9988%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclickable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u70B9%u51FB%u53CD%u9988%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u9762%u677F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22collapseitem-slot%22%3ECollapseItem%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u9762%u677F%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u663E%u793A%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%3Ccode%3Eicon%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%3Ccode%3Etitle%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4FA7%u6309%u94AE%uFF0C%u9ED8%u8BA4%u662F%3Ccode%3Earrow%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22collapse-wai-bu-yang-shi-lei%22%3ECollapse%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22collapseitem-wai-bu-yang-shi-lei%22%3ECollapseItem%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtent-class%3C/td%3E%0A%3Ctd%3E%u5185%u5BB9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},4914:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3E%u5185%u7F6E%u6837%u5F0F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3EVant%20%u4E2D%u9ED8%u8BA4%u5305%u542B%u4E86%u4E00%u4E9B%u5E38%u7528%u6837%u5F0F%uFF0C%u53EF%u4EE5%u76F4%u63A5%u901A%u8FC7%20className%20%u7684%u65B9%u5F0F%u4F7F%u7528%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%20app.wxss%20%u4E2D%u5F15%u5165%u5185%u7F6E%u6837%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3E@import%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B@vant/weapp/common/index.wxss%26%23x27%3B%3C/span%3E%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wen-zi-sheng-lue%22%3E%u6587%u5B57%u7701%u7565%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-xml%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-ellipsis%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u8FD9%u662F%u4E00%u6BB5%u5BBD%u5EA6%u9650%u5236%20250px%20%u7684%u6587%u5B57%uFF0C%u540E%u9762%u7684%u5185%u5BB9%u4F1A%u7701%u7565%u3002%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u6700%u591A%u663E%u793A%u4E24%u884C%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-multi-ellipsis--l2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u8FD9%u662F%u4E00%u6BB5%u6700%u591A%u663E%u793A%u4E24%u884C%u7684%u6587%u5B57%uFF0C%u540E%u9762%u7684%u5185%u5BB9%u4F1A%u7701%u7565%u3002%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u6700%u591A%u663E%u793A%u4E09%u884C%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-multi-ellipsis--l3%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u8FD9%u662F%u4E00%u6BB5%u6700%u591A%u663E%u793A%u4E09%u884C%u7684%u6587%u5B57%uFF0C%u540E%u9762%u7684%u5185%u5BB9%u4F1A%u7701%u7565%u3002%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%221px-bian-kuang%22%3E1px%20%u8FB9%u6846%3C/h3%3E%0A%3Cp%3E%u4E3A%u5143%u7D20%u6DFB%u52A0%20Retina%20%u5C4F%u5E55%u4E0B%u7684%201px%20%u8FB9%u6846%uFF08%u5373%20hairline%uFF09%uFF0C%u57FA%u4E8E%u4F2A%u7C7B%20transform%20%u5B9E%u73B0%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-xml%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u4E0A%u8FB9%u6846%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-hairline--top%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u4E0B%u8FB9%u6846%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-hairline--bottom%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u5DE6%u8FB9%u6846%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-hairline--left%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u53F3%u8FB9%u6846%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-hairline--right%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u4E0A%u4E0B%u8FB9%u6846%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-hairline--top-bottom%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u5168%u8FB9%u6846%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-hairline--surround%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22quan-ju-zi-ti%22%3E%u5168%u5C40%u5B57%u4F53%3C/h3%3E%0A%3Cp%3E%u63A8%u8350%u5728%20app.wxss%20%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3Epage%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-family%3C/span%3E%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3BHelvetica%20Neue%26%23x27%3B%3C/span%3E%2C%20Helvetica%2C%0A%20%20%20%20Segoe%20UI%2C%20Arial%2C%20Roboto%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3BPingFang%20SC%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bmiui%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3BHiragino%20Sans%20GB%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3BMicrosoft%20Yahei%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20sans-serif%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},7401:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EConfigProvider%20%u5168%u5C40%u914D%u7F6E%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u914D%u7F6E%20Vant%20Weapp%20%u7EC4%u4EF6%u7684%u4E3B%u9898%u6837%u5F0F%uFF0C%u4ECE%20%3Ccode%3Ev1.7.0%3C/code%3E%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-config-provider%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/config-provider/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22ding-zhi-zhu-ti%22%3E%u5B9A%u5236%u4E3B%u9898%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao-1%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3EVant%20Weapp%20%u7EC4%u4EF6%u901A%u8FC7%u4E30%u5BCC%u7684%20%3Ca%20href%3D%22https%3A//developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties%22%20target%3D%22_blank%22%3ECSS%20%u53D8%u91CF%3C/a%3E%20%u6765%u7EC4%u7EC7%u6837%u5F0F%uFF0C%u901A%u8FC7%u8986%u76D6%u8FD9%u4E9B%20CSS%20%u53D8%u91CF%uFF0C%u53EF%u4EE5%u5B9E%u73B0%3Cstrong%3E%u5B9A%u5236%u4E3B%u9898%u3001%u52A8%u6001%u5207%u6362%u4E3B%u9898%3C/strong%3E%u7B49%u6548%u679C%u3002%3C/p%3E%0A%3Ch4%20id%3D%22shi-li%22%3E%u793A%u4F8B%3C/h4%3E%0A%3Cp%3E%u4EE5%20Button%20%u7EC4%u4EF6%u4E3A%u4F8B%uFF0C%u67E5%u770B%u7EC4%u4EF6%u7684%u6837%u5F0F%uFF0C%u53EF%u4EE5%u770B%u5230%20%3Ccode%3E.van-button--primary%3C/code%3E%20%u7C7B%u540D%u4E0A%u5B58%u5728%u4EE5%u4E0B%u53D8%u91CF%uFF1A%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.van-button--primary%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-built_in%22%3Evar%3C/span%3E%28--button-primary-color%2C%3Cspan%20class%3D%22hljs-number%22%3E%23fff%3C/span%3E%29%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-built_in%22%3Evar%3C/span%3E%28--button-primary-background-color%2C%3Cspan%20class%3D%22hljs-number%22%3E%2307c160%3C/span%3E%29%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Eborder%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-built_in%22%3Evar%3C/span%3E%28--button-border-width%2C%3Cspan%20class%3D%22hljs-number%22%3E1px%3C/span%3E%29%20solid%20%3Cspan%20class%3D%22hljs-built_in%22%3Evar%3C/span%3E%28--button-primary-border-color%2C%3Cspan%20class%3D%22hljs-number%22%3E%2307c160%3C/span%3E%29%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-css-bian-liang%22%3E%u81EA%u5B9A%u4E49%20CSS%20%u53D8%u91CF%3C/h3%3E%0A%3Ch4%20id%3D%22tong-guo-css-fu-gai%22%3E%u901A%u8FC7%20CSS%20%u8986%u76D6%3C/h4%3E%0A%3Cp%3E%u4F60%u53EF%u4EE5%u76F4%u63A5%u5728%u4EE3%u7801%u4E2D%u8986%u76D6%u8FD9%u4E9B%20CSS%20%u53D8%u91CF%uFF0CButton%20%u7EC4%u4EF6%u7684%u6837%u5F0F%u4F1A%u968F%u4E4B%u53D1%u751F%u6539%u53D8%uFF1A%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E/*%20%u6DFB%u52A0%u8FD9%u6BB5%u6837%u5F0F%u540E%uFF0CPrimary%20Button%20%u4F1A%u53D8%u6210%u7EA2%u8272%20*/%3C/span%3E%0Apage%20%7B%0A%20%20--%3Cspan%20class%3D%22hljs-selector-tag%22%3Ebutton%3C/span%3E-primary-%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20red%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Ch4%20id%3D%22tong-guo-configprovider-fu-gai%22%3E%u901A%u8FC7%20ConfigProvider%20%u8986%u76D6%3C/h4%3E%0A%3Cp%3E%3Ccode%3EConfigProvider%3C/code%3E%20%u7EC4%u4EF6%u63D0%u4F9B%u4E86%u8986%u76D6%20CSS%20%u53D8%u91CF%u7684%u80FD%u529B%uFF0C%u4F60%u9700%u8981%u5728%u6839%u8282%u70B9%u5305%u88F9%u4E00%u4E2A%20%3Ccode%3EConfigProvider%3C/code%3E%20%u7EC4%u4EF6%uFF0C%u5E76%u901A%u8FC7%20%3Ccode%3Etheme-vars%3C/code%3E%20%u5C5E%u6027%u6765%u914D%u7F6E%u4E00%u4E9B%u4E3B%u9898%u53D8%u91CF%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-config-provider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etheme-vars%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20themeVars%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BC4%u5206%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binput%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwidth%3A%20100%25%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emodel%3Avalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20rate%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edata-key%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Brate%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6ED1%u5757%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binput%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwidth%3A%20100%25%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20slider%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edata-key%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bslider%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmargin%3A%2016px%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eblock%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u63D0%u4EA4%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-config-provider%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Page%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B../../common/page%26%23x27%3B%3C/span%3E%3B%0A%0APage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Erate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E4%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eslider%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E50%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EthemeVars%3C/span%3E%3A%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3ErateIconFullColor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%2307c160%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EsliderBarHeight%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B4px%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EsliderButtonWidth%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B20px%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EsliderButtonHeight%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B20px%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EsliderActiveBackgroundColor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%2307c160%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EbuttonPrimaryBorderColor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%2307c160%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EbuttonPrimaryBackgroundColor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%2307c160%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20key%20%7D%20%3D%20event.currentTarget.dataset%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%5Bkey%5D%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etheme-vars%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u4E3B%u9898%u53D8%u91CF%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2460:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ECountDown%20%u5012%u8BA1%u65F6%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5B9E%u65F6%u5C55%u793A%u5012%u8BA1%u65F6%u6570%u503C%uFF0C%u652F%u6301%u6BEB%u79D2%u7CBE%u5EA6%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-count-down%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/count-down/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-ben-yong-fa%22%3E%u57FA%u672C%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%3Ccode%3Etime%3C/code%3E%u5C5E%u6027%u8868%u793A%u5012%u8BA1%u65F6%u603B%u65F6%u957F%uFF0C%u5355%u4F4D%u4E3A%u6BEB%u79D2%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-count-down%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etime%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20time%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etime%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E30%3C/span%3E%20*%20%3Cspan%20class%3D%22hljs-number%22%3E60%3C/span%3E%20*%20%3Cspan%20class%3D%22hljs-number%22%3E60%3C/span%3E%20*%20%3Cspan%20class%3D%22hljs-number%22%3E1000%3C/span%3E%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-ge-shi%22%3E%u81EA%u5B9A%u4E49%u683C%u5F0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eformat%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u5012%u8BA1%u65F6%u6587%u672C%u7684%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-count-down%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etime%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20time%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eformat%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BDD%20%u5929%20HH%20%u65F6%20mm%20%u5206%20ss%20%u79D2%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22hao-miao-ji-xuan-ran%22%3E%u6BEB%u79D2%u7EA7%u6E32%u67D3%3C/h3%3E%0A%3Cp%3E%u5012%u8BA1%u65F6%u9ED8%u8BA4%u6BCF%u79D2%u6E32%u67D3%u4E00%u6B21%uFF0C%u8BBE%u7F6E%3Ccode%3Emillisecond%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u5F00%u542F%u6BEB%u79D2%u7EA7%u6E32%u67D3%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-count-down%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emillisecond%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etime%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20time%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eformat%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BHH%3Amm%3Ass%3ASSS%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yang-shi%22%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Euse-slot%3C/code%3E%u5C5E%u6027%u540E%u53EF%u4EE5%u81EA%u5B9A%u4E49%u5012%u8BA1%u65F6%u6837%u5F0F%uFF0C%u9700%u8981%u901A%u8FC7%3Ccode%3Ebind%3Achange%3C/code%3E%u4E8B%u4EF6%u83B7%u53D6%3Ccode%3EtimeData%3C/code%3E%u5BF9%u8C61%u5E76%u81EA%u884C%u6E32%u67D3%uFF0C%u683C%u5F0F%u89C1%u4E0B%u65B9%u8868%u683C%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-count-down%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-slot%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etime%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20time%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bitem%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%7B%7B%20timeData.hours%20%7D%7D%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bitem%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%7B%7B%20timeData.minutes%20%7D%7D%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bitem%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%7B%7B%20timeData.seconds%20%7D%7D%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-count-down%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etime%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E30%3C/span%3E%20*%20%3Cspan%20class%3D%22hljs-number%22%3E60%3C/span%3E%20*%20%3Cspan%20class%3D%22hljs-number%22%3E60%3C/span%3E%20*%20%3Cspan%20class%3D%22hljs-number%22%3E1000%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EtimeData%3C/span%3E%3A%20%7B%7D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Ee%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EtimeData%3C/span%3E%3A%20e.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.item%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Edisplay%3C/span%3E%3A%20inline-block%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ewidth%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E22px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Emargin-right%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E5px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E%23fff%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-size%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E12px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Etext-align%3C/span%3E%3A%20center%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E%231989fa%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Eborder-radius%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2px%3C/span%3E%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shou-dong-kong-zhi%22%3E%u624B%u52A8%u63A7%u5236%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3EselectComponent%3C/code%3E%20%u9009%u62E9%u5668%u83B7%u53D6%u5230%u7EC4%u4EF6%u5B9E%u4F8B%u540E%uFF0C%u53EF%u4EE5%u8C03%u7528%3Ccode%3Estart%3C/code%3E%u3001%3Ccode%3Epause%3C/code%3E%u3001%3Ccode%3Ereset%3C/code%3E%u65B9%u6CD5%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-count-down%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcontrol-count-down%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emillisecond%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etime%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%203000%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eauto-start%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eformat%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bss%3ASSS%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Afinish%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfinished%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclickable%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumn-num%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5F00%u59CB%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bplay-circle-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebindclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bstart%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6682%u505C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bpause-circle-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebindclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bpause%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u91CD%u7F6E%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Breplay%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebindclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Breset%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Estart%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20countDown%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.selectComponent%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B.control-count-down%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%20%20countDown.start%28%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Epause%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20countDown%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.selectComponent%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B.control-count-down%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%20%20countDown.pause%28%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Ereset%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20countDown%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.selectComponent%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B.control-count-down%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%20%20countDown.reset%28%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Efinished%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5012%u8BA1%u65F6%u7ED3%u675F%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etime%3C/td%3E%0A%3Ctd%3E%u5012%u8BA1%u65F6%u65F6%u957F%uFF0C%u5355%u4F4D%u6BEB%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eformat%3C/td%3E%0A%3Ctd%3E%u65F6%u95F4%u683C%u5F0F%uFF0CDD-%u65E5%uFF0CHH-%u65F6%uFF0Cmm-%u5206%uFF0Css-%u79D2%uFF0CSSS-%u6BEB%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EHH%3Amm%3Ass%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eauto-start%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u81EA%u52A8%u5F00%u59CB%u5012%u8BA1%u65F6%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emillisecond%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u6BEB%u79D2%u7EA7%u6E32%u67D3%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u81EA%u5B9A%u4E49%u6837%u5F0F%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Efinish%3C/td%3E%0A%3Ctd%3E%u5012%u8BA1%u65F6%u7ED3%u675F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Echange%3C/td%3E%0A%3Ctd%3E%u65F6%u95F4%u53D8%u5316%u65F6%u89E6%u53D1%uFF0C%u4EC5%u5728%u5F00%u542F%3Ccode%3Euse-slot%3C/code%3E%u540E%u624D%u4F1A%u89E6%u53D1%3C/td%3E%0A%3Ctd%3EtimeData%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22timedata-ge-shi%22%3EtimeData%20%u683C%u5F0F%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Edays%3C/td%3E%0A%3Ctd%3E%u5269%u4F59%u5929%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ehours%3C/td%3E%0A%3Ctd%3E%u5269%u4F59%u5C0F%u65F6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eminutes%3C/td%3E%0A%3Ctd%3E%u5269%u4F59%u5206%u949F%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eseconds%3C/td%3E%0A%3Ctd%3E%u5269%u4F59%u79D2%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emilliseconds%3C/td%3E%0A%3Ctd%3E%u5269%u4F59%u6BEB%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%20%u53EF%u4EE5%u83B7%u53D6%u5230%20CountDown%20%u5B9E%u4F8B%u5E76%u8C03%u7528%u5B9E%u4F8B%u65B9%u6CD5%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Estart%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u5F00%u59CB%u5012%u8BA1%u65F6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epause%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u6682%u505C%u5012%u8BA1%u65F6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ereset%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u91CD%u8BBE%u5012%u8BA1%u65F6%uFF0C%u82E5%3Ccode%3Eauto-start%3C/code%3E%u4E3A%3Ccode%3Etrue%3C/code%3E%uFF0C%u91CD%u8BBE%u540E%u4F1A%u81EA%u52A8%u5F00%u59CB%u5012%u8BA1%u65F6%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},3712:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EDatetimePicker%20%u65F6%u95F4%u9009%u62E9%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u9009%u62E9%u65F6%u95F4%uFF0C%u652F%u6301%u65E5%u671F%u3001%u65F6%u5206%u7B49%u65F6%u95F4%u7EF4%u5EA6%uFF0C%u901A%u5E38%u4E0E%20%3Ca%20href%3D%22%23/popup%22%20target%3D%22_blank%22%3E%u5F39%u51FA%u5C42%3C/a%3E%20%u7EC4%u4EF6%u914D%u5408%u4F7F%u7528%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-datetime-picker%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/datetime-picker/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-ze-wan-zheng-shi-jian%22%3E%u9009%u62E9%u5B8C%u6574%u65F6%u95F4%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evalue%3C/code%3E%20%u4E3A%u65F6%u95F4%u6233%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-datetime-picker%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdatetime%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20currentDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emin-date%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20minDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emax-date%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20maxDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Ainput%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonInput%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EminHour%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E10%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmaxHour%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E20%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EminDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%29.getTime%28%29%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmaxDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%3Cspan%20class%3D%22hljs-number%22%3E2019%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E10%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%29.getTime%28%29%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%29.getTime%28%29%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonInput%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-ze-ri-qi-nian-yue-ri%22%3E%u9009%u62E9%u65E5%u671F%uFF08%u5E74%u6708%u65E5%uFF09%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evalue%3C/code%3E%20%u4E3A%u65F6%u95F4%u6233%uFF0C%u901A%u8FC7%u4F20%u5165%20%3Ccode%3Eformatter%3C/code%3E%20%u51FD%u6570%u5BF9%u9009%u9879%u6587%u5B57%u8FDB%u884C%u5904%u7406%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-datetime-picker%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdate%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20currentDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Ainput%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonInput%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emin-date%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20minDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eformatter%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20formatter%20%7D%7D%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%29.getTime%28%29%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EminDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%29.getTime%28%29%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Eformatter%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Etype%2C%20value%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28type%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Byear%26%23x27%3B%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%60%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bvalue%7D%3C/span%3E%u5E74%60%3C/span%3E%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28type%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bmonth%26%23x27%3B%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%60%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bvalue%7D%3C/span%3E%u6708%60%3C/span%3E%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20value%3B%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonInput%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-ze-ri-qi-nian-yue%22%3E%u9009%u62E9%u65E5%u671F%uFF08%u5E74%u6708%uFF09%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evalue%3C/code%3E%20%u4E3A%u65F6%u95F4%u6233%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-datetime-picker%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Byear-month%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20currentDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emin-date%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20minDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Ainput%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonInput%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%29.getTime%28%29%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EminDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EDate%3C/span%3E%28%29.getTime%28%29%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonInput%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-ze-shi-jian%22%3E%u9009%u62E9%u65F6%u95F4%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evalue%3C/code%3E%20%u4E3A%u5B57%u7B26%u4E32%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-datetime-picker%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btime%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20currentDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emin-hour%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20minHour%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emax-hour%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20maxHour%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Ainput%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonInput%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B12%3A00%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EminHour%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E10%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmaxHour%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E20%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonInput%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xuan-xiang-guo-lu-qi%22%3E%u9009%u9879%u8FC7%u6EE4%u5668%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u4F20%u5165%20%3Ccode%3Efilter%3C/code%3E%20%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-datetime-picker%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btime%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20currentDate%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Efilter%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20filter%20%7D%7D%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentDate%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B12%3A00%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Efilter%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Etype%2C%20options%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28type%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bminute%26%23x27%3B%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20options.filter%28%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eoption%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20option%20%25%20%3Cspan%20class%3D%22hljs-number%22%3E5%3C/span%3E%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%29%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20options%3B%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Edate%3C/code%3E%20%3Ccode%3Etime%3C/code%3E%20%3Ccode%3Eyear-month%3C/code%3E%20%3Cbr%3E%20%3Cstrong%3E%u4E0D%u5EFA%u8BAE%u52A8%u6001%u4FEE%u6539%3C/strong%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edatetime%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emin-date%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u7684%u6700%u5C0F%u65F6%u95F4%uFF0C%u7CBE%u786E%u5230%u5206%u949F%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5341%u5E74%u524D%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-date%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u7684%u6700%u5927%u65F6%u95F4%uFF0C%u7CBE%u786E%u5230%u5206%u949F%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5341%u5E74%u540E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emin-hour%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u7684%u6700%u5C0F%u5C0F%u65F6%uFF0C%u9488%u5BF9%20time%20%u7C7B%u578B%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-hour%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u7684%u6700%u5927%u5C0F%u65F6%uFF0C%u9488%u5BF9%20time%20%u7C7B%u578B%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E23%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emin-minute%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u7684%u6700%u5C0F%u5206%u949F%uFF0C%u9488%u5BF9%20time%20%u7C7B%u578B%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-minute%3C/td%3E%0A%3Ctd%3E%u53EF%u9009%u7684%u6700%u5927%u5206%u949F%uFF0C%u9488%u5BF9%20time%20%u7C7B%u578B%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E59%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efilter%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u8FC7%u6EE4%u51FD%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3E%28type%2C%20values%29%20%3D%26gt%3B%20values%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eformatter%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u683C%u5F0F%u5316%u51FD%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3E%28type%2C%20value%29%20%3D%26gt%3B%20value%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u680F%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-toolbar%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u9876%u90E8%u680F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eitem-height%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u9AD8%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E44%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-button-text%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u786E%u8BA4%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-button-text%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u53D6%u6D88%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evisible-item-count%3C/td%3E%0A%3Ctd%3E%u53EF%u89C1%u7684%u9009%u9879%u4E2A%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E6%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Einput%3C/td%3E%0A%3Ctd%3E%u5F53%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%20value%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Echange%3C/td%3E%0A%3Ctd%3E%u5F53%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%u7EC4%u4EF6%u5B9E%u4F8B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5B8C%u6210%u6309%u94AE%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%20value%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u53D6%u6D88%u6309%u94AE%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22change-shi-jian%22%3Echange%20%u4E8B%u4EF6%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Echange%3C/code%3E%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%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u51FD%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3EgetColumnValue%28index%29%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u5BF9%u5E94%u5217%u4E2D%u9009%u4E2D%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetColumnValue%28index%2C%20value%29%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u5BF9%u5E94%u5217%u4E2D%u9009%u4E2D%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EgetColumnValues%28index%29%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u5BF9%u5E94%u5217%u4E2D%u6240%u6709%u7684%u5907%u9009%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetColumnValues%28index%2C%20values%29%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u5BF9%u5E94%u5217%u4E2D%u6240%u6709%u7684%u5907%u9009%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EgetValues%28%29%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u6240%u6709%u5217%u4E2D%u88AB%u9009%u4E2D%u7684%u503C%uFF0C%u8FD4%u56DE%u4E00%u4E2A%u6570%u7EC4%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetValues%28values%29%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evalues%3C/code%3E%u4E3A%u4E00%u4E2A%u6570%u7EC4%uFF0C%u8BBE%u7F6E%u6240%u6709%u5217%u4E2D%u88AB%u9009%u4E2D%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-class%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u9879%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etoolbar-class%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u680F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolumn-class%3C/td%3E%0A%3Ctd%3E%u5217%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9372:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EDialog%20%u5F39%u51FA%u6846%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-dialog%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/dialog/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xiao-xi-ti-shi%22%3E%u6D88%u606F%u63D0%u793A%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u63D0%u793A%u4E00%u4E9B%u6D88%u606F%uFF0C%u53EA%u5305%u542B%u4E00%u4E2A%u786E%u8BA4%u6309%u94AE%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dialog%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-dialog%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Dialog%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/dialog/dialog%26%23x27%3B%3C/span%3E%3B%0A%0ADialog.alert%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6807%u9898%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5F39%u7A97%u5185%u5BB9%26%23x27%3B%3C/span%3E%2C%0A%7D%29.then%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20on%20close%3C/span%3E%0A%7D%29%3B%0A%0ADialog.alert%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5F39%u7A97%u5185%u5BB9%26%23x27%3B%3C/span%3E%2C%0A%7D%29.then%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20on%20close%3C/span%3E%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xiao-xi-que-ren%22%3E%u6D88%u606F%u786E%u8BA4%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u786E%u8BA4%u6D88%u606F%uFF0C%u5305%u542B%u53D6%u6D88%u548C%u786E%u8BA4%u6309%u94AE%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dialog%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-dialog%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Dialog%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/dialog/dialog%26%23x27%3B%3C/span%3E%3B%0A%0ADialog.confirm%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6807%u9898%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5F39%u7A97%u5185%u5BB9%26%23x27%3B%3C/span%3E%2C%0A%7D%29%0A%20%20.then%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20on%20confirm%3C/span%3E%0A%20%20%7D%29%0A%20%20.catch%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20on%20cancel%3C/span%3E%0A%20%20%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yuan-jiao-an-niu-feng-ge%22%3E%u5706%u89D2%u6309%u94AE%u98CE%u683C%3C/h3%3E%0A%3Cp%3E%u5C06%20theme%20%u9009%u9879%u8BBE%u7F6E%u4E3A%20%3Ccode%3Eround-button%3C/code%3E%20%u53EF%u4EE5%u5C55%u793A%u5706%u89D2%u6309%u94AE%u98CE%u683C%u7684%u5F39%u7A97%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dialog%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-dialog%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Dialog%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/dialog/dialog%26%23x27%3B%3C/span%3E%3B%0A%0ADialog.alert%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6807%u9898%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5F39%u7A97%u5185%u5BB9%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etheme%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bround-button%26%23x27%3B%3C/span%3E%2C%0A%7D%29.then%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20on%20close%3C/span%3E%0A%7D%29%3B%0A%0ADialog.alert%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5F39%u7A97%u5185%u5BB9%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etheme%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bround-button%26%23x27%3B%3C/span%3E%2C%0A%7D%29.then%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20on%20close%3C/span%3E%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yi-bu-guan-bi%22%3E%u5F02%u6B65%u5173%u95ED%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3EbeforeClose%3C/code%3E%20%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dialog%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-dialog%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Dialog%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/dialog/dialog%26%23x27%3B%3C/span%3E%3B%0A%0A%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20beforeClose%20%3D%20%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eaction%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-keyword%22%3Enew%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3EPromise%3C/span%3E%28%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eresolve%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-built_in%22%3EsetTimeout%3C/span%3E%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28action%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bconfirm%26%23x27%3B%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20resolve%28%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%29%3B%0A%20%20%20%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Eelse%3C/span%3E%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u62E6%u622A%u53D6%u6D88%u64CD%u4F5C%3C/span%3E%0A%20%20%20%20%20%20resolve%28%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%29%3B%0A%20%20%20%20%7D%0A%20%20%7D%2C%20%3Cspan%20class%3D%22hljs-number%22%3E1000%3C/span%3E%29%3B%0A%7D%29%3B%0A%0ADialog.confirm%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6807%u9898%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5F39%u7A97%u5185%u5BB9%26%23x27%3B%3C/span%3E%0A%20%20beforeClose%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zu-jian-diao-yong%22%3E%u7EC4%u4EF6%u8C03%u7528%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dialog%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-slot%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow-cancel-button%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Econfirm-button-open-type%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BgetUserInfo%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Agetuserinfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BgetUserInfo%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/1.jpg%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-dialog%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EgetUserInfo%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28event.detail%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3EDialog%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EPromise%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u5F39%u7A97%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EDialog.alert%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EPromise%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u6D88%u606F%u63D0%u793A%u5F39%u7A97%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EDialog.confirm%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EPromise%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u6D88%u606F%u786E%u8BA4%u5F39%u7A97%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EDialog.setDefaultOptions%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u4FEE%u6539%u9ED8%u8BA4%u914D%u7F6E%uFF0C%u5BF9%u6240%u6709%20Dialog%20%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EDialog.resetDefaultOptions%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u91CD%u7F6E%u9ED8%u8BA4%u914D%u7F6E%uFF0C%u5BF9%u6240%u6709%20Dialog%20%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EDialog.close%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u5F39%u7A97%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EDialog.stopLoading%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u505C%u6B62%u6309%u94AE%u7684%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22options%22%3EOptions%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u51FD%u6570%u8C03%u7528%20Dialog%20%u65F6%uFF0C%u652F%u6301%u4F20%u5165%u4EE5%u4E0B%u9009%u9879%uFF1A%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ewidth%3C/td%3E%0A%3Ctd%3E%u5F39%u7A97%u5BBD%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E320px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emessage%3C/td%3E%0A%3Ctd%3E%u6587%u672C%u5185%u5BB9%uFF0C%u652F%u6301%u901A%u8FC7%3Ccode%3E%5Cn%3C/code%3E%u6362%u884C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EmessageAlign%3C/td%3E%0A%3Ctd%3E%u5185%u5BB9%u5BF9%u9F50%u65B9%u5F0F%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Eleft%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ecenter%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etheme%3C/td%3E%0A%3Ctd%3E%u6837%u5F0F%u98CE%u683C%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Eround-button%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edefault%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EzIndex%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E100%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EclassName%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u7C7B%u540D%uFF0Cdialog%20%u5728%u81EA%u5B9A%u4E49%u7EC4%u4EF6%u5185%u65F6%u65E0%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%27%27%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EcustomStyle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%27%27%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eselector%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u9009%u62E9%u5668%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evan-dialog%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EshowConfirmButton%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u786E%u8BA4%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EshowCancelButton%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u53D6%u6D88%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EconfirmButtonText%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u7684%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u786E%u8BA4%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EcancelButtonText%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u7684%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u53D6%u6D88%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EoverlayStyle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u906E%u7F69%u5C42%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EcloseOnClickOverlay%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u906E%u7F69%u5C42%u65F6%u662F%u5426%u5173%u95ED%u5F39%u7A97%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EasyncClose%3C/td%3E%0A%3Ctd%3E%u5DF2%u5E9F%u5F03%uFF0C%u5C06%u5728%202.0.0%20%u79FB%u9664%uFF0C%u8BF7%u4F7F%u7528%20%3Ccode%3EbeforeClose%3C/code%3E%20%u5C5E%u6027%u4EE3%u66FF%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EbeforeClose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u524D%u7684%u56DE%u8C03%u51FD%u6570%uFF0C%u8FD4%u56DE%20%3Ccode%3Efalse%3C/code%3E%20%u53EF%u963B%u6B62%u5173%u95ED%uFF0C%u652F%u6301%u8FD4%u56DE%20Promise%3C/td%3E%0A%3Ctd%3E%3Cem%3E%28action%29%20%3D%26gt%3B%20boolean%20%7C%20Promise%3Cboolean%3E%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtext%3C/td%3E%0A%3Ctd%3E%u9009%u62E9%u5668%u7684%u9009%u62E9%u8303%u56F4%uFF0C%u53EF%u4EE5%u4F20%u5165%u81EA%u5B9A%u4E49%u7EC4%u4EF6%u7684%20this%20%u4F5C%u4E3A%u4E0A%u4E0B%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9875%u9762%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etransition%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u540D%u79F0%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Efade%3C/code%3E%20%3Ccode%3Enone%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Escale%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EconfirmButtonOpenType%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u7684%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%uFF0C%u5177%u4F53%u652F%u6301%u53EF%u53C2%u8003%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/button.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5B98%u65B9%u6587%u6863%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22opentype-options%22%3EOpenType%20Options%3C/h3%3E%0A%3Cp%3E%u4F7F%u7528%3Ccode%3EconfirmButtonOpenType%3C/code%3E%u540E%uFF0C%u652F%u6301%u4EE5%u4E0B%u9009%u9879%uFF1A%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3Cth%3Eopen-type%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3EappParameter%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%20APP%20%u65F6%uFF0C%u5411%20APP%20%u4F20%u9012%u7684%u53C2%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3ElaunchApp%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elang%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%u8FD4%u56DE%u7528%u6237%u4FE1%u606F%u7684%u8BED%u8A00%uFF0Czh_CN%20%u7B80%u4F53%u4E2D%u6587%uFF0C%3Cbr%3Ezh_TW%20%u7E41%u4F53%u4E2D%u6587%uFF0Cen%20%u82F1%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Een%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EgetUserInfo%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsessionFrom%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u6765%u6E90%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EbusinessId%3C/td%3E%0A%3Ctd%3E%u5BA2%u670D%u6D88%u606F%u5B50%u5546%u6237%20id%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsendMessageTitle%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsendMessagePath%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u70B9%u51FB%u8DF3%u8F6C%u5C0F%u7A0B%u5E8F%u8DEF%u5F84%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u4EAB%u8DEF%u5F84%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsendMessageImg%3C/td%3E%0A%3Ctd%3EsendMessageImg%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u622A%u56FE%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EshowMessageCard%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u7EC4%u4EF6%u8C03%u7528%20Dialog%20%u65F6%uFF0C%u652F%u6301%u4EE5%u4E0B%20Props%3A%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5F39%u7A97%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ewidth%3C/td%3E%0A%3Ctd%3E%u5F39%u7A97%u5BBD%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E320px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emessage%3C/td%3E%0A%3Ctd%3E%u6587%u672C%u5185%u5BB9%uFF0C%u652F%u6301%u901A%u8FC7%3Ccode%3E%5Cn%3C/code%3E%u6362%u884C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etheme%3C/td%3E%0A%3Ctd%3E%u6837%u5F0F%u98CE%u683C%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Eround-button%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edefault%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emessage-align%3C/td%3E%0A%3Ctd%3E%u5185%u5BB9%u5BF9%u9F50%u65B9%u5F0F%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Eleft%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ecenter%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E100%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclass-name%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u7C7B%u540D%uFF0Cdialog%20%u5728%u81EA%u5B9A%u4E49%u7EC4%u4EF6%u5185%u65F6%u65E0%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%27%27%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%27%27%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-confirm-button%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u786E%u8BA4%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-cancel-button%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u53D6%u6D88%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-button-text%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u7684%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u786E%u8BA4%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-button-text%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u7684%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u53D6%u6D88%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-button-color%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u7684%u5B57%u4F53%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23ee0a24%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-button-color%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u7684%u5B57%u4F53%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23333%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay-style%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u906E%u7F69%u5C42%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-overlay%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u906E%u7F69%u5C42%u65F6%u662F%u5426%u5173%u95ED%u5F39%u7A97%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u81EA%u5B9A%u4E49%u5185%u5BB9%u7684%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-title-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u81EA%u5B9A%u4E49%u6807%u9898%u7684%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Easync-close%3C/td%3E%0A%3Ctd%3E%u5DF2%u5E9F%u5F03%uFF0C%u5C06%u5728%202.0.0%20%u79FB%u9664%uFF0C%u8BF7%u4F7F%u7528%20%3Ccode%3EbeforeClose%3C/code%3E%20%u5C5E%u6027%u4EE3%u66FF%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebefore-close%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u524D%u7684%u56DE%u8C03%u51FD%u6570%uFF0C%u8FD4%u56DE%20%3Ccode%3Efalse%3C/code%3E%20%u53EF%u963B%u6B62%u5173%u95ED%uFF0C%u652F%u6301%u8FD4%u56DE%20Promise%3C/td%3E%0A%3Ctd%3E%3Cem%3E%28action%29%20%3D%26gt%3B%20boolean%20%7C%20Promise%3Cboolean%3E%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etransition%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u540D%u79F0%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Efade%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Escale%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-button-open-type%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u7684%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%uFF0C%u5177%u4F53%u652F%u6301%u53EF%u53C2%u8003%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/button.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5B98%u65B9%u6587%u6863%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22opentype-props%22%3EOpenType%20Props%3C/h3%3E%0A%3Cp%3E%u4F7F%u7528%3Ccode%3Econfirm-button-open-type%3C/code%3E%u540E%uFF0C%u652F%u6301%u4EE5%u4E0B%20Props%uFF1A%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3Cth%3Eopen-type%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eapp-parameter%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%20APP%20%u65F6%uFF0C%u5411%20APP%20%u4F20%u9012%u7684%u53C2%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3ElaunchApp%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elang%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%u8FD4%u56DE%u7528%u6237%u4FE1%u606F%u7684%u8BED%u8A00%uFF0Czh_CN%20%u7B80%u4F53%u4E2D%u6587%uFF0C%3Cbr%3Ezh_TW%20%u7E41%u4F53%u4E2D%u6587%uFF0Cen%20%u82F1%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Een%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EgetUserInfo%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esession-from%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u6765%u6E90%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebusiness-id%3C/td%3E%0A%3Ctd%3E%u5BA2%u670D%u6D88%u606F%u5B50%u5546%u6237%20id%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-title%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-path%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u70B9%u51FB%u8DF3%u8F6C%u5C0F%u7A0B%u5E8F%u8DEF%u5F84%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u4EAB%u8DEF%u5F84%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-img%3C/td%3E%0A%3Ctd%3EsendMessageImg%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u622A%u56FE%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-message-card%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Econtact%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclose%3C/td%3E%0A%3Ctd%3E%u5F39%u7A97%u5173%u95ED%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u89E6%u53D1%u5173%u95ED%u4E8B%u4EF6%u7684%u6765%u6E90%uFF0C%3Cbr%3E%u679A%u4E3E%u4E3A%3Ccode%3Econfirm%3C/code%3E%2C%3Ccode%3Ecancel%3C/code%3E%2C%3Ccode%3Eoverlay%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aconfirm%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u786E%u8BA4%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Acancel%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u53D6%u6D88%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Agetuserinfo%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u786E%u8BA4%u6309%u94AE%u65F6%uFF0C%u4F1A%u8FD4%u56DE%u83B7%u53D6%u5230%u7684%u7528%u6237%u4FE1%u606F%uFF0C%3Cbr%3E%u4ECE%u8FD4%u56DE%u53C2%u6570%u7684%20detail%20%u4E2D%u83B7%u53D6%u5230%u7684%u503C%u540C%20wx.getUserInfo%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Acontact%3C/td%3E%0A%3Ctd%3E%u5BA2%u670D%u6D88%u606F%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Agetphonenumber%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u7528%u6237%u624B%u673A%u53F7%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aerror%3C/td%3E%0A%3Ctd%3E%u5F53%u4F7F%u7528%u5F00%u653E%u80FD%u529B%u65F6%uFF0C%u53D1%u751F%u9519%u8BEF%u7684%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aopensetting%3C/td%3E%0A%3Ctd%3E%u5728%u6253%u5F00%u6388%u6743%u8BBE%u7F6E%u9875%u540E%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%3Ccode%3Etitle%3C/code%3E%u663E%u793A%u5185%u5BB9%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Etitle%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},183:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EDivider%20%u5206%u5272%u7EBF%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5C06%u5185%u5BB9%u5206%u9694%u4E3A%u591A%u4E2A%u533A%u57DF%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3EES6%3C/code%3E%u7248%u672C%uFF0C%3Ccode%3EES5%3C/code%3E%u5F15%u5165%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-divider%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/divider/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-yong-hairline%22%3E%u4F7F%u7528%20hairline%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ehairline%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xu-xian%22%3E%u865A%u7EBF%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edashed%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wen-ben-wei-zhi%22%3E%u6587%u672C%u4F4D%u7F6E%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EcontentPosition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcenter%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6587%u672C%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EcontentPosition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bleft%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6587%u672C%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EcontentPosition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6587%u672C%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-shu-xing%22%3E%u81EA%u5B9A%u4E49%u5C5E%u6027%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EcontentPosition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcenter%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EtextColor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%231989fa%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6587%u672C%u989C%u8272%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EcontentPosition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcenter%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EborderColor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%231989fa%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20border%20%u989C%u8272%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EcontentPosition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcenter%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3EfontSize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B18%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u5B57%u4F53%u5927%u5C0F%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yang-shi%22%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcontentPosition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcenter%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcustomStyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcolor%3A%20%231989fa%3B%20border-color%3A%20%231989fa%3B%20font-size%3A%2018px%3B%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%u6587%u672C%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-divider%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Edashed%3C/td%3E%0A%3Ctd%3E%u865A%u7EBF%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3Efalse%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ehairline%3C/td%3E%0A%3Ctd%3E%u7EC6%u7EBF%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3Efalse%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtent-position%3C/td%3E%0A%3Ctd%3E%u6587%u672C%u4F4D%u7F6E%uFF0C%3Ccode%3Eleft%3C/code%3E%20%3Ccode%3Ecenter%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E%u9ED8%u8BA4%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6587%u672C%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},8754:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EDropdownMenu%20%u4E0B%u62C9%u83DC%u5355%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u5411%u4E0B%u5F39%u51FA%u7684%u83DC%u5355%u5217%u8868%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3EES6%3C/code%3E%u7248%u672C%uFF0C%3Ccode%3EES5%3C/code%3E%u5F15%u5165%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-dropdown-menu%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/dropdown-menu/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-dropdown-item%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/dropdown-item/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value1%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option1%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value2%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option2%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoption1%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5168%u90E8%u5546%u54C1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u65B0%u6B3E%u5546%u54C1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6D3B%u52A8%u5546%u54C1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoption2%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u9ED8%u8BA4%u6392%u5E8F%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Ba%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u597D%u8BC4%u6392%u5E8F%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bb%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u9500%u91CF%u6392%u5E8F%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bc%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue1%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue2%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Ba%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-cai-dan-nei-rong%22%3E%u81EA%u5B9A%u4E49%u83DC%u5355%u5185%u5BB9%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value1%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option1%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bitem%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20itemTitle%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20switchTitle1%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright-icon%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B24px%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%2026px%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20switch1%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ee0a24%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSwitch1Change%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20switchTitle2%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright-icon%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B24px%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%2026px%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20switch2%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ee0a24%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSwitch2Change%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bpadding%3A%205px%2016px%3B%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eblock%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonConfirm%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%u786E%u8BA4%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EswitchTitle1%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5305%u90AE%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EswitchTitle2%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u56E2%u8D2D%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EitemTitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u7B5B%u9009%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoption1%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5168%u90E8%u5546%u54C1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u65B0%u6B3E%u5546%u54C1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6D3B%u52A8%u5546%u54C1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue1%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonConfirm%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.selectComponent%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23item%26%23x27%3B%3C/span%3E%29.toggle%28%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonSwitch1Change%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eswitch1%3C/span%3E%3A%20detail%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonSwitch2Change%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eswitch2%3C/span%3E%3A%20detail%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-xuan-zhong-zhuang-tai-yan-se%22%3E%u81EA%u5B9A%u4E49%u9009%u4E2D%u72B6%u6001%u989C%u8272%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%231989fa%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value1%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option1%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value2%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option2%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xiang-shang-zhan-kai%22%3E%u5411%u4E0A%u5C55%u5F00%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edirection%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bup%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value1%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option1%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value2%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option2%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-cai-dan%22%3E%u7981%u7528%u83DC%u5355%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value1%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option1%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value2%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20option2%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-dropdown-menu%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dropdownmenu-props%22%3EDropdownMenu%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-color%3C/td%3E%0A%3Ctd%3E%u83DC%u5355%u6807%u9898%u548C%u9009%u9879%u7684%u9009%u4E2D%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23ee0a24%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3E%u83DC%u5355%u680F%20z-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E10%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u65F6%u957F%uFF0C%u5355%u4F4D%u6BEB%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E200%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edirection%3C/td%3E%0A%3Ctd%3E%u83DC%u5355%u5C55%u5F00%u65B9%u5411%uFF0C%u53EF%u9009%u503C%u4E3A%20up%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edown%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-overlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u70B9%u51FB%u906E%u7F69%u5C42%u540E%u5173%u95ED%u83DC%u5355%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-outside%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u70B9%u51FB%u5916%u90E8%20menu%20%u540E%u5173%u95ED%u83DC%u5355%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dropdownitem-props%22%3EDropdownItem%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u9879%u5BF9%u5E94%u7684%20value%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20string%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u83DC%u5355%u9879%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u9879%u6587%u5B57%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoptions%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u6570%u7EC4%3C/td%3E%0A%3Ctd%3E%3Cem%3EOption%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u83DC%u5355%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-class%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u989D%u5916%u7C7B%u540D%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epopup-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5F39%u51FA%u5C42%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dropdownitem-events%22%3EDropdownItem%20Events%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Echange%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u9009%u9879%u5BFC%u81F4%20value%20%u53D8%u5316%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u83DC%u5355%u680F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u83DC%u5355%u680F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopened%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u83DC%u5355%u680F%u4E14%u52A8%u753B%u7ED3%u675F%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclosed%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u83DC%u5355%u680F%u4E14%u52A8%u753B%u7ED3%u675F%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dropdownitem-fang-fa%22%3EDropdownItem%20%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%28id%29%20%u53EF%u8BBF%u95EE%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etoggle%3C/td%3E%0A%3Ctd%3E%u5207%u6362%u83DC%u5355%u5C55%u793A%u72B6%u6001%uFF0C%u4F20%3Ccode%3Etrue%3C/code%3E%u4E3A%u663E%u793A%uFF0C%3Ccode%3Efalse%3C/code%3E%u4E3A%u9690%u85CF%uFF0C%u4E0D%u4F20%u53C2%u4E3A%u53D6%u53CD%3C/td%3E%0A%3Ctd%3Eshow%3F%3A%20boolean%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22option-shu-ju-jie-gou%22%3EOption%20%u6570%u636E%u7ED3%u6784%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u952E%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20string%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3E%u56FE%u6807%u540D%u79F0%3C/a%3E%u6216%u56FE%u7247%u94FE%u63A5%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},4570:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EEmpty%20%u7A7A%u72B6%u6001%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7A7A%u72B6%u6001%u65F6%u7684%u5360%u4F4D%u63D0%u793A%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3EES6%3C/code%3E%u7248%u672C%uFF0C%3Ccode%3EES5%3C/code%3E%u5F15%u5165%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-empty%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/empty/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-empty%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-pian-lei-xing%22%3E%u56FE%u7247%u7C7B%u578B%3C/h3%3E%0A%3Cp%3EEmpty%20%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u901A%u7528%u9519%u8BEF%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-empty%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eimage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Berror%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u7F51%u7EDC%u9519%u8BEF%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-empty%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eimage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bnetwork%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u641C%u7D22%u63D0%u793A%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-empty%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eimage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-pian%22%3E%u81EA%u5B9A%u4E49%u56FE%u7247%3C/h3%3E%0A%3Cp%3E%u9700%u8981%u81EA%u5B9A%u4E49%u56FE%u7247%u65F6%uFF0C%u53EF%u4EE5%u5728%20image%20%u5C5E%u6027%u4E2D%u4F20%u5165%u4EFB%u610F%u56FE%u7247%20URL%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-empty%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcustom-image%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eimage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/custom-empty-image.png%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u6587%u5B57%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22di-bu-nei-rong%22%3E%u5E95%u90E8%u5185%u5BB9%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u9ED8%u8BA4%u63D2%u69FD%u53EF%u4EE5%u5728%20Empty%20%u7EC4%u4EF6%u7684%u4E0B%u65B9%u63D2%u5165%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-empty%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u6587%u5B57%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bbottom-button%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u6309%u94AE%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-empty%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Estyle%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22css%22%3E%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.bottom-button%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ewidth%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E160px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Eheight%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E40px%3C/span%3E%3B%0A%7D%0A%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Estyle%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eimage%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eerror%3C/code%3E%20%3Ccode%3Enetwork%3C/code%3E%20%3Ccode%3Esearch%3C/code%3E%uFF0C%u652F%u6301%u4F20%u5165%u56FE%u7247%20URL%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edefault%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edescription%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u4E0B%u65B9%u7684%u63CF%u8FF0%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5E95%u90E8%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eimage%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edescription%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u63CF%u8FF0%u6587%u5B57%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},4850:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EField%20%u8F93%u5165%u6846%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u6237%u53EF%u4EE5%u5728%u6587%u672C%u6846%u5185%u8F93%u5165%u6216%u7F16%u8F91%u6587%u5B57%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-field%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/field/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20event.detail%20%u4E3A%u5F53%u524D%u8F93%u5165%u7684%u503C%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28event.detail%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shuang-xiang-bang-ding%22%3E%u53CC%u5411%u7ED1%u5B9A%3C/h3%3E%0A%3Cp%3E%u6700%u4F4E%u57FA%u7840%u5E93%u7248%u672C%u5728%202.9.3%20%u4EE5%u4E0A%u65F6%uFF0C%u53EF%u4EE5%u4F7F%u7528%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html%22%20target%3D%22_blank%22%3E%u7B80%u6613%u53CC%u5411%u7ED1%u5B9A%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emodel%3Avalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-lei-xing%22%3E%u81EA%u5B9A%u4E49%u7C7B%u578B%3C/h3%3E%0A%3Cp%3E%u6839%u636E%3Ccode%3Etype%3C/code%3E%u5C5E%u6027%u5B9A%u4E49%u4E0D%u540C%u7C7B%u578B%u7684%u8F93%u5165%u6846%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20username%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Erequired%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclearable%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bquestion-o%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickIcon%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20password%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bpassword%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5BC6%u7801%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u5BC6%u7801%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Erequired%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-shu-ru-kuang%22%3E%u7981%u7528%u8F93%u5165%u6846%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8F93%u5165%u6846%u5DF2%u7981%u7528%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcontact%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cuo-wu-ti-shi%22%3E%u9519%u8BEF%u63D0%u793A%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eerror%3C/code%3E%u6216%u8005%3Ccode%3Eerror-message%3C/code%3E%u5C5E%u6027%u589E%u52A0%u5BF9%u5E94%u7684%u9519%u8BEF%u63D0%u793A%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20username%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eerror%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20phone%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u624B%u673A%u53F7%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u624B%u673A%u53F7%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eerror-message%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u624B%u673A%u53F7%u683C%u5F0F%u9519%u8BEF%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22nei-rong-dui-qi-fang-shi%22%3E%u5185%u5BB9%u5BF9%u9F50%u65B9%u5F0F%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Einput-align%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u5185%u5BB9%u7684%u5BF9%u9F50%u65B9%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20username3%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u7528%u6237%u540D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Einput-align%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gao-du-zi-gua-ying%22%3E%u9AD8%u5EA6%u81EA%u9002%u5E94%3C/h3%3E%0A%3Cp%3E%u5BF9%u4E8E%20textarea%uFF0C%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Eautosize%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u9AD8%u5EA6%u81EA%u9002%u5E94%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20message%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7559%u8A00%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btextarea%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u7559%u8A00%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eautosize%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cha-ru-an-niu%22%3E%u63D2%u5165%u6309%u94AE%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20button%20slot%20%u53EF%u4EE5%u5728%u8F93%u5165%u6846%u5C3E%u90E8%u63D2%u5165%u6309%u94AE%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20sms%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecenter%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclearable%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u77ED%u4FE1%u9A8C%u8BC1%u7801%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u77ED%u4FE1%u9A8C%u8BC1%u7801%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-button-slot%3C/span%3E%0A%20%20%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bbutton%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsmall%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%u53D1%u9001%u9A8C%u8BC1%u7801%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-field%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22chang-jian-wen-ti%22%3E%u5E38%u89C1%u95EE%u9898%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhen-ji-shang-wei-shi-me-hui-chu-xian-ju-jiao-shi-placeholder-jia-cu-shan-shuo-de-xian-xiang%22%3E%u771F%u673A%u4E0A%u4E3A%u4EC0%u4E48%u4F1A%u51FA%u73B0%u805A%u7126%u65F6%20placeholder%20%u52A0%u7C97%u3001%u95EA%u70C1%u7684%u73B0%u8C61%uFF1F%3C/h3%3E%0A%3Cp%3E%u7531%u4E8E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u7684%20input%20%u7EC4%u4EF6%u548C%20textarea%20%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%3C/p%3E%0A%3Cp%3E%u76F8%u5173%u7684%u8BA8%u8BBA%u53EF%u4EE5%u67E5%u770B%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/community/search%3Fquery%3Dplaceholder%2520%25E9%2597%25AA%25E7%2583%2581%2520%25E5%258A%25A0%25E7%25B2%2597%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5F00%u653E%u793E%u533A%3C/a%3E%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhen-ji-shang-placeholder-wei-shi-me-hui-gai-guo-popup-deng-qi-ta-zu-jian%22%3E%u771F%u673A%u4E0A%20placeholder%20%u4E3A%u4EC0%u4E48%u4F1A%u76D6%u8FC7%20popup%20%u7B49%u5176%u5B83%u7EC4%u4EF6%uFF1F%3C/h3%3E%0A%3Cp%3E%u7531%u4E8E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u7684%20input%20%u7EC4%u4EF6%u548C%20textarea%20%u7EC4%u4EF6%u662F%u539F%u751F%u7EC4%u4EF6%uFF0C%u9075%u5FAA%u539F%u751F%u7EC4%u4EF6%u7684%u9650%u5236%uFF0C%u8BE6%u60C5%u53EF%u4EE5%u67E5%u770B%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/native-component.html%22%20target%3D%22_blank%22%3E%u539F%u751F%u7EC4%u4EF6%u8BF4%u660E%3C/a%3E%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22textarea-de-placeholder-zai-zhen-ji-shang-wei-shi-me-hui-pian-yi%22%3Etextarea%20%u7684%20placeholder%20%u5728%u771F%u673A%u4E0A%u4E3A%u4EC0%u4E48%u4F1A%u504F%u79FB%uFF1F%3C/h3%3E%0A%3Cp%3E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u7684%20textarea%20%u7EC4%u4EF6%u5728%20Android%20%u548C%20iOS%20%u4E2D%u9ED8%u8BA4%u6837%u5F0F%u4E0D%u540C%uFF0C%u5728%20iOS%20%u4E2D%u4F1A%u6709%u9ED8%u8BA4%u7684%20%3Ccode%3Epadding%3C/code%3E%uFF0C%u4E14%u65E0%u6CD5%u7F6E%200%u3002%3C/p%3E%0A%3Cp%3E%u540C%u65F6%20%3Ccode%3Eplaceholder-style%3C/code%3E%20%u5BF9%20%3Ccode%3Evertical-align%3C/code%3E%u3001%3Ccode%3Eline-height%3C/code%3E%20%u7B49%u5927%u91CF%20css%20%u5C5E%u6027%u90FD%u4E0D%u751F%u6548%u3002%3C/p%3E%0A%3Cp%3E%u8FD9%u4E00%u7CFB%u5217%u7684%u95EE%u9898%u5BFC%u81F4%u4E86%20placeholder%20%u5728%u771F%u673A%u4E0A%u53EF%u80FD%u4F1A%u51FA%u73B0%u504F%u79FB%u3002%3C/p%3E%0A%3Cp%3E%u5FAE%u4FE1%u5DF2%u7ECF%u5728%20%3Ccode%3E2.10.0%3C/code%3E%20%u57FA%u7840%u5E93%u7248%u672C%u540E%u652F%u6301%u79FB%u9664%u9ED8%u8BA4%u7684%20%3Ccode%3Epadding%3C/code%3E%uFF0C%u4F46%u4F4E%u7248%u672C%u4ECD%u6709%u95EE%u9898%u3002%u8BE6%u60C5%u53EF%u4EE5%u67E5%u770B%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/community/develop/issue/96%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5F00%u653E%u793E%u533A%3C/a%3E%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shou-xie-shu-ru-fa-wei-shi-me-hui-diu-shi-bu-fen-zi-fu-shou-xie-shu-ru-fa-wei-shi-me-bu-hui-chu-fa-input-shi-jian%22%3E%u624B%u5199%u8F93%u5165%u6CD5%u4E3A%u4EC0%u4E48%u4F1A%u4E22%u5931%u90E8%u5206%u5B57%u7B26%20/%20%u624B%u5199%u8F93%u5165%u6CD5%u4E3A%u4EC0%u4E48%u4E0D%u4F1A%u89E6%u53D1%20input%20%u4E8B%u4EF6%uFF1F%3C/h3%3E%0A%3Cp%3E%u8FD9%u662F%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u7684%20input%20%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%20%3Ccode%3Eblur%3C/code%3E%20%u4E8B%u4EF6%u4E2D%u53D6%u5230%u8F93%u5165%u7684%u503C%u3002%3C/p%3E%0A%3Cp%3E%u76F8%u5173%u7684%u8BA8%u8BBA%u53EF%u4EE5%u67E5%u770B%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/community/search%3Fquery%3Dinput%2520%25E6%2589%258B%25E5%2586%2599%25E8%25BE%2593%25E5%2585%25A5%26amp%3Bpage%3D1%26amp%3Bblock%3D1%26amp%3Brandom%3D1567079239098%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5F00%u653E%u793E%u533A%3C/a%3E%u3002%3C/p%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5728%u8868%u5355%u5185%u63D0%u4EA4%u65F6%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5DE6%u4FA7%u6587%u672C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u5355%u5143%u683C%u5927%u5C0F%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Elarge%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u8F93%u5165%u7684%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u53EF%u8BBE%u7F6E%u4E3A%u4EFB%u610F%u539F%u751F%u7C7B%u578B%2C%20%u5982%20%3Ccode%3Enumber%3C/code%3E%20%3Ccode%3Eidcard%3C/code%3E%20%3Ccode%3Etextarea%3C/code%3E%20%3Ccode%3Edigit%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etext%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efixed%3C/td%3E%0A%3Ctd%3E%u5982%u679C%20type%20%u4E3A%20%3Ccode%3Etextarea%3C/code%3E%20%u4E14%u5728%u4E00%u4E2A%20%3Ccode%3Eposition%3Afixed%3C/code%3E%20%u7684%u533A%u57DF%uFF0C%u9700%u8981%u663E%u793A%u6307%u5B9A%u5C5E%u6027%20fixed%20%u4E3A%20true%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efocus%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u7126%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5185%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u8F93%u5165%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ereadonly%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u53EA%u8BFB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclearable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u542F%u7528%u6E05%u9664%u63A7%u4EF6%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclickable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u70B9%u51FB%u53CD%u9988%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Erequired%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u8868%u5355%u5FC5%u586B%u661F%u53F7%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecenter%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u5185%u5BB9%u5782%u76F4%u5C45%u4E2D%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epassword%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u662F%u5BC6%u7801%u7C7B%u578B%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-width%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u5BBD%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E6.2em%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emaxlength%3C/td%3E%0A%3Ctd%3E%u6700%u5927%u8F93%u5165%u957F%u5EA6%uFF0C%u8BBE%u7F6E%u4E3A%20-1%20%u7684%u65F6%u5019%u4E0D%u9650%u5236%u6700%u5927%u957F%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E-1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplaceholder%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u4E3A%u7A7A%u65F6%u5360%u4F4D%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplaceholder-style%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%20placeholder%20%u7684%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eis-link%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u53F3%u4FA7%u7BAD%u5934%u5E76%u5F00%u542F%u70B9%u51FB%u53CD%u9988%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Earrow-direction%3C/td%3E%0A%3Ctd%3E%u7BAD%u5934%u65B9%u5411%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eleft%3C/code%3E%20%3Ccode%3Eup%3C/code%3E%20%3Ccode%3Edown%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-word-limit%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5B57%u6570%u7EDF%u8BA1%uFF0C%u9700%u8981%u8BBE%u7F6E%3Ccode%3Emaxlength%3C/code%3E%u5C5E%u6027%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eerror%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C06%u8F93%u5165%u5185%u5BB9%u6807%u7EA2%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eerror-message%3C/td%3E%0A%3Ctd%3E%u5E95%u90E8%u9519%u8BEF%u63D0%u793A%u6587%u6848%uFF0C%u4E3A%u7A7A%u65F6%u4E0D%u5C55%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eerror-message-align%3C/td%3E%0A%3Ctd%3E%u5E95%u90E8%u9519%u8BEF%u63D0%u793A%u6587%u6848%u5BF9%u9F50%u65B9%u5F0F%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ecenter%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einput-align%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5185%u5BB9%u5BF9%u9F50%u65B9%u5F0F%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ecenter%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eleft%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eautosize%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u81EA%u9002%u5E94%u5185%u5BB9%u9AD8%u5EA6%uFF0C%u53EA%u5BF9%20textarea%20%u6709%u6548%uFF0C%3Cbr%3E%u53EF%u4F20%u5165%u5BF9%u8C61%2C%u5982%20%7B%20maxHeight%3A%20100%2C%20minHeight%3A%2050%20%7D%uFF0C%3Cbr%3E%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%20%7C%20object%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-icon%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-type%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u952E%u76D8%u53F3%u4E0B%u89D2%u6309%u94AE%u7684%u6587%u5B57%uFF0C%u4EC5%u5728%20type%3D%27text%27%20%u65F6%u751F%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edone%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-hold%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u952E%u76D8%u53F3%u4E0B%u89D2%u6309%u94AE%u65F6%u662F%u5426%u4FDD%u6301%u952E%u76D8%u4E0D%u6536%u8D77%uFF0C%u5728%20type%3D%27textarea%27%20%u65F6%u65E0%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ehold-keyboard%3C/td%3E%0A%3Ctd%3Efocus%20%u65F6%uFF0C%u70B9%u51FB%u9875%u9762%u7684%u65F6%u5019%u4E0D%u6536%u8D77%u952E%u76D8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecursor-spacing%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u805A%u7126%u65F6%u5E95%u90E8%u4E0E%u952E%u76D8%u7684%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E50%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eadjust-position%3C/td%3E%0A%3Ctd%3E%u952E%u76D8%u5F39%u8D77%u65F6%uFF0C%u662F%u5426%u81EA%u52A8%u4E0A%u63A8%u9875%u9762%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-confirm-bar%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u952E%u76D8%u4E0A%u65B9%u5E26%u6709%u201D%u5B8C%u6210%u201C%u6309%u94AE%u90A3%u4E00%u680F%uFF0C%u53EA%u5BF9%20textarea%20%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eselection-start%3C/td%3E%0A%3Ctd%3E%u5149%u6807%u8D77%u59CB%u4F4D%u7F6E%uFF0C%u81EA%u52A8%u805A%u96C6%u65F6%u6709%u6548%uFF0C%u9700%u4E0E%20selection-end%20%u642D%u914D%u4F7F%u7528%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E-1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eselection-end%3C/td%3E%0A%3Ctd%3E%u5149%u6807%u7ED3%u675F%u4F4D%u7F6E%uFF0C%u81EA%u52A8%u805A%u96C6%u65F6%u6709%u6548%uFF0C%u9700%u4E0E%20selection-start%20%u642D%u914D%u4F7F%u7528%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E-1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eauto-focus%3C/td%3E%0A%3Ctd%3E%u81EA%u52A8%u805A%u7126%uFF0C%u62C9%u8D77%u952E%u76D8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisable-default-padding%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u53BB%u6389%20iOS%20%u4E0B%u7684%u9ED8%u8BA4%u5185%u8FB9%u8DDD%uFF0C%u53EA%u5BF9%20textarea%20%u6709%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecursor%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%20focus%20%u65F6%u7684%u5149%u6807%u4F4D%u7F6E%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E-1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclear-trigger%20%3Ccode%3Ev1.8.4%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u6E05%u9664%u56FE%u6807%u7684%u65F6%u673A%uFF0C%3Ccode%3Ealways%3C/code%3E%20%u8868%u793A%u8F93%u5165%u6846%u4E0D%u4E3A%u7A7A%u65F6%u5C55%u793A%uFF0C%3Cbr%3E%3Ccode%3Efocus%3C/code%3E%20%u8868%u793A%u8F93%u5165%u6846%u805A%u7126%u4E14%u4E0D%u4E3A%u7A7A%u65F6%u5C55%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efocus%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Ainput%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u5185%u5BB9%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u8F93%u5165%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u5185%u5BB9%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u8F93%u5165%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aconfirm%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5B8C%u6210%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u8F93%u5165%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-icon%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5C3E%u90E8%u56FE%u6807%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Afocus%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u805A%u7126%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail.value%3A%20%u5F53%u524D%u8F93%u5165%u503C%3B%20%3Cbr%3Eevent.detail.height%3A%20%u952E%u76D8%u9AD8%u5EA6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Ablur%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5931%u7126%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail.value%3A%20%u5F53%u524D%u8F93%u5165%u503C%3B%20%3Cbr%3Eevent.detail.cursor%3A%20%u6E38%u6807%u4F4D%u7F6E%28%u5982%u679C%20%3Ccode%3Etype%3C/code%3E%20%u4E0D%u4E3A%20%3Ccode%3Etextarea%3C/code%3E%uFF0C%u503C%u4E3A%20%3Ccode%3E0%3C/code%3E%29%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclear%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u6E05%u7A7A%u63A7%u4EF6%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-input%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u8F93%u5165%u533A%u57DF%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Alinechange%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u884C%u6570%u53D8%u5316%u65F6%u8C03%u7528%uFF0C%u53EA%u5BF9%20textarea%20%u6709%u6548%3C/td%3E%0A%3Ctd%3Eevent.detail%20%3D%20%7B%20height%3A%200%2C%20heightRpx%3A%200%2C%20lineCount%3A%200%20%7D%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Akeyboardheightchange%3C/td%3E%0A%3Ctd%3E%u952E%u76D8%u9AD8%u5EA6%u53D1%u751F%u53D8%u5316%u7684%u65F6%u5019%u89E6%u53D1%u6B64%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3Eevent.detail%20%3D%20%7B%20height%3A%20height%2C%20duration%3A%20duration%20%7D%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8F93%u5165%u6846%u6807%u7B7E%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Elabel%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8F93%u5165%u6846%u5934%u90E8%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8F93%u5165%u6846%u5C3E%u90E8%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebutton%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8F93%u5165%u6846%u5C3E%u90E8%u6309%u94AE%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einput%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-class%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u6587%u672C%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einput-class%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon-class%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u56FE%u6807%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},1472:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EGoodsAction%20%u5546%u54C1%u5BFC%u822A%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u4E3A%u5546%u54C1%u76F8%u5173%u64CD%u4F5C%u63D0%u4F9B%u4FBF%u6377%u4EA4%u4E92%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-goods-action%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/goods-action/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-goods-action-icon%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/goods-action-icon/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-goods-action-button%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/goods-action-button/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5BA2%u670D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickIcon%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcart-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8D2D%u7269%u8F66%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickIcon%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u52A0%u5165%u8D2D%u7269%u8F66%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickButton%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7ACB%u5373%u8D2D%u4E70%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickButton%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickIcon%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u70B9%u51FB%u56FE%u6807%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickButton%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u70B9%u51FB%u6309%u94AE%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ti-shi-xin-xi%22%3E%u63D0%u793A%u4FE1%u606F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Edot%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u56FE%u6807%u53F3%u4E0A%u89D2%u5C55%u793A%u4E00%u4E2A%u5C0F%u7EA2%u70B9%u3002%u8BBE%u7F6E%3Ccode%3Einfo%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u56FE%u6807%u53F3%u4E0A%u89D2%u5C55%u793A%u76F8%u5E94%u7684%u5FBD%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5BA2%u670D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edot%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcart-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8D2D%u7269%u8F66%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B5%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bshop-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5E97%u94FA%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u52A0%u5165%u8D2D%u7269%u8F66%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7ACB%u5373%u8D2D%u4E70%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-an-niu-yan-se%22%3E%u81EA%u5B9A%u4E49%u6309%u94AE%u989C%u8272%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Ecolor%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%u6309%u94AE%u7684%u989C%u8272%uFF0C%u652F%u6301%u4F20%u5165%3Ccode%3Elinear-gradient%3C/code%3E%u6E10%u53D8%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5BA2%u670D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcart-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8D2D%u7269%u8F66%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B5%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bshop-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5E97%u94FA%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23be99ff%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u52A0%u5165%u8D2D%u7269%u8F66%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7ACB%u5373%u8D2D%u4E70%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22po-su-an-niu%22%3E%u6734%u7D20%u6309%u94AE%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eplain%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5BA2%u670D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcart-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8D2D%u7269%u8F66%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B5%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bshop-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5E97%u94FA%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u52A0%u5165%u8D2D%u7269%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7ACB%u5373%u8D2D%u4E70%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-goods-action%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22goodsaction-props%22%3EGoodsAction%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-bottom%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%20iPhoneX%20%u7559%u51FA%u5E95%u90E8%u5B89%u5168%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22goodsactionicon-props%22%3EGoodsActionIcon%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u89C1%3Ccode%3Eicon%3C/code%3E%u7EC4%u4EF6%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einfo%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u53F3%u4E0A%u89D2%u63D0%u793A%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eurl%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u540E%u8DF3%u8F6C%u7684%u94FE%u63A5%u5730%u5740%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elink-type%3C/td%3E%0A%3Ctd%3E%u94FE%u63A5%u8DF3%u8F6C%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3EredirectTo%3C/code%3E%20%3Ccode%3EswitchTab%3C/code%3E%20%3Ccode%3EreLaunch%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EnavigateTo%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eid%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u4E3A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen-type%3C/td%3E%0A%3Ctd%3E%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%uFF0C%u5177%u4F53%u652F%u6301%u53EF%u53C2%u8003%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/button.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5B98%u65B9%u6587%u6863%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eapp-parameter%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%20APP%20%u65F6%uFF0C%u5411%20APP%20%u4F20%u9012%u7684%u53C2%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elang%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%u8FD4%u56DE%u7528%u6237%u4FE1%u606F%u7684%u8BED%u8A00%uFF0Czh_CN%20%u7B80%u4F53%u4E2D%u6587%uFF0C%3Cbr%3Ezh_TW%20%u7E41%u4F53%u4E2D%u6587%uFF0Cen%20%u82F1%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Een%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esession-from%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u6765%u6E90%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-title%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-path%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u70B9%u51FB%u8DF3%u8F6C%u5C0F%u7A0B%u5E8F%u8DEF%u5F84%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u4EAB%u8DEF%u5F84%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-img%3C/td%3E%0A%3Ctd%3EsendMessageImg%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u622A%u56FE%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-message-card%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22goodsactionbutton-props%22%3EGoodsActionButton%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u989C%u8272%uFF0C%u652F%u6301%u4F20%u5165%20%3Ccode%3Elinear-gradient%3C/code%3E%20%u6E10%u53D8%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eurl%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u540E%u8DF3%u8F6C%u7684%u94FE%u63A5%u5730%u5740%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elink-type%3C/td%3E%0A%3Ctd%3E%u94FE%u63A5%u8DF3%u8F6C%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3EredirectTo%3C/code%3E%20%3Ccode%3EswitchTab%3C/code%3E%20%3Ccode%3EreLaunch%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EnavigateTo%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eid%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eprimary%3C/code%3E%20%3Ccode%3Ewarning%3C/code%3E%20%3Ccode%3Edanger%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edanger%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplain%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u6734%u7D20%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u5C3A%u5BF8%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Enormal%3C/code%3E%20%3Ccode%3Elarge%3C/code%3E%20%3Ccode%3Esmall%3C/code%3E%20%3Ccode%3Emini%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Enormal%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u4E3A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen-type%3C/td%3E%0A%3Ctd%3E%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%uFF0C%u5177%u4F53%u652F%u6301%u53EF%u53C2%u8003%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/button.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5B98%u65B9%u6587%u6863%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eapp-parameter%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%20APP%20%u65F6%uFF0C%u5411%20APP%20%u4F20%u9012%u7684%u53C2%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elang%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%u8FD4%u56DE%u7528%u6237%u4FE1%u606F%u7684%u8BED%u8A00%uFF0Czh_CN%20%u7B80%u4F53%u4E2D%u6587%uFF0C%3Cbr%3Ezh_TW%20%u7E41%u4F53%u4E2D%u6587%uFF0Cen%20%u82F1%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Een%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esession-from%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u6765%u6E90%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-title%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-path%3C/td%3E%0A%3Ctd%3E%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%u70B9%u51FB%u8DF3%u8F6C%u5C0F%u7A0B%u5E8F%u8DEF%u5F84%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u4EAB%u8DEF%u5F84%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esend-message-img%3C/td%3E%0A%3Ctd%3EsendMessageImg%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u622A%u56FE%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-message-card%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u4F1A%u8BDD%u5185%u6D88%u606F%u5361%u7247%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eclick%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u70B9%u51FB%u4E8B%u4EF6%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22goodsactionicon-slot%22%3EGoodsActionIcon%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22goodsactionbutton-slot%22%3EGoodsActionButton%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u663E%u793A%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22goodsactionicon-wai-bu-yang-shi-lei%22%3EGoodsActionIcon%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-class%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext-class%3C/td%3E%0A%3Ctd%3E%u6587%u5B57%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22goodsactionbutton-wai-bu-yang-shi-lei%22%3EGoodsActionButton%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2045:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EGrid%20%u5BAB%u683C%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-grid%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/grid/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-grid-item%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/grid-item/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-ben-yong-fa%22%3E%u57FA%u672C%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eicon%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u683C%u5B50%u5185%u7684%u56FE%u6807%uFF0C%3Ccode%3Etext%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u6587%u5B57%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-lie-shu%22%3E%u81EA%u5B9A%u4E49%u5217%u6570%3C/h3%3E%0A%3Cp%3E%u9ED8%u8BA4%u4E00%u884C%u5C55%u793A%u56DB%u4E2A%u683C%u5B50%uFF0C%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Ecolumn-num%3C/code%3E%u81EA%u5B9A%u4E49%u5217%u6570%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumn-num%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Afor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%206%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-nei-rong%22%3E%u81EA%u5B9A%u4E49%u5185%u5BB9%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u63D2%u69FD%u53EF%u4EE5%u81EA%u5B9A%u4E49%u683C%u5B50%u5C55%u793A%u7684%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumn-num%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eborder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-slot%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Afor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%203%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Afor-item%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bindex%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwidth%3A%20100%25%3B%20height%3A%2090px%3B%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/apple-%7B%7B%20index%20+%201%20%7D%7D.jpg%26quot%3B%3C/span%3E%0A%20%20%20%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zheng-fang-xing-ge-zi%22%3E%u6B63%u65B9%u5F62%u683C%u5B50%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Esquare%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u683C%u5B50%u7684%u9AD8%u5EA6%u4F1A%u548C%u5BBD%u5EA6%u4FDD%u6301%u4E00%u81F4%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esquare%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Afor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%208%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ge-zi-jian-ju%22%3E%u683C%u5B50%u95F4%u8DDD%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Egutter%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u683C%u5B50%u4E4B%u95F4%u7684%u8DDD%u79BB%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Egutter%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2010%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Afor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%208%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22nei-rong-heng-pai%22%3E%u5185%u5BB9%u6A2A%u6392%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Edirection%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u4E3A%3Ccode%3Ehorizontal%3C/code%3E%uFF0C%u53EF%u4EE5%u8BA9%u5BAB%u683C%u7684%u5185%u5BB9%u5448%u6A2A%u5411%u6392%u5217%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edirection%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhorizontal%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumn-num%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ye-mian-tiao-zhuan%22%3E%u9875%u9762%u8DF3%u8F6C%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Eurl%3C/code%3E%u5C5E%u6027%u8FDB%u884C%u9875%u9762%u8DF3%u8F6C%uFF0C%u901A%u8FC7%3Ccode%3Elink-type%3C/code%3E%u5C5E%u6027%u63A7%u5236%u8DF3%u8F6C%u7C7B%u578B%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclickable%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumn-num%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome-o%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elink-type%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BnavigateTo%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B/pages/dashboard/index%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BNavigate%20%u8DF3%u8F6C%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elink-type%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BreLaunch%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B/pages/dashboard/index%26quot%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BReLaunch%20%u8DF3%u8F6C%26quot%3B%3C/span%3E%0A%20%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ti-shi-xin-xi%22%3E%u63D0%u793A%u4FE1%u606F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Edot%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u56FE%u6807%u53F3%u4E0A%u89D2%u5C55%u793A%u4E00%u4E2A%u5C0F%u7EA2%u70B9%u3002%u8BBE%u7F6E%3Ccode%3Ebadge%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u56FE%u6807%u53F3%u4E0A%u89D2%u5C55%u793A%u76F8%u5E94%u7684%u5FBD%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumn-num%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edot%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-grid-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u5B57%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebadge%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B99+%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-grid%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22grid-props%22%3EGrid%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolumn-num%3C/td%3E%0A%3Ctd%3E%u5217%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E4%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-size%20%3Ccode%3Ev1.3.2%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u5927%u5C0F%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E28px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Egutter%3C/td%3E%0A%3Ctd%3E%u683C%u5B50%u4E4B%u95F4%u7684%u95F4%u8DDD%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecenter%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C06%u683C%u5B50%u5185%u5BB9%u5C45%u4E2D%u663E%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esquare%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C06%u683C%u5B50%u56FA%u5B9A%u4E3A%u6B63%u65B9%u5F62%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclickable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u683C%u5B50%u70B9%u51FB%u53CD%u9988%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edirection%3C/td%3E%0A%3Ctd%3E%u683C%u5B50%u5185%u5BB9%u6392%u5217%u7684%u65B9%u5411%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ehorizontal%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evertical%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ereverse%20%3Ccode%3Ev1.7.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u8C03%u6362%u56FE%u6807%u548C%u6587%u672C%u7684%u4F4D%u7F6E%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u81EA%u5B9A%u4E49%u5185%u5BB9%u7684%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22grid-wai-bu-yang-shi-lei%22%3EGrid%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22griditem-props%22%3EGridItem%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-color%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-prefix%20%3Ccode%3Ev1.7.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u7B2C%u4E09%u65B9%u56FE%u6807%u524D%u7F00%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evan-icon%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u56FE%u6807%u53F3%u4E0A%u89D2%u5C0F%u7EA2%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebadge%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u53F3%u4E0A%u89D2%u5FBD%u6807%u7684%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eurl%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u540E%u8DF3%u8F6C%u7684%u94FE%u63A5%u5730%u5740%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elink-type%3C/td%3E%0A%3Ctd%3E%u94FE%u63A5%u8DF3%u8F6C%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3EredirectTo%3C/code%3E%20%3Ccode%3EswitchTab%3C/code%3E%20%3Ccode%3EreLaunch%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EnavigateTo%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22griditem-events%22%3EGridItem%20Events%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u683C%u5B50%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22griditem-slots%22%3EGridItem%20Slots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5BAB%u683C%u7684%u6240%u6709%u5185%u5BB9%uFF0C%u9700%u8981%u8BBE%u7F6E%3Ccode%3Euse-slot%3C/code%3E%u5C5E%u6027%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u56FE%u6807%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Euse-slot%3C/code%3E%u6216%u8005%3Ccode%3Eicon%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6587%u5B57%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Euse-slot%3C/code%3E%u6216%u8005%3Ccode%3Etext%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22griditem-wai-bu-yang-shi-lei%22%3EGridItem%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtent-class%3C/td%3E%0A%3Ctd%3E%u5185%u5BB9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-class%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext-class%3C/td%3E%0A%3Ctd%3E%u6587%u672C%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9941:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EIcon%20%u56FE%u6807%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u57FA%u4E8E%u5B57%u4F53%u7684%u56FE%u6807%u96C6%uFF0C%u53EF%u4EE5%u901A%u8FC7%20Icon%20%u7EC4%u4EF6%u4F7F%u7528%uFF0C%u4E5F%u53EF%u4EE5%u5728%u5176%u4ED6%u7EC4%u4EF6%u4E2D%u901A%u8FC7%20icon%20%u5C5E%u6027%u5F15%u7528%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-icon%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/icon/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%3Ccode%3EIcon%3C/code%3E%u7684%3Ccode%3Ename%3C/code%3E%u5C5E%u6027%u652F%u6301%u4F20%u5165%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bclose%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//b.yzcdn.cn/vant/icon-demo-1126.png%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ti-shi-xin-xi%22%3E%u63D0%u793A%u4FE1%u606F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Edot%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u56FE%u6807%u53F3%u4E0A%u89D2%u5C55%u793A%u4E00%u4E2A%u5C0F%u7EA2%u70B9%u3002%u8BBE%u7F6E%3Ccode%3Einfo%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u56FE%u6807%u53F3%u4E0A%u89D2%u5C55%u793A%u76F8%u5E94%u7684%u5FBD%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edot%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B99+%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-biao-yan-se%22%3E%u56FE%u6807%u989C%u8272%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Ecolor%3C/code%3E%u5C5E%u6027%u6765%u63A7%u5236%u56FE%u6807%u989C%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bred%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-biao-da-xiao%22%3E%u56FE%u6807%u5927%u5C0F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Esize%3C/code%3E%u5C5E%u6027%u6765%u63A7%u5236%u56FE%u6807%u5927%u5C0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bchat%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50px%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-biao%22%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u5982%u679C%u9700%u8981%u5728%u73B0%u6709%20Icon%20%u7684%u57FA%u7840%u4E0A%u4F7F%u7528%u66F4%u591A%u56FE%u6807%uFF0C%u53EF%u4EE5%u5F15%u5165%u7B2C%u4E09%u65B9%20iconfont%20%u5BF9%u5E94%u7684%u5B57%u4F53%u6587%u4EF6%u548C%20CSS%20%u6587%u4EF6%uFF0C%u4E4B%u540E%u5C31%u53EF%u4EE5%u5728%20Icon%20%u7EC4%u4EF6%u4E2D%u76F4%u63A5%u4F7F%u7528%u3002%u4F8B%u5982%uFF0C%u53EF%u4EE5%u5728%20%3Ccode%3Eapp.wxss%3C/code%3E%20%u6587%u4EF6%u4E2D%u5F15%u5165%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E/*%20%u5F15%u5165%u7B2C%u4E09%u65B9%u6216%u81EA%u5B9A%u4E49%u7684%u5B57%u4F53%u56FE%u6807%u6837%u5F0F%20*/%3C/span%3E%0A%3Cspan%20class%3D%22hljs-keyword%22%3E@font-face%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-family%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bmy-icon%26%23x27%3B%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Esrc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-built_in%22%3Eurl%3C/span%3E%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B./my-icon.ttf%26%23x27%3B%3C/span%3E%29%20%3Cspan%20class%3D%22hljs-built_in%22%3Eformat%3C/span%3E%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Btruetype%26%23x27%3B%3C/span%3E%29%3B%0A%7D%0A%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.my-icon%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Efont-family%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bmy-icon%26%23x27%3B%3C/span%3E%3B%0A%7D%0A%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.my-icon-extra%3C/span%3E%3Cspan%20class%3D%22hljs-selector-pseudo%22%3E%3A%3Abefore%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Econtent%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%5Ce626%26%23x27%3B%3C/span%3E%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u901A%u8FC7%20class-prefix%20%u6307%u5B9A%u7C7B%u540D%u4E3A%20my-icon%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass-prefix%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmy-icon%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bextra%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u56FE%u6807%u53F3%u4E0A%u89D2%u5C0F%u7EA2%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einfo%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u53F3%u4E0A%u89D2%u6587%u5B57%u63D0%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Einherit%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u5927%u5C0F%uFF0C%u5982%20%3Ccode%3E20px%3C/code%3E%uFF0C%3Ccode%3E2em%3C/code%3E%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Einherit%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclass-prefix%3C/td%3E%0A%3Ctd%3E%u7C7B%u540D%u524D%u7F00%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evan-icon%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u56FE%u6807%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Ch2%20id%3D%22chang-jian-wen-ti%22%3E%u5E38%u89C1%u95EE%u9898%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22kai-fa-zhe-gong-ju-shang-ti-shi-failed-to-load-font-shi-shi-me-qing-kuang%22%3E%u5F00%u53D1%u8005%u5DE5%u5177%u4E0A%u63D0%u793A%20Failed%20to%20load%20font%20%u662F%u4EC0%u4E48%u60C5%u51B5%uFF1F%3C/h3%3E%0A%3Cp%3E%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%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u6587%u6863%3C/a%3E%20-%20%u6CE8%u610F%u4E8B%u9879%u7B2C%205%20%u6761%u3002%3C/p%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},6777:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EImage%20%u56FE%u7247%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u589E%u5F3A%u7248%u7684%20img%20%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-image%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/image/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u57FA%u7840%u7528%u6CD5%u4E0E%u539F%u751F%20%3Ca%20href%3D%22%28https%3A//developers.weixin.qq.com/miniprogram/dev/component/image.html%29%22%20target%3D%22_blank%22%3Eimage%3C/a%3E%20%u6807%u7B7E%u4E00%u81F4%uFF0C%u53EF%u4EE5%u8BBE%u7F6E%3Ccode%3Esrc%3C/code%3E%u3001%3Ccode%3Ewidth%3C/code%3E%u3001%3Ccode%3Eheight%3C/code%3E%u7B49%u539F%u751F%u5C5E%u6027%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewidth%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B100%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eheight%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B100%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/cat.jpeg%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tian-chong-mo-shi%22%3E%u586B%u5145%u6A21%u5F0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Efit%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u56FE%u7247%u586B%u5145%u6A21%u5F0F%uFF0C%u53EF%u9009%u503C%u89C1%u4E0B%u65B9%u8868%u683C%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewidth%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B10rem%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eheight%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B10rem%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Efit%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcontain%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/cat.jpeg%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yuan-xing-tu-pian%22%3E%u5706%u5F62%u56FE%u7247%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eround%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u56FE%u7247%u53D8%u5706%uFF0C%u6CE8%u610F%u5F53%u56FE%u7247%u5BBD%u9AD8%u4E0D%u76F8%u7B49%u4E14%3Ccode%3Efit%3C/code%3E%u4E3A%3Ccode%3Econtain%3C/code%3E%u6216%3Ccode%3Escale-down%3C/code%3E%u65F6%uFF0C%u5C06%u65E0%u6CD5%u586B%u5145%u4E00%u4E2A%u5B8C%u6574%u7684%u5706%u5F62%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewidth%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B10rem%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eheight%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B10rem%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/cat.jpeg%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-pian-lan-jia-zai%22%3E%u56FE%u7247%u61D2%u52A0%u8F7D%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewidth%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B100%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eheight%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B100%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elazy-load%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/cat.jpeg%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-zhong-ti-shi%22%3E%u52A0%u8F7D%u4E2D%u63D0%u793A%3C/h3%3E%0A%3Cp%3E%3Ccode%3EImage%3C/code%3E%u7EC4%u4EF6%u63D0%u4F9B%u4E86%u9ED8%u8BA4%u7684%u52A0%u8F7D%u4E2D%u63D0%u793A%uFF0C%u652F%u6301%u901A%u8FC7%3Ccode%3Eloading%3C/code%3E%u63D2%u69FD%u81EA%u5B9A%u4E49%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-loading-slot%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bloading%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bspinner%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B20%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evertical%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-shi-bai-ti-shi%22%3E%u52A0%u8F7D%u5931%u8D25%u63D0%u793A%3C/h3%3E%0A%3Cp%3E%3Ccode%3EImage%3C/code%3E%u7EC4%u4EF6%u63D0%u4F9B%u4E86%u9ED8%u8BA4%u7684%u52A0%u8F7D%u5931%u8D25%u63D0%u793A%uFF0C%u652F%u6301%u901A%u8FC7%3Ccode%3Eerror%3C/code%3E%u63D2%u69FD%u81EA%u5B9A%u4E49%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-error-slot%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Berror%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u52A0%u8F7D%u5931%u8D25%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-image%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Esrc%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u94FE%u63A5%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efit%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u586B%u5145%u6A21%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Efill%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ealt%3C/td%3E%0A%3Ctd%3E%u66FF%u4EE3%u6587%u672C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ewidth%3C/td%3E%0A%3Ctd%3E%u5BBD%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eheight%3C/td%3E%0A%3Ctd%3E%u9AD8%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eradius%3C/td%3E%0A%3Ctd%3E%u5706%u89D2%u5927%u5C0F%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eround%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u4E3A%u5706%u5F62%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elazy-load%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u61D2%u52A0%u8F7D%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-error%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u56FE%u7247%u52A0%u8F7D%u5931%u8D25%u63D0%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-loading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u56FE%u7247%u52A0%u8F7D%u4E2D%u63D0%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-error-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%20error%20%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-loading-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%20loading%20%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-menu-by-longpress%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u957F%u6309%u56FE%u7247%u663E%u793A%u8BC6%u522B%u5C0F%u7A0B%u5E8F%u7801%u83DC%u5355%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-pian-tian-chong-mo-shi%22%3E%u56FE%u7247%u586B%u5145%u6A21%u5F0F%20%08%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u542B%u4E49%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Econtain%3C/td%3E%0A%3Ctd%3E%u4FDD%u6301%u5BBD%u9AD8%u7F29%u653E%u56FE%u7247%uFF0C%u4F7F%u56FE%u7247%u7684%u957F%u8FB9%u80FD%u5B8C%u5168%u663E%u793A%u51FA%u6765%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecover%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efill%3C/td%3E%0A%3Ctd%3E%u62C9%u4F38%u56FE%u7247%uFF0C%u4F7F%u56FE%u7247%u586B%u6EE1%u5143%u7D20%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EwidthFix%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EheightFix%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Enone%3C/td%3E%0A%3Ctd%3E%u4FDD%u6301%u56FE%u7247%u539F%u6709%u5C3A%u5BF8%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u56FE%u7247%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent%3A%20Event%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eload%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u52A0%u8F7D%u5B8C%u6BD5%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent%3A%20Event%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eerror%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u52A0%u8F7D%u5931%u8D25%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent%3A%20Event%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u52A0%u8F7D%u4E2D%u7684%u63D0%u793A%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eerror%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u52A0%u8F7D%u5931%u8D25%u65F6%u7684%u63D0%u793A%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eimage-class%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading-class%3C/td%3E%0A%3Ctd%3Eloading%20%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eerror-class%3C/td%3E%0A%3Ctd%3Eerror%20%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},8694:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EIndexBar%20%u7D22%u5F15%u680F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5217%u8868%u7684%u7D22%u5F15%u5206%u7C7B%u663E%u793A%u548C%u5FEB%u901F%u5B9A%u4F4D%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-index-bar%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/index-bar/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-index-anchor%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/index-anchor/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u70B9%u51FB%u7D22%u5F15%u680F%u65F6%uFF0C%u4F1A%u81EA%u52A8%u8DF3%u8F6C%u5230%u5BF9%u5E94%u7684%3Ccode%3EIndexAnchor%3C/code%3E%u951A%u70B9%u4F4D%u7F6E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-index-bar%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-index-anchor%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eindex%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BA%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-index-anchor%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eindex%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BB%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%20%20...%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-index-bar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-suo-yin-lie-biao%22%3E%u81EA%u5B9A%u4E49%u7D22%u5F15%u5217%u8868%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Eindex-list%3C/code%3E%u5C5E%u6027%u81EA%u5B9A%u4E49%u5C55%u793A%u7684%u7D22%u5F15%u5B57%u7B26%u5217%u8868%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-index-bar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eindex-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20indexList%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-index-anchor%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eindex%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u98981%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-index-anchor%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-index-anchor%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eindex%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u98982%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-index-anchor%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6587%u672C%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%20%20...%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-index-bar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EindexList%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E2%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E3%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E4%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E5%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E6%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E7%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E8%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E9%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E10%3C/span%3E%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22indexbar-props%22%3EIndexBar%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3Cth%3E%u7248%u672C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eindex-list%3C/td%3E%0A%3Ctd%3E%u7D22%u5F15%u5B57%u7B26%u5217%u8868%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%5B%5D%20%7C%20number%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EA-Z%3C/code%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esticky%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u951A%u70B9%u81EA%u52A8%u5438%u9876%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esticky-offset-top%3C/td%3E%0A%3Ctd%3E%u951A%u70B9%u81EA%u52A8%u5438%u9876%u65F6%u4E0E%u9876%u90E8%u7684%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ehighlight-color%3C/td%3E%0A%3Ctd%3E%u7D22%u5F15%u5B57%u7B26%u9AD8%u4EAE%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%2307c160%3C/code%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22indexanchor-props%22%3EIndexAnchor%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3Cth%3E%u7248%u672C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u81EA%u5B9A%u4E49%u5185%u5BB9%u7684%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eindex%3C/td%3E%0A%3Ctd%3E%u7D22%u5F15%u5B57%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22indexbar-events%22%3EIndexBar%20Events%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eselect%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u5B57%u7B26%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eindex%3A%20%u7D22%u5F15%u5B57%u7B26%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22indexanchor-slots%22%3EIndexAnchor%20Slots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u951A%u70B9%u4F4D%u7F6E%u663E%u793A%u5185%u5BB9%uFF0C%u9ED8%u8BA4%u4E3A%u7D22%u5F15%u5B57%u7B26%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Ch2%20id%3D%22chang-jian-wen-ti%22%3E%u5E38%u89C1%u95EE%u9898%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22qian-tao-zai-gun-dong-yuan-su-zhong-indexanchor-shi-xiao%22%3E%u5D4C%u5957%u5728%u6EDA%u52A8%u5143%u7D20%u4E2D%20IndexAnchor%20%u5931%u6548%uFF1F%3C/h3%3E%0A%3Cp%3E%u7531%u4E8E%20%3Ccode%3E%26lt%3BIndexBar%20/%26gt%3B%3C/code%3E%20%u5185%u90E8%u4F7F%u7528%20wx.pageScrollTo%20%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%uFF1A%3Ccode%3Eview%3C/code%3E%20%u4F7F%u7528%20%3Ccode%3Eoverflow%3A%20scroll%3B%3C/code%3E%20%u6216%u8005%20%3Ccode%3Escroll-view%3C/code%3E%uFF0C%0A%u5177%u4F53%u53EF%u67E5%u770B%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5C0F%u7A0B%u5E8F%u6587%u6863%3C/a%3E%u3002%0A%u5386%u53F2issue%3A%20%3Ca%20href%3D%22https%3A//github.com/youzan/vant-weapp/issues/4252%22%20target%3D%22_blank%22%3E%234252%3C/a%3E%3C/p%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},5476:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ELoading%20%u52A0%u8F7D%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u52A0%u8F7D%u56FE%u6807%uFF0C%u7528%u4E8E%u8868%u793A%u52A0%u8F7D%u4E2D%u7684%u8FC7%u6E21%u72B6%u6001%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-loading%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/loading/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-lei-xing%22%3E%u52A0%u8F7D%u7C7B%u578B%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%20/%26gt%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bspinner%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%231989fa%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bspinner%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%231989fa%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-wen-an%22%3E%u52A0%u8F7D%u6587%u6848%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B24px%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u52A0%u8F7D%u4E2D...%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22chui-zhi-pai-lie%22%3E%u5782%u76F4%u6392%u5217%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B24px%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evertical%3C/span%3E%26gt%3B%3C/span%3E%u52A0%u8F7D%u4E2D...%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-loading%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23c9c9c9%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Espinner%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ecircular%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u52A0%u8F7D%u56FE%u6807%u5927%u5C0F%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%20%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E30px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext-size%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6587%u5B57%u5927%u5C0F%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%u4E3A%20%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E14px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evertical%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5782%u76F4%u6392%u5217%u56FE%u6807%u548C%u6587%u5B57%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u52A0%u8F7D%u6587%u6848%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9774:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ENavBar%20%u5BFC%u822A%u680F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u4E3A%u9875%u9762%u63D0%u4F9B%u5BFC%u822A%u529F%u80FD%uFF0C%u5E38%u7528%u4E8E%u9875%u9762%u9876%u90E8%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-nav-bar%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/nav-bar/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-nav-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8FD4%u56DE%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eright-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6309%u94AE%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-arrow%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-left%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickLeft%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-right%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickRight%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickLeft%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showToast%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u70B9%u51FB%u8FD4%u56DE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickRight%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showToast%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u70B9%u51FB%u6309%u94AE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gao-ji-yong-fa%22%3E%u9AD8%u7EA7%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20slot%20%u5B9A%u5236%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-nav-bar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8FD4%u56DE%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-arrow%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-icon%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-nav-bar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-text%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-text%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-arrow%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5DE6%u4FA7%u7BAD%u5934%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efixed%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u56FA%u5B9A%u5728%u9876%u90E8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplaceholder%3C/td%3E%0A%3Ctd%3E%u56FA%u5B9A%u5728%u9876%u90E8%u65F6%u662F%u5426%u5F00%u542F%u5360%u4F4D%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u4E0B%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3E%u5143%u7D20%20z-index%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-top%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7559%u51FA%u9876%u90E8%u5B89%u5168%u8DDD%u79BB%uFF08%u72B6%u6001%u680F%u9AD8%u5EA6%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5DE6%u4FA7%u533A%u57DF%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4FA7%u533A%u57DF%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-left%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5DE6%u4FA7%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-right%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u53F3%u4FA7%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-class%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},6063:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ENoticeBar%20%u901A%u77E5%u680F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5FAA%u73AF%u64AD%u653E%u5C55%u793A%u4E00%u7EC4%u6D88%u606F%u901A%u77E5%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-notice-bar%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/notice-bar/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvolume-o%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%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%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gun-dong-bo-fang%22%3E%u6EDA%u52A8%u64AD%u653E%3C/h3%3E%0A%3Cp%3E%u901A%u77E5%u680F%u7684%u5185%u5BB9%u957F%u5EA6%u6EA2%u51FA%u65F6%u4F1A%u81EA%u52A8%u5F00%u542F%u6EDA%u52A8%u64AD%u653E%uFF0C%u901A%u8FC7%20%3Ccode%3Escrollable%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u63A7%u5236%u8BE5%u884C%u4E3A%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u6587%u5B57%u8F83%u77ED%u65F6%uFF0C%u901A%u8FC7%u8BBE%u7F6E%20scrollable%20%u5C5E%u6027%u5F00%u542F%u6EDA%u52A8%u64AD%u653E%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Escrollable%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6280%u672F%u662F%u5F00%u53D1%u5B83%u7684%u4EBA%u7684%u5171%u540C%u7075%u9B42%u3002%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u6587%u5B57%u8F83%u957F%u65F6%uFF0C%u901A%u8FC7%u7981%u7528%20scrollable%20%u5C5E%u6027%u5173%u95ED%u6EDA%u52A8%u64AD%u653E%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Escrollable%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%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%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22duo-xing-zhan-shi%22%3E%u591A%u884C%u5C55%u793A%3C/h3%3E%0A%3Cp%3E%u6587%u5B57%u8F83%u957F%u65F6%uFF0C%u53EF%u4EE5%u901A%u8FC7%u8BBE%u7F6E%20%3Ccode%3Ewrapable%3C/code%3E%20%u5C5E%u6027%u6765%u5F00%u542F%u591A%u884C%u5C55%u793A%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewrapable%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Escrollable%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%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%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tong-zhi-lan-mo-shi%22%3E%u901A%u77E5%u680F%u6A21%u5F0F%3C/h3%3E%0A%3Cp%3E%u901A%u77E5%u680F%u652F%u6301%20%3Ccode%3Ecloseable%3C/code%3E%20%u548C%20%3Ccode%3Elink%3C/code%3E%20%u4E24%u79CD%u6A21%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20closeable%20%u6A21%u5F0F%uFF0C%u5728%u53F3%u4FA7%u663E%u793A%u5173%u95ED%u6309%u94AE%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emode%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcloseable%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6280%u672F%u662F%u5F00%u53D1%u5B83%u7684%u4EBA%u7684%u5171%u540C%u7075%u9B42%u3002%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20link%20%u6A21%u5F0F%uFF0C%u5728%u53F3%u4FA7%u663E%u793A%u94FE%u63A5%u7BAD%u5934%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emode%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blink%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6280%u672F%u662F%u5F00%u53D1%u5B83%u7684%u4EBA%u7684%u5171%u540C%u7075%u9B42%u3002%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yang-shi%22%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Ecolor%3C/code%3E%20%u5C5E%u6027%u8BBE%u7F6E%u6587%u672C%u989C%u8272%uFF0C%u901A%u8FC7%20%3Ccode%3Ebackground%3C/code%3E%20%u5C5E%u6027%u8BBE%u7F6E%u80CC%u666F%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%231989fa%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebackground%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ecf9ff%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo-o%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6280%u672F%u662F%u5F00%u53D1%u5B83%u7684%u4EBA%u7684%u5171%u540C%u7075%u9B42%u3002%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-gun-dong-su-lu%22%3E%u81EA%u5B9A%u4E49%u6EDA%u52A8%u901F%u7387%3C/h3%3E%0A%3Cp%3E%u4F7F%u7528%3Ccode%3Espeed%3C/code%3E%u5C5E%u6027%u63A7%u5236%u6EDA%u52A8%u901F%u7387%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notice-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20text%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Espeed%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7BspeedValue%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Emode%3C/td%3E%0A%3Ctd%3E%u901A%u77E5%u680F%u6A21%u5F0F%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ecloseable%3C/code%3E%20%3Ccode%3Elink%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext%3C/td%3E%0A%3Ctd%3E%u901A%u77E5%u6587%u672C%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u901A%u77E5%u6587%u672C%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23ed6a0c%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebackground%3C/td%3E%0A%3Ctd%3E%u6EDA%u52A8%u6761%u80CC%u666F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23fffbe8%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-icon%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3E%u56FE%u6807%u540D%u79F0%3C/a%3E%u6216%u56FE%u7247%u94FE%u63A5%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edelay%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u5EF6%u8FDF%u65F6%u95F4%20%28s%29%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Espeed%3C/td%3E%0A%3Ctd%3E%u6EDA%u52A8%u901F%u7387%20%28px/s%29%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E60%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Escrollable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u6EDA%u52A8%u64AD%u653E%uFF0C%u5185%u5BB9%u957F%u5EA6%u6EA2%u51FA%u65F6%u9ED8%u8BA4%u5F00%u542F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ewrapable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u6587%u672C%u6362%u884C%uFF0C%u53EA%u5728%u7981%u7528%u6EDA%u52A8%u65F6%u751F%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen-type%3C/td%3E%0A%3Ctd%3E%u5FAE%u4FE1%u5F00%u653E%u80FD%u529B%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Enavigate%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u901A%u77E5%u680F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Cem%3Eevent%3A%20Event%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u901A%u77E5%u680F%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Cem%3Eevent%3A%20Event%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u901A%u77E5%u6587%u672C%u5185%u5BB9%uFF0C%u4EC5%u5728%20%3Ccode%3Etext%3C/code%3E%20%u5C5E%u6027%u4E3A%u7A7A%u65F6%u6709%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5DE6%u4FA7%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4FA7%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},1144:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ENotify%20%u6D88%u606F%u63D0%u793A%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-notify%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/notify/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Notify%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/notify/notify%26%23x27%3B%3C/span%3E%3B%0A%0ANotify%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u901A%u77E5%u5185%u5BB9%26%23x27%3B%3C/span%3E%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u5728%u9875%u9762%u5185%u6DFB%u52A0%u5BF9%u5E94%u7684%u8282%u70B9%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notify%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-notify%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tong-zhi-lei-xing%22%3E%u901A%u77E5%u7C7B%u578B%3C/h3%3E%0A%3Cp%3E%u652F%u6301%3Ccode%3Eprimary%3C/code%3E%u3001%3Ccode%3Esuccess%3C/code%3E%u3001%3Ccode%3Ewarning%3C/code%3E%u3001%3Ccode%3Edanger%3C/code%3E%u56DB%u79CD%u901A%u77E5%u7C7B%u578B%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3Edanger%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u4E3B%u8981%u901A%u77E5%3C/span%3E%0ANotify%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bprimary%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u901A%u77E5%u5185%u5BB9%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u6210%u529F%u901A%u77E5%3C/span%3E%0ANotify%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bsuccess%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u901A%u77E5%u5185%u5BB9%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u5371%u9669%u901A%u77E5%3C/span%3E%0ANotify%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bdanger%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u901A%u77E5%u5185%u5BB9%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u8B66%u544A%u901A%u77E5%3C/span%3E%0ANotify%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bwarning%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u901A%u77E5%u5185%u5BB9%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tong-zhi%22%3E%u81EA%u5B9A%u4E49%u901A%u77E5%3C/h3%3E%0A%3Cp%3E%u81EA%u5B9A%u4E49%u6D88%u606F%u901A%u77E5%u7684%u989C%u8272%u548C%u5C55%u793A%u65F6%u957F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3ENotify%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u81EA%u5B9A%u4E49%u989C%u8272%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23ad0000%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebackground%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23ffe1e1%26%23x27%3B%3C/span%3E%2C%0A%7D%29%3B%0A%0ANotify%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u81EA%u5B9A%u4E49%u65F6%u957F%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eduration%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E1000%3C/span%3E%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-xuan-ze-qi%22%3E%u81EA%u5B9A%u4E49%u9009%u62E9%u5668%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3ENotify%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u81EA%u5B9A%u4E49%u8282%u70B9%u9009%u62E9%u5668%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eduration%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E1000%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eselector%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23custom-selector%26%23x27%3B%3C/span%3E%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u5728%u9875%u9762%u5185%u6DFB%u52A0%u81EA%u5B9A%u4E49%u8282%u70B9%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notify%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcustom-selector%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3ENotify%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u63D0%u793A%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%20%7C%20message%3C/code%3E%3C/td%3E%0A%3Ctd%3Enotify%20%u5B9E%u4F8B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3ENotify.clear%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u63D0%u793A%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22options%22%3EOptions%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eprimary%3C/code%3E%20%3Ccode%3Esuccess%3C/code%3E%20%3Ccode%3Ewarning%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edanger%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emessage%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u6587%u6848%uFF0C%u652F%u6301%u901A%u8FC7%3Ccode%3E%5Cn%3C/code%3E%u6362%u884C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u65F6%u957F%28ms%29%uFF0C%u503C%u4E3A%200%20%u65F6%uFF0Cnotify%20%u4E0D%u4F1A%u6D88%u5931%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E3000%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eselector%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8282%u70B9%u9009%u62E9%u5668%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evan-notify%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u5B57%u4F53%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23fff%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etop%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebackground%3C/td%3E%0A%3Ctd%3E%u80CC%u666F%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtext%3C/td%3E%0A%3Ctd%3E%u9009%u62E9%u5668%u7684%u9009%u62E9%u8303%u56F4%uFF0C%u53EF%u4EE5%u4F20%u5165%u81EA%u5B9A%u4E49%u7EC4%u4EF6%u7684%20this%20%u4F5C%u4E3A%u4E0A%u4E0B%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9875%u9762%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EonClick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u65F6%u7684%u56DE%u8C03%u51FD%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3EFunction%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EonOpened%3C/td%3E%0A%3Ctd%3E%u5B8C%u5168%u5C55%u793A%u540E%u7684%u56DE%u8C03%u51FD%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3EFunction%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EonClose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u7684%u56DE%u8C03%u51FD%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3EFunction%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsafeAreaInsetTop%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7559%u51FA%u9876%u90E8%u5B89%u5168%u8DDD%u79BB%uFF08%u72B6%u6001%u680F%u9AD8%u5EA6%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},7130:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EOverlay%20%u906E%u7F69%u5C42%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-overlay%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/overlay/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickShow%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u663E%u793A%u906E%u7F69%u5C42%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-overlay%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickHide%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickShow%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickHide%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22qian-ru-nei-rong%22%3E%u5D4C%u5165%u5185%u5BB9%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u9ED8%u8BA4%u63D2%u69FD%u53EF%u4EE5%u5728%u906E%u7F69%u5C42%u4E0A%u5D4C%u5165%u4EFB%u610F%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickShow%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5D4C%u5165%u5185%u5BB9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-overlay%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickHide%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwrapper%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bblock%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecatch%3Atap%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bnoop%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-overlay%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickShow%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickHide%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Enoop%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.wrapper%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Edisplay%3C/span%3E%3A%20flex%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ealign-items%3C/span%3E%3A%20center%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ejustify-content%3C/span%3E%3A%20center%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Eheight%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E100%25%3C/span%3E%3B%0A%7D%0A%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.block%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ewidth%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E120px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Eheight%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E120px%3C/span%3E%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E%23fff%3C/span%3E%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u65F6%u957F%uFF0C%u5355%u4F4D%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0.3%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclass-name%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u7C7B%u540D%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elock-scroll%20%3Ccode%3Ev1.7.3%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u9501%u5B9A%u80CC%u666F%u6EDA%u52A8%uFF0C%u9501%u5B9A%u65F6%u8499%u5C42%u91CC%u7684%u5185%u5BB9%u4E5F%u5C06%u65E0%u6CD5%u6EDA%u52A8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3Etrue%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u9ED8%u8BA4%u63D2%u69FD%uFF0C%u7528%u4E8E%u5728%u906E%u7F69%u5C42%u4E0A%u65B9%u5D4C%u5165%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},164:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EPanel%20%u9762%u677F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-panel%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/panel/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u9762%u677F%u53EA%u662F%u4E00%u4E2A%u5BB9%u5668%uFF0C%u91CC%u9762%u53EF%u4EE5%u653E%u5165%u81EA%u5B9A%u4E49%u7684%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-panel%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estatus%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u72B6%u6001%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-panel%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gao-ji-yong-fa%22%3E%u9AD8%u7EA7%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u4F7F%u7528%3Ccode%3Eslot%3C/code%3E%u81EA%u5B9A%u4E49%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-panel%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estatus%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u72B6%u6001%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfooter%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsmall%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsmall%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6309%u94AE%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-panel%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edesc%3C/td%3E%0A%3Ctd%3E%u63CF%u8FF0%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Estatus%3C/td%3E%0A%3Ctd%3E%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eheader%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%20header%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Etitle%3C/code%3E%u3001%3Ccode%3Edesc%3C/code%3E%u3001%3Ccode%3Estatus%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efooter%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%20footer%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eheader-class%3C/td%3E%0A%3Ctd%3E%u5934%u90E8%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efooter-class%3C/td%3E%0A%3Ctd%3E%u5E95%u90E8%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},4461:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EPicker%20%u9009%u62E9%u5668%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%20%3Ca%20href%3D%22%23/popup%22%20target%3D%22_blank%22%3E%u5F39%u51FA%u5C42%3C/a%3E%20%u7EC4%u4EF6%u914D%u5408%u4F7F%u7528%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-picker%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/picker/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-picker%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20columns%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Toast%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/toast/toast%26%23x27%3B%3C/span%3E%3B%0A%0APage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u676D%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5B81%u6CE2%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E29%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5609%u5174%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E56%u5DDE%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20picker%2C%20value%2C%20index%20%7D%20%3D%20event.detail%3B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%60%u5F53%u524D%u503C%uFF1A%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bvalue%7D%3C/span%3E%2C%20%u5F53%u524D%u7D22%u5F15%uFF1A%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bindex%7D%3C/span%3E%60%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22mo-ren-xuan-zhong-xiang%22%3E%u9ED8%u8BA4%u9009%u4E2D%u9879%3C/h3%3E%0A%3Cp%3E%u5355%u5217%u9009%u62E9%u5668%u53EF%u4EE5%u76F4%u63A5%u901A%u8FC7%3Ccode%3Edefault-index%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u521D%u59CB%u9009%u4E2D%u9879%u7684%u7D22%u5F15%u503C%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-picker%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20columns%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edefault-index%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%202%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-ding-bu-lan%22%3E%u5C55%u793A%u9876%u90E8%u680F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-picker%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow-toolbar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u9898%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20columns%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Acancel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonCancel%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aconfirm%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonConfirm%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Toast%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/toast/toast%26%23x27%3B%3C/span%3E%3B%0A%0APage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u676D%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5B81%u6CE2%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E29%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5609%u5174%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E56%u5DDE%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonConfirm%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20picker%2C%20value%2C%20index%20%7D%20%3D%20event.detail%3B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%60%u5F53%u524D%u503C%uFF1A%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bvalue%7D%3C/span%3E%2C%20%u5F53%u524D%u7D22%u5F15%uFF1A%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bindex%7D%3C/span%3E%60%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonCancel%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u53D6%u6D88%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22duo-lie-lian-dong%22%3E%u591A%u5217%u8054%u52A8%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-picker%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20columns%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20citys%20%3D%20%7B%0A%20%20%u6D59%u6C5F%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u676D%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5B81%u6CE2%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E29%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5609%u5174%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E56%u5DDE%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%u798F%u5EFA%3A%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u798F%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u53A6%u95E8%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u8386%u7530%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E09%u660E%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6CC9%u5DDE%26%23x27%3B%3C/span%3E%5D%2C%0A%7D%3B%0A%0APage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalues%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-built_in%22%3EObject%3C/span%3E.keys%28citys%29%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EclassName%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bcolumn1%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalues%3C/span%3E%3A%20citys%5B%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6D59%u6C5F%26%23x27%3B%3C/span%3E%5D%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EclassName%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bcolumn2%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EdefaultIndex%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20picker%2C%20value%2C%20index%20%7D%20%3D%20event.detail%3B%0A%20%20%20%20picker.setColumnValues%28%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%2C%20citys%5Bvalue%5B%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%5D%5D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-xuan-xiang%22%3E%u7981%u7528%u9009%u9879%3C/h3%3E%0A%3Cp%3E%u9009%u9879%u53EF%u4EE5%u4E3A%u5BF9%u8C61%u7ED3%u6784%uFF0C%u901A%u8FC7%u8BBE%u7F6E%20disabled%20%u6765%u7981%u7528%u8BE5%u9009%u9879%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-picker%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20columns%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u676D%u5DDE%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5B81%u6CE2%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E29%u5DDE%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-zhuang-tai%22%3E%u52A0%u8F7D%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u5F53%20Picker%20%u6570%u636E%u662F%u901A%u8FC7%u5F02%u6B65%u83B7%u53D6%u65F6%uFF0C%u53EF%u4EE5%u901A%u8FC7%20%3Ccode%3Eloading%3C/code%3E%20%u5C5E%u6027%u663E%u793A%u52A0%u8F7D%u63D0%u793A%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-picker%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolumns%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20columns%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolumns%3C/td%3E%0A%3Ctd%3E%u5BF9%u8C61%u6570%u7EC4%uFF0C%u914D%u7F6E%u6BCF%u4E00%u5217%u663E%u793A%u7684%u6570%u636E%3C/td%3E%0A%3Ctd%3E%3Cem%3EArray%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-toolbar%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u9876%u90E8%u680F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etoolbar-position%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u680F%u4F4D%u7F6E%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Ebottom%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etop%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u680F%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue-key%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u5BF9%u8C61%u4E2D%uFF0C%u6587%u5B57%u5BF9%u5E94%u7684%20key%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etext%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eitem-height%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u9AD8%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E44%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm-button-text%3C/td%3E%0A%3Ctd%3E%u786E%u8BA4%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u786E%u8BA4%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-button-text%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u53D6%u6D88%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evisible-item-count%3C/td%3E%0A%3Ctd%3E%u53EF%u89C1%u7684%u9009%u9879%u4E2A%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E6%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edefault-index%3C/td%3E%0A%3Ctd%3E%u5355%u5217%u9009%u62E9%u5668%u7684%u9ED8%u8BA4%u9009%u4E2D%u9879%u7D22%u5F15%uFF0C%3Cbr%3E%u591A%u5217%u9009%u62E9%u5668%u8BF7%u53C2%u8003%u4E0B%u65B9%u7684%20Columns%20%u914D%u7F6E%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Cp%3EPicker%20%u7EC4%u4EF6%u7684%u4E8B%u4EF6%u4F1A%u6839%u636E%20columns%20%u662F%u5355%u5217%u6216%u591A%u5217%u8FD4%u56DE%u4E0D%u540C%u7684%u53C2%u6570%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Econfirm%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5B8C%u6210%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%u5355%u5217%uFF1A%u9009%u4E2D%u503C%uFF0C%u9009%u4E2D%u503C%u5BF9%u5E94%u7684%u7D22%u5F15%3Cbr%3E%u591A%u5217%uFF1A%u6240%u6709%u5217%u9009%u4E2D%u503C%uFF0C%u6240%u6709%u5217%u9009%u4E2D%u503C%u5BF9%u5E94%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u53D6%u6D88%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%u5355%u5217%uFF1A%u9009%u4E2D%u503C%uFF0C%u9009%u4E2D%u503C%u5BF9%u5E94%u7684%u7D22%u5F15%3Cbr%3E%u591A%u5217%uFF1A%u6240%u6709%u5217%u9009%u4E2D%u503C%uFF0C%u6240%u6709%u5217%u9009%u4E2D%u503C%u5BF9%u5E94%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Echange%3C/td%3E%0A%3Ctd%3E%u9009%u9879%u6539%u53D8%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%u5355%u5217%uFF1APicker%20%u5B9E%u4F8B%uFF0C%u9009%u4E2D%u503C%uFF0C%u9009%u4E2D%u503C%u5BF9%u5E94%u7684%u7D22%u5F15%3Cbr%3E%u591A%u5217%uFF1APicker%20%u5B9E%u4F8B%uFF0C%u6240%u6709%u5217%u9009%u4E2D%u503C%uFF0C%u5F53%u524D%u5217%u5BF9%u5E94%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22columns-shu-ju-jie-gou%22%3EColumns%20%u6570%u636E%u7ED3%u6784%3C/h3%3E%0A%3Cp%3E%u5F53%u4F20%u5165%u591A%u5217%u6570%u636E%u65F6%uFF0C%3Ccode%3Ecolumns%3C/code%3E%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%u4E0B%3Ccode%3Ekey%3C/code%3E%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3Ekey%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Evalues%3C/td%3E%0A%3Ctd%3E%u5217%u4E2D%u5BF9%u5E94%u7684%u5907%u9009%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EdefaultIndex%3C/td%3E%0A%3Ctd%3E%u521D%u59CB%u9009%u4E2D%u9879%u7684%u7D22%u5F15%uFF0C%u9ED8%u8BA4%u4E3A%200%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-class%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u9879%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etoolbar-class%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u680F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolumn-class%3C/td%3E%0A%3Ctd%3E%u5217%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%20%u53EF%u4EE5%u83B7%u53D6%u5230%20picker%20%u5B9E%u4F8B%u5E76%u8C03%u7528%u5B9E%u4F8B%u65B9%u6CD5%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3EgetValues%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3Evalues%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u6240%u6709%u5217%u9009%u4E2D%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetValues%3C/td%3E%0A%3Ctd%3Evalues%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u6240%u6709%u5217%u9009%u4E2D%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EgetIndexes%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3Eindexes%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u6240%u6709%u5217%u9009%u4E2D%u503C%u5BF9%u5E94%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetIndexes%3C/td%3E%0A%3Ctd%3Eindexes%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u6240%u6709%u5217%u9009%u4E2D%u503C%u5BF9%u5E94%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EgetColumnValue%3C/td%3E%0A%3Ctd%3EcolumnIndex%3C/td%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u5BF9%u5E94%u5217%u9009%u4E2D%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetColumnValue%3C/td%3E%0A%3Ctd%3EcolumnIndex%2C%20value%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u5BF9%u5E94%u5217%u9009%u4E2D%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EgetColumnIndex%3C/td%3E%0A%3Ctd%3EcolumnIndex%3C/td%3E%0A%3Ctd%3EoptionIndex%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u5BF9%u5E94%u5217%u9009%u4E2D%u9879%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetColumnIndex%3C/td%3E%0A%3Ctd%3EcolumnIndex%2C%20optionIndex%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u5BF9%u5E94%u5217%u9009%u4E2D%u9879%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EgetColumnValues%3C/td%3E%0A%3Ctd%3EcolumnIndex%3C/td%3E%0A%3Ctd%3Evalues%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u5BF9%u5E94%u5217%u4E2D%u6240%u6709%u9009%u9879%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsetColumnValues%3C/td%3E%0A%3Ctd%3EcolumnIndex%2C%20values%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u8BBE%u7F6E%u5BF9%u5E94%u5217%u4E2D%u6240%u6709%u9009%u9879%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},3929:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EPopup%20%u5F39%u51FA%u5C42%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-popup%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/popup/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eshow%3C/code%3E%u5C5E%u6027%u63A7%u5236%u5F39%u51FA%u5C42%u662F%u5426%u5C55%u793A%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5C55%u793A%u5F39%u51FA%u5C42%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eis-link%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BshowPopup%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EshowPopup%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dan-chu-wei-zhi%22%3E%u5F39%u51FA%u4F4D%u7F6E%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eposition%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u5F39%u51FA%u4F4D%u7F6E%uFF0C%u9ED8%u8BA4%u5C45%u4E2D%u5F39%u51FA%uFF0C%u53EF%u4EE5%u8BBE%u7F6E%u4E3A%3Ccode%3Etop%3C/code%3E%u3001%3Ccode%3Ebottom%3C/code%3E%u3001%3Ccode%3Eleft%3C/code%3E%u3001%3Ccode%3Eright%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eposition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btop%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecustom-style%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%2020%25%3B%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22guan-bi-tu-biao%22%3E%u5173%u95ED%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Ecloseable%3C/code%3E%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%u8FC7%3Ccode%3Eclose-icon%3C/code%3E%u5C5E%u6027%u81EA%u5B9A%u4E49%u56FE%u6807%uFF0C%u4F7F%u7528%3Ccode%3Eclose-icon-position%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%u56FE%u6807%u4F4D%u7F6E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecloseable%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eposition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bbottom%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecustom-style%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%2020%25%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u81EA%u5B9A%u4E49%u56FE%u6807%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecloseable%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclose-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bclose%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eposition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bbottom%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecustom-style%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%2020%25%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20%u56FE%u6807%u4F4D%u7F6E%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecloseable%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eclose-icon-position%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btop-left%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eposition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bbottom%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecustom-style%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%2020%25%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yuan-jiao-dan-chuang%22%3E%u5706%u89D2%u5F39%u7A97%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Eround%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u5F39%u7A97%u4F1A%u6839%u636E%u5F39%u51FA%u4F4D%u7F6E%u6DFB%u52A0%u4E0D%u540C%u7684%u5706%u89D2%u6837%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eposition%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bbottom%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecustom-style%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%2020%25%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-zhi-gun-dong-chuan-tou%22%3E%u7981%u6B62%u6EDA%u52A8%u7A7F%u900F%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3Cp%3E%u76EE%u524D%uFF0C%u7EC4%u4EF6%u53EF%u4EE5%u901A%u8FC7%20%3Ccode%3Elock-scroll%3C/code%3E%20%u5C5E%u6027%u5904%u7406%u90E8%u5206%u6EDA%u52A8%u7A7F%u900F%u95EE%u9898%u3002%20%3Cstrong%3E%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%3C/strong%3E%0A%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%3C/p%3E%0A%3Ch4%20id%3D%22page-meta%22%3E%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/page-meta.html%22%20target%3D%22_blank%22%3Epage-meta%3C/a%3E%3C/h4%3E%0A%3Cp%3E%u5F53%u5C0F%u7A0B%u5E8F%u57FA%u7840%u5E93%u6700%u4F4E%u7248%u672C%u5728%202.9.0%20%u4EE5%u4E0A%u65F6%uFF0C%u5373%u53EF%u4F7F%u7528%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/component/page-meta.html%22%20target%3D%22_blank%22%3Epage-meta%3C/a%3E%20%u7EC4%u4EF6%u52A8%u6001%u4FEE%u6539%u9875%u9762%u6837%u5F0F%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E%26lt%3B%21--%20page-meta%20%u53EA%u80FD%u662F%u9875%u9762%u5185%u7684%u7B2C%u4E00%u4E2A%u8282%u70B9%20--%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Epage-meta%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Epage-style%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%3F%20%26%23x27%3Boverflow%3A%20hidden%3B%26%23x27%3B%20%3A%20%26%23x27%3B%26%23x27%3B%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecatch%3Atouchstart%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5F39%u51FA%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E100%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eposition%3C/td%3E%0A%3Ctd%3E%u5F39%u51FA%u4F4D%u7F6E%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Etop%3C/code%3E%20%3Ccode%3Ebottom%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%20%3Ccode%3Eleft%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ecenter%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u65F6%u957F%uFF0C%u5355%u4F4D%u4E3A%u6BEB%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20object%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E300%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eround%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5706%u89D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5F39%u51FA%u5C42%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u906E%u7F69%u5C42%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-overlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u70B9%u51FB%u906E%u7F69%u5C42%u540E%u5173%u95ED%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecloseable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5173%u95ED%u56FE%u6807%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-icon%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ecross%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-bottom%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%20iPhoneX%20%u7559%u51FA%u5E95%u90E8%u5B89%u5168%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-top%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7559%u51FA%u9876%u90E8%u5B89%u5168%u8DDD%u79BB%uFF08%u72B6%u6001%u680F%u9AD8%u5EA6%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elock-scroll%20%3Ccode%3Ev1.7.3%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u9501%u5B9A%u80CC%u666F%u6EDA%u52A8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u5F39%u51FA%u5C42%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-overlay%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u906E%u7F69%u5C42%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Abefore-enter%3C/td%3E%0A%3Ctd%3E%u8FDB%u5165%u524D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aenter%3C/td%3E%0A%3Ctd%3E%u8FDB%u5165%u4E2D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aafter-enter%3C/td%3E%0A%3Ctd%3E%u8FDB%u5165%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Abefore-leave%3C/td%3E%0A%3Ctd%3E%u79BB%u5F00%u524D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aleave%3C/td%3E%0A%3Ctd%3E%u79BB%u5F00%u4E2D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aafter-leave%3C/td%3E%0A%3Ctd%3E%u79BB%u5F00%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},8894:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EProgress%20%u8FDB%u5EA6%u6761%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5C55%u793A%u64CD%u4F5C%u7684%u5F53%u524D%u8FDB%u5EA6%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-progress%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/progress/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u8FDB%u5EA6%u6761%u9ED8%u8BA4%u4E3A%u84DD%u8272%uFF0C%u4F7F%u7528%3Ccode%3Epercentage%3C/code%3E%u5C5E%u6027%u6765%u8BBE%u7F6E%u5F53%u524D%u8FDB%u5EA6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-progress%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Epercentage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xian-tiao-cu-xi%22%3E%u7EBF%u6761%u7C97%u7EC6%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Estroke-width%3C/code%3E%u53EF%u4EE5%u8BBE%u7F6E%u8FDB%u5EA6%u6761%u7684%u7C97%u7EC6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-progress%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3E%3Apercentage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estroke-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhi-hui%22%3E%u7F6E%u7070%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Einactive%3C/code%3E%u5C5E%u6027%u540E%u8FDB%u5EA6%u6761%u5C06%u7F6E%u7070%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-progress%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einactive%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Epercentage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yang-shi-ding-zhi%22%3E%u6837%u5F0F%u5B9A%u5236%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u4F7F%u7528%3Ccode%3Epivot-text%3C/code%3E%u5C5E%u6027%u81EA%u5B9A%u4E49%u6587%u5B57%uFF0C%3Ccode%3Ecolor%3C/code%3E%u5C5E%u6027%u81EA%u5B9A%u4E49%u8FDB%u5EA6%u6761%u989C%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-progress%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Epivot-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6A59%u8272%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23f2826a%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Epercentage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B25%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-progress%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Epivot-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7EA2%u8272%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ee0a24%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Epercentage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-progress%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Epercentage%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B75%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Epivot-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7D2B%u8272%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Epivot-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blinear-gradient%28to%20right%2C%20%23be99ff%2C%20%237232dd%29%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Einactive%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7F6E%u7070%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epercentage%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u767E%u5206%u6BD4%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Estroke-width%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6761%u7C97%u7EC6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E4px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-pivot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u8FDB%u5EA6%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6761%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%231989fa%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext-color%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6587%u5B57%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23fff%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etrack-color%3C/td%3E%0A%3Ctd%3E%u8F68%u9053%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23e5e5e5%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epivot-text%3C/td%3E%0A%3Ctd%3E%u6587%u5B57%u663E%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u767E%u5206%u6BD4%u6587%u5B57%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epivot-color%3C/td%3E%0A%3Ctd%3E%u6587%u5B57%u80CC%u666F%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u4E0E%u8FDB%u5EA6%u6761%u989C%u8272%u4E00%u81F4%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9029:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ERadio%20%u5355%u9009%u6846%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u5728%u4E00%u7EC4%u5907%u9009%u9879%u4E2D%u8FDB%u884C%u5355%u9009%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-radio%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/radio/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-radio-group%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/radio-group/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Evalue%3C/code%3E%u7ED1%u5B9A%u503C%u5F53%u524D%u9009%u4E2D%u9879%u7684%20name%20%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eradio%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B1%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eradio%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shui-ping-pai-lie%22%3E%u6C34%u5E73%u6392%u5217%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Edirection%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u4E3A%3Ccode%3Ehorizontal%3C/code%3E%u540E%uFF0C%u5355%u9009%u6846%u7EC4%u4F1A%u53D8%u6210%u6C34%u5E73%u6392%u5217%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edirection%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhorizontal%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-zhuang-tai%22%3E%u7981%u7528%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Edisabled%3C/code%3E%u5C5E%u6027%u7981%u6B62%u9009%u9879%u5207%u6362%uFF0C%u5728%3Ccode%3ERadio%3C/code%3E%u4E0A%u8BBE%u7F6E%3Ccode%3Ediabled%3C/code%3E%u53EF%u4EE5%u7981%u7528%u5355%u4E2A%u9009%u9879%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-xing-zhuang%22%3E%u81EA%u5B9A%u4E49%u5F62%u72B6%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Eshape%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u4E3A%3Ccode%3Esquare%3C/code%3E%uFF0C%u5355%u9009%u6846%u7684%u5F62%u72B6%u4F1A%u53D8%u6210%u65B9%u5F62%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshape%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsquare%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshape%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsquare%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Echecked-color%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u9009%u4E2D%u72B6%u6001%u7684%u56FE%u6807%u989C%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2307c160%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2307c160%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-da-xiao%22%3E%u81EA%u5B9A%u4E49%u5927%u5C0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eicon-size%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%u56FE%u6807%u7684%u5927%u5C0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon-size%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B24px%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon-size%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B24px%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-biao%22%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eicon%3C/code%3E%u63D2%u69FD%u81EA%u5B9A%u4E49%u56FE%u6807%uFF0C%u9700%u8981%u8BBE%u7F6E%3Ccode%3Euse-icon-slot%3C/code%3E%u5C5E%u6027%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-icon-slot%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u81EA%u5B9A%u4E49%u56FE%u6807%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bicon%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%3D%3D%3D%20%26%23x27%3B1%26%23x27%3B%20%3F%20icon.active%20%3A%20icon.normal%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-icon-slot%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%u81EA%u5B9A%u4E49%u56FE%u6807%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bicon%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%3D%3D%3D%20%26%23x27%3B2%26%23x27%3B%20%3F%20icon.active%20%3A%20icon.normal%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eradio%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Enormal%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B//img.yzcdn.cn/icon-normal.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B//img.yzcdn.cn/icon-active.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eradio%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-wen-ben-dian-ji%22%3E%u7981%u7528%u6587%u672C%u70B9%u51FB%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Elabel-disabled%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u7981%u7528%u5355%u9009%u6846%u6587%u672C%u70B9%u51FB%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel-disabled%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel-disabled%3C/span%3E%26gt%3B%3C/span%3E%u5355%u9009%u6846%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yu-cell-zu-jian-yi-qi-shi-yong%22%3E%u4E0E%20Cell%20%u7EC4%u4EF6%u4E00%u8D77%u4F7F%u7528%3C/h3%3E%0A%3Cp%3E%u6B64%u65F6%u4F60%u9700%u8981%u518D%u5F15%u5165%3Ccode%3ECell%3C/code%3E%u548C%3Ccode%3ECellGroup%3C/code%3E%u7EC4%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20radio%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u9009%u6846%201%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclickable%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edata-name%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClick%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright-icon%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B1%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u9009%u6846%202%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclickable%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edata-name%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClick%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-radio%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright-icon%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-radio-group%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eradio%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B1%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eradio%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClick%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20name%20%7D%20%3D%20event.currentTarget.dataset%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eradio%3C/span%3E%3A%20name%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22radiogroup-props%22%3ERadioGroup%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5728%u8868%u5355%u5185%u63D0%u4EA4%u65F6%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u9879%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Eany%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6240%u6709%u5355%u9009%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edirection%20%3Ccode%3Ev1.6.7%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6392%u5217%u65B9%u5411%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ehorizontal%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evertical%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22radio-props%22%3ERadio%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshape%3C/td%3E%0A%3Ctd%3E%u5F62%u72B6%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Esquare%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eround%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u7981%u7528%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-disabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6587%u672C%u5185%u5BB9%u70B9%u51FB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-position%3C/td%3E%0A%3Ctd%3E%u6587%u672C%u4F4D%u7F6E%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eleft%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-size%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u5927%u5C0F%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E20px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Echecked-color%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u72B6%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%231989fa%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-icon-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%20icon%20%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22radio-event%22%3ERadio%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5F53%u7ED1%u5B9A%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u9879%u7684%20name%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22radio-wai-bu-yang-shi-lei%22%3ERadio%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-class%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel-class%3C/td%3E%0A%3Ctd%3E%u63CF%u8FF0%u4FE1%u606F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22radiogroup-event%22%3ERadioGroup%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5F53%u7ED1%u5B9A%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u9879%u7684%20name%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},7477:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ERate%20%u8BC4%u5206%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5BF9%u4E8B%u7269%u8FDB%u884C%u8BC4%u7EA7%u64CD%u4F5C%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-rate%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/rate/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E3%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-biao%22%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blike%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evoid-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blike-o%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yang-shi%22%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2025%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ffd21e%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evoid-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bstar%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evoid-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23eee%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ban-xing%22%3E%u534A%u661F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eallow-half%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evoid-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bstar%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evoid-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23eee%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2.5%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20event.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-shu-liang%22%3E%u81EA%u5B9A%u4E49%u6570%u91CF%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecount%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%206%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-zhuang-tai%22%3E%u7981%u7528%u72B6%u6001%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhi-du-zhuang-tai%22%3E%u53EA%u8BFB%u72B6%u6001%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ereadonly%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jian-ting-change-shi-jian%22%3E%u76D1%u542C%20change%20%u4E8B%u4EF6%3C/h3%3E%0A%3Cp%3E%u8BC4%u5206%u53D8%u5316%u65F6%uFF0C%u4F1A%u89E6%u53D1%20%3Ccode%3Echange%3C/code%3E%20%u4E8B%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-rate%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5F53%u524D%u503C%uFF1A%26%23x27%3B%3C/span%3E%20+%20event.detail%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5728%u8868%u5355%u5185%u63D0%u4EA4%u65F6%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecount%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u603B%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E5%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u5927%u5C0F%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%20%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E20px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Egutter%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u95F4%u8DDD%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%20%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E4px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u65F6%u7684%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23ffd21e%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evoid-color%3C/td%3E%0A%3Ctd%3E%u672A%u9009%u4E2D%u65F6%u7684%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23c7c7c7%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u65F6%u7684%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Estar%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evoid-icon%3C/td%3E%0A%3Ctd%3E%u672A%u9009%u4E2D%u65F6%u7684%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Estar-o%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eallow-half%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5141%u8BB8%u534A%u9009%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ereadonly%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u53EA%u8BFB%u72B6%u6001%20%08%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u8BC4%u5206%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled-color%3C/td%3E%0A%3Ctd%3E%u7981%u7528%u65F6%u7684%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23bdbdbd%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etouchable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u53EF%u4EE5%u901A%u8FC7%u6ED1%u52A8%u624B%u52BF%u9009%u62E9%u8BC4%u5206%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Echange%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u5206%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%u5F53%u524D%u5206%u503C%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-class%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2839:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESearch%20%u641C%u7D22%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u641C%u7D22%u573A%u666F%u7684%u8F93%u5165%u6846%u7EC4%u4EF6%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-search%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/search/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evan-search%3C/code%3E%20%u4E2D%uFF0Cvalue%20%u7528%u4E8E%u63A7%u5236%u641C%u7D22%u6846%u4E2D%u7684%u6587%u5B57%u3002background%20%u53EF%u4EE5%u81EA%u5B9A%u4E49%u641C%u7D22%u6846%u5916%u90E8%u80CC%u666F%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-search%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u641C%u7D22%u5173%u952E%u8BCD%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shi-jian-jian-ting%22%3E%u4E8B%u4EF6%u76D1%u542C%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evan-search%3C/code%3E%20%u63D0%u4F9B%u4E86%20search%20%u548C%20cancel%20%u4E8B%u4EF6%u3002search%20%u4E8B%u4EF6%u5728%u7528%u6237%u70B9%u51FB%u952E%u76D8%u4E0A%u7684%u641C%u7D22%u6309%u94AE%u89E6%u53D1%u3002cancel%20%u4E8B%u4EF6%u5728%u7528%u6237%u70B9%u51FB%u641C%u7D22%u6846%u53F3%u4FA7%u53D6%u6D88%u6309%u94AE%u65F6%u89E6%u53D1%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-search%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u641C%u7D22%u5173%u952E%u8BCD%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow-action%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Asearch%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSearch%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Acancel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonCancel%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sou-suo-kuang-nei-rong-dui-qi%22%3E%u641C%u7D22%u6846%u5185%u5BB9%u5BF9%u9F50%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Einput-align%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u641C%u7D22%u6846%u5185%u5BB9%u7684%u5BF9%u9F50%u65B9%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-search%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Einput-align%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcenter%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u641C%u7D22%u5173%u952E%u8BCD%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-sou-suo-kuang%22%3E%u7981%u7528%u641C%u7D22%u6846%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Edisabled%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u5C06%u7EC4%u4EF6%u8BBE%u7F6E%u4E3A%u7981%u7528%u72B6%u6001%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-search%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u641C%u7D22%u5173%u952E%u8BCD%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-bei-jing-se%22%3E%u81EA%u5B9A%u4E49%u80CC%u666F%u8272%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Ebackground%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u641C%u7D22%u6846%u5916%u90E8%u7684%u80CC%u666F%u8272%uFF0C%u901A%u8FC7%3Ccode%3Eshape%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u641C%u7D22%u6846%u7684%u5F62%u72B6%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Eround%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-search%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshape%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bround%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebackground%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%234fc08d%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u641C%u7D22%u5173%u952E%u8BCD%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-an-niu%22%3E%u81EA%u5B9A%u4E49%u6309%u94AE%3C/h3%3E%0A%3Cp%3E%3Ccode%3Evan-search%3C/code%3E%20%u652F%u6301%u81EA%u5B9A%u4E49%u53F3%u4FA7%u53D6%u6D88%u6309%u94AE%uFF0C%u4F7F%u7528%u540D%u5B57%u4E3A%20action%20%u7684%20slot%uFF0C%u5E76%u8BBE%u7F6E%20use-action-slot%20%u4E3A%20true%20%u5373%u53EF%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-search%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Elabel%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5730%u5740%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eplaceholder%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u8BF7%u8F93%u5165%u641C%u7D22%u5173%u952E%u8BCD%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-action-slot%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Asearch%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSearch%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Baction%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Atap%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClick%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u641C%u7D22%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-search%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Ee%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20e.detail%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonSearch%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u641C%u7D22%26%23x27%3B%3C/span%3E%20+%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.data.value%29%3B%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClick%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u641C%u7D22%26%23x27%3B%3C/span%3E%20+%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.data.value%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5728%u8868%u5355%u5185%u63D0%u4EA4%u65F6%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u641C%u7D22%u6846%u5DE6%u4FA7%u6587%u672C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshape%3C/td%3E%0A%3Ctd%3E%u5F62%u72B6%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eround%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Esquare%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u8F93%u5165%u7684%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebackground%3C/td%3E%0A%3Ctd%3E%u641C%u7D22%u6846%u80CC%u666F%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23f2f2f2%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-action%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u641C%u7D22%u6846%u53F3%u4FA7%u663E%u793A%u53D6%u6D88%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eaction-text%20%3Ccode%3Ev1.0.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u53D6%u6D88%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efocus%3C/td%3E%0A%3Ctd%3E%u83B7%u53D6%u7126%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eerror%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C06%u8F93%u5165%u5185%u5BB9%u6807%u7EA2%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u8F93%u5165%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ereadonly%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u53EA%u8BFB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclearable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u542F%u7528%u6E05%u9664%u63A7%u4EF6%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclear-trigger%20%3Ccode%3Ev1.8.4%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u6E05%u9664%u56FE%u6807%u7684%u65F6%u673A%uFF0C%3Ccode%3Ealways%3C/code%3E%20%u8868%u793A%u8F93%u5165%u6846%u4E0D%u4E3A%u7A7A%u65F6%u5C55%u793A%uFF0C%3Cbr%3E%3Ccode%3Efocus%3C/code%3E%20%u8868%u793A%u8F93%u5165%u6846%u805A%u7126%u4E14%u4E0D%u4E3A%u7A7A%u65F6%u5C55%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efocus%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclear-icon%20%3Ccode%3Ev1.8.4%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6E05%u9664%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3E%u56FE%u6807%u540D%u79F0%3C/a%3E%u6216%u56FE%u7247%u94FE%u63A5%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eclear%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emaxlength%3C/td%3E%0A%3Ctd%3E%u6700%u5927%u8F93%u5165%u957F%u5EA6%uFF0C%u8BBE%u7F6E%u4E3A%20-1%20%u7684%u65F6%u5019%u4E0D%u9650%u5236%u6700%u5927%u957F%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E-1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-action-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%20action%20slot%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplaceholder%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u4E3A%u7A7A%u65F6%u5360%u4F4D%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplaceholder-style%3C/td%3E%0A%3Ctd%3E%u6307%u5B9A%u5360%u4F4D%u7B26%u7684%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einput-align%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5185%u5BB9%u5BF9%u9F50%u65B9%u5F0F%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ecenter%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eleft%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-left-icon-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u8F93%u5165%u6846%u5DE6%u4FA7%u56FE%u6807%20slot%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-right-icon-slot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u8F93%u5165%u6846%u53F3%u4FA7%u56FE%u6807%20slot%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-icon%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5DE6%u4FA7%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20Icon%20%u7EC4%u4EF6%uFF08%u5982%u679C%u8BBE%u7F6E%u4E86%20use-left-icon-slot%uFF0C%u5219%u8BE5%u5C5E%u6027%u65E0%u6548%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Esearch%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u53F3%u4FA7%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20Icon%20%u7EC4%u4EF6%uFF08%u5982%u679C%u8BBE%u7F6E%u4E86%20use-right-icon-slot%uFF0C%u5219%u8BE5%u5C5E%u6027%u65E0%u6548%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Asearch%3C/td%3E%0A%3Ctd%3E%u786E%u5B9A%u641C%u7D22%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u8F93%u5165%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u5185%u5BB9%u53D8%u5316%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u8F93%u5165%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Acancel%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u641C%u7D22%u641C%u7D22%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Afocus%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u805A%u7126%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Ablur%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5931%u7126%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclear%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u6E05%u7A7A%u63A7%u4EF6%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-input%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u641C%u7D22%u533A%u57DF%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eaction%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u641C%u7D22%u6846%u53F3%u4FA7%u6309%u94AE%uFF0C%u9700%u8981%u5728%3Ccode%3Euse-action-slot%3C/code%3E%u4E3A%20true%20%u65F6%u624D%u4F1A%u663E%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u641C%u7D22%u6846%u5DE6%u4FA7%u6587%u672C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8F93%u5165%u6846%u5DE6%u4FA7%u56FE%u6807%uFF0C%u9700%u8981%u5728%3Ccode%3Euse-left-icon-slot%3C/code%3E%u4E3A%20true%20%u65F6%u624D%u4F1A%u663E%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-icon%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8F93%u5165%u6846%u53F3%u4FA7%u56FE%u6807%uFF0C%u9700%u8981%u5728%3Ccode%3Euse-right-icon-slot%3C/code%3E%u4E3A%20true%20%u65F6%u624D%u4F1A%u663E%u793A%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efield-class%3C/td%3E%0A%3Ctd%3E%u641C%u7D22%u6846%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einput-class%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-class%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},978:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EShareSheet%20%u5206%u4EAB%u9762%u677F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-share-sheet%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/share-sheet/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u5206%u4EAB%u9762%u677F%u901A%u8FC7%20%3Ccode%3Eoptions%3C/code%3E%20%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u663E%u793A%u5206%u4EAB%u9762%u677F%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClick%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-share-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20showShare%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7ACB%u5373%u5206%u4EAB%u7ED9%u597D%u53CB%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20options%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aselect%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSelect%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EshowShare%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5FAE%u4FE1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bwechat%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3EopenType%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bshare%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5FAE%u535A%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bweibo%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u590D%u5236%u94FE%u63A5%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Blink%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5206%u4EAB%u6D77%u62A5%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bposter%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E8C%u7EF4%u7801%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bqrcode%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClick%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3EshowShare%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3EshowShare%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonSelect%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast%28event.detail.name%29%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.onClose%28%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-duo-xing-xuan-xiang%22%3E%u5C55%u793A%u591A%u884C%u9009%u9879%3C/h3%3E%0A%3Cp%3E%u5F53%u5206%u4EAB%u9009%u9879%u7684%u6570%u91CF%u8F83%u591A%u65F6%uFF0C%u53EF%u4EE5%u5C06%20%3Ccode%3Eoptions%3C/code%3E%20%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-share-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20showShare%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7ACB%u5373%u5206%u4EAB%u7ED9%u597D%u53CB%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20options%20%7D%7D%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EshowShare%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5FAE%u4FE1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bwechat%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5FAE%u535A%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bweibo%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3BQQ%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bqq%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u590D%u5236%u94FE%u63A5%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Blink%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5206%u4EAB%u6D77%u62A5%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bposter%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E8C%u7EF4%u7801%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bqrcode%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-biao%22%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u9664%u4E86%u4F7F%u7528%u5185%u7F6E%u7684%u51E0%u79CD%u56FE%u6807%u5916%uFF0C%u53EF%u4EE5%u76F4%u63A5%u5728%20%3Ccode%3Eicon%3C/code%3E%20%u4E2D%u4F20%u5165%u56FE%u7247%20URL%20%u6765%u4F7F%u7528%u81EA%u5B9A%u4E49%u7684%u56FE%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-share-sheet%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20showShare%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20options%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EshowShare%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u540D%u79F0%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/custom-icon-fire.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u540D%u79F0%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/custom-icon-light.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u540D%u79F0%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/custom-icon-water.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-miao-shu-xin-xi%22%3E%u5C55%u793A%u63CF%u8FF0%u4FE1%u606F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Edescription%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u6807%u9898%u4E0B%u65B9%u7684%u63CF%u8FF0%u6587%u5B57%2C%20%u5728%20%3Ccode%3Eoptions%3C/code%3E%20%u5185%u8BBE%u7F6E%20%3Ccode%3Edescription%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u6DFB%u52A0%u5206%u4EAB%u9009%u9879%u63CF%u8FF0%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-share-sheet%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20showShare%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20options%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u7ACB%u5373%u5206%u4EAB%u7ED9%u597D%u53CB%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63CF%u8FF0%u4FE1%u606F%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EshowShare%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eoptions%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5FAE%u4FE1%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bwechat%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5FAE%u535A%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bweibo%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u590D%u5236%u94FE%u63A5%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Blink%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edescription%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5206%u4EAB%u6D77%u62A5%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bposter%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E8C%u7EF4%u7801%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bqrcode%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eoptions%3C/td%3E%0A%3Ctd%3E%u5206%u4EAB%u9009%u9879%3C/td%3E%0A%3Ctd%3E%3Cem%3EOption%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u9876%u90E8%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel-text%3C/td%3E%0A%3Ctd%3E%u53D6%u6D88%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%u53D6%u6D88%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edescription%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u4E0B%u65B9%u7684%u8F85%u52A9%u63CF%u8FF0%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u65F6%u957F%uFF0C%u5355%u4F4D%u6BEB%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20string%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E300%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoverlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose-on-click-overlay%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u70B9%u51FB%u906E%u7F69%u5C42%u540E%u5173%u95ED%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-bottom%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u5E95%u90E8%u5B89%u5168%u533A%u9002%u914D%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22option-shu-ju-jie-gou%22%3EOption%20%u6570%u636E%u7ED3%u6784%3C/h3%3E%0A%3Cp%3E%3Ccode%3Eoptions%3C/code%3E%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%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u952E%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5206%u4EAB%u6E20%u9053%u540D%u79F0%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edescription%3C/td%3E%0A%3Ctd%3E%u5206%u4EAB%u9009%u9879%u63CF%u8FF0%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eqq%3C/code%3E%20%3Ccode%3Elink%3C/code%3E%20%3Ccode%3Eweibo%3C/code%3E%20%3Ccode%3Ewechat%3C/code%3E%20%3Ccode%3Eposter%3C/code%3E%20%3Ccode%3Eqrcode%3C/code%3E%20%3Ccode%3Eweapp-qrcode%3C/code%3E%20%3Ccode%3Ewechat-moments%3C/code%3E%uFF0C%u652F%u6301%u4F20%u5165%u56FE%u7247%20URL%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EopenType%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%20%3Ccode%3Eopen-type%3C/code%3E%uFF0C%u53EF%u7528%u4E8E%u5B9E%u73B0%u5206%u4EAB%u529F%u80FD%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eshare%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eselect%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5206%u4EAB%u9009%u9879%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Cem%3Eoption%3A%20Option%2C%20index%3A%20number%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecancel%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u53D6%u6D88%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclick-overlay%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u906E%u7F69%u5C42%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u9876%u90E8%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edescription%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u63CF%u8FF0%u6587%u5B57%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2827:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESidebar%20%u4FA7%u8FB9%u5BFC%u822A%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-sidebar%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/sidebar/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-sidebar-item%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/sidebar-item/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u5728%3Ccode%3Evan-sidebar%3C/code%3E%u4E0A%u8BBE%u7F6E%3Ccode%3EactiveKey%3C/code%3E%u5C5E%u6027%u6765%u63A7%u5236%u9009%u4E2D%u9879%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-key%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeKey%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveKey%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22hui-biao-ti-shi%22%3E%u5FBD%u6807%u63D0%u793A%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Edot%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u53F3%u4E0A%u89D2%u5C55%u793A%u4E00%u4E2A%u5C0F%u7EA2%u70B9%u3002%u8BBE%u7F6E%3Ccode%3Ebadge%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u4F1A%u5728%u53F3%u4E0A%u89D2%u5C55%u793A%u76F8%u5E94%u7684%u5FBD%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-key%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeKey%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edot%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebadge%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B5%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebadge%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B99+%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-xuan-xiang%22%3E%u7981%u7528%u9009%u9879%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Edisabled%3C/code%3E%u5C5E%u6027%u7981%u7528%u9009%u9879%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-key%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeKey%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jian-ting-qie-huan-shi-jian%22%3E%u76D1%u542C%u5207%u6362%u4E8B%u4EF6%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Echange%3C/code%3E%u65B9%u6CD5%u6765%u76D1%u542C%u5207%u6362%u5BFC%u822A%u9879%u65F6%u7684%u4E8B%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-key%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeKey%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%201%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%202%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%u540D%203%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sidebar%3C/span%3E%26gt%3B%3C/span%3E%0A%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-notify%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-notify%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Notify%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B@vant/weapp/dist/notify/notify%26%23x27%3B%3C/span%3E%3B%0A%0APage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveKey%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Notify%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bprimary%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20event.detail%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sidebar-props%22%3ESidebar%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3EactiveKey%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u9879%u7684%u7D22%u5F15%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sidebar-event%22%3ESidebar%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Echange%3C/td%3E%0A%3Ctd%3E%u5207%u6362%u5FBD%u7AE0%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u5FBD%u7AE0%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sidebar-wai-bu-yang-shi-lei%22%3ESidebar%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sidebaritem-props%22%3ESidebarItem%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u53F3%u4E0A%u89D2%u5C0F%u7EA2%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einfo%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u53F3%u4E0A%u89D2%u5FBD%u6807%u7684%u5185%u5BB9%uFF08%u5DF2%u5E9F%u5F03%uFF0C%u8BF7%u4F7F%u7528%20badge%20%u5C5E%u6027%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebadge%20%3Ccode%3Ev1.5.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u53F3%u4E0A%u89D2%u5FBD%u6807%u7684%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u8BE5%u9879%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sidebaritem-slot%22%3ESidebarItem%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6807%u9898%u680F%uFF0C%u5982%u679C%u8BBE%u7F6E%u4E86%3Ccode%3Etitle%3C/code%3E%u5C5E%u6027%u5219%u4E0D%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sidebaritem-event%22%3ESidebarItem%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u5FBD%u7AE0%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eevent.detail%3C/code%3E%20%u4E3A%u5F53%u524D%u5FBD%u7AE0%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22sidebaritem-wai-bu-yang-shi-lei%22%3ESidebarItem%20%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},8746:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESkeleton%20%u9AA8%u67B6%u5C4F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5728%u5185%u5BB9%u52A0%u8F7D%u8FC7%u7A0B%u4E2D%u5C55%u793A%u4E00%u7EC4%u5360%u4F4D%u56FE%u5F62%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-skeleton%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/skeleton/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Etitle%3C/code%3E%u5C5E%u6027%u663E%u793A%u6807%u9898%u5360%u4F4D%u56FE%uFF0C%u901A%u8FC7%3Ccode%3Erow%3C/code%3E%u5C5E%u6027%u914D%u7F6E%u5360%u4F4D%u6BB5%u843D%u884C%u6570%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-skeleton%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Erow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xian-shi-tou-xiang%22%3E%u663E%u793A%u5934%u50CF%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eavatar%3C/code%3E%u5C5E%u6027%u663E%u793A%u5934%u50CF%u5360%u4F4D%u56FE%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-skeleton%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eavatar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Erow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhan-shi-zi-zu-jian%22%3E%u5C55%u793A%u5B50%u7EC4%u4EF6%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Eloading%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u6210%3Ccode%3Efalse%3C/code%3E%u8868%u793A%u5185%u5BB9%u52A0%u8F7D%u5B8C%u6210%uFF0C%u6B64%u65F6%u4F1A%u9690%u85CF%u5360%u4F4D%u56FE%uFF0C%u5E76%u663E%u793A%3Ccode%3ESkeleton%3C/code%3E%u7684%u5B50%u7EC4%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-skeleton%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eavatar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Erow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20loading%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%u5B9E%u9645%u5185%u5BB9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-skeleton%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonReady%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Erow%3C/td%3E%0A%3Ctd%3E%u6BB5%u843D%u5360%u4F4D%u56FE%u884C%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Erow-width%3C/td%3E%0A%3Ctd%3E%u6BB5%u843D%u5360%u4F4D%u56FE%u5BBD%u5EA6%uFF0C%u53EF%u4F20%u6570%u7EC4%u6765%u8BBE%u7F6E%u6BCF%u4E00%u884C%u7684%u5BBD%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20string%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E100%25%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u6807%u9898%u5360%u4F4D%u56FE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-width%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u5360%u4F4D%u56FE%u5BBD%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E40%25%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eavatar%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5934%u50CF%u5360%u4F4D%u56FE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eavatar-size%3C/td%3E%0A%3Ctd%3E%u5934%u50CF%u5360%u4F4D%u56FE%u5927%u5C0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E32px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eavatar-shape%3C/td%3E%0A%3Ctd%3E%u5934%u50CF%u5360%u4F4D%u56FE%u5F62%u72B6%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Esquare%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eround%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5360%u4F4D%u56FE%uFF0C%u4F20%3Ccode%3Efalse%3C/code%3E%u65F6%u4F1A%u5C55%u793A%u5B50%u7EC4%u4EF6%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eanimate%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u52A8%u753B%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},1771:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESlider%20%u6ED1%u5757%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u6ED1%u52A8%u8F93%u5165%u6761%uFF0C%u7528%u4E8E%u5728%u7ED9%u5B9A%u7684%u8303%u56F4%u5185%u9009%u62E9%u4E00%u4E2A%u503C%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-slider%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/slider/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-ben-yong-fa%22%3E%u57FA%u672C%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showToast%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%u5F53%u524D%u503C%uFF1A%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail%7D%3C/span%3E%60%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhi-ding-xuan-ze-fan-wei%22%3E%u6307%u5B9A%u9009%u62E9%u8303%u56F4%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emin%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B-50%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emax%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong%22%3E%u7981%u7528%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhi-ding-bu-chang%22%3E%u6307%u5B9A%u6B65%u957F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estep%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B10%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yang-shi%22%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B50%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebar-height%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B4px%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ee0a24%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-an-niu%22%3E%u81EA%u5B9A%u4E49%u6309%u94AE%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20currentValue%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-button-slot%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Adrag%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonDrag%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcustom-button%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bbutton%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%7B%7B%20currentValue%20%7D%7D/100%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-slider%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentValue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E50%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonDrag%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcurrentValue%3C/span%3E%3A%20event.detail.value%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u8FDB%u5EA6%u767E%u5206%u6BD4%uFF0C%u5728%u53CC%u6ED1%u5757%u6A21%u5F0F%u4E0B%u4E3A%u6570%u7EC4%u683C%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20number%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6ED1%u5757%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax%3C/td%3E%0A%3Ctd%3E%u6700%u5927%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E100%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emin%3C/td%3E%0A%3Ctd%3E%u6700%u5C0F%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Estep%3C/td%3E%0A%3Ctd%3E%u6B65%u957F%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebar-height%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6761%u9AD8%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%20%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E2px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-color%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6761%u6FC0%u6D3B%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%231989fa%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einactive-color%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u6761%u9ED8%u8BA4%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23e5e5e5%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-slot-button%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u94AE%u63D2%u69FD%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Erange%20%3Ccode%3Ev1.8.4%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u53CC%u6ED1%u5757%u6A21%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Adrag%3C/td%3E%0A%3Ctd%3E%u62D6%u52A8%u8FDB%u5EA6%u6761%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail.value%3A%20%u5F53%u524D%u8FDB%u5EA6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u8FDB%u5EA6%u503C%u6539%u53D8%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u8FDB%u5EA6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Adrag-start%3C/td%3E%0A%3Ctd%3E%u5F00%u59CB%u62D6%u52A8%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Adrag-end%3C/td%3E%0A%3Ctd%3E%u7ED3%u675F%u62D6%u52A8%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebutton%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6ED1%u5757%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3E%7B%20value%3A%20number%20%7D%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-button%20%3Ccode%3Ev1.8.4%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5DE6%u4FA7%u6ED1%u5757%u6309%u94AE%uFF08%u53CC%u6ED1%u5757%u6A21%u5F0F%u4E0B%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3E%7B%20value%3A%20number%20%7D%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-button%20%3Ccode%3Ev1.8.4%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4FA7%u6ED1%u5757%u6309%u94AE%20%uFF08%u53CC%u6ED1%u5757%u6A21%u5F0F%u4E0B%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3E%7B%20value%3A%20number%20%7D%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},6202:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EStepper%20%u6B65%u8FDB%u5668%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-stepper%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/stepper/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Evalue%3C/code%3E%u8BBE%u7F6E%u8F93%u5165%u503C%uFF0C%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Echange%3C/code%3E%u4E8B%u4EF6%u76D1%u542C%u5230%u8F93%u5165%u503C%u7684%u53D8%u5316%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28event.detail%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22bu-chang-she-zhi%22%3E%u6B65%u957F%u8BBE%u7F6E%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Estep%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u6BCF%u6B21%u70B9%u51FB%u589E%u52A0%u6216%u51CF%u5C11%u6309%u94AE%u65F6%u53D8%u5316%u7684%u503C%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3E1%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estep%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xian-zhi-shu-ru-fan-wei%22%3E%u9650%u5236%u8F93%u5165%u8303%u56F4%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Emin%3C/code%3E%u548C%3Ccode%3Emax%3C/code%3E%u5C5E%u6027%u9650%u5236%u8F93%u5165%u503C%u7684%u8303%u56F4%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%205%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emin%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B5%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emax%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B8%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xian-zhi-shu-ru-zheng-shu%22%3E%u9650%u5236%u8F93%u5165%u6574%u6570%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Einteger%3C/code%3E%u5C5E%u6027%u540E%uFF0C%u8F93%u5165%u6846%u5C06%u9650%u5236%u53EA%u80FD%u8F93%u5165%u6574%u6570%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einteger%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-zhuang-tai%22%3E%u7981%u7528%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Edisabled%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22guan-bi-chang-an%22%3E%u5173%u95ED%u957F%u6309%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Elong-press%3C/code%3E%u5C5E%u6027%u51B3%u5B9A%u6B65%u8FDB%u5668%u662F%u5426%u5F00%u542F%u957F%u6309%u624B%u52BF%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Elong-press%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20false%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gu-ding-xiao-shu-wei-shu%22%3E%u56FA%u5B9A%u5C0F%u6570%u4F4D%u6570%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Edecimal-length%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u4FDD%u7559%u56FA%u5B9A%u7684%u5C0F%u6570%u4F4D%u6570%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estep%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B0.2%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edecimal-length%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yi-bu-bian-geng%22%3E%u5F02%u6B65%u53D8%u66F4%3C/h3%3E%0A%3Cp%3E%u5982%u679C%u9700%u8981%u5F02%u6B65%u5730%u4FEE%u6539%u8F93%u5165%u6846%u7684%u503C%uFF0C%u53EF%u4EE5%u8BBE%u7F6E%3Ccode%3Easync-change%3C/code%3E%u5C5E%u6027%uFF0C%u5E76%u5728%3Ccode%3Echange%3C/code%3E%u4E8B%u4EF6%u4E2D%u624B%u52A8%u4FEE%u6539%3Ccode%3Evalue%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20value%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Easync-change%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Evalue%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20Toast.loading%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3EforbidClick%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%20%7D%29%3B%0A%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3EsetTimeout%3C/span%3E%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%20%20Toast.clear%28%29%3B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20value%20%7D%29%3B%0A%20%20%20%20%7D%2C%20%3Cspan%20class%3D%22hljs-number%22%3E500%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-da-xiao%22%3E%u81EA%u5B9A%u4E49%u5927%u5C0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Einput-width%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u8F93%u5165%u6846%u5BBD%u5EA6%uFF0C%u901A%u8FC7%3Ccode%3Ebutton-size%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u6309%u94AE%u5927%u5C0F%u548C%u8F93%u5165%u6846%u9AD8%u5EA6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-stepper%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%201%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einput-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B40px%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebutton-size%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B32px%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5728%u8868%u5355%u5185%u63D0%u4EA4%u65F6%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Evalue%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u6700%u5C0F%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emin%3C/td%3E%0A%3Ctd%3E%u6700%u5C0F%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax%3C/td%3E%0A%3Ctd%3E%u6700%u5927%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Estep%3C/td%3E%0A%3Ctd%3E%u6B65%u957F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einteger%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u53EA%u5141%u8BB8%u8F93%u5165%u6574%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisable-input%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u8F93%u5165%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Easync-change%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u5F02%u6B65%u53D8%u66F4%uFF0C%u5F00%u542F%u540E%u9700%u8981%u624B%u52A8%u63A7%u5236%u8F93%u5165%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einput-width%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5BBD%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%20%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E32px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebutton-size%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u5927%u5C0F%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%20%3Ccode%3Epx%3C/code%3E%uFF0C%u8F93%u5165%u6846%u9AD8%u5EA6%u4F1A%u548C%u6309%u94AE%u5927%u5C0F%u4FDD%u6301%u4E00%u81F4%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E28px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-plus%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u589E%u52A0%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-minus%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u51CF%u5C11%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edecimal-length%3C/td%3E%0A%3Ctd%3E%u56FA%u5B9A%u663E%u793A%u7684%u5C0F%u6570%u4F4D%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etheme%3C/td%3E%0A%3Ctd%3E%u6837%u5F0F%u98CE%u683C%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eround%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisable-plus%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u589E%u52A0%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisable-minus%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u51CF%u5C11%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elong-press%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u957F%u6309%u624B%u52BF%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5F53%u7ED1%u5B9A%u503C%u53D8%u5316%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u8F93%u5165%u7684%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aoverlimit%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u4E0D%u53EF%u7528%u7684%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aplus%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u589E%u52A0%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aminus%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u51CF%u5C11%u6309%u94AE%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Afocus%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u805A%u7126%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Ablur%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u5931%u7126%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eplus%3C/td%3E%0A%3Ctd%3E%u52A0%u53F7%u6309%u94AE%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eminus%3C/td%3E%0A%3Ctd%3E%u51CF%u53F7%u6309%u94AE%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einput-class%3C/td%3E%0A%3Ctd%3E%u8F93%u5165%u6846%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplus-class%3C/td%3E%0A%3Ctd%3E%u52A0%u53F7%u6309%u94AE%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eminus-class%3C/td%3E%0A%3Ctd%3E%u51CF%u53F7%u6309%u94AE%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},7795:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESteps%20%u6B65%u9AA4%u6761%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-steps%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/steps/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-steps%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esteps%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20steps%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esteps%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u4E00%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u4E8C%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u4E09%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u56DB%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yang-shi%22%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%20%3Ccode%3Eactive-icon%3C/code%3E%20%u548C%20%3Ccode%3Eactive-color%3C/code%3E%20%u5C5E%u6027%u8BBE%u7F6E%u6FC0%u6D3B%u72B6%u6001%u4E0B%u7684%u56FE%u6807%u548C%u989C%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-steps%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esteps%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20steps%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsuccess%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2338f%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-biao%22%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%20%3Ccode%3EinactiveIcon%3C/code%3E%20%u548C%20%3Ccode%3EactiveIcon%3C/code%3E%20%u5C5E%u6027%u5206%u522B%u8BBE%u7F6E%u6BCF%u4E00%u9879%u7684%u56FE%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-steps%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esteps%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20steps%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esteps%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u4E00%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EinactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Blocation-o%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bsuccess%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u4E8C%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EinactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Blike-o%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bplus%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u4E09%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EinactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bstar-o%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bcross%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6B65%u9AA4%u56DB%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edesc%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63CF%u8FF0%u4FE1%u606F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EinactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bphone-o%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveIcon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bfail%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shu-xiang-bu-zou-tiao%22%3E%u7AD6%u5411%u6B65%u9AA4%u6761%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%u8BBE%u7F6E%3Ccode%3Edirection%3C/code%3E%u5C5E%u6027%u6765%u6539%u53D8%u6B65%u9AA4%u6761%u7684%u663E%u793A%u65B9%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-steps%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esteps%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20steps%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edirection%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvertical%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ee0a24%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22steps-props%22%3ESteps%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6B65%u9AA4%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E0%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edirection%3C/td%3E%0A%3Ctd%3E%u663E%u793A%u65B9%u5411%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Ehorizontal%3C/code%3E%20%3Ccode%3Evertical%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ehorizontal%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-color%3C/td%3E%0A%3Ctd%3E%u6FC0%u6D3B%u72B6%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%2307c160%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einactive-color%3C/td%3E%0A%3Ctd%3E%u672A%u6FC0%u6D3B%u72B6%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23969799%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-icon%3C/td%3E%0A%3Ctd%3E%u6FC0%u6D3B%u72B6%u6001%u5E95%u90E8%u56FE%u6807%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Echecked%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einactive-icon%3C/td%3E%0A%3Ctd%3E%u672A%u6FC0%u6D3B%u72B6%u6001%u5E95%u90E8%u56FE%u6807%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-step%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u6B65%u9AA4%u65F6%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%u5F53%u524D%u6B65%u9AA4%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edesc-class%3C/td%3E%0A%3Ctd%3E%u63CF%u8FF0%u4FE1%u606F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},6368:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESticky%20%u7C98%u6027%u5E03%u5C40%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3ESticky%20%u7EC4%u4EF6%u4E0E%20CSS%20%u4E2D%3Ccode%3Eposition%3A%20sticky%3C/code%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-sticky%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/sticky/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u5C06%u5185%u5BB9%u5305%u88F9%u5728%3Ccode%3ESticky%3C/code%3E%u7EC4%u4EF6%u5185%u5373%u53EF%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u57FA%u7840%u7528%u6CD5%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xi-ding-ju-chi%22%3E%u5438%u9876%u8DDD%u79BB%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eoffset-top%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u8BBE%u7F6E%u7EC4%u4EF6%u5728%u5438%u9876%u65F6%u4E0E%u9876%u90E8%u7684%u8DDD%u79BB%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoffset-top%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2050%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Binfo%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5438%u9876%u8DDD%u79BB%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhi-ding-rong-qi%22%3E%u6307%u5B9A%u5BB9%u5668%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Econtainer%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcontainer%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%20150px%3B%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Econtainer%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20container%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%u6307%u5B9A%u5BB9%u5668%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Econtainer%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Enull%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonReady%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Econtainer%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20wx.createSelectorQuery%28%29.select%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23container%26%23x27%3B%3C/span%3E%29%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22qian-tao-zai-scroll-view-nei-shi-yong%22%3E%u5D4C%u5957%u5728%20scroll-view%20%u5185%u4F7F%u7528%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Escroll-top%3C/code%3E%20%u4E0E%20%3Ccode%3Eoffset-top%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u5B9E%u73B0%u5728%20scroll-view%20%u5185%u5D4C%u5957%u4F7F%u7528%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Escroll-view%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Ascroll%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonScroll%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Escroll-y%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bscroller%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%20200px%3B%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bheight%3A%20400px%3B%20padding-top%3A%2050px%3B%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Escroll-top%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20scrollTop%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eoffset-top%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20offsetTop%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%20%20%20%20%u5D4C%u5957%u5728%20scroll-view%20%u5185%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-sticky%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Escroll-view%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EscrollTop%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EoffsetTop%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonScroll%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.createSelectorQuery%28%29%0A%20%20%20%20%20%20.select%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23scroller%26%23x27%3B%3C/span%3E%29%0A%20%20%20%20%20%20.boundingClientRect%28%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eres%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EscrollTop%3C/span%3E%3A%20event.detail.scrollTop%2C%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EoffsetTop%3C/span%3E%3A%20res.top%2C%0A%20%20%20%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%20%20%7D%29%0A%20%20%20%20%20%20.exec%28%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eoffset-top%3C/td%3E%0A%3Ctd%3E%u5438%u9876%u65F6%u4E0E%u9876%u90E8%u7684%u8DDD%u79BB%uFF0C%u5355%u4F4D%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3E%u5438%u9876%u65F6%u7684%20z-index%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E99%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtainer%3C/td%3E%0A%3Ctd%3E%u4E00%u4E2A%u51FD%u6570%uFF0C%u8FD4%u56DE%u5BB9%u5668%u5BF9%u5E94%u7684%20NodesRef%20%u8282%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Efunction%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Escroll-top%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6EDA%u52A8%u533A%u57DF%u7684%u6EDA%u52A8%u4F4D%u7F6E%uFF0C%u975E%20%3Ccode%3Enull%3C/code%3E%20%u65F6%u4F1A%u7981%u7528%u9875%u9762%u6EDA%u52A8%u4E8B%u4EF6%u7684%u76D1%u542C%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Escroll%3C/td%3E%0A%3Ctd%3E%u6EDA%u52A8%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%7B%20scrollTop%3A%20%u8DDD%u79BB%u9876%u90E8%u4F4D%u7F6E%2C%20isFixed%3A%20%u662F%u5426%u5438%u9876%20%7D%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9270:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESubmitBar%20%u63D0%u4EA4%u8BA2%u5355%u680F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5C55%u793A%u8BA2%u5355%u91D1%u989D%u4E0E%u63D0%u4EA4%u8BA2%u5355%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-submit-bar%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/submit-bar/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-submit-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprice%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%203050%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebutton-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63D0%u4EA4%u8BA2%u5355%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Asubmit%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSubmit%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-zhuang-tai%22%3E%u7981%u7528%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u7981%u7528%u72B6%u6001%u4E0B%u4E0D%u4F1A%u89E6%u53D1%3Ccode%3Esubmit%3C/code%3E%u4E8B%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-submit-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprice%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%203050%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebutton-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63D0%u4EA4%u8BA2%u5355%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etip%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u60A8%u7684%u6536%u8D27%u5730%u5740%u4E0D%u652F%u6301%u540C%u57CE%u9001%2C%20%u6211%u4EEC%u5DF2%u4E3A%u60A8%u63A8%u8350%u5FEB%u9012%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etip-icon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/1.png%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Asubmit%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSubmit%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-zhuang-tai%22%3E%u52A0%u8F7D%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u52A0%u8F7D%u72B6%u6001%u4E0B%u4E0D%u4F1A%u89E6%u53D1%3Ccode%3Esubmit%3C/code%3E%u4E8B%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-submit-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprice%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%203050%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebutton-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63D0%u4EA4%u8BA2%u5355%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Asubmit%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonSubmit%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gao-ji-yong-fa%22%3E%u9AD8%u7EA7%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u63D2%u69FD%u63D2%u5165%u81EA%u5B9A%u4E49%u5185%u5BB9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-submit-bar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprice%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%203050%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebutton-text%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u63D0%u4EA4%u8BA2%u5355%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Asubmit%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickButton%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etip%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20true%20%7D%7D%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btip%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u60A8%u7684%u6536%u8D27%u5730%u5740%u4E0D%u652F%u6301%u540C%u57CE%u9001%2C%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%26gt%3B%3C/span%3E%u4FEE%u6539%u5730%u5740%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Etext%3C/span%3E%26gt%3B%3C/span%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-submit-bar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eprice%3C/td%3E%0A%3Ctd%3E%u4EF7%u683C%uFF08%u5355%u4F4D%u5206%uFF09%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elabel%3C/td%3E%0A%3Ctd%3E%u4EF7%u683C%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%u5408%u8BA1%uFF1A%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esuffix-label%3C/td%3E%0A%3Ctd%3E%u4EF7%u683C%u53F3%u4FA7%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebutton-text%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebutton-type%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u7C7B%u578B%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Edanger%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etip%3C/td%3E%0A%3Ctd%3E%u63D0%u793A%u6587%u6848%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20boolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etip-icon%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u52A0%u8F7D%u4E2D%u7684%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecurrency%3C/td%3E%0A%3Ctd%3E%u8D27%u5E01%u7B26%u53F7%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%A5%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-bottom%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%20iPhoneX%20%u7559%u51FA%u5E95%u90E8%u5B89%u5168%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edecimal-length%3C/td%3E%0A%3Ctd%3E%u4EF7%u683C%u5C0F%u6570%u70B9%u540E%u4F4D%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E2%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Esubmit%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u70B9%u51FB%u4E8B%u4EF6%u56DE%u8C03%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8BA2%u5355%u680F%u5DE6%u4FA7%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etop%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u8BA2%u5355%u680F%u4E0A%u65B9%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etip%3C/td%3E%0A%3Ctd%3E%u63D0%u793A%u6587%u6848%u4E2D%u7684%u989D%u5916%u64CD%u4F5C%u548C%u8BF4%u660E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eprice-class%3C/td%3E%0A%3Ctd%3E%u4EF7%u683C%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebutton-class%3C/td%3E%0A%3Ctd%3E%u6309%u94AE%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebar-class%3C/td%3E%0A%3Ctd%3E%u8BA2%u5355%u680F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9441:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESwipeCell%20%u6ED1%u52A8%u5355%u5143%u683C%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u5DE6%u53F3%u6ED1%u52A8%u6765%u5C55%u793A%u64CD%u4F5C%u6309%u94AE%u7684%u5355%u5143%u683C%u7EC4%u4EF6%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-swipe-cell%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/swipe-cell/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-swipe-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eright-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2065%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2065%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bleft%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u9009%u62E9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5220%u9664%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-swipe-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yi-bu-guan-bi%22%3E%u5F02%u6B65%u5173%u95ED%3C/h3%3E%0A%3Cp%3E%u5F53%u5F00%u542F%3Ccode%3Easync-close%3C/code%3E%u65F6%uFF0C%20%u901A%u8FC7%u7ED1%u5B9A%3Ccode%3Eclose%3C/code%3E%u4E8B%u4EF6%uFF0C%u53EF%u4EE5%u81EA%u5B9A%u4E49%u4E24%u4FA7%u6ED1%u52A8%u5185%u5BB9%u70B9%u51FB%u65F6%u7684%u5173%u95ED%u884C%u4E3A%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-swipe-cell%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bswipe-cell%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eright-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2065%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2065%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Easync-close%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bleft%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u9009%u62E9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5220%u9664%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-swipe-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20position%2C%20instance%20%7D%20%3D%20event.detail%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eswitch%3C/span%3E%20%28position%29%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ecase%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bleft%26%23x27%3B%3C/span%3E%3A%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ecase%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bcell%26%23x27%3B%3C/span%3E%3A%0A%20%20%20%20%20%20%20%20instance.close%28%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ebreak%3C/span%3E%3B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ecase%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bright%26%23x27%3B%3C/span%3E%3A%0A%20%20%20%20%20%20%20%20Dialog.confirm%28%7B%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u786E%u5B9A%u5220%u9664%u5417%uFF1F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%7D%29.then%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20instance.close%28%29%3B%0A%20%20%20%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ebreak%3C/span%3E%3B%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zhu-dong-da-kai%22%3E%u4E3B%u52A8%u6253%u5F00%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-swipe-cell%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bswipe-cell2%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eright-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2065%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleft-width%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%2065%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u793A%u4F8B%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aopen%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonOpen%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bleft%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-swipe-cell__left%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u9009%u62E9%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-cell%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5355%u5143%u683C%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Evalue%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u5185%u5BB9%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-cell-group%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bright%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eclass%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-swipe-cell__right%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5220%u9664%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Eview%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-swipe-cell%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonOpen%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20position%2C%20name%20%7D%20%3D%20event.detail%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eswitch%3C/span%3E%20%28position%29%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ecase%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bleft%26%23x27%3B%3C/span%3E%3A%0A%20%20%20%20%20%20%20%20Notify%28%7B%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bprimary%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bname%7D%3C/span%3E%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bposition%7D%3C/span%3E%u90E8%u5206%u5C55%u793Aopen%u4E8B%u4EF6%u88AB%u89E6%u53D1%60%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ebreak%3C/span%3E%3B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ecase%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bright%26%23x27%3B%3C/span%3E%3A%0A%20%20%20%20%20%20%20%20Notify%28%7B%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bprimary%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bname%7D%3C/span%3E%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bposition%7D%3C/span%3E%u90E8%u5206%u5C55%u793Aopen%u4E8B%u4EF6%u88AB%u89E6%u53D1%60%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ebreak%3C/span%3E%3B%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%uFF0C%u53EF%u4EE5%u5728%20close%20%u4E8B%u4EF6%u7684%u53C2%u6570%u4E2D%u83B7%u53D6%u5230%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft-width%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u6ED1%u52A8%u533A%u57DF%u5BBD%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright-width%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u6ED1%u52A8%u533A%u57DF%u5BBD%u5EA6%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Easync-close%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F02%u6B65%u5173%u95ED%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%20%3Ccode%3Ev1.3.4%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6ED1%u52A8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u663E%u793A%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleft%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u6ED1%u52A8%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eright%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u6ED1%u52A8%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u7684%u70B9%u51FB%u4F4D%u7F6E%20%28%3Ccode%3Eleft%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%20%3Ccode%3Ecell%3C/code%3E%20%3Ccode%3Eoutside%3C/code%3E%29%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%7B%20position%3A%20%27left%27%20%7C%20%27right%27%20%2C%20instance%20%2C%20name%3A%20string%20%7D%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%7B%20position%3A%20%27left%27%20%7C%20%27right%27%20%2C%20name%3A%20string%20%7D%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22close-can-shu%22%3Eclose%20%u53C2%u6570%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eposition%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u7684%u70B9%u51FB%u4F4D%u7F6E%20%28%3Ccode%3Eleft%3C/code%3E%20%3Ccode%3Eright%3C/code%3E%20%3Ccode%3Ecell%3C/code%3E%20%3Ccode%3Eoutside%3C/code%3E%29%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einstance%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3ESwipeCell%20%u5B9E%u4F8B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%20%u53EF%u4EE5%u83B7%u53D6%u5230%20SwipeCell%20%u5B9E%u4F8B%u5E76%u8C03%u7528%u5B9E%u4F8B%u65B9%u6CD5%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eopen%3C/td%3E%0A%3Ctd%3Eposition%3A%20%3Ccode%3Eleft%20%7C%20right%3C/code%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u5355%u5143%u683C%u4FA7%u8FB9%u680F%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u6536%u8D77%u5355%u5143%u683C%u4FA7%u8FB9%u680F%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9143:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ESwitch%20%u5F00%u5173%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u5728%u6253%u5F00%u548C%u5173%u95ED%u72B6%u6001%u4E4B%u95F4%u8FDB%u884C%u5207%u6362%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-switch%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/switch/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u9700%u8981%u624B%u52A8%u5BF9%20checked%20%u72B6%u6001%u8FDB%u884C%u66F4%u65B0%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3A%20detail%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-zhuang-tai%22%3E%u7981%u7528%u72B6%u6001%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-zhuang-tai%22%3E%u52A0%u8F7D%u72B6%u6001%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eloading%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-da-xiao%22%3E%u81EA%u5B9A%u4E49%u5927%u5C0F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B24px%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2307c160%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Einactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ee0a24%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yi-bu-kong-zhi%22%3E%u5F02%u6B65%u63A7%u5236%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-switch%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20checked%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showModal%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63D0%u793A%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Econtent%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u662F%u5426%u5207%u6362%u5F00%u5173%uFF1F%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esuccess%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eres%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28res.confirm%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Echecked2%3C/span%3E%3A%20detail%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u5728%u8868%u5355%u5185%u63D0%u4EA4%u65F6%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Echecked%3C/td%3E%0A%3Ctd%3E%u5F00%u5173%u9009%u4E2D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eany%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eloading%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u52A0%u8F7D%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u7981%u7528%u72B6%u6001%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u5F00%u5173%u5C3A%u5BF8%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E30px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-color%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u65F6%u7684%u80CC%u666F%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%231989fa%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einactive-color%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u7684%u80CC%u666F%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23fff%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-value%3C/td%3E%0A%3Ctd%3E%u6253%u5F00%u65F6%u7684%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Eany%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einactive-value%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u7684%u503C%3C/td%3E%0A%3Ctd%3E%3Cem%3Eany%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5F00%u5173%u72B6%u6001%u5207%u6362%u56DE%u8C03%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u662F%u5426%u9009%u4E2D%u5F00%u5173%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Enode-class%3C/td%3E%0A%3Ctd%3E%u5706%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},5209:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ETab%20%u6807%u7B7E%u9875%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u9009%u9879%u5361%u7EC4%u4EF6%uFF0C%u7528%u4E8E%u5728%u4E0D%u540C%u7684%u5185%u5BB9%u533A%u57DF%u4E4B%u95F4%u8FDB%u884C%u5207%u6362%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-tab%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/tab/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-tabs%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/tabs/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eactive%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%204%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%204%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showToast%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%u5207%u6362%u5230%u6807%u7B7E%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail.name%7D%3C/span%3E%60%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tong-guo-ming-cheng-pi-pei%22%3E%u901A%u8FC7%u540D%u79F0%u5339%u914D%3C/h3%3E%0A%3Cp%3E%u5728%u6807%u7B7E%u6307%u5B9A%3Ccode%3Ename%3C/code%3E%u5C5E%u6027%u7684%u60C5%u51B5%u4E0B%uFF0C%3Ccode%3Eactive%3C/code%3E%u7684%u503C%u4E3A%u5F53%u524D%u6807%u7B7E%u7684%3Ccode%3Ename%3C/code%3E%uFF08%u6B64%u65F6%u65E0%u6CD5%u901A%u8FC7%u7D22%u5F15%u503C%u6765%u5339%u914D%u6807%u7B7E%uFF09%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Ba%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Ba%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bb%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bc%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22heng-xiang-gun-dong%22%3E%u6A2A%u5411%u6EDA%u52A8%3C/h3%3E%0A%3Cp%3E%u591A%u4E8E%205%20%u4E2A%u6807%u7B7E%u65F6%uFF0CTab%20%u53EF%u4EE5%u6A2A%u5411%u6EDA%u52A8%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%204%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%204%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%205%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%205%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%206%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%206%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jin-yong-biao-qian%22%3E%u7981%u7528%u6807%u7B7E%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%3Ccode%3Edisabled%3C/code%3E%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%u5728%3Ccode%3Evan-tabs%3C/code%3E%u4E0A%u76D1%u542C%3Ccode%3Edisabled%3C/code%3E%u4E8B%u4EF6%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Adisabled%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickDisabled%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickDisabled%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showToast%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%u6807%u7B7E%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail.name%7D%3C/span%3E%20%u5DF2%u88AB%u7981%u7528%60%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yang-shi-feng-ge%22%3E%u6837%u5F0F%u98CE%u683C%3C/h3%3E%0A%3Cp%3E%3Ccode%3ETab%3C/code%3E%u652F%u6301%u4E24%u79CD%u6837%u5F0F%u98CE%u683C%uFF1A%3Ccode%3Eline%3C/code%3E%u548C%3Ccode%3Ecard%3C/code%3E%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3Eline%3C/code%3E%u6837%u5F0F%uFF0C%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Etype%3C/code%3E%u5C5E%u6027%u4FEE%u6539%u6837%u5F0F%u98CE%u683C%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcard%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dian-ji-shi-jian%22%3E%u70B9%u51FB%u4E8B%u4EF6%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u5728%3Ccode%3Evan-tabs%3C/code%3E%u4E0A%u7ED1%u5B9A%3Ccode%3Eclick%3C/code%3E%u4E8B%u4EF6%uFF0C%u5728%u56DE%u8C03%u53C2%u6570%u7684%3Ccode%3Eevent.detail%3C/code%3E%u4E2D%u53EF%u4EE5%u53D6%u5F97%u88AB%u70B9%u51FB%u6807%u7B7E%u7684%u6807%u9898%u548C%u6807%u8BC6%u7B26%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClick%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClick%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showToast%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%u70B9%u51FB%u6807%u7B7E%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail.name%7D%3C/span%3E%60%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22nian-xing-bu-ju%22%3E%u7C98%u6027%u5E03%u5C40%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Esticky%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u5F00%u542F%u7C98%u6027%u5E03%u5C40%uFF0C%u7C98%u6027%u5E03%u5C40%u4E0B%uFF0C%u5F53%20Tab%20%u6EDA%u52A8%u5230%u9876%u90E8%u65F6%u4F1A%u81EA%u52A8%u5438%u9876%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esticky%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%204%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%204%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22qie-huan-dong-hua%22%3E%u5207%u6362%u52A8%u753B%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Eanimated%3C/code%3E%u6765%u8BBE%u7F6E%u662F%u5426%u542F%u7528%u5207%u6362%20tab%20%u65F6%u7684%u52A8%u753B%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eanimated%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%204%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%204%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22hua-dong-qie-huan%22%3E%u6ED1%u52A8%u5207%u6362%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Eswipeable%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u5F00%u542F%u6ED1%u52A8%u5207%u6362%u6807%u7B7E%u9875%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eswipeable%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%204%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%204%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22qian-tao-popup%22%3E%u5D4C%u5957%20popup%3C/h3%3E%0A%3Cp%3E%u5982%u679C%u5C06%20van-tabs%20%u5D4C%u5957%u5728%20van-popup%20%u7B49%u4F1A%u9690%u85CF%u5185%u5BB9%u7684%u7EC4%u4EF6%u6216%u8282%u70B9%u5185%uFF0C%u5F53%20van-tabs%20%u663E%u793A%u65F6%u4E0B%u5212%u7EBF%u5C06%u4E0D%u4F1A%u6B63%u5E38%u663E%u793A%u3002%3C/p%3E%0A%3Cp%3E%u6B64%u65F6%u53EF%u4EE5%u901A%u8FC7%u4F7F%u7528%20%3Ccode%3Ewx%3Aif%3C/code%3E%20%u624B%u52A8%u63A7%u5236%20van-tabs%20%u7684%u6E32%u67D3%u6765%u89C4%u907F%u8FD9%u79CD%u573A%u666F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Aif%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%201%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%201%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%202%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%202%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%203%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%203%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%u6807%u7B7E%204%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u5185%u5BB9%204%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tab%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-popup%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tabs-props%22%3ETabs%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u6837%u5F0F%u98CE%u683C%uFF0C%u53EF%u9009%u503C%u4E3A%3Ccode%3Ecard%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eline%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u4E3B%u9898%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%23ee0a24%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u6807%u7B7E%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u65F6%u95F4%uFF0C%u5355%u4F4D%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0.3%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eline-width%3C/td%3E%0A%3Ctd%3E%u5E95%u90E8%u6761%u5BBD%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E40px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eline-height%3C/td%3E%0A%3Ctd%3E%u5E95%u90E8%u6761%u9AD8%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E3px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eanimated%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u5207%u6362%u6807%u7B7E%u5185%u5BB9%u65F6%u7684%u8F6C%u573A%u52A8%u753B%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u5916%u8FB9%u6846%uFF0C%u4EC5%u5728%20%3Ccode%3Eline%3C/code%3E%20%u98CE%u683C%u4E0B%u751F%u6548%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eellipsis%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7701%u7565%u8FC7%u957F%u7684%u6807%u9898%u6587%u5B57%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esticky%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4F7F%u7528%u7C98%u6027%u5B9A%u4F4D%u5E03%u5C40%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eswipeable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u624B%u52BF%u6ED1%u52A8%u5207%u6362%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Elazy-render%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u6807%u7B7E%u9875%u5185%u5BB9%u5EF6%u8FDF%u6E32%u67D3%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eoffset-top%3C/td%3E%0A%3Ctd%3E%u7C98%u6027%u5B9A%u4F4D%u5E03%u5C40%u4E0B%u4E0E%u9876%u90E8%u7684%u6700%u5C0F%u8DDD%u79BB%uFF0C%u5355%u4F4D%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eswipe-threshold%3C/td%3E%0A%3Ctd%3E%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%u52A8%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E5%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-active-color%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u9009%u4E2D%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-inactive-color%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u9ED8%u8BA4%u6001%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tab-props%22%3ETab%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u540D%u79F0%uFF0C%u4F5C%u4E3A%u5339%u914D%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u7684%u7D22%u5F15%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle%3C/td%3E%0A%3Ctd%3E%u6807%u9898%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6807%u7B7E%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5C0F%u7EA2%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einfo%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u53F3%u4E0A%u89D2%u63D0%u793A%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etitle-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6807%u9898%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tabs-slot%22%3ETabs%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Enav-left%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u5DE6%u4FA7%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Enav-right%3C/td%3E%0A%3Ctd%3E%u6807%u9898%u53F3%u4FA7%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tab-slot%22%3ETab%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u9875%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tabs-event%22%3ETabs%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u6807%u7B7E%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Ename%uFF1A%u6807%u7B7E%u6807%u8BC6%u7B26%uFF0Ctitle%uFF1A%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6FC0%u6D3B%u7684%u6807%u7B7E%u6539%u53D8%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Ename%uFF1A%u6807%u7B7E%u6807%u8BC6%u7B26%uFF0Ctitle%uFF1A%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Adisabled%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u88AB%u7981%u7528%u7684%u6807%u7B7E%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Ename%uFF1A%u6807%u7B7E%u6807%u8BC6%u7B26%uFF0Ctitle%uFF1A%u6807%u9898%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Ascroll%3C/td%3E%0A%3Ctd%3E%u6EDA%u52A8%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E%7B%20scrollTop%3A%20%u8DDD%u79BB%u9876%u90E8%u4F4D%u7F6E%2C%20isFixed%3A%20%u662F%u5426%u5438%u9876%20%7D%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Enav-class%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u680F%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etab-class%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etab-active-class%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u6FC0%u6D3B%u6001%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20selectComponent%20%u53EF%u4EE5%u83B7%u53D6%u5230%20Tabs%20%u5B9E%u4F8B%u5E76%u8C03%u7528%u5B9E%u4F8B%u65B9%u6CD5%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eresize%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Ch2%20id%3D%22chang-jian-wen-ti%22%3E%u5E38%u89C1%u95EE%u9898%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zu-jian-cong-yin-cang-zhuang-tai-qie-huan-dao-xian-shi-zhuang-tai-shi-di-bu-tiao-wei-zhi-cuo-wu%22%3E%u7EC4%u4EF6%u4ECE%u9690%u85CF%u72B6%u6001%u5207%u6362%u5230%u663E%u793A%u72B6%u6001%u65F6%uFF0C%u5E95%u90E8%u6761%u4F4D%u7F6E%u9519%u8BEF%uFF1F%3C/h3%3E%0A%3Cp%3ETabs%20%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%200%uFF0C%u56E0%u6B64%u65E0%u6CD5%u5C55%u793A%u5E95%u90E8%u6761%u4F4D%u7F6E%u3002%3C/p%3E%0A%3Ch4%20id%3D%22jie-jue-fang-fa%22%3E%u89E3%u51B3%u65B9%u6CD5%3C/h4%3E%0A%3Cp%3E%u65B9%u6CD5%u4E00%uFF0C%u4F7F%u7528%20%3Ccode%3Ewx%3Aif%3C/code%3E%20%u6765%u63A7%u5236%u7EC4%u4EF6%u5C55%u793A%uFF0C%u4F7F%u7EC4%u4EF6%u91CD%u65B0%u521D%u59CB%u5316%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Aif%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bshow%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cp%3E%u65B9%u6CD5%u4E8C%uFF0C%u8C03%u7528%u7EC4%u4EF6%u7684%20resize%20%u65B9%u6CD5%u6765%u4E3B%u52A8%u89E6%u53D1%u91CD%u7ED8%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabs%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Btabs%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.selectComponent%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23tabs%26%23x27%3B%3C/span%3E%29.resize%28%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},774:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ETabbar%20%u6807%u7B7E%u680F%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u5E95%u90E8%u5BFC%u822A%u680F%uFF0C%u7528%u4E8E%u5728%u4E0D%u540C%u9875%u9762%u4E4B%u95F4%u8FDB%u884C%u5207%u6362%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-tabbar%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/tabbar/index%26quot%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-tabbar-item%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/tabbar-item/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfriends-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsetting-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20event.detail%20%u7684%u503C%u4E3A%u5F53%u524D%u9009%u4E2D%u9879%u7684%u7D22%u5F15%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20event.detail%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tong-guo-ming-cheng-pi-pei%22%3E%u901A%u8FC7%u540D%u79F0%u5339%u914D%3C/h3%3E%0A%3Cp%3E%u5728%u6807%u7B7E%u6307%u5B9A%3Ccode%3Ename%3C/code%3E%u5C5E%u6027%u7684%u60C5%u51B5%u4E0B%uFF0C%3Ccode%3Ev-model%3C/code%3E%u7684%u503C%u4E3A%u5F53%u524D%u6807%u7B7E%u7684%3Ccode%3Ename%3C/code%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfriends%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfriends-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsetting%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsetting-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhome%26%23x27%3B%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20event.detail%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xian-shi-hui-biao%22%3E%u663E%u793A%u5FBD%u6807%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edot%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfriends-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B5%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsetting-o%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B20%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-tu-biao%22%3E%u81EA%u5B9A%u4E49%u56FE%u6807%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u901A%u8FC7%20slot%20%u81EA%u5B9A%u4E49%u56FE%u6807%uFF0C%u5176%u4E2D%20icon%20slot%20%u4EE3%u8868%u672A%u9009%u4E2D%u72B6%u6001%u4E0B%u7684%u56FE%u6807%uFF0Cicon-active%20slot%20%u4EE3%u8868%u9009%u4E2D%u72B6%u6001%u4E0B%u7684%u56FE%u6807%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Einfo%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B3%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bicon%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20icon.normal%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emode%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BaspectFit%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwidth%3A%2030px%3B%20height%3A%2018px%3B%26quot%3B%3C/span%3E%0A%20%20%20%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bicon-active%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20icon.active%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emode%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BaspectFit%26quot%3B%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estyle%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwidth%3A%2030px%3B%20height%3A%2018px%3B%26quot%3B%3C/span%3E%0A%20%20%20%20/%26gt%3B%3C/span%3E%0A%20%20%20%20%u81EA%u5B9A%u4E49%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsetting-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Enormal%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/user-inactive.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/user-active.png%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20event.detail%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%2307c160%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Einactive-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23000%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfriends-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsetting-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonChange%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20event.detail%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22qie-huan-biao-qian-shi-jian%22%3E%u5207%u6362%u6807%u7B7E%u4E8B%u4EF6%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20active%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Achange%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonChange%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhome-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E1%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsearch%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E2%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfriends-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E3%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsetting-o%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E4%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar-item%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tabbar%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClick%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20wx.showToast%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%u70B9%u51FB%u6807%u7B7E%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.detail%20+%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%7D%3C/span%3E%60%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-he-zi-ding-yi-tabbar%22%3E%u7ED3%u5408%u81EA%u5B9A%u4E49%20tabBar%3C/h3%3E%0A%3Cp%3E%u8BF7%u53C2%u8003%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html%22%20target%3D%22_blank%22%3E%u5FAE%u4FE1%u5B98%u65B9%u6587%u6863%3C/a%3E%20%u4E0E%20%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/s/vaXgTsmQ7hnm%22%20target%3D%22_blank%22%3E%u4EE3%u7801%u7247%u6BB5%3C/a%3E%u3002%3C/p%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tabbar-props%22%3ETabbar%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9009%u4E2D%u6807%u7B7E%u7684%u7D22%u5F15%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efixed%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u56FA%u5B9A%u5728%u5E95%u90E8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplaceholder%3C/td%3E%0A%3Ctd%3E%u56FA%u5B9A%u5728%u5E95%u90E8%u65F6%uFF0C%u662F%u5426%u5728%u6807%u7B7E%u4F4D%u7F6E%u751F%u6210%u4E00%u4E2A%u7B49%u9AD8%u7684%u5360%u4F4D%u5143%u7D20%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eborder%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u5916%u8FB9%u6846%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ez-index%3C/td%3E%0A%3Ctd%3E%u5143%u7D20%20z-index%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-color%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u6807%u7B7E%u7684%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%231989fa%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einactive-color%3C/td%3E%0A%3Ctd%3E%u672A%u9009%u4E2D%u6807%u7B7E%u7684%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%237d7e80%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esafe-area-inset-bottom%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%20iPhoneX%20%u7559%u51FA%u5E95%u90E8%u5B89%u5168%u8DDD%u79BB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tabbar-event%22%3ETabbar%20Event%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Achange%3C/td%3E%0A%3Ctd%3E%u5207%u6362%u6807%u7B7E%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u5F53%u524D%u9009%u4E2D%u6807%u7B7E%u7684%u540D%u79F0%u6216%u7D22%u5F15%u503C%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tabbaritem-props%22%3ETabbarItem%20Props%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u540D%u79F0%uFF0C%u4F5C%u4E3A%u5339%u914D%u7684%u6807%u8BC6%u7B26%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u6807%u7B7E%u7684%u7D22%u5F15%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u540D%u79F0%u6216%u56FE%u7247%u94FE%u63A5%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-prefix%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u7C7B%u540D%u524D%u7F00%uFF0C%u540C%20Icon%20%u7EC4%u4EF6%u7684%20%3Ca%20href%3D%22%23/icon%23props%22%20target%3D%22_blank%22%3Eclass-prefix%20%u5C5E%u6027%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evan-icon%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edot%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u5C0F%u7EA2%u70B9%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Einfo%3C/td%3E%0A%3Ctd%3E%u56FE%u6807%u53F3%u4E0A%u89D2%u63D0%u793A%u4FE1%u606F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tabbaritem-slot%22%3ETabbarItem%20Slot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon%3C/td%3E%0A%3Ctd%3E%u672A%u9009%u4E2D%u65F6%u7684%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eicon-active%3C/td%3E%0A%3Ctd%3E%u9009%u4E2D%u65F6%u7684%u56FE%u6807%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2864:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ETag%20%u6807%u7B7E%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u6807%u8BB0%u5173%u952E%u8BCD%u548C%u6982%u62EC%u4E3B%u8981%u5185%u5BB9%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-tag%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/tag/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Etype%3C/code%3E%20%u5C5E%u6027%u63A7%u5236%u6807%u7B7E%u989C%u8272%uFF0C%u9ED8%u8BA4%u4E3A%u7070%u8272%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsuccess%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22kong-xin-yang-shi%22%3E%u7A7A%u5FC3%u6837%u5F0F%3C/h3%3E%0A%3Cp%3E%u8BBE%u7F6E%20%3Ccode%3Eplain%3C/code%3E%20%u5C5E%u6027%u8BBE%u7F6E%u4E3A%u7A7A%u5FC3%u6837%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsuccess%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yuan-jiao-yang-shi%22%3E%u5706%u89D2%u6837%u5F0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Eround%3C/code%3E%20%u8BBE%u7F6E%u4E3A%u5706%u89D2%u6837%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsuccess%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eround%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22biao-ji-yang-shi%22%3E%u6807%u8BB0%u6837%u5F0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%20%3Ccode%3Emark%3C/code%3E%20%u8BBE%u7F6E%u4E3A%u6807%u8BB0%u6837%u5F0F%28%u534A%u5706%u89D2%29%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emark%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emark%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsuccess%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emark%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Emark%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bwarning%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-yan-se%22%3E%u81EA%u5B9A%u4E49%u989C%u8272%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23f2826a%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%237232dd%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eplain%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecolor%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ffe1e1%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etext-color%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%23ad0000%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22biao-qian-da-xiao%22%3E%u6807%u7B7E%u5927%u5C0F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmedium%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bdanger%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Blarge%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u6807%u7B7E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ke-guan-bi-biao-qian%22%3E%u53EF%u5173%u95ED%u6807%u7B7E%3C/h3%3E%0A%3Cp%3E%u6DFB%u52A0%20%3Ccode%3Ecloseable%3C/code%3E%20%u5C5E%u6027%u8868%u793A%u6807%u7B7E%u662F%u53EF%u5173%u95ED%u7684%uFF0C%u5173%u95ED%u6807%u7B7E%u65F6%u4F1A%u89E6%u53D1%20%3Ccode%3Eclose%3C/code%3E%20%u4E8B%u4EF6%uFF0C%u5728%20%3Ccode%3Eclose%3C/code%3E%20%u4E8B%u4EF6%u4E2D%u53EF%u4EE5%u6267%u884C%u9690%u85CF%u6807%u7B7E%u7684%u903B%u8F91%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Aif%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show.primary%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecloseable%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmedium%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%u6807%u7B7E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ewx%3Aif%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show.success%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ecloseable%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esize%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmedium%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsuccess%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bsuccess%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclose%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClose%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%u6807%u7B7E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tag%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3A%20%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eprimary%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Esuccess%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClose%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%5B%3Cspan%20class%3D%22hljs-string%22%3E%60show.%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bevent.target.id%7D%3C/span%3E%60%3C/span%3E%5D%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eprimary%3C/code%3E%20%3Ccode%3Esuccess%3C/code%3E%20%3Ccode%3Edanger%3C/code%3E%20%3Ccode%3Ewarning%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Esize%3C/td%3E%0A%3Ctd%3E%u5927%u5C0F%2C%20%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Elarge%3C/code%3E%20%3Ccode%3Emedium%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecolor%3C/td%3E%0A%3Ctd%3E%u6807%u7B7E%u989C%u8272%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eplain%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u7A7A%u5FC3%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eround%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u5706%u89D2%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emark%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u6807%u8BB0%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Etext-color%3C/td%3E%0A%3Ctd%3E%u6587%u672C%u989C%u8272%uFF0C%u4F18%u5148%u7EA7%u9AD8%u4E8E%20%3Ccode%3Ecolor%3C/code%3E%20%u5C5E%u6027%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ewhite%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecloseable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u4E3A%u53EF%u5173%u95ED%u6807%u7B7E%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%20Tag%20%u663E%u793A%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eclose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u6807%u7B7E%u65F6%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},9132:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EToast%20%u8F7B%u63D0%u793A%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-toast%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/toast/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wen-zi-ti-shi%22%3E%u6587%u5B57%u63D0%u793A%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Eimport%3C/span%3E%20Toast%20%3Cspan%20class%3D%22hljs-keyword%22%3Efrom%3C/span%3E%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bpath/to/@vant/weapp/dist/toast/toast%26%23x27%3B%3C/span%3E%3B%0A%0AToast%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6211%u662F%u63D0%u793A%u6587%u6848%uFF0C%u5EFA%u8BAE%u4E0D%u8D85%u8FC7%u5341%u4E94%u5B57%7E%26%23x27%3B%3C/span%3E%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-toast%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-toast%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jia-zai-ti-shi%22%3E%u52A0%u8F7D%u63D0%u793A%3C/h3%3E%0A%3Cp%3E%u4F7F%u7528%20%3Ccode%3EToast.loading%3C/code%3E%20%u65B9%u6CD5%u5C55%u793A%u52A0%u8F7D%u63D0%u793A%uFF0C%u901A%u8FC7%20%3Ccode%3EforbidClick%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u7981%u7528%u80CC%u666F%u70B9%u51FB%uFF0C%u901A%u8FC7%20%3Ccode%3EloadingType%3C/code%3E%20%u5C5E%u6027%u53EF%u4EE5%u81EA%u5B9A%u4E49%u52A0%u8F7D%u56FE%u6807%u7C7B%u578B%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EToast.loading%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u52A0%u8F7D%u4E2D...%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3EforbidClick%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%7D%29%3B%0A%0A%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u81EA%u5B9A%u4E49%u52A0%u8F7D%u56FE%u6807%3C/span%3E%0AToast.loading%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u52A0%u8F7D%u4E2D...%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3EforbidClick%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3EloadingType%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bspinner%26%23x27%3B%3C/span%3E%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22cheng-gong-shi-bai-ti-shi%22%3E%u6210%u529F/%u5931%u8D25%u63D0%u793A%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EToast.success%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6210%u529F%u6587%u6848%26%23x27%3B%3C/span%3E%29%3B%0AToast.fail%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5931%u8D25%u6587%u6848%26%23x27%3B%3C/span%3E%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dong-tai-geng-xin-ti-shi%22%3E%u52A8%u6001%u66F4%u65B0%u63D0%u793A%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20toast%20%3D%20Toast.loading%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eduration%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u6301%u7EED%u5C55%u793A%20toast%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3EforbidClick%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u5012%u8BA1%u65F6%203%20%u79D2%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eselector%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%23custom-selector%26%23x27%3B%3C/span%3E%2C%0A%7D%29%3B%0A%0A%3Cspan%20class%3D%22hljs-keyword%22%3Elet%3C/span%3E%20second%20%3D%20%3Cspan%20class%3D%22hljs-number%22%3E3%3C/span%3E%3B%0A%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20timer%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3EsetInterval%3C/span%3E%28%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20second--%3B%0A%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28second%29%20%7B%0A%20%20%20%20toast.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%60%u5012%u8BA1%u65F6%20%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bsecond%7D%3C/span%3E%20%u79D2%60%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Eelse%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3EclearInterval%3C/span%3E%28timer%29%3B%0A%20%20%20%20Toast.clear%28%29%3B%0A%20%20%7D%0A%7D%2C%20%3Cspan%20class%3D%22hljs-number%22%3E1000%3C/span%3E%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-toast%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcustom-selector%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22onclose-hui-diao-han-shu%22%3EOnClose%20%u56DE%u8C03%u51FD%u6570%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EToast%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bsuccess%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u63D0%u4EA4%u6210%u529F%26%23x27%3B%3C/span%3E%2C%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3EonClose%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-function%22%3E%28%29%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6267%u884COnClose%u51FD%u6570%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22fang-fa%22%3E%u65B9%u6CD5%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u65B9%u6CD5%u540D%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8FD4%u56DE%u503C%3C/th%3E%0A%3Cth%3E%u4ECB%u7ECD%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3EToast%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%20%7C%20message%3C/code%3E%3C/td%3E%0A%3Ctd%3Etoast%20%u5B9E%u4F8B%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u63D0%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EToast.loading%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%20%7C%20message%3C/code%3E%3C/td%3E%0A%3Ctd%3Etoast%20%u5B9E%u4F8B%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u52A0%u8F7D%u63D0%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EToast.success%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%20%7C%20message%3C/code%3E%3C/td%3E%0A%3Ctd%3Etoast%20%u5B9E%u4F8B%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u6210%u529F%u63D0%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EToast.fail%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%20%7C%20message%3C/code%3E%3C/td%3E%0A%3Ctd%3Etoast%20%u5B9E%u4F8B%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u5931%u8D25%u63D0%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EToast.clear%3C/td%3E%0A%3Ctd%3E%3Ccode%3EclearAll%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u63D0%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EToast.setDefaultOptions%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eoptions%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u4FEE%u6539%u9ED8%u8BA4%u914D%u7F6E%uFF0C%u5BF9%u6240%u6709%20Toast%20%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EToast.resetDefaultOptions%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evoid%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u91CD%u7F6E%u9ED8%u8BA4%u914D%u7F6E%uFF0C%u5BF9%u6240%u6709%20Toast%20%u751F%u6548%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22options%22%3EOptions%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Etype%3C/td%3E%0A%3Ctd%3E%u63D0%u793A%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eloading%3C/code%3E%20%3Ccode%3Esuccess%3C/code%3E%20%3Ccode%3Efail%3C/code%3E%20%3Ccode%3Ehtml%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etext%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eposition%3C/td%3E%0A%3Ctd%3E%u4F4D%u7F6E%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Etop%3C/code%3E%20%3Ccode%3Emiddle%3C/code%3E%20%3Ccode%3Ebottom%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Emiddle%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emessage%3C/td%3E%0A%3Ctd%3E%u5185%u5BB9%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%27%27%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emask%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u663E%u793A%u906E%u7F69%u5C42%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EforbidClick%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u6B62%u80CC%u666F%u70B9%u51FB%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EloadingType%3C/td%3E%0A%3Ctd%3E%u52A0%u8F7D%u56FE%u6807%u7C7B%u578B%2C%20%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Espinner%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Ecircular%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EzIndex%3C/td%3E%0A%3Ctd%3Ez-index%20%u5C42%u7EA7%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E1000%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u5C55%u793A%u65F6%u957F%28ms%29%uFF0C%u503C%u4E3A%200%20%u65F6%uFF0Ctoast%20%u4E0D%u4F1A%u6D88%u5931%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E2000%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eselector%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u9009%u62E9%u5668%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Evan-toast%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtext%3C/td%3E%0A%3Ctd%3E%u9009%u62E9%u5668%u7684%u9009%u62E9%u8303%u56F4%uFF0C%u53EF%u4EE5%u4F20%u5165%u81EA%u5B9A%u4E49%u7EC4%u4EF6%u7684%20this%20%u4F5C%u4E3A%u4E0A%u4E0B%u6587%3C/td%3E%0A%3Ctd%3E%3Cem%3Eobject%3C/em%3E%3C/td%3E%0A%3Ctd%3E%u5F53%u524D%u9875%u9762%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EonClose%3C/td%3E%0A%3Ctd%3E%u5173%u95ED%u65F6%u7684%u56DE%u8C03%u51FD%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3EFunction%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u5185%u5BB9%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2459:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ETransition%20%u52A8%u753B%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u4F7F%u5143%u7D20%u4ECE%u4E00%u79CD%u6837%u5F0F%u9010%u6E10%u53D8%u5316%u4E3A%u53E6%u4E00%u79CD%u6837%u5F0F%u7684%u6548%u679C%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-transition%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/transition/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u5C06%u5143%u7D20%u5305%u88F9%u5728%20transition%20%u7EC4%u4EF6%u5185%uFF0C%u5728%u5143%u7D20%u5C55%u793A/%u9690%u85CF%u65F6%uFF0C%u4F1A%u6709%u76F8%u5E94%u7684%u8FC7%u6E21%u52A8%u753B%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-transition%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ecustom-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bblock%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%u5185%u5BB9%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-transition%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dong-hua-lei-xing%22%3E%u52A8%u753B%u7C7B%u578B%3C/h3%3E%0A%3Cp%3Etransition%20%u7EC4%u4EF6%u5185%u7F6E%u4E86%u591A%u79CD%u52A8%u753B%uFF0C%u53EF%u4EE5%u901A%u8FC7%3Ccode%3Ename%3C/code%3E%u5B57%u6BB5%u6307%u5B9A%u52A8%u753B%u7C7B%u578B%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-transition%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bfade-up%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22gao-ji-yong-fa%22%3E%u9AD8%u7EA7%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-transition%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eshow%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20show%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eduration%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20%7B%20enter%3A%20300%2C%20leave%3A%201000%20%7D%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eenter-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-enter-class%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eenter-active-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-enter-active-class%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleave-active-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-leave-active-class%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eleave-to-class%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bvan-leave-to-class%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-css%22%3E%3Cspan%20class%3D%22hljs-selector-class%22%3E.van-enter-active-class%3C/span%3E%2C%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.van-leave-active-class%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Etransition-property%3C/span%3E%3A%20background-color%2C%20transform%3B%0A%7D%0A%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.van-enter-class%3C/span%3E%2C%0A%3Cspan%20class%3D%22hljs-selector-class%22%3E.van-leave-to-class%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Ebackground-color%3C/span%3E%3A%20red%3B%0A%20%20%3Cspan%20class%3D%22hljs-attribute%22%3Etransform%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-built_in%22%3Erotate%3C/span%3E%28-%3Cspan%20class%3D%22hljs-number%22%3E360deg%3C/span%3E%29%20%3Cspan%20class%3D%22hljs-built_in%22%3Etranslate3d%3C/span%3E%28-%3Cspan%20class%3D%22hljs-number%22%3E100%25%3C/span%3E%2C%20-%3Cspan%20class%3D%22hljs-number%22%3E100%25%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%29%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u7C7B%u578B%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efade%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u7EC4%u4EF6%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eduration%3C/td%3E%0A%3Ctd%3E%u52A8%u753B%u65F6%u957F%uFF0C%u5355%u4F4D%u4E3A%u6BEB%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20object%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E300%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-style%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u6837%u5F0F%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Abefore-enter%3C/td%3E%0A%3Ctd%3E%u8FDB%u5165%u524D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aenter%3C/td%3E%0A%3Ctd%3E%u8FDB%u5165%u4E2D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aafter-enter%3C/td%3E%0A%3Ctd%3E%u8FDB%u5165%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Abefore-leave%3C/td%3E%0A%3Ctd%3E%u79BB%u5F00%u524D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aleave%3C/td%3E%0A%3Ctd%3E%u79BB%u5F00%u4E2D%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aafter-leave%3C/td%3E%0A%3Ctd%3E%u79BB%u5F00%u540E%u89E6%u53D1%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ecustom-class%3C/td%3E%0A%3Ctd%3E%u6839%u8282%u70B9%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eenter-class%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eenter-active-class%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eenter-to-class%3C/td%3E%0A%3Ctd%3E%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%20%28%u4E0E%u6B64%u540C%u65F6%20enter-class%20%u88AB%u79FB%u9664%29%uFF0C%u5728%u8FC7%u6E21/%u52A8%u753B%u5B8C%u6210%u4E4B%u540E%u79FB%u9664%u3002%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleave-class%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleave-active-class%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eleave-to-class%3C/td%3E%0A%3Ctd%3E%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%20%28%u4E0E%u6B64%u540C%u65F6%20leave-class%20%u88AB%u5220%u9664%29%uFF0C%u5728%u8FC7%u6E21/%u52A8%u753B%u5B8C%u6210%u4E4B%u540E%u79FB%u9664%u3002%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dong-hua-lei-xing-1%22%3E%u52A8%u753B%u7C7B%u578B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Efade%3C/td%3E%0A%3Ctd%3E%u6DE1%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efade-up%3C/td%3E%0A%3Ctd%3E%u4E0A%u6ED1%u6DE1%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efade-down%3C/td%3E%0A%3Ctd%3E%u4E0B%u6ED1%u6DE1%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efade-left%3C/td%3E%0A%3Ctd%3E%u5DE6%u6ED1%u6DE1%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Efade-right%3C/td%3E%0A%3Ctd%3E%u53F3%u6ED1%u6DE1%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eslide-up%3C/td%3E%0A%3Ctd%3E%u4E0A%u6ED1%u8FDB%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eslide-down%3C/td%3E%0A%3Ctd%3E%u4E0B%u6ED1%u8FDB%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eslide-left%3C/td%3E%0A%3Ctd%3E%u5DE6%u6ED1%u8FDB%u5165%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eslide-right%3C/td%3E%0A%3Ctd%3E%u53F3%u6ED1%u8FDB%u5165%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},7213:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3ETreeSelect%20%u5206%u7C7B%u9009%u62E9%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%u7528%u4E8E%u4ECE%u4E00%u7EC4%u76F8%u5173%u8054%u7684%u6570%u636E%u96C6%u5408%u4E2D%u8FDB%u884C%u9009%u62E9%u3002%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u8BE6%u7EC6%u4ECB%u7ECD%u89C1%3Ca%20href%3D%22%23/quickstart%23yin-ru-zu-jian%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-tree-select%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/tree-select/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22dan-xuan-mo-shi%22%3E%u5355%u9009%u6A21%u5F0F%3C/h3%3E%0A%3Cp%3E%u53EF%u4EE5%u5728%u4EFB%u610F%u4F4D%u7F6E%u4E0A%u4F7F%u7528%20van-tree-select%20%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%20click-item%20%u7684%u5B9E%u73B0%u903B%u8F91%u5982%u4F55%u4E3A%u5C5E%u6027%20active-id%20%u8D4B%u503C%uFF0C%u5F53%20active-id%20%u4E3A%u6570%u7EC4%u65F6%u5373%u4E3A%u591A%u9009%u72B6%u6001%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tree-select%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eitems%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20items%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emain-active-index%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20mainActiveIndex%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-id%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeId%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-nav%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickNav%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-item%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickItem%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmainActiveIndex%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveId%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Enull%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickNav%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%3D%20%7B%7D%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmainActiveIndex%3C/span%3E%3A%20detail.index%20%7C%7C%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickItem%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%3D%20%7B%7D%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20activeId%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.data.activeId%20%3D%3D%3D%20detail.id%20%3F%20%3Cspan%20class%3D%22hljs-literal%22%3Enull%3C/span%3E%20%3A%20detail.id%3B%0A%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20activeId%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22duo-xuan-mo-shi%22%3E%u591A%u9009%u6A21%u5F0F%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tree-select%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eitems%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20items%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emain-active-index%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20mainActiveIndex%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-id%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeId%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emax%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20max%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-nav%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickNav%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-item%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickItem%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmainActiveIndex%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EactiveId%3C/span%3E%3A%20%5B%5D%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emax%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2%3C/span%3E%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickNav%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%3D%20%7B%7D%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EmainActiveIndex%3C/span%3E%3A%20detail.index%20%7C%7C%20%3Cspan%20class%3D%22hljs-number%22%3E0%3C/span%3E%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EonClickItem%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%7B%20detail%20%3D%20%7B%7D%20%7D%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20activeId%20%7D%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.data%3B%0A%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20index%20%3D%20activeId.indexOf%28detail.id%29%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28index%20%26gt%3B%20-%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%29%20%7B%0A%20%20%20%20%20%20activeId.splice%28index%2C%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%29%3B%0A%20%20%20%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Eelse%3C/span%3E%20%7B%0A%20%20%20%20%20%20activeId.push%28detail.id%29%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20activeId%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-nei-rong%22%3E%u81EA%u5B9A%u4E49%u5185%u5BB9%3C/h3%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-tree-select%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eitems%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20items%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eheight%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B55vw%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emain-active-index%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20mainActiveIndex%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eactive-id%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20activeId%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-nav%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickNav%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aclick-item%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BonClickItem%26quot%3B%3C/span%3E%0A%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Eimage%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Esrc%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bhttps%3A//img.yzcdn.cn/vant/apple-1.jpg%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eslot%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bcontent%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-tree-select%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Eitems%3C/td%3E%0A%3Ctd%3E%u5206%u7C7B%u663E%u793A%u6240%u9700%u7684%u6570%u636E%3C/td%3E%0A%3Ctd%3E%3Cem%3EArray%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eheight%3C/td%3E%0A%3Ctd%3E%u9AD8%u5EA6%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%20%7C%20string%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E300%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emain-active-index%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u9009%u4E2D%u9879%u7684%u7D22%u5F15%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eactive-id%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u9009%u4E2D%u9879%u7684%20id%uFF0C%u652F%u6301%u4F20%u5165%u6570%u7EC4%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%20%7C%20Array%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E0%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u9879%u6700%u5927%u9009%u4E2D%u4E2A%u6570%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3EInfinity%3C/em%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eselected-icon%20%3Ccode%3Ev1.5.0%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4FA7%u680F%u9009%u4E2D%u72B6%u6001%u7684%u56FE%u6807%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Esuccess%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22events%22%3EEvents%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-nav%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u5BFC%u822A%u70B9%u51FB%u65F6%uFF0C%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3Eevent.detail.index%uFF1A%u88AB%u70B9%u51FB%u7684%u5BFC%u822A%u7684%u7D22%u5F15%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-item%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u9009%u62E9%u9879%u88AB%u70B9%u51FB%u65F6%uFF0C%u4F1A%u89E6%u53D1%u7684%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3Eevent.detail%3A%20%u8BE5%u70B9%u51FB%u9879%u7684%u6570%u636E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slots%22%3ESlots%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Econtent%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u53F3%u4FA7%u533A%u57DF%u5185%u5BB9%uFF0C%u5982%u679C%u5B58%u5728%20items%uFF0C%u5219%u63D2%u5165%u5728%u9876%u90E8%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22items-shu-ju-jie-gou%22%3Eitems%20%u6570%u636E%u7ED3%u6784%3C/h3%3E%0A%3Cp%3E%3Ccode%3Eitems%3C/code%3E%20%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%20%u8868%u793A%u5F53%u524D%u5206%u7C7B%u7684%u540D%u79F0%u3002children%20%u8868%u793A%u5206%u7C7B%u91CC%u7684%u53EF%u9009%u9879%uFF0C%u4E3A%u6570%u7EC4%u7ED3%u6784%uFF0Cid%20%u88AB%u7528%u6765%u552F%u4E00%u6807%u8BC6%u6BCF%u4E2A%u9009%u9879%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-javascript%22%3E%5B%0A%20%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u5BFC%u822A%u540D%u79F0%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6240%u6709%u57CE%u5E02%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u5BFC%u822A%u540D%u79F0%u53F3%u4E0A%u89D2%u5FBD%u6807%uFF0C1.5.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebadge%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E3%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u662F%u5426%u5728%u5BFC%u822A%u540D%u79F0%u53F3%u4E0A%u89D2%u663E%u793A%u5C0F%u7EA2%u70B9%uFF0C1.5.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edot%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u7981%u7528%u9009%u9879%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u8BE5%u5BFC%u822A%u4E0B%u6240%u6709%u7684%u53EF%u9009%u9879%3C/span%3E%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Echildren%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u540D%u79F0%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u6E29%u5DDE%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20id%uFF0C%u4F5C%u4E3A%u5339%u914D%u9009%u4E2D%u72B6%u6001%u7684%u6807%u8BC6%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E1%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u7981%u7528%u9009%u9879%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edisabled%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Etext%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u676D%u5DDE%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eid%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-number%22%3E2%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%5D%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22wai-bu-yang-shi-lei%22%3E%u5916%u90E8%u6837%u5F0F%u7C7B%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u7C7B%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Emain-item-class%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u9009%u9879%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtent-item-class%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u9009%u9879%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emain-active-class%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u9009%u9879%u9009%u4E2D%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtent-active-class%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u9009%u9879%u9009%u4E2D%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emain-disabled-class%3C/td%3E%0A%3Ctd%3E%u5DE6%u4FA7%u9009%u9879%u7981%u7528%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Econtent-disabled-class%3C/td%3E%0A%3Ctd%3E%u53F3%u4FA7%u9009%u9879%u7981%u7528%u6837%u5F0F%u7C7B%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},1928:function(E,C,s){"use strict";s.d(C,{Z:function(){return t}});var u=s(6252),a=unescape("%3Ch1%3EUploader%20%u6587%u4EF6%u4E0A%u4F20%3C/h1%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22jie-shao%22%3E%u4ECB%u7ECD%3C/h3%3E%0A%3Cp%3E%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%20Uploader%20%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%3C/p%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22yin-ru%22%3E%u5F15%u5165%3C/h3%3E%0A%3Cp%3E%u5728%3Ccode%3Eapp.json%3C/code%3E%u6216%3Ccode%3Eindex.json%3C/code%3E%u4E2D%u5F15%u5165%u7EC4%u4EF6%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3EES6%3C/code%3E%u7248%u672C%uFF0C%3Ccode%3EES5%3C/code%3E%u5F15%u5165%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-json%22%3E%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BusingComponents%26quot%3B%3C/span%3E%3A%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3E%26quot%3Bvan-uploader%26quot%3B%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B@vant/weapp/uploader/index%26quot%3B%3C/span%3E%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3Cblockquote%3E%0A%3Cp%3EVant%20Weapp%201.0%20%u7248%u672C%u5F00%u59CB%u652F%u6301%u6B64%u7EC4%u4EF6%uFF0C%u5347%u7EA7%u65B9%u5F0F%u53C2%u89C1%3Ca%20href%3D%22%23/quickstart%22%20target%3D%22_blank%22%3E%u5FEB%u901F%u4E0A%u624B%3C/a%3E%3C/p%3E%0A%3C/blockquote%3E%0A%3C/div%3E%3Ch2%20id%3D%22dai-ma-yan-shi%22%3E%u4EE3%u7801%u6F14%u793A%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22ji-chu-yong-fa%22%3E%u57FA%u7840%u7528%u6CD5%3C/h3%3E%0A%3Cp%3E%u6587%u4EF6%u4E0A%u4F20%u5B8C%u6BD5%u540E%u4F1A%u89E6%u53D1%3Ccode%3Eafter-read%3C/code%3E%u56DE%u8C03%u51FD%u6570%uFF0C%u83B7%u53D6%u5230%u5BF9%u5E94%u7684%u6587%u4EF6%u7684%u4E34%u65F6%u5730%u5740%uFF0C%u7136%u540E%u518D%u4F7F%u7528%3Ccode%3Ewx.uploadFile%3C/code%3E%u5C06%u56FE%u7247%u4E0A%u4F20%u5230%u8FDC%u7A0B%u670D%u52A1%u5668%u4E0A%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Efile-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20fileList%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aafter-read%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BafterRead%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EfileList%3C/span%3E%3A%20%5B%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EafterRead%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20file%20%7D%20%3D%20event.detail%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u5F53%u8BBE%u7F6E%20mutiple%20%u4E3A%20true%20%u65F6%2C%20file%20%u4E3A%u6570%u7EC4%u683C%u5F0F%uFF0C%u5426%u5219%u4E3A%u5BF9%u8C61%u683C%u5F0F%3C/span%3E%0A%20%20%20%20wx.uploadFile%28%7B%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//example.weixin.qq.com/upload%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u4EC5%u4E3A%u793A%u4F8B%uFF0C%u975E%u771F%u5B9E%u7684%u63A5%u53E3%u5730%u5740%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EfilePath%3C/span%3E%3A%20file.url%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bfile%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EformData%3C/span%3E%3A%20%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Euser%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Btest%26%23x27%3B%3C/span%3E%20%7D%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3Esuccess%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eres%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u4E0A%u4F20%u5B8C%u6210%u9700%u8981%u66F4%u65B0%20fileList%3C/span%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20fileList%20%3D%20%5B%5D%20%7D%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.data%3B%0A%20%20%20%20%20%20%20%20fileList.push%28%7B%20...file%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20res.data%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20fileList%20%7D%29%3B%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-pian-yu-lan%22%3E%u56FE%u7247%u9884%u89C8%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u5411%u7EC4%u4EF6%u4F20%u5165%3Ccode%3Efile-list%3C/code%3E%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%20%u7684%u8BE6%u7EC6%u7ED3%u6784%u53EF%u89C1%u4E0B%u65B9%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Efile-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20fileList%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EfileList%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/leaf.jpg%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u56FE%u72471%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20Uploader%20%u6839%u636E%u6587%u4EF6%u540E%u7F00%u6765%u5224%u65AD%u662F%u5426%u4E3A%u56FE%u7247%u6587%u4EF6%3C/span%3E%0A%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u5982%u679C%u56FE%u7247%20URL%20%u4E2D%u4E0D%u5305%u542B%u7C7B%u578B%u4FE1%u606F%uFF0C%u53EF%u4EE5%u6DFB%u52A0%20isImage%20%u6807%u8BB0%u6765%u58F0%u660E%3C/span%3E%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttp%3A//iph.href.lu/60x60%3Ftext%3Ddefault%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ename%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u56FE%u72472%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EisImage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edeletable%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Etrue%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22tu-pian-ke-shan-chu-zhuang-tai%22%3E%u56FE%u7247%u53EF%u5220%u9664%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Edeletable%3C/code%3E%u5C5E%u6027%u53EF%u63A7%u5236%u662F%u5426%u5F00%u542F%u6240%u6709%u56FE%u7247%u7684%u53EF%u5220%u9664%u72B6%u6001%uFF0C%3Ccode%3Edeletable%3C/code%3E%u9ED8%u8BA4%u4E3A%3Ccode%3Etrue%3C/code%3E%uFF0C%u5373%u6240%u6709%u56FE%u7247%u90FD%u53EF%u5220%u9664%u3002%3C/p%3E%0A%3Cp%3E%u82E5%u5E0C%u671B%u63A7%u5236%u5355%u5F20%u56FE%u7247%u7684%u53EF%u5220%u9664%u72B6%u6001%uFF0C%u53EF%u5C06%3Ccode%3Edeletable%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u4E3A%3Ccode%3Etrue%3C/code%3E%uFF0C%u5E76%u5728%3Ccode%3EfileList%3C/code%3E%u4E2D%u4E3A%u6BCF%u4E00%u9879%u8BBE%u7F6E%3Ccode%3Edeletable%3C/code%3E%u5C5E%u6027%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Efile-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20fileList%20%7D%7D%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Edeletable%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20true%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EfileList%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/leaf.jpg%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/tree.jpg%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edeletable%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-literal%22%3Efalse%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shang-chuan-zhuang-tai%22%3E%u4E0A%u4F20%u72B6%u6001%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Estatus%3C/code%3E%u5C5E%u6027%u53EF%u4EE5%u6807%u8BC6%u4E0A%u4F20%u72B6%u6001%uFF0C%3Ccode%3Euploading%3C/code%3E%u8868%u793A%u4E0A%u4F20%u4E2D%uFF0C%3Ccode%3Efailed%3C/code%3E%u8868%u793A%u4E0A%u4F20%u5931%u8D25%uFF0C%3Ccode%3Edone%3C/code%3E%u8868%u793A%u4E0A%u4F20%u5B8C%u6210%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Efile-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20fileList%20%7D%7D%26quot%3B%3C/span%3E%20/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EfileList%3C/span%3E%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/leaf.jpg%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estatus%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Buploading%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E0A%u4F20%u4E2D%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bhttps%3A//img.yzcdn.cn/vant/tree.jpg%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Estatus%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bfailed%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emessage%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E0A%u4F20%u5931%u8D25%26%23x27%3B%3C/span%3E%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22xian-zhi-shang-chuan-shu-liang%22%3E%u9650%u5236%u4E0A%u4F20%u6570%u91CF%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%3Ccode%3Emax-count%3C/code%3E%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%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Efile-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20fileList%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Emax-count%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B2%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aafter-read%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BafterRead%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22zi-ding-yi-shang-chuan-yang-shi%22%3E%u81EA%u5B9A%u4E49%u4E0A%u4F20%u6837%u5F0F%3C/h3%3E%0A%3Cp%3E%u901A%u8FC7%u63D2%u69FD%u53EF%u4EE5%u81EA%u5B9A%u4E49%u4E0A%u4F20%u533A%u57DF%u7684%u6837%u5F0F%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%26gt%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bphoto%26quot%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-attr%22%3Etype%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bprimary%26quot%3B%3C/span%3E%26gt%3B%3C/span%3E%u4E0A%u4F20%u56FE%u7247%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-button%3C/span%3E%26gt%3B%3C/span%3E%0A%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B/%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shang-chuan-qian-xiao-yan%22%3E%u4E0A%u4F20%u524D%u6821%u9A8C%3C/h3%3E%0A%3Cp%3E%u5C06%3Ccode%3Euse-before-read%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u4E3A%3Ccode%3Etrue%3C/code%3E%uFF0C%u7136%u540E%u7ED1%u5B9A%20%3Ccode%3Ebefore-read%3C/code%3E%20%u4E8B%u4EF6%u53EF%u4EE5%u5728%u4E0A%u4F20%u524D%u8FDB%u884C%u6821%u9A8C%uFF0C%u8C03%u7528%20%3Ccode%3Ecallback%3C/code%3E%20%u65B9%u6CD5%u4F20%u5165%20%3Ccode%3Etrue%3C/code%3E%20%u8868%u793A%u6821%u9A8C%u901A%u8FC7%uFF0C%u4F20%u5165%20%3Ccode%3Efalse%3C/code%3E%20%u8868%u793A%u6821%u9A8C%u5931%u8D25%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-html%22%3E%3Cspan%20class%3D%22hljs-tag%22%3E%26lt%3B%3Cspan%20class%3D%22hljs-name%22%3Evan-uploader%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Efile-list%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3B%7B%7B%20fileList%20%7D%7D%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Eaccept%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3Bmedia%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Euse-before-read%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Abefore-read%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BbeforeRead%26quot%3B%3C/span%3E%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Ebind%3Aafter-read%3C/span%3E%3D%3Cspan%20class%3D%22hljs-string%22%3E%26quot%3BafterRead%26quot%3B%3C/span%3E%0A/%26gt%3B%3C/span%3E%0A%3C/code%3E%3C/pre%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3EPage%28%7B%0A%20%20%3Cspan%20class%3D%22hljs-attr%22%3Edata%3C/span%3E%3A%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EfileList%3C/span%3E%3A%20%5B%5D%2C%0A%20%20%7D%2C%0A%0A%20%20%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EbeforeRead%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3Eevent%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20file%2C%20callback%20%7D%20%3D%20event.detail%3B%0A%20%20%20%20callback%28file.type%20%3D%3D%3D%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bimage%26%23x27%3B%3C/span%3E%29%3B%0A%20%20%7D%2C%0A%7D%29%3B%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22yun-kai-fa-shi-li%22%3E%u4E91%u5F00%u53D1%u793A%u4F8B%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22shang-chuan-tu-pian-zhi-yun-cun-chu%22%3E%u4E0A%u4F20%u56FE%u7247%u81F3%u4E91%u5B58%u50A8%3C/h3%3E%0A%3Cp%3E%u5728%u5F00%u53D1%u4E2D%uFF0C%u53EF%u4EE5%u5229%u7528%3Ca%20href%3D%22https%3A//developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html%22%20target%3D%22_blank%22%3E%u5C0F%u7A0B%u5E8F%u4E91%u5F00%u53D1%3C/a%3E%u7684%u4E91%u5B58%u50A8%u80FD%u529B%uFF0C%u5C06%u56FE%u7247%u4E0A%u4F20%u81F3%u4E91%u5B58%u50A8%u5185%u3002%u7136%u540E%u6839%u636E%u8FD4%u56DE%u7684%3Ccode%3EfileiId%3C/code%3E%u6765%u4E0B%u8F7D%u56FE%u7247%u3001%u5220%u9664%u56FE%u7247%u548C%u66FF%u6362%u4E34%u65F6%u94FE%u63A5%u3002%3C/p%3E%0A%3Cpre%3E%3Ccode%20class%3D%22language-js%22%3E%3Cspan%20class%3D%22hljs-comment%22%3E//%20%u4E0A%u4F20%u56FE%u7247%3C/span%3E%0A%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EuploadToCloud%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3E%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20wx.cloud.init%28%29%3B%0A%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20%7B%20fileList%20%7D%20%3D%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.data%3B%0A%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Eif%3C/span%3E%20%28%21fileList.length%29%20%7B%0A%20%20%20%20wx.showToast%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u8BF7%u9009%u62E9%u56FE%u7247%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%20%20%7D%20%3Cspan%20class%3D%22hljs-keyword%22%3Eelse%3C/span%3E%20%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20uploadTasks%20%3D%20fileList.map%28%3Cspan%20class%3D%22hljs-function%22%3E%28%3Cspan%20class%3D%22hljs-params%22%3Efile%2C%20index%3C/span%3E%29%20%3D%26gt%3B%3C/span%3E%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.uploadFilePromise%28%3Cspan%20class%3D%22hljs-string%22%3E%60my-photo%3Cspan%20class%3D%22hljs-subst%22%3E%24%7Bindex%7D%3C/span%3E.png%60%3C/span%3E%2C%20file%29%29%3B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3EPromise%3C/span%3E.all%28uploadTasks%29%0A%20%20%20%20%20%20.then%28%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-params%22%3Edata%3C/span%3E%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%20%20%20%20wx.showToast%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E0A%u4F20%u6210%u529F%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Econst%3C/span%3E%20newFileList%20%3D%20data.map%28%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-params%22%3Eitem%3C/span%3E%20%3D%26gt%3B%3C/span%3E%20%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Eurl%3C/span%3E%3A%20item.fileID%20%7D%29%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Ethis%3C/span%3E.setData%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3EcloudPath%3C/span%3E%3A%20data%2C%20%3Cspan%20class%3D%22hljs-attr%22%3EfileList%3C/span%3E%3A%20newFileList%20%7D%29%3B%0A%20%20%20%20%20%20%7D%29%0A%20%20%20%20%20%20.catch%28%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-params%22%3Ee%3C/span%3E%20%3D%26gt%3B%3C/span%3E%20%7B%0A%20%20%20%20%20%20%20%20wx.showToast%28%7B%20%3Cspan%20class%3D%22hljs-attr%22%3Etitle%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3B%u4E0A%u4F20%u5931%u8D25%26%23x27%3B%3C/span%3E%2C%20%3Cspan%20class%3D%22hljs-attr%22%3Eicon%3C/span%3E%3A%20%3Cspan%20class%3D%22hljs-string%22%3E%26%23x27%3Bnone%26%23x27%3B%3C/span%3E%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22hljs-built_in%22%3Econsole%3C/span%3E.log%28e%29%3B%0A%20%20%20%20%20%20%7D%29%3B%0A%20%20%7D%0A%7D%0A%0A%3Cspan%20class%3D%22hljs-function%22%3E%3Cspan%20class%3D%22hljs-title%22%3EuploadFilePromise%3C/span%3E%28%3Cspan%20class%3D%22hljs-params%22%3EfileName%2C%20chooseResult%3C/span%3E%29%3C/span%3E%20%7B%0A%20%20%3Cspan%20class%3D%22hljs-keyword%22%3Ereturn%3C/span%3E%20wx.cloud.uploadFile%28%7B%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EcloudPath%3C/span%3E%3A%20fileName%2C%0A%20%20%20%20%3Cspan%20class%3D%22hljs-attr%22%3EfilePath%3C/span%3E%3A%20chooseResult.url%0A%20%20%7D%29%3B%0A%7D%0A%3C/code%3E%3C/pre%3E%0A%3C/div%3E%3Ch2%20id%3D%22api%22%3EAPI%3C/h2%3E%0A%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22props%22%3EProps%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u7C7B%u578B%3C/th%3E%0A%3Cth%3E%u9ED8%u8BA4%u503C%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ename%3C/td%3E%0A%3Ctd%3E%u6807%u8BC6%u7B26%uFF0C%u53EF%u4EE5%u5728%u56DE%u8C03%u51FD%u6570%u7684%u7B2C%u4E8C%u9879%u53C2%u6570%u4E2D%u83B7%u53D6%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eaccept%3C/td%3E%0A%3Ctd%3E%u63A5%u53D7%u7684%u6587%u4EF6%u7C7B%u578B%2C%20%u53EF%u9009%u503C%u4E3A%3Ccode%3Eall%3C/code%3E%20%3Ccode%3Emedia%3C/code%3E%20%3Ccode%3Eimage%3C/code%3E%20%3Ccode%3Efile%3C/code%3E%20%3Ccode%3Evideo%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eimage%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3EsizeType%3C/td%3E%0A%3Ctd%3E%u6240%u9009%u7684%u56FE%u7247%u7684%u5C3A%u5BF8%2C%20%u5F53%3Ccode%3Eaccept%3C/code%3E%u4E3A%3Ccode%3Eimage%3C/code%3E%u7C7B%u578B%u65F6%u8BBE%u7F6E%u6240%u9009%u56FE%u7247%u7684%u5C3A%u5BF8%u53EF%u9009%u503C%u4E3A%3Ccode%3Eoriginal%3C/code%3E%20%3Ccode%3Ecompressed%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%27original%27%2C%27compressed%27%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epreview-size%3C/td%3E%0A%3Ctd%3E%u9884%u89C8%u56FE%u548C%u4E0A%u4F20%u533A%u57DF%u7684%u5C3A%u5BF8%uFF0C%u9ED8%u8BA4%u5355%u4F4D%u4E3A%3Ccode%3Epx%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20number%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E80px%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epreview-image%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u4E0A%u4F20%u5B8C%u6210%u540E%u5C55%u793A%u9884%u89C8%u56FE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Epreview-full-image%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5728%u70B9%u51FB%u9884%u89C8%u56FE%u540E%u5C55%u793A%u5168%u5C4F%u56FE%u7247%u9884%u89C8%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emultiple%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u56FE%u7247%u591A%u9009%uFF0C%u90E8%u5206%u5B89%u5353%u673A%u578B%u4E0D%u652F%u6301%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edisabled%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u7981%u7528%u6587%u4EF6%u4E0A%u4F20%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Efalse%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eshow-upload%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u6587%u4EF6%u4E0A%u4F20%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Edeletable%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5C55%u793A%u5220%u9664%u6309%u94AE%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecapture%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u6216%u8005%u89C6%u9891%u9009%u53D6%u6A21%u5F0F%uFF0C%u5F53%3Ccode%3Eaccept%3C/code%3E%u4E3A%3Ccode%3Eimage%3C/code%3E%u7C7B%u578B%u65F6%u8BBE%u7F6E%3Ccode%3Ecapture%3C/code%3E%u53EF%u9009%u503C%u4E3A%3Ccode%3Ecamera%3C/code%3E%u53EF%u4EE5%u76F4%u63A5%u8C03%u8D77%u6444%u50CF%u5934%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%20%7C%20string%5B%5D%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3E%5B%27album%27%2C%20%27camera%27%5D%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-size%3C/td%3E%0A%3Ctd%3E%u6587%u4EF6%u5927%u5C0F%u9650%u5236%uFF0C%u5355%u4F4D%u4E3A%3Ccode%3Ebyte%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-count%3C/td%3E%0A%3Ctd%3E%u6587%u4EF6%u4E0A%u4F20%u6570%u91CF%u9650%u5236%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eupload-text%3C/td%3E%0A%3Ctd%3E%u4E0A%u4F20%u533A%u57DF%u6587%u5B57%u63D0%u793A%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eimage-fit%3C/td%3E%0A%3Ctd%3E%u9884%u89C8%u56FE%u88C1%u526A%u6A21%u5F0F%uFF0C%u53EF%u9009%u503C%u53C2%u8003%u5C0F%u7A0B%u5E8F%3Ccode%3Eimage%3C/code%3E%u7EC4%u4EF6%u7684%3Ccode%3Emode%3C/code%3E%u5C5E%u6027%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3EscaleToFill%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Euse-before-read%3C/td%3E%0A%3Ctd%3E%u662F%u5426%u5F00%u542F%u6587%u4EF6%u8BFB%u53D6%u524D%u4E8B%u4EF6%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecamera%3C/td%3E%0A%3Ctd%3E%u5F53%20accept%20%u4E3A%20%3Ccode%3Evideo%3C/code%3E%20%u65F6%u751F%u6548%uFF0C%u53EF%u9009%u503C%u4E3A%20%3Ccode%3Eback%3C/code%3E%20%3Ccode%3Efront%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ecompressed%3C/td%3E%0A%3Ctd%3E%u5F53%20accept%20%u4E3A%20%3Ccode%3Evideo%3C/code%3E%20%u65F6%u751F%u6548%uFF0C%u662F%u5426%u538B%u7F29%u89C6%u9891%uFF0C%u9ED8%u8BA4%u4E3A%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Eboolean%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Emax-duration%3C/td%3E%0A%3Ctd%3E%u5F53%20accept%20%u4E3A%20%3Ccode%3Evideo%3C/code%3E%20%u65F6%u751F%u6548%uFF0C%u62CD%u6444%u89C6%u9891%u6700%u957F%u62CD%u6444%u65F6%u95F4%uFF0C%u5355%u4F4D%u79D2%3C/td%3E%0A%3Ctd%3E%3Cem%3Enumber%3C/em%3E%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Eupload-icon%3C/td%3E%0A%3Ctd%3E%u4E0A%u4F20%u533A%u57DF%u56FE%u6807%uFF0C%u53EF%u9009%u503C%u89C1%20%3Ca%20href%3D%22%23/icon%22%20target%3D%22_blank%22%3EIcon%20%u7EC4%u4EF6%3C/a%3E%3C/td%3E%0A%3Ctd%3E%3Cem%3Estring%3C/em%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eplus%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3Ch4%20id%3D%22accept-de-he-fa-zhi%22%3Eaccept%20%u7684%u5408%u6CD5%u503C%3C/h4%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Emedia%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u548C%u89C6%u9891%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Eimage%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Evideo%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u89C6%u9891%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Efile%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u4ECE%u5BA2%u6237%u7AEF%u4F1A%u8BDD%u9009%u62E9%u56FE%u7247%u548C%u89C6%u9891%u4EE5%u5916%u7684%u6587%u4EF6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Eall%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u4ECE%u5BA2%u6237%u7AEF%u4F1A%u8BDD%u9009%u62E9%u6240%u6709%u6587%u4EF6%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22filelist%22%3EFileList%3C/h3%3E%0A%3Cp%3E%3Ccode%3Efile-list%3C/code%3E%20%u4E3A%u4E00%u4E2A%u5BF9%u8C61%u6570%u7EC4%uFF0C%u6570%u7EC4%u4E2D%u7684%u6BCF%u4E00%u4E2A%u5BF9%u8C61%u5305%u542B%u4EE5%u4E0B%20%3Ccode%3Ekey%3C/code%3E%u3002%3C/p%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u53C2%u6570%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Eurl%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u56FE%u7247%u548C%u89C6%u9891%u7684%u7F51%u7EDC%u8D44%u6E90%u5730%u5740%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Ename%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6587%u4EF6%u540D%u79F0%uFF0C%u89C6%u9891%u5C06%u5728%u5168%u5C4F%u9884%u89C8%u65F6%u4F5C%u4E3A%u6807%u9898%u663E%u793A%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Ethumb%3C/code%3E%3C/td%3E%0A%3Ctd%3E%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%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3Etype%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u6587%u4EF6%u7C7B%u578B%uFF0C%u53EF%u9009%u503C%3Ccode%3Eimage%3C/code%3E%20%3Ccode%3Evideo%3C/code%3E%20%3Ccode%3Efile%3C/code%3E%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3EisImage%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u624B%u52A8%u6807%u8BB0%u56FE%u7247%u8D44%u6E90%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3E%3Ccode%3EisVideo%3C/code%3E%3C/td%3E%0A%3Ctd%3E%u624B%u52A8%u6807%u8BB0%u89C6%u9891%u8D44%u6E90%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22slot%22%3ESlot%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u540D%u79F0%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3E-%3C/td%3E%0A%3Ctd%3E%u81EA%u5B9A%u4E49%u4E0A%u4F20%u533A%u57DF%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E%3Cdiv%20class%3D%22card%22%3E%3Ch3%20id%3D%22event%22%3EEvent%3C/h3%3E%0A%3Ctable%3E%0A%3Cthead%3E%0A%3Ctr%3E%0A%3Cth%3E%u4E8B%u4EF6%u540D%3C/th%3E%0A%3Cth%3E%u8BF4%u660E%3C/th%3E%0A%3Cth%3E%u56DE%u8C03%u53C2%u6570%3C/th%3E%0A%3C/tr%3E%0A%3C/thead%3E%0A%3Ctbody%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Abefore-read%3C/td%3E%0A%3Ctd%3E%u6587%u4EF6%u8BFB%u53D6%u524D%uFF0C%u5728%u56DE%u8C03%u51FD%u6570%u4E2D%u8FD4%u56DE%20%3Ccode%3Efalse%3C/code%3E%20%u53EF%u7EC8%u6B62%u6587%u4EF6%u8BFB%u53D6%uFF0C%u7ED1%u5B9A%u4E8B%u4EF6%u7684%u540C%u65F6%u9700%u8981%u5C06%3Ccode%3Euse-before-read%3C/code%3E%u5C5E%u6027%u8BBE%u7F6E%u4E3A%3Ccode%3Etrue%3C/code%3E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eevent.detail.file%3C/code%3E%3A%20%u5F53%u524D%u8BFB%u53D6%u7684%u6587%u4EF6%uFF0C%3Ccode%3Eevent.detail.callback%3C/code%3E%3A%20%u56DE%u8C03%u51FD%u6570%uFF0C%u8C03%u7528%3Ccode%3Ecallback%28false%29%3C/code%3E%u7EC8%u6B62%u6587%u4EF6%u8BFB%u53D6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aafter-read%3C/td%3E%0A%3Ctd%3E%u6587%u4EF6%u8BFB%u53D6%u5B8C%u6210%u540E%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eevent.detail.file%3C/code%3E%3A%20%u5F53%u524D%u8BFB%u53D6%u7684%u6587%u4EF6%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aoversize%3C/td%3E%0A%3Ctd%3E%u6587%u4EF6%u8D85%u51FA%u5927%u5C0F%u9650%u5236%3C/td%3E%0A%3Ctd%3E-%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Aclick-preview%3C/td%3E%0A%3Ctd%3E%u70B9%u51FB%u9884%u89C8%u56FE%u7247%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eevent.detail.index%3C/code%3E%3A%20%u70B9%u51FB%u56FE%u7247%u7684%u5E8F%u53F7%u503C%3C/td%3E%0A%3C/tr%3E%0A%3Ctr%3E%0A%3Ctd%3Ebind%3Adelete%3C/td%3E%0A%3Ctd%3E%u5220%u9664%u56FE%u7247%3C/td%3E%0A%3Ctd%3E%3Ccode%3Eevent.detail.index%3C/code%3E%3A%20%u5220%u9664%u56FE%u7247%u7684%u5E8F%u53F7%u503C%3C/td%3E%0A%3C/tr%3E%0A%3C/tbody%3E%0A%3C/table%3E%0A%3C/div%3E"),t={mounted(){var E=this;[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((function(C){C.addEventListener("click",E.scrollToAnchor)}))},methods:{scrollToAnchor(E){E.target.id&&this.$router.push({name:this.$route.name,hash:"#"+E.target.id})}},render:()=>(0,u.h)("section",{innerHTML:a})}},2119:function(E,C,s){"use strict";s.d(C,{p7:function(){return xE},r5:function(){return T}});var u=s(6252),a=s(2610);const t="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,n=E=>t?Symbol(E):"_vr_"+E,l=n("rvlm"),e=n("rvd"),A=n("r"),p=n("rl"),d=n("rvl"),c="undefined"!=typeof window,o=Object.assign;function r(E,C){const s={};for(const u in C){const a=C[u];s[u]=Array.isArray(a)?a.map(E):E(a)}return s}let D=()=>{};const h=/\/$/;function i(E,C,s="/"){let u,a={},t="",n="";const l=C.indexOf("?"),e=C.indexOf("#",l>-1?l:0);return l>-1&&(u=C.slice(0,l),t=C.slice(l+1,e>-1?e:C.length),a=E(t)),e>-1&&(u=u||C.slice(0,e),n=C.slice(e,C.length)),u=function(E,C){if(E.startsWith("/"))return E;if(!E)return C;const s=C.split("/"),u=E.split("/");let a,t,n=s.length-1;for(a=0;aE===C[s])):1===E.length&&E[0]===C}var v,b;!function(E){E.pop="pop",E.push="push"}(v||(v={})),function(E){E.back="back",E.forward="forward",E.unknown=""}(b||(b={}));const q=/^[^#]+#/;function f(E,C){return E.replace(q,"#")+C}const y=()=>({left:window.pageXOffset,top:window.pageYOffset});function x(E,C){return(history.state?history.state.position-C:-1)+E}const w=new Map;let k=()=>location.protocol+"//"+location.host;function z(E,C){const{pathname:s,search:u,hash:a}=C;if(E.indexOf("#")>-1){let E=a.slice(1);return"/"!==E[0]&&(E="/"+E),B(E,"")}return B(s,E)+u+a}function _(E,C,s,u=!1,a=!1){return{back:E,current:C,forward:s,replaced:u,position:window.history.length,scroll:a?y():null}}function S(E){const C=function(E){const{history:C,location:s}=window;let u={value:z(E,s)},a={value:C.state};function t(u,t,n){const l=E.indexOf("#"),e=l>-1?(s.host&&document.querySelector("base")?E:E.slice(l))+u:k()+E+u;try{C[n?"replaceState":"pushState"](t,"",e),a.value=t}catch(E){console.error(E),s[n?"replace":"assign"](e)}}return a.value||t(u.value,{back:null,current:u.value,forward:null,position:C.length-1,replaced:!0,scroll:null},!0),{location:u,state:a,push:function(E,s){const n=o({},a.value,C.state,{forward:E,scroll:y()});t(n.current,n,!0),t(E,o({},_(u.value,E,null),{position:n.position+1},s),!1),u.value=E},replace:function(E,s){t(E,o({},C.state,_(a.value.back,E,a.value.forward,!0),s,{position:a.value.position}),!0),u.value=E}}}(E=function(E){if(!E)if(c){const C=document.querySelector("base");E=(E=C&&C.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else E="/";return"/"!==E[0]&&"#"!==E[0]&&(E="/"+E),E.replace(h,"")}(E)),s=function(E,C,s,u){let a=[],t=[],n=null;const l=({state:t})=>{const l=z(E,location),e=s.value,A=C.value;let p=0;if(t){if(s.value=l,C.value=t,n&&n===e)return void(n=null);p=A?t.position-A.position:0}else u(l);a.forEach((E=>{E(s.value,e,{delta:p,type:v.pop,direction:p?p>0?b.forward:b.back:b.unknown})}))};function e(){const{history:E}=window;E.state&&E.replaceState(o({},E.state,{scroll:y()}),"")}return window.addEventListener("popstate",l),window.addEventListener("beforeunload",e),{pauseListeners:function(){n=s.value},listen:function(E){a.push(E);const C=()=>{const C=a.indexOf(E);C>-1&&a.splice(C,1)};return t.push(C),C},destroy:function(){for(const E of t)E();t=[],window.removeEventListener("popstate",l),window.removeEventListener("beforeunload",e)}}}(E,C.state,C.location,C.replace),u=o({location:"",base:E,go:function(E,C=!0){C||s.pauseListeners(),history.go(E)},createHref:f.bind(null,E)},C,s);return Object.defineProperty(u,"location",{get:()=>C.location.value}),Object.defineProperty(u,"state",{get:()=>C.state.value}),u}function T(E){return(E=location.host?E||location.pathname+location.search:"").indexOf("#")<0&&(E+="#"),S(E)}function P(E){return"string"==typeof E||"symbol"==typeof E}const I={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},$=n("nf");var L;function R(E,C){return o(new Error,{type:E,[$]:!0},C)}function M(E,C){return E instanceof Error&&$ in E&&(null==C||!!(E.type&C))}!function(E){E[E.aborted=4]="aborted",E[E.cancelled=8]="cancelled",E[E.duplicated=16]="duplicated"}(L||(L={}));const N="[^/]+?",O={sensitive:!1,strict:!1,start:!0,end:!0},H=/[.+*?^${}()[\]/\\]/g;function U(E,C){let s=0;for(;sC.length?1===C.length&&80===C[0]?1:-1:0}function V(E,C){let s=0;const u=E.score,a=C.score;for(;s1&&("*"===l||"+"===l)&&C(`A repeatable param (${A}) must be alone in its segment. eg: '/:ids+.`),t.push({type:1,value:A,regexp:p,repeatable:"*"===l||"+"===l,optional:"*"===l||"?"===l})):C("Invalid state to consume buffer"),A="")}function c(){A+=l}for(;eo(E,C.meta)),{})}function Q(E,C){let s={};for(let u in E)s[u]=u in C?C[u]:E[u];return s}const Y=/#/g,EE=/&/g,CE=/\//g,sE=/=/g,uE=/\?/g,aE=/\+/g,tE=/%5B/g,nE=/%5D/g,lE=/%5E/g,eE=/%60/g,AE=/%7B/g,pE=/%7C/g,dE=/%7D/g,cE=/%20/g;function oE(E){return encodeURI(""+E).replace(pE,"|").replace(tE,"[").replace(nE,"]")}function rE(E){return oE(E).replace(aE,"%2B").replace(cE,"+").replace(Y,"%23").replace(EE,"%26").replace(eE,"`").replace(AE,"{").replace(dE,"}").replace(lE,"^")}function DE(E){return function(E){return oE(E).replace(Y,"%23").replace(uE,"%3F")}(E).replace(CE,"%2F")}function hE(E){try{return decodeURIComponent(""+E)}catch(E){}return""+E}function iE(E){const C={};if(""===E||"?"===E)return C;const s=("?"===E[0]?E.slice(1):E).split("&");for(let E=0;EE&&rE(E))):[u&&rE(u)];for(let E=0;Enull==E?null:""+E)):null==u?u:""+u)}return C}function gE(){let E=[];return{add:function(C){return E.push(C),()=>{const s=E.indexOf(C);s>-1&&E.splice(s,1)}},list:()=>E,reset:function(){E=[]}}}function jE(E,C,s,u,a){const t=u&&(u.enterCallbacks[a]=u.enterCallbacks[a]||[]);return()=>new Promise(((n,l)=>{const e=E=>{var e;!1===E?l(R(4,{from:s,to:C})):E instanceof Error?l(E):"string"==typeof(e=E)||e&&"object"==typeof e?l(R(2,{from:C,to:E})):(t&&u.enterCallbacks[a]===t&&"function"==typeof E&&t.push(E),n())},A=E.call(u&&u.instances[a],C,s,e);let p=Promise.resolve(A);E.length<3&&(p=p.then(e)),p.catch((E=>l(E)))}))}function mE(E,C,s,u){const a=[];for(const l of E)for(const E in l.components){let e=l.components[E];if("beforeRouteEnter"===C||l.instances[E])if("object"==typeof(n=e)||"displayName"in n||"props"in n||"__vccOpts"in n){const t=(e.__vccOpts||e)[C];t&&a.push(jE(t,s,u,l,E))}else{let n=e();n=n.catch(console.error),a.push((()=>n.then((a=>{if(!a)return Promise.reject(new Error(`Couldn't resolve component "${E}" at "${l.path}"`));const n=(e=a).__esModule||t&&"Module"===e[Symbol.toStringTag]?a.default:a;var e;l.components[E]=n;const A=(n.__vccOpts||n)[C];return A&&jE(A,s,u,l,E)()}))))}}var n;return a}const vE=(0,u.aZ)({name:"RouterLink",props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},setup(E,{slots:C}){const s=(0,a.qj)(function(E){const C=(0,u.f3)(A),s=(0,u.f3)(p),t=(0,a.Fl)((()=>C.resolve((0,a.SU)(E.to)))),n=(0,a.Fl)((()=>{let{matched:E}=t.value,{length:C}=E;const u=E[C-1];let a=s.matched;if(!u||!a.length)return-1;let n=a.findIndex(F.bind(null,u));if(n>-1)return n;let l=bE(E[C-2]);return C>1&&bE(u)===l&&a[a.length-1].path!==l?a.findIndex(F.bind(null,E[C-2])):n})),l=(0,a.Fl)((()=>n.value>-1&&function(E,C){for(let s in C){let u=C[s],a=E[s];if("string"==typeof u){if(u!==a)return!1}else if(!Array.isArray(a)||a.length!==u.length||u.some(((E,C)=>E!==a[C])))return!1}return!0}(s.params,t.value.params))),e=(0,a.Fl)((()=>n.value>-1&&n.value===s.matched.length-1&&g(s.params,t.value.params)));return{route:t,href:(0,a.Fl)((()=>t.value.href)),isActive:l,isExactActive:e,navigate:function(s={}){return function(E){if(!(E.metaKey||E.altKey||E.ctrlKey||E.shiftKey||E.defaultPrevented||void 0!==E.button&&0!==E.button)){if(E.currentTarget&&E.currentTarget.getAttribute){const C=E.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(C))return}return E.preventDefault&&E.preventDefault(),!0}}(s)?C[(0,a.SU)(E.replace)?"replace":"push"]((0,a.SU)(E.to)):Promise.resolve()}}}(E)),{options:t}=(0,u.f3)(A),n=(0,a.Fl)((()=>({[qE(E.activeClass,t.linkActiveClass,"router-link-active")]:s.isActive,[qE(E.exactActiveClass,t.linkExactActiveClass,"router-link-exact-active")]:s.isExactActive})));return()=>{const a=C.default&&C.default(s);return E.custom?a:(0,u.h)("a",{"aria-current":s.isExactActive?E.ariaCurrentValue:null,href:s.href,onClick:s.navigate,class:n.value},a)}}});function bE(E){return E?E.aliasOf?E.aliasOf.path:E.path:""}const qE=(E,C,s)=>null!=E?E:null!=C?C:s;function fE(E,C){if(!E)return null;const s=E(C);return 1===s.length?s[0]:s}const yE=(0,u.aZ)({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},setup(E,{attrs:C,slots:s}){const t=(0,u.f3)(d),n=(0,a.Fl)((()=>E.route||t.value)),A=(0,u.f3)(e,0),p=(0,a.Fl)((()=>n.value.matched[A]));(0,u.JJ)(e,A+1),(0,u.JJ)(l,p),(0,u.JJ)(d,n);const c=(0,a.iH)();return(0,u.YP)((()=>[c.value,p.value,E.name]),(([E,C,s],[u,a,t])=>{C&&(C.instances[s]=E,a&&a!==C&&E&&E===u&&(C.leaveGuards.size||(C.leaveGuards=a.leaveGuards),C.updateGuards.size||(C.updateGuards=a.updateGuards))),!E||!C||a&&F(C,a)&&u||(C.enterCallbacks[s]||[]).forEach((C=>C(E)))}),{flush:"post"}),()=>{const a=n.value,t=p.value,l=t&&t.components[E.name],e=E.name;if(!l)return fE(s.default,{Component:l,route:a});const A=t.props[E.name],d=A?!0===A?a.params:"function"==typeof A?A(a):A:null,r=(0,u.h)(l,o({},d,C,{onVnodeUnmounted:E=>{E.component.isUnmounted&&(t.instances[e]=null)},ref:c}));return fE(s.default,{Component:r,route:a})||r}}});function xE(E){const C=function(E,C){const s=[],u=new Map;function a(E,s,u){let l=!u,e=function(E){return{path:E.path,redirect:E.redirect,name:E.name,meta:E.meta||{},aliasOf:void 0,beforeEnter:E.beforeEnter,props:J(E),children:E.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in E?E.components||{}:{default:E.component}}}(E);e.aliasOf=u&&u.record;const A=Q(C,E),p=[e];if("alias"in E){const C="string"==typeof E.alias?[E.alias]:E.alias;for(const E of C)p.push(o({},e,{components:u?u.record.components:e.components,path:E,aliasOf:u?u.record:e}))}let d,c;for(const C of p){let{path:p}=C;if(s&&"/"!==p[0]){let E=s.record.path,u="/"===E[E.length-1]?"":"/";C.path=s.record.path+(p&&u+p)}if(d=W(C,s,A),u?u.alias.push(d):(c=c||d,c!==d&&c.alias.push(d),l&&E.name&&!K(d)&&t(E.name)),"children"in e){let E=e.children;for(let C=0;C{t(c)}:D}function t(E){if(P(E)){const C=u.get(E);C&&(u.delete(E),s.splice(s.indexOf(C),1),C.children.forEach(t),C.alias.forEach(t))}else{let C=s.indexOf(E);C>-1&&(s.splice(C,1),E.record.name&&u.delete(E.record.name),E.children.forEach(t),E.alias.forEach(t))}}function n(E){let C=0;for(;C=0;)C++;s.splice(C,0,E),E.record.name&&!K(E)&&u.set(E.record.name,E)}return C=Q({strict:!1,end:!0,sensitive:!1},C),E.forEach((E=>a(E))),{addRoute:a,resolve:function(E,C){let a,t,n,l={};if("name"in E&&E.name){if(a=u.get(E.name),!a)throw R(1,{location:E});n=a.record.name,l=o(function(E,C){let s={};for(let u of C)u in E&&(s[u]=E[u]);return s}(C.params,a.keys.filter((E=>!E.optional)).map((E=>E.name))),E.params),t=a.stringify(l)}else if("path"in E)t=E.path,a=s.find((E=>E.re.test(t))),a&&(l=a.parse(t),n=a.record.name);else{if(a=C.name?u.get(C.name):s.find((E=>E.re.test(C.path))),!a)throw R(1,{location:E,currentLocation:C});n=a.record.name,l=o({},C.params,E.params),t=a.stringify(l)}const e=[];let A=a;for(;A;)e.unshift(A.record),A=A.parent;return{name:n,path:t,params:l,matched:e,meta:X(e)}},removeRoute:t,getRoutes:function(){return s},getRecordMatcher:function(E){return u.get(E)}}}(E.routes,E);let s=E.parseQuery||iE,t=E.stringifyQuery||BE,n=E.history;const l=gE(),e=gE(),h=gE(),B=(0,a.XI)(I);let j=I;c&&E.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const m=r.bind(null,(E=>""+E)),v=r.bind(null,DE),b=r.bind(null,hE);function q(E,u){if(u=o({},u||B.value),"string"==typeof E){let a=i(s,E,u.path),t=C.resolve({path:a.path},u),l=n.createHref(a.fullPath);return o(a,t,{params:b(t.params),hash:hE(a.hash),redirectedFrom:void 0,href:l})}let a;"path"in E?a=o({},E,{path:i(s,E.path,u.path).path}):(a=o({},E,{params:v(E.params)}),u.params=v(u.params));let l=C.resolve(a,u);const e=E.hash||"";l.params=m(b(l.params));const A=function(E,C){let s=C.query?E(C.query):"";return C.path+(s&&"?")+s+(C.hash||"")}(t,o({},E,{hash:(p=e,oE(p).replace(AE,"{").replace(dE,"}").replace(lE,"^")),path:l.path}));var p;let d=n.createHref(A);return o({fullPath:A,hash:e,query:t===BE?FE(E.query):E.query},l,{redirectedFrom:void 0,href:d})}function f(E){return"string"==typeof E?i(s,E,B.value.path):o({},E)}function k(E,C){if(j!==E)return R(8,{from:C,to:E})}function z(E){return S(E)}function _(E){const C=E.matched[E.matched.length-1];if(C&&C.redirect){const{redirect:s}=C;let u="function"==typeof s?s(E):s;return"string"==typeof u&&(u=u.indexOf("?")>-1||u.indexOf("#")>-1?u=f(u):{path:u}),o({query:E.query,hash:E.hash,params:E.params},u)}}function S(E,C){const s=j=q(E),u=B.value,a=E.state,n=E.force,l=!0===E.replace,e=_(s);if(e)return S(o(f(e),{state:a,force:n,replace:l}),C||s);const A=s;let p;return A.redirectedFrom=C,!n&&function(E,C,s){let u=C.matched.length-1,a=s.matched.length-1;return u>-1&&u===a&&F(C.matched[u],s.matched[a])&&g(C.params,s.params)&&E(C.query)===E(s.query)&&C.hash===s.hash}(t,u,s)&&(p=R(16,{to:A,from:u}),EE(u,u,!0,!1)),(p?Promise.resolve(p):$(A,u)).catch((E=>M(E)?E:G(E))).then((E=>{if(E){if(M(E,2))return S(o(f(E.to),{state:a,force:n,replace:l}),C||A)}else E=N(A,u,!0,l,a);return L(A,u,E),E}))}function T(E,C){const s=k(E,C);return s?Promise.reject(s):Promise.resolve()}function $(E,C){let s;const[u,a,t]=function(E,C){const s=[],u=[],a=[],t=Math.max(C.matched.length,E.matched.length);for(let n=0;nF(E,t)))?u.push(t):s.push(t));const l=E.matched[n];l&&(C.matched.find((E=>F(E,l)))||a.push(l))}return[s,u,a]}(E,C);s=mE(u.reverse(),"beforeRouteLeave",E,C);for(const a of u)a.leaveGuards.forEach((u=>{s.push(jE(u,E,C))}));const n=T.bind(null,E,C);return s.push(n),wE(s).then((()=>{s=[];for(const u of l.list())s.push(jE(u,E,C));return s.push(n),wE(s)})).then((()=>{s=mE(a,"beforeRouteUpdate",E,C);for(const u of a)u.updateGuards.forEach((u=>{s.push(jE(u,E,C))}));return s.push(n),wE(s)})).then((()=>{s=[];for(const u of E.matched)if(u.beforeEnter&&C.matched.indexOf(u)<0)if(Array.isArray(u.beforeEnter))for(const a of u.beforeEnter)s.push(jE(a,E,C));else s.push(jE(u.beforeEnter,E,C));return s.push(n),wE(s)})).then((()=>(E.matched.forEach((E=>E.enterCallbacks={})),s=mE(t,"beforeRouteEnter",E,C),s.push(n),wE(s)))).then((()=>{s=[];for(const u of e.list())s.push(jE(u,E,C));return s.push(n),wE(s)})).catch((E=>M(E,8)?E:Promise.reject(E)))}function L(E,C,s){for(const u of h.list())u(E,C,s)}function N(E,C,s,u,a){const t=k(E,C);if(t)return t;const l=C===I,e=c?history.state:{};s&&(u||l?n.replace(E.fullPath,o({scroll:l&&e&&e.scroll},a)):n.push(E.fullPath,a)),B.value=E,EE(E,C,s,l),Y()}let O;let H,U=gE(),Z=gE();function G(E){return Y(E),Z.list().forEach((C=>C(E))),Promise.reject(E)}function Y(E){H||(H=!0,O=n.listen(((E,C,s)=>{let u=q(E);const a=_(u);if(a)return void S(o(a,{replace:!0}),u).catch(D);j=u;const t=B.value;var l,e;c&&(l=x(t.fullPath,s.delta),e=y(),w.set(l,e)),$(u,t).catch((E=>M(E,12)?E:M(E,2)?(S(E.to,u).catch(D),Promise.reject()):(s.delta&&n.go(-s.delta,!1),G(E)))).then((E=>{(E=E||N(u,t,!1))&&s.delta&&n.go(-s.delta,!1),L(u,t,E)})).catch(D)})),U.list().forEach((([C,s])=>E?s(E):C())),U.reset())}function EE(C,s,a,t){const{scrollBehavior:n}=E;if(!c||!n)return Promise.resolve();let l=!a&&function(E){const C=w.get(E);return w.delete(E),C}(x(C.fullPath,0))||(t||!a)&&history.state&&history.state.scroll||null;return(0,u.Y3)().then((()=>n(C,s,l))).then((E=>E&&function(E){let C;if("el"in E){let s=E.el;const u="string"==typeof s&&s.startsWith("#"),a="string"==typeof s?u?document.getElementById(s.slice(1)):document.querySelector(s):s;if(!a)return;C=function(E,C){const s=document.documentElement.getBoundingClientRect(),u=E.getBoundingClientRect();return{behavior:C.behavior,left:u.left-s.left-(C.left||0),top:u.top-s.top-(C.top||0)}}(a,E)}else C=E;"scrollBehavior"in document.documentElement.style?window.scrollTo(C):window.scrollTo(null!=C.left?C.left:window.pageXOffset,null!=C.top?C.top:window.pageYOffset)}(E))).catch(G)}const CE=E=>n.go(E);let sE;const uE=new Set;return{currentRoute:B,addRoute:function(E,s){let u,a;return P(E)?(u=C.getRecordMatcher(E),a=s):a=E,C.addRoute(a,u)},removeRoute:function(E){let s=C.getRecordMatcher(E);s&&C.removeRoute(s)},hasRoute:function(E){return!!C.getRecordMatcher(E)},getRoutes:function(){return C.getRoutes().map((E=>E.record))},resolve:q,options:E,push:z,replace:function(E){return z(o(f(E),{replace:!0}))},go:CE,back:()=>CE(-1),forward:()=>CE(1),beforeEach:l.add,beforeResolve:e.add,afterEach:h.add,onError:Z.add,isReady:function(){return H&&B.value!==I?Promise.resolve():new Promise(((E,C)=>{U.add([E,C])}))},install(E){E.component("RouterLink",vE),E.component("RouterView",yE),E.config.globalProperties.$router=this,Object.defineProperty(E.config.globalProperties,"$route",{get:()=>(0,a.SU)(B)}),c&&!sE&&B.value===I&&(sE=!0,z(n.location).catch((E=>{})));const C={};for(let E in I)C[E]=(0,a.Fl)((()=>B.value[E]));E.provide(A,this),E.provide(p,(0,a.qj)(C)),E.provide(d,B);let s=E.unmount;uE.add(E),E.unmount=function(){uE.delete(E),uE.size<1&&(O(),B.value=I,sE=!1,H=!1),s()}}}}function wE(E){return E.reduce(((E,C)=>E.then((()=>C()))),Promise.resolve())}}}]); \ No newline at end of file diff --git a/chunks.1630f4ae.js.LICENSE.txt b/chunks.1630f4ae.js.LICENSE.txt deleted file mode 100644 index 21c139d8..00000000 --- a/chunks.1630f4ae.js.LICENSE.txt +++ /dev/null @@ -1,5 +0,0 @@ -/*! - * vue-router v4.0.6 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */ diff --git a/site-desktop.cb7fb9cc.js b/site-desktop.cb7fb9cc.js deleted file mode 100644 index 1ba8e292..00000000 --- a/site-desktop.cb7fb9cc.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see site-desktop.cb7fb9cc.js.LICENSE.txt */ -!function(){var e,t={6252:function(e,t,n){"use strict";n.d(t,{P$:function(){return w},HY:function(){return je},$d:function(){return bt},j4:function(){return Ue},kq:function(){return Ye},iD:function(){return Ve},_:function(){return Ge},Us:function(){return we},Uk:function(){return Qe},Wm:function(){return Ke},aZ:function(){return I},FN:function(){return ut},Q6:function(){return E},h:function(){return Kt},f3:function(){return b},Y3:function(){return Nt},ic:function(){return U},wg:function(){return Re},Cn:function(){return p},JJ:function(){return y},dD:function(){return d},Ko:function(){return tt},WI:function(){return nt},up:function(){return De},U2:function(){return k},nK:function(){return D},Y8:function(){return _},YP:function(){return Bt},w5:function(){return f},wy:function(){return ge}});var r=n(2610),o=n(3577);function a(e,t,...n){const r=e.vnode.props||o.kT;let a=n;const i=t.startsWith("update:"),c=i&&t.slice(7);if(c&&c in r){const e=`${"modelValue"===c?"model":c}Modifiers`,{number:t,trim:i}=r[e]||o.kT;i?a=n.map((e=>e.trim())):t&&(a=n.map(o.He))}let l,s=r[l=(0,o.hR)(t)]||r[l=(0,o.hR)((0,o._A)(t))];!s&&i&&(s=r[l=(0,o.hR)((0,o.rs)(t))]),s&&bt(s,e,6,a);const u=r[l+"Once"];if(u){if(e.emitted){if(e.emitted[l])return}else e.emitted={};e.emitted[l]=!0,bt(u,e,6,a)}}function i(e,t,n=!1){const r=t.emitsCache,a=r.get(e);if(void 0!==a)return a;const c=e.emits;let l={},s=!1;if(!(0,o.mf)(e)){const r=e=>{const n=i(e,t,!0);n&&(s=!0,(0,o.l7)(l,n))};!n&&t.mixins.length&&t.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}return c||s?((0,o.kJ)(c)?c.forEach((e=>l[e]=null)):(0,o.l7)(l,c),r.set(e,l),l):(r.set(e,null),null)}function c(e,t){return!(!e||!(0,o.F7)(t))&&(t=t.slice(2).replace(/Once$/,""),(0,o.RI)(e,t[0].toLowerCase()+t.slice(1))||(0,o.RI)(e,(0,o.rs)(t))||(0,o.RI)(e,t))}new Set,new Map,Object.create(null),Object.create(null);let l=null,s=null;function u(e){const t=l;return l=e,s=e&&e.type.__scopeId||null,t}function d(e){s=e}function p(){s=null}function f(e,t=l,n){if(!t)return e;if(e._n)return e;const r=(...n)=>{r._d&&Fe(-1);const o=u(t),a=e(...n);return u(o),r._d&&Fe(1),a};return r._n=!0,r._c=!0,r._d=!0,r}function h(e){const{type:t,vnode:n,proxy:r,withProxy:a,props:i,propsOptions:[c],slots:l,attrs:s,emit:d,render:p,renderCache:f,data:h,setupState:v,ctx:y,inheritAttrs:b}=e;let _;const S=u(e);try{let e;if(4&n.shapeFlag){const t=a||r;_=$e(p.call(t,t,f,i,v,h,y)),e=s}else{const n=t;_=$e(n.length>1?n(i,{attrs:s,slots:l,emit:d}):n(i,null)),e=t.props?s:m(s)}let u=_;if(e&&!1!==b){const t=Object.keys(e),{shapeFlag:n}=u;t.length&&(1&n||6&n)&&(c&&t.some(o.tR)&&(e=g(e,c)),u=Je(u,e))}n.dirs&&(u.dirs=u.dirs?u.dirs.concat(n.dirs):n.dirs),n.transition&&(u.transition=n.transition),_=u}catch(t){Ne.length=0,_t(t,e,1),_=Ke(Te)}return u(S),_}const m=e=>{let t;for(const n in e)("class"===n||"style"===n||(0,o.F7)(n))&&((t||(t={}))[n]=e[n]);return t},g=(e,t)=>{const n={};for(const r in e)(0,o.tR)(r)&&r.slice(9)in t||(n[r]=e[r]);return n};function v(e,t,n){const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!0;for(let o=0;o1)return n&&(0,o.mf)(t)?t.call(r.proxy):t}}function _(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return M((()=>{e.isMounted=!0})),Z((()=>{e.isUnmounting=!0})),e}const S=[Function,Array],w={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:S,onEnter:S,onAfterEnter:S,onEnterCancelled:S,onBeforeLeave:S,onLeave:S,onAfterLeave:S,onLeaveCancelled:S,onBeforeAppear:S,onAppear:S,onAfterAppear:S,onAppearCancelled:S},setup(e,{slots:t}){const n=ut(),o=_();let a;return()=>{const i=t.default&&E(t.default(),!0);if(!i||!i.length)return;const c=(0,r.IU)(e),{mode:l}=c,s=i[0];if(o.isLeaving)return O(s);const u=C(s);if(!u)return O(s);const d=k(u,c,o,n);D(u,d);const p=n.subTree,f=p&&C(p);let h=!1;const{getTransitionKey:m}=u.type;if(m){const e=m();void 0===a?a=e:e!==a&&(a=e,h=!0)}if(f&&f.type!==Te&&(!Be(u,f)||h)){const e=k(f,c,o,n);if(D(f,e),"out-in"===l)return o.isLeaving=!0,e.afterLeave=()=>{o.isLeaving=!1,n.update()},O(s);"in-out"===l&&u.type!==Te&&(e.delayLeave=(e,t,n)=>{x(o,f)[String(f.key)]=f,e._leaveCb=()=>{t(),e._leaveCb=void 0,delete d.delayedLeave},d.delayedLeave=n})}return s}}};function x(e,t){const{leavingVNodes:n}=e;let r=n.get(t.type);return r||(r=Object.create(null),n.set(t.type,r)),r}function k(e,t,n,r){const{appear:o,mode:a,persisted:i=!1,onBeforeEnter:c,onEnter:l,onAfterEnter:s,onEnterCancelled:u,onBeforeLeave:d,onLeave:p,onAfterLeave:f,onLeaveCancelled:h,onBeforeAppear:m,onAppear:g,onAfterAppear:v,onAppearCancelled:y}=t,b=String(e.key),_=x(n,e),S=(e,t)=>{e&&bt(e,r,9,t)},w={mode:a,persisted:i,beforeEnter(t){let r=c;if(!n.isMounted){if(!o)return;r=m||c}t._leaveCb&&t._leaveCb(!0);const a=_[b];a&&Be(e,a)&&a.el._leaveCb&&a.el._leaveCb(),S(r,[t])},enter(e){let t=l,r=s,a=u;if(!n.isMounted){if(!o)return;t=g||l,r=v||s,a=y||u}let i=!1;const c=e._enterCb=t=>{i||(i=!0,S(t?a:r,[e]),w.delayedLeave&&w.delayedLeave(),e._enterCb=void 0)};t?(t(e,c),t.length<=1&&c()):c()},leave(t,r){const o=String(e.key);if(t._enterCb&&t._enterCb(!0),n.isUnmounting)return r();S(d,[t]);let a=!1;const i=t._leaveCb=n=>{a||(a=!0,r(),S(n?h:f,[t]),t._leaveCb=void 0,_[o]===e&&delete _[o])};_[o]=e,p?(p(t,i),p.length<=1&&i()):i()},clone:e=>k(e,t,n,r)};return w}function O(e){if(P(e))return(e=Je(e)).children=null,e}function C(e){return P(e)?e.children?e.children[0]:void 0:e}function D(e,t){6&e.shapeFlag&&e.component?D(e.component.subTree,t):128&e.shapeFlag?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function E(e,t=!1){let n=[],r=0;for(let o=0;o1)for(let e=0;e!!e.type.__asyncLoader,P=e=>e.type.__isKeepAlive;function T(e,t){N(e,"a",t)}function A(e,t){N(e,"da",t)}function N(e,t,n=st){const r=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}e()});if(R(t,r,n),n){let e=n.parent;for(;e&&e.parent;)P(e.parent.vnode)&&L(r,t,n,e),e=e.parent}}function L(e,t,n,r){const a=R(t,e,r,!0);B((()=>{(0,o.Od)(r[t],a)}),n)}function R(e,t,n=st,o=!1){if(n){const a=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;(0,r.Jd)(),dt(n);const a=bt(t,n,e,o);return pt(),(0,r.lk)(),a});return o?a.unshift(i):a.push(i),i}}RegExp,RegExp;const H=e=>(t,n=st)=>(!ht||"sp"===e)&&R(e,t,n),F=H("bm"),M=H("m"),V=H("bu"),U=H("u"),Z=H("bum"),B=H("um"),z=H("sp"),q=H("rtg"),W=H("rtc");function G(e,t=st){R("ec",e,t)}let K=!0;function J(e,t,n){bt((0,o.kJ)(e)?e.map((e=>e.bind(t.proxy))):e.bind(t.proxy),t,n)}function Q(e,t,n,r){const a=r.includes(".")?Wt(n,r):()=>n[r];if((0,o.HD)(e)){const n=t[e];(0,o.mf)(n)&&Bt(a,n)}else if((0,o.mf)(e))Bt(a,e.bind(n));else if((0,o.Kn)(e))if((0,o.kJ)(e))e.forEach((e=>Q(e,t,n,r)));else{const r=(0,o.mf)(e.handler)?e.handler.bind(n):t[e.handler];(0,o.mf)(r)&&Bt(a,r,e)}}function Y(e){const t=e.type,{mixins:n,extends:r}=t,{mixins:o,optionsCache:a,config:{optionMergeStrategies:i}}=e.appContext,c=a.get(t);let l;return c?l=c:o.length||n||r?(l={},o.length&&o.forEach((e=>$(l,e,i,!0))),$(l,t,i)):l=t,a.set(t,l),l}function $(e,t,n,r=!1){const{mixins:o,extends:a}=t;a&&$(e,a,n,!0),o&&o.forEach((t=>$(e,t,n,!0)));for(const o in t)if(r&&"expose"===o);else{const r=X[o]||n&&n[o];e[o]=r?r(e[o],t[o]):t[o]}return e}const X={data:ee,props:re,emits:re,methods:re,computed:re,beforeCreate:ne,created:ne,beforeMount:ne,mounted:ne,beforeUpdate:ne,updated:ne,beforeDestroy:ne,destroyed:ne,activated:ne,deactivated:ne,errorCaptured:ne,serverPrefetch:ne,components:re,directives:re,watch:function(e,t){if(!e)return t;if(!t)return e;const n=(0,o.l7)(Object.create(null),e);for(const r in t)n[r]=ne(e[r],t[r]);return n},provide:ee,inject:function(e,t){return re(te(e),te(t))}};function ee(e,t){return t?e?function(){return(0,o.l7)((0,o.mf)(e)?e.call(this,this):e,(0,o.mf)(t)?t.call(this,this):t)}:t:e}function te(e){if((0,o.kJ)(e)){const t={};for(let n=0;n{s=!0;const[n,r]=ie(e,t,!0);(0,o.l7)(c,n),r&&l.push(...r)};!n&&t.mixins.length&&t.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}if(!i&&!s)return r.set(e,o.Z6),o.Z6;if((0,o.kJ)(i))for(let e=0;e-1,r[1]=n<0||e-1||(0,o.RI)(r,"default"))&&l.push(t)}}}const u=[c,l];return r.set(e,u),u}function ce(e){return"$"!==e[0]}function le(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:null===e?"null":""}function se(e,t){return le(e)===le(t)}function ue(e,t){return(0,o.kJ)(t)?t.findIndex((t=>se(t,e))):(0,o.mf)(t)&&se(t,e)?0:-1}const de=e=>"_"===e[0]||"$stable"===e,pe=e=>(0,o.kJ)(e)?e.map($e):[$e(e)],fe=(e,t,n)=>{const r=f((e=>pe(t(e))),n);return r._c=!1,r},he=(e,t,n)=>{const r=e._ctx;for(const n in e){if(de(n))continue;const a=e[n];if((0,o.mf)(a))t[n]=fe(0,a,r);else if(null!=a){const e=pe(a);t[n]=()=>e}}},me=(e,t)=>{const n=pe(t);e.slots.default=()=>n};function ge(e,t){if(null===l)return e;const n=l.proxy,r=e.dirs||(e.dirs=[]);for(let e=0;e(i.has(e)||(e&&(0,o.mf)(e.install)?(i.add(e),e.install(l,...t)):(0,o.mf)(e)&&(i.add(e),e(l,...t))),l),mixin:e=>(a.mixins.includes(e)||a.mixins.push(e),l),component:(e,t)=>t?(a.components[e]=t,l):a.components[e],directive:(e,t)=>t?(a.directives[e]=t,l):a.directives[e],mount(o,i,s){if(!c){const u=Ke(n,r);return u.appContext=a,i&&t?t(u,o):e(u,o,s),c=!0,l._container=o,o.__vue_app__=l,u.component.proxy}},unmount(){c&&(e(null,l._container),delete l._container.__vue_app__)},provide:(e,t)=>(a.provides[e]=t,l)};return l}}const Se=function(e,t){t&&t.pendingBranch?(0,o.kJ)(e)?t.effects.push(...e):t.effects.push(e):Ht(e,It,Et,jt)};function we(e){return function(e,t){const{insert:n,remove:l,patchProp:s,createElement:u,createText:d,createComment:p,setText:f,setElementText:m,parentNode:g,nextSibling:y,setScopeId:b=o.dG,cloneNode:_,insertStaticContent:S}=e,w=(e,t,n,r=null,o=null,a=null,i=!1,c=null,l=!!t.dynamicChildren)=>{if(e===t)return;e&&!Be(e,t)&&(r=Y(e),W(e,o,a,!0),e=null),-2===t.patchFlag&&(l=!1,t.dynamicChildren=null);const{type:s,ref:u,shapeFlag:d}=t;switch(s){case Pe:x(e,t,n,r);break;case Te:k(e,t,n,r);break;case Ae:null==e&&O(t,n,r,i);break;case je:R(e,t,n,r,o,a,i,c,l);break;default:1&d?D(e,t,n,r,o,a,i,c,l):6&d?H(e,t,n,r,o,a,i,c,l):(64&d||128&d)&&s.process(e,t,n,r,o,a,i,c,l,X)}null!=u&&o&&xe(u,e&&e.ref,a,t||e,!t)},x=(e,t,r,o)=>{if(null==e)n(t.el=d(t.children),r,o);else{const n=t.el=e.el;t.children!==e.children&&f(n,t.children)}},k=(e,t,r,o)=>{null==e?n(t.el=p(t.children||""),r,o):t.el=e.el},O=(e,t,n,r)=>{[e.el,e.anchor]=S(e.children,t,n,r)},C=({el:e,anchor:t})=>{let n;for(;e&&e!==t;)n=y(e),l(e),e=n;l(t)},D=(e,t,n,r,o,a,i,c,l)=>{i=i||"svg"===t.type,null==e?E(t,n,r,o,a,i,c,l):A(e,t,o,a,i,c,l)},E=(e,t,r,a,i,c,l,d)=>{let p,f;const{type:h,props:g,shapeFlag:v,transition:y,patchFlag:b,dirs:S}=e;if(e.el&&void 0!==_&&-1===b)p=e.el=_(e.el);else{if(p=e.el=u(e.type,c,g&&g.is,g),8&v?m(p,e.children):16&v&&T(e.children,p,null,a,i,c&&"foreignObject"!==h,l,d),S&&ve(e,null,a,"created"),g){for(const t in g)"value"===t||(0,o.Gg)(t)||s(p,t,null,g[t],c,e.children,a,i,Q);"value"in g&&s(p,"value",null,g.value),(f=g.onVnodeBeforeMount)&&ke(f,a,e)}I(p,e,e.scopeId,l,a)}S&&ve(e,null,a,"beforeMount");const w=(!i||i&&!i.pendingBranch)&&y&&!y.persisted;w&&y.beforeEnter(p),n(p,t,r),((f=g&&g.onVnodeMounted)||w||S)&&Se((()=>{f&&ke(f,a,e),w&&y.enter(p),S&&ve(e,null,a,"mounted")}),i)},I=(e,t,n,r,o)=>{if(n&&b(e,n),r)for(let t=0;t{for(let s=l;s{const l=t.el=e.el;let{patchFlag:u,dynamicChildren:d,dirs:p}=t;u|=16&e.patchFlag;const f=e.props||o.kT,h=t.props||o.kT;let g;if((g=h.onVnodeBeforeUpdate)&&ke(g,n,t,e),p&&ve(t,e,n,"beforeUpdate"),u>0){if(16&u)L(l,t,f,h,n,r,a);else if(2&u&&f.class!==h.class&&s(l,"class",null,h.class,a),4&u&&s(l,"style",f.style,h.style,a),8&u){const o=t.dynamicProps;for(let t=0;t{g&&ke(g,n,t,e),p&&ve(t,e,n,"updated")}),r)},N=(e,t,n,r,o,a,i)=>{for(let c=0;c{if(n!==r){for(const l in r){if((0,o.Gg)(l))continue;const u=r[l],d=n[l];u!==d&&"value"!==l&&s(e,l,d,u,c,t.children,a,i,Q)}if(n!==o.kT)for(const l in n)(0,o.Gg)(l)||l in r||s(e,l,n[l],null,c,t.children,a,i,Q);"value"in r&&s(e,"value",n.value,r.value)}},R=(e,t,r,o,a,i,c,l,s)=>{const u=t.el=e?e.el:d(""),p=t.anchor=e?e.anchor:d("");let{patchFlag:f,dynamicChildren:h,slotScopeIds:m}=t;m&&(l=l?l.concat(m):m),null==e?(n(u,r,o),n(p,r,o),T(t.children,r,p,a,i,c,l,s)):f>0&&64&f&&h&&e.dynamicChildren?(N(e.dynamicChildren,h,r,a,i,c,l),(null!=t.key||a&&t===a.subTree)&&Oe(e,t,!0)):Z(e,t,r,p,a,i,c,l,s)},H=(e,t,n,r,o,a,i,c,l)=>{t.slotScopeIds=c,null==e?512&t.shapeFlag?o.ctx.activate(t,n,r,i,l):F(t,n,r,o,a,i,l):M(e,t,l)},F=(e,t,n,c,l,s,u)=>{const d=e.component=function(e,t,n){const c=e.type,l=(t?t.appContext:e.appContext)||ct,s={uid:lt++,vnode:e,type:c,parent:t,appContext:l,root:null,next:null,subTree:null,update:null,scope:new r.Bj(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(l.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:ie(c,l),emitsOptions:i(c,l),emit:null,emitted:null,propsDefaults:o.kT,inheritAttrs:c.inheritAttrs,ctx:o.kT,data:o.kT,props:o.kT,attrs:o.kT,slots:o.kT,refs:o.kT,setupState:o.kT,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return s.ctx={_:s},s.root=t?t.root:s,s.emit=a.bind(null,s),e.ce&&e.ce(s),s}(e,c,l);if(P(e)&&(d.ctx.renderer=X),function(e,t=!1){ht=t;const{props:n,children:a}=e.vnode,i=ft(e);!function(e,t,n,a=!1){const i={},c={};(0,o.Nj)(c,ze,1),e.propsDefaults=Object.create(null),oe(e,t,i,c);for(const t in e.propsOptions[0])t in i||(i[t]=void 0);n?e.props=a?i:(0,r.Um)(i):e.type.props?e.props=i:e.props=c,e.attrs=c}(e,n,i,t),((e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=(0,r.IU)(t),(0,o.Nj)(t,"_",n)):he(t,e.slots={})}else e.slots={},t&&me(e,t);(0,o.Nj)(e.slots,ze,1)})(e,a);const c=i?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=(0,r.Xl)(new Proxy(e.ctx,it));const{setup:a}=n;if(a){const n=e.setupContext=a.length>1?function(e){const t=t=>{e.exposed=t||{}};let n;return{get attrs(){return n||(n=function(e){return new Proxy(e.attrs,{get:(t,n)=>((0,r.j)(e,"get","$attrs"),t[n])})}(e))},slots:e.slots,emit:e.emit,expose:t}}(e):null;dt(e),(0,r.Jd)();const i=yt(a,e,0,[e.props,n]);if((0,r.lk)(),pt(),(0,o.tI)(i)){if(i.then(pt,pt),t)return i.then((n=>{mt(e,n,t)})).catch((t=>{_t(t,e,0)}));e.asyncDep=i}else mt(e,i,t)}else gt(e)}(e,t):void 0;ht=!1}(d),d.asyncDep){if(l&&l.registerDep(d,V),!e.el){const e=d.subTree=Ke(Te);k(null,e,t,n)}}else V(d,e,t,n,l,s,u)},M=(e,t,n)=>{const r=t.component=e.component;if(function(e,t,n){const{props:r,children:o,component:a}=e,{props:i,children:l,patchFlag:s}=t,u=a.emitsOptions;if(t.dirs||t.transition)return!0;if(!(n&&s>=0))return!(!o&&!l||l&&l.$stable)||r!==i&&(r?!i||v(r,i,u):!!i);if(1024&s)return!0;if(16&s)return r?v(r,i,u):!!i;if(8&s){const e=t.dynamicProps;for(let t=0;tkt&&xt.splice(t,1)}(r.update),r.update()}else t.component=e.component,t.el=e.el,r.vnode=t},V=(e,t,n,a,i,c,l)=>{const s=new r.qq((()=>{if(e.isMounted){let t,{next:n,bu:r,u:a,parent:u,vnode:d}=e,p=n;n?(n.el=d.el,U(e,n,l)):n=d,s.allowRecurse=!1,r&&(0,o.ir)(r),(t=n.props&&n.props.onVnodeBeforeUpdate)&&ke(t,u,n,d),s.allowRecurse=!0;const f=h(e),m=e.subTree;e.subTree=f,w(m,f,g(m.el),Y(m),e,i,c),n.el=f.el,null===p&&function({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}(e,f.el),a&&Se(a,i),(t=n.props&&n.props.onVnodeUpdated)&&Se((()=>ke(t,u,n,d)),i)}else{let r;const{el:l,props:u}=t,{bm:d,m:p,parent:f}=e;if(s.allowRecurse=!1,d&&(0,o.ir)(d),(r=u&&u.onVnodeBeforeMount)&&ke(r,f,t),s.allowRecurse=!0,l&&te){const n=()=>{e.subTree=h(e),te(l,e.subTree,e,i,null)};j(t)?t.type.__asyncLoader().then((()=>!e.isUnmounted&&n())):n()}else{const r=e.subTree=h(e);w(null,r,n,a,e,i,c),t.el=r.el}if(p&&Se(p,i),r=u&&u.onVnodeMounted){const e=t;Se((()=>ke(r,f,e)),i)}256&t.shapeFlag&&e.a&&Se(e.a,i),e.isMounted=!0,t=n=a=null}}),(()=>Lt(e.update)),e.scope),u=e.update=s.run.bind(s);u.id=e.uid,s.allowRecurse=u.allowRecurse=!0,u()},U=(e,t,n)=>{t.component=e;const a=e.vnode.props;e.vnode=t,e.next=null,function(e,t,n,a){const{props:i,attrs:c,vnode:{patchFlag:l}}=e,s=(0,r.IU)(i),[u]=e.propsOptions;let d=!1;if(!(a||l>0)||16&l){let r;oe(e,t,i,c)&&(d=!0);for(const a in s)t&&((0,o.RI)(t,a)||(r=(0,o.rs)(a))!==a&&(0,o.RI)(t,r))||(u?!n||void 0===n[a]&&void 0===n[r]||(i[a]=ae(u,s,a,void 0,e,!0)):delete i[a]);if(c!==s)for(const e in c)t&&(0,o.RI)(t,e)||(delete c[e],d=!0)}else if(8&l){const n=e.vnode.dynamicProps;for(let r=0;r{const{vnode:r,slots:a}=e;let i=!0,c=o.kT;if(32&r.shapeFlag){const e=t._;e?n&&1===e?i=!1:((0,o.l7)(a,t),n||1!==e||delete a._):(i=!t.$stable,he(t,a)),c=t}else t&&(me(e,t),c={default:1});if(i)for(const e in a)de(e)||e in c||delete a[e]})(e,t.children,n),(0,r.Jd)(),Ft(void 0,e.update),(0,r.lk)()},Z=(e,t,n,r,o,a,i,c,l=!1)=>{const s=e&&e.children,u=e?e.shapeFlag:0,d=t.children,{patchFlag:p,shapeFlag:f}=t;if(p>0){if(128&p)return void z(s,d,n,r,o,a,i,c,l);if(256&p)return void B(s,d,n,r,o,a,i,c,l)}8&f?(16&u&&Q(s,o,a),d!==s&&m(n,d)):16&u?16&f?z(s,d,n,r,o,a,i,c,l):Q(s,o,a,!0):(8&u&&m(n,""),16&f&&T(d,n,r,o,a,i,c,l))},B=(e,t,n,r,a,i,c,l,s)=>{e=e||o.Z6,t=t||o.Z6;const u=e.length,d=t.length,p=Math.min(u,d);let f;for(f=0;fd?Q(e,a,i,!0,!1,p):T(t,n,r,a,i,c,l,s,p)},z=(e,t,n,r,a,i,c,l,s)=>{let u=0;const d=t.length;let p=e.length-1,f=d-1;for(;u<=p&&u<=f;){const r=e[u],o=t[u]=s?Xe(t[u]):$e(t[u]);if(!Be(r,o))break;w(r,o,n,null,a,i,c,l,s),u++}for(;u<=p&&u<=f;){const r=e[p],o=t[f]=s?Xe(t[f]):$e(t[f]);if(!Be(r,o))break;w(r,o,n,null,a,i,c,l,s),p--,f--}if(u>p){if(u<=f){const e=f+1,o=ef)for(;u<=p;)W(e[u],a,i,!0),u++;else{const h=u,m=u,g=new Map;for(u=m;u<=f;u++){const e=t[u]=s?Xe(t[u]):$e(t[u]);null!=e.key&&g.set(e.key,u)}let v,y=0;const b=f-m+1;let _=!1,S=0;const x=new Array(b);for(u=0;u=b){W(r,a,i,!0);continue}let o;if(null!=r.key)o=g.get(r.key);else for(v=m;v<=f;v++)if(0===x[v-m]&&Be(r,t[v])){o=v;break}void 0===o?W(r,a,i,!0):(x[o-m]=u+1,o>=S?S=o:_=!0,w(r,t[o],n,null,a,i,c,l,s),y++)}const k=_?function(e){const t=e.slice(),n=[0];let r,o,a,i,c;const l=e.length;for(r=0;r>1,e[n[c]]0&&(t[r]=n[a-1]),n[a]=r)}}for(a=n.length,i=n[a-1];a-- >0;)n[a]=i,i=t[i];return n}(x):o.Z6;for(v=k.length-1,u=b-1;u>=0;u--){const e=m+u,o=t[e],p=e+1{const{el:i,type:c,transition:l,children:s,shapeFlag:u}=e;if(6&u)q(e.component.subTree,t,r,o);else if(128&u)e.suspense.move(t,r,o);else if(64&u)c.move(e,t,r,X);else if(c!==je)if(c!==Ae)if(2!==o&&1&u&&l)if(0===o)l.beforeEnter(i),n(i,t,r),Se((()=>l.enter(i)),a);else{const{leave:e,delayLeave:o,afterLeave:a}=l,c=()=>n(i,t,r),s=()=>{e(i,(()=>{c(),a&&a()}))};o?o(i,c,s):s()}else n(i,t,r);else(({el:e,anchor:t},r,o)=>{let a;for(;e&&e!==t;)a=y(e),n(e,r,o),e=a;n(t,r,o)})(e,t,r);else{n(i,t,r);for(let e=0;e{const{type:a,props:i,ref:c,children:l,dynamicChildren:s,shapeFlag:u,patchFlag:d,dirs:p}=e;if(null!=c&&xe(c,null,n,e,!0),256&u)return void t.ctx.deactivate(e);const f=1&u&&p;let h;if((h=i&&i.onVnodeBeforeUnmount)&&ke(h,t,e),6&u)J(e.component,n,r);else{if(128&u)return void e.suspense.unmount(n,r);f&&ve(e,null,t,"beforeUnmount"),64&u?e.type.remove(e,t,n,o,X,r):s&&(a!==je||d>0&&64&d)?Q(s,t,n,!1,!0):(a===je&&(128&d||256&d)||!o&&16&u)&&Q(l,t,n),r&&G(e)}((h=i&&i.onVnodeUnmounted)||f)&&Se((()=>{h&&ke(h,t,e),f&&ve(e,null,t,"unmounted")}),n)},G=e=>{const{type:t,el:n,anchor:r,transition:o}=e;if(t===je)return void K(n,r);if(t===Ae)return void C(e);const a=()=>{l(n),o&&!o.persisted&&o.afterLeave&&o.afterLeave()};if(1&e.shapeFlag&&o&&!o.persisted){const{leave:t,delayLeave:r}=o,i=()=>t(n,a);r?r(e.el,a,i):i()}else a()},K=(e,t)=>{let n;for(;e!==t;)n=y(e),l(e),e=n;l(t)},J=(e,t,n)=>{const{bum:r,scope:a,update:i,subTree:c,um:l}=e;r&&(0,o.ir)(r),a.stop(),i&&(i.active=!1,W(c,e,t,n)),l&&Se(l,t),Se((()=>{e.isUnmounted=!0}),t),t&&t.pendingBranch&&!t.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===t.pendingId&&(t.deps--,0===t.deps&&t.resolve())},Q=(e,t,n,r=!1,o=!1,a=0)=>{for(let i=a;i6&e.shapeFlag?Y(e.component.subTree):128&e.shapeFlag?e.suspense.next():y(e.anchor||e.el),$=(e,t,n)=>{null==e?t._vnode&&W(t._vnode,null,null,!0):w(t._vnode||null,e,t,null,null,null,n),Mt(),t._vnode=e},X={p:w,um:W,m:q,r:G,mt:F,mc:T,pc:Z,pbc:N,n:Y,o:e};let ee,te;return t&&([ee,te]=t(X)),{render:$,hydrate:ee,createApp:_e($,ee)}}(e)}function xe(e,t,n,a,i=!1){if((0,o.kJ)(e))return void e.forEach(((e,r)=>xe(e,t&&((0,o.kJ)(t)?t[r]:t),n,a,i)));if(j(a)&&!i)return;const c=4&a.shapeFlag?vt(a.component)||a.component.proxy:a.el,l=i?null:c,{i:s,r:u}=e,d=t&&t.r,p=s.refs===o.kT?s.refs={}:s.refs,f=s.setupState;if(null!=d&&d!==u&&((0,o.HD)(d)?(p[d]=null,(0,o.RI)(f,d)&&(f[d]=null)):(0,r.dq)(d)&&(d.value=null)),(0,o.HD)(u)){const e=()=>{p[u]=l,(0,o.RI)(f,u)&&(f[u]=l)};l?(e.id=-1,Se(e,n)):e()}else if((0,r.dq)(u)){const e=()=>{u.value=l};l?(e.id=-1,Se(e,n)):e()}else(0,o.mf)(u)&&yt(u,s,12,[l,p])}function ke(e,t,n,r=null){bt(e,t,7,[n,r])}function Oe(e,t,n=!1){const r=e.children,a=t.children;if((0,o.kJ)(r)&&(0,o.kJ)(a))for(let e=0;e0?Le||o.Z6:null,Ne.pop(),Le=Ne[Ne.length-1]||null,He>0&&Le&&Le.push(e),e}function Ve(e,t,n,r,o,a){return Me(Ge(e,t,n,r,o,a,!0))}function Ue(e,t,n,r,o){return Me(Ke(e,t,n,r,o,!0))}function Ze(e){return!!e&&!0===e.__v_isVNode}function Be(e,t){return e.type===t.type&&e.key===t.key}const ze="__vInternal",qe=({key:e})=>null!=e?e:null,We=({ref:e})=>null!=e?(0,o.HD)(e)||(0,r.dq)(e)||(0,o.mf)(e)?{i:l,r:e}:e:null;function Ge(e,t=null,n=null,r=0,a=null,i=(e===je?0:1),c=!1,l=!1){const u={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&qe(t),ref:t&&We(t),scopeId:s,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:r,dynamicProps:a,dynamicChildren:null,appContext:null};return l?(et(u,n),128&i&&e.normalize(u)):n&&(u.shapeFlag|=(0,o.HD)(n)?8:16),He>0&&!c&&Le&&(u.patchFlag>0||6&i)&&32!==u.patchFlag&&Le.push(u),u}const Ke=function(e,t=null,n=null,a=0,i=null,c=!1){if(e&&e!==Ee||(e=Te),Ze(e)){const r=Je(e,t,!0);return n&&et(r,n),r}if(l=e,(0,o.mf)(l)&&"__vccOpts"in l&&(e=e.__vccOpts),t){t=function(e){return e?(0,r.X3)(e)||ze in e?(0,o.l7)({},e):e:null}(t);let{class:e,style:n}=t;e&&!(0,o.HD)(e)&&(t.class=(0,o.C_)(e)),(0,o.Kn)(n)&&((0,r.X3)(n)&&!(0,o.kJ)(n)&&(n=(0,o.l7)({},n)),t.style=(0,o.j5)(n))}var l;return Ge(e,t,n,a,i,(0,o.HD)(e)?1:(e=>e.__isSuspense)(e)?128:(e=>e.__isTeleport)(e)?64:(0,o.Kn)(e)?4:(0,o.mf)(e)?2:0,c,!0)};function Je(e,t,n=!1){const{props:r,ref:a,patchFlag:i,children:c}=e,l=t?function(...e){const t={};for(let n=0;nt(e,n,void 0,i&&i[n])));else{const n=Object.keys(e);a=new Array(n.length);for(let r=0,o=n.length;r!Ze(e)||e.type!==Te&&!(e.type===je&&!rt(e.children))))?e:null}const ot=e=>e?ft(e)?vt(e)||e.proxy:ot(e.parent):null,at=(0,o.l7)(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>ot(e.parent),$root:e=>ot(e.root),$emit:e=>e.emit,$options:e=>Y(e),$forceUpdate:e=>()=>Lt(e.update),$nextTick:e=>Nt.bind(e.proxy),$watch:e=>qt.bind(e)}),it={get({_:e},t){const{ctx:n,setupState:a,data:i,props:c,accessCache:l,type:s,appContext:u}=e;let d;if("$"!==t[0]){const r=l[t];if(void 0!==r)switch(r){case 0:return a[t];case 1:return i[t];case 3:return n[t];case 2:return c[t]}else{if(a!==o.kT&&(0,o.RI)(a,t))return l[t]=0,a[t];if(i!==o.kT&&(0,o.RI)(i,t))return l[t]=1,i[t];if((d=e.propsOptions[0])&&(0,o.RI)(d,t))return l[t]=2,c[t];if(n!==o.kT&&(0,o.RI)(n,t))return l[t]=3,n[t];K&&(l[t]=4)}}const p=at[t];let f,h;return p?("$attrs"===t&&(0,r.j)(e,"get",t),p(e)):(f=s.__cssModules)&&(f=f[t])?f:n!==o.kT&&(0,o.RI)(n,t)?(l[t]=3,n[t]):(h=u.config.globalProperties,(0,o.RI)(h,t)?h[t]:void 0)},set({_:e},t,n){const{data:r,setupState:a,ctx:i}=e;if(a!==o.kT&&(0,o.RI)(a,t))a[t]=n;else if(r!==o.kT&&(0,o.RI)(r,t))r[t]=n;else if((0,o.RI)(e.props,t))return!1;return!("$"===t[0]&&t.slice(1)in e||(i[t]=n,0))},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:a,propsOptions:i}},c){let l;return void 0!==n[c]||e!==o.kT&&(0,o.RI)(e,c)||t!==o.kT&&(0,o.RI)(t,c)||(l=i[0])&&(0,o.RI)(l,c)||(0,o.RI)(r,c)||(0,o.RI)(at,c)||(0,o.RI)(a.config.globalProperties,c)}},ct=ye();let lt=0;let st=null;const ut=()=>st||l,dt=e=>{st=e,e.scope.on()},pt=()=>{st&&st.scope.off(),st=null};function ft(e){return 4&e.vnode.shapeFlag}let ht=!1;function mt(e,t,n){(0,o.mf)(t)?e.render=t:(0,o.Kn)(t)&&(e.setupState=(0,r.WL)(t)),gt(e)}function gt(e,t,n){const a=e.type;e.render||(e.render=a.render||o.dG),dt(e),(0,r.Jd)(),function(e){const t=Y(e),n=e.proxy,a=e.ctx;K=!1,t.beforeCreate&&J(t.beforeCreate,e,"bc");const{data:i,computed:c,methods:l,watch:s,provide:u,inject:d,created:p,beforeMount:f,mounted:h,beforeUpdate:m,updated:g,activated:v,deactivated:_,beforeDestroy:S,beforeUnmount:w,destroyed:x,unmounted:k,render:O,renderTracked:C,renderTriggered:D,errorCaptured:E,serverPrefetch:I,expose:j,inheritAttrs:P,components:N,directives:L,filters:R}=t;if(d&&function(e,t,n=o.dG,a=!1){(0,o.kJ)(e)&&(e=te(e));for(const n in e){const i=e[n];let c;c=(0,o.Kn)(i)?"default"in i?b(i.from||n,i.default,!0):b(i.from||n):b(i),(0,r.dq)(c)&&a?Object.defineProperty(t,n,{enumerable:!0,configurable:!0,get:()=>c.value,set:e=>c.value=e}):t[n]=c}}(d,a,null,e.appContext.config.unwrapInjectedRef),l)for(const e in l){const t=l[e];(0,o.mf)(t)&&(a[e]=t.bind(n))}if(i){const t=i.call(n,n);(0,o.Kn)(t)&&(e.data=(0,r.qj)(t))}if(K=!0,c)for(const e in c){const t=c[e],i=(0,o.mf)(t)?t.bind(n,n):(0,o.mf)(t.get)?t.get.bind(n,n):o.dG,l=!(0,o.mf)(t)&&(0,o.mf)(t.set)?t.set.bind(n):o.dG,s=(0,r.Fl)({get:i,set:l});Object.defineProperty(a,e,{enumerable:!0,configurable:!0,get:()=>s.value,set:e=>s.value=e})}if(s)for(const e in s)Q(s[e],a,n,e);if(u){const e=(0,o.mf)(u)?u.call(n):u;Reflect.ownKeys(e).forEach((t=>{y(t,e[t])}))}function H(e,t){(0,o.kJ)(t)?t.forEach((t=>e(t.bind(n)))):t&&e(t.bind(n))}if(p&&J(p,e,"c"),H(F,f),H(M,h),H(V,m),H(U,g),H(T,v),H(A,_),H(G,E),H(W,C),H(q,D),H(Z,w),H(B,k),H(z,I),(0,o.kJ)(j))if(j.length){const t=e.exposed||(e.exposed={});j.forEach((e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t})}))}else e.exposed||(e.exposed={});O&&e.render===o.dG&&(e.render=O),null!=P&&(e.inheritAttrs=P),N&&(e.components=N),L&&(e.directives=L)}(e),(0,r.lk)(),pt()}function vt(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy((0,r.WL)((0,r.Xl)(e.exposed)),{get:(t,n)=>n in t?t[n]:n in at?at[n](e):void 0}))}function yt(e,t,n,r){let o;try{o=r?e(...r):e()}catch(e){_t(e,t,n)}return o}function bt(e,t,n,r){if((0,o.mf)(e)){const a=yt(e,t,n,r);return a&&(0,o.tI)(a)&&a.catch((e=>{_t(e,t,n)})),a}const a=[];for(let o=0;o>>1;Vt(xt[r])Vt(e)-Vt(t))),jt=0;jtnull==e.id?1/0:e.id;function Ut(e){wt=!1,St=!0,Ft(e),xt.sort(((e,t)=>Vt(e)-Vt(t)));try{for(kt=0;kte.value,p=!!e._shallow):(0,r.PG)(e)?(u=()=>e,a=!0):(0,o.kJ)(e)?(f=!0,p=e.some(r.PG),u=()=>e.map((e=>(0,r.dq)(e)?e.value:(0,r.PG)(e)?Gt(e):(0,o.mf)(e)?yt(e,s,2):void 0))):u=(0,o.mf)(e)?t?()=>yt(e,s,2):()=>{if(!s||!s.isUnmounted)return d&&d(),bt(e,s,3,[h])}:o.dG,t&&a){const e=u;u=()=>Gt(e())}let h=e=>{d=y.onStop=()=>{yt(e,s,4)}},m=f?[]:Zt;const g=()=>{if(y.active)if(t){const e=y.run();(a||p||(f?e.some(((e,t)=>(0,o.aU)(e,m[t]))):(0,o.aU)(e,m)))&&(d&&d(),bt(t,s,3,[e,m===Zt?void 0:m,h]),m=e)}else y.run()};let v;g.allowRecurse=!!t,v="sync"===i?g:"post"===i?()=>Se(g,s&&s.suspense):()=>{!s||s.isMounted?function(e){Ht(e,Ct,Ot,Dt)}(g):g()};const y=new r.qq(u,v);return t?n?g():m=y.run():"post"===i?Se(y.run.bind(y),s&&s.suspense):y.run(),()=>{y.stop(),s&&s.scope&&(0,o.Od)(s.scope.effects,y)}}function qt(e,t,n){const r=this.proxy,a=(0,o.HD)(e)?e.includes(".")?Wt(r,e):()=>r[e]:e.bind(r,r);let i;(0,o.mf)(t)?i=t:(i=t.handler,n=t);const c=st;dt(this);const l=zt(a,i.bind(r),n);return c?dt(c):pt(),l}function Wt(e,t){const n=t.split(".");return()=>{let t=e;for(let e=0;e{Gt(e,t)}));else if((0,o.PO)(e))for(const n in e)Gt(e[n],t);return e}function Kt(e,t,n){const r=arguments.length;return 2===r?(0,o.Kn)(t)&&!(0,o.kJ)(t)?Ze(t)?Ke(e,null,[t]):Ke(e,t):Ke(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):3===r&&Ze(n)&&(n=[n]),Ke(e,t,n))}Symbol("");const Jt="3.2.1"},3912:function(e,t,n){"use strict";var r=n(6252),o=n(3577);n(2610);const a="undefined"!=typeof document?document:null,i=new Map,c={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{const o=t?a.createElementNS("http://www.w3.org/2000/svg",e):a.createElement(e,n?{is:n}:void 0);return"select"===e&&r&&null!=r.multiple&&o.setAttribute("multiple",r.multiple),o},createText:e=>a.createTextNode(e),createComment:e=>a.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>a.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},cloneNode(e){const t=e.cloneNode(!0);return"_value"in e&&(t._value=e._value),t},insertStaticContent(e,t,n,r){const o=n?n.previousSibling:t.lastChild;let c=i.get(e);if(!c){const t=a.createElement("template");if(t.innerHTML=r?`${e}`:e,c=t.content,r){const e=c.firstChild;for(;e.firstChild;)c.appendChild(e.firstChild);c.removeChild(e)}i.set(e,c)}return t.insertBefore(c.cloneNode(!0),n),[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},l=/\s*!important$/;function s(e,t,n){if((0,o.kJ)(n))n.forEach((n=>s(e,t,n)));else if(t.startsWith("--"))e.setProperty(t,n);else{const r=function(e,t){const n=d[t];if(n)return n;let r=(0,o._A)(t);if("filter"!==r&&r in e)return d[t]=r;r=(0,o.kC)(r);for(let n=0;ndocument.createEvent("Event").timeStamp&&(f=()=>performance.now());const e=navigator.userAgent.match(/firefox\/(\d+)/i);h=!!(e&&Number(e[1])<=53)}let m=0;const g=Promise.resolve(),v=()=>{m=0};const y=/(?:Once|Passive|Capture)$/,b=/^on[a-z]/;"undefined"!=typeof HTMLElement&&HTMLElement;const _="transition",S="animation",w=(e,{slots:t})=>(0,r.h)(r.P$,function(e){const t={};for(const n in e)n in x||(t[n]=e[n]);if(!1===e.css)return t;const{name:n="v",type:r,duration:a,enterFromClass:i=`${n}-enter-from`,enterActiveClass:c=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:s=i,appearActiveClass:u=c,appearToClass:d=l,leaveFromClass:p=`${n}-leave-from`,leaveActiveClass:f=`${n}-leave-active`,leaveToClass:h=`${n}-leave-to`}=e,m=function(e){if(null==e)return null;if((0,o.Kn)(e))return[C(e.enter),C(e.leave)];{const t=C(e);return[t,t]}}(a),g=m&&m[0],v=m&&m[1],{onBeforeEnter:y,onEnter:b,onEnterCancelled:_,onLeave:S,onLeaveCancelled:w,onBeforeAppear:j=y,onAppear:T=b,onAppearCancelled:A=_}=t,N=(e,t,n)=>{E(e,t?d:l),E(e,t?u:c),n&&n()},L=(e,t)=>{E(e,h),E(e,f),t&&t()},R=e=>(t,n)=>{const o=e?T:b,a=()=>N(t,e,n);k(o,[t,a]),I((()=>{E(t,e?s:i),D(t,e?d:l),O(o)||P(t,r,g,a)}))};return(0,o.l7)(t,{onBeforeEnter(e){k(y,[e]),D(e,i),D(e,c)},onBeforeAppear(e){k(j,[e]),D(e,s),D(e,u)},onEnter:R(!1),onAppear:R(!0),onLeave(e,t){const n=()=>L(e,t);D(e,p),document.body.offsetHeight,D(e,f),I((()=>{E(e,p),D(e,h),O(S)||P(e,r,v,n)})),k(S,[e,n])},onEnterCancelled(e){N(e,!1),k(_,[e])},onAppearCancelled(e){N(e,!0),k(A,[e])},onLeaveCancelled(e){L(e),k(w,[e])}})}(e),t);w.displayName="Transition";const x={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},k=(w.props=(0,o.l7)({},r.P$.props,x),(e,t=[])=>{(0,o.kJ)(e)?e.forEach((e=>e(...t))):e&&e(...t)}),O=e=>!!e&&((0,o.kJ)(e)?e.some((e=>e.length>1)):e.length>1);function C(e){return(0,o.He)(e)}function D(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.add(t))),(e._vtc||(e._vtc=new Set)).add(t)}function E(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.remove(t)));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function I(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}let j=0;function P(e,t,n,r){const o=e._endId=++j,a=()=>{o===e._endId&&r()};if(n)return setTimeout(a,n);const{type:i,timeout:c,propCount:l}=function(e,t){const n=window.getComputedStyle(e),r=e=>(n[e]||"").split(", "),o=r("transitionDelay"),a=r("transitionDuration"),i=T(o,a),c=r("animationDelay"),l=r("animationDuration"),s=T(c,l);let u=null,d=0,p=0;return t===_?i>0&&(u=_,d=i,p=a.length):t===S?s>0&&(u=S,d=s,p=l.length):(d=Math.max(i,s),u=d>0?i>s?_:S:null,p=u?u===_?a.length:l.length:0),{type:u,timeout:d,propCount:p,hasTransform:u===_&&/\b(transform|all)(,|$)/.test(n.transitionProperty)}}(e,t);if(!i)return r();const s=i+"end";let u=0;const d=()=>{e.removeEventListener(s,p),a()},p=t=>{t.target===e&&++u>=l&&d()};setTimeout((()=>{uA(t)+A(e[n]))))}function A(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}new WeakMap,new WeakMap;const N={beforeMount(e,{value:t},{transition:n}){e._vod="none"===e.style.display?"":e.style.display,n&&t?n.beforeEnter(e):L(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),L(e,!0),r.enter(e)):r.leave(e,(()=>{L(e,!1)})):L(e,t))},beforeUnmount(e,{value:t}){L(e,t)}};function L(e,t){e.style.display=t?e._vod:"none"}const R=(0,o.l7)({patchProp:(e,t,n,a,i=!1,c,l,u,d)=>{"class"===t?function(e,t,n){const r=e._vtc;r&&(t=(t?[t,...r]:[...r]).join(" ")),null==t?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}(e,a,i):"style"===t?function(e,t,n){const r=e.style;if(n)if((0,o.HD)(n)){if(t!==n){const t=r.display;r.cssText=n,"_vod"in e&&(r.display=t)}}else{for(const e in n)s(r,e,n[e]);if(t&&!(0,o.HD)(t))for(const e in t)null==n[e]&&s(r,e,"")}else e.removeAttribute("style")}(e,n,a):(0,o.F7)(t)?(0,o.tR)(t)||function(e,t,n,a,i=null){const c=e._vei||(e._vei={}),l=c[t];if(a&&l)l.value=a;else{const[n,s]=function(e){let t;if(y.test(e)){let n;for(t={};n=e.match(y);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[(0,o.rs)(e.slice(2)),t]}(t);a?function(e,t,n,r){e.addEventListener(t,n,r)}(e,n,c[t]=function(e,t){const n=e=>{const a=e.timeStamp||f();(h||a>=n.attached-1)&&(0,r.$d)(function(e,t){if((0,o.kJ)(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map((e=>t=>!t._stopped&&e(t)))}return t}(e,n.value),t,5,[e])};return n.value=e,n.attached=m||(g.then(v),m=f()),n}(a,i),s):l&&(function(e,t,n,r){e.removeEventListener(t,n,r)}(e,n,l,s),c[t]=void 0)}}(e,t,0,a,l):("."===t[0]?(t=t.slice(1),1):"^"===t[0]?(t=t.slice(1),0):function(e,t,n,r){return r?"innerHTML"===t||!!(t in e&&b.test(t)&&(0,o.mf)(n)):"spellcheck"!==t&&"draggable"!==t&&("form"!==t&&(("list"!==t||"INPUT"!==e.tagName)&&(("type"!==t||"TEXTAREA"!==e.tagName)&&((!b.test(t)||!(0,o.HD)(n))&&t in e))))}(e,t,a,i))?function(e,t,n,r,o,a,i){if("innerHTML"===t||"textContent"===t)return r&&i(r,o,a),void(e[t]=null==n?"":n);if("value"===t&&"PROGRESS"!==e.tagName){e._value=n;const r=null==n?"":n;return e.value!==r&&(e.value=r),void(null==n&&e.removeAttribute(t))}if(""===n||null==n){const r=typeof e[t];if(""===n&&"boolean"===r)return void(e[t]=!0);if(null==n&&"string"===r)return e[t]="",void e.removeAttribute(t);if("number"===r){try{e[t]=0}catch(e){}return void e.removeAttribute(t)}}try{e[t]=n}catch(e){}}(e,t,a,c,l,u,d):("true-value"===t?e._trueValue=a:"false-value"===t&&(e._falseValue=a),function(e,t,n,r,a){if(r&&t.startsWith("xlink:"))null==n?e.removeAttributeNS(p,t.slice(6,t.length)):e.setAttributeNS(p,t,n);else{const r=(0,o.Pq)(t);null==n||r&&!1===n?e.removeAttribute(t):e.setAttribute(t,r?"":n)}}(e,t,a,i))}},c);let H;var F=n(8334),M=n.n(F),V=(n(7337),n(7616)),U=n(3697),Z=n(7825),B=n(9483),z=n(7844),q=n(5273),W=n(2352),G=n(3063),K=n(8703),J=n(441),Q=n(1987),Y=n(4189),$=n(2727),X=n(9136),ee=n(5723),te=n(4914),ne=n(7401),re=n(2460),oe=n(3712),ae=n(9372),ie=n(183),ce=n(8754),le=n(4570),se=n(4850),ue=n(1472),de=n(2045),pe=n(9941),fe=n(6777),he=n(8694),me=n(5476),ge=n(9774),ve=n(6063),ye=n(1144),be=n(7130),_e=n(164),Se=n(4461),we=n(3929),xe=n(8894),ke=n(9029),Oe=n(7477),Ce=n(2839),De=n(978),Ee=n(2827),Ie=n(8746),je=n(1771),Pe=n(6202),Te=n(7795),Ae=n(6368),Ne=n(9270),Le=n(9441),Re=n(9143),He=n(5209),Fe=n(774),Me=n(2864),Ve=n(9132),Ue=n(2459),Ze=n(7213),Be=n(1928),ze={Changelog:V.Z,CustomStyle:U.Z,Home:Z.Z,Quickstart:B.Z,Theme:z.Z,ActionSheet:q.Z,Area:W.Z,Button:G.Z,Calendar:K.Z,Card:J.Z,Cell:Q.Z,Checkbox:Y.Z,Circle:$.Z,Col:X.Z,Collapse:ee.Z,Common:te.Z,ConfigProvider:ne.Z,CountDown:re.Z,DatetimePicker:oe.Z,Dialog:ae.Z,Divider:ie.Z,DropdownMenu:ce.Z,Empty:le.Z,Field:se.Z,GoodsAction:ue.Z,Grid:de.Z,Icon:pe.Z,Image:fe.Z,IndexBar:he.Z,Loading:me.Z,NavBar:ge.Z,NoticeBar:ve.Z,Notify:ye.Z,Overlay:be.Z,Panel:_e.Z,Picker:Se.Z,Popup:we.Z,Progress:xe.Z,Radio:ke.Z,Rate:Oe.Z,Search:Ce.Z,ShareSheet:De.Z,Sidebar:Ee.Z,Skeleton:Ie.Z,Slider:je.Z,Stepper:Pe.Z,Steps:Te.Z,Sticky:Ae.Z,SubmitBar:Ne.Z,SwipeCell:Le.Z,Switch:Re.Z,Tab:He.Z,Tabbar:Fe.Z,Tag:Me.Z,Toast:Ve.Z,Transition:Ue.Z,TreeSelect:Ze.Z,Uploader:Be.Z},qe={class:"app"},We={class:"van-doc"},Ge={class:"van-doc-nav__title"},Ke=["href","innerHTML"],Je=["innerHTML"],Qe={name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){var 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||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}},render:function(e,t,n,a,i,c){var l=(0,r.up)("router-link");return n.item.path?((0,r.wg)(),(0,r.j4)(l,{key:0,class:(0,o.C_)({active:c.active}),to:c.path,innerHTML:c.itemName},null,8,["class","to","innerHTML"])):n.item.link?((0,r.wg)(),(0,r.iD)("a",{key:1,href:n.item.link,innerHTML:c.itemName},null,8,Ke)):((0,r.wg)(),(0,r.iD)("a",{key:2,innerHTML:c.itemName},null,8,Je))}},Ye={name:"VanDocNav",components:{[Qe.name]:Qe},props:{lang:String,navConfig:Array},data:()=>({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(){var e=window.pageYOffset;this.top=Math.max(0,64-e)}}},$e=n(3379),Xe=n.n($e),et=n(1654);Xe()(et.Z,{insert:"head",singleton:!1}),et.Z.locals,Ye.render=function(e,t,n,a,i,c){var l=(0,r.up)("van-doc-nav-link");return(0,r.wg)(),(0,r.iD)("div",{class:"van-doc-nav",style:(0,o.j5)(c.style)},[((0,r.wg)(!0),(0,r.iD)(r.HY,null,(0,r.Ko)(n.navConfig,(function(e,t){return(0,r.wg)(),(0,r.iD)("div",{class:"van-doc-nav__group",key:t},[(0,r._)("div",Ge,(0,o.zw)(e.title),1),e.items?((0,r.wg)(!0),(0,r.iD)(r.HY,{key:0},(0,r.Ko)(e.items,(function(e,t){return(0,r.wg)(),(0,r.iD)("div",{key:t,class:"van-doc-nav__item"},[(0,r.Wm)(l,{item:e,base:c.base},null,8,["item","base"])])})),128)):(0,r.kq)("v-if",!0)])})),128))],4)};var tt=Ye,nt={class:"van-doc-header"},rt={class:"van-doc-row"},ot={class:"van-doc-header__top"},at={class:"van-doc-header__logo"},it=["src"],ct={class:"van-doc-header__top-nav"},lt=["href"],st=["src"],ut={key:1},dt={key:0,ref:"version",class:"van-doc-header__top-nav-item"},pt={key:0,class:"van-doc-header__version-pop"},ft=["onClick"],ht={key:1,class:"van-doc-header__top-nav-item"},mt=["href"],gt={id:"docsearch"},vt=n(3278);function yt(e){return(yt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function bt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _t(){return(_t=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n3)for(n=[n],a=3;a1&&Xt(o,t,n),t=Kt(n,o,o,e.__k,null,o.__e,t),"function"==typeof e.type&&(e.__d=t)))}function en(e,t,n,r,o,a,i,c,l){var s,u,d,p,f,h,m,g,v,y,b,_=t.type;if(void 0!==t.constructor)return null;null!=n.__h&&(l=n.__h,c=t.__e=n.__e,t.__h=null,a=[c]),(s=Dt.__b)&&s(t);try{e:if("function"==typeof _){if(g=t.props,v=(s=_.contextType)&&r[s.__c],y=s?v?v.props.value:s.__:r,n.__c?m=(u=t.__c=n.__c).__=u.__E:("prototype"in _&&_.prototype.render?t.__c=u=new _(g,y):(t.__c=u=new Ut(g,y),u.constructor=_,u.render=an),v&&v.sub(u),u.props=g,u.state||(u.state={}),u.context=y,u.__n=r,d=u.__d=!0,u.__h=[]),null==u.__s&&(u.__s=u.state),null!=_.getDerivedStateFromProps&&(u.__s==u.state&&(u.__s=Rt({},u.__s)),Rt(u.__s,_.getDerivedStateFromProps(g,u.__s))),p=u.props,f=u.state,d)null==_.getDerivedStateFromProps&&null!=u.componentWillMount&&u.componentWillMount(),null!=u.componentDidMount&&u.__h.push(u.componentDidMount);else{if(null==_.getDerivedStateFromProps&&g!==p&&null!=u.componentWillReceiveProps&&u.componentWillReceiveProps(g,y),!u.__e&&null!=u.shouldComponentUpdate&&!1===u.shouldComponentUpdate(g,u.__s,y)||t.__v===n.__v){u.props=g,u.state=u.__s,t.__v!==n.__v&&(u.__d=!1),u.__v=t,t.__e=n.__e,t.__k=n.__k,u.__h.length&&i.push(u),Xt(t,c,e);break e}null!=u.componentWillUpdate&&u.componentWillUpdate(g,u.__s,y),null!=u.componentDidUpdate&&u.__h.push((function(){u.componentDidUpdate(p,f,h)}))}u.context=y,u.props=g,u.state=u.__s,(s=Dt.__r)&&s(t),u.__d=!1,u.__v=t,u.__P=e,s=u.render(u.props,u.state,u.context),u.state=u.__s,null!=u.getChildContext&&(r=Rt(Rt({},r),u.getChildContext())),d||null==u.getSnapshotBeforeUpdate||(h=u.getSnapshotBeforeUpdate(p,f)),b=null!=s&&s.type==Vt&&null==s.key?s.props.children:s,Wt(e,Array.isArray(b)?b:[b],t,n,r,o,a,i,c,l),u.base=t.__e,t.__h=null,u.__h.length&&i.push(u),m&&(u.__E=u.__=null),u.__e=!1}else null==a&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=nn(n.__e,t,n,r,o,a,i,l);(s=Dt.diffed)&&s(t)}catch(e){t.__v=null,(l||null!=a)&&(t.__e=c,t.__h=!!l,a[a.indexOf(c)]=null),Dt.__e(e,t,n)}return t.__e}function tn(e,t){Dt.__c&&Dt.__c(t,e),e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){Dt.__e(e,t.__v)}}))}function nn(e,t,n,r,o,a,i,c){var l,s,u,d,p,f=n.props,h=t.props;if(o="svg"===t.type||o,null!=a)for(l=0;l3)for(n=[n],a=3;a=n.__.length&&n.__.push({}),n.__[e]}function Sn(e){return fn=1,wn(Pn,e)}function wn(e,t,n){var r=_n(un++,2);return r.t=e,r.__c||(r.__=[n?n(t):Pn(void 0,t),function(e){var t=r.t(r.__[0],e);r.__[0]!==t&&(r.__=[t,r.__[1]],r.__c.setState({}))}],r.__c=dn),r.__}function xn(e,t){var n=_n(un++,3);!Dt.__s&&jn(n.__H,t)&&(n.__=e,n.__H=t,dn.__H.__h.push(n))}function kn(e,t){var n=_n(un++,4);!Dt.__s&&jn(n.__H,t)&&(n.__=e,n.__H=t,dn.__h.push(n))}function On(e,t){var n=_n(un++,7);return jn(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Cn(){hn.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(En),e.__H.__h.forEach(In),e.__H.__h=[]}catch(t){e.__H.__h=[],Dt.__e(t,e.__v)}})),hn=[]}Dt.__b=function(e){dn=null,mn&&mn(e)},Dt.__r=function(e){gn&&gn(e),un=0;var t=(dn=e.__c).__H;t&&(t.__h.forEach(En),t.__h.forEach(In),t.__h=[])},Dt.diffed=function(e){vn&&vn(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(1!==hn.push(t)&&pn===Dt.requestAnimationFrame||((pn=Dt.requestAnimationFrame)||function(e){var t,n=function(){clearTimeout(r),Dn&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);Dn&&(t=requestAnimationFrame(n))})(Cn)),dn=void 0},Dt.__c=function(e,t){t.some((function(e){try{e.__h.forEach(En),e.__h=e.__h.filter((function(e){return!e.__||In(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],Dt.__e(n,e.__v)}})),yn&&yn(e,t)},Dt.unmount=function(e){bn&&bn(e);var t=e.__c;if(t&&t.__H)try{t.__H.__.forEach(En)}catch(e){Dt.__e(e,t.__v)}};var Dn="function"==typeof requestAnimationFrame;function En(e){var t=dn;"function"==typeof e.__c&&e.__c(),dn=t}function In(e){var t=dn;e.__c=e.__(),dn=t}function jn(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function Pn(e,t){return"function"==typeof t?t(e):t}function Tn(e,t){for(var n in t)e[n]=t[n];return e}function An(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function Nn(e){this.props=e}(Nn.prototype=new Ut).isPureReactComponent=!0,Nn.prototype.shouldComponentUpdate=function(e,t){return An(this.props,e)||An(this.state,t)};var Ln=Dt.__b;Dt.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),Ln&&Ln(e)};var Rn="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,Hn=function(e,t){return null==e?null:Gt(Gt(e).map(t))},Fn={map:Hn,forEach:Hn,count:function(e){return e?Gt(e).length:0},only:function(e){var t=Gt(e);if(1!==t.length)throw"Children.only";return t[0]},toArray:Gt},Mn=Dt.__e;function Vn(e){return e&&(e.__c&&e.__c.__H&&(e.__c.__H.__.forEach((function(e){"function"==typeof e.__c&&e.__c()})),e.__c.__H=null),(e=Tn({},e)).__c=null,e.__k=e.__k&&e.__k.map(Vn)),e}function Un(e){return e&&(e.__v=null,e.__k=e.__k&&e.__k.map(Un)),e}function Zn(){this.__u=0,this.t=null,this.__b=null}function Bn(e){var t=e.__.__c;return t&&t.__e&&t.__e(e)}function zn(){this.u=null,this.o=null}Dt.__e=function(e,t,n){if(e.then)for(var r,o=t;o=o.__;)if((r=o.__c)&&r.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t);Mn(e,t,n)},(Zn.prototype=new Ut).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var o=Bn(r.__v),a=!1,i=function(){a||(a=!0,n.componentWillUnmount=n.__c,o?o(c):c())};n.__c=n.componentWillUnmount,n.componentWillUnmount=function(){i(),n.__c&&n.__c()};var c=function(){var e;if(!--r.__u)for(r.__v.__k[0]=Un(r.state.__e),r.setState({__e:r.__b=null});e=r.t.pop();)e.forceUpdate()};!0===t.__h||r.__u++||r.setState({__e:r.__b=r.__v.__k[0]}),e.then(i,i)},Zn.prototype.componentWillUnmount=function(){this.t=[]},Zn.prototype.render=function(e,t){this.__b&&(this.__v.__k&&(this.__v.__k[0]=Vn(this.__b)),this.__b=null);var n=t.__e&&Ft(Vt,null,e.fallback);return n&&(n.__h=null),[Ft(Vt,null,t.__e?null:e.children),n]};var qn=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["translations"]),a=r.buttonText,i=void 0===a?"Search":a,c=r.buttonAriaLabel,l=void 0===c?"Search":c,s=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),2!==n.length);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}}(e)||function(e,t){if(e){if("string"==typeof e)return pr(e,2);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?pr(e,2):void 0}}(e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(Sn(null)),u=s[0],d=s[1];return xn((function(){"undefined"!=typeof navigator&&d(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl")}),[]),lr.createElement("button",dr({type:"button",className:"DocSearch DocSearch-Button","aria-label":l},o,{ref:t}),lr.createElement("span",{className:"DocSearch-Button-Container"},lr.createElement(ur,null),lr.createElement("span",{className:"DocSearch-Button-Placeholder"},i)),null!==u&&lr.createElement("span",{className:"DocSearch-Button-Keys"},lr.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===u?lr.createElement(sr,null):u),lr.createElement("span",{className:"DocSearch-Button-Key"},"K")))}));function hr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function mr(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function gr(e){return e.reduce((function(e,t){return e.concat(t)}),[])}var vr=0;function yr(e){return 0===e.collections.length?0:e.collections.reduce((function(e,t){return e+t.items.length}),0)}function br(e,t,n,r){if(null===t&&e<0)return n-1;if(null!==r&&0===t&&e<0)return n-1;var o=(null===t?-1:t)+e;return o<=-1||o>=n?null===r?null:0:o}var _r=function(){};function Sr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function wr(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function xr(e){var t=e.state,n=function(e){var t=e.state,n=t.collections.map((function(e){return e.items.length})).reduce((function(e,t,n){var r=(e[n-1]||0)+t;return e.push(r),e}),[]).reduce((function(e,n){return n<=t.selectedItemId?e+1:e}),0);return t.collections[n]}({state:t});if(!n)return null;var r=n.items[function(e){for(var t=e.state,n=e.collection,r=!1,o=0,a=0;!1===r;){var i=t.collections[o];if(i===n){r=!0;break}a+=i.items.length,o++}return t.selectedItemId-a}({state:t,collection:n})],o=n.source;return{item:r,itemInputValue:o.getItemInputValue({item:r,state:t}),itemUrl:o.getItemUrl({item:r,state:t}),source:o}}function kr(e,t){return e===t||e.contains&&e.contains(t)}function Or(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Cr(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Mr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Vr(e){for(var t=1;t0});case"blur":return t.props.debug?e:zr(zr({},e),{},{isOpen:!1,selectedItemId:null});case"mousemove":return zr(zr({},e),{},{selectedItemId:t.payload});case"mouseleave":return zr(zr({},e),{},{selectedItemId:t.props.defaultSelectedItemId});default:return e}};function Gr(e){var t=function(e){var t,n="undefined"!=typeof window?window:{},r=e.plugins||[];return Pr(Pr({debug:!1,openOnFocus:!1,placeholder:"",autoFocus:!1,defaultSelectedItemId:null,stallThreshold:300,environment:n,shouldPanelShow:function(e){return yr(e.state)>0}},e),{},{id:null!==(t=e.id)&&void 0!==t?t:"autocomplete-".concat(vr++),initialState:Pr({selectedItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),plugins:r,onStateChange:function(t){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t),r.forEach((function(e){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t)}))},onSubmit:function(t){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t),r.forEach((function(e){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t)}))},getSources:function(t){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return Ir(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Ir(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Ir(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(r.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){return Promise.resolve(e(t)).then((function(e){return Promise.all(e.filter(Boolean).map((function(e){return Promise.resolve(function(e){return function(e){for(var t=1;t0)&&Hr({query:t.getState().completion||t.getState().query,event:e,store:t,props:n,setSelectedItemId:r,setQuery:o,setCollections:a,setIsOpen:i,setStatus:c,setContext:l,refresh:s}),t.send("focus",null)}var d="ontouchstart"in n.environment,p=e||{},f=(p.inputElement,p.maxLength),h=void 0===f?512:f,m=Fr(p,["inputElement","maxLength"]);return Vr({"aria-autocomplete":"both","aria-activedescendant":t.getState().isOpen&&null!==t.getState().selectedItemId?"".concat(n.id,"-item-").concat(t.getState().selectedItemId):void 0,"aria-controls":t.getState().isOpen?"".concat(n.id,"-list"):void 0,"aria-labelledby":"".concat(n.id,"-label"),value:t.getState().completion||t.getState().query,id:"".concat(n.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",spellCheck:"false",autoFocus:n.autoFocus,placeholder:n.placeholder,maxLength:h,type:"search",onChange:function(e){Hr({query:e.currentTarget.value.slice(0,h),event:e,store:t,props:n,setSelectedItemId:r,setQuery:o,setCollections:a,setIsOpen:i,setStatus:c,setContext:l,refresh:s})},onKeyDown:function(e){!function(e){var t=e.event,n=e.store,r=e.props,o=e.setSelectedItemId,a=e.setQuery,i=e.setCollections,c=e.setIsOpen,l=e.setStatus,s=e.setContext,u=e.refresh;if("ArrowUp"===t.key||"ArrowDown"===t.key){t.preventDefault(),n.send(t.key,null);var d=r.environment.document.getElementById("".concat(r.id,"-item-").concat(n.getState().selectedItemId));d&&(d.scrollIntoViewIfNeeded?d.scrollIntoViewIfNeeded(!1):d.scrollIntoView(!1));var p=xr({state:n.getState()});if(null!==n.getState().selectedItemId&&p){var f=p.item,h=p.itemInputValue,m=p.itemUrl,g=p.source;g.onHighlight({item:f,itemInputValue:h,itemUrl:m,source:g,state:n.getState(),setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,event:t})}}else if("Escape"===t.key)t.preventDefault(),n.send(t.key,null);else if("Enter"===t.key){if(null===n.getState().selectedItemId||n.getState().collections.every((function(e){return 0===e.items.length})))return;t.preventDefault();var v=xr({state:n.getState()}),y=v.item,b=v.itemInputValue,_=v.itemUrl,S=v.source;if(t.metaKey||t.ctrlKey)void 0!==_&&(S.onSelect({item:y,itemInputValue:b,itemUrl:_,source:S,state:n.getState(),setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,event:t}),r.navigator.navigateNewTab({itemUrl:_,item:y,state:n.getState()}));else if(t.shiftKey)void 0!==_&&(S.onSelect({item:y,itemInputValue:b,itemUrl:_,source:S,state:n.getState(),setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,event:t}),r.navigator.navigateNewWindow({itemUrl:_,item:y,state:n.getState()}));else if(t.altKey);else{if(void 0!==_)return S.onSelect({item:y,itemInputValue:b,itemUrl:_,source:S,state:n.getState(),setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,event:t}),void r.navigator.navigate({itemUrl:_,item:y,state:n.getState()});Hr({query:b,event:t,store:n,props:r,setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,nextState:{isOpen:!1},refresh:u}).then((function(){S.onSelect({item:y,itemInputValue:b,itemUrl:_,source:S,state:n.getState(),setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,event:t})}))}}}({event:e,store:t,props:n,setSelectedItemId:r,setQuery:o,setCollections:a,setIsOpen:i,setStatus:c,setContext:l,refresh:s})},onFocus:u,onBlur:function(){d||t.send("blur",null)},onClick:function(r){e.inputElement!==n.environment.document.activeElement||t.getState().isOpen||u(r)}},m)},getPanelProps:function(e){return Vr({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){t.send("mouseleave",null)}},e)},getListProps:function(e){return Vr({role:"listbox","aria-labelledby":"".concat(n.id,"-label"),id:"".concat(n.id,"-list")},e)},getItemProps:function(e){var u=e.item,d=e.source,p=Fr(e,["item","source"]);return Vr({id:"".concat(n.id,"-item-").concat(u.__autocomplete_id),role:"option","aria-selected":t.getState().selectedItemId===u.__autocomplete_id,onMouseMove:function(e){if(u.__autocomplete_id!==t.getState().selectedItemId){t.send("mousemove",u.__autocomplete_id);var n=xr({state:t.getState()});if(null!==t.getState().selectedItemId&&n){var s=n.item,d=n.itemInputValue,p=n.itemUrl,f=n.source;f.onHighlight({item:s,itemInputValue:d,itemUrl:p,source:f,state:t.getState(),setSelectedItemId:r,setQuery:o,setCollections:a,setIsOpen:i,setStatus:c,setContext:l,event:e})}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var p=d.getItemInputValue({item:u,state:t.getState()}),f=d.getItemUrl({item:u,state:t.getState()});(f?Promise.resolve():Hr({query:p,event:e,store:t,props:n,setSelectedItemId:r,setQuery:o,setCollections:a,setIsOpen:i,setStatus:c,setContext:l,refresh:s,nextState:{isOpen:!1}})).then((function(){d.onSelect({item:u,itemInputValue:p,itemUrl:f,source:d,state:t.getState(),setSelectedItemId:r,setQuery:o,setCollections:a,setIsOpen:i,setStatus:c,setContext:l,event:e})}))}},p)}}}({store:n,props:t,setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,refresh:b}),d=u.getEnvironmentProps,p=u.getRootProps,f=u.getFormProps,h=u.getLabelProps,m=u.getInputProps,g=u.getPanelProps,v=u.getListProps,y=u.getItemProps;function b(){return Hr({query:n.getState().query,event:new Event("input"),store:n,props:t,setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,nextState:{isOpen:n.getState().isOpen},refresh:b})}return{setSelectedItemId:o,setQuery:a,setCollections:i,setIsOpen:c,setStatus:l,setContext:s,getEnvironmentProps:d,getRootProps:p,getFormProps:f,getInputProps:m,getLabelProps:h,getPanelProps:g,getListProps:v,getItemProps:y,refresh:b}}function Kr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Jr(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n0&&lr.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},lr.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),lr.createElement("ul",null,t.slice(0,3).reduce((function(t,n){return[].concat(function(e){return function(e){if(Array.isArray(e))return ho(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return ho(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ho(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t),[lr.createElement("li",{key:n},lr.createElement("button",{className:"DocSearch-Prefill",key:n,onClick:function(){e.setQuery(n.toLowerCase()+" "),e.refresh(),e.inputRef.current.focus()}},n))])}),[]))),lr.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",lr.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(e.indexName,']+Missing+results+for+query+"').concat(e.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function go(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function vo(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:bo(t,"_snippetResult.".concat(n,".value"))||bo(t,n)}}))}function So(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}}(e,t)||function(e,t){if(e){if("string"==typeof e)return wo(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?wo(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function wo(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n0}));return e.state.query?!1===t?lr.createElement(mo,e):lr.createElement(Do,e):lr.createElement(Io,jo({},e,{hasCollections:t}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status}));function To(){return(To=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(t,["_highlightResult","_snippetResult"])),i=a.findIndex((function(e){return e.objectID===n.objectID}));i>-1&&a.splice(i,1),a.unshift(n),a=a.slice(0,r),o.setItem(a)},remove:function(e){a=a.filter((function(t){return t.objectID!==e.objectID})),o.setItem(a)},getAll:function(){return a}}}function Lo(e){var t,n="algoliasearch-client-js-".concat(e.key),r=function(){return void 0===t&&(t=e.localStorage||window.localStorage),t},o=function(){return JSON.parse(r().getItem(n)||"{}")};return{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var n=JSON.stringify(e),r=o()[n];return Promise.all([r||t(),void 0!==r])})).then((function(e){var t=xt(e,2),r=t[0],o=t[1];return Promise.all([r,o||n.miss(r)])})).then((function(e){return xt(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var a=o();return a[JSON.stringify(e)]=t,r().setItem(n,JSON.stringify(a)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=o();delete t[JSON.stringify(e)],r().setItem(n,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){r().removeItem(n)}))}}}function Ro(e){var t=kt(e.caches),n=t.shift();return void 0===n?{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},r=t();return r.then((function(e){return Promise.all([e,n.miss(e)])})).then((function(e){return xt(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(e,r,o).catch((function(){return Ro({caches:t}).get(e,r,o)}))},set:function(e,r){return n.set(e,r).catch((function(){return Ro({caches:t}).set(e,r)}))},delete:function(e){return n.delete(e).catch((function(){return Ro({caches:t}).delete(e)}))},clear:function(){return n.clear().catch((function(){return Ro({caches:t}).clear()}))}}}function Ho(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},a=JSON.stringify(n);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);var i=r(),c=o&&o.miss||function(){return Promise.resolve()};return i.then((function(e){return c(e)})).then((function(){return i}))},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function Fo(e){for(var t=e.length-1;t>0;t--){var n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}function Mo(e,t){return t?(Object.keys(t).forEach((function(n){e[n]=t[n](e)})),e):e}function Vo(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r0?r:void 0,timeout:n.timeout||t,headers:n.headers||{},queryParameters:n.queryParameters||{},cacheable:n.cacheable}}var Zo={Read:1,Write:2,Any:3};function Bo(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return wt(wt({},e),{},{status:t,lastUpdate:Date.now()})}function zo(e){return"string"==typeof e?{protocol:"https",url:e,accept:Zo.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||Zo.Any}}var qo="POST";function Wo(e,t,n,r){var o=[],a=function(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:wt(wt({},e.data),t.data);return JSON.stringify(n)}}(n,r),i=function(e,t){var n=wt(wt({},e.headers),t.headers),r={};return Object.keys(n).forEach((function(e){var t=n[e];r[e.toLowerCase()]=t})),r}(e,r),c=n.method,l="GET"!==n.method?{}:wt(wt({},n.data),r.data),s=wt(wt(wt({"x-algolia-agent":e.userAgent.value},e.queryParameters),l),r.queryParameters),u=0,d=function t(l,d){var p=l.pop();if(void 0===p)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Qo(o)};var f={data:a,headers:i,method:c,url:Ko(p,n.path,s),connectTimeout:d(u,e.timeouts.connect),responseTimeout:d(u,r.timeout)},h=function(e){var t={request:f,response:e,host:p,triesLeft:l.length};return o.push(t),t},m={onSucess:function(e){return function(e){try{return JSON.parse(e.content)}catch(t){throw function(e,t){return{name:"DeserializationError",message:e,response:t}}(t.message,e)}}(e)},onRetry:function(n){var r=h(n);return n.isTimedOut&&u++,Promise.all([e.logger.info("Retryable failure",Yo(r)),e.hostsCache.set(p,Bo(p,n.isTimedOut?3:2))]).then((function(){return t(l,d)}))},onFail:function(e){throw h(e),function(e,t){var n=e.content,r=e.status,o=n;try{o=JSON.parse(n).message}catch(e){}return function(e,t,n){return{name:"ApiError",message:e,status:t,transporterStackTrace:n}}(o,r,t)}(e,Qo(o))}};return e.requester.send(f).then((function(e){return function(e,t){return function(e){var t=e.status;return e.isTimedOut||function(e){var t=e.isTimedOut,n=e.status;return!t&&0==~~n}(e)||2!=~~(t/100)&&4!=~~(t/100)}(e)?t.onRetry(e):2==~~(e.status/100)?t.onSucess(e):t.onFail(e)}(e,m)}))};return function(e,t){return Promise.all(t.map((function(t){return e.get(t,(function(){return Promise.resolve(Bo(t))}))}))).then((function(e){var n=e.filter((function(e){return function(e){return 1===e.status||Date.now()-e.lastUpdate>12e4}(e)})),r=e.filter((function(e){return function(e){return 3===e.status&&Date.now()-e.lastUpdate<=12e4}(e)})),o=[].concat(kt(n),kt(r));return{getTimeout:function(e,t){return(0===r.length&&0===e?1:r.length+3+e)*t},statelessHosts:o.length>0?o.map((function(e){return zo(e)})):t}}))}(e.hostsCache,t).then((function(e){return d(kt(e.statelessHosts).reverse(),e.getTimeout)}))}function Go(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var n="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(n)&&(t.value="".concat(t.value).concat(n)),t}};return t}function Ko(e,t,n){var r=Jo(n),o="".concat(e.protocol,"://").concat(e.url,"/").concat("/"===t.charAt(0)?t.substr(1):t);return r.length&&(o+="?".concat(r)),o}function Jo(e){return Object.keys(e).map((function(t){return Vo("%s=%s",t,(n=e[t],"[object Object]"===Object.prototype.toString.call(n)||"[object Array]"===Object.prototype.toString.call(n)?JSON.stringify(e[t]):e[t]));var n})).join("&")}function Qo(e){return e.map((function(e){return Yo(e)}))}function Yo(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return wt(wt({},e),{},{request:wt(wt({},e.request),{},{headers:wt(wt({},e.request.headers),t)})})}var $o=function(e){return function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r={transporter:e.transporter,appId:e.appId,indexName:t};return Mo(r,n.methods)}},Xo=function(e){return function(t,n){var r=t.map((function(e){return wt(wt({},e),{},{params:Jo(e.params||{})})}));return e.transporter.read({method:qo,path:"1/indexes/*/queries",data:{requests:r},cacheable:!0},n)}},ea=function(e){return function(t,n){return Promise.all(t.map((function(t){var r=t.params,o=r.facetName,a=r.facetQuery,i=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(r,["facetName","facetQuery"]);return $o(e)(t.indexName,{methods:{searchForFacetValues:ra}}).searchForFacetValues(o,a,wt(wt({},n),i))})))}},ta=function(e){return function(t,n,r){return e.transporter.read({method:qo,path:Vo("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:n},cacheable:!0},r)}},na=function(e){return function(t,n){return e.transporter.read({method:qo,path:Vo("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},n)}},ra=function(e){return function(t,n,r){return e.transporter.read({method:qo,path:Vo("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:n},cacheable:!0},r)}};function oa(e,t,n){var r={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(e){return new Promise((function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return n.setRequestHeader(t,e.headers[t])}));var r,o=function(e,r){return setTimeout((function(){n.abort(),t({status:0,content:r,isTimedOut:!0})}),1e3*e)},a=o(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(a),r=o(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(a),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(a),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))}},logger:{debug:function(e,t){return Promise.resolve()},info:function(e,t){return Promise.resolve()},error:function(e,t){return console.error(e,t),Promise.resolve()}},responsesCache:Ho(),requestsCache:Ho({serializable:!1}),hostsCache:Ro({caches:[Lo({key:"".concat("4.8.1","-").concat(e)}),Ho()]}),userAgent:Go("4.8.1").add({segment:"Browser",version:"lite"}),authMode:0};return function(e){var t=e.appId,n=function(e,t,n){var r={"x-algolia-api-key":n,"x-algolia-application-id":t};return{headers:function(){return 1===e?r:{}},queryParameters:function(){return 0===e?r:{}}}}(void 0!==e.authMode?e.authMode:1,t,e.apiKey),r=function(e){var t=e.hostsCache,n=e.logger,r=e.requester,o=e.requestsCache,a=e.responsesCache,i=e.timeouts,c=e.userAgent,l=e.hosts,s=e.queryParameters,u={hostsCache:t,logger:n,requester:r,requestsCache:o,responsesCache:a,timeouts:i,userAgent:c,headers:e.headers,queryParameters:s,hosts:l.map((function(e){return zo(e)})),read:function(e,t){var n=Uo(t,u.timeouts.read),r=function(){return Wo(u,u.hosts.filter((function(e){return 0!=(e.accept&Zo.Read)})),e,n)};if(!0!==(void 0!==n.cacheable?n.cacheable:e.cacheable))return r();var o={request:e,mappedRequestOptions:n,transporter:{queryParameters:u.queryParameters,headers:u.headers}};return u.responsesCache.get(o,(function(){return u.requestsCache.get(o,(function(){return u.requestsCache.set(o,r()).then((function(e){return Promise.all([u.requestsCache.delete(o),e])}),(function(e){return Promise.all([u.requestsCache.delete(o),Promise.reject(e)])})).then((function(e){var t=xt(e,2);return t[0],t[1]}))}))}),{miss:function(e){return u.responsesCache.set(o,e)}})},write:function(e,t){return Wo(u,u.hosts.filter((function(e){return 0!=(e.accept&Zo.Write)})),e,Uo(t,u.timeouts.write))}};return u}(wt(wt({hosts:[{url:"".concat(t,"-dsn.algolia.net"),accept:Zo.Read},{url:"".concat(t,".algolia.net"),accept:Zo.Write}].concat(Fo([{url:"".concat(t,"-1.algolianet.com")},{url:"".concat(t,"-2.algolianet.com")},{url:"".concat(t,"-3.algolianet.com")}]))},e),{},{headers:wt(wt(wt({},n.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:wt(wt({},n.queryParameters()),e.queryParameters)}));return Mo({transporter:r,appId:t,addAlgoliaAgent:function(e,t){r.userAgent.add({segment:e,version:t})},clearCache:function(){return Promise.all([r.requestsCache.clear(),r.responsesCache.clear()]).then((function(){}))}},e.methods)}(wt(wt(wt({},r),n),{},{methods:{search:Xo,searchForFacetValues:ea,multipleQueries:Xo,multipleSearchForFacetValues:ea,initIndex:function(e){return function(t){return $o(e)(t,{methods:{search:na,searchForFacetValues:ra,findAnswers:ta}})}}}}))}function aa(e,t){return e.reduce((function(e,n){var r=t(n);return e.hasOwnProperty(r)||(e[r]=[]),e[r].length<5&&e[r].push(n),e}),{})}function ia(e){return e}function ca(){}function la(){return(la=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n",highlightPostTag:"",hitsPerPage:20},c)}]}).catch((function(e){throw"RetryError"===e.name&&a("error"),e})).then((function(e){var t=e[0].hits,o=e[0].nbHits,a=aa(t,(function(e){return e.hierarchy.lvl0}));return n.context.searchSuggestions.length0&&(B(),T.current&&T.current.focus())}),[L,B]),lr.useEffect((function(){function e(){if(I.current){var e=.01*window.innerHeight;I.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),lr.createElement("div",la({ref:E},Z({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===C.status&&"DocSearch-Container--Stalled","error"===C.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(e){e.target===e.currentTarget&&s()}}),lr.createElement("div",{className:"DocSearch-Modal",ref:I},lr.createElement("header",{className:"DocSearch-SearchBar",ref:j},lr.createElement(Ao,la({},V,{state:C,autoFocus:0===L.length,onClose:s,inputRef:T,isFromSelection:Boolean(L)&&L===N}))),lr.createElement("div",{className:"DocSearch-Dropdown",ref:P},lr.createElement(Po,la({},V,{indexName:o,state:C,hitComponent:f,resultsFooterComponent:m,disableUserPersonalization:w,recentSearches:F,favoriteSearches:H,onItemClick:function(e){M(e),s()},inputRef:T}))),lr.createElement("footer",{className:"DocSearch-Footer"},lr.createElement($r,null))))}function ha(){return(ha=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof e?t.document.querySelector(e):e}(e.container,e.environment))}(ya({},this.searchConfig,{container:"#docsearch"}))}}},_a=n(7361);Xe()(_a.Z,{insert:"head",singleton:!1}),_a.Z.locals,ba.render=function(e,t,n,o,a,i){return(0,r.wg)(),(0,r.iD)("div",gt)};var Sa={name:"VanDocHeader",components:{SearchInput:ba},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:"1.8.5",showVersionPop:!1}),computed:{langLink(){return"#"+this.$route.path.replace(this.lang,this.anotherLang.lang)},langLabel(){return this.anotherLang.label},anotherLang(){var e=this,t=this.langConfigs.filter((function(t){return t.lang!==e.lang}));return t.length?t[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){var e=!this.showVersionPop,t=e?"add":"remove";document.body[t+"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)}}},wa=n(6399);Xe()(wa.Z,{insert:"head",singleton:!1}),wa.Z.locals,Sa.render=function(e,t,n,a,i,c){var l=(0,r.up)("search-input");return(0,r.wg)(),(0,r.iD)("div",nt,[(0,r._)("div",rt,[(0,r._)("div",ot,[(0,r._)("a",at,[(0,r._)("img",{src:n.config.logo},null,8,it),(0,r._)("span",null,(0,o.zw)(n.config.title),1)]),(0,r._)("ul",ct,[((0,r.wg)(!0),(0,r.iD)(r.HY,null,(0,r.Ko)(n.config.links,(function(e,t){return(0,r.wg)(),(0,r.iD)("li",{key:t,class:"van-doc-header__top-nav-item"},[(0,r._)("a",{class:"van-doc-header__link",target:"_blank",href:e.url},[e.logo?((0,r.wg)(),(0,r.iD)("img",{key:0,src:e.logo},null,8,st)):e.text?((0,r.wg)(),(0,r.iD)("span",ut,(0,o.zw)(e.text),1)):(0,r.kq)("v-if",!0)],8,lt)])})),128)),n.versions?((0,r.wg)(),(0,r.iD)("li",dt,[(0,r._)("span",{class:"van-doc-header__cube van-doc-header__version",onClick:t[0]||(t[0]=function(){return c.toggleVersionPop&&c.toggleVersionPop.apply(c,arguments)})},[(0,r.Uk)((0,o.zw)(i.packageVersion)+" ",1),(0,r.Wm)(w,{name:"van-doc-dropdown"},{default:(0,r.w5)((function(){return[i.showVersionPop?((0,r.wg)(),(0,r.iD)("div",pt,[((0,r.wg)(!0),(0,r.iD)(r.HY,null,(0,r.Ko)(n.versions,(function(e,t){return(0,r.wg)(),(0,r.iD)("div",{key:t,class:"van-doc-header__version-pop-item",onClick:function(t){return c.onSwitchVersion(e)}},(0,o.zw)(e.label),9,ft)})),128))])):(0,r.kq)("v-if",!0)]})),_:1})])],512)):(0,r.kq)("v-if",!0),c.langLabel&&c.langLink?((0,r.wg)(),(0,r.iD)("li",ht,[(0,r._)("a",{class:"van-doc-header__cube",href:c.langLink},(0,o.zw)(c.langLabel),9,mt)])):(0,r.kq)("v-if",!0),c.searchConfig?((0,r.wg)(),(0,r.j4)(l,{key:2,lang:n.lang,"search-config":c.searchConfig},null,8,["lang","search-config"])):(0,r.kq)("v-if",!0)])])])])};var xa=Sa,ka={name:"VanDocContent",computed:{currentPage(){var e=this.$route.path;return e?e.split("/").slice(-1)[0]:this.$route.name}}},Oa=n(8570);Xe()(Oa.Z,{insert:"head",singleton:!1}),Oa.Z.locals,ka.render=function(e,t,n,a,i,c){return(0,r.wg)(),(0,r.iD)("div",{class:(0,o.C_)(["van-doc-content","van-doc-content--"+c.currentPage])},[(0,r.WI)(e.$slots,"default")],2)};var Ca=ka,Da={name:"VanDocContainer",props:{hasSimulator:Boolean}},Ea=n(484);Xe()(Ea.Z,{insert:"head",singleton:!1}),Ea.Z.locals,Da.render=function(e,t,n,a,i,c){return(0,r.wg)(),(0,r.iD)("div",{class:(0,o.C_)(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":n.hasSimulator}])},[(0,r.WI)(e.$slots,"default")],2)};var Ia=Da,ja=["src"],Pa={name:"VanDocSimulator",props:{src:String},data:()=>({scrollTop:window.scrollY,windowHeight:window.innerHeight}),computed:{isFixed(){return this.scrollTop>60},simulatorStyle(){return{height:Math.min(640,this.windowHeight-90)+"px"}}},mounted(){var e=this;window.addEventListener("scroll",(function(){e.scrollTop=window.scrollY})),window.addEventListener("resize",(function(){e.windowHeight=window.innerHeight}))}},Ta=n(7241);Xe()(Ta.Z,{insert:"head",singleton:!1}),Ta.Z.locals,Pa.render=function(e,t,n,a,i,c){return(0,r.wg)(),(0,r.iD)("div",{class:(0,o.C_)(["van-doc-simulator",{"van-doc-simulator-fixed":c.isFixed}])},[(0,r._)("iframe",{ref:"iframe",src:n.src,style:(0,o.j5)(c.simulatorStyle),frameborder:"0"},null,12,ja)],2)};var Aa={name:"VanDoc",components:{DocNav:tt,DocHeader:xa,DocContent:Ca,DocContainer:Ia,DocSimulator:Pa},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(){for(var e,t=this.config.nav.reduce((function(e,t){return e.concat(t.items)}),[]),n=this.$route.path.split("/").pop(),r=0,o=t.length;r({hasSimulator:!0}),computed:{simulator(){var e,t;return null!=(e=M().site.simulator)&&e.url?null==(t=M().site.simulator)?void 0:t.url:location.pathname.replace(/\/index(\.html)?/,"/")+"mobile.html"+location.hash},lang(){return this.$route.meta.lang||""},langConfigs(){var e=M().site.locales,t=void 0===e?{}:e;return Object.keys(t).map((function(e){return{lang:e,label:t[e].langLabel||""}}))},config(){var e=M().site.locales;return e?e[this.lang]:M().site},versions:()=>M().site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(e){var t;Ha=t=e,localStorage.setItem(Ra,t),this.setTitleAndToogleSimulator()},config:{handler(e){e&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){var e=this;this.$route.hash&&this.$nextTick((function(){var t=document.querySelector(e.$route.hash);t&&t.scrollIntoView()}))},methods:{setTitleAndToogleSimulator(){var e=this,t=this.config.title,n=this.config.nav.reduce((function(e,t){return[].concat(e,t.items)}),[]).find((function(t){return t.path===e.$route.meta.name}));n&&n.title?t=n.title+" - "+t:this.config.description&&(t+=" - "+this.config.description),document.title=t,this.hasSimulator=!(M().site.hideSimulator||this.config.hideSimulator||n&&n.hideSimulator)}}},Ma=n(387);Xe()(Ma.Z,{insert:"head",singleton:!1}),Ma.Z.locals,Fa.render=function(e,t,n,o,a,i){var c=(0,r.up)("router-view"),l=(0,r.up)("van-doc");return(0,r.wg)(),(0,r.iD)("div",qe,[i.config?((0,r.wg)(),(0,r.j4)(l,{key:0,lang:i.lang,config:i.config,versions:i.versions,simulator:i.simulator,"has-simulator":a.hasSimulator,"lang-configs":i.langConfigs},{default:(0,r.w5)((function(){return[(0,r.Wm)(c)]})),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):(0,r.kq)("v-if",!0)])};var Va=Fa;(0,r.dD)("data-v-41f5cf44");var Ua={class:"demo-playground--code"},Za={class:"demo-playground--code--actions"},Ba=(0,r._)("span",null,null,-1),za=["data-status"],qa=["innerHTML"];(0,r.Cn)();var Wa={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){var e=this;!function(e){var t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);var n=document.getSelection();if(n){var r=n.rangeCount>0&&n.getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),r&&(n.removeAllRanges(),n.addRange(r))}}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((function(){e.copyStatus="ready"}),2e3)}}},Ga=n(8602);Xe()(Ga.Z,{insert:"head",singleton:!1}),Ga.Z.locals,Wa.render=function(e,t,n,a,i,c){return(0,r.wg)(),(0,r.iD)("div",{class:(0,o.C_)({"demo-playground":!n.inline,transform:n.transform})},[n.inline?(0,r.WI)(e.$slots,"default",{key:0},void 0,!0):((0,r.wg)(),(0,r.iD)(r.HY,{key:1},[(0,r._)("div",{class:(0,o.C_)(["demo-playground--previewer",{compact:n.compact}])},[(0,r.WI)(e.$slots,"default",{},void 0,!0)],2),(0,r._)("div",Ua,[(0,r._)("div",Za,[Ba,(0,r._)("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":i.copyStatus,onClick:t[0]||(t[0]=function(){return c.copySourceCode&&c.copySourceCode.apply(c,arguments)})},null,8,za),(0,r._)("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:t[1]||(t[1]=function(){return c.toogleSource&&c.toogleSource.apply(c,arguments)})})]),(0,r.wy)((0,r._)("div",{innerHTML:c.unescape(n.codeSnippet),class:"demo-playground--code--content"},null,8,qa),[[N,i.showSource]])])],64))],2)},Wa.__scopeId="data-v-41f5cf44";var Ka=Wa,Ja=n(2119),Qa=navigator.userAgent.toLowerCase(),Ya=/ios|iphone|ipod|ipad|android/.test(Qa);function $a(e,t){return void 0===t&&(t="-"),e.replace(/([a-z\d])([A-Z])/g,"$1"+t+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+t+"$2").toLowerCase()}var Xa,ei=[],ti=!1;function ni(){var e,t,n=window.vueRouter.currentRoute.value.path;return null!=(e=M().site.simulator)&&e.routeMapper?null==(t=M().site.simulator)?void 0:t.routeMapper(n):n}function ri(){var e,t=document.querySelector("iframe");t&&(e=function(){t.contentWindow.postMessage({type:"replacePath",value:ni()},"*")},ti?e():ei.push(e))}window.top===window?window.addEventListener("message",(function(e){"iframeReady"===e.data.type&&(ti=!0,ei.forEach((function(e){return e()})),ei=[])})):window.top.postMessage({type:"iframeReady"},"*"),Ya&&location.replace("mobile.html"+location.hash);var oi,ai,ii=M().site,ci=ii.locales;function li(e){var t=e.path.split("/")[1];return-1!==Object.keys(ci).indexOf(t)?t:Ha}oi=ii.defaultLang,ai=localStorage.getItem(Ra),Ha=ai||(navigator.language&&-1!==navigator.language.indexOf("zh-")?La:oi||"en-US");var si,ui,di=(0,Ja.p7)({history:(0,Ja.r5)(),routes:(si=[],ui=Object.keys(ze),ci?si.push({name:"notFound",path:"/:path(.*)+",redirect:function(e){return{name:li(e)}}}):si.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),ui.forEach((function(e){var t=function(e){if(-1!==e.indexOf("_")){var t=e.split("_");return{component:""+$a(t.shift()),lang:t.join("-")}}return{component:""+$a(e),lang:""}}(e),n=t.component,r=t.lang;"home"===n&&function(e,t){si.push({name:t||"home",path:"/"+(t||""),component:e,meta:{lang:t}})}(ze[e],r),r?si.push({name:r+"/"+n,path:"/"+r+"/"+n,component:ze[e],meta:{lang:r,name:n}}):si.push({name:""+n,path:"/"+n,component:ze[e],meta:{name:n}})})),si),scrollBehavior:e=>e.hash?{el:e.hash}:{x:0,y:0}});di.afterEach((function(){(0,r.Y3)(ri)})),!1!==(null==(Xa=M().site.simulator)?void 0:Xa.syncPathFromSimulator)&&function(e){window.addEventListener("message",(function(t){var n,r;if("replacePath"===(null==(n=t.data)?void 0:n.type)){var o=(null==(r=t.data)?void 0:r.value)||"";e.currentRoute.value.path!==o&&e.replace(o).catch((function(){}))}}))}(di),window.vueRouter=di,window.app=((...e)=>{const t=(H||(H=(0,r.Us)(R))).createApp(...e),{mount:n}=t;return t.mount=e=>{const r=function(e){return(0,o.HD)(e)?document.querySelector(e):e}(e);if(!r)return;const a=t._component;(0,o.mf)(a)||a.render||a.template||(a.template=r.innerHTML),r.innerHTML="";const i=n(r,!1,r instanceof SVGElement);return r instanceof Element&&(r.removeAttribute("v-cloak"),r.setAttribute("data-v-app","")),i},t})(Va).use(di).use({install:function(e){[].forEach((function(t){t.install?e.use(t):t.name&&e.component(t.name,t)}))},version:"1.8.5"}).component(Ka.name,Ka),setTimeout((function(){window.app.mount("#app")}),0)},8334:function(e){e.exports={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:function(e){return"/zh-CN"+({"/common":"/style","/transition":"/style"}[e]||e)},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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}}},3278:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,'/*! @docsearch/css 3.0.0-alpha.33 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,0.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Key,.DocSearch-Button-KeySeparator,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-webkit-input-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:1px;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}',""]),t.Z=o},387:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,'@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{min-width:1100px;overflow-x:auto;color:#323233;font-size:16px;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;background-color:#f7f8fa;-webkit-font-smoothing:antialiased}body,p{margin:0}h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit}ol,ul{margin:0;padding:0;list-style:none}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{width:1680px;margin:0 auto}}code{position:relative;display:block;padding:16px 20px;overflow-x:auto;color:#58727e;font-weight:400;font-size:14px;font-family:Source Code Pro,Monaco,Inconsolata,monospace;line-height:26px;white-space:pre-wrap;word-wrap:break-word;-webkit-font-smoothing:auto;background-color:#f8f8f8;border-radius:20px}pre{margin:20px 0 0}pre+p{margin-top:20px}.hljs{display:block;padding:.5em;overflow-x:auto;background:#fff}.hljs-subst{color:#58727e}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#4fc08d}.hljs-comment,.hljs-quote{color:#999}.hljs-attribute,.hljs-keyword,.hljs-params{color:#8080ff}.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp,.hljs-variable{color:#eb6f6f}.hljs-attr,.hljs-built_in,.hljs-doctag,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{color:#4994df}.hljs-emphasis{font-style:italic}.van-doc-intro{padding-top:20px;text-align:center}.van-doc-intro p{margin-bottom:20px}',""]),t.Z=o},484:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,".van-doc-container{box-sizing:border-box;padding-left:220px;overflow:hidden}.van-doc-container--with-simulator{padding-right:384px}",""]),t.Z=o},8570:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,'.card{margin-bottom:24px;padding:24px;background-color:#fff;border-radius:20px;box-shadow:0 8px 12px #ebedf0}.card>blockquote a,.card>p a,.card>table a,.card>ul a{margin:0 1px;color:#1989fa;-webkit-font-smoothing:auto}.card>blockquote a:hover,.card>p a:hover,.card>table a:hover,.card>ul a:hover{color:#0570db}.card>blockquote a:active,.card>p a:active,.card>table a:active,.card>ul a:active{color:#0456a9}.card>h3,.card>h4,.card>h5,.card>h6{color:#323233;font-weight:400;line-height:1.5}.card>h3[id],.card>h4[id],.card>h5[id],.card>h6[id]{cursor:pointer}.card>h3{margin-bottom:16px;font-weight:600;font-size:19px}.card>h4{font-size:16px}.card>h4,.card>h5{margin:24px 0 12px;font-weight:600}.card>h5{font-size:15px}.card>blockquote p,.card>p{color:#34495e;font-size:15px;line-height:26px}.card>blockquote p strong,.card>p strong{color:#000}.card>table{width:100%;margin-top:12px;color:#34495e;font-size:14px;line-height:1.5;border-collapse:collapse}.card>table th{padding:8px 10px;font-weight:600;text-align:left}.card>table th:first-child{padding-left:0}.card>table th:last-child{padding-right:0}.card>table td{padding:8px;border-top:1px solid #f1f4f8}.card>table td:first-child{padding-left:0}.card>table td:first-child code{margin:0;padding:2px 6px;color:#1989fa;font-weight:600;font-size:11px;background-color:rgba(25,137,250,.1);border-radius:20px}.card>table td:last-child{padding-right:0}.card>table em{display:inline-block;color:#4fc08d;font-size:14px;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-style:normal;max-width:300px;-webkit-font-smoothing:auto}.card>ol li,.card>ul li{position:relative;margin:5px 0 5px 10px;padding-left:15px;color:#34495e;font-size:15px;line-height:26px}.card>ol li:before,.card>ul li:before{position:absolute;top:0;left:0;box-sizing:border-box;width:6px;height:6px;margin-top:10px;border:1px solid #666;border-radius:50%;content:""}.card>hr{margin:30px 0;border:0;border-top:1px solid #eee}.card>ol code,.card>p code,.card>table code,.card>ul code{display:inline;margin:0 2px;padding:2px 5px;font-size:14px;font-family:inherit;font-weight:600;word-break:keep-all;background-color:#f7f8fa;border-radius:4px;-webkit-font-smoothing:antialiased}.card>blockquote{margin:16px 0 0;padding:16px;background-color:#ecf9ff;border-radius:20px}.card>img,.card>p img{width:100%;margin:16px 0;border-radius:20px}.van-doc-content{position:relative;flex:1;padding:0 0 75px}.van-doc-content>section{padding:24px;overflow:hidden}.van-doc-content>section h1,.van-doc-content>section h2{color:#323233;font-weight:400;line-height:1.5}.van-doc-content>section h1[id],.van-doc-content>section h2[id]{cursor:pointer}.van-doc-content>section h1{margin:0 0 30px;font-size:30px;cursor:default}.van-doc-content>section h2{margin:45px 0 20px;font-size:25px}.van-doc-content--changelog strong{display:block;margin:24px 0 12px;font-weight:600;font-size:15px}.van-doc-content--changelog h3+p code{margin:0}.van-doc-content--changelog h3 a{color:inherit;font-size:20px}',""]),t.Z=o},8602:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,'.demo-playground[data-v-41f5cf44]{background-color:#fff;border:1px solid #ebedf1;border-radius:1px;margin:24px 0}.demo-playground.transform[data-v-41f5cf44]{transform:translate(0)}.demo-playground--previewer[data-v-41f5cf44]{padding:40px 24px;border-bottom:1px solid #ebedf1}.demo-playground--previewer.compact[data-v-41f5cf44]{padding:0}.demo-playground--code--actions[data-v-41f5cf44]{display:flex;height:40px;padding:0 1em;align-items:center}.demo-playground--code--actions>a[data-v-41f5cf44]:not(:last-child),.demo-playground--code--actions>button[data-v-41f5cf44]:not(:last-child){margin-right:8px}.demo-playground--code--actions>a[data-v-41f5cf44]{display:flex}.demo-playground--code--actions button[data-v-41f5cf44]{position:relative;display:inline-block;width:16px;height:16px;padding:0;border:0;box-sizing:border-box;cursor:pointer;opacity:.6;outline:none;transition:opacity .2s,background .2s}.demo-playground--code--actions button[data-v-41f5cf44]:after{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px}.demo-playground--code--actions button[data-v-41f5cf44]:hover{opacity:.8}.demo-playground--code--actions button[data-v-41f5cf44]:active{opacity:.9}.demo-playground--code--actions button[data-v-41f5cf44]:disabled{opacity:.2;cursor:not-allowed}.demo-playground--code--actions button[role=codesandbox][data-v-41f5cf44]{background-position:-18px 0}.demo-playground--code--actions button[role=codepen][data-v-41f5cf44]{background-position:-36px 0}.demo-playground--code--actions button[role=source][data-v-41f5cf44]{background-position:-72px 0}.demo-playground--code--actions button[role=change-jsx][data-v-41f5cf44]{background-position:-90px 0}.demo-playground--code--actions button[role=change-tsx][data-v-41f5cf44]{background-position:-108px 0}.demo-playground--code--actions button[role=open-demo][data-v-41f5cf44]{background-position:-126px 0}.demo-playground--code--actions button[role=motions][data-v-41f5cf44]{background-position:-162px 0}.demo-playground--code--actions button[role=sketch-component][data-v-41f5cf44]{background-position:-182px 0}.demo-playground--code--actions button[role=sketch-group][data-v-41f5cf44]{background-position:-200px 0}.demo-playground--code--actions button[role=copy][data-status=ready][data-v-41f5cf44]{background-position:-54px 0}.demo-playground--code--actions button[role=copy][data-status=copied][data-v-41f5cf44]{pointer-events:none;background-position:-54px -16px}.demo-playground--code--actions button[role=refresh][data-v-41f5cf44]{background-position-x:-144px}.demo-playground--code--actions>span[data-v-41f5cf44]{flex:1;display:inline-block}.demo-playground--code--content[data-v-41f5cf44]{border-top:1px dashed #ebedf1}.demo-playground--code--content[data-v-41f5cf44] pre{margin:0}.demo-playground--code--content[data-v-41f5cf44] .language-html{border-radius:0}.action-icon[data-v-41f5cf44]{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAA8CAMAAADc4HoZAAABFFBMVEUAAABGT2VGTmZaYXpCvGtIUGg3tGBGTmU3s2A/tmFKUGxFTmRFTWVQWmxFTWRJUGZFTWRGTmRLWWpFTWRGTmVGTmVLVG1FTmRGTWVHTmVFTWRHUGdFTWRGT2ZFTWVGTmU6t2I7xHA3tF9GTWRIT2dFTmRGTmVFTWQ3s2BFTWRGTmVGTmZKUmVFTWRFTWRGTWRGTmVcXHxFTmVFTmVGTmVFTWRIUGdGTWVNU3FGT2ZGTmVHTmVFTWRFTWVFTmVITWRHUGZFTWVFTmRGTmZGTmVFTWVLU2g4tF83tGBFTWQ3s1/LzdT09faoq7Zwdoieoq58gpLj5OeCh5fq6+2/wsmTmKWQlKJfZnpIUGfU1tu0t8BOVWynlyFSAAAASXRSTlMAkoAHEkDQ/dgYFuf0C8gj+KQQmm1oEuyNWNg53kSXfCYI5tEtzq7ivbOgTBy924R1BfHUibcpYw1JcU7v+7E3Nav6XVPDGraPqQuKawAACh1JREFUeNrsm2lT6kgUhg9QFFUkgWDYZfnAVsi+KQJeQdGqt1xm7jZ3lv//PyYdhe7QWQw1zP0w83xQsY9Um4fTp7vToeBczmaX5MN5rXZO/+NGJzGuLejnkw3dADehLHkQyceAWD5C/0my9XqWPLlCK9WHQScirUMk18g7J9ZosYLFajFyT8siLIpuyQkHKBDw4NgYsnDr0Xybaii60rjYzsmdbrqnw0TvpbvkhjYuzinygDXJXLewR2/O/f73w1cWCUj0LkmiU8SeYsc9LXMZIJNjyXkqmbWQCzV8ICawzLO8jh3q4IyciYfugMnMMGYT4C4UJ2fOEbbSc0EyrVp4T/7u4kiZs6jANjwBxkupWMLG7NIlLZvxM+As3nRLTsD/N5xtekmHIEQuhBAoBuREtmaXWVgB41Smc97JbMZA7pqcKKgopbu7FC1BLUgD22MyeVnPWD0bonLLeCQRhIkzQNnz6gHiK0HmxeF4qkKPSsVygh2x2q50SmlZIGIyiQo8OY+XGVExOLVM2WVRbAkDSma0609aQaxKMgOo6YjQ77Tc8d3laxPRxS7R564yI8WSFkymgUNuJqlbomQLisblpnNAf0nrB1j06rTsA7n0SE5L2skkh+Qcm2CP3vGV2QHWp5Ypu4wDosumRpyzNrBwcFmqk4166dBmrFgJ5aeDKhvSklWLBLokgBhcaF3bFL59lV45EQsR3QLVfV0uAuNFhEy2JaC/fcveMVC8ltKSy3RITtjRl34yDSj0r8rMNkyXQksByJOdCmIdslNAKS7V0BIKdpmGQ1+S9slA2IVa60My89HoRKyZ5XTD8rhBX1DwEN85Gw53drIsT6W0FGTKyYmYtgcI427rI1NB5bQyZZeTuNCSXaEpBX2Cotm9qWqdJOqqajN85y8zTC6E8SGZGalmjja4uaQC0OUy0UzSAckNTKS0FGTKyYmYbfQP42brcFGr/X5+N/XDNVG+36+eXCZ3Kbbkbd644cHBW6bpnTlx0vZO6PL0NI/LE8uksxtUqQ7sUgpoAfp0TgLzqQ4oAFkkeFqadCwFxJMz4SKTwogVpIsaBtrv+qdQzZ8ibSB8cpncJW+Z68iQTBq5EXG6N6UIvTHVr2hPpHTX9ZY5Rf0ImfIEyEMmFWHQmk89gHKhBShCP68UoHVfFtZnqV0yahWYVLTdJyMFwE0ms8l+cnFJfWyIuM2TyuQuecsW4xFJMMcd0S1PzBRQGdkaOKosc4DKYn1amSM2rb4H5lwmaVUVqEXJItoA1LBGokwoHWKUS0AqBZTKxOgocJXJl74uLi+Be+I2TyuTu+SkkCInmrZS3kNXkMnnF9RFT5Qpv1cVJkYwmRzxlavMIRClmTgBYmIeU1bpfC+WqS6RKPOKOTxjaWlZXSpWcp4xq1dBZIaBTxH+v95kySLyCQifSCZ3WYuTnYbDKNvpnVMVPUpulvSGPiFRJlq39M5E95bZNYZXD1icTOaoHophQ1EgLcpkrBOsdLJimbglsstMzpnGxZtSE0vjwlKalGVyuEzZJSXQIxJs2kVVDJOLC6NKVK/0jLWrzEzPYB/G6SxV9pJZq2XlyXSHDqlAjW5XjaSCzfsfom2XiX3hbEN4y3G/r64agy7ZifRrXOa6wmMkmT7YZfbwTuPsUoGi2WUyWOlkxZJIkskGWD7YkpWcb4NtAJlVm8tHYEF2m6KofW/pXLe2INxkTs0QeszB5N5rmJVckg55RzI+gTpEToFySRZ1GAcy94lg8AmOtmtSh2QnNebrTCnmWJlzHRatYeRegbomWSZpU2Cq0UdkdgLKlBMzA2EZNpJkmnmZQ9EwqtSDMijqGU+ZeeSqD/pCkikhZ6ZsU8cNc+kuc3EoU0tgT4hE5q3ELgZCTIBh1nECVAWm0fMs3daA8bV4wUN7f0nhAkdCgkztnx9mZ5iQ+zDLSLxdx5bZFK+Tp8wZDNLqFEAmr5myzRh36TfM8obXX01eAeyaqT4LhYvouMccLzNSRIlZmwGzLnGskVWWWWhBmgBZlXPpOwHieEyA5joGsktZJvumXBN5yzSQW/puGhy2XGBDTjZbWDGXLhMgRZ4ArQF8f375+vnP5y/gFawKYHzlEuOzNPGRSVFgSkT37LcCYDSidpnnCUCQaTmUlyaW1QAyxaVJAVjLLmWZViQSUW+Z9RsWE1DmFuMIOZAddIMtTSrA69PTy/dfXr798QMo7GVmzjXyijleJqVwV7d6t4rL2+NlUeY5GE6bBnNp0yCQTG4zBYVIWGa6y6SMCmDoKZOuFQDVYDI1FWlyJtimQR8/vv76/O319enrl89/wdjLZEnsFeO/nee6NImv8MAW6zpSssylKLMMxrHbebJM2eZohYrkUpL5HhKfqohdesokbZED1oFk0gC5M/Kje+e7nafi9fnl8y8mn1+ef6AtyXSNOV4mZd4q7wAo+8s8fqOdA7httJd3Hwlpo12WeUZUv0PaVWaCuTSVqxgGkznPYTYiP/w32lfAr0+/fAF+++2PV6ApyvSK8ZcpL034LbAWclm2kEU/4i8z8C0wf5mcENQIcTxkJnuTOMV1ZBxkniceqYkmnRmtR4ooQWVSJwbD16b/LbAGTEffnvD705NpC3lZphxzrEwbYVZg2Dd+c9pZZpCb08FltrChj8nsAGpiDD0py9RWUIvAkFWOuwcFuA0ok4bALCuKswQFvTk9gMnL85fvz99h0ttsmp8+tdt9LlOKuXC5OS1fOa42c3jUUrW6sIGetB8bwVCUuUCgYyPBZa6B+w/KpHsVgOq4adBhTQ8RonIOwE3ACRBjGMNquJ/ODcc9YgQ8NtJVYfLn568vMImtVrmcoiitVmLuFON6bMRfpiOPY/QOD3T16juZ9V6AA10+MhkkE0Ys6yuzXFgTY35fzTw6L03iV8MOMbTt8CpJwWVa02C9PSyUt8NPKtBK0hEHuoYAzAH0G0z0c+IEjIGALDMfdeYCuD88ahmrxJnMuBE77qilLHPkKnOZlhLz9CcNnFu06hg7lLBGRx21DMHkr9+ZJ6HFKya4TC9atIOf6woBIX6SK8AhaM8D0D//ELR3ryLXlV4xV0qElhEiz0PQbcNoOx+CvlJgIT6H4xUTHCMGd1LE4aVTKpa+jyf4y/z5jycE7lXwxxO0gtFu5svECRrz/4NDf7dvxjYQwzAMdGEE8RaWq2ySh/cf6OGoyQCRANLkBHenWqnzxyGU6aVP0zRN0zTtmzUru64ZWZ923kC0n6tT9WnnnL+y5R51pj6L9ahlx7k6UR8kVt2Sh1W35GHVLXlYdUseVt2Sh1W3fK8aDmuSOmyfelyGwpqkjtvnnvMyENYcdeA+fSxaDNYUdeg+TovBmqAO3sdpMVjD1eH7OC0Ga7A6QR+nxWANVafo47QYrIHqJH0eWhDWMHWaPosWhTVInahPHzisIepUffrAYQ1QJ+vTgVgD1IP6/AHM0QJdY511NAAAAABJRU5ErkJggg==") no-repeat 0 0/230px auto}',""]),t.Z=o},6399:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,'.van-doc-header{width:100%;background-color:#001938;-webkit-user-select:none;user-select:none}.van-doc-header__top{display:flex;align-items:center;height:64px;padding:0 24px}.van-doc-header__top-nav{flex:1;font-size:0;text-align:right}.van-doc-header__top-nav>li{position:relative;display:inline-block;vertical-align:middle}.van-doc-header__top-nav-item{margin-left:16px}.van-doc-header__top-nav-title{display:block;font-size:15px}.van-doc-header__cube{position:relative;display:block;padding:0 12px;color:#001938;background:#f7f8fa;font-size:14px;line-height:30px;text-align:center;border:1px solid hsla(0,0%,100%,.7);border-radius:20px;cursor:pointer;transition:.3s ease-in-out}.van-doc-header__version{padding-right:20px}.van-doc-header__version:after{position:absolute;top:10px;right:9px;width:5px;height:5px;color:#001938;border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:1px;transform:rotate(-45deg);content:""}.van-doc-header__version-pop{position:absolute;top:34px;left:0;width:100%;z-index:99;color:#333;line-height:36px;text-align:left;overflow:hidden;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #ebedf0;transform-origin:top;transition:.2s cubic-bezier(.215,.61,.355,1)}.van-doc-header__version-pop-item{padding-left:12px;transition:.2s}.van-doc-header__version-pop-item:hover{color:#1989fa;background-color:#f7f8fa}.van-doc-header__logo{display:block}.van-doc-header__logo img,.van-doc-header__logo span{display:inline-block;vertical-align:middle}.van-doc-header__logo img{width:28px;margin-right:12px}.van-doc-header__logo span{color:#fff;font-size:22px}.van-doc-header__link span{color:#fff;font-size:16px}.van-doc-header__link img{display:block;width:30px;height:30px;transition:.3s cubic-bezier(.175,.885,.32,1.275)}.van-doc-header__link img:hover{transform:scale(1.2)}.van-doc-dropdown-enter,.van-doc-dropdown-leave-active{transform:scaleY(0);opacity:0}',""]),t.Z=o},1654:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,".van-doc-nav{position:fixed;left:0;z-index:1;min-width:220px;max-width:220px;padding:24px 0;overflow-y:scroll;background-color:#fff;box-shadow:0 8px 12px #ebedf0}@media (min-width:1680px){.van-doc-nav{left:50%;margin-left:-840px}}.van-doc-nav::-webkit-scrollbar{width:6px;height:6px;background-color:initial}.van-doc-nav::-webkit-scrollbar-thumb{background-color:initial;border-radius:6px}.van-doc-nav:hover::-webkit-scrollbar-thumb{background-color:rgba(69,90,100,.2)}.van-doc-nav__group{margin-bottom:16px;padding-left:6px}.van-doc-nav__title{padding:8px 0 8px 24px;color:#455a64;font-weight:600;font-size:15px;line-height:28px}.van-doc-nav__item a{display:block;margin:8px 0;padding:8px 0 8px 24px;color:#455a64;font-size:14px;line-height:20px;transition:color .2s}.van-doc-nav__item a.active,.van-doc-nav__item a:hover{color:#4fc08d}.van-doc-nav__item a.active{font-weight:600;background-color:#ebfff0;border-radius:999px}.van-doc-nav__item a span{font-size:13px}@media (max-width:1300px){.van-doc-nav__item a{font-size:13px}.van-doc-nav__item:active{font-size:14px}}",""]),t.Z=o},7361:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,"#docsearch{display:inline-block;vertical-align:middle}.DocSearch-Button{height:32px;background:#f7f8fa}.DocSearch-Button:hover{box-shadow:none}.DocSearch-Search-Icon{width:18px;height:18px}.DocSearch-Button-Key{font-size:12px}",""]),t.Z=o},7241:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,".van-doc-simulator{position:absolute;top:88px;right:24px;z-index:1;box-sizing:border-box;width:360px;min-width:360px;overflow:hidden;background:#fafafa;border-radius:20px;box-shadow:0 8px 12px #ebedf0}@media (max-width:1100px){.van-doc-simulator{right:auto;left:750px}}@media (min-width:1680px){.van-doc-simulator{right:50%;margin-right:-816px}}.van-doc-simulator-fixed{position:fixed;top:24px}.van-doc-simulator iframe{display:block;width:100%}",""]),t.Z=o},4184:function(e,t,n){"use strict";var r=n(3645),o=n.n(r)()(!1);o.push([e.id,"",""]),t.Z=o}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={id:e,exports:{}};return t[e](a,a.exports,r),a.exports}r.m=t,e=[],r.O=function(t,n,o,a){if(!n){var i=1/0;for(s=0;s=a)&&Object.keys(r.O).every((function(e){return r.O[e](n[l])}))?n.splice(l--,1):(c=!1,a0&&e[s-1][2]>a;s--)e[s]=e[s-1];e[s]=[n,o,a]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},function(){var e={87:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,a,[i,c,l]=n,s=0;for(o in c)r.o(c,o)&&(r.m[o]=c[o]);if(l)var u=l(r);for(t&&t(n);se.trim())):t&&(l=n.map(r.He))}let s,c=o[s=(0,r.hR)(t)]||o[s=(0,r.hR)((0,r._A)(t))];!c&&i&&(c=o[s=(0,r.hR)((0,r.rs)(t))]),c&&St(c,e,6,l);const u=o[s+"Once"];if(u){if(e.emitted){if(e.emitted[s])return}else e.emitted={};e.emitted[s]=!0,St(u,e,6,l)}}function i(e,t,n=!1){const o=t.emitsCache,l=o.get(e);if(void 0!==l)return l;const a=e.emits;let s={},c=!1;if(!(0,r.mf)(e)){const o=e=>{const n=i(e,t,!0);n&&(c=!0,(0,r.l7)(s,n))};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}return a||c?((0,r.kJ)(a)?a.forEach((e=>s[e]=null)):(0,r.l7)(s,a),o.set(e,s),s):(o.set(e,null),null)}function a(e,t){return!(!e||!(0,r.F7)(t))&&(t=t.slice(2).replace(/Once$/,""),(0,r.RI)(e,t[0].toLowerCase()+t.slice(1))||(0,r.RI)(e,(0,r.rs)(t))||(0,r.RI)(e,t))}new Set,new Map,Object.create(null),Object.create(null);let s=null,c=null;function u(e){const t=s;return s=e,c=e&&e.type.__scopeId||null,t}function p(e,t=s,n){if(!t)return e;if(e._n)return e;const o=(...n)=>{o._d&&ze(-1);const r=u(t),l=e(...n);return u(r),o._d&&ze(1),l};return o._n=!0,o._c=!0,o._d=!0,o}function f(e){const{type:t,vnode:n,proxy:o,withProxy:l,props:i,propsOptions:[a],slots:s,attrs:c,emit:p,render:f,renderCache:h,data:g,setupState:v,ctx:y,inheritAttrs:b}=e;let w;const _=u(e);try{let e;if(4&n.shapeFlag){const t=l||o;w=nt(f.call(t,t,h,i,v,g,y)),e=c}else{const n=t;w=nt(n.length>1?n(i,{attrs:c,slots:s,emit:p}):n(i,null)),e=t.props?c:d(c)}let u=w;if(e&&!1!==b){const t=Object.keys(e),{shapeFlag:n}=u;t.length&&(1&n||6&n)&&(a&&t.some(r.tR)&&(e=m(e,a)),u=Qe(u,e))}n.dirs&&(u.dirs=u.dirs?u.dirs.concat(n.dirs):n.dirs),n.transition&&(u.transition=n.transition),w=u}catch(t){De.length=0,Ct(t,e,1),w=Xe(Le)}return u(_),w}const d=e=>{let t;for(const n in e)("class"===n||"style"===n||(0,r.F7)(n))&&((t||(t={}))[n]=e[n]);return t},m=(e,t)=>{const n={};for(const o in e)(0,r.tR)(o)&&o.slice(9)in t||(n[o]=e[o]);return n};function h(e,t,n){const o=Object.keys(t);if(o.length!==Object.keys(e).length)return!0;for(let r=0;r1)return n&&(0,r.mf)(t)?t.call(o.proxy):t}}function y(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return N((()=>{e.isMounted=!0})),K((()=>{e.isUnmounting=!0})),e}const b=[Function,Array],w={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:b,onEnter:b,onAfterEnter:b,onEnterCancelled:b,onBeforeLeave:b,onLeave:b,onAfterLeave:b,onLeaveCancelled:b,onBeforeAppear:b,onAppear:b,onAfterAppear:b,onAppearCancelled:b},setup(e,{slots:t}){const n=mt(),r=y();let l;return()=>{const i=t.default&&O(t.default(),!0);if(!i||!i.length)return;const a=(0,o.IU)(e),{mode:s}=a,c=i[0];if(r.isLeaving)return x(c);const u=S(c);if(!u)return x(c);const p=k(u,a,r,n);C(u,p);const f=n.subTree,d=f&&S(f);let m=!1;const{getTransitionKey:h}=u.type;if(h){const e=h();void 0===l?l=e:e!==l&&(l=e,m=!0)}if(d&&d.type!==Le&&(!Ye(u,d)||m)){const e=k(d,a,r,n);if(C(d,e),"out-in"===s)return r.isLeaving=!0,e.afterLeave=()=>{r.isLeaving=!1,n.update()},x(c);"in-out"===s&&u.type!==Le&&(e.delayLeave=(e,t,n)=>{_(r,d)[String(d.key)]=d,e._leaveCb=()=>{t(),e._leaveCb=void 0,delete p.delayedLeave},p.delayedLeave=n})}return c}}};function _(e,t){const{leavingVNodes:n}=e;let o=n.get(t.type);return o||(o=Object.create(null),n.set(t.type,o)),o}function k(e,t,n,o){const{appear:r,mode:l,persisted:i=!1,onBeforeEnter:a,onEnter:s,onAfterEnter:c,onEnterCancelled:u,onBeforeLeave:p,onLeave:f,onAfterLeave:d,onLeaveCancelled:m,onBeforeAppear:h,onAppear:g,onAfterAppear:v,onAppearCancelled:y}=t,b=String(e.key),w=_(n,e),x=(e,t)=>{e&&St(e,o,9,t)},S={mode:l,persisted:i,beforeEnter(t){let o=a;if(!n.isMounted){if(!r)return;o=h||a}t._leaveCb&&t._leaveCb(!0);const l=w[b];l&&Ye(e,l)&&l.el._leaveCb&&l.el._leaveCb(),x(o,[t])},enter(e){let t=s,o=c,l=u;if(!n.isMounted){if(!r)return;t=g||s,o=v||c,l=y||u}let i=!1;const a=e._enterCb=t=>{i||(i=!0,x(t?l:o,[e]),S.delayedLeave&&S.delayedLeave(),e._enterCb=void 0)};t?(t(e,a),t.length<=1&&a()):a()},leave(t,o){const r=String(e.key);if(t._enterCb&&t._enterCb(!0),n.isUnmounting)return o();x(p,[t]);let l=!1;const i=t._leaveCb=n=>{l||(l=!0,o(),x(n?m:d,[t]),t._leaveCb=void 0,w[r]===e&&delete w[r])};w[r]=e,f?(f(t,i),f.length<=1&&i()):i()},clone:e=>k(e,t,n,o)};return S}function x(e){if(Z(e))return(e=Qe(e)).children=null,e}function S(e){return Z(e)?e.children?e.children[0]:void 0:e}function C(e,t){6&e.shapeFlag&&e.component?C(e.component.subTree,t):128&e.shapeFlag?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function O(e,t=!1){let n=[],o=0;for(let r=0;r1)for(let e=0;e!!e.type.__asyncLoader,Z=e=>e.type.__isKeepAlive,F={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(e,{slots:t}){const n=mt(),o=n.ctx;if(!o.renderer)return t.default;const l=new Map,i=new Set;let a=null;const s=n.suspense,{renderer:{p:c,m:u,um:p,o:{createElement:f}}}=o,d=f("div");function m(e){L(e),p(e,n,s)}function h(e){l.forEach(((t,n)=>{const o=kt(t.type);!o||e&&e(o)||g(n)}))}function g(e){const t=l.get(e);a&&t.type===a.type?a&&L(a):m(t),l.delete(e),i.delete(e)}o.activate=(e,t,n,o,l)=>{const i=e.component;u(e,t,n,0,s),c(i.vnode,e,t,n,i,s,o,e.slotScopeIds,l),xe((()=>{i.isDeactivated=!1,i.a&&(0,r.ir)(i.a);const t=e.props&&e.props.onVnodeMounted;t&&Oe(t,i.parent,e)}),s)},o.deactivate=e=>{const t=e.component;u(e,d,null,1,s),xe((()=>{t.da&&(0,r.ir)(t.da);const n=e.props&&e.props.onVnodeUnmounted;n&&Oe(n,t.parent,e),t.isDeactivated=!0}),s)},Gt((()=>[e.include,e.exclude]),(([e,t])=>{e&&h((t=>R(e,t))),t&&h((e=>!R(t,e)))}),{flush:"post",deep:!0});let v=null;const y=()=>{null!=v&&l.set(v,P(n.subTree))};return N(y),$(y),K((()=>{l.forEach((e=>{const{subTree:t,suspense:o}=n,r=P(t);if(e.type!==r.type)m(e);else{L(r);const e=r.component.da;e&&xe(e,o)}}))})),()=>{if(v=null,!t.default)return null;const n=t.default(),o=n[0];if(n.length>1)return a=null,n;if(!He(o)||!(4&o.shapeFlag||128&o.shapeFlag))return a=null,o;let r=P(o);const s=r.type,c=kt(T(r)?r.type.__asyncResolved||{}:s),{include:u,exclude:p,max:f}=e;if(u&&(!c||!R(u,c))||p&&c&&R(p,c))return a=r,o;const d=null==r.key?s:r.key,m=l.get(d);return r.el&&(r=Qe(r),128&o.shapeFlag&&(o.ssContent=r)),v=d,m?(r.el=m.el,r.component=m.component,r.transition&&C(r,r.transition),r.shapeFlag|=512,i.delete(d),i.add(d)):(i.add(d),f&&i.size>parseInt(f,10)&&g(i.values().next().value)),r.shapeFlag|=256,a=r,o}}};function R(e,t){return(0,r.kJ)(e)?e.some((e=>R(e,t))):(0,r.HD)(e)?e.split(",").indexOf(t)>-1:!!e.test&&e.test(t)}function E(e,t){B(e,"a",t)}function I(e,t){B(e,"da",t)}function B(e,t,n=dt){const o=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}e()});if(D(t,o,n),n){let e=n.parent;for(;e&&e.parent;)Z(e.parent.vnode)&&M(o,t,n,e),e=e.parent}}function M(e,t,n,o){const l=D(t,e,o,!0);J((()=>{(0,r.Od)(o[t],l)}),n)}function L(e){let t=e.shapeFlag;256&t&&(t-=256),512&t&&(t-=512),e.shapeFlag=t}function P(e){return 128&e.shapeFlag?e.ssContent:e}function D(e,t,n=dt,r=!1){if(n){const l=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...r)=>{if(n.isUnmounted)return;(0,o.Jd)(),ht(n);const l=St(t,n,e,r);return gt(),(0,o.lk)(),l});return r?l.unshift(i):l.push(i),i}}const j=e=>(t,n=dt)=>(!yt||"sp"===e)&&D(e,t,n),U=j("bm"),N=j("m"),z=j("bu"),$=j("u"),K=j("bum"),J=j("um"),H=j("sp"),Y=j("rtg"),G=j("rtc");function W(e,t=dt){D("ec",e,t)}let V=!0;function q(e,t,n){St((0,r.kJ)(e)?e.map((e=>e.bind(t.proxy))):e.bind(t.proxy),t,n)}function X(e,t,n,o){const l=o.includes(".")?qt(n,o):()=>n[o];if((0,r.HD)(e)){const n=t[e];(0,r.mf)(n)&&Gt(l,n)}else if((0,r.mf)(e))Gt(l,e.bind(n));else if((0,r.Kn)(e))if((0,r.kJ)(e))e.forEach((e=>X(e,t,n,o)));else{const o=(0,r.mf)(e.handler)?e.handler.bind(n):t[e.handler];(0,r.mf)(o)&&Gt(l,o,e)}}function Q(e){const t=e.type,{mixins:n,extends:o}=t,{mixins:r,optionsCache:l,config:{optionMergeStrategies:i}}=e.appContext,a=l.get(t);let s;return a?s=a:r.length||n||o?(s={},r.length&&r.forEach((e=>ee(s,e,i,!0))),ee(s,t,i)):s=t,l.set(t,s),s}function ee(e,t,n,o=!1){const{mixins:r,extends:l}=t;l&&ee(e,l,n,!0),r&&r.forEach((t=>ee(e,t,n,!0)));for(const r in t)if(o&&"expose"===r);else{const o=te[r]||n&&n[r];e[r]=o?o(e[r],t[r]):t[r]}return e}const te={data:ne,props:le,emits:le,methods:le,computed:le,beforeCreate:re,created:re,beforeMount:re,mounted:re,beforeUpdate:re,updated:re,beforeDestroy:re,destroyed:re,activated:re,deactivated:re,errorCaptured:re,serverPrefetch:re,components:le,directives:le,watch:function(e,t){if(!e)return t;if(!t)return e;const n=(0,r.l7)(Object.create(null),e);for(const o in t)n[o]=re(e[o],t[o]);return n},provide:ne,inject:function(e,t){return le(oe(e),oe(t))}};function ne(e,t){return t?e?function(){return(0,r.l7)((0,r.mf)(e)?e.call(this,this):e,(0,r.mf)(t)?t.call(this,this):t)}:t:e}function oe(e){if((0,r.kJ)(e)){const t={};for(let n=0;n{c=!0;const[n,o]=se(e,t,!0);(0,r.l7)(a,n),o&&s.push(...o)};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}if(!i&&!c)return o.set(e,r.Z6),r.Z6;if((0,r.kJ)(i))for(let e=0;e-1,o[1]=n<0||e-1||(0,r.RI)(o,"default"))&&s.push(t)}}}const u=[a,s];return o.set(e,u),u}function ce(e){return"$"!==e[0]}function ue(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:null===e?"null":""}function pe(e,t){return ue(e)===ue(t)}function fe(e,t){return(0,r.kJ)(t)?t.findIndex((t=>pe(t,e))):(0,r.mf)(t)&&pe(t,e)?0:-1}const de=e=>"_"===e[0]||"$stable"===e,me=e=>(0,r.kJ)(e)?e.map(nt):[nt(e)],he=(e,t,n)=>{const o=p((e=>me(t(e))),n);return o._c=!1,o},ge=(e,t,n)=>{const o=e._ctx;for(const n in e){if(de(n))continue;const l=e[n];if((0,r.mf)(l))t[n]=he(0,l,o);else if(null!=l){const e=me(l);t[n]=()=>e}}},ve=(e,t)=>{const n=me(t);e.slots.default=()=>n};function ye(e,t){if(null===s)return e;const n=s.proxy,o=e.dirs||(e.dirs=[]);for(let e=0;e(i.has(e)||(e&&(0,r.mf)(e.install)?(i.add(e),e.install(s,...t)):(0,r.mf)(e)&&(i.add(e),e(s,...t))),s),mixin:e=>(l.mixins.includes(e)||l.mixins.push(e),s),component:(e,t)=>t?(l.components[e]=t,s):l.components[e],directive:(e,t)=>t?(l.directives[e]=t,s):l.directives[e],mount(r,i,c){if(!a){const u=Xe(n,o);return u.appContext=l,i&&t?t(u,r):e(u,r,c),a=!0,s._container=r,r.__vue_app__=s,u.component.proxy}},unmount(){a&&(e(null,s._container),delete s._container.__vue_app__)},provide:(e,t)=>(l.provides[e]=t,s)};return s}}const xe=function(e,t){t&&t.pendingBranch?(0,r.kJ)(e)?t.effects.push(...e):t.effects.push(e):zt(e,Bt,It,Mt)};function Se(e){return function(e,t){const{insert:n,remove:s,patchProp:c,createElement:u,createText:p,createComment:d,setText:m,setElementText:g,parentNode:v,nextSibling:y,setScopeId:b=r.dG,cloneNode:w,insertStaticContent:_}=e,k=(e,t,n,o=null,r=null,l=null,i=!1,a=null,s=!!t.dynamicChildren)=>{if(e===t)return;e&&!Ye(e,t)&&(o=q(e),H(e,r,l,!0),e=null),-2===t.patchFlag&&(s=!1,t.dynamicChildren=null);const{type:c,ref:u,shapeFlag:p}=t;switch(c){case Me:x(e,t,n,o);break;case Le:S(e,t,n,o);break;case Pe:null==e&&C(t,n,o,i);break;case Be:L(e,t,n,o,r,l,i,a,s);break;default:1&p?A(e,t,n,o,r,l,i,a,s):6&p?P(e,t,n,o,r,l,i,a,s):(64&p||128&p)&&c.process(e,t,n,o,r,l,i,a,s,Q)}null!=u&&r&&Ce(u,e&&e.ref,l,t||e,!t)},x=(e,t,o,r)=>{if(null==e)n(t.el=p(t.children),o,r);else{const n=t.el=e.el;t.children!==e.children&&m(n,t.children)}},S=(e,t,o,r)=>{null==e?n(t.el=d(t.children||""),o,r):t.el=e.el},C=(e,t,n,o)=>{[e.el,e.anchor]=_(e.children,t,n,o)},O=({el:e,anchor:t})=>{let n;for(;e&&e!==t;)n=y(e),s(e),e=n;s(t)},A=(e,t,n,o,r,l,i,a,s)=>{i=i||"svg"===t.type,null==e?F(t,n,o,r,l,i,a,s):I(e,t,r,l,i,a,s)},F=(e,t,o,l,i,a,s,p)=>{let f,d;const{type:m,props:h,shapeFlag:v,transition:y,patchFlag:b,dirs:_}=e;if(e.el&&void 0!==w&&-1===b)f=e.el=w(e.el);else{if(f=e.el=u(e.type,a,h&&h.is,h),8&v?g(f,e.children):16&v&&E(e.children,f,null,l,i,a&&"foreignObject"!==m,s,p),_&&be(e,null,l,"created"),h){for(const t in h)"value"===t||(0,r.Gg)(t)||c(f,t,null,h[t],a,e.children,l,i,V);"value"in h&&c(f,"value",null,h.value),(d=h.onVnodeBeforeMount)&&Oe(d,l,e)}R(f,e,e.scopeId,s,l)}_&&be(e,null,l,"beforeMount");const k=(!i||i&&!i.pendingBranch)&&y&&!y.persisted;k&&y.beforeEnter(f),n(f,t,o),((d=h&&h.onVnodeMounted)||k||_)&&xe((()=>{d&&Oe(d,l,e),k&&y.enter(f),_&&be(e,null,l,"mounted")}),i)},R=(e,t,n,o,r)=>{if(n&&b(e,n),o)for(let t=0;t{for(let c=s;c{const s=t.el=e.el;let{patchFlag:u,dynamicChildren:p,dirs:f}=t;u|=16&e.patchFlag;const d=e.props||r.kT,m=t.props||r.kT;let h;if((h=m.onVnodeBeforeUpdate)&&Oe(h,n,t,e),f&&be(t,e,n,"beforeUpdate"),u>0){if(16&u)M(s,t,d,m,n,o,l);else if(2&u&&d.class!==m.class&&c(s,"class",null,m.class,l),4&u&&c(s,"style",d.style,m.style,l),8&u){const r=t.dynamicProps;for(let t=0;t{h&&Oe(h,n,t,e),f&&be(t,e,n,"updated")}),o)},B=(e,t,n,o,r,l,i)=>{for(let a=0;a{if(n!==o){for(const s in o){if((0,r.Gg)(s))continue;const u=o[s],p=n[s];u!==p&&"value"!==s&&c(e,s,p,u,a,t.children,l,i,V)}if(n!==r.kT)for(const s in n)(0,r.Gg)(s)||s in o||c(e,s,n[s],null,a,t.children,l,i,V);"value"in o&&c(e,"value",n.value,o.value)}},L=(e,t,o,r,l,i,a,s,c)=>{const u=t.el=e?e.el:p(""),f=t.anchor=e?e.anchor:p("");let{patchFlag:d,dynamicChildren:m,slotScopeIds:h}=t;h&&(s=s?s.concat(h):h),null==e?(n(u,o,r),n(f,o,r),E(t.children,o,f,l,i,a,s,c)):d>0&&64&d&&m&&e.dynamicChildren?(B(e.dynamicChildren,m,o,l,i,a,s),(null!=t.key||l&&t===l.subTree)&&Ae(e,t,!0)):z(e,t,o,f,l,i,a,s,c)},P=(e,t,n,o,r,l,i,a,s)=>{t.slotScopeIds=a,null==e?512&t.shapeFlag?r.ctx.activate(t,n,o,i,s):D(t,n,o,r,l,i,s):j(e,t,s)},D=(e,t,n,a,s,c,u)=>{const p=e.component=function(e,t,n){const a=e.type,s=(t?t.appContext:e.appContext)||pt,c={uid:ft++,vnode:e,type:a,parent:t,appContext:s,root:null,next:null,subTree:null,update:null,scope:new o.Bj(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(s.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:se(a,s),emitsOptions:i(a,s),emit:null,emitted:null,propsDefaults:r.kT,inheritAttrs:a.inheritAttrs,ctx:r.kT,data:r.kT,props:r.kT,attrs:r.kT,slots:r.kT,refs:r.kT,setupState:r.kT,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return c.ctx={_:c},c.root=t?t.root:c,c.emit=l.bind(null,c),e.ce&&e.ce(c),c}(e,a,s);if(Z(e)&&(p.ctx.renderer=Q),function(e,t=!1){yt=t;const{props:n,children:l}=e.vnode,i=vt(e);!function(e,t,n,l=!1){const i={},a={};(0,r.Nj)(a,Ge,1),e.propsDefaults=Object.create(null),ie(e,t,i,a);for(const t in e.propsOptions[0])t in i||(i[t]=void 0);n?e.props=l?i:(0,o.Um)(i):e.type.props?e.props=i:e.props=a,e.attrs=a}(e,n,i,t),((e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=(0,o.IU)(t),(0,r.Nj)(t,"_",n)):ge(t,e.slots={})}else e.slots={},t&&ve(e,t);(0,r.Nj)(e.slots,Ge,1)})(e,l);const a=i?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=(0,o.Xl)(new Proxy(e.ctx,ut));const{setup:l}=n;if(l){const n=e.setupContext=l.length>1?function(e){const t=t=>{e.exposed=t||{}};let n;return{get attrs(){return n||(n=function(e){return new Proxy(e.attrs,{get:(t,n)=>((0,o.j)(e,"get","$attrs"),t[n])})}(e))},slots:e.slots,emit:e.emit,expose:t}}(e):null;ht(e),(0,o.Jd)();const i=xt(l,e,0,[e.props,n]);if((0,o.lk)(),gt(),(0,r.tI)(i)){if(i.then(gt,gt),t)return i.then((n=>{bt(e,n,t)})).catch((t=>{Ct(t,e,0)}));e.asyncDep=i}else bt(e,i,t)}else wt(e)}(e,t):void 0;yt=!1}(p),p.asyncDep){if(s&&s.registerDep(p,U),!e.el){const e=p.subTree=Xe(Le);S(null,e,t,n)}}else U(p,e,t,n,s,c,u)},j=(e,t,n)=>{const o=t.component=e.component;if(function(e,t,n){const{props:o,children:r,component:l}=e,{props:i,children:s,patchFlag:c}=t,u=l.emitsOptions;if(t.dirs||t.transition)return!0;if(!(n&&c>=0))return!(!r&&!s||s&&s.$stable)||o!==i&&(o?!i||h(o,i,u):!!i);if(1024&c)return!0;if(16&c)return o?h(o,i,u):!!i;if(8&c){const e=t.dynamicProps;for(let t=0;tZt&&Tt.splice(t,1)}(o.update),o.update()}else t.component=e.component,t.el=e.el,o.vnode=t},U=(e,t,n,l,i,a,s)=>{const c=new o.qq((()=>{if(e.isMounted){let t,{next:n,bu:o,u:l,parent:u,vnode:p}=e,d=n;n?(n.el=p.el,N(e,n,s)):n=p,c.allowRecurse=!1,o&&(0,r.ir)(o),(t=n.props&&n.props.onVnodeBeforeUpdate)&&Oe(t,u,n,p),c.allowRecurse=!0;const m=f(e),h=e.subTree;e.subTree=m,k(h,m,v(h.el),q(h),e,i,a),n.el=m.el,null===d&&function({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}(e,m.el),l&&xe(l,i),(t=n.props&&n.props.onVnodeUpdated)&&xe((()=>Oe(t,u,n,p)),i)}else{let o;const{el:s,props:u}=t,{bm:p,m:d,parent:m}=e;if(c.allowRecurse=!1,p&&(0,r.ir)(p),(o=u&&u.onVnodeBeforeMount)&&Oe(o,m,t),c.allowRecurse=!0,s&&te){const n=()=>{e.subTree=f(e),te(s,e.subTree,e,i,null)};T(t)?t.type.__asyncLoader().then((()=>!e.isUnmounted&&n())):n()}else{const o=e.subTree=f(e);k(null,o,n,l,e,i,a),t.el=o.el}if(d&&xe(d,i),o=u&&u.onVnodeMounted){const e=t;xe((()=>Oe(o,m,e)),i)}256&t.shapeFlag&&e.a&&xe(e.a,i),e.isMounted=!0,t=n=l=null}}),(()=>Ut(e.update)),e.scope),u=e.update=c.run.bind(c);u.id=e.uid,c.allowRecurse=u.allowRecurse=!0,u()},N=(e,t,n)=>{t.component=e;const l=e.vnode.props;e.vnode=t,e.next=null,function(e,t,n,l){const{props:i,attrs:a,vnode:{patchFlag:s}}=e,c=(0,o.IU)(i),[u]=e.propsOptions;let p=!1;if(!(l||s>0)||16&s){let o;ie(e,t,i,a)&&(p=!0);for(const l in c)t&&((0,r.RI)(t,l)||(o=(0,r.rs)(l))!==l&&(0,r.RI)(t,o))||(u?!n||void 0===n[l]&&void 0===n[o]||(i[l]=ae(u,c,l,void 0,e,!0)):delete i[l]);if(a!==c)for(const e in a)t&&(0,r.RI)(t,e)||(delete a[e],p=!0)}else if(8&s){const n=e.vnode.dynamicProps;for(let o=0;o{const{vnode:o,slots:l}=e;let i=!0,a=r.kT;if(32&o.shapeFlag){const e=t._;e?n&&1===e?i=!1:((0,r.l7)(l,t),n||1!==e||delete l._):(i=!t.$stable,ge(t,l)),a=t}else t&&(ve(e,t),a={default:1});if(i)for(const e in l)de(e)||e in a||delete l[e]})(e,t.children,n),(0,o.Jd)(),$t(void 0,e.update),(0,o.lk)()},z=(e,t,n,o,r,l,i,a,s=!1)=>{const c=e&&e.children,u=e?e.shapeFlag:0,p=t.children,{patchFlag:f,shapeFlag:d}=t;if(f>0){if(128&f)return void K(c,p,n,o,r,l,i,a,s);if(256&f)return void $(c,p,n,o,r,l,i,a,s)}8&d?(16&u&&V(c,r,l),p!==c&&g(n,p)):16&u?16&d?K(c,p,n,o,r,l,i,a,s):V(c,r,l,!0):(8&u&&g(n,""),16&d&&E(p,n,o,r,l,i,a,s))},$=(e,t,n,o,l,i,a,s,c)=>{e=e||r.Z6,t=t||r.Z6;const u=e.length,p=t.length,f=Math.min(u,p);let d;for(d=0;dp?V(e,l,i,!0,!1,f):E(t,n,o,l,i,a,s,c,f)},K=(e,t,n,o,l,i,a,s,c)=>{let u=0;const p=t.length;let f=e.length-1,d=p-1;for(;u<=f&&u<=d;){const o=e[u],r=t[u]=c?ot(t[u]):nt(t[u]);if(!Ye(o,r))break;k(o,r,n,null,l,i,a,s,c),u++}for(;u<=f&&u<=d;){const o=e[f],r=t[d]=c?ot(t[d]):nt(t[d]);if(!Ye(o,r))break;k(o,r,n,null,l,i,a,s,c),f--,d--}if(u>f){if(u<=d){const e=d+1,r=ed)for(;u<=f;)H(e[u],l,i,!0),u++;else{const m=u,h=u,g=new Map;for(u=h;u<=d;u++){const e=t[u]=c?ot(t[u]):nt(t[u]);null!=e.key&&g.set(e.key,u)}let v,y=0;const b=d-h+1;let w=!1,_=0;const x=new Array(b);for(u=0;u=b){H(o,l,i,!0);continue}let r;if(null!=o.key)r=g.get(o.key);else for(v=h;v<=d;v++)if(0===x[v-h]&&Ye(o,t[v])){r=v;break}void 0===r?H(o,l,i,!0):(x[r-h]=u+1,r>=_?_=r:w=!0,k(o,t[r],n,null,l,i,a,s,c),y++)}const S=w?function(e){const t=e.slice(),n=[0];let o,r,l,i,a;const s=e.length;for(o=0;o>1,e[n[a]]0&&(t[o]=n[l-1]),n[l]=o)}}for(l=n.length,i=n[l-1];l-- >0;)n[l]=i,i=t[i];return n}(x):r.Z6;for(v=S.length-1,u=b-1;u>=0;u--){const e=h+u,r=t[e],f=e+1{const{el:i,type:a,transition:s,children:c,shapeFlag:u}=e;if(6&u)J(e.component.subTree,t,o,r);else if(128&u)e.suspense.move(t,o,r);else if(64&u)a.move(e,t,o,Q);else if(a!==Be)if(a!==Pe)if(2!==r&&1&u&&s)if(0===r)s.beforeEnter(i),n(i,t,o),xe((()=>s.enter(i)),l);else{const{leave:e,delayLeave:r,afterLeave:l}=s,a=()=>n(i,t,o),c=()=>{e(i,(()=>{a(),l&&l()}))};r?r(i,a,c):c()}else n(i,t,o);else(({el:e,anchor:t},o,r)=>{let l;for(;e&&e!==t;)l=y(e),n(e,o,r),e=l;n(t,o,r)})(e,t,o);else{n(i,t,o);for(let e=0;e{const{type:l,props:i,ref:a,children:s,dynamicChildren:c,shapeFlag:u,patchFlag:p,dirs:f}=e;if(null!=a&&Ce(a,null,n,e,!0),256&u)return void t.ctx.deactivate(e);const d=1&u&&f;let m;if((m=i&&i.onVnodeBeforeUnmount)&&Oe(m,t,e),6&u)W(e.component,n,o);else{if(128&u)return void e.suspense.unmount(n,o);d&&be(e,null,t,"beforeUnmount"),64&u?e.type.remove(e,t,n,r,Q,o):c&&(l!==Be||p>0&&64&p)?V(c,t,n,!1,!0):(l===Be&&(128&p||256&p)||!r&&16&u)&&V(s,t,n),o&&Y(e)}((m=i&&i.onVnodeUnmounted)||d)&&xe((()=>{m&&Oe(m,t,e),d&&be(e,null,t,"unmounted")}),n)},Y=e=>{const{type:t,el:n,anchor:o,transition:r}=e;if(t===Be)return void G(n,o);if(t===Pe)return void O(e);const l=()=>{s(n),r&&!r.persisted&&r.afterLeave&&r.afterLeave()};if(1&e.shapeFlag&&r&&!r.persisted){const{leave:t,delayLeave:o}=r,i=()=>t(n,l);o?o(e.el,l,i):i()}else l()},G=(e,t)=>{let n;for(;e!==t;)n=y(e),s(e),e=n;s(t)},W=(e,t,n)=>{const{bum:o,scope:l,update:i,subTree:a,um:s}=e;o&&(0,r.ir)(o),l.stop(),i&&(i.active=!1,H(a,e,t,n)),s&&xe(s,t),xe((()=>{e.isUnmounted=!0}),t),t&&t.pendingBranch&&!t.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===t.pendingId&&(t.deps--,0===t.deps&&t.resolve())},V=(e,t,n,o=!1,r=!1,l=0)=>{for(let i=l;i6&e.shapeFlag?q(e.component.subTree):128&e.shapeFlag?e.suspense.next():y(e.anchor||e.el),X=(e,t,n)=>{null==e?t._vnode&&H(t._vnode,null,null,!0):k(t._vnode||null,e,t,null,null,null,n),Kt(),t._vnode=e},Q={p:k,um:H,m:J,r:Y,mt:D,mc:E,pc:z,pbc:B,n:q,o:e};let ee,te;return t&&([ee,te]=t(Q)),{render:X,hydrate:ee,createApp:ke(X,ee)}}(e)}function Ce(e,t,n,l,i=!1){if((0,r.kJ)(e))return void e.forEach(((e,o)=>Ce(e,t&&((0,r.kJ)(t)?t[o]:t),n,l,i)));if(T(l)&&!i)return;const a=4&l.shapeFlag?_t(l.component)||l.component.proxy:l.el,s=i?null:a,{i:c,r:u}=e,p=t&&t.r,f=c.refs===r.kT?c.refs={}:c.refs,d=c.setupState;if(null!=p&&p!==u&&((0,r.HD)(p)?(f[p]=null,(0,r.RI)(d,p)&&(d[p]=null)):(0,o.dq)(p)&&(p.value=null)),(0,r.HD)(u)){const e=()=>{f[u]=s,(0,r.RI)(d,u)&&(d[u]=s)};s?(e.id=-1,xe(e,n)):e()}else if((0,o.dq)(u)){const e=()=>{u.value=s};s?(e.id=-1,xe(e,n)):e()}else(0,r.mf)(u)&&xt(u,c,12,[s,f])}function Oe(e,t,n,o=null){St(e,t,7,[n,o])}function Ae(e,t,n=!1){const o=e.children,l=t.children;if((0,r.kJ)(o)&&(0,r.kJ)(l))for(let e=0;e0?je||r.Z6:null,De.pop(),je=De[De.length-1]||null,Ne>0&&je&&je.push(e),e}function Ke(e,t,n,o,r,l){return $e(qe(e,t,n,o,r,l,!0))}function Je(e,t,n,o,r){return $e(Xe(e,t,n,o,r,!0))}function He(e){return!!e&&!0===e.__v_isVNode}function Ye(e,t){return e.type===t.type&&e.key===t.key}const Ge="__vInternal",We=({key:e})=>null!=e?e:null,Ve=({ref:e})=>null!=e?(0,r.HD)(e)||(0,o.dq)(e)||(0,r.mf)(e)?{i:s,r:e}:e:null;function qe(e,t=null,n=null,o=0,l=null,i=(e===Be?0:1),a=!1,s=!1){const u={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&We(t),ref:t&&Ve(t),scopeId:c,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:o,dynamicProps:l,dynamicChildren:null,appContext:null};return s?(rt(u,n),128&i&&e.normalize(u)):n&&(u.shapeFlag|=(0,r.HD)(n)?8:16),Ne>0&&!a&&je&&(u.patchFlag>0||6&i)&&32!==u.patchFlag&&je.push(u),u}const Xe=function(e,t=null,n=null,l=0,i=null,a=!1){if(e&&e!==Fe||(e=Le),He(e)){const o=Qe(e,t,!0);return n&&rt(o,n),o}if(s=e,(0,r.mf)(s)&&"__vccOpts"in s&&(e=e.__vccOpts),t){t=function(e){return e?(0,o.X3)(e)||Ge in e?(0,r.l7)({},e):e:null}(t);let{class:e,style:n}=t;e&&!(0,r.HD)(e)&&(t.class=(0,r.C_)(e)),(0,r.Kn)(n)&&((0,o.X3)(n)&&!(0,r.kJ)(n)&&(n=(0,r.l7)({},n)),t.style=(0,r.j5)(n))}var s;return qe(e,t,n,l,i,(0,r.HD)(e)?1:(e=>e.__isSuspense)(e)?128:(e=>e.__isTeleport)(e)?64:(0,r.Kn)(e)?4:(0,r.mf)(e)?2:0,a,!0)};function Qe(e,t,n=!1){const{props:o,ref:l,patchFlag:i,children:a}=e,s=t?function(...e){const t={};for(let n=0;nt(e,n,void 0,i&&i[n])));else{const n=Object.keys(e);l=new Array(n.length);for(let o=0,r=n.length;o!He(e)||e.type!==Le&&!(e.type===Be&&!at(e.children))))?e:null}const st=e=>e?vt(e)?_t(e)||e.proxy:st(e.parent):null,ct=(0,r.l7)(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>st(e.parent),$root:e=>st(e.root),$emit:e=>e.emit,$options:e=>Q(e),$forceUpdate:e=>()=>Ut(e.update),$nextTick:e=>jt.bind(e.proxy),$watch:e=>Vt.bind(e)}),ut={get({_:e},t){const{ctx:n,setupState:l,data:i,props:a,accessCache:s,type:c,appContext:u}=e;let p;if("$"!==t[0]){const o=s[t];if(void 0!==o)switch(o){case 0:return l[t];case 1:return i[t];case 3:return n[t];case 2:return a[t]}else{if(l!==r.kT&&(0,r.RI)(l,t))return s[t]=0,l[t];if(i!==r.kT&&(0,r.RI)(i,t))return s[t]=1,i[t];if((p=e.propsOptions[0])&&(0,r.RI)(p,t))return s[t]=2,a[t];if(n!==r.kT&&(0,r.RI)(n,t))return s[t]=3,n[t];V&&(s[t]=4)}}const f=ct[t];let d,m;return f?("$attrs"===t&&(0,o.j)(e,"get",t),f(e)):(d=c.__cssModules)&&(d=d[t])?d:n!==r.kT&&(0,r.RI)(n,t)?(s[t]=3,n[t]):(m=u.config.globalProperties,(0,r.RI)(m,t)?m[t]:void 0)},set({_:e},t,n){const{data:o,setupState:l,ctx:i}=e;if(l!==r.kT&&(0,r.RI)(l,t))l[t]=n;else if(o!==r.kT&&(0,r.RI)(o,t))o[t]=n;else if((0,r.RI)(e.props,t))return!1;return!("$"===t[0]&&t.slice(1)in e||(i[t]=n,0))},has({_:{data:e,setupState:t,accessCache:n,ctx:o,appContext:l,propsOptions:i}},a){let s;return void 0!==n[a]||e!==r.kT&&(0,r.RI)(e,a)||t!==r.kT&&(0,r.RI)(t,a)||(s=i[0])&&(0,r.RI)(s,a)||(0,r.RI)(o,a)||(0,r.RI)(ct,a)||(0,r.RI)(l.config.globalProperties,a)}},pt=we();let ft=0;let dt=null;const mt=()=>dt||s,ht=e=>{dt=e,e.scope.on()},gt=()=>{dt&&dt.scope.off(),dt=null};function vt(e){return 4&e.vnode.shapeFlag}let yt=!1;function bt(e,t,n){(0,r.mf)(t)?e.render=t:(0,r.Kn)(t)&&(e.setupState=(0,o.WL)(t)),wt(e)}function wt(e,t,n){const l=e.type;e.render||(e.render=l.render||r.dG),ht(e),(0,o.Jd)(),function(e){const t=Q(e),n=e.proxy,l=e.ctx;V=!1,t.beforeCreate&&q(t.beforeCreate,e,"bc");const{data:i,computed:a,methods:s,watch:c,provide:u,inject:p,created:f,beforeMount:d,mounted:m,beforeUpdate:h,updated:y,activated:b,deactivated:w,beforeDestroy:_,beforeUnmount:k,destroyed:x,unmounted:S,render:C,renderTracked:O,renderTriggered:A,errorCaptured:T,serverPrefetch:Z,expose:F,inheritAttrs:R,components:B,directives:M,filters:L}=t;if(p&&function(e,t,n=r.dG,l=!1){(0,r.kJ)(e)&&(e=oe(e));for(const n in e){const i=e[n];let a;a=(0,r.Kn)(i)?"default"in i?v(i.from||n,i.default,!0):v(i.from||n):v(i),(0,o.dq)(a)&&l?Object.defineProperty(t,n,{enumerable:!0,configurable:!0,get:()=>a.value,set:e=>a.value=e}):t[n]=a}}(p,l,null,e.appContext.config.unwrapInjectedRef),s)for(const e in s){const t=s[e];(0,r.mf)(t)&&(l[e]=t.bind(n))}if(i){const t=i.call(n,n);(0,r.Kn)(t)&&(e.data=(0,o.qj)(t))}if(V=!0,a)for(const e in a){const t=a[e],i=(0,r.mf)(t)?t.bind(n,n):(0,r.mf)(t.get)?t.get.bind(n,n):r.dG,s=!(0,r.mf)(t)&&(0,r.mf)(t.set)?t.set.bind(n):r.dG,c=(0,o.Fl)({get:i,set:s});Object.defineProperty(l,e,{enumerable:!0,configurable:!0,get:()=>c.value,set:e=>c.value=e})}if(c)for(const e in c)X(c[e],l,n,e);if(u){const e=(0,r.mf)(u)?u.call(n):u;Reflect.ownKeys(e).forEach((t=>{g(t,e[t])}))}function P(e,t){(0,r.kJ)(t)?t.forEach((t=>e(t.bind(n)))):t&&e(t.bind(n))}if(f&&q(f,e,"c"),P(U,d),P(N,m),P(z,h),P($,y),P(E,b),P(I,w),P(W,T),P(G,O),P(Y,A),P(K,k),P(J,S),P(H,Z),(0,r.kJ)(F))if(F.length){const t=e.exposed||(e.exposed={});F.forEach((e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t})}))}else e.exposed||(e.exposed={});C&&e.render===r.dG&&(e.render=C),null!=R&&(e.inheritAttrs=R),B&&(e.components=B),M&&(e.directives=M)}(e),(0,o.lk)(),gt()}function _t(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy((0,o.WL)((0,o.Xl)(e.exposed)),{get:(t,n)=>n in t?t[n]:n in ct?ct[n](e):void 0}))}function kt(e){return(0,r.mf)(e)&&e.displayName||e.name}function xt(e,t,n,o){let r;try{r=o?e(...o):e()}catch(e){Ct(e,t,n)}return r}function St(e,t,n,o){if((0,r.mf)(e)){const l=xt(e,t,n,o);return l&&(0,r.tI)(l)&&l.catch((e=>{Ct(e,t,n)})),l}const l=[];for(let r=0;r>>1;Jt(Tt[o])Jt(e)-Jt(t))),Mt=0;Mtnull==e.id?1/0:e.id;function Ht(e){At=!1,Ot=!0,$t(e),Tt.sort(((e,t)=>Jt(e)-Jt(t)));try{for(Zt=0;Zte.value,f=!!e._shallow):(0,o.PG)(e)?(u=()=>e,l=!0):(0,r.kJ)(e)?(d=!0,f=e.some(o.PG),u=()=>e.map((e=>(0,o.dq)(e)?e.value:(0,o.PG)(e)?Xt(e):(0,r.mf)(e)?xt(e,c,2):void 0))):u=(0,r.mf)(e)?t?()=>xt(e,c,2):()=>{if(!c||!c.isUnmounted)return p&&p(),St(e,c,3,[m])}:r.dG,t&&l){const e=u;u=()=>Xt(e())}let m=e=>{p=y.onStop=()=>{xt(e,c,4)}},h=d?[]:Yt;const g=()=>{if(y.active)if(t){const e=y.run();(l||f||(d?e.some(((e,t)=>(0,r.aU)(e,h[t]))):(0,r.aU)(e,h)))&&(p&&p(),St(t,c,3,[e,h===Yt?void 0:h,m]),h=e)}else y.run()};let v;g.allowRecurse=!!t,v="sync"===i?g:"post"===i?()=>xe(g,c&&c.suspense):()=>{!c||c.isMounted?function(e){zt(e,Rt,Ft,Et)}(g):g()};const y=new o.qq(u,v);return t?n?g():h=y.run():"post"===i?xe(y.run.bind(y),c&&c.suspense):y.run(),()=>{y.stop(),c&&c.scope&&(0,r.Od)(c.scope.effects,y)}}function Vt(e,t,n){const o=this.proxy,l=(0,r.HD)(e)?e.includes(".")?qt(o,e):()=>o[e]:e.bind(o,o);let i;(0,r.mf)(t)?i=t:(i=t.handler,n=t);const a=dt;ht(this);const s=Wt(l,i.bind(o),n);return a?ht(a):gt(),s}function qt(e,t){const n=t.split(".");return()=>{let t=e;for(let e=0;e{Xt(e,t)}));else if((0,r.PO)(e))for(const n in e)Xt(e[n],t);return e}function Qt(e,t,n){const o=arguments.length;return 2===o?(0,r.Kn)(t)&&!(0,r.kJ)(t)?He(t)?Xe(e,null,[t]):Xe(e,t):Xe(e,null,t):(o>3?n=Array.prototype.slice.call(arguments,2):3===o&&He(n)&&(n=[n]),Xe(e,t,n))}Symbol("");const en="3.2.1"},4747:function(e,t,n){"use strict";var o=n(6252),r=n(3577);n(2610);const l="undefined"!=typeof document?document:null,i=new Map,a={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,o)=>{const r=t?l.createElementNS("http://www.w3.org/2000/svg",e):l.createElement(e,n?{is:n}:void 0);return"select"===e&&o&&null!=o.multiple&&r.setAttribute("multiple",o.multiple),r},createText:e=>l.createTextNode(e),createComment:e=>l.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>l.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},cloneNode(e){const t=e.cloneNode(!0);return"_value"in e&&(t._value=e._value),t},insertStaticContent(e,t,n,o){const r=n?n.previousSibling:t.lastChild;let a=i.get(e);if(!a){const t=l.createElement("template");if(t.innerHTML=o?`${e}`:e,a=t.content,o){const e=a.firstChild;for(;e.firstChild;)a.appendChild(e.firstChild);a.removeChild(e)}i.set(e,a)}return t.insertBefore(a.cloneNode(!0),n),[r?r.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},s=/\s*!important$/;function c(e,t,n){if((0,r.kJ)(n))n.forEach((n=>c(e,t,n)));else if(t.startsWith("--"))e.setProperty(t,n);else{const o=function(e,t){const n=p[t];if(n)return n;let o=(0,r._A)(t);if("filter"!==o&&o in e)return p[t]=o;o=(0,r.kC)(o);for(let n=0;ndocument.createEvent("Event").timeStamp&&(d=()=>performance.now());const e=navigator.userAgent.match(/firefox\/(\d+)/i);m=!!(e&&Number(e[1])<=53)}let h=0;const g=Promise.resolve(),v=()=>{h=0};const y=/(?:Once|Passive|Capture)$/,b=/^on[a-z]/;"undefined"!=typeof HTMLElement&&HTMLElement;const w="transition",_="animation",k=(e,{slots:t})=>(0,o.h)(o.P$,function(e){const t={};for(const n in e)n in x||(t[n]=e[n]);if(!1===e.css)return t;const{name:n="v",type:o,duration:l,enterFromClass:i=`${n}-enter-from`,enterActiveClass:a=`${n}-enter-active`,enterToClass:s=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:u=a,appearToClass:p=s,leaveFromClass:f=`${n}-leave-from`,leaveActiveClass:d=`${n}-leave-active`,leaveToClass:m=`${n}-leave-to`}=e,h=function(e){if(null==e)return null;if((0,r.Kn)(e))return[O(e.enter),O(e.leave)];{const t=O(e);return[t,t]}}(l),g=h&&h[0],v=h&&h[1],{onBeforeEnter:y,onEnter:b,onEnterCancelled:w,onLeave:_,onLeaveCancelled:k,onBeforeAppear:F=y,onAppear:E=b,onAppearCancelled:I=w}=t,B=(e,t,n)=>{T(e,t?p:s),T(e,t?u:a),n&&n()},M=(e,t)=>{T(e,m),T(e,d),t&&t()},L=e=>(t,n)=>{const r=e?E:b,l=()=>B(t,e,n);S(r,[t,l]),Z((()=>{T(t,e?c:i),A(t,e?p:s),C(r)||R(t,o,g,l)}))};return(0,r.l7)(t,{onBeforeEnter(e){S(y,[e]),A(e,i),A(e,a)},onBeforeAppear(e){S(F,[e]),A(e,c),A(e,u)},onEnter:L(!1),onAppear:L(!0),onLeave(e,t){const n=()=>M(e,t);A(e,f),document.body.offsetHeight,A(e,d),Z((()=>{T(e,f),A(e,m),C(_)||R(e,o,v,n)})),S(_,[e,n])},onEnterCancelled(e){B(e,!1),S(w,[e])},onAppearCancelled(e){B(e,!0),S(I,[e])},onLeaveCancelled(e){M(e),S(k,[e])}})}(e),t);k.displayName="Transition";const x={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},S=(k.props=(0,r.l7)({},o.P$.props,x),(e,t=[])=>{(0,r.kJ)(e)?e.forEach((e=>e(...t))):e&&e(...t)}),C=e=>!!e&&((0,r.kJ)(e)?e.some((e=>e.length>1)):e.length>1);function O(e){return(0,r.He)(e)}function A(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.add(t))),(e._vtc||(e._vtc=new Set)).add(t)}function T(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.remove(t)));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function Z(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}let F=0;function R(e,t,n,o){const r=e._endId=++F,l=()=>{r===e._endId&&o()};if(n)return setTimeout(l,n);const{type:i,timeout:a,propCount:s}=function(e,t){const n=window.getComputedStyle(e),o=e=>(n[e]||"").split(", "),r=o("transitionDelay"),l=o("transitionDuration"),i=E(r,l),a=o("animationDelay"),s=o("animationDuration"),c=E(a,s);let u=null,p=0,f=0;return t===w?i>0&&(u=w,p=i,f=l.length):t===_?c>0&&(u=_,p=c,f=s.length):(p=Math.max(i,c),u=p>0?i>c?w:_:null,f=u?u===w?l.length:s.length:0),{type:u,timeout:p,propCount:f,hasTransform:u===w&&/\b(transform|all)(,|$)/.test(n.transitionProperty)}}(e,t);if(!i)return o();const c=i+"end";let u=0;const p=()=>{e.removeEventListener(c,f),l()},f=t=>{t.target===e&&++u>=s&&p()};setTimeout((()=>{uI(t)+I(e[n]))))}function I(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}new WeakMap,new WeakMap;const B={beforeMount(e,{value:t},{transition:n}){e._vod="none"===e.style.display?"":e.style.display,n&&t?n.beforeEnter(e):M(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:o}){!t!=!n&&(o?t?(o.beforeEnter(e),M(e,!0),o.enter(e)):o.leave(e,(()=>{M(e,!1)})):M(e,t))},beforeUnmount(e,{value:t}){M(e,t)}};function M(e,t){e.style.display=t?e._vod:"none"}const L=(0,r.l7)({patchProp:(e,t,n,l,i=!1,a,s,u,p)=>{"class"===t?function(e,t,n){const o=e._vtc;o&&(t=(t?[t,...o]:[...o]).join(" ")),null==t?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}(e,l,i):"style"===t?function(e,t,n){const o=e.style;if(n)if((0,r.HD)(n)){if(t!==n){const t=o.display;o.cssText=n,"_vod"in e&&(o.display=t)}}else{for(const e in n)c(o,e,n[e]);if(t&&!(0,r.HD)(t))for(const e in t)null==n[e]&&c(o,e,"")}else e.removeAttribute("style")}(e,n,l):(0,r.F7)(t)?(0,r.tR)(t)||function(e,t,n,l,i=null){const a=e._vei||(e._vei={}),s=a[t];if(l&&s)s.value=l;else{const[n,c]=function(e){let t;if(y.test(e)){let n;for(t={};n=e.match(y);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[(0,r.rs)(e.slice(2)),t]}(t);l?function(e,t,n,o){e.addEventListener(t,n,o)}(e,n,a[t]=function(e,t){const n=e=>{const l=e.timeStamp||d();(m||l>=n.attached-1)&&(0,o.$d)(function(e,t){if((0,r.kJ)(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map((e=>t=>!t._stopped&&e(t)))}return t}(e,n.value),t,5,[e])};return n.value=e,n.attached=h||(g.then(v),h=d()),n}(l,i),c):s&&(function(e,t,n,o){e.removeEventListener(t,n,o)}(e,n,s,c),a[t]=void 0)}}(e,t,0,l,s):("."===t[0]?(t=t.slice(1),1):"^"===t[0]?(t=t.slice(1),0):function(e,t,n,o){return o?"innerHTML"===t||!!(t in e&&b.test(t)&&(0,r.mf)(n)):"spellcheck"!==t&&"draggable"!==t&&("form"!==t&&(("list"!==t||"INPUT"!==e.tagName)&&(("type"!==t||"TEXTAREA"!==e.tagName)&&((!b.test(t)||!(0,r.HD)(n))&&t in e))))}(e,t,l,i))?function(e,t,n,o,r,l,i){if("innerHTML"===t||"textContent"===t)return o&&i(o,r,l),void(e[t]=null==n?"":n);if("value"===t&&"PROGRESS"!==e.tagName){e._value=n;const o=null==n?"":n;return e.value!==o&&(e.value=o),void(null==n&&e.removeAttribute(t))}if(""===n||null==n){const o=typeof e[t];if(""===n&&"boolean"===o)return void(e[t]=!0);if(null==n&&"string"===o)return e[t]="",void e.removeAttribute(t);if("number"===o){try{e[t]=0}catch(e){}return void e.removeAttribute(t)}}try{e[t]=n}catch(e){}}(e,t,l,a,s,u,p):("true-value"===t?e._trueValue=l:"false-value"===t&&(e._falseValue=l),function(e,t,n,o,l){if(o&&t.startsWith("xlink:"))null==n?e.removeAttributeNS(f,t.slice(6,t.length)):e.setAttributeNS(f,t,n);else{const o=(0,r.Pq)(t);null==n||o&&!1===n?e.removeAttribute(t):e.setAttribute(t,o?"":n)}}(e,t,l,i))}},a);let P;var D={class:"van-doc-demo-block"},j={key:0,class:"van-doc-demo-block__title"},U={key:1,class:"van-doc-demo-block__card"},N={name:"DemoBlock",props:{card:Boolean,title:String}},z=n(3379),$=n.n(z),K=n(501);$()(K.Z,{insert:"head",singleton:!1}),K.Z.locals,N.render=function(e,t,n,l,i,a){return(0,o.wg)(),(0,o.iD)("div",D,[n.title?((0,o.wg)(),(0,o.iD)("h2",j,(0,r.zw)(n.title),1)):(0,o.kq)("v-if",!0),n.card?((0,o.wg)(),(0,o.iD)("div",U,[(0,o.WI)(e.$slots,"default")])):(0,o.WI)(e.$slots,"default",{key:2})])};var J=N,H=navigator.userAgent.toLowerCase();function Y(e,t){return void 0===t&&(t="-"),e.replace(/([a-z\d])([A-Z])/g,"$1"+t+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+t+"$2").toLowerCase()}/ios|iphone|ipod|ipad|android/.test(H);var G={name:"DemoSection",computed:{demoName(){var e=(this.$route||{}).meta;return e&&e.name?"demo-"+Y(e.name):""}}},W=n(5073);$()(W.Z,{insert:"head",singleton:!1}),W.Z.locals,G.render=function(e,t,n,l,i,a){return(0,o.wg)(),(0,o.iD)("section",{class:(0,r.C_)(["van-doc-demo-section",a.demoName])},[(0,o.WI)(e.$slots,"default")],2)};var V=G,q=n(2119),X={class:"demo-home"},Q=["src"],ee={key:0,class:"demo-home__desc"},te=(n(7337),{}),ne={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[]}},oe={class:"demo-home-nav"},re={class:"demo-home-nav__title"},le={class:"demo-home-nav__group"},ie={viewBox:"0 0 1024 1024"},ae=[(0,o._)("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),(0,o._)("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)];var se={components:{ArrowRight:{render:function(e,t){return(0,o.wg)(),(0,o.iD)("svg",ie,ae)}}},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?"/"+this.lang:""}}},ce=n(3706);$()(ce.Z,{insert:"head",singleton:!1}),ce.Z.locals,se.render=function(e,t,n,l,i,a){var s=(0,o.up)("arrow-right"),c=(0,o.up)("router-link");return(0,o.wg)(),(0,o.iD)("div",oe,[(0,o._)("div",re,(0,r.zw)(n.group.title),1),(0,o._)("div",le,[((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)(n.group.items,(function(e){return(0,o.wg)(),(0,o.j4)(c,{class:"demo-home-nav__block",key:e.path,to:a.base+"/"+e.path},{default:(0,o.w5)((function(){return[(0,o.Uk)((0,r.zw)(e.title)+" ",1),(0,o.Wm)(s,{class:"demo-home-nav__icon"})]})),_:2},1032,["to"])})),128))])])};var ue={components:{DemoHomeNav:se},computed:{lang(){return this.$route.meta.lang},config(){var e=ne.site.locales;return e?e[this.lang]:ne.site},smallTitle(){return this.config.title.length>=8}}},pe=n(6125);$()(pe.Z,{insert:"head",singleton:!1}),pe.Z.locals,ue.render=function(e,t,n,l,i,a){var s=(0,o.up)("demo-home-nav");return(0,o.wg)(),(0,o.iD)("div",X,[(0,o._)("h1",{class:(0,r.C_)(["demo-home__title",{"demo-home__title--small":a.smallTitle}])},[(0,o._)("img",{src:a.config.logo},null,8,Q),(0,o._)("span",null,(0,r.zw)(a.config.title),1)],2),a.config.description?((0,o.wg)(),(0,o.iD)("h2",ee,(0,r.zw)(a.config.description),1)):(0,o.kq)("v-if",!0),((0,o.wg)(!0),(0,o.iD)(o.HY,null,(0,o.Ko)(a.config.nav,(function(e,t){return(0,o.wg)(),(0,o.j4)(s,{key:t,lang:a.lang,group:e},null,8,["lang","group"])})),128))])};var fe=ue,de="zh-CN",me=de,he=n(8334),ge=n.n(he),ve=n(7616),ye=n(3697),be=n(7825),we=n(9483),_e=n(7844),ke=n(5273),xe=n(2352),Se=n(3063),Ce=n(8703),Oe=n(441),Ae=n(1987),Te=n(4189),Ze=n(2727),Fe=n(9136),Re=n(5723),Ee=n(4914),Ie=n(7401),Be=n(2460),Me=n(3712),Le=n(9372),Pe=n(183),De=n(8754),je=n(4570),Ue=n(4850),Ne=n(1472),ze=n(2045),$e=n(9941),Ke=n(6777),Je=n(8694),He=n(5476),Ye=n(9774),Ge=n(6063),We=n(1144),Ve=n(7130),qe=n(164),Xe=n(4461),Qe=n(3929),et=n(8894),tt=n(9029),nt=n(7477),ot=n(2839),rt=n(978),lt=n(2827),it=n(8746),at=n(1771),st=n(6202),ct=n(7795),ut=n(6368),pt=n(9270),ft=n(9441),dt=n(9143),mt=n(5209),ht=n(774),gt=n(2864),vt=n(9132),yt=n(2459),bt=n(7213),wt=n(1928),_t=(ve.Z,ye.Z,be.Z,we.Z,_e.Z,ke.Z,xe.Z,Se.Z,Ce.Z,Oe.Z,Ae.Z,Te.Z,Ze.Z,Fe.Z,Re.Z,Ee.Z,Ie.Z,Be.Z,Me.Z,Le.Z,Pe.Z,De.Z,je.Z,Ue.Z,Ne.Z,ze.Z,$e.Z,Ke.Z,Je.Z,He.Z,Ye.Z,Ge.Z,We.Z,Ve.Z,qe.Z,Xe.Z,Qe.Z,et.Z,tt.Z,nt.Z,ot.Z,rt.Z,lt.Z,it.Z,at.Z,st.Z,ct.Z,ut.Z,pt.Z,ft.Z,dt.Z,mt.Z,ht.Z,gt.Z,vt.Z,yt.Z,bt.Z,wt.Z,[]);function kt(){var e,t,n;window.top.postMessage({type:"replacePath",value:(n=window.vueRouter.currentRoute.value.path,null!=(e=ge().site.simulator)&&e.routeMapper?null==(t=ge().site.simulator)?void 0:t.routeMapper(n):n)},"*")}window.top===window?window.addEventListener("message",(function(e){"iframeReady"===e.data.type&&(_t.forEach((function(e){return e()})),_t=[])})):window.top.postMessage({type:"iframeReady"},"*");var xt,St,Ct=ne.site,Ot=Ct.locales;function At(e){var t=e.path.split("/")[1];return-1!==Object.keys(Ot).indexOf(t)?t:me}xt=Ct.defaultLang,St=localStorage.getItem("vant-cli-lang"),me=St||(navigator.language&&-1!==navigator.language.indexOf("zh-")?de:xt||"en-US");var Tt,Zt,Ft,Rt=(0,q.p7)({history:(0,q.r5)(),routes:(Tt=[],Zt=Object.keys(te),Ft=Ot?Object.keys(Ot):[],Ft.length?(Tt.push({name:"NotFound",path:"/:path(.*)+",redirect:function(e){return{name:At(e)}}}),Ft.forEach((function(e){Tt.push({name:e,path:"/"+e,component:fe,meta:{lang:e}})}))):(Tt.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),Tt.push({name:"home",path:"/",component:fe})),Zt.forEach((function(e){var t=Y(e);Ft.length?Ft.forEach((function(n){Tt.push({name:n+"/"+t,path:"/"+n+"/"+t,component:te[e],meta:{name:e,lang:n}})})):Tt.push({name:t,path:"/"+t,component:te[e],meta:{name:e}})})),Tt),scrollBehavior:function(e,t,n){return n||{x:0,y:0}}});(0,o.YP)(Rt.currentRoute,(function(){Rt.currentRoute.value.redirectedFrom||(0,o.Y3)(kt)})),function(e){window.addEventListener("message",(function(t){var n,o;if("replacePath"===(null==(n=t.data)?void 0:n.type)){var r=(null==(o=t.data)?void 0:o.value)||"";e.currentRoute.value.path!==r&&e.replace(r).catch((function(){}))}}))}(Rt),window.vueRouter=Rt;var Et={class:"demo-nav"},It={class:"demo-nav__title"},Bt=["d"],Mt={data:()=>({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(){var e=(this.$route.meta||{}).name;return e?e.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},Lt=n(3787);$()(Lt.Z,{insert:"head",singleton:!1}),Lt.Z.locals,Mt.render=function(e,t,n,l,i,a){return(0,o.wy)(((0,o.wg)(),(0,o.iD)("div",Et,[(0,o._)("div",It,(0,r.zw)(a.title),1),((0,o.wg)(),(0,o.iD)("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:t[0]||(t[0]=function(){return a.onBack&&a.onBack.apply(a,arguments)})},[(0,o._)("path",{fill:"#969799","fill-rule":"evenodd",d:i.path},null,8,Bt)]))],512)),[[B,a.title]])};var Pt={components:{DemoNav:Mt}},Dt=n(6479);$()(Dt.Z,{insert:"head",singleton:!1}),Dt.Z.locals,Pt.render=function(e,t,n,r,l,i){var a=(0,o.up)("demo-nav"),s=(0,o.up)("demo-section"),c=(0,o.up)("router-view");return(0,o.wg)(),(0,o.iD)(o.HY,null,[(0,o.Wm)(a),(0,o.Wm)(c,null,{default:(0,o.w5)((function(e){var t=e.Component;return[((0,o.wg)(),(0,o.j4)(o.Ob,null,[(0,o.Wm)(s,null,{default:(0,o.w5)((function(){return[((0,o.wg)(),(0,o.j4)((0,o.LL)(t)))]})),_:2},1024)],1024))]})),_:1})],64)};var jt=Pt;n(6774),window.app=((...e)=>{const t=(P||(P=(0,o.Us)(L))).createApp(...e),{mount:n}=t;return t.mount=e=>{const o=function(e){return(0,r.HD)(e)?document.querySelector(e):e}(e);if(!o)return;const l=t._component;(0,r.mf)(l)||l.render||l.template||(l.template=o.innerHTML),o.innerHTML="";const i=n(o,!1,o instanceof SVGElement);return o instanceof Element&&(o.removeAttribute("v-cloak"),o.setAttribute("data-v-app","")),i},t})(jt).use(Rt).use({install:function(e){[].forEach((function(t){t.install?e.use(t):t.name&&e.component(t.name,t)}))},version:"1.8.5"}).component(J.name,J).component(V.name,V),setTimeout((function(){window.app.mount("#app")}),0)},8334:function(e){e.exports={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:function(e){return"/zh-CN"+({"/common":"/style","/transition":"/style"}[e]||e)},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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}}},6479:function(e,t,n){"use strict";var o=n(3645),r=n.n(o)()(!1);r.push([e.id,'@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-weight:400;font-family:Open Sans;font-style:normal;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-weight:600;font-family:Open Sans;font-style:normal;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{min-width:1100px;overflow-x:auto;color:#323233;font-size:16px;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;background-color:#f7f8fa;-webkit-font-smoothing:antialiased}body,p{margin:0}h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit}ol,ul{margin:0;padding:0;list-style:none}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{width:1680px;margin:0 auto}}body{min-width:100vw}::-webkit-scrollbar{width:0;background:transparent}',""]),t.Z=r},501:function(e,t,n){"use strict";var o=n(3645),r=n.n(o)()(!1);r.push([e.id,".van-doc-demo-block__title{margin:0;padding:32px 16px 16px;color:rgba(69,90,100,.6);font-weight:400;font-size:14px;line-height:16px}.van-doc-demo-block__card{margin:12px 12px 0;overflow:hidden;border-radius:8px}.van-doc-demo-block__title+.van-doc-demo-block__card{margin-top:0}.van-doc-demo-block:first-of-type .van-doc-demo-block__title{padding-top:20px}",""]),t.Z=r},6125:function(e,t,n){"use strict";var o=n(3645),r=n.n(o)()(!1);r.push([e.id,".demo-home{box-sizing:border-box;width:100%;min-height:100vh;padding:46px 20px 20px;background:#fff}.demo-home__desc,.demo-home__title{padding-left:16px;font-weight:400;line-height:1;-webkit-user-select:none;user-select:none}.demo-home__title{margin:0 0 16px;font-size:32px}.demo-home__title img,.demo-home__title span{display:inline-block;vertical-align:middle}.demo-home__title img{width:32px}.demo-home__title span{margin-left:16px}.demo-home__title--small{font-size:24px}.demo-home__desc{margin:0 0 40px;color:rgba(69,90,100,.6);font-size:14px}",""]),t.Z=r},3706:function(e,t,n){"use strict";var o=n(3645),r=n.n(o)()(!1);r.push([e.id,".demo-home-nav__title{margin:24px 0 8px 16px;color:rgba(69,90,100,.6);font-size:14px}.demo-home-nav__block{position:relative;display:flex;margin:0 0 12px;padding-left:20px;color:#323233;font-weight:600;font-size:14px;line-height:40px;background:#f7f8fa;border-radius:99px;transition:background .3s}.demo-home-nav__block:hover{background:#eef0f4}.demo-home-nav__block:active{background:#e4e8ee}.demo-home-nav__icon{position:absolute;top:50%;right:16px;width:16px;height:16px;margin-top:-8px}",""]),t.Z=r},3787:function(e,t,n){"use strict";var o=n(3645),r=n.n(o)()(!1);r.push([e.id,".demo-nav{position:relative;display:flex;align-items:center;justify-content:center;height:56px;background-color:#fff}.demo-nav__title{font-weight:600;font-size:17px;text-transform:capitalize}.demo-nav__back{position:absolute;top:16px;left:16px;width:24px;height:24px;cursor:pointer}",""]),t.Z=r},5073:function(e,t,n){"use strict";var o=n(3645),r=n.n(o)()(!1);r.push([e.id,".van-doc-demo-section{box-sizing:border-box;min-height:calc(100vh - 56px);padding-bottom:20px}",""]),t.Z=r}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var l=n[e]={id:e,exports:{}};return t[e](l,l.exports,o),l.exports}o.m=t,e=[],o.O=function(t,n,r,l){if(!n){var i=1/0;for(c=0;c=l)&&Object.keys(o.O).every((function(e){return o.O[e](n[s])}))?n.splice(s--,1):(a=!1,l0&&e[c-1][2]>l;c--)e[c]=e[c-1];e[c]=[n,r,l]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},function(){var e={561:0};o.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,l,[i,a,s]=n,c=0;for(r in a)o.o(a,r)&&(o.m[r]=a[r]);if(s)var u=s(o);for(t&&t(n);c{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();var n=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const l={class:"van-doc-markdown-body"},p=t('

更新日志

v1.9.0

2021-09-27

Bug Fixes

  • Slider: 移除 theme mixin #4520
  • Tab: 修复初始位置不正确问题 #4521

Document

  • ActionSheet: 添加 show 属性说明 #4518

Feature

  • Slider: 添加 vertical 属性 #4486

Performance

  • 移除 CSS variables 兼容代码 #4487

v1.8.7

2021-09-22

Features

  • Icons: 新增 guide-o 图标 #4507

1.8.6

2021-09-20

Features

  • Calendar: 新增 confirmDisabledText 默认文案 #4490) (8629da1

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

  • Calendar: 修复超出选择范围 toast 提示一直存在问题 #4474
  • page-scroll: 修复 isDef 取反问题 #4488

1.8.4

2021-09-07

Bug Fixes

  • page-scroll: 修复 getCurrentPage 为空时报错 #4458

Features

  • Field: 新增 clear-trigger 属性 #4461
  • Search: 新增 clear-icon 属性 #4463
  • Search: 新增 clear-trigger 属性 9e17b13
  • Slider: 新增 range 属性 #4442

v1.8.3

2021-08-30

Bug Fixes

  • Calendar: 修复 default-date 属性失效问题 #4430
  • ShareSheet: 调整 overlayStyle 属性类型为 string 8c408e2
  • Stepper: 调整 minus/plus slots 位置 #4427
  • Sticky: 修复 root 为 null 时，读取 root.top 报错问题 #4433
  • Calendar: 调整 minDate 和 maxDate 传值类型为 Number 37d8e69

Features

  • Popup: 新增 lock-scroll 属性 #4384

Performance Improvements

  • Radio: label 的 margin-left 改为 padding-left，增大可点击区域，增强用户体验 #4165

v1.8.2

2021-08-18

Bug Fixes

  • Calendar: 修复 template 引用路径不是相对路径的问题 7f7cf6
  • Field: 修复 template 引用路径不是相对路径的问题 6dd42a

v1.8.1

2021-08-18

Feature

  • Calendar: 新增 click-subtitle 事件 #4385
  • Circle: 使用 setTimeout 代替 setInterval #4401

Bug Fixes

  • Picker: 修复 template 引用路径不是相对路径的问题 #4408

v1.8.0

2021-08-11

Feature

  • Overlay: 新增 lock-scroll 属性 #4383
  • search: 新增 click-input 事件 #4357

Performance

  • 移除了 iOS8 相关的 polyfill，减少包体积 #4395

v1.7.2

2021-07-19

Bug Fixes

  • Calendar: 初始日期设置为当前日期 #4339

Features

  • Cell: CellGroup 新增 inset 属性 #4341
  • Search: 新增 click-input 事件 #4337

1.7.1

2021-07-06

Bug Fixes

  • Col: 修复样式问题 #4322
  • Grid: 增加 icon-prefix 属性默认值 #4318
  • IndexBar: 修复当索引列表为空时报错 #4310

1.7.0

2021-07-04

Bug Fixes

  • Button: 修复 type 为 getUserInfo & wx.getUserProfile 可用时 lang 参数失效 #4250
  • ShareSheet: 新增内置 icon weapp-qrcode wechat-moments #4256

Features

  • Checkbox: 增加 direction 属性，设置排列方向 #4265
  • ConfigProvider: 增加全局配置组件 #4279
  • Grid: 增加 reverse 属性，支持文本&图片位置互换 #4280
  • GridItem: 增加 icon-prefix 属性，支持第三方字体 #4276
  • Rate: 增加更多 css 变量 #4297
  • Slider: 增加更多 css 变量 #4305

Improvements

  • wxs style 方法支持驼峰变量命名，以便能更好的在 wxml 中使用 #4281

1.6.9

2021-06-06

Bug Fixes

  • DatetimePicker: 修复 动态设置 min-hour min-date 显示不正确 #4245
  • Tabs: 修复 tab 数量较多时滚动距离不正确 #4202
  • Uploader: 修复 demo 中 beforeRead 报错 #4235

1.6.9-beta.2

2021-05-22

Bug Fixes

  • Button: 修复 open-type 不生效 #4222
  • Calendar: 修复 allow-same-day 开启时 custom-color 属性无效 #4200
  • Circle: 修复 value 是小数时抖动的情况 #4152
  • NoticeBar: 调整滚动行为 #4201
  • NoticeBar: 修复不正确的滚动速度 cde3876
  • Radio: 支持动态设置 disabled #4191
  • Rate: 支持滑动选择半星 #4195

Features

  • Calendar: 增加 first-day-of-week 属性，设置周起始日 #4211
  • Calendar: 增加 show-range-prompt 属性和 over-range 事件，设置是否展示提示文案 #4212
  • Icons: 图标库迁移至 iconfont.cn #4219
  • OpenType: 支持 getUserProfile #4203
  • Panel: 移除 useFooterSlot #4205

1.6.8

2021-02-26

Features

  • NoticeBar: 新增默认插槽 (#4048)
  • Stepper: 新增 theme 属性，支持圆形风格 (#4049)
  • Stepper: 新增 plus & minus 插槽 (#4049)

Bug Fixes

  • Checkbox: 修复 label-position 属性无效 (#4036)
  • Dialog: 修复 beforeClose 方法类型定义 (#4019)

Improvements

  • Circle: 当内置 canvas 不支持同层渲染时降级至默认 type (#4050)

1.6.7

2021-01-27

Features

  • Radio: 新增 direction 属性 (#4007)

Bug Fixes

  • Icons: 修复部分地区图标不显示 (#4012)
  • Transition: 修复默认设置 show 属性为 true 时不生效 (#4005)

1.6.6

2021-01-21

Features

  • Uploader: 支持文件预览 (#3975)

Bug Fixes

  • Picker: 修复标题栏无法显示 (#3973)

Improvements

  • Calendar: 优化模板代码 (#3972)

1.6.5

2021-01-19

Features

  • Field: 新增 input 插槽 (#3932)
  • Field: 新增 click-input 事件 (#3932)
  • Icon: 新增 delete-o、sort、font、font-o、revoke 图标 (#3881)

Bug Fixes

  • Button: 修复 custom-style 属性不生效 (#3903)
  • Dialog: 修复 close-on-click-overlay 属性不生效 (#3913)

Improvements

  • Cell: 优化性能 (#3888)
  • Col: 优化性能 (#3886)
  • Divider: 优化性能 (#3887)
  • Empty: 优化性能 (#3933)
  • Loading: 优化性能 (#3892)
  • Notice-bar: 优化性能 (#3891)
  • Notify: 优化性能 (#3893)
  • Picker: 优化性能 (#3949)
  • Stepper: 优化性能 (#3890)
  • Sticky: 优化性能 (#3879)
  • SwipeCell: 优化性能 (#3928)
  • Switch: 优化性能 (#3889)
  • Tag: 优化性能 (#3894)
  • Transition: 优化性能 (#3895)
  • Uploader: 优化性能 (#3897)

1.6.4

2020-12-18

Improvements

  • Tab: 优化粘性布局时的渲染性能 (#3875)
  • Grid: 使用 wxs 优化性能 (#3839)
  • Image: 使用 wxs 优化性能 (#3839)
  • Button: 使用 wxs 优化性能 (#3839)
  • Icon: 减少代码体积 (#3839)
  • Checkbox: 减少代码体积 (#3839)
  • Slider: 减少代码体积 (#3839)

Bug Fixes

  • Calendar: 修复在 phone 设备上选择日期后显示错误 (#3833)
  • GoodsAction: 修复部分设备上高度异常 (#3865)
  • Slider: 修复设置 max min 时滑动不均匀 (#3876)
  • Tab: 修复切换时内容区闪烁的问题 (#3866)

1.6.3

2020-12-09

Features

  • Dialog: 新增 beforeClose 属性 (#3815)
  • uploader: 新增若干 CSS 变量 (#3797)
  • Aarea: 支持不传入 county_list 数据 (#3824)
  • Tab: 新增 resize 方法 (#3827)

Improvements

  • Collapse: 使用 animate 提升动画性能 (#3826)
  • Tab: 优化样式拼装性能 (#3827)

Bug Fixes

  • Field: 修复输入中文时显示字数暂时超出 maxlength (#3802)
  • Info: 修复样式错误 (#3823)
  • NavBar: 修复动态渲染时组件报错 (#3822)
  • Progress: 修复 percentage 为 0 时样式异常 (#3808)

1.6.2

2020-11-29

Features

  • Tabbar: 新增 placeholder icon-prefix 属性 (#3792)

Bug Fixes

  • DatetimePicker: 修复 type=year-month 时选择出现报错 (#3783)
  • Info: 修复部分安卓设备中文案不完全居中 (#3778)
  • Tab: 修复 ellipsis 为 false 时下划线位置不正确 (#3777)
  • Notify: 修复组件未全局居中 (#3751)

Improvements

  • Icon: 使用 wxs 优化性能 (#3791)

1.6.1

2020-11-12

Bug Fixes

  • Field: 修复未传入 label 属性时仍渲染 label #3756
  • Picker: 修复 confirm、cancel 事件报错 #3755

1.6.0

2020-11-11

Features

  • SwipeCell: 新增外部样式类 custom-class #3678
  • ActionSheet: 调整取消文字颜色至 @gray-7 #3719
  • ActionSheet: 调整顶部栏样式 #3720
  • ActionSheet: 调整加载图标大小至 22px #3718
  • ActionSheet: 调整描述文字样式 #3726
  • Cell: 调整图标外边距至 4px #3721
  • DropdownMenu: 增加默认阴影 #3723
  • DropdownMenu: 调整选中态默认颜色至 #ee0a24 #3725
  • Image: 调整图标大小至 36px #3724
  • Popup: 调整圆角至 16px #3713
  • Search: 调整左侧内边距至 12px #3716
  • Sidebar: 调整宽度至 85px #3722
  • TabbarItem: 调整图标大小至 22px #3717

Bug Fixes

  • Field: 修复使用 label 属性时 label-class 样式类不生效 #3729
  • NoticeBar: 修复内容较短时开启 scrollable 不生效 #3727
  • SidebarItem: 修复长数字不换行的问题 #3714
  • Tag: 默认字体加入 miui #3715

1.5.2

2020-10-15

Features

  • Uploader: 标准化 file-list 与事件参数 #3673
  • Uploader: 新增 thumb，支持缩略图展示 #3673
  • GoodsAction: 新增若干 CSS 变量 #3654
  • 移动 @types/wechat-miniprogram 至 dependencies #3654

Bug Fixes

  • Button: 修复细边框样式问题 #3653
  • Tab: 重构动画实现，不再使用 transform #3668

1.5.1

2020-09-29

Features

  • Card: 新增 origin-price tag 插槽 #3645
  • ShareSheet: 调整默认 z-index 至 100 #3575
  • ShareSheet: 新增 item 属性 openType #3575
  • Uploader: 扩大删除按钮点击区域 #3631

Bug Fixes

  • Uploader: 支持预览视频 #3594
  • Dialog: 调整类型定义 #3630
  • NavBar: 修复 CSS 变量 --nav-bar-icon-color 不生效 #3643
  • NavBar: 修复未设置 title 时样式异常 #3643
  • Tab: 修复 line-width 属性不支持 string #3628

1.5.0

2020-08-27

Features

  • ShareSheet: 新增组件 #3559
  • Icons: 升级 @vant/icons 至 v1.2.5 #3539
  • sidebar: 新增 badge 属性 #3564
  • Tabs: 调整默认 line-width 至 40px #3518
  • Tabs: 去除默认边框 #3519
  • TreeSelect: 新增 selected-icon 属性 #3565
  • TreeSelect: 支持 badge、dot 显示 #3565

Bug Fixes

  • collapse: 修复嵌套在 popup 等组件中时默认展开无效 #3562
  • empty: 修复 image、description 插槽不生效 #3563

1.4.4

2020-08-12

Bug Fixes

  • Transition: 重构组件以修复卡顿问题 #3498
  • Icon: 修复数字未对齐 #3501
  • Tab: 修复可滚动时下划线位置错误 #3511

v1.4.3

2020-08-07

Features

  • Dialog: 增加圆角按钮样式 #3476
  • Cell: 调整下划线位置 #3487
  • Tab: 调整默认滚动阈值至 5 个、优化样式 #3459

v1.4.2

2020-08-03

Features

Bug Fixes

  • Calendar: 修复超出 max-range 时未显示 Toast #3466
  • Tab: 修复手势滚动可切换至禁用项 #3467

v1.4.1

2020-07-28

Features

  • Picker: 调整默认可见的选项个数为 6 个 #3418
  • Toast: 调整圆角为 8px #3419

Bug Fixes

  • Slider: 修复点击会触发 drag 事件 #3415
  • Area: 修复中间列无法滚动 #3443

v1.4.0

2020-07-17

Features

  • Empty: 新增 Empty 组件 #3327
  • NoticeBar: 新增 background 属性 #3388
  • NoticeBar: 新增 close 事件 #3388
  • GridItem: 新增 icon-color 属性 #3386
  • NavBar: 现在 custom-style 将影响根节点#3371
  • Cell: 新增 title-style 属性, fix Field label width #3370
  • Uploader: 更新 failed 图标 #3359
  • Uploader: 更新删除图标样式 #3385
  • Uploader: 移除圆角样式 #3384
  • Field: 更新禁用态样式 #3358
  • Field: 更新 label 样式 #3357
  • Picker: 调整 action button 样式 #3316

Bug Fixes

  • Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 #3401
  • Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 #3317
  • Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 #3318
  • DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 #3352
  • Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 #3383
  • Dialog: show dialog after class ready #3374
  • Calendar: confirm-disabled-text 属性增加默认值 #3394

v1.3.3

2020-06-24

Features

  • steps: 为每一项增加 inactiveIcon、activeIcon 属性 #3315
  • field: 增加外部样式类 label-class #3311
  • field: 现在总会从内部 set value 值 #3313
  • uploader: 为每一项增加 deletable 属性 #3270
  • uploader: 扩大删除图标的可点击区域 #3265

Bug Fixes

  • tabbar: 修复 iphone-se 上高度异常 #3314
  • grid: 修复 text 与 icon 同时设置时样式异常 #3310
  • calendar: 修复多选模式下 default-date 属性不生效 #3284
  • circle: 修复 type=“2d” 时无法动态变更 value #3264
  • nav-bar: 修复未设置 left-text 时左侧图标样式异常 #3263

v1.3.2

2020-06-04

Features

  • button: 新增 form-type 属性 #3208
  • grid: 新增 icon-size、badge 属性 #3236
  • grid: 新增 direction 属性 #3192

Bug Fixes

  • Grid: 修复开启 square 时横、纵向间距不同 #3231
  • uploader: 修复点击删除图标时触发 click-preview 事件 #3230
  • circle: 修复 type="2d" 不生效 #3228
  • calendar: 修复在选择区间时，点击确定报错 #3195
  • tag: 修复 css 变量名拼写错误 #3191

v1.3.1

2020-05-24

Features

  • Button: 新增 class-prefix 属性 #3159
  • Collapse: 新增 open、close 事件 #3176

Bug Fixes

  • 修复控制台提示选择器错误的问题 #3137
  • 修复 GoodsActionButton 在某些情况下报错的问题 #3145

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

  • sticky: 新增 scroll-top 属性 #3115
  • button: 新增 dataset 属性 #3075
  • uploader: 所有类型都会触发 click-preview 事件 #3071
  • Uploader: 属性 accept 新增值 media #3047
  • feat: 新增基础 font-family #3061
  • submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 #3104

Bug Fixes

  • dialog: 修复 title 多余空格的问题 #3069
  • tab: 修复 tab 个数多时显示滚动条 #3072
  • Sticky: 修复使用组件时页面 onPageScroll 失效 #3092
  • button: 修复 disabled 属性对 open-type 类型的按钮无效 #3076

v1.2.2

2020-04-21

Features

  • GoodsActionButton: 新增 CSS 变量 goods-action-line-height #3037
  • Calendar: 选择区间大于 range 时自动选中最大范围 #3026
  • Notify: 新增 top 属性 #3018

Bug Fixes

  • Field: 修复未设置 autosize 时 wxs 报错 #3038
  • Field: 避免设置 showClear 为 undefined #3012

v1.2.1

2020-04-12

Features

  • Field: 支持小程序双向绑定 #2986
  • Calendar: 多选模式下新增 unselect 事件 #2990

Bug Fixes

  • IndexBar: 移除 scroll-top 属性 #2999
  • Uploader: 修复图片后缀名为大写时未正常识别 #2987
  • Field: 修复 autosize 属性 设置 max-height 不生效 #3007

v1.2.0

2020-04-04

Features

  • TreeSelect: 更新 nav 背景色 #2952
  • Sticky: 使用 page scroll 重构组件 #2950
  • Field: 新增 auto-focus、disable-default-padding、cursor 属性 #2936
  • Field: 新增 linechange、keyboardheightchange 事件 #2936
  • Uploader: 支持显示上传状态 #2929
  • Image: mode 属性新增 widthFix、heightFix #2908
  • Canvas: 新增 type 属性 #2906
  • NavBar: 新增 placeholder 属性 #2896

Bug Fixes

  • Field: 修复输入过快时输入框内容不断回退 #2936
  • Calendar: 修复 show-confirm 为 true 时组件初始化报错 #2951
  • Tab: 修复 type 为 card 时 color 对边框无效 #2941

v1.1.0

2020-03-21

Features

  • 新增 Calendar 日历组件 #2894
  • Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class #2882
  • Steps: 新增 click 事件 #2874
  • SideBar: 新增 title 插槽 #2873
  • Uploader: 新增 upload-icon 属性 #2869
  • Uploader: 新增 show-upload 属性 #2868
  • Uploader: 更新样式、调整事件触发顺序与 vant 一致 #2886
  • Field: 新增 show-word-limit 属性 #2856
  • Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight #2856
  • Field: 新增若干 CSS 变量 #2856

Bug Fixes

  • Button: 移除 lang 属性默认值 #2883
  • Button: 修复 disabled 属性对原生事件无效 #2878

v1.0.7

2020-03-04

Features

  • DropdownItem: 新增 popupStyle 属性 #2804
  • DropdownItem: 新增 open close opened closed 事件 #2804
  • Card: 新增 price num 插槽 #2787
  • Card: 新增 origin-price-class 外部样式类 #2787

Bug Fixes

  • Tab: 修复内容项高度不同时粘性布局异常 #2817
  • Picker: 修复未选中项样式未置灰 #2816
  • GoodsActionButton: 修复仅使用一个 button 时样式异常 #2808
  • Radio: name类型与value统一 #2801
  • Uploader: 修复文档错误 #2777

v1.0.6

2020-02-24

Features

  • GoodsActionButton: 新增默认 slot #2779
  • SubmitBar: 更新圆角样式 #2755
  • Card: 更新样式 #2754
  • 优化 relation 部分代码 #2760

Bug Fixes

  • DropdownItem: 修复点击选项时不触发close事件 #2766
  • GoodsActionButton: 修复低版本基础库下的样式问题 #2762
  • Tabs: 修复点击禁用项时事件参数错误 #2758
  • Checkbox: 修复动态设置disabled属性无效 #2748
  • Button: add loading color when plain is true #2746
  • Radio: 修复label-disabled文档错误 #2763

v1.0.5

2020-02-07

Features

  • ActionSheet: actions 支持更多 openType #2715
  • Uploader: 新增开始disabled时的组件样式 #2720
  • Icon: 调整示例小程序页面与 vant 对齐 #2728
  • 示例小程序首页与 vant 对齐 #2729
  • 完善快速上手文档，增加 npm 构建说明 #2726

Bug Fixes

  • Radio: 修复disabled属性不生效 #2711
  • Tab: 修复animated属性无法动态切换 #2712
  • Circle: 修正文档错误，size属性不支持string类型 #2694
  • 修正文档默认 slot 名称为 default 的错误 #2726
  • TreeSelect: 修正文档示例代码标签闭合错误 #2710

v1.0.4

2020-01-21

Features

  • Stepper: 新增 disable-long-press 属性 #2691
  • quickstart: 快速上手新增关闭 style v2 说明 #2704
  • Search: 新增 background、disabled、input-align 文档示例 #2698
  • Icon: 文档新增图标文字加载失败说明 #2681

Bug Fixes

  • Sticky: 修复真机上页面滚动缓慢时无法吸顶/取消吸顶 #2703
  • DropdownItem: 修复 wx:key 警告 #2670
  • IndexBar: 文档修复组件引入路径错误 #2689
  • 升级依赖版本以避免安全警告 #2680

v1.0.3

2020-01-09

Features

  • npm 包默认输出 es5 版本代码 #2639
  • Steps: 新增外部样式类 desc-class #2630

Bug Fixes

  • Tab: 解决动态添加选项时，顺序错乱和下划线长度不变的问题 #2663
  • NavBar: 修复返回图标未居中的问题 #2633

v1.0.2

2019-12-31

Features

  • Skeleton: 新增外部样式类row-class``avatar-class``title-class #2612
  • SwipeCell: 支持动态修改width属性 #2607
  • Uploader: 新增camera``compressed``maxDuration属性 #2584

Improvements

  • Tab: 优化弹性滚动效果 #2606

Bug Fixes

  • IndexBar: 修复字母未全部定义时 click 事件报错 #2605
  • Field: 修复点击清除图标后下一次点击无效 #2602

v1.0.1

2019-12-23

Features

  • Uploader: 新增 sizeType 属性 #2563
  • GoodsActionButton: 新增 plain 属性 #2559
  • Uploader: 去除 use-slot 属性 #2551
  • 新增样式覆盖说明文档 #2566

Improvements

  • 使用 nextTick 优化部分异步逻辑 #2561
  • wxs 新增 addUnit 方法以减少 setData 调用次数 #2550

Bug Fixes

  • Tag: 修复未依赖 van-icon 组件 #2579
  • Notify: 修复 safeAreaInsetTop 不生效 #2558
  • Uploader: 修复 capture 属性不生效 #2551

v1.0.0

2019-12-11

主要变动

  • npm 包名由 vant-weapp 重命名为 @vant/weapp
  • 增加十一个新组件
  • 增加数十个 API
  • 所有组件支持通过CSS自定义属性自定义样式
  • 使用env()重构 iOS 安全区域适配
  • 调整部分 API 命名，废除少量 API

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

  • Grid 宫格，用于展示内容或进行页面导航
  • Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示
  • Circle 环形进度条，告知用户当前的状态和进度
  • Overaly 遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
  • Divider 分割线，区隔内容的分割线
  • Sticky 粘性布局，与 CSS 中position: sticky属性实现的效果类似
  • Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
  • IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
  • Uploader 文件上传，上传一个或多个文件
  • CountDown 倒计时，用于显示活动倒计时、短信验证码等
  • DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
  • BadgeGroup重命名为Sidebar
  • Badge重命名为SlidebarItem
  • active属性重命名为activeKey
Notify
  • text选项重命名为message
  • backgroundColor选项重命名为background
  • 去除transitionend事件，新增 6 个事件
SwitchCell
  • 移除了SwitchCell组件，可以使用Cell和Switch组件代替
Transition
  • 去除transitionend事件，新增 6 个事件

新特性

ActionSheet
  • 新增click-overlay事件
  • 新增close-on-click-action属性
  • 新增color属性
  • 新增description属性
  • 新增round属性
Area
  • 新增columns-placeholder属性
  • reset方法支持传入code参数
Button
  • 新增loading-type属性
  • color属性支持渐变色
  • 切换disabled时增加过渡效果
Checkbox
  • 新增icon-size属性
Color
  • 基础红色更新为#ee0a24
DatetimePicker
  • 新增filter属性
Dialog
  • 优化文字换行
  • 新增title插槽
  • 新增confirm-button-color属性
  • 新增cancel-button-color属性
  • 新增width属性
  • 新增overlay-style属性
Field
  • 新增clickable属性
  • 新增arrow-direction属性
  • 新增hold-keyboard属性
GoodsActionButton
  • 新增color属性
  • 样式升级为圆角风格
GoodsActionIcon
  • 新增icon插槽
  • 新增dot属性
GridItem
  • 新增info属性
  • 新增dot属性
Icon
  • 新增dot属性
  • 新增down图标
  • 新增wap-hone实底风格图标
  • 支持number类型的size属性
Loading
  • 支持number类型的size属性
NoticeBar
  • 阻止关闭图标点击事件冒泡
Notify
  • 新增clear方法
  • 新增round属性
  • 新增closeable属性
  • 新增close-icon属性
  • 新增close-icon-position属性
Progress
  • 新增stroke-width属性
Radio
  • 新增icon-size属性
Rate
  • 优化手势判断
  • 新增gutter属性
  • 新增touchable属性
  • 支持string类型的size属性
  • 新增action-text属性
  • 新增left-icon插槽
  • 新增right-icon插槽
SlidebarItem
  • 新增dot属性
Slider
  • 新增drag-start事件
  • 新增drag-end事件
  • 支持传入任意范围的max和min属性
  • 支持number类型的bar-height属性
  • 增加滑动动画
  • 增大点击区域
SwipeCell
  • 新增name属性
  • 新增open事件
  • 支持打开状态互斥
Switch
  • 加载图标的颜色会跟随开关状态变化
Stepper
  • 支持长按手势
  • 新增input-width属性
  • 新增button-size属性
  • 新增decimalLength属性
  • 新增 disablePlus、disableMinus 属性
Steps
  • 新增active-icon属性
  • 新增inactive-icon属性
Tabs
  • 使用 Sticky 组件重构吸顶实现
  • 新增name属性
  • 新增line-height属性
  • 新增ellipsis属性
  • 新增lazy-render属性
  • line-width属性支持String类型
  • 增加云开发结合示例
TreeSelect
  • 新增max属性
  • 新增content插槽
',48),e=[p],d={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",l,e)))},c={class:"van-doc-markdown-body"},o=t('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',5),i=[o],h={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",c,i)))},r={class:"van-doc-markdown-body"},u=t('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),g=[u],j={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",r,g)))},m={class:"van-doc-markdown-body"},v=t('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

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

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

  • 基于 Vant Weapp 搭建小程序应用
  • 样式覆盖方案

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),b=[v],q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",m,b)))},y={class:"van-doc-markdown-body"},f=t('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

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

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

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

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',7),x=[f],w={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",y,x)))},z={class:"van-doc-markdown-body"},k=t('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),_=[k],C={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",z,_)))},P={class:"van-doc-markdown-body"},S=t('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

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

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

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

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

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

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

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

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',17),I=[S],D={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",P,I)))},T={class:"van-doc-markdown-body"},A=t('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

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

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',18),B=[A],F={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",T,B)))},N={class:"van-doc-markdown-body"},E=t('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

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

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

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

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

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

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

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

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

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

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

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

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

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

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),L=[E],U={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",N,L)))},R={class:"van-doc-markdown-body"},G=t('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10),V=[G],O={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",R,V)))},M={class:"van-doc-markdown-body"},W=[t('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],$={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",M,W)))},H={class:"van-doc-markdown-body"},K=[t('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定复选框的勾选状态。

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

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

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

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

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

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

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

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],Q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",H,K)))},X={class:"van-doc-markdown-body"},Z=[t('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

value属性表示进度条的目标进度。

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

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

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

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],J={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",X,Z)))},Y={class:"van-doc-markdown-body"},ss=[t('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

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

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

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

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],as={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Y,ss)))},ts={class:"van-doc-markdown-body"},ns=[t('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],ls={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ts,ns)))},ps={class:"van-doc-markdown-body"},es=[t('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ps,es)))},cs={class:"van-doc-markdown-body"},os=[t('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

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

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],is={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",cs,os)))},hs={class:"van-doc-markdown-body"},rs=[t('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

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

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

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

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

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

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],us={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",hs,rs)))},gs={class:"van-doc-markdown-body"},js=[t('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择完整时间

value 为时间戳。

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

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

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

选择日期（年月）

value 为时间戳。

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

选择时间

value 为字符串。

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

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

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

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],ms={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gs,js)))},vs={class:"van-doc-markdown-body"},bs=[t('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

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

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vs,bs)))},ys={class:"van-doc-markdown-body"},fs=[t('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

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

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],xs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ys,fs)))},ws={class:"van-doc-markdown-body"},zs=[t('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

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

向上展开

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

禁用菜单

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

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
',15)],ks={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ws,zs)))},_s={class:"van-doc-markdown-body"},Cs=[t('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Ps={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_s,Cs)))},Ss={class:"van-doc-markdown-body"},Is=[t('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ss,Is)))},Ts={class:"van-doc-markdown-body"},As=[t('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],Bs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ts,As)))},Fs={class:"van-doc-markdown-body"},Ns=[t('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

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

自定义内容

通过插槽可以自定义格子展示的内容。

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

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

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

格子间距

通过gutter属性设置格子之间的距离。

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

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

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

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],Es={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fs,Ns)))},Ls={class:"van-doc-markdown-body"},Us=[t('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

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

图标颜色

设置color属性来控制图标颜色。

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

图标大小

设置size属性来控制图标大小。

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

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],Rs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ls,Us)))},Gs={class:"van-doc-markdown-body"},Vs=[t('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

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

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

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

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

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

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

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

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

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

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],Os={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Gs,Vs)))},Ms={class:"van-doc-markdown-body"},Ws=[t('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],$s={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ms,Ws)))},Hs={class:"van-doc-markdown-body"},Ks=[t('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

加载类型

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

自定义颜色

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

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],Qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Hs,Ks)))},Xs={class:"van-doc-markdown-body"},Zs=[t('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],Js={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xs,Zs)))},Ys={class:"van-doc-markdown-body"},sa=[t('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

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

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],aa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ys,sa)))},ta={class:"van-doc-markdown-body"},na=[t('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],la={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ta,na)))},pa={class:"van-doc-markdown-body"},ea=[t('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

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

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",pa,ea)))},ca={class:"van-doc-markdown-body"},oa=[t('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],ia={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ca,oa)))},ha={class:"van-doc-markdown-body"},ra=[t('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

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

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

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

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],ua={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ha,ra)))},ga={class:"van-doc-markdown-body"},ja=[t('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

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

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

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

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],ma={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ga,ja)))},va={class:"van-doc-markdown-body"},ba=[t('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

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

线条粗细

通过stroke-width可以设置进度条的粗细。

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

置灰

设置inactive属性后进度条将置灰。

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

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",va,ba)))},ya={class:"van-doc-markdown-body"},fa=[t('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定值当前选中项的 name 。

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

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

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

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

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

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],xa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ya,fa)))},wa={class:"van-doc-markdown-body"},za=[t('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

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

自定义图标

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

自定义样式

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

半星

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

自定义数量

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

禁用状态

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

只读状态

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

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],ka={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",wa,za)))},_a={class:"van-doc-markdown-body"},Ca=[t('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Pa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_a,Ca)))},Sa={class:"van-doc-markdown-body"},Ia=[t('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Sa,Ia)))},Ta={class:"van-doc-markdown-body"},Aa=[t('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],Ba={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ta,Aa)))},Fa={class:"van-doc-markdown-body"},Na=[t('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],Ea={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fa,Na)))},La={class:"van-doc-markdown-body"},Ua=[t('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],Ra={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",La,Ua)))},Ga={class:"van-doc-markdown-body"},Va=[t('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],Oa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ga,Va)))},Ma={class:"van-doc-markdown-body"},Wa=[t('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],$a={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ma,Wa)))},Ha={class:"van-doc-markdown-body"},Ka=[t('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],Qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ha,Ka)))},Xa={class:"van-doc-markdown-body"},Za=[t('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],Ja={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xa,Za)))},Ya={class:"van-doc-markdown-body"},st=[t('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],at={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ya,st)))},tt={class:"van-doc-markdown-body"},nt=[t('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],lt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",tt,nt)))},pt={class:"van-doc-markdown-body"},et=[t('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],dt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",pt,et)))},ct={class:"van-doc-markdown-body"},ot=[t('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],it={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ct,ot)))},ht={class:"van-doc-markdown-body"},rt=[t('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],ut={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ht,rt)))},gt={class:"van-doc-markdown-body"},jt=[t('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],mt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gt,jt)))},vt={class:"van-doc-markdown-body"},bt=[t('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],qt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vt,bt)))},yt={class:"van-doc-markdown-body"},ft=[t('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],xt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",yt,ft)))},wt={class:"van-doc-markdown-body"},zt=[t('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',18)],kt={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/vite/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:s=>`/zh-CN${{"/common":"/style","/transition":"/style"}[s]||s}`,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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}},_t={Changelog:d,CustomStyle:h,Home:j,Quickstart:q,Theme:w,ActionSheet:C,Area:D,Button:F,Calendar:U,Card:O,Cell:$,Checkbox:Q,Circle:J,Col:as,Collapse:ls,Common:ds,ConfigProvider:is,CountDown:us,DatetimePicker:ms,Dialog:qs,Divider:xs,DropdownMenu:ks,Empty:Ps,Field:Ds,GoodsAction:Bs,Grid:Es,Icon:Rs,Image:Os,IndexBar:$s,Loading:Qs,NavBar:Js,NoticeBar:aa,Notify:la,Overlay:da,Panel:ia,Picker:ua,Popup:ma,Progress:qa,Radio:xa,Rate:ka,Search:Pa,ShareSheet:Da,Sidebar:Ba,Skeleton:Ea,Slider:Ra,Stepper:Oa,Steps:$a,Sticky:Qa,SubmitBar:Ja,SwipeCell:at,Switch:lt,Tab:dt,Tabbar:it,Tag:ut,Toast:mt,Transition:qt,TreeSelect:xt,Uploader:{setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",wt,zt)))}},Ct="1.9.0";let Pt="zh-CN";function St(){return Pt}function It(s){Pt=s,localStorage.setItem("vant-cli-lang",s)}function Dt(s){const a=localStorage.getItem("vant-cli-lang");Pt=a||(navigator.language&&-1!==navigator.language.indexOf("zh-")?"zh-CN":s||"en-US")}const Tt=navigator.userAgent.toLowerCase(),At=/ios|iphone|ipod|ipad|android/.test(Tt);function Bt(s,a="-"){return s.replace(/([a-z\d])([A-Z])/g,"$1"+a+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+a+"$2").toLowerCase()}let Ft=[],Nt=!1;function Et(){var s,a;const t=window.vueRouter,{path:n}=t.currentRoute.value;return(null==(s=kt.site.simulator)?void 0:s.routeMapper)?null==(a=kt.site.simulator)?void 0:a.routeMapper(n):n}function Lt(){window.top.postMessage({type:"replacePath",value:Et()},"*")}function Ut(){const s=document.querySelector("iframe");var a;s&&(a=()=>{s.contentWindow.postMessage({type:"replacePath",value:Et()},"*")},Nt?a():Ft.push(a))}function Rt(s){window.addEventListener("message",(a=>{var t,n;if("replacePath"!==(null==(t=a.data)?void 0:t.type))return;const l=(null==(n=a.data)?void 0:n.value)||"";s.currentRoute.value.path!==l&&s.replace(l).catch((()=>{}))}))}window.top===window?window.addEventListener("message",(s=>{"iframeReady"===s.data.type&&(Nt=!0,Ft.forEach((s=>s())),Ft=[])})):window.top.postMessage({type:"iframeReady"},"*");export{n as _,Dt as a,Ut as b,kt as c,_t as d,Bt as e,Lt as f,St as g,At as i,Rt as l,Ct as p,It as s}; diff --git a/vite/assets/main.206a7a43.js b/vite/assets/main.206a7a43.js deleted file mode 100644 index 54073a88..00000000 --- a/vite/assets/main.206a7a43.js +++ /dev/null @@ -1,8 +0,0 @@ -var s,a=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,e=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,p=(s,t,n)=>t in s?a(s,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):s[t]=n;function o(s,a){const t=Object.create(null),n=s.split(",");for(let e=0;e!!t[s.toLowerCase()]:s=>!!t[s]}!function(){const s=document.createElement("link").relList;if(!(s&&s.supports&&s.supports("modulepreload"))){for(const s of document.querySelectorAll('link[rel="modulepreload"]'))a(s);new MutationObserver((s=>{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();const d=o("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function r(s){if(C(s)){const a={};for(let t=0;t{if(s){const t=s.split(h);t.length>1&&(a[t[0].trim()]=t[1].trim())}})),a}function g(s){let a="";if(I(s))a=s;else if(C(s))for(let t=0;tnull==s?"":C(s)||A(s)&&s.toString===N?JSON.stringify(s,m,2):String(s),m=(s,a)=>a&&a.__v_isRef?m(s,a.value):P(a)?{[`Map(${a.size})`]:[...a.entries()].reduce(((s,[a,t])=>(s[`${a} =>`]=t,s)),{})}:O(a)?{[`Set(${a.size})`]:[...a.values()]}:!A(a)||C(a)||R(a)?a:String(a),v={},b=[],f=()=>{},y=()=>!1,q=/^on[^a-z]/,x=s=>q.test(s),w=s=>s.startsWith("onUpdate:"),_=Object.assign,k=(s,a)=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)},S=Object.prototype.hasOwnProperty,z=(s,a)=>S.call(s,a),C=Array.isArray,P=s=>"[object Map]"===F(s),O=s=>"[object Set]"===F(s),E=s=>"function"==typeof s,I=s=>"string"==typeof s,D=s=>"symbol"==typeof s,A=s=>null!==s&&"object"==typeof s,T=s=>A(s)&&E(s.then)&&E(s.catch),N=Object.prototype.toString,F=s=>N.call(s),R=s=>"[object Object]"===F(s),L=s=>I(s)&&"NaN"!==s&&"-"!==s[0]&&""+parseInt(s,10)===s,B=o(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),M=s=>{const a=Object.create(null);return t=>a[t]||(a[t]=s(t))},$=/-(\w)/g,U=M((s=>s.replace($,((s,a)=>a?a.toUpperCase():"")))),V=/\B([A-Z])/g,H=M((s=>s.replace(V,"-$1").toLowerCase())),W=M((s=>s.charAt(0).toUpperCase()+s.slice(1))),G=M((s=>s?`on${W(s)}`:"")),K=(s,a)=>!Object.is(s,a),J=(s,a)=>{for(let t=0;t{Object.defineProperty(s,a,{configurable:!0,enumerable:!1,value:t})},X=s=>{const a=parseFloat(s);return isNaN(a)?s:a};let Q;const Z=[];class ss{constructor(s=!1){this.active=!0,this.effects=[],this.cleanups=[],!s&&Q&&(this.parent=Q,this.index=(Q.scopes||(Q.scopes=[])).push(this)-1)}run(s){if(this.active)try{return this.on(),s()}finally{this.off()}}on(){this.active&&(Z.push(this),Q=this)}off(){this.active&&(Z.pop(),Q=Z[Z.length-1])}stop(s){if(this.active){if(this.effects.forEach((s=>s.stop())),this.cleanups.forEach((s=>s())),this.scopes&&this.scopes.forEach((s=>s.stop(!0))),this.parent&&!s){const s=this.parent.scopes.pop();s&&s!==this&&(this.parent.scopes[this.index]=s,s.index=this.index)}this.active=!1}}}const as=s=>{const a=new Set(s);return a.w=0,a.n=0,a},ts=s=>(s.w&cs)>0,ns=s=>(s.n&cs)>0,es=new WeakMap;let ls=0,cs=1;const ps=[];let os;const ds=Symbol(""),rs=Symbol("");class is{constructor(s,a=null,t){this.fn=s,this.scheduler=a,this.active=!0,this.deps=[],function(s,a){(a=a||Q)&&a.active&&a.effects.push(s)}(this,t)}run(){if(!this.active)return this.fn();if(!ps.includes(this))try{return ps.push(os=this),gs.push(us),us=!0,cs=1<<++ls,ls<=30?(({deps:s})=>{if(s.length)for(let a=0;a{const{deps:a}=s;if(a.length){let t=0;for(let n=0;n0?ps[s-1]:void 0}}stop(){this.active&&(hs(this),this.onStop&&this.onStop(),this.active=!1)}}function hs(s){const{deps:a}=s;if(a.length){for(let t=0;t{("length"===a||a>=n)&&p.push(s)}));else switch(void 0!==t&&p.push(c.get(t)),a){case"add":C(s)?L(t)&&p.push(c.get("length")):(p.push(c.get(ds)),P(s)&&p.push(c.get(rs)));break;case"delete":C(s)||(p.push(c.get(ds)),P(s)&&p.push(c.get(rs)));break;case"set":P(s)&&p.push(c.get(ds))}if(1===p.length)p[0]&&qs(p[0]);else{const s=[];for(const a of p)a&&s.push(...a);qs(as(s))}}function qs(s,a){for(const t of C(s)?s:[...s])(t!==os||t.allowRecurse)&&(t.scheduler?t.scheduler():t.run())}const xs=o("__proto__,__v_isRef,__isVue"),ws=new Set(Object.getOwnPropertyNames(Symbol).map((s=>Symbol[s])).filter(D)),_s=Ps(),ks=Ps(!1,!0),Ss=Ps(!0),zs=Cs();function Cs(){const s={};return["includes","indexOf","lastIndexOf"].forEach((a=>{s[a]=function(...s){const t=ga(this);for(let a=0,e=this.length;a{s[a]=function(...s){js();const t=ga(this)[a].apply(this,s);return ms(),t}})),s}function Ps(s=!1,a=!1){return function(t,n,e){if("__v_isReactive"===n)return!s;if("__v_isReadonly"===n)return s;if("__v_raw"===n&&e===(s?a?ca:la:a?ea:na).get(t))return t;const l=C(t);if(!s&&l&&z(zs,n))return Reflect.get(zs,n,e);const c=Reflect.get(t,n,e);if(D(n)?ws.has(n):xs(n))return c;if(s||vs(t,0,n),a)return c;if(fa(c)){return!l||!L(n)?c.value:c}return A(c)?s?da(c):oa(c):c}}function Os(s=!1){return function(a,t,n,e){let l=a[t];if(!s&&(n=ga(n),l=ga(l),!C(a)&&fa(l)&&!fa(n)))return l.value=n,!0;const c=C(a)&&L(t)?Number(t)!0,deleteProperty:(s,a)=>!0},Ds=_({},Es,{get:ks,set:Os(!0)}),As=s=>A(s)?oa(s):s,Ts=s=>A(s)?da(s):s,Ns=s=>s,Fs=s=>Reflect.getPrototypeOf(s);function Rs(s,a,t=!1,n=!1){const e=ga(s=s.__v_raw),l=ga(a);a!==l&&!t&&vs(e,0,a),!t&&vs(e,0,l);const{has:c}=Fs(e),p=n?Ns:t?Ts:As;return c.call(e,a)?p(s.get(a)):c.call(e,l)?p(s.get(l)):void(s!==e&&s.get(a))}function Ls(s,a=!1){const t=this.__v_raw,n=ga(t),e=ga(s);return s!==e&&!a&&vs(n,0,s),!a&&vs(n,0,e),s===e?t.has(s):t.has(s)||t.has(e)}function Bs(s,a=!1){return s=s.__v_raw,!a&&vs(ga(s),0,ds),Reflect.get(s,"size",s)}function Ms(s){s=ga(s);const a=ga(this);return Fs(a).has.call(a,s)||(a.add(s),ys(a,"add",s,s)),this}function $s(s,a){a=ga(a);const t=ga(this),{has:n,get:e}=Fs(t);let l=n.call(t,s);l||(s=ga(s),l=n.call(t,s));const c=e.call(t,s);return t.set(s,a),l?K(a,c)&&ys(t,"set",s,a):ys(t,"add",s,a),this}function Us(s){const a=ga(this),{has:t,get:n}=Fs(a);let e=t.call(a,s);e||(s=ga(s),e=t.call(a,s)),n&&n.call(a,s);const l=a.delete(s);return e&&ys(a,"delete",s,void 0),l}function Vs(){const s=ga(this),a=0!==s.size,t=s.clear();return a&&ys(s,"clear",void 0,void 0),t}function Hs(s,a){return function(t,n){const e=this,l=e.__v_raw,c=ga(l),p=a?Ns:s?Ts:As;return!s&&vs(c,0,ds),l.forEach(((s,a)=>t.call(n,p(s),p(a),e)))}}function Ws(s,a,t){return function(...n){const e=this.__v_raw,l=ga(e),c=P(l),p="entries"===s||s===Symbol.iterator&&c,o="keys"===s&&c,d=e[s](...n),r=t?Ns:a?Ts:As;return!a&&vs(l,0,o?rs:ds),{next(){const{value:s,done:a}=d.next();return a?{value:s,done:a}:{value:p?[r(s[0]),r(s[1])]:r(s),done:a}},[Symbol.iterator](){return this}}}}function Gs(s){return function(...a){return"delete"!==s&&this}}function Ks(){const s={get(s){return Rs(this,s)},get size(){return Bs(this)},has:Ls,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!1)},a={get(s){return Rs(this,s,!1,!0)},get size(){return Bs(this)},has:Ls,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!0)},t={get(s){return Rs(this,s,!0)},get size(){return Bs(this,!0)},has(s){return Ls.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!1)},n={get(s){return Rs(this,s,!0,!0)},get size(){return Bs(this,!0)},has(s){return Ls.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((e=>{s[e]=Ws(e,!1,!1),t[e]=Ws(e,!0,!1),a[e]=Ws(e,!1,!0),n[e]=Ws(e,!0,!0)})),[s,t,a,n]}const[Js,Ys,Xs,Qs]=Ks();function Zs(s,a){const t=a?s?Qs:Xs:s?Ys:Js;return(a,n,e)=>"__v_isReactive"===n?!s:"__v_isReadonly"===n?s:"__v_raw"===n?a:Reflect.get(z(t,n)&&n in a?t:a,n,e)}const sa={get:Zs(!1,!1)},aa={get:Zs(!1,!0)},ta={get:Zs(!0,!1)},na=new WeakMap,ea=new WeakMap,la=new WeakMap,ca=new WeakMap;function pa(s){return s.__v_skip||!Object.isExtensible(s)?0:function(s){switch(s){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((s=>F(s).slice(8,-1))(s))}function oa(s){return s&&s.__v_isReadonly?s:ra(s,!1,Es,sa,na)}function da(s){return ra(s,!0,Is,ta,la)}function ra(s,a,t,n,e){if(!A(s))return s;if(s.__v_raw&&(!a||!s.__v_isReactive))return s;const l=e.get(s);if(l)return l;const c=pa(s);if(0===c)return s;const p=new Proxy(s,2===c?n:t);return e.set(s,p),p}function ia(s){return ha(s)?ia(s.__v_raw):!(!s||!s.__v_isReactive)}function ha(s){return!(!s||!s.__v_isReadonly)}function ua(s){return ia(s)||ha(s)}function ga(s){const a=s&&s.__v_raw;return a?ga(a):s}function ja(s){return Y(s,"__v_skip",!0),s}function ma(s){bs()&&((s=ga(s)).dep||(s.dep=as()),fs(s.dep))}function va(s,a){(s=ga(s)).dep&&qs(s.dep)}const ba=s=>A(s)?oa(s):s;function fa(s){return Boolean(s&&!0===s.__v_isRef)}class ya{constructor(s,a=!1){this._shallow=a,this.dep=void 0,this.__v_isRef=!0,this._rawValue=a?s:ga(s),this._value=a?s:ba(s)}get value(){return ma(this),this._value}set value(s){s=this._shallow?s:ga(s),K(s,this._rawValue)&&(this._rawValue=s,this._value=this._shallow?s:ba(s),va(this))}}function qa(s,a=!1){return fa(s)?s:new ya(s,a)}function xa(s){return fa(s)?s.value:s}const wa={get:(s,a,t)=>xa(Reflect.get(s,a,t)),set:(s,a,t,n)=>{const e=s[a];return fa(e)&&!fa(t)?(e.value=t,!0):Reflect.set(s,a,t,n)}};function _a(s){return ia(s)?s:new Proxy(s,wa)}class ka{constructor(s,a,t){this._setter=a,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new is(s,(()=>{this._dirty||(this._dirty=!0,va(this))})),this.__v_isReadonly=t}get value(){const s=ga(this);return ma(s),s._dirty&&(s._dirty=!1,s._value=s.effect.run()),s._value}set value(s){this._setter(s)}}function Sa(s,a){let t,n;E(s)?(t=s,n=f):(t=s.get,n=s.set);return new ka(t,n,E(s)||!s.set)}Promise.resolve();function za(s,a,...t){const n=s.vnode.props||v;let e=t;const l=a.startsWith("update:"),c=l&&a.slice(7);if(c&&c in n){const s=`${"modelValue"===c?"model":c}Modifiers`,{number:a,trim:l}=n[s]||v;l?e=t.map((s=>s.trim())):a&&(e=t.map(X))}let p,o=n[p=G(a)]||n[p=G(U(a))];!o&&l&&(o=n[p=G(H(a))]),o&&Gn(o,s,6,e);const d=n[p+"Once"];if(d){if(s.emitted){if(s.emitted[p])return}else s.emitted={};s.emitted[p]=!0,Gn(d,s,6,e)}}function Ca(s,a,t=!1){const n=a.emitsCache,e=n.get(s);if(void 0!==e)return e;const l=s.emits;let c={},p=!1;if(!E(s)){const n=s=>{const t=Ca(s,a,!0);t&&(p=!0,_(c,t))};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}return l||p?(C(l)?l.forEach((s=>c[s]=null)):_(c,l),n.set(s,c),c):(n.set(s,null),null)}function Pa(s,a){return!(!s||!x(a))&&(a=a.slice(2).replace(/Once$/,""),z(s,a[0].toLowerCase()+a.slice(1))||z(s,H(a))||z(s,a))}let Oa=null,Ea=null;function Ia(s){const a=Oa;return Oa=s,Ea=s&&s.type.__scopeId||null,a}function Da(s,a=Oa,t){if(!a)return s;if(s._n)return s;const n=(...t)=>{n._d&&dn(-1);const e=Ia(a),l=s(...t);return Ia(e),n._d&&dn(1),l};return n._n=!0,n._c=!0,n._d=!0,n}function Aa(s){const{type:a,vnode:t,proxy:n,withProxy:e,props:l,propsOptions:[c],slots:p,attrs:o,emit:d,render:r,renderCache:i,data:h,setupState:u,ctx:g,inheritAttrs:j}=s;let m;const v=Ia(s);try{let s;if(4&t.shapeFlag){const a=e||n;m=kn(r.call(a,a,i,l,u,h,g)),s=o}else{const t=a;0,m=kn(t.length>1?t(l,{attrs:o,slots:p,emit:d}):t(l,null)),s=a.props?o:Ta(o)}let v=m;if(s&&!1!==j){const a=Object.keys(s),{shapeFlag:t}=v;a.length&&(1&t||6&t)&&(c&&a.some(w)&&(s=Na(s,c)),v=qn(v,s))}0,t.dirs&&(v.dirs=v.dirs?v.dirs.concat(t.dirs):t.dirs),t.transition&&(v.transition=t.transition),m=v}catch(b){ln.length=0,Kn(b,s,1),m=yn(nn)}return Ia(v),m}const Ta=s=>{let a;for(const t in s)("class"===t||"style"===t||x(t))&&((a||(a={}))[t]=s[t]);return a},Na=(s,a)=>{const t={};for(const n in s)w(n)&&n.slice(9)in a||(t[n]=s[n]);return t};function Fa(s,a,t){const n=Object.keys(a);if(n.length!==Object.keys(s).length)return!0;for(let e=0;e1)return t&&E(a)?a.call(n.proxy):a}}const Ba=[Function,Array],Ma={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Ba,onEnter:Ba,onAfterEnter:Ba,onEnterCancelled:Ba,onBeforeLeave:Ba,onLeave:Ba,onAfterLeave:Ba,onLeaveCancelled:Ba,onBeforeAppear:Ba,onAppear:Ba,onAfterAppear:Ba,onAppearCancelled:Ba},setup(s,{slots:a}){const t=Fn(),n=function(){const s={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return ot((()=>{s.isMounted=!0})),it((()=>{s.isUnmounting=!0})),s}();let e;return()=>{const l=a.default&&Ga(a.default(),!0);if(!l||!l.length)return;const c=ga(s),{mode:p}=c,o=l[0];if(n.isLeaving)return Va(o);const d=Ha(o);if(!d)return Va(o);const r=Ua(d,c,n,t);Wa(d,r);const i=t.subTree,h=i&&Ha(i);let u=!1;const{getTransitionKey:g}=d.type;if(g){const s=g();void 0===e?e=s:s!==e&&(e=s,u=!0)}if(h&&h.type!==nn&&(!jn(d,h)||u)){const s=Ua(h,c,n,t);if(Wa(h,s),"out-in"===p)return n.isLeaving=!0,s.afterLeave=()=>{n.isLeaving=!1,t.update()},Va(o);"in-out"===p&&d.type!==nn&&(s.delayLeave=(s,a,t)=>{$a(n,h)[String(h.key)]=h,s._leaveCb=()=>{a(),s._leaveCb=void 0,delete r.delayedLeave},r.delayedLeave=t})}return o}}};function $a(s,a){const{leavingVNodes:t}=s;let n=t.get(a.type);return n||(n=Object.create(null),t.set(a.type,n)),n}function Ua(s,a,t,n){const{appear:e,mode:l,persisted:c=!1,onBeforeEnter:p,onEnter:o,onAfterEnter:d,onEnterCancelled:r,onBeforeLeave:i,onLeave:h,onAfterLeave:u,onLeaveCancelled:g,onBeforeAppear:j,onAppear:m,onAfterAppear:v,onAppearCancelled:b}=a,f=String(s.key),y=$a(t,s),q=(s,a)=>{s&&Gn(s,n,9,a)},x={mode:l,persisted:c,beforeEnter(a){let n=p;if(!t.isMounted){if(!e)return;n=j||p}a._leaveCb&&a._leaveCb(!0);const l=y[f];l&&jn(s,l)&&l.el._leaveCb&&l.el._leaveCb(),q(n,[a])},enter(s){let a=o,n=d,l=r;if(!t.isMounted){if(!e)return;a=m||o,n=v||d,l=b||r}let c=!1;const p=s._enterCb=a=>{c||(c=!0,q(a?l:n,[s]),x.delayedLeave&&x.delayedLeave(),s._enterCb=void 0)};a?(a(s,p),a.length<=1&&p()):p()},leave(a,n){const e=String(s.key);if(a._enterCb&&a._enterCb(!0),t.isUnmounting)return n();q(i,[a]);let l=!1;const c=a._leaveCb=t=>{l||(l=!0,n(),q(t?g:u,[a]),a._leaveCb=void 0,y[e]===s&&delete y[e])};y[e]=s,h?(h(a,c),h.length<=1&&c()):c()},clone:s=>Ua(s,a,t,n)};return x}function Va(s){if(Ya(s))return(s=qn(s)).children=null,s}function Ha(s){return Ya(s)?s.children?s.children[0]:void 0:s}function Wa(s,a){6&s.shapeFlag&&s.component?Wa(s.component.subTree,a):128&s.shapeFlag?(s.ssContent.transition=a.clone(s.ssContent),s.ssFallback.transition=a.clone(s.ssFallback)):s.transition=a}function Ga(s,a=!1){let t=[],n=0;for(let e=0;e1)for(let e=0;e!!s.type.__asyncLoader,Ya=s=>s.type.__isKeepAlive,Xa={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(s,{slots:a}){const t=Fn(),n=t.ctx;if(!n.renderer)return a.default;const e=new Map,l=new Set;let c=null;const p=t.suspense,{renderer:{p:o,m:d,um:r,o:{createElement:i}}}=n,h=i("div");function u(s){nt(s),r(s,t,p)}function g(s){e.forEach(((a,t)=>{const n=Hn(a.type);!n||s&&s(n)||j(t)}))}function j(s){const a=e.get(s);c&&a.type===c.type?c&&nt(c):u(a),e.delete(s),l.delete(s)}n.activate=(s,a,t,n,e)=>{const l=s.component;d(s,a,t,0,p),o(l.vnode,s,a,t,l,p,n,s.slotScopeIds,e),Wt((()=>{l.isDeactivated=!1,l.a&&J(l.a);const a=s.props&&s.props.onVnodeMounted;a&&Jt(a,l.parent,s)}),p)},n.deactivate=s=>{const a=s.component;d(s,h,null,1,p),Wt((()=>{a.da&&J(a.da);const t=s.props&&s.props.onVnodeUnmounted;t&&Jt(t,a.parent,s),a.isDeactivated=!0}),p)},ve((()=>[s.include,s.exclude]),(([s,a])=>{s&&g((a=>Qa(s,a))),a&&g((s=>!Qa(a,s)))}),{flush:"post",deep:!0});let m=null;const v=()=>{null!=m&&e.set(m,et(t.subTree))};return ot(v),rt(v),it((()=>{e.forEach((s=>{const{subTree:a,suspense:n}=t,e=et(a);if(s.type!==e.type)u(s);else{nt(e);const s=e.component.da;s&&Wt(s,n)}}))})),()=>{if(m=null,!a.default)return null;const t=a.default(),n=t[0];if(t.length>1)return c=null,t;if(!(gn(n)&&(4&n.shapeFlag||128&n.shapeFlag)))return c=null,n;let p=et(n);const o=p.type,d=Hn(Ja(p)?p.type.__asyncResolved||{}:o),{include:r,exclude:i,max:h}=s;if(r&&(!d||!Qa(r,d))||i&&d&&Qa(i,d))return c=p,n;const u=null==p.key?o:p.key,g=e.get(u);return p.el&&(p=qn(p),128&n.shapeFlag&&(n.ssContent=p)),m=u,g?(p.el=g.el,p.component=g.component,p.transition&&Wa(p,p.transition),p.shapeFlag|=512,l.delete(u),l.add(u)):(l.add(u),h&&l.size>parseInt(h,10)&&j(l.values().next().value)),p.shapeFlag|=256,c=p,n}}};function Qa(s,a){return C(s)?s.some((s=>Qa(s,a))):I(s)?s.split(",").indexOf(a)>-1:!!s.test&&s.test(a)}function Za(s,a){at(s,"a",a)}function st(s,a){at(s,"da",a)}function at(s,a,t=Nn){const n=s.__wdc||(s.__wdc=()=>{let a=t;for(;a;){if(a.isDeactivated)return;a=a.parent}s()});if(lt(a,n,t),t){let s=t.parent;for(;s&&s.parent;)Ya(s.parent.vnode)&&tt(n,a,t,s),s=s.parent}}function tt(s,a,t,n){const e=lt(a,s,n,!0);ht((()=>{k(n[a],e)}),t)}function nt(s){let a=s.shapeFlag;256&a&&(a-=256),512&a&&(a-=512),s.shapeFlag=a}function et(s){return 128&s.shapeFlag?s.ssContent:s}function lt(s,a,t=Nn,n=!1){if(t){const e=t[s]||(t[s]=[]),l=a.__weh||(a.__weh=(...n)=>{if(t.isUnmounted)return;js(),Rn(t);const e=Gn(a,t,s,n);return Ln(),ms(),e});return n?e.unshift(l):e.push(l),l}}const ct=s=>(a,t=Nn)=>(!Mn||"sp"===s)&<(s,a,t),pt=ct("bm"),ot=ct("m"),dt=ct("bu"),rt=ct("u"),it=ct("bum"),ht=ct("um"),ut=ct("sp"),gt=ct("rtg"),jt=ct("rtc");function mt(s,a=Nn){lt("ec",s,a)}let vt=!0;function bt(s){const a=qt(s),t=s.proxy,n=s.ctx;vt=!1,a.beforeCreate&&ft(a.beforeCreate,s,"bc");const{data:e,computed:l,methods:c,watch:p,provide:o,inject:d,created:r,beforeMount:i,mounted:h,beforeUpdate:u,updated:g,activated:j,deactivated:m,beforeDestroy:v,beforeUnmount:b,destroyed:y,unmounted:q,render:x,renderTracked:w,renderTriggered:_,errorCaptured:k,serverPrefetch:S,expose:z,inheritAttrs:P,components:O,directives:I,filters:D}=a;if(d&&function(s,a,t=f,n=!1){C(s)&&(s=kt(s));for(const e in s){const t=s[e];let l;l=A(t)?"default"in t?La(t.from||e,t.default,!0):La(t.from||e):La(t),fa(l)&&n?Object.defineProperty(a,e,{enumerable:!0,configurable:!0,get:()=>l.value,set:s=>l.value=s}):a[e]=l}}(d,n,null,s.appContext.config.unwrapInjectedRef),c)for(const f in c){const s=c[f];E(s)&&(n[f]=s.bind(t))}if(e){const a=e.call(t,t);A(a)&&(s.data=oa(a))}if(vt=!0,l)for(const C in l){const s=l[C],a=Sa({get:E(s)?s.bind(t,t):E(s.get)?s.get.bind(t,t):f,set:!E(s)&&E(s.set)?s.set.bind(t):f});Object.defineProperty(n,C,{enumerable:!0,configurable:!0,get:()=>a.value,set:s=>a.value=s})}if(p)for(const f in p)yt(p[f],n,t,f);if(o){const s=E(o)?o.call(t):o;Reflect.ownKeys(s).forEach((a=>{Ra(a,s[a])}))}function T(s,a){C(a)?a.forEach((a=>s(a.bind(t)))):a&&s(a.bind(t))}if(r&&ft(r,s,"c"),T(pt,i),T(ot,h),T(dt,u),T(rt,g),T(Za,j),T(st,m),T(mt,k),T(jt,w),T(gt,_),T(it,b),T(ht,q),T(ut,S),C(z))if(z.length){const a=s.exposed||(s.exposed={});z.forEach((s=>{Object.defineProperty(a,s,{get:()=>t[s],set:a=>t[s]=a})}))}else s.exposed||(s.exposed={});x&&s.render===f&&(s.render=x),null!=P&&(s.inheritAttrs=P),O&&(s.components=O),I&&(s.directives=I)}function ft(s,a,t){Gn(C(s)?s.map((s=>s.bind(a.proxy))):s.bind(a.proxy),a,t)}function yt(s,a,t,n){const e=n.includes(".")?ye(t,n):()=>t[n];if(I(s)){const t=a[s];E(t)&&ve(e,t)}else if(E(s))ve(e,s.bind(t));else if(A(s))if(C(s))s.forEach((s=>yt(s,a,t,n)));else{const n=E(s.handler)?s.handler.bind(t):a[s.handler];E(n)&&ve(e,n,s)}}function qt(s){const a=s.type,{mixins:t,extends:n}=a,{mixins:e,optionsCache:l,config:{optionMergeStrategies:c}}=s.appContext,p=l.get(a);let o;return p?o=p:e.length||t||n?(o={},e.length&&e.forEach((s=>xt(o,s,c,!0))),xt(o,a,c)):o=a,l.set(a,o),o}function xt(s,a,t,n=!1){const{mixins:e,extends:l}=a;l&&xt(s,l,t,!0),e&&e.forEach((a=>xt(s,a,t,!0)));for(const c in a)if(n&&"expose"===c);else{const n=wt[c]||t&&t[c];s[c]=n?n(s[c],a[c]):a[c]}return s}const wt={data:_t,props:zt,emits:zt,methods:zt,computed:zt,beforeCreate:St,created:St,beforeMount:St,mounted:St,beforeUpdate:St,updated:St,beforeDestroy:St,destroyed:St,activated:St,deactivated:St,errorCaptured:St,serverPrefetch:St,components:zt,directives:zt,watch:function(s,a){if(!s)return a;if(!a)return s;const t=_(Object.create(null),s);for(const n in a)t[n]=St(s[n],a[n]);return t},provide:_t,inject:function(s,a){return zt(kt(s),kt(a))}};function _t(s,a){return a?s?function(){return _(E(s)?s.call(this,this):s,E(a)?a.call(this,this):a)}:a:s}function kt(s){if(C(s)){const a={};for(let t=0;t{o=!0;const[t,n]=Et(s,a,!0);_(c,t),n&&p.push(...n)};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}if(!l&&!o)return n.set(s,b),b;if(C(l))for(let r=0;r-1,t[1]=n<0||a-1||z(t,"default"))&&p.push(s)}}}const d=[c,p];return n.set(s,d),d}function It(s){return"$"!==s[0]}function Dt(s){const a=s&&s.toString().match(/^\s*function (\w+)/);return a?a[1]:null===s?"null":""}function At(s,a){return Dt(s)===Dt(a)}function Tt(s,a){return C(a)?a.findIndex((a=>At(a,s))):E(a)&&At(a,s)?0:-1}const Nt=s=>"_"===s[0]||"$stable"===s,Ft=s=>C(s)?s.map(kn):[kn(s)],Rt=(s,a,t)=>{const n=Da((s=>Ft(a(s))),t);return n._c=!1,n},Lt=(s,a,t)=>{const n=s._ctx;for(const e in s){if(Nt(e))continue;const t=s[e];if(E(t))a[e]=Rt(0,t,n);else if(null!=t){const s=Ft(t);a[e]=()=>s}}},Bt=(s,a)=>{const t=Ft(a);s.slots.default=()=>t};function Mt(s,a){if(null===Oa)return s;const t=Oa.proxy,n=s.dirs||(s.dirs=[]);for(let e=0;e(l.has(s)||(s&&E(s.install)?(l.add(s),s.install(p,...a)):E(s)&&(l.add(s),s(p,...a))),p),mixin:s=>(e.mixins.includes(s)||e.mixins.push(s),p),component:(s,a)=>a?(e.components[s]=a,p):e.components[s],directive:(s,a)=>a?(e.directives[s]=a,p):e.directives[s],mount(l,o,d){if(!c){const r=yn(t,n);return r.appContext=e,o&&a?a(r,l):s(r,l,d),c=!0,p._container=l,l.__vue_app__=p,r.component.proxy}},unmount(){c&&(s(null,p._container),delete p._container.__vue_app__)},provide:(s,a)=>(e.provides[s]=a,p)};return p}}const Wt=function(s,a){a&&a.pendingBranch?C(s)?a.effects.push(...s):a.effects.push(s):ie(s,ne,te,ee)};function Gt(s){return function(s,a){const{insert:t,remove:n,patchProp:e,createElement:l,createText:c,createComment:p,setText:o,setElementText:d,parentNode:r,nextSibling:i,setScopeId:h=f,cloneNode:u,insertStaticContent:g}=s,j=(s,a,t,n=null,e=null,l=null,c=!1,p=null,o=!!a.dynamicChildren)=>{if(s===a)return;s&&!jn(s,a)&&(n=as(s),G(s,e,l,!0),s=null),-2===a.patchFlag&&(o=!1,a.dynamicChildren=null);const{type:d,ref:r,shapeFlag:i}=a;switch(d){case tn:m(s,a,t,n);break;case nn:y(s,a,t,n);break;case en:null==s&&q(a,t,n,c);break;case an:D(s,a,t,n,e,l,c,p,o);break;default:1&i?k(s,a,t,n,e,l,c,p,o):6&i?A(s,a,t,n,e,l,c,p,o):(64&i||128&i)&&d.process(s,a,t,n,e,l,c,p,o,ns)}null!=r&&e&&Kt(r,s&&s.ref,l,a||s,!a)},m=(s,a,n,e)=>{if(null==s)t(a.el=c(a.children),n,e);else{const t=a.el=s.el;a.children!==s.children&&o(t,a.children)}},y=(s,a,n,e)=>{null==s?t(a.el=p(a.children||""),n,e):a.el=s.el},q=(s,a,t,n)=>{[s.el,s.anchor]=g(s.children,a,t,n)},x=({el:s,anchor:a},n,e)=>{let l;for(;s&&s!==a;)l=i(s),t(s,n,e),s=l;t(a,n,e)},w=({el:s,anchor:a})=>{let t;for(;s&&s!==a;)t=i(s),n(s),s=t;n(a)},k=(s,a,t,n,e,l,c,p,o)=>{c=c||"svg"===a.type,null==s?S(a,t,n,e,l,c,p,o):O(s,a,e,l,c,p,o)},S=(s,a,n,c,p,o,r,i)=>{let h,g;const{type:j,props:m,shapeFlag:v,transition:b,patchFlag:f,dirs:y}=s;if(s.el&&void 0!==u&&-1===f)h=s.el=u(s.el);else{if(h=s.el=l(s.type,o,m&&m.is,m),8&v?d(h,s.children):16&v&&P(s.children,h,null,c,p,o&&"foreignObject"!==j,r,i),y&&$t(s,null,c,"created"),m){for(const a in m)"value"===a||B(a)||e(h,a,null,m[a],o,s.children,c,p,Z);"value"in m&&e(h,"value",null,m.value),(g=m.onVnodeBeforeMount)&&Jt(g,c,s)}C(h,s,s.scopeId,r,c)}y&&$t(s,null,c,"beforeMount");const q=(!p||p&&!p.pendingBranch)&&b&&!b.persisted;q&&b.beforeEnter(h),t(h,a,n),((g=m&&m.onVnodeMounted)||q||y)&&Wt((()=>{g&&Jt(g,c,s),q&&b.enter(h),y&&$t(s,null,c,"mounted")}),p)},C=(s,a,t,n,e)=>{if(t&&h(s,t),n)for(let l=0;l{for(let d=o;d{const o=a.el=s.el;let{patchFlag:r,dynamicChildren:i,dirs:h}=a;r|=16&s.patchFlag;const u=s.props||v,g=a.props||v;let j;if((j=g.onVnodeBeforeUpdate)&&Jt(j,t,a,s),h&&$t(a,s,t,"beforeUpdate"),r>0){if(16&r)I(o,a,u,g,t,n,l);else if(2&r&&u.class!==g.class&&e(o,"class",null,g.class,l),4&r&&e(o,"style",u.style,g.style,l),8&r){const c=a.dynamicProps;for(let a=0;a{j&&Jt(j,t,a,s),h&&$t(a,s,t,"updated")}),n)},E=(s,a,t,n,e,l,c)=>{for(let p=0;p{if(t!==n){for(const o in n){if(B(o))continue;const d=n[o],r=t[o];d!==r&&"value"!==o&&e(s,o,r,d,p,a.children,l,c,Z)}if(t!==v)for(const o in t)B(o)||o in n||e(s,o,t[o],null,p,a.children,l,c,Z);"value"in n&&e(s,"value",t.value,n.value)}},D=(s,a,n,e,l,p,o,d,r)=>{const i=a.el=s?s.el:c(""),h=a.anchor=s?s.anchor:c("");let{patchFlag:u,dynamicChildren:g,slotScopeIds:j}=a;j&&(d=d?d.concat(j):j),null==s?(t(i,n,e),t(h,n,e),P(a.children,n,h,l,p,o,d,r)):u>0&&64&u&&g&&s.dynamicChildren?(E(s.dynamicChildren,g,n,l,p,o,d),(null!=a.key||l&&a===l.subTree)&&Yt(s,a,!0)):M(s,a,n,h,l,p,o,d,r)},A=(s,a,t,n,e,l,c,p,o)=>{a.slotScopeIds=p,null==s?512&a.shapeFlag?e.ctx.activate(a,t,n,c,o):N(a,t,n,e,l,c,o):F(s,a,o)},N=(s,a,t,n,e,l,c)=>{const p=s.component=function(s,a,t){const n=s.type,e=(a?a.appContext:s.appContext)||An,l={uid:Tn++,vnode:s,type:n,parent:a,appContext:e,root:null,next:null,subTree:null,update:null,scope:new ss(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:a?a.provides:Object.create(e.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Et(n,e),emitsOptions:Ca(n,e),emit:null,emitted:null,propsDefaults:v,inheritAttrs:n.inheritAttrs,ctx:v,data:v,props:v,attrs:v,slots:v,refs:v,setupState:v,setupContext:null,suspense:t,suspenseId:t?t.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};l.ctx={_:l},l.root=a?a.root:l,l.emit=za.bind(null,l),s.ce&&s.ce(l);return l}(s,n,e);if(Ya(s)&&(p.ctx.renderer=ns),function(s,a=!1){Mn=a;const{props:t,children:n}=s.vnode,e=Bn(s);Ct(s,t,e,a),((s,a)=>{if(32&s.vnode.shapeFlag){const t=a._;t?(s.slots=ga(a),Y(a,"_",t)):Lt(a,s.slots={})}else s.slots={},a&&Bt(s,a);Y(s.slots,mn,1)})(s,n);const l=e?function(s,a){const t=s.type;s.accessCache=Object.create(null),s.proxy=ja(new Proxy(s.ctx,Dn));const{setup:n}=t;if(n){const t=s.setupContext=n.length>1?function(s){const a=a=>{s.exposed=a||{}};let t;return{get attrs(){return t||(t=function(s){return new Proxy(s.attrs,{get:(a,t)=>(vs(s,0,"$attrs"),a[t])})}(s))},slots:s.slots,emit:s.emit,expose:a}}(s):null;Rn(s),js();const e=Wn(n,s,0,[s.props,t]);if(ms(),Ln(),T(e)){if(e.then(Ln,Ln),a)return e.then((a=>{$n(s,a)})).catch((a=>{Kn(a,s,0)}));s.asyncDep=e}else $n(s,e)}else Un(s)}(s,a):void 0;Mn=!1}(p),p.asyncDep){if(e&&e.registerDep(p,R),!s.el){const s=p.subTree=yn(nn);y(null,s,a,t)}}else R(p,s,a,t,e,l,c)},F=(s,a,t)=>{const n=a.component=s.component;if(function(s,a,t){const{props:n,children:e,component:l}=s,{props:c,children:p,patchFlag:o}=a,d=l.emitsOptions;if(a.dirs||a.transition)return!0;if(!(t&&o>=0))return!(!e&&!p||p&&p.$stable)||n!==c&&(n?!c||Fa(n,c,d):!!c);if(1024&o)return!0;if(16&o)return n?Fa(n,c,d):!!c;if(8&o){const s=a.dynamicProps;for(let a=0;aQn&&Xn.splice(a,1)}(n.update),n.update()}else a.component=s.component,a.el=s.el,n.vnode=a},R=(s,a,t,n,e,l,c)=>{const p=new is((()=>{if(s.isMounted){let a,{next:t,bu:n,u:o,parent:d,vnode:i}=s,h=t;t?(t.el=i.el,L(s,t,c)):t=i,p.allowRecurse=!1,n&&J(n),(a=t.props&&t.props.onVnodeBeforeUpdate)&&Jt(a,d,t,i),p.allowRecurse=!0;const u=Aa(s),g=s.subTree;s.subTree=u,j(g,u,r(g.el),as(g),s,e,l),t.el=u.el,null===h&&function({vnode:s,parent:a},t){for(;a&&a.subTree===s;)(s=a.vnode).el=t,a=a.parent}(s,u.el),o&&Wt(o,e),(a=t.props&&t.props.onVnodeUpdated)&&Wt((()=>Jt(a,d,t,i)),e)}else{let c;const{el:o,props:d}=a,{bm:r,m:i,parent:h}=s;if(p.allowRecurse=!1,r&&J(r),(c=d&&d.onVnodeBeforeMount)&&Jt(c,h,a),p.allowRecurse=!0,o&&ls){const t=()=>{s.subTree=Aa(s),ls(o,s.subTree,s,e,null)};Ja(a)?a.type.__asyncLoader().then((()=>!s.isUnmounted&&t())):t()}else{const c=s.subTree=Aa(s);j(null,c,t,n,s,e,l),a.el=c.el}if(i&&Wt(i,e),c=d&&d.onVnodeMounted){const s=a;Wt((()=>Jt(c,h,s)),e)}256&a.shapeFlag&&s.a&&Wt(s.a,e),s.isMounted=!0,a=t=n=null}}),(()=>de(s.update)),s.scope),o=s.update=p.run.bind(p);o.id=s.uid,p.allowRecurse=o.allowRecurse=!0,o()},L=(s,a,t)=>{a.component=s;const n=s.vnode.props;s.vnode=a,s.next=null,function(s,a,t,n){const{props:e,attrs:l,vnode:{patchFlag:c}}=s,p=ga(e),[o]=s.propsOptions;let d=!1;if(!(n||c>0)||16&c){let n;Pt(s,a,e,l)&&(d=!0);for(const l in p)a&&(z(a,l)||(n=H(l))!==l&&z(a,n))||(o?!t||void 0===t[l]&&void 0===t[n]||(e[l]=Ot(o,p,l,void 0,s,!0)):delete e[l]);if(l!==p)for(const s in l)a&&z(a,s)||(delete l[s],d=!0)}else if(8&c){const t=s.vnode.dynamicProps;for(let n=0;n{const{vnode:n,slots:e}=s;let l=!0,c=v;if(32&n.shapeFlag){const s=a._;s?t&&1===s?l=!1:(_(e,a),t||1!==s||delete e._):(l=!a.$stable,Lt(a,e)),c=a}else a&&(Bt(s,a),c={default:1});if(l)for(const p in e)Nt(p)||p in c||delete e[p]})(s,a.children,t),js(),he(void 0,s.update),ms()},M=(s,a,t,n,e,l,c,p,o=!1)=>{const r=s&&s.children,i=s?s.shapeFlag:0,h=a.children,{patchFlag:u,shapeFlag:g}=a;if(u>0){if(128&u)return void V(r,h,t,n,e,l,c,p,o);if(256&u)return void $(r,h,t,n,e,l,c,p,o)}8&g?(16&i&&Z(r,e,l),h!==r&&d(t,h)):16&i?16&g?V(r,h,t,n,e,l,c,p,o):Z(r,e,l,!0):(8&i&&d(t,""),16&g&&P(h,t,n,e,l,c,p,o))},$=(s,a,t,n,e,l,c,p,o)=>{a=a||b;const d=(s=s||b).length,r=a.length,i=Math.min(d,r);let h;for(h=0;hr?Z(s,e,l,!0,!1,i):P(a,t,n,e,l,c,p,o,i)},V=(s,a,t,n,e,l,c,p,o)=>{let d=0;const r=a.length;let i=s.length-1,h=r-1;for(;d<=i&&d<=h;){const n=s[d],r=a[d]=o?Sn(a[d]):kn(a[d]);if(!jn(n,r))break;j(n,r,t,null,e,l,c,p,o),d++}for(;d<=i&&d<=h;){const n=s[i],d=a[h]=o?Sn(a[h]):kn(a[h]);if(!jn(n,d))break;j(n,d,t,null,e,l,c,p,o),i--,h--}if(d>i){if(d<=h){const s=h+1,i=sh)for(;d<=i;)G(s[d],e,l,!0),d++;else{const u=d,g=d,m=new Map;for(d=g;d<=h;d++){const s=a[d]=o?Sn(a[d]):kn(a[d]);null!=s.key&&m.set(s.key,d)}let v,f=0;const y=h-g+1;let q=!1,x=0;const w=new Array(y);for(d=0;d=y){G(n,e,l,!0);continue}let r;if(null!=n.key)r=m.get(n.key);else for(v=g;v<=h;v++)if(0===w[v-g]&&jn(n,a[v])){r=v;break}void 0===r?G(n,e,l,!0):(w[r-g]=d+1,r>=x?x=r:q=!0,j(n,a[r],t,null,e,l,c,p,o),f++)}const _=q?function(s){const a=s.slice(),t=[0];let n,e,l,c,p;const o=s.length;for(n=0;n>1,s[t[p]]0&&(a[n]=t[l-1]),t[l]=n)}}l=t.length,c=t[l-1];for(;l-- >0;)t[l]=c,c=a[c];return t}(w):b;for(v=_.length-1,d=y-1;d>=0;d--){const s=g+d,i=a[s],h=s+1{const{el:c,type:p,transition:o,children:d,shapeFlag:r}=s;if(6&r)return void W(s.component.subTree,a,n,e);if(128&r)return void s.suspense.move(a,n,e);if(64&r)return void p.move(s,a,n,ns);if(p===an){t(c,a,n);for(let s=0;so.enter(c)),l);else{const{leave:s,delayLeave:e,afterLeave:l}=o,p=()=>t(c,a,n),d=()=>{s(c,(()=>{p(),l&&l()}))};e?e(c,p,d):d()}else t(c,a,n)},G=(s,a,t,n=!1,e=!1)=>{const{type:l,props:c,ref:p,children:o,dynamicChildren:d,shapeFlag:r,patchFlag:i,dirs:h}=s;if(null!=p&&Kt(p,null,t,s,!0),256&r)return void a.ctx.deactivate(s);const u=1&r&&h;let g;if((g=c&&c.onVnodeBeforeUnmount)&&Jt(g,a,s),6&r)Q(s.component,t,n);else{if(128&r)return void s.suspense.unmount(t,n);u&&$t(s,null,a,"beforeUnmount"),64&r?s.type.remove(s,a,t,e,ns,n):d&&(l!==an||i>0&&64&i)?Z(d,a,t,!1,!0):(l===an&&(128&i||256&i)||!e&&16&r)&&Z(o,a,t),n&&K(s)}((g=c&&c.onVnodeUnmounted)||u)&&Wt((()=>{g&&Jt(g,a,s),u&&$t(s,null,a,"unmounted")}),t)},K=s=>{const{type:a,el:t,anchor:e,transition:l}=s;if(a===an)return void X(t,e);if(a===en)return void w(s);const c=()=>{n(t),l&&!l.persisted&&l.afterLeave&&l.afterLeave()};if(1&s.shapeFlag&&l&&!l.persisted){const{leave:a,delayLeave:n}=l,e=()=>a(t,c);n?n(s.el,c,e):e()}else c()},X=(s,a)=>{let t;for(;s!==a;)t=i(s),n(s),s=t;n(a)},Q=(s,a,t)=>{const{bum:n,scope:e,update:l,subTree:c,um:p}=s;n&&J(n),e.stop(),l&&(l.active=!1,G(c,s,a,t)),p&&Wt(p,a),Wt((()=>{s.isUnmounted=!0}),a),a&&a.pendingBranch&&!a.isUnmounted&&s.asyncDep&&!s.asyncResolved&&s.suspenseId===a.pendingId&&(a.deps--,0===a.deps&&a.resolve())},Z=(s,a,t,n=!1,e=!1,l=0)=>{for(let c=l;c6&s.shapeFlag?as(s.component.subTree):128&s.shapeFlag?s.suspense.next():i(s.anchor||s.el),ts=(s,a,t)=>{null==s?a._vnode&&G(a._vnode,null,null,!0):j(a._vnode||null,s,a,null,null,null,t),ue(),a._vnode=s},ns={p:j,um:G,m:W,r:K,mt:N,mc:P,pc:M,pbc:E,n:as,o:s};let es,ls;a&&([es,ls]=a(ns));return{render:ts,hydrate:es,createApp:Ht(ts,es)}}(s)}function Kt(s,a,t,n,e=!1){if(C(s))return void s.forEach(((s,l)=>Kt(s,a&&(C(a)?a[l]:a),t,n,e)));if(Ja(n)&&!e)return;const l=4&n.shapeFlag?Vn(n.component)||n.component.proxy:n.el,c=e?null:l,{i:p,r:o}=s,d=a&&a.r,r=p.refs===v?p.refs={}:p.refs,i=p.setupState;if(null!=d&&d!==o&&(I(d)?(r[d]=null,z(i,d)&&(i[d]=null)):fa(d)&&(d.value=null)),I(o)){const s=()=>{r[o]=c,z(i,o)&&(i[o]=c)};c?(s.id=-1,Wt(s,t)):s()}else if(fa(o)){const s=()=>{o.value=c};c?(s.id=-1,Wt(s,t)):s()}else E(o)&&Wn(o,p,12,[c,r])}function Jt(s,a,t,n=null){Gn(s,a,7,[t,n])}function Yt(s,a,t=!1){const n=s.children,e=a.children;if(C(n)&&C(e))for(let l=0;l0?cn||b:null,ln.pop(),cn=ln[ln.length-1]||null,on>0&&cn&&cn.push(s),s}function hn(s,a,t,n,e,l){return rn(fn(s,a,t,n,e,l,!0))}function un(s,a,t,n,e){return rn(yn(s,a,t,n,e,!0))}function gn(s){return!!s&&!0===s.__v_isVNode}function jn(s,a){return s.type===a.type&&s.key===a.key}const mn="__vInternal",vn=({key:s})=>null!=s?s:null,bn=({ref:s})=>null!=s?I(s)||fa(s)||E(s)?{i:Oa,r:s}:s:null;function fn(s,a=null,t=null,n=0,e=null,l=(s===an?0:1),c=!1,p=!1){const o={__v_isVNode:!0,__v_skip:!0,type:s,props:a,key:a&&vn(a),ref:a&&bn(a),scopeId:Ea,slotScopeIds:null,children:t,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:n,dynamicProps:e,dynamicChildren:null,appContext:null};return p?(zn(o,t),128&l&&s.normalize(o)):t&&(o.shapeFlag|=I(t)?8:16),on>0&&!c&&cn&&(o.patchFlag>0||6&l)&&32!==o.patchFlag&&cn.push(o),o}const yn=function(s,a=null,t=null,n=0,e=null,l=!1){s&&s!==Qt||(s=nn);if(gn(s)){const n=qn(s,a,!0);return t&&zn(n,t),n}c=s,E(c)&&"__vccOpts"in c&&(s=s.__vccOpts);var c;if(a){a=function(s){return s?ua(s)||mn in s?_({},s):s:null}(a);let{class:s,style:t}=a;s&&!I(s)&&(a.class=g(s)),A(t)&&(ua(t)&&!C(t)&&(t=_({},t)),a.style=r(t))}const p=I(s)?1:(s=>s.__isSuspense)(s)?128:(s=>s.__isTeleport)(s)?64:A(s)?4:E(s)?2:0;return fn(s,a,t,n,e,p,l,!0)};function qn(s,a,t=!1){const{props:n,ref:e,patchFlag:l,children:c}=s,p=a?function(...s){const a={};for(let t=0;ta(s,t,void 0,l&&l[t])));else{const t=Object.keys(s);e=new Array(t.length);for(let n=0,c=t.length;n!gn(s)||s.type!==nn&&!(s.type===an&&!On(s.children))))?s:null}const En=s=>s?Bn(s)?Vn(s)||s.proxy:En(s.parent):null,In=_(Object.create(null),{$:s=>s,$el:s=>s.vnode.el,$data:s=>s.data,$props:s=>s.props,$attrs:s=>s.attrs,$slots:s=>s.slots,$refs:s=>s.refs,$parent:s=>En(s.parent),$root:s=>En(s.root),$emit:s=>s.emit,$options:s=>qt(s),$forceUpdate:s=>()=>de(s.update),$nextTick:s=>oe.bind(s.proxy),$watch:s=>fe.bind(s)}),Dn={get({_:s},a){const{ctx:t,setupState:n,data:e,props:l,accessCache:c,type:p,appContext:o}=s;let d;if("$"!==a[0]){const p=c[a];if(void 0!==p)switch(p){case 0:return n[a];case 1:return e[a];case 3:return t[a];case 2:return l[a]}else{if(n!==v&&z(n,a))return c[a]=0,n[a];if(e!==v&&z(e,a))return c[a]=1,e[a];if((d=s.propsOptions[0])&&z(d,a))return c[a]=2,l[a];if(t!==v&&z(t,a))return c[a]=3,t[a];vt&&(c[a]=4)}}const r=In[a];let i,h;return r?("$attrs"===a&&vs(s,0,a),r(s)):(i=p.__cssModules)&&(i=i[a])?i:t!==v&&z(t,a)?(c[a]=3,t[a]):(h=o.config.globalProperties,z(h,a)?h[a]:void 0)},set({_:s},a,t){const{data:n,setupState:e,ctx:l}=s;if(e!==v&&z(e,a))e[a]=t;else if(n!==v&&z(n,a))n[a]=t;else if(z(s.props,a))return!1;return("$"!==a[0]||!(a.slice(1)in s))&&(l[a]=t,!0)},has({_:{data:s,setupState:a,accessCache:t,ctx:n,appContext:e,propsOptions:l}},c){let p;return void 0!==t[c]||s!==v&&z(s,c)||a!==v&&z(a,c)||(p=l[0])&&z(p,c)||z(n,c)||z(In,c)||z(e.config.globalProperties,c)}},An=Ut();let Tn=0;let Nn=null;const Fn=()=>Nn||Oa,Rn=s=>{Nn=s,s.scope.on()},Ln=()=>{Nn&&Nn.scope.off(),Nn=null};function Bn(s){return 4&s.vnode.shapeFlag}let Mn=!1;function $n(s,a,t){E(a)?s.render=a:A(a)&&(s.setupState=_a(a)),Un(s)}function Un(s,a,t){const n=s.type;s.render||(s.render=n.render||f),Rn(s),js(),bt(s),ms(),Ln()}function Vn(s){if(s.exposed)return s.exposeProxy||(s.exposeProxy=new Proxy(_a(ja(s.exposed)),{get:(a,t)=>t in a?a[t]:t in In?In[t](s):void 0}))}function Hn(s){return E(s)&&s.displayName||s.name}function Wn(s,a,t,n){let e;try{e=n?s(...n):s()}catch(l){Kn(l,a,t)}return e}function Gn(s,a,t,n){if(E(s)){const e=Wn(s,a,t,n);return e&&T(e)&&e.catch((s=>{Kn(s,a,t)})),e}const e=[];for(let l=0;l>>1;ge(Xn[n])ge(s)-ge(a))),ee=0;eenull==s.id?1/0:s.id;function je(s){Yn=!1,Jn=!0,he(s),Xn.sort(((s,a)=>ge(s)-ge(a)));try{for(Qn=0;Qns.value,r=!!s._shallow):ia(s)?(o=()=>s,n=!0):C(s)?(i=!0,r=s.some(ia),o=()=>s.map((s=>fa(s)?s.value:ia(s)?qe(s):E(s)?Wn(s,p,2):void 0))):o=E(s)?a?()=>Wn(s,p,2):()=>{if(!p||!p.isUnmounted)return d&&d(),Gn(s,p,3,[h])}:f,a&&n){const s=o;o=()=>qe(s())}let h=s=>{d=m.onStop=()=>{Wn(s,p,4)}},u=i?[]:me;const g=()=>{if(m.active)if(a){const s=m.run();(n||r||(i?s.some(((s,a)=>K(s,u[a]))):K(s,u)))&&(d&&d(),Gn(a,p,3,[s,u===me?void 0:u,h]),u=s)}else m.run()};let j;g.allowRecurse=!!a,j="sync"===e?g:"post"===e?()=>Wt(g,p&&p.suspense):()=>{!p||p.isMounted?function(s){ie(s,se,Zn,ae)}(g):g()};const m=new is(o,j);return a?t?g():u=m.run():"post"===e?Wt(m.run.bind(m),p&&p.suspense):m.run(),()=>{m.stop(),p&&p.scope&&k(p.scope.effects,m)}}function fe(s,a,t){const n=this.proxy,e=I(s)?s.includes(".")?ye(n,s):()=>n[s]:s.bind(n,n);let l;E(a)?l=a:(l=a.handler,t=a);const c=Nn;Rn(this);const p=be(e,l.bind(n),t);return c?Rn(c):Ln(),p}function ye(s,a){const t=a.split(".");return()=>{let a=s;for(let s=0;s{qe(s,a)}));else if(R(s))for(const t in s)qe(s[t],a);return s}function xe(s,a,t){const n=arguments.length;return 2===n?A(a)&&!C(a)?gn(a)?yn(s,null,[a]):yn(s,a):yn(s,null,a):(n>3?t=Array.prototype.slice.call(arguments,2):3===n&&gn(t)&&(t=[t]),yn(s,a,t))}const we="3.2.1",_e="undefined"!=typeof document?document:null,ke=new Map,Se={insert:(s,a,t)=>{a.insertBefore(s,t||null)},remove:s=>{const a=s.parentNode;a&&a.removeChild(s)},createElement:(s,a,t,n)=>{const e=a?_e.createElementNS("http://www.w3.org/2000/svg",s):_e.createElement(s,t?{is:t}:void 0);return"select"===s&&n&&null!=n.multiple&&e.setAttribute("multiple",n.multiple),e},createText:s=>_e.createTextNode(s),createComment:s=>_e.createComment(s),setText:(s,a)=>{s.nodeValue=a},setElementText:(s,a)=>{s.textContent=a},parentNode:s=>s.parentNode,nextSibling:s=>s.nextSibling,querySelector:s=>_e.querySelector(s),setScopeId(s,a){s.setAttribute(a,"")},cloneNode(s){const a=s.cloneNode(!0);return"_value"in s&&(a._value=s._value),a},insertStaticContent(s,a,t,n){const e=t?t.previousSibling:a.lastChild;let l=ke.get(s);if(!l){const a=_e.createElement("template");if(a.innerHTML=n?`${s}`:s,l=a.content,n){const s=l.firstChild;for(;s.firstChild;)l.appendChild(s.firstChild);l.removeChild(s)}ke.set(s,l)}return a.insertBefore(l.cloneNode(!0),t),[e?e.nextSibling:a.firstChild,t?t.previousSibling:a.lastChild]}};const ze=/\s*!important$/;function Ce(s,a,t){if(C(t))t.forEach((t=>Ce(s,a,t)));else if(a.startsWith("--"))s.setProperty(a,t);else{const n=function(s,a){const t=Oe[a];if(t)return t;let n=U(a);if("filter"!==n&&n in s)return Oe[a]=n;n=W(n);for(let e=0;edocument.createEvent("Event").timeStamp&&(Ie=()=>performance.now());const s=navigator.userAgent.match(/firefox\/(\d+)/i);De=!!(s&&Number(s[1])<=53)}let Ae=0;const Te=Promise.resolve(),Ne=()=>{Ae=0};function Fe(s,a,t,n,e=null){const l=s._vei||(s._vei={}),c=l[a];if(n&&c)c.value=n;else{const[t,p]=function(s){let a;if(Re.test(s)){let t;for(a={};t=s.match(Re);)s=s.slice(0,s.length-t[0].length),a[t[0].toLowerCase()]=!0}return[H(s.slice(2)),a]}(a);if(n){!function(s,a,t,n){s.addEventListener(a,t,n)}(s,t,l[a]=function(s,a){const t=s=>{const n=s.timeStamp||Ie();(De||n>=t.attached-1)&&Gn(function(s,a){if(C(a)){const t=s.stopImmediatePropagation;return s.stopImmediatePropagation=()=>{t.call(s),s._stopped=!0},a.map((s=>a=>!a._stopped&&s(a)))}return a}(s,t.value),a,5,[s])};return t.value=s,t.attached=(()=>Ae||(Te.then(Ne),Ae=Ie()))(),t}(n,e),p)}else c&&(!function(s,a,t,n){s.removeEventListener(a,t,n)}(s,t,c,p),l[a]=void 0)}}const Re=/(?:Once|Passive|Capture)$/;const Le=/^on[a-z]/;const Be="transition",Me=(s,{slots:a})=>xe(Ma,function(s){const a={};for(const _ in s)_ in $e||(a[_]=s[_]);if(!1===s.css)return a;const{name:t="v",type:n,duration:e,enterFromClass:l=`${t}-enter-from`,enterActiveClass:c=`${t}-enter-active`,enterToClass:p=`${t}-enter-to`,appearFromClass:o=l,appearActiveClass:d=c,appearToClass:r=p,leaveFromClass:i=`${t}-leave-from`,leaveActiveClass:h=`${t}-leave-active`,leaveToClass:u=`${t}-leave-to`}=s,g=function(s){if(null==s)return null;if(A(s))return[He(s.enter),He(s.leave)];{const a=He(s);return[a,a]}}(e),j=g&&g[0],m=g&&g[1],{onBeforeEnter:v,onEnter:b,onEnterCancelled:f,onLeave:y,onLeaveCancelled:q,onBeforeAppear:x=v,onAppear:w=b,onAppearCancelled:k=f}=a,S=(s,a,t)=>{Ge(s,a?r:p),Ge(s,a?d:c),t&&t()},z=(s,a)=>{Ge(s,u),Ge(s,h),a&&a()},C=s=>(a,t)=>{const e=s?w:b,c=()=>S(a,s,t);Ue(e,[a,c]),Ke((()=>{Ge(a,s?o:l),We(a,s?r:p),Ve(e)||Ye(a,n,j,c)}))};return _(a,{onBeforeEnter(s){Ue(v,[s]),We(s,l),We(s,c)},onBeforeAppear(s){Ue(x,[s]),We(s,o),We(s,d)},onEnter:C(!1),onAppear:C(!0),onLeave(s,a){const t=()=>z(s,a);We(s,i),document.body.offsetHeight,We(s,h),Ke((()=>{Ge(s,i),We(s,u),Ve(y)||Ye(s,n,m,t)})),Ue(y,[s,t])},onEnterCancelled(s){S(s,!1),Ue(f,[s])},onAppearCancelled(s){S(s,!0),Ue(k,[s])},onLeaveCancelled(s){z(s),Ue(q,[s])}})}(s),a);Me.displayName="Transition";const $e={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Me.props=_({},Ma.props,$e);const Ue=(s,a=[])=>{C(s)?s.forEach((s=>s(...a))):s&&s(...a)},Ve=s=>!!s&&(C(s)?s.some((s=>s.length>1)):s.length>1);function He(s){return X(s)}function We(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.add(a))),(s._vtc||(s._vtc=new Set)).add(a)}function Ge(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.remove(a)));const{_vtc:t}=s;t&&(t.delete(a),t.size||(s._vtc=void 0))}function Ke(s){requestAnimationFrame((()=>{requestAnimationFrame(s)}))}let Je=0;function Ye(s,a,t,n){const e=s._endId=++Je,l=()=>{e===s._endId&&n()};if(t)return setTimeout(l,t);const{type:c,timeout:p,propCount:o}=function(s,a){const t=window.getComputedStyle(s),n=s=>(t[s]||"").split(", "),e=n("transitionDelay"),l=n("transitionDuration"),c=Xe(e,l),p=n("animationDelay"),o=n("animationDuration"),d=Xe(p,o);let r=null,i=0,h=0;a===Be?c>0&&(r=Be,i=c,h=l.length):"animation"===a?d>0&&(r="animation",i=d,h=o.length):(i=Math.max(c,d),r=i>0?c>d?Be:"animation":null,h=r?r===Be?l.length:o.length:0);const u=r===Be&&/\b(transform|all)(,|$)/.test(t.transitionProperty);return{type:r,timeout:i,propCount:h,hasTransform:u}}(s,a);if(!c)return n();const d=c+"end";let r=0;const i=()=>{s.removeEventListener(d,h),l()},h=a=>{a.target===s&&++r>=o&&i()};setTimeout((()=>{rQe(a)+Qe(s[t]))))}function Qe(s){return 1e3*Number(s.slice(0,-1).replace(",","."))}const Ze={beforeMount(s,{value:a},{transition:t}){s._vod="none"===s.style.display?"":s.style.display,t&&a?t.beforeEnter(s):sl(s,a)},mounted(s,{value:a},{transition:t}){t&&a&&t.enter(s)},updated(s,{value:a,oldValue:t},{transition:n}){!a!=!t&&(n?a?(n.beforeEnter(s),sl(s,!0),n.enter(s)):n.leave(s,(()=>{sl(s,!1)})):sl(s,a))},beforeUnmount(s,{value:a}){sl(s,a)}};function sl(s,a){s.style.display=a?s._vod:"none"}const al=_({patchProp:(s,a,t,n,e=!1,l,c,p,o)=>{"class"===a?function(s,a,t){const n=s._vtc;n&&(a=(a?[a,...n]:[...n]).join(" ")),null==a?s.removeAttribute("class"):t?s.setAttribute("class",a):s.className=a}(s,n,e):"style"===a?function(s,a,t){const n=s.style;if(t)if(I(t)){if(a!==t){const a=n.display;n.cssText=t,"_vod"in s&&(n.display=a)}}else{for(const s in t)Ce(n,s,t[s]);if(a&&!I(a))for(const s in a)null==t[s]&&Ce(n,s,"")}else s.removeAttribute("style")}(s,t,n):x(a)?w(a)||Fe(s,a,0,n,c):("."===a[0]?(a=a.slice(1),1):"^"===a[0]?(a=a.slice(1),0):function(s,a,t,n){if(n)return"innerHTML"===a||!!(a in s&&Le.test(a)&&E(t));if("spellcheck"===a||"draggable"===a)return!1;if("form"===a)return!1;if("list"===a&&"INPUT"===s.tagName)return!1;if("type"===a&&"TEXTAREA"===s.tagName)return!1;if(Le.test(a)&&I(t))return!1;return a in s}(s,a,n,e))?function(s,a,t,n,e,l,c){if("innerHTML"===a||"textContent"===a)return n&&c(n,e,l),void(s[a]=null==t?"":t);if("value"===a&&"PROGRESS"!==s.tagName){s._value=t;const n=null==t?"":t;return s.value!==n&&(s.value=n),void(null==t&&s.removeAttribute(a))}if(""===t||null==t){const n=typeof s[a];if(""===t&&"boolean"===n)return void(s[a]=!0);if(null==t&&"string"===n)return s[a]="",void s.removeAttribute(a);if("number"===n){try{s[a]=0}catch(p){}return void s.removeAttribute(a)}}try{s[a]=t}catch(o){}}(s,a,n,l,c,p,o):("true-value"===a?s._trueValue=n:"false-value"===a&&(s._falseValue=n),function(s,a,t,n,e){if(n&&a.startsWith("xlink:"))null==t?s.removeAttributeNS(Ee,a.slice(6,a.length)):s.setAttributeNS(Ee,a,t);else{const n=d(a);null==t||n&&!1===t?s.removeAttribute(a):s.setAttribute(a,n?"":t)}}(s,a,n,e))}},Se);let tl;const nl=(...s)=>{const a=(tl||(tl=Gt(al))).createApp(...s),{mount:t}=a;return a.mount=s=>{const n=function(s){if(I(s)){return document.querySelector(s)}return s}(s);if(!n)return;const e=a._component;E(e)||e.render||e.template||(e.template=n.innerHTML),n.innerHTML="";const l=t(n,!1,n instanceof SVGElement);return n instanceof Element&&(n.removeAttribute("v-cloak"),n.setAttribute("data-v-app","")),l},a};var el=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const ll=["href","innerHTML"],cl=["innerHTML"];var pl=el({name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const s=(this.item.title||this.item.name).split(" ");return`${s[0]} ${s.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(s,a,t,n,e,l){const c=Xt("router-link");return t.item.path?(pn(),un(c,{key:0,class:g({active:l.active}),to:l.path,innerHTML:l.itemName},null,8,["class","to","innerHTML"])):t.item.link?(pn(),hn("a",{key:1,href:t.item.link,innerHTML:l.itemName},null,8,ll)):(pn(),hn("a",{key:2,innerHTML:l.itemName},null,8,cl))}]]);const ol={name:"VanDocNav",components:{[pl.name]:pl},props:{lang:String,navConfig:Array},data:()=>({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:s}=window;this.top=Math.max(0,64-s)}}},dl={class:"van-doc-nav__title"};var rl=el(ol,[["render",function(s,a,t,n,e,l){const c=Xt("van-doc-nav-link");return pn(),hn("div",{class:"van-doc-nav",style:r(l.style)},[(pn(!0),hn(an,null,Cn(t.navConfig,((s,a)=>(pn(),hn("div",{class:"van-doc-nav__group",key:a},[fn("div",dl,j(s.title),1),s.items?(pn(!0),hn(an,{key:0},Cn(s.items,((s,a)=>(pn(),hn("div",{key:a,class:"van-doc-nav__item"},[yn(c,{item:s,base:l.base},null,8,["item","base"])])))),128)):_n("v-if",!0)])))),128))],4)}]]); -/*! @docsearch/js 3.0.0-alpha.40 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -function il(s){return(il="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function hl(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function ul(){return(ul=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t3)for(t=[t],l=3;l0?El(u.type,u.props,u.key,null,u.__v):u)){if(u.__=t,u.__b=t.__b+1,null===(h=v[r])||h&&u.key==h.key&&u.type===h.type)v[r]=void 0;else for(i=0;i3)for(t=[t],l=3;l=t.__.length&&t.__.push({}),t.__[s]}function ic(s,a,t){var n=rc(sc++,2);return n.t=s,n.__c||(n.__=[t?t(a):fc(void 0,a),function(s){var a=n.t(n.__[0],s);n.__[0]!==a&&(n.__=[a,n.__[1]],n.__c.setState({}))}],n.__c=ac),n.__}function hc(s,a){var t=rc(sc++,4);!yl.__s&&bc(t.__H,a)&&(t.__=s,t.__H=a,ac.__h.push(t))}function uc(s,a){var t=rc(sc++,7);return bc(t.__H,a)&&(t.__=s(),t.__H=a,t.__h=s),t.__}function gc(){ec.forEach((function(s){if(s.__P)try{s.__H.__h.forEach(mc),s.__H.__h.forEach(vc),s.__H.__h=[]}catch(a){s.__H.__h=[],yl.__e(a,s.__v)}})),ec=[]}yl.__b=function(s){ac=null,lc&&lc(s)},yl.__r=function(s){cc&&cc(s),sc=0;var a=(ac=s.__c).__H;a&&(a.__h.forEach(mc),a.__h.forEach(vc),a.__h=[])},yl.diffed=function(s){pc&&pc(s);var a=s.__c;a&&a.__H&&a.__H.__h.length&&(1!==ec.push(a)&&tc===yl.requestAnimationFrame||((tc=yl.requestAnimationFrame)||function(s){var a,t=function(){clearTimeout(n),jc&&cancelAnimationFrame(a),setTimeout(s)},n=setTimeout(t,100);jc&&(a=requestAnimationFrame(t))})(gc)),ac=void 0},yl.__c=function(s,a){a.some((function(s){try{s.__h.forEach(mc),s.__h=s.__h.filter((function(s){return!s.__||vc(s)}))}catch(t){a.some((function(s){s.__h&&(s.__h=[])})),a=[],yl.__e(t,s.__v)}})),oc&&oc(s,a)},yl.unmount=function(s){dc&&dc(s);var a=s.__c;if(a&&a.__H)try{a.__H.__.forEach(mc)}catch(t){yl.__e(t,a.__v)}};var jc="function"==typeof requestAnimationFrame;function mc(s){var a=ac;"function"==typeof s.__c&&s.__c(),ac=a}function vc(s){var a=ac;s.__c=s.__(),ac=a}function bc(s,a){return!s||s.length!==a.length||a.some((function(a,t){return a!==s[t]}))}function fc(s,a){return"function"==typeof a?a(s):a}function yc(s,a){for(var t in a)s[t]=a[t];return s}function qc(s,a){for(var t in s)if("__source"!==t&&!(t in a))return!0;for(var n in a)if("__source"!==n&&s[n]!==a[n])return!0;return!1}function xc(s){this.props=s}(xc.prototype=new Dl).isPureReactComponent=!0,xc.prototype.shouldComponentUpdate=function(s,a){return qc(this.props,s)||qc(this.state,a)};var wc=yl.__b;yl.__b=function(s){s.type&&s.type.__f&&s.ref&&(s.props.ref=s.ref,s.ref=null),wc&&wc(s)};var _c="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,kc=function(s,a){return null==s?null:Bl(Bl(s).map(a))},Sc={map:kc,forEach:kc,count:function(s){return s?Bl(s).length:0},only:function(s){var a=Bl(s);if(1!==a.length)throw"Children.only";return a[0]},toArray:Bl},zc=yl.__e;function Cc(){this.__u=0,this.t=null,this.__b=null}function Pc(s){var a=s.__.__c;return a&&a.__e&&a.__e(s)}function Oc(){this.u=null,this.o=null}yl.__e=function(s,a,t){if(s.then)for(var n,e=a;e=e.__;)if((n=e.__c)&&n.__c)return null==a.__e&&(a.__e=t.__e,a.__k=t.__k),n.__c(s,a);zc(s,a,t)},(Cc.prototype=new Dl).__c=function(s,a){var t=a.__c,n=this;null==n.t&&(n.t=[]),n.t.push(t);var e=Pc(n.__v),l=!1,c=function(){l||(l=!0,t.componentWillUnmount=t.__c,e?e(p):p())};t.__c=t.componentWillUnmount,t.componentWillUnmount=function(){c(),t.__c&&t.__c()};var p=function(){if(!--n.__u){if(n.state.__e){var s=n.state.__e;n.__v.__k[0]=function s(a,t,n){return a&&(a.__v=null,a.__k=a.__k&&a.__k.map((function(a){return s(a,t,n)})),a.__c&&a.__c.__P===t&&(a.__e&&n.insertBefore(a.__e,a.__d),a.__c.__e=!0,a.__c.__P=n)),a}(s,s.__c.__P,s.__c.__O)}var a;for(n.setState({__e:n.__b=null});a=n.t.pop();)a.forceUpdate()}},o=!0===a.__h;n.__u++||o||n.setState({__e:n.__b=n.__v.__k[0]}),s.then(c,c)},Cc.prototype.componentWillUnmount=function(){this.t=[]},Cc.prototype.render=function(s,a){if(this.__b){if(this.__v.__k){var t=document.createElement("div"),n=this.__v.__k[0].__c;this.__v.__k[0]=function s(a,t,n){return a&&(a.__c&&a.__c.__H&&(a.__c.__H.__.forEach((function(s){"function"==typeof s.__c&&s.__c()})),a.__c.__H=null),null!=(a=yc({},a)).__c&&(a.__c.__P===n&&(a.__c.__P=t),a.__c=null),a.__k=a.__k&&a.__k.map((function(a){return s(a,t,n)}))),a}(this.__b,t,n.__O=n.__P)}this.__b=null}var e=a.__e&&Ol(Il,null,s.fallback);return e&&(e.__h=null),[Ol(Il,null,a.__e?null:s.children),e]};var Ec=function(s,a,t){if(++t[1]===t[0]&&s.o.delete(a),s.props.revealOrder&&("t"!==s.props.revealOrder[0]||!s.o.size))for(t=s.u;t;){for(;t.length>3;)t.pop()();if(t[1]>>1,1),a.i.removeChild(s)}}),Xl(Ol(Ic,{context:a.context},s.__v),a.l)):a.l&&a.componentWillUnmount()}function Ac(s,a){return Ol(Dc,{__v:s,i:a})}(Oc.prototype=new Dl).__e=function(s){var a=this,t=Pc(a.__v),n=a.o.get(s);return n[0]++,function(e){var l=function(){a.props.revealOrder?(n.push(e),Ec(a,s,n)):e()};t?t(l):l()}},Oc.prototype.render=function(s){this.u=null,this.o=new Map;var a=Bl(s.children);s.revealOrder&&"b"===s.revealOrder[0]&&a.reverse();for(var t=a.length;t--;)this.o.set(a[t],this.u=[1,0,this.u]);return s.children},Oc.prototype.componentDidUpdate=Oc.prototype.componentDidMount=function(){var s=this;this.o.forEach((function(a,t){Ec(s,t,a)}))};var Tc="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,Nc=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Fc=function(s){return("undefined"!=typeof Symbol&&"symbol"==il(Symbol())?/fil|che|rad/i:/fil|che|ra/i).test(s)};function Rc(s,a,t){return null==a.__k&&(a.textContent=""),Xl(s,a),"function"==typeof t&&t(),s?s.__c:null}Dl.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(s){Object.defineProperty(Dl.prototype,s,{configurable:!0,get:function(){return this["UNSAFE_"+s]},set:function(a){Object.defineProperty(this,s,{configurable:!0,writable:!0,value:a})}})}));var Lc=yl.event;function Bc(){}function Mc(){return this.cancelBubble}function $c(){return this.defaultPrevented}yl.event=function(s){return Lc&&(s=Lc(s)),s.persist=Bc,s.isPropagationStopped=Mc,s.isDefaultPrevented=$c,s.nativeEvent=s};var Uc,Vc={configurable:!0,get:function(){return this.class}},Hc=yl.vnode;yl.vnode=function(s){var a=s.type,t=s.props,n=t;if("string"==typeof a){for(var e in n={},t){var l=t[e];"value"===e&&"defaultValue"in t&&null==l||("defaultValue"===e&&"value"in t&&null==t.value?e="value":"download"===e&&!0===l?l="":/ondoubleclick/i.test(e)?e="ondblclick":/^onchange(textarea|input)/i.test(e+a)&&!Fc(t.type)?e="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(e)?e=e.toLowerCase():Nc.test(e)?e=e.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===l&&(l=void 0),n[e]=l)}"select"==a&&n.multiple&&Array.isArray(n.value)&&(n.value=Bl(t.children).forEach((function(s){s.props.selected=-1!=n.value.indexOf(s.props.value)}))),"select"==a&&null!=n.defaultValue&&(n.value=Bl(t.children).forEach((function(s){s.props.selected=n.multiple?-1!=n.defaultValue.indexOf(s.props.value):n.defaultValue==s.props.value}))),s.props=n}a&&t.class!=t.className&&(Vc.enumerable="className"in t,null!=t.className&&(n.class=t.className),Object.defineProperty(n,"className",Vc)),s.$$typeof=Tc,Hc&&Hc(s)};var Wc=yl.__r;yl.__r=function(s){Wc&&Wc(s),Uc=s.__c};var Gc={ReactCurrentDispatcher:{current:{readContext:function(s){return Uc.__n[s.__c].props.value}}}};function Kc(s){return!!s&&s.$$typeof===Tc}"object"==("undefined"==typeof performance?"undefined":il(performance))&&"function"==typeof performance.now&&performance.now.bind(performance);var Jc={useState:function(s){return nc=1,ic(fc,s)},useReducer:ic,useEffect:function(s,a){var t=rc(sc++,3);!yl.__s&&bc(t.__H,a)&&(t.__=s,t.__H=a,ac.__H.__h.push(t))},useLayoutEffect:hc,useRef:function(s){return nc=5,uc((function(){return{current:s}}),[])},useImperativeHandle:function(s,a,t){nc=6,hc((function(){"function"==typeof s?s(a()):s&&(s.current=a())}),null==t?t:t.concat(s))},useMemo:uc,useCallback:function(s,a){return nc=8,uc((function(){return s}),a)},useContext:function(s){var a=ac.context[s.__c],t=rc(sc++,9);return t.__c=s,a?(null==t.__&&(t.__=!0,a.sub(ac)),a.props.value):s.__},useDebugValue:function(s,a){yl.useDebugValue&&yl.useDebugValue(a?a(s):s)},version:"16.8.0",Children:Sc,render:Rc,hydrate:function(s,a,t){return Ql(s,a),"function"==typeof t&&t(),s?s.__c:null},unmountComponentAtNode:function(s){return!!s.__k&&(Xl(null,s),!0)},createPortal:Ac,createElement:Ol,createContext:function(s,a){var t={__c:a="__cC"+_l++,__:s,Consumer:function(s,a){return s.children(a)},Provider:function(s){var t,n;return this.getChildContext||(t=[],(n={})[a]=this,this.getChildContext=function(){return n},this.shouldComponentUpdate=function(s){this.props.value!==s.value&&t.some(Nl)},this.sub=function(s){t.push(s);var a=s.componentWillUnmount;s.componentWillUnmount=function(){t.splice(t.indexOf(s),1),a&&a.call(s)}}),s.children}};return t.Provider.__=t.Consumer.contextType=t},createFactory:function(s){return Ol.bind(null,s)},cloneElement:function(s){return Kc(s)?Zl.apply(null,arguments):s},createRef:function(){return{current:null}},Fragment:Il,isValidElement:Kc,findDOMNode:function(s){return s&&(s.base||1===s.nodeType&&s)||null},Component:Dl,PureComponent:xc,memo:function(s,a){function t(s){var t=this.props.ref,n=t==s.ref;return!n&&t&&(t.call?t(null):t.current=null),a?!a(this.props,s)||!n:qc(this.props,s)}function n(a){return this.shouldComponentUpdate=t,Ol(s,a)}return n.displayName="Memo("+(s.displayName||s.name)+")",n.prototype.isReactComponent=!0,n.__f=!0,n},forwardRef:function(s){function a(a,t){var n=yc({},a);return delete n.ref,s(n,(t=a.ref||t)&&("object"!=il(t)||"current"in t)?t:null)}return a.$$typeof=_c,a.render=a,a.prototype.isReactComponent=a.__f=!0,a.displayName="ForwardRef("+(s.displayName||s.name)+")",a},unstable_batchedUpdates:function(s,a){return s(a)},StrictMode:Il,Suspense:Cc,SuspenseList:Oc,lazy:function(s){var a,t,n;function e(e){if(a||(a=s()).then((function(s){t=s.default||s}),(function(s){n=s})),n)throw n;if(!t)throw a;return Ol(t,e)}return e.displayName="Lazy",e.__f=!0,e},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Gc};function Yc(){return Jc.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},Jc.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function Xc(){return Jc.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},Jc.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Qc(){return(Qc=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["translations"]),l=n.buttonText,c=void 0===l?"Search":l,p=n.buttonAriaLabel,o=void 0===p?"Search":p,d=uc((function(){return"undefined"!=typeof navigator?/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl":null}),[]);return Jc.createElement("button",Qc({type:"button",className:"DocSearch DocSearch-Button","aria-label":o},e,{ref:a}),Jc.createElement("span",{className:"DocSearch-Button-Container"},Jc.createElement(Xc,null),Jc.createElement("span",{className:"DocSearch-Button-Placeholder"},c)),Jc.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&Jc.createElement(Jc.Fragment,null,Jc.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===d?Jc.createElement(Yc,null):d),Jc.createElement("span",{className:"DocSearch-Button-Key"},"K"))))})),sp=0;function ap(s){return 0===s.collections.length?0:s.collections.reduce((function(s,a){return s+a.items.length}),0)}function tp(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function np(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function ep(s){return s.reduce((function(s,a){return s.concat(a)}),[])}function lp(s,a,t,n){if(!t)return null;if(s<0&&(null===a||null!==n&&0===a))return t+s;var e=(null===a?-1:a)+s;return e<=-1||e>=t?null===n?null:0:e}var cp=function(){};function pp(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function op(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function dp(s){return(dp="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function rp(s){var a,t,n=(t=(a=s).collections.map((function(s){return s.items.length})).reduce((function(s,a,t){var n=(s[t-1]||0)+a;return s.push(n),s}),[]).reduce((function(s,t){return t<=a.activeItemId?s+1:s}),0),a.collections[t]);if(!n)return null;var e=n.items[function(s){for(var a=s.state,t=s.collection,n=!1,e=0,l=0;!1===n;){var c=a.collections[e];if(c===t){n=!0;break}l+=c.items.length,e++}return a.activeItemId-l}({state:s,collection:n})],l=n.source;return{item:e,itemInputValue:l.getItemInputValue({item:e,state:s}),itemUrl:l.getItemUrl({item:e,state:s}),source:l}}function ip(s,a){return s===a||s.contains(a)}function hp(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function up(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);ts.length)&&(a=s.length);for(var t=0,n=new Array(a);t=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["event","nextState","props","query","refresh","store"]);Ip&&e.environment.clearTimeout(Ip);var d,r=o.setCollections,i=o.setIsOpen,h=o.setQuery,u=o.setActiveItemId,g=o.setStatus;return h(l),u(e.defaultActiveItemId),l||!1!==e.openOnFocus?(g("loading"),Ip=e.environment.setTimeout((function(){g("stalled")}),e.stallThreshold),e.getSources(Op({query:l,refresh:c,state:p.getState()},o)).then((function(s){return g("loading"),Promise.all(s.map((function(s){return Promise.resolve(s.getItems(Op({query:l,refresh:c,state:p.getState()},o))).then((function(a){return function(s,a){return t=s,Boolean(null==t?void 0:t.execute)?kp(kp({},s),{},{requests:s.queries.map((function(t){return{query:t,sourceId:a,transformResponse:s.transformResponse}}))}):{items:s,sourceId:a};var t}(a,s.sourceId)}))}))).then(Cp).then((function(a){return function(s,a){return a.map((function(a){var t,n=s.filter((function(s){return s.sourceId===a.sourceId})),e=n.map((function(s){return s.items})),l=n[0].transformResponse,c=l?l({results:t=e.map((function(s){var a;return up(up({},s),{},{hits:null===(a=s.hits)||void 0===a?void 0:a.map((function(a){return up(up({},a),{},{__autocomplete_indexName:s.index,__autocomplete_queryID:s.queryID})}))})})),hits:t.map((function(s){return s.hits})).filter(Boolean),facetHits:t.map((function(s){var a;return null===(a=s.facetHits)||void 0===a?void 0:a.map((function(s){return{label:s.value,count:s.count,_highlightResult:{label:{value:s.highlighted}}}}))})).filter(Boolean)}):e;return Array.isArray(c),'The `getItems` function from source "'.concat(a.sourceId,'" must return an array of items but returned type ').concat(JSON.stringify(xp(c)),":\n\n").concat(JSON.stringify(c,null,2),".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),c.every(Boolean),'The `getItems` function from source "'.concat(a.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:a,items:c}}))}(a,s)})).then((function(s){var t;g("idle"),r(s);var d=e.shouldPanelOpen({state:p.getState()});i(null!==(t=n.isOpen)&&void 0!==t?t:e.openOnFocus&&!l&&d||d);var h=rp(p.getState());if(null!==p.getState().activeItemId&&h){var u=h.item,j=h.itemInputValue,m=h.itemUrl,v=h.source;v.onActive(Op({event:a,item:u,itemInputValue:j,itemUrl:m,refresh:c,source:v,state:p.getState()},o))}})).finally((function(){Ip&&e.environment.clearTimeout(Ip)}))}))):(g("idle"),r(p.getState().collections.map((function(s){return Op(Op({},s),{},{items:[]})}))),i(null!==(d=n.isOpen)&&void 0!==d?d:e.shouldPanelOpen({state:p.getState()})),Promise.resolve())}function Ap(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Tp(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}function Mp(s){var a=s.props,t=s.refresh,n=s.store,e=Bp(s,["props","refresh","store"]);return{getEnvironmentProps:function(s){var t=s.inputElement,e=s.formElement,l=s.panelElement;return Rp({onTouchStart:function(s){!1!==n.getState().isOpen&&s.target!==t&&!1===[e,l].some((function(t){return ip(t,s.target)||ip(t,a.environment.document.activeElement)}))&&n.dispatch("blur",null)},onTouchMove:function(s){!1!==n.getState().isOpen&&t===a.environment.document.activeElement&&s.target!==t&&t.blur()}},Bp(s,["inputElement","formElement","panelElement"]))},getRootProps:function(s){return Rp({role:"combobox","aria-expanded":n.getState().isOpen,"aria-haspopup":"listbox","aria-owns":n.getState().isOpen?"".concat(a.id,"-list"):void 0,"aria-labelledby":"".concat(a.id,"-label")},s)},getFormProps:function(s){return s.inputElement,Rp({action:"",noValidate:!0,role:"search",onSubmit:function(l){var c;l.preventDefault(),a.onSubmit(Rp({event:l,refresh:t,state:n.getState()},e)),n.dispatch("submit",null),null===(c=s.inputElement)||void 0===c||c.blur()},onReset:function(l){var c;l.preventDefault(),a.onReset(Rp({event:l,refresh:t,state:n.getState()},e)),n.dispatch("reset",null),null===(c=s.inputElement)||void 0===c||c.focus()}},Bp(s,["inputElement"]))},getLabelProps:function(s){return Rp({htmlFor:"".concat(a.id,"-input"),id:"".concat(a.id,"-label")},s)},getInputProps:function(s){function l(s){(a.openOnFocus||Boolean(n.getState().query))&&Dp(Rp({event:s,props:a,query:n.getState().completion||n.getState().query,refresh:t,store:n},e)),n.dispatch("focus",null)}var c="ontouchstart"in a.environment,p=s||{},o=(p.inputElement,p.maxLength),d=void 0===o?512:o,r=Bp(p,["inputElement","maxLength"]),i=rp(n.getState());return Rp({"aria-autocomplete":"both","aria-activedescendant":n.getState().isOpen&&null!==n.getState().activeItemId?"".concat(a.id,"-item-").concat(n.getState().activeItemId):void 0,"aria-controls":n.getState().isOpen?"".concat(a.id,"-list"):void 0,"aria-labelledby":"".concat(a.id,"-label"),value:n.getState().completion||n.getState().query,id:"".concat(a.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:null!=i&&i.itemUrl?"go":"search",spellCheck:"false",autoFocus:a.autoFocus,placeholder:a.placeholder,maxLength:d,type:"search",onChange:function(s){Dp(Rp({event:s,props:a,query:s.currentTarget.value.slice(0,d),refresh:t,store:n},e))},onKeyDown:function(s){!function(s){var a=s.event,t=s.props,n=s.refresh,e=s.store,l=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["event","props","refresh","store"]);if("ArrowUp"===a.key||"ArrowDown"===a.key){var c=function(){var s=t.environment.document.getElementById("".concat(t.id,"-item-").concat(e.getState().activeItemId));s&&(s.scrollIntoViewIfNeeded?s.scrollIntoViewIfNeeded(!1):s.scrollIntoView(!1))},p=function(){var s=rp(e.getState());if(null!==e.getState().activeItemId&&s){var t=s.item,c=s.itemInputValue,p=s.itemUrl,o=s.source;o.onActive(Tp({event:a,item:t,itemInputValue:c,itemUrl:p,refresh:n,source:o,state:e.getState()},l))}};a.preventDefault(),!1===e.getState().isOpen&&(t.openOnFocus||Boolean(e.getState().query))?Dp(Tp({event:a,props:t,query:e.getState().query,refresh:n,store:e},l)).then((function(){e.dispatch(a.key,{nextActiveItemId:t.defaultActiveItemId}),p(),setTimeout(c,0)})):(e.dispatch(a.key,{}),p(),c())}else if("Escape"===a.key)a.preventDefault(),e.dispatch(a.key,null);else if("Enter"===a.key){if(null===e.getState().activeItemId||e.getState().collections.every((function(s){return 0===s.items.length})))return;a.preventDefault();var o=rp(e.getState()),d=o.item,r=o.itemInputValue,i=o.itemUrl,h=o.source;if(a.metaKey||a.ctrlKey)void 0!==i&&(h.onSelect(Tp({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),t.navigator.navigateNewTab({itemUrl:i,item:d,state:e.getState()}));else if(a.shiftKey)void 0!==i&&(h.onSelect(Tp({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),t.navigator.navigateNewWindow({itemUrl:i,item:d,state:e.getState()}));else if(a.altKey);else{if(void 0!==i)return h.onSelect(Tp({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),void t.navigator.navigate({itemUrl:i,item:d,state:e.getState()});Dp(Tp({event:a,nextState:{isOpen:!1},props:t,query:r,refresh:n,store:e},l)).then((function(){h.onSelect(Tp({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l))}))}}}(Rp({event:s,props:a,refresh:t,store:n},e))},onFocus:l,onBlur:function(){c||n.dispatch("blur",null)},onClick:function(t){s.inputElement!==a.environment.document.activeElement||n.getState().isOpen||l(t)}},r)},getPanelProps:function(s){return Rp({onMouseDown:function(s){s.preventDefault()},onMouseLeave:function(){n.dispatch("mouseleave",null)}},s)},getListProps:function(s){return Rp({role:"listbox","aria-labelledby":"".concat(a.id,"-label"),id:"".concat(a.id,"-list")},s)},getItemProps:function(s){var l=s.item,c=s.source,p=Bp(s,["item","source"]);return Rp({id:"".concat(a.id,"-item-").concat(l.__autocomplete_id),role:"option","aria-selected":n.getState().activeItemId===l.__autocomplete_id,onMouseMove:function(s){if(l.__autocomplete_id!==n.getState().activeItemId){n.dispatch("mousemove",l.__autocomplete_id);var a=rp(n.getState());if(null!==n.getState().activeItemId&&a){var c=a.item,p=a.itemInputValue,o=a.itemUrl,d=a.source;d.onActive(Rp({event:s,item:c,itemInputValue:p,itemUrl:o,refresh:t,source:d,state:n.getState()},e))}}},onMouseDown:function(s){s.preventDefault()},onClick:function(s){var p=c.getItemInputValue({item:l,state:n.getState()}),o=c.getItemUrl({item:l,state:n.getState()});(o?Promise.resolve():Dp(Rp({event:s,nextState:{isOpen:!1},props:a,query:p,refresh:t,store:n},e))).then((function(){c.onSelect(Rp({event:s,item:l,itemInputValue:p,itemUrl:o,refresh:t,source:c,state:n.getState()},e))}))}},p)}}}function $p(s){var a,t=s.state;return!1===t.isOpen||null===t.activeItemId?null:(null===(a=rp(t))||void 0===a?void 0:a.itemInputValue)||null}function Up(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Vp(s){for(var a=1;a0}},a),{},{id:null!==(n=a.id)&&void 0!==n?n:"autocomplete-".concat(sp++),plugins:l,initialState:yp({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},a.initialState),onStateChange:function(s){var t;null===(t=a.onStateChange)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onStateChange)||void 0===t?void 0:t.call(a,s)}))},onSubmit:function(s){var t;null===(t=a.onSubmit)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onSubmit)||void 0===t?void 0:t.call(a,s)}))},onReset:function(s){var t;null===(t=a.onReset)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onReset)||void 0===t?void 0:t.call(a,s)}))},getSources:function(s){return Promise.all([].concat(function(s){return function(s){if(Array.isArray(s))return bp(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return bp(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?bp(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(l.map((function(s){return s.getSources}))),[a.getSources]).filter(Boolean).map((function(a){return function(s,a){var t=[];return Promise.resolve(s(a)).then((function(s){return Array.isArray(s),"The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(dp(s)),":\n\n").concat(JSON.stringify(s,null,2)),Promise.all(s.filter((function(s){return Boolean(s)})).map((function(s){if(s.sourceId,t.includes(s.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(s.sourceId)," is not unique."));t.push(s.sourceId);var a=function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t0&&Jc.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},Jc.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),Jc.createElement("ul",null,a.slice(0,3).reduce((function(a,t){return[].concat(function(s){return function(s){if(Array.isArray(s))return go(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return go(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?go(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(a),[Jc.createElement("li",{key:t},Jc.createElement("button",{className:"DocSearch-Prefill",key:t,onClick:function(){s.setQuery(t.toLowerCase()+" "),s.refresh(),s.inputRef.current.focus()}},t))])}),[]))),Jc.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",Jc.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(s.indexName,']+Missing+results+for+query+"').concat(s.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function mo(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function vo(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:fo(a,"_snippetResult.".concat(t,".value"))||fo(a,t)}}))}function qo(s,a){return function(s){if(Array.isArray(s))return s}(s)||function(s,a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s)){var t=[],n=!0,e=!1,l=void 0;try{for(var c,p=s[Symbol.iterator]();!(n=(c=p.next()).done)&&(t.push(c.value),!a||t.length!==a);n=!0);}catch(o){e=!0,l=o}finally{try{n||null==p.return||p.return()}finally{if(e)throw l}}return t}}(s,a)||function(s,a){if(s){if("string"==typeof s)return xo(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?xo(s,a):void 0}}(s,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function xo(s,a){(null==a||a>s.length)&&(a=s.length);for(var t=0,n=new Array(a);t|<\/mark>)/g,Oo=RegExp(Po.source);function Eo(s){var a,t,n,e,l,c=s;if(!c.__docsearch_parent&&!s._highlightResult)return s.hierarchy.lvl0;var p=((c.__docsearch_parent?null===(a=c.__docsearch_parent)||void 0===a||null===(t=a._highlightResult)||void 0===t||null===(n=t.hierarchy)||void 0===n?void 0:n.lvl0:null===(e=s._highlightResult)||void 0===e||null===(l=e.hierarchy)||void 0===l?void 0:l.lvl0)||{}).value;return p&&Oo.test(p)?p.replace(Po,""):p}function Io(){return(Io=Object.assign||function(s){for(var a=1;a0}));return s.state.query?!1===a?Jc.createElement(jo,s):Jc.createElement(Do,s):Jc.createElement(To,No({},s,{hasCollections:a}))}),(function(s,a){return"loading"===a.state.status||"stalled"===a.state.status}));function Ro(){return(Ro=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(a,["_highlightResult","_snippetResult"])),c=l.findIndex((function(s){return s.objectID===t.objectID}));c>-1&&l.splice(c,1),l.unshift(t),l=l.slice(0,n),e.setItem(l)},remove:function(s){l=l.filter((function(a){return a.objectID!==s.objectID})),e.setItem(l)},getAll:function(){return l}}}function Mo(s){var a,t="algoliasearch-client-js-".concat(s.key),n=function(){return void 0===a&&(a=s.localStorage||window.localStorage),a},e=function(){return JSON.parse(n().getItem(t)||"{}")};return{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var t=JSON.stringify(s),n=e()[t];return Promise.all([n||a(),void 0!==n])})).then((function(s){var a=ml(s,2),n=a[0],e=a[1];return Promise.all([n,e||t.miss(n)])})).then((function(s){return ml(s,1)[0]}))},set:function(s,a){return Promise.resolve().then((function(){var l=e();return l[JSON.stringify(s)]=a,n().setItem(t,JSON.stringify(l)),a}))},delete:function(s){return Promise.resolve().then((function(){var a=e();delete a[JSON.stringify(s)],n().setItem(t,JSON.stringify(a))}))},clear:function(){return Promise.resolve().then((function(){n().removeItem(t)}))}}}function $o(s){var a=vl(s.caches),t=a.shift();return void 0===t?{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},n=a();return n.then((function(s){return Promise.all([s,t.miss(s)])})).then((function(s){return ml(s,1)[0]}))},set:function(s,a){return Promise.resolve(a)},delete:function(s){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(s,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t.get(s,n,e).catch((function(){return $o({caches:a}).get(s,n,e)}))},set:function(s,n){return t.set(s,n).catch((function(){return $o({caches:a}).set(s,n)}))},delete:function(s){return t.delete(s).catch((function(){return $o({caches:a}).delete(s)}))},clear:function(){return t.clear().catch((function(){return $o({caches:a}).clear()}))}}}function Uo(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},a={};return{get:function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},l=JSON.stringify(t);if(l in a)return Promise.resolve(s.serializable?JSON.parse(a[l]):a[l]);var c=n(),p=e&&e.miss||function(){return Promise.resolve()};return c.then((function(s){return p(s)})).then((function(){return c}))},set:function(t,n){return a[JSON.stringify(t)]=s.serializable?JSON.stringify(n):n,Promise.resolve(n)},delete:function(s){return delete a[JSON.stringify(s)],Promise.resolve()},clear:function(){return a={},Promise.resolve()}}}function Vo(s){for(var a=s.length-1;a>0;a--){var t=Math.floor(Math.random()*(a+1)),n=s[a];s[a]=s[t],s[t]=n}return s}function Ho(s,a){return a?(Object.keys(a).forEach((function(t){s[t]=a[t](s)})),s):s}function Wo(s){for(var a=arguments.length,t=new Array(a>1?a-1:0),n=1;n0?n:void 0,timeout:t.timeout||a,headers:t.headers||{},queryParameters:t.queryParameters||{},cacheable:t.cacheable}}var Yo={Read:1,Write:2,Any:3};function Xo(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return jl(jl({},s),{},{status:a,lastUpdate:Date.now()})}function Qo(s){return"string"==typeof s?{protocol:"https",url:s,accept:Yo.Any}:{protocol:s.protocol||"https",url:s.url,accept:s.accept||Yo.Any}}var Zo="POST";function sd(s,a,t,n){var e,l,c,p=[],o=function(s,a){if("GET"!==s.method&&(void 0!==s.data||void 0!==a.data)){var t=Array.isArray(s.data)?s.data:jl(jl({},s.data),a.data);return JSON.stringify(t)}}(t,n),d=(e=n,l=jl(jl({},s.headers),e.headers),c={},Object.keys(l).forEach((function(s){var a=l[s];c[s.toLowerCase()]=a})),c),r=t.method,i="GET"!==t.method?{}:jl(jl({},t.data),n.data),h=jl(jl(jl({"x-algolia-agent":s.userAgent.value},s.queryParameters),i),n.queryParameters),u=0,g=function a(e,l){var c=e.pop();if(void 0===c)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:ed(p)};var i={data:o,headers:d,method:r,url:td(c,t.path,h),connectTimeout:l(u,s.timeouts.connect),responseTimeout:l(u,n.timeout)},g=function(s){var a={request:i,response:s,host:c,triesLeft:e.length};return p.push(a),a},j={onSucess:function(s){return function(s){try{return JSON.parse(s.content)}catch(a){throw{name:"DeserializationError",message:a.message,response:s}}}(s)},onRetry:function(t){var n=g(t);return t.isTimedOut&&u++,Promise.all([s.logger.info("Retryable failure",ld(n)),s.hostsCache.set(c,Xo(c,t.isTimedOut?3:2))]).then((function(){return a(e,l)}))},onFail:function(s){throw g(s),function(s,a){var t=s.content,n=s.status,e=t;try{e=JSON.parse(t).message}catch(l){}return{name:"ApiError",message:e,status:n,transporterStackTrace:a}}(s,ed(p))}};return s.requester.send(i).then((function(s){return t=j,e=(n=a=s).status,n.isTimedOut||function(s){var a=s.isTimedOut,t=s.status;return!a&&0==~~t}(n)||2!=~~(e/100)&&4!=~~(e/100)?t.onRetry(a):2==~~(a.status/100)?t.onSucess(a):t.onFail(a);var a,t,n,e}))};return function(s,a){return Promise.all(a.map((function(a){return s.get(a,(function(){return Promise.resolve(Xo(a))}))}))).then((function(s){var t=s.filter((function(s){return 1===(a=s).status||Date.now()-a.lastUpdate>12e4;var a})),n=s.filter((function(s){return 3===(a=s).status&&Date.now()-a.lastUpdate<=12e4;var a})),e=[].concat(vl(t),vl(n));return{getTimeout:function(s,a){return(0===n.length&&0===s?1:n.length+3+s)*a},statelessHosts:e.length>0?e.map((function(s){return Qo(s)})):a}}))}(s.hostsCache,a).then((function(s){return g(vl(s.statelessHosts).reverse(),s.getTimeout)}))}function ad(s){var a={value:"Algolia for JavaScript (".concat(s,")"),add:function(s){var t="; ".concat(s.segment).concat(void 0!==s.version?" (".concat(s.version,")"):"");return-1===a.value.indexOf(t)&&(a.value="".concat(a.value).concat(t)),a}};return a}function td(s,a,t){var n=nd(t),e="".concat(s.protocol,"://").concat(s.url,"/").concat("/"===a.charAt(0)?a.substr(1):a);return n.length&&(e+="?".concat(n)),e}function nd(s){return Object.keys(s).map((function(a){return Wo("%s=%s",a,(t=s[a],"[object Object]"===Object.prototype.toString.call(t)||"[object Array]"===Object.prototype.toString.call(t)?JSON.stringify(s[a]):s[a]));var t})).join("&")}function ed(s){return s.map((function(s){return ld(s)}))}function ld(s){var a=s.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return jl(jl({},s),{},{request:jl(jl({},s.request),{},{headers:jl(jl({},s.request.headers),a)})})}var cd=function(s){return function(a){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={transporter:s.transporter,appId:s.appId,indexName:a};return Ho(n,t.methods)}},pd=function(s){return function(a,t){var n=a.map((function(s){return jl(jl({},s),{},{params:nd(s.params||{})})}));return s.transporter.read({method:Zo,path:"1/indexes/*/queries",data:{requests:n},cacheable:!0},t)}},od=function(s){return function(a,t){return Promise.all(a.map((function(a){var n=a.params,e=n.facetName,l=n.facetQuery,c=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(n,["facetName","facetQuery"]);return cd(s)(a.indexName,{methods:{searchForFacetValues:id}}).searchForFacetValues(e,l,jl(jl({},t),c))})))}},dd=function(s){return function(a,t,n){return s.transporter.read({method:Zo,path:Wo("1/answers/%s/prediction",s.indexName),data:{query:a,queryLanguages:t},cacheable:!0},n)}},rd=function(s){return function(a,t){return s.transporter.read({method:Zo,path:Wo("1/indexes/%s/query",s.indexName),data:{query:a},cacheable:!0},t)}},id=function(s){return function(a,t,n){return s.transporter.read({method:Zo,path:Wo("1/indexes/%s/facets/%s/query",s.indexName,a),data:{facetQuery:t},cacheable:!0},n)}};function hd(s,a,t){return function(s){var a,t,n,e,l=s.appId,c=(a=void 0!==s.authMode?s.authMode:Ko,t=l,n=s.apiKey,e={"x-algolia-api-key":n,"x-algolia-application-id":t},{headers:function(){return a===Ko?e:{}},queryParameters:function(){return a===Go?e:{}}}),p=function(s){var a=s.hostsCache,t=s.logger,n=s.requester,e=s.requestsCache,l=s.responsesCache,c=s.timeouts,p=s.userAgent,o=s.hosts,d=s.queryParameters,r={hostsCache:a,logger:t,requester:n,requestsCache:e,responsesCache:l,timeouts:c,userAgent:p,headers:s.headers,queryParameters:d,hosts:o.map((function(s){return Qo(s)})),read:function(s,a){var t=Jo(a,r.timeouts.read),n=function(){return sd(r,r.hosts.filter((function(s){return 0!=(s.accept&Yo.Read)})),s,t)};if(!0!==(void 0!==t.cacheable?t.cacheable:s.cacheable))return n();var e={request:s,mappedRequestOptions:t,transporter:{queryParameters:r.queryParameters,headers:r.headers}};return r.responsesCache.get(e,(function(){return r.requestsCache.get(e,(function(){return r.requestsCache.set(e,n()).then((function(s){return Promise.all([r.requestsCache.delete(e),s])}),(function(s){return Promise.all([r.requestsCache.delete(e),Promise.reject(s)])})).then((function(s){var a=ml(s,2);return a[0],a[1]}))}))}),{miss:function(s){return r.responsesCache.set(e,s)}})},write:function(s,a){return sd(r,r.hosts.filter((function(s){return 0!=(s.accept&Yo.Write)})),s,Jo(a,r.timeouts.write))}};return r}(jl(jl({hosts:[{url:"".concat(l,"-dsn.algolia.net"),accept:Yo.Read},{url:"".concat(l,".algolia.net"),accept:Yo.Write}].concat(Vo([{url:"".concat(l,"-1.algolianet.com")},{url:"".concat(l,"-2.algolianet.com")},{url:"".concat(l,"-3.algolianet.com")}]))},s),{},{headers:jl(jl(jl({},c.headers()),{"content-type":"application/x-www-form-urlencoded"}),s.headers),queryParameters:jl(jl({},c.queryParameters()),s.queryParameters)}));return Ho({transporter:p,appId:l,addAlgoliaAgent:function(s,a){p.userAgent.add({segment:s,version:a})},clearCache:function(){return Promise.all([p.requestsCache.clear(),p.responsesCache.clear()]).then((function(){}))}},s.methods)}(jl(jl(jl({},{appId:s,apiKey:a,timeouts:{connect:1,read:2,write:30},requester:{send:function(s){return new Promise((function(a){var t=new XMLHttpRequest;t.open(s.method,s.url,!0),Object.keys(s.headers).forEach((function(a){return t.setRequestHeader(a,s.headers[a])}));var n,e=function(s,n){return setTimeout((function(){t.abort(),a({status:0,content:n,isTimedOut:!0})}),1e3*s)},l=e(s.connectTimeout,"Connection timeout");t.onreadystatechange=function(){t.readyState>t.OPENED&&void 0===n&&(clearTimeout(l),n=e(s.responseTimeout,"Socket timeout"))},t.onerror=function(){0===t.status&&(clearTimeout(l),clearTimeout(n),a({content:t.responseText||"Network request failed",status:t.status,isTimedOut:!1}))},t.onload=function(){clearTimeout(l),clearTimeout(n),a({content:t.responseText,status:t.status,isTimedOut:!1})},t.send(s.data)}))}},logger:(3,{debug:function(s,a){return Promise.resolve()},info:function(s,a){return Promise.resolve()},error:function(s,a){return console.error(s,a),Promise.resolve()}}),responsesCache:Uo(),requestsCache:Uo({serializable:!1}),hostsCache:$o({caches:[Mo({key:"".concat("4.8.5","-").concat(s)}),Uo()]}),userAgent:ad("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Go}),t),{},{methods:{search:pd,searchForFacetValues:od,multipleQueries:pd,multipleSearchForFacetValues:od,initIndex:function(s){return function(a){return cd(s)(a,{methods:{search:rd,searchForFacetValues:id,findAnswers:dd}})}}}}))}function ud(){return(ud=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t",highlightPostTag:"",hitsPerPage:20},r)}]).catch((function(s){throw"RetryError"===s.name&&e("error"),s})).then((function(s){var a=s.results[0],e=a.hits,l=a.nbHits,c=So(e,(function(s){return Eo(s)}));return t.context.searchSuggestions.length0&&(W(),T.current&&T.current.focus())}),[R,W]),Jc.useEffect((function(){function s(){if(I.current){var s=.01*window.innerHeight;I.current.style.setProperty("--docsearch-vh","".concat(s,"px"))}}return s(),window.addEventListener("resize",s),function(){window.removeEventListener("resize",s)}}),[]),Jc.createElement("div",ud({ref:E},H({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===P.status&&"DocSearch-Container--Stalled","error"===P.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(s){s.target===s.currentTarget&&h()}}),Jc.createElement("div",{className:"DocSearch-Modal",ref:I},Jc.createElement("header",{className:"DocSearch-SearchBar",ref:D},Jc.createElement(Lo,ud({},U,{state:P,autoFocus:0===R.length,onClose:h,inputRef:T,isFromSelection:Boolean(R)&&R===F}))),Jc.createElement("div",{className:"DocSearch-Dropdown",ref:A},Jc.createElement(Fo,ud({},U,{indexName:p,state:P,hitComponent:m,resultsFooterComponent:b,disableUserPersonalization:k,recentSearches:M,favoriteSearches:B,onItemClick:function(s){$(s),h()},inputRef:T}))),Jc.createElement("footer",{className:"DocSearch-Footer"},Jc.createElement(Qp,null))))}function fd(){return(fd=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t{for(var t in a||(a={}))l.call(a,t)&&p(s,t,a[t]);if(e)for(var t of e(a))c.call(a,t)&&p(s,t,a[t]);return s})({},this.searchConfig),s=t(a,n({container:"#docsearch"})),Rc(Jc.createElement(xd,ul({},s,{transformSearchClient:function(a){return a.addAlgoliaAgent("docsearch.js","3.0.0-alpha.40"),s.transformSearchClient?s.transformSearchClient(a):a}})),function(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof s?a.document.querySelector(s):s}(s.container,s.environment)))}}},[["render",function(s,a,t,n,e,l){return pn(),hn("div",wd)}]]);const kd={class:"van-doc-markdown-body"},Sd=wn('

更新日志

v1.9.0

2021-09-27

Bug Fixes

  • Slider: 移除 theme mixin #4520
  • Tab: 修复初始位置不正确问题 #4521

Document

  • ActionSheet: 添加 show 属性说明 #4518

Feature

  • Slider: 添加 vertical 属性 #4486

Performance

  • 移除 CSS variables 兼容代码 #4487

v1.8.7

2021-09-22

Features

  • Icons: 新增 guide-o 图标 #4507

1.8.6

2021-09-20

Features

  • Calendar: 新增 confirmDisabledText 默认文案 #4490) (8629da1

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

  • Calendar: 修复超出选择范围 toast 提示一直存在问题 #4474
  • page-scroll: 修复 isDef 取反问题 #4488

1.8.4

2021-09-07

Bug Fixes

  • page-scroll: 修复 getCurrentPage 为空时报错 #4458

Features

  • Field: 新增 clear-trigger 属性 #4461
  • Search: 新增 clear-icon 属性 #4463
  • Search: 新增 clear-trigger 属性 9e17b13
  • Slider: 新增 range 属性 #4442

v1.8.3

2021-08-30

Bug Fixes

  • Calendar: 修复 default-date 属性失效问题 #4430
  • ShareSheet: 调整 overlayStyle 属性类型为 string 8c408e2
  • Stepper: 调整 minus/plus slots 位置 #4427
  • Sticky: 修复 root 为 null 时，读取 root.top 报错问题 #4433
  • Calendar: 调整 minDate 和 maxDate 传值类型为 Number 37d8e69

Features

  • Popup: 新增 lock-scroll 属性 #4384

Performance Improvements

  • Radio: label 的 margin-left 改为 padding-left，增大可点击区域，增强用户体验 #4165

v1.8.2

2021-08-18

Bug Fixes

  • Calendar: 修复 template 引用路径不是相对路径的问题 7f7cf6
  • Field: 修复 template 引用路径不是相对路径的问题 6dd42a

v1.8.1

2021-08-18

Feature

  • Calendar: 新增 click-subtitle 事件 #4385
  • Circle: 使用 setTimeout 代替 setInterval #4401

Bug Fixes

  • Picker: 修复 template 引用路径不是相对路径的问题 #4408

v1.8.0

2021-08-11

Feature

  • Overlay: 新增 lock-scroll 属性 #4383
  • search: 新增 click-input 事件 #4357

Performance

  • 移除了 iOS8 相关的 polyfill，减少包体积 #4395

v1.7.2

2021-07-19

Bug Fixes

  • Calendar: 初始日期设置为当前日期 #4339

Features

  • Cell: CellGroup 新增 inset 属性 #4341
  • Search: 新增 click-input 事件 #4337

1.7.1

2021-07-06

Bug Fixes

  • Col: 修复样式问题 #4322
  • Grid: 增加 icon-prefix 属性默认值 #4318
  • IndexBar: 修复当索引列表为空时报错 #4310

1.7.0

2021-07-04

Bug Fixes

  • Button: 修复 type 为 getUserInfo & wx.getUserProfile 可用时 lang 参数失效 #4250
  • ShareSheet: 新增内置 icon weapp-qrcode wechat-moments #4256

Features

  • Checkbox: 增加 direction 属性，设置排列方向 #4265
  • ConfigProvider: 增加全局配置组件 #4279
  • Grid: 增加 reverse 属性，支持文本&图片位置互换 #4280
  • GridItem: 增加 icon-prefix 属性，支持第三方字体 #4276
  • Rate: 增加更多 css 变量 #4297
  • Slider: 增加更多 css 变量 #4305

Improvements

  • wxs style 方法支持驼峰变量命名，以便能更好的在 wxml 中使用 #4281

1.6.9

2021-06-06

Bug Fixes

  • DatetimePicker: 修复 动态设置 min-hour min-date 显示不正确 #4245
  • Tabs: 修复 tab 数量较多时滚动距离不正确 #4202
  • Uploader: 修复 demo 中 beforeRead 报错 #4235

1.6.9-beta.2

2021-05-22

Bug Fixes

  • Button: 修复 open-type 不生效 #4222
  • Calendar: 修复 allow-same-day 开启时 custom-color 属性无效 #4200
  • Circle: 修复 value 是小数时抖动的情况 #4152
  • NoticeBar: 调整滚动行为 #4201
  • NoticeBar: 修复不正确的滚动速度 cde3876
  • Radio: 支持动态设置 disabled #4191
  • Rate: 支持滑动选择半星 #4195

Features

  • Calendar: 增加 first-day-of-week 属性，设置周起始日 #4211
  • Calendar: 增加 show-range-prompt 属性和 over-range 事件，设置是否展示提示文案 #4212
  • Icons: 图标库迁移至 iconfont.cn #4219
  • OpenType: 支持 getUserProfile #4203
  • Panel: 移除 useFooterSlot #4205

1.6.8

2021-02-26

Features

  • NoticeBar: 新增默认插槽 (#4048)
  • Stepper: 新增 theme 属性，支持圆形风格 (#4049)
  • Stepper: 新增 plus & minus 插槽 (#4049)

Bug Fixes

  • Checkbox: 修复 label-position 属性无效 (#4036)
  • Dialog: 修复 beforeClose 方法类型定义 (#4019)

Improvements

  • Circle: 当内置 canvas 不支持同层渲染时降级至默认 type (#4050)

1.6.7

2021-01-27

Features

  • Radio: 新增 direction 属性 (#4007)

Bug Fixes

  • Icons: 修复部分地区图标不显示 (#4012)
  • Transition: 修复默认设置 show 属性为 true 时不生效 (#4005)

1.6.6

2021-01-21

Features

  • Uploader: 支持文件预览 (#3975)

Bug Fixes

  • Picker: 修复标题栏无法显示 (#3973)

Improvements

  • Calendar: 优化模板代码 (#3972)

1.6.5

2021-01-19

Features

  • Field: 新增 input 插槽 (#3932)
  • Field: 新增 click-input 事件 (#3932)
  • Icon: 新增 delete-o、sort、font、font-o、revoke 图标 (#3881)

Bug Fixes

  • Button: 修复 custom-style 属性不生效 (#3903)
  • Dialog: 修复 close-on-click-overlay 属性不生效 (#3913)

Improvements

  • Cell: 优化性能 (#3888)
  • Col: 优化性能 (#3886)
  • Divider: 优化性能 (#3887)
  • Empty: 优化性能 (#3933)
  • Loading: 优化性能 (#3892)
  • Notice-bar: 优化性能 (#3891)
  • Notify: 优化性能 (#3893)
  • Picker: 优化性能 (#3949)
  • Stepper: 优化性能 (#3890)
  • Sticky: 优化性能 (#3879)
  • SwipeCell: 优化性能 (#3928)
  • Switch: 优化性能 (#3889)
  • Tag: 优化性能 (#3894)
  • Transition: 优化性能 (#3895)
  • Uploader: 优化性能 (#3897)

1.6.4

2020-12-18

Improvements

  • Tab: 优化粘性布局时的渲染性能 (#3875)
  • Grid: 使用 wxs 优化性能 (#3839)
  • Image: 使用 wxs 优化性能 (#3839)
  • Button: 使用 wxs 优化性能 (#3839)
  • Icon: 减少代码体积 (#3839)
  • Checkbox: 减少代码体积 (#3839)
  • Slider: 减少代码体积 (#3839)

Bug Fixes

  • Calendar: 修复在 phone 设备上选择日期后显示错误 (#3833)
  • GoodsAction: 修复部分设备上高度异常 (#3865)
  • Slider: 修复设置 max min 时滑动不均匀 (#3876)
  • Tab: 修复切换时内容区闪烁的问题 (#3866)

1.6.3

2020-12-09

Features

  • Dialog: 新增 beforeClose 属性 (#3815)
  • uploader: 新增若干 CSS 变量 (#3797)
  • Aarea: 支持不传入 county_list 数据 (#3824)
  • Tab: 新增 resize 方法 (#3827)

Improvements

  • Collapse: 使用 animate 提升动画性能 (#3826)
  • Tab: 优化样式拼装性能 (#3827)

Bug Fixes

  • Field: 修复输入中文时显示字数暂时超出 maxlength (#3802)
  • Info: 修复样式错误 (#3823)
  • NavBar: 修复动态渲染时组件报错 (#3822)
  • Progress: 修复 percentage 为 0 时样式异常 (#3808)

1.6.2

2020-11-29

Features

  • Tabbar: 新增 placeholder icon-prefix 属性 (#3792)

Bug Fixes

  • DatetimePicker: 修复 type=year-month 时选择出现报错 (#3783)
  • Info: 修复部分安卓设备中文案不完全居中 (#3778)
  • Tab: 修复 ellipsis 为 false 时下划线位置不正确 (#3777)
  • Notify: 修复组件未全局居中 (#3751)

Improvements

  • Icon: 使用 wxs 优化性能 (#3791)

1.6.1

2020-11-12

Bug Fixes

  • Field: 修复未传入 label 属性时仍渲染 label #3756
  • Picker: 修复 confirm、cancel 事件报错 #3755

1.6.0

2020-11-11

Features

  • SwipeCell: 新增外部样式类 custom-class #3678
  • ActionSheet: 调整取消文字颜色至 @gray-7 #3719
  • ActionSheet: 调整顶部栏样式 #3720
  • ActionSheet: 调整加载图标大小至 22px #3718
  • ActionSheet: 调整描述文字样式 #3726
  • Cell: 调整图标外边距至 4px #3721
  • DropdownMenu: 增加默认阴影 #3723
  • DropdownMenu: 调整选中态默认颜色至 #ee0a24 #3725
  • Image: 调整图标大小至 36px #3724
  • Popup: 调整圆角至 16px #3713
  • Search: 调整左侧内边距至 12px #3716
  • Sidebar: 调整宽度至 85px #3722
  • TabbarItem: 调整图标大小至 22px #3717

Bug Fixes

  • Field: 修复使用 label 属性时 label-class 样式类不生效 #3729
  • NoticeBar: 修复内容较短时开启 scrollable 不生效 #3727
  • SidebarItem: 修复长数字不换行的问题 #3714
  • Tag: 默认字体加入 miui #3715

1.5.2

2020-10-15

Features

  • Uploader: 标准化 file-list 与事件参数 #3673
  • Uploader: 新增 thumb，支持缩略图展示 #3673
  • GoodsAction: 新增若干 CSS 变量 #3654
  • 移动 @types/wechat-miniprogram 至 dependencies #3654

Bug Fixes

  • Button: 修复细边框样式问题 #3653
  • Tab: 重构动画实现，不再使用 transform #3668

1.5.1

2020-09-29

Features

  • Card: 新增 origin-price tag 插槽 #3645
  • ShareSheet: 调整默认 z-index 至 100 #3575
  • ShareSheet: 新增 item 属性 openType #3575
  • Uploader: 扩大删除按钮点击区域 #3631

Bug Fixes

  • Uploader: 支持预览视频 #3594
  • Dialog: 调整类型定义 #3630
  • NavBar: 修复 CSS 变量 --nav-bar-icon-color 不生效 #3643
  • NavBar: 修复未设置 title 时样式异常 #3643
  • Tab: 修复 line-width 属性不支持 string #3628

1.5.0

2020-08-27

Features

  • ShareSheet: 新增组件 #3559
  • Icons: 升级 @vant/icons 至 v1.2.5 #3539
  • sidebar: 新增 badge 属性 #3564
  • Tabs: 调整默认 line-width 至 40px #3518
  • Tabs: 去除默认边框 #3519
  • TreeSelect: 新增 selected-icon 属性 #3565
  • TreeSelect: 支持 badge、dot 显示 #3565

Bug Fixes

  • collapse: 修复嵌套在 popup 等组件中时默认展开无效 #3562
  • empty: 修复 image、description 插槽不生效 #3563

1.4.4

2020-08-12

Bug Fixes

  • Transition: 重构组件以修复卡顿问题 #3498
  • Icon: 修复数字未对齐 #3501
  • Tab: 修复可滚动时下划线位置错误 #3511

v1.4.3

2020-08-07

Features

  • Dialog: 增加圆角按钮样式 #3476
  • Cell: 调整下划线位置 #3487
  • Tab: 调整默认滚动阈值至 5 个、优化样式 #3459

v1.4.2

2020-08-03

Features

Bug Fixes

  • Calendar: 修复超出 max-range 时未显示 Toast #3466
  • Tab: 修复手势滚动可切换至禁用项 #3467

v1.4.1

2020-07-28

Features

  • Picker: 调整默认可见的选项个数为 6 个 #3418
  • Toast: 调整圆角为 8px #3419

Bug Fixes

  • Slider: 修复点击会触发 drag 事件 #3415
  • Area: 修复中间列无法滚动 #3443

v1.4.0

2020-07-17

Features

  • Empty: 新增 Empty 组件 #3327
  • NoticeBar: 新增 background 属性 #3388
  • NoticeBar: 新增 close 事件 #3388
  • GridItem: 新增 icon-color 属性 #3386
  • NavBar: 现在 custom-style 将影响根节点#3371
  • Cell: 新增 title-style 属性, fix Field label width #3370
  • Uploader: 更新 failed 图标 #3359
  • Uploader: 更新删除图标样式 #3385
  • Uploader: 移除圆角样式 #3384
  • Field: 更新禁用态样式 #3358
  • Field: 更新 label 样式 #3357
  • Picker: 调整 action button 样式 #3316

Bug Fixes

  • Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 #3401
  • Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 #3317
  • Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 #3318
  • DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 #3352
  • Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 #3383
  • Dialog: show dialog after class ready #3374
  • Calendar: confirm-disabled-text 属性增加默认值 #3394

v1.3.3

2020-06-24

Features

  • steps: 为每一项增加 inactiveIcon、activeIcon 属性 #3315
  • field: 增加外部样式类 label-class #3311
  • field: 现在总会从内部 set value 值 #3313
  • uploader: 为每一项增加 deletable 属性 #3270
  • uploader: 扩大删除图标的可点击区域 #3265

Bug Fixes

  • tabbar: 修复 iphone-se 上高度异常 #3314
  • grid: 修复 text 与 icon 同时设置时样式异常 #3310
  • calendar: 修复多选模式下 default-date 属性不生效 #3284
  • circle: 修复 type=“2d” 时无法动态变更 value #3264
  • nav-bar: 修复未设置 left-text 时左侧图标样式异常 #3263

v1.3.2

2020-06-04

Features

  • button: 新增 form-type 属性 #3208
  • grid: 新增 icon-size、badge 属性 #3236
  • grid: 新增 direction 属性 #3192

Bug Fixes

  • Grid: 修复开启 square 时横、纵向间距不同 #3231
  • uploader: 修复点击删除图标时触发 click-preview 事件 #3230
  • circle: 修复 type="2d" 不生效 #3228
  • calendar: 修复在选择区间时，点击确定报错 #3195
  • tag: 修复 css 变量名拼写错误 #3191

v1.3.1

2020-05-24

Features

  • Button: 新增 class-prefix 属性 #3159
  • Collapse: 新增 open、close 事件 #3176

Bug Fixes

  • 修复控制台提示选择器错误的问题 #3137
  • 修复 GoodsActionButton 在某些情况下报错的问题 #3145

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

  • sticky: 新增 scroll-top 属性 #3115
  • button: 新增 dataset 属性 #3075
  • uploader: 所有类型都会触发 click-preview 事件 #3071
  • Uploader: 属性 accept 新增值 media #3047
  • feat: 新增基础 font-family #3061
  • submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 #3104

Bug Fixes

  • dialog: 修复 title 多余空格的问题 #3069
  • tab: 修复 tab 个数多时显示滚动条 #3072
  • Sticky: 修复使用组件时页面 onPageScroll 失效 #3092
  • button: 修复 disabled 属性对 open-type 类型的按钮无效 #3076

v1.2.2

2020-04-21

Features

  • GoodsActionButton: 新增 CSS 变量 goods-action-line-height #3037
  • Calendar: 选择区间大于 range 时自动选中最大范围 #3026
  • Notify: 新增 top 属性 #3018

Bug Fixes

  • Field: 修复未设置 autosize 时 wxs 报错 #3038
  • Field: 避免设置 showClear 为 undefined #3012

v1.2.1

2020-04-12

Features

  • Field: 支持小程序双向绑定 #2986
  • Calendar: 多选模式下新增 unselect 事件 #2990

Bug Fixes

  • IndexBar: 移除 scroll-top 属性 #2999
  • Uploader: 修复图片后缀名为大写时未正常识别 #2987
  • Field: 修复 autosize 属性 设置 max-height 不生效 #3007

v1.2.0

2020-04-04

Features

  • TreeSelect: 更新 nav 背景色 #2952
  • Sticky: 使用 page scroll 重构组件 #2950
  • Field: 新增 auto-focus、disable-default-padding、cursor 属性 #2936
  • Field: 新增 linechange、keyboardheightchange 事件 #2936
  • Uploader: 支持显示上传状态 #2929
  • Image: mode 属性新增 widthFix、heightFix #2908
  • Canvas: 新增 type 属性 #2906
  • NavBar: 新增 placeholder 属性 #2896

Bug Fixes

  • Field: 修复输入过快时输入框内容不断回退 #2936
  • Calendar: 修复 show-confirm 为 true 时组件初始化报错 #2951
  • Tab: 修复 type 为 card 时 color 对边框无效 #2941

v1.1.0

2020-03-21

Features

  • 新增 Calendar 日历组件 #2894
  • Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class #2882
  • Steps: 新增 click 事件 #2874
  • SideBar: 新增 title 插槽 #2873
  • Uploader: 新增 upload-icon 属性 #2869
  • Uploader: 新增 show-upload 属性 #2868
  • Uploader: 更新样式、调整事件触发顺序与 vant 一致 #2886
  • Field: 新增 show-word-limit 属性 #2856
  • Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight #2856
  • Field: 新增若干 CSS 变量 #2856

Bug Fixes

  • Button: 移除 lang 属性默认值 #2883
  • Button: 修复 disabled 属性对原生事件无效 #2878

v1.0.7

2020-03-04

Features

  • DropdownItem: 新增 popupStyle 属性 #2804
  • DropdownItem: 新增 open close opened closed 事件 #2804
  • Card: 新增 price num 插槽 #2787
  • Card: 新增 origin-price-class 外部样式类 #2787

Bug Fixes

  • Tab: 修复内容项高度不同时粘性布局异常 #2817
  • Picker: 修复未选中项样式未置灰 #2816
  • GoodsActionButton: 修复仅使用一个 button 时样式异常 #2808
  • Radio: name类型与value统一 #2801
  • Uploader: 修复文档错误 #2777

v1.0.6

2020-02-24

Features

  • GoodsActionButton: 新增默认 slot #2779
  • SubmitBar: 更新圆角样式 #2755
  • Card: 更新样式 #2754
  • 优化 relation 部分代码 #2760

Bug Fixes

  • DropdownItem: 修复点击选项时不触发close事件 #2766
  • GoodsActionButton: 修复低版本基础库下的样式问题 #2762
  • Tabs: 修复点击禁用项时事件参数错误 #2758
  • Checkbox: 修复动态设置disabled属性无效 #2748
  • Button: add loading color when plain is true #2746
  • Radio: 修复label-disabled文档错误 #2763

v1.0.5

2020-02-07

Features

  • ActionSheet: actions 支持更多 openType #2715
  • Uploader: 新增开始disabled时的组件样式 #2720
  • Icon: 调整示例小程序页面与 vant 对齐 #2728
  • 示例小程序首页与 vant 对齐 #2729
  • 完善快速上手文档，增加 npm 构建说明 #2726

Bug Fixes

  • Radio: 修复disabled属性不生效 #2711
  • Tab: 修复animated属性无法动态切换 #2712
  • Circle: 修正文档错误，size属性不支持string类型 #2694
  • 修正文档默认 slot 名称为 default 的错误 #2726
  • TreeSelect: 修正文档示例代码标签闭合错误 #2710

v1.0.4

2020-01-21

Features

  • Stepper: 新增 disable-long-press 属性 #2691
  • quickstart: 快速上手新增关闭 style v2 说明 #2704
  • Search: 新增 background、disabled、input-align 文档示例 #2698
  • Icon: 文档新增图标文字加载失败说明 #2681

Bug Fixes

  • Sticky: 修复真机上页面滚动缓慢时无法吸顶/取消吸顶 #2703
  • DropdownItem: 修复 wx:key 警告 #2670
  • IndexBar: 文档修复组件引入路径错误 #2689
  • 升级依赖版本以避免安全警告 #2680

v1.0.3

2020-01-09

Features

  • npm 包默认输出 es5 版本代码 #2639
  • Steps: 新增外部样式类 desc-class #2630

Bug Fixes

  • Tab: 解决动态添加选项时，顺序错乱和下划线长度不变的问题 #2663
  • NavBar: 修复返回图标未居中的问题 #2633

v1.0.2

2019-12-31

Features

  • Skeleton: 新增外部样式类row-class``avatar-class``title-class #2612
  • SwipeCell: 支持动态修改width属性 #2607
  • Uploader: 新增camera``compressed``maxDuration属性 #2584

Improvements

  • Tab: 优化弹性滚动效果 #2606

Bug Fixes

  • IndexBar: 修复字母未全部定义时 click 事件报错 #2605
  • Field: 修复点击清除图标后下一次点击无效 #2602

v1.0.1

2019-12-23

Features

  • Uploader: 新增 sizeType 属性 #2563
  • GoodsActionButton: 新增 plain 属性 #2559
  • Uploader: 去除 use-slot 属性 #2551
  • 新增样式覆盖说明文档 #2566

Improvements

  • 使用 nextTick 优化部分异步逻辑 #2561
  • wxs 新增 addUnit 方法以减少 setData 调用次数 #2550

Bug Fixes

  • Tag: 修复未依赖 van-icon 组件 #2579
  • Notify: 修复 safeAreaInsetTop 不生效 #2558
  • Uploader: 修复 capture 属性不生效 #2551

v1.0.0

2019-12-11

主要变动

  • npm 包名由 vant-weapp 重命名为 @vant/weapp
  • 增加十一个新组件
  • 增加数十个 API
  • 所有组件支持通过CSS自定义属性自定义样式
  • 使用env()重构 iOS 安全区域适配
  • 调整部分 API 命名，废除少量 API

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

  • Grid 宫格，用于展示内容或进行页面导航
  • Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示
  • Circle 环形进度条，告知用户当前的状态和进度
  • Overaly 遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
  • Divider 分割线，区隔内容的分割线
  • Sticky 粘性布局，与 CSS 中position: sticky属性实现的效果类似
  • Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
  • IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
  • Uploader 文件上传，上传一个或多个文件
  • CountDown 倒计时，用于显示活动倒计时、短信验证码等
  • DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
  • BadgeGroup重命名为Sidebar
  • Badge重命名为SlidebarItem
  • active属性重命名为activeKey
Notify
  • text选项重命名为message
  • backgroundColor选项重命名为background
  • 去除transitionend事件，新增 6 个事件
SwitchCell
  • 移除了SwitchCell组件，可以使用Cell和Switch组件代替
Transition
  • 去除transitionend事件，新增 6 个事件

新特性

ActionSheet
  • 新增click-overlay事件
  • 新增close-on-click-action属性
  • 新增color属性
  • 新增description属性
  • 新增round属性
Area
  • 新增columns-placeholder属性
  • reset方法支持传入code参数
Button
  • 新增loading-type属性
  • color属性支持渐变色
  • 切换disabled时增加过渡效果
Checkbox
  • 新增icon-size属性
Color
  • 基础红色更新为#ee0a24
DatetimePicker
  • 新增filter属性
Dialog
  • 优化文字换行
  • 新增title插槽
  • 新增confirm-button-color属性
  • 新增cancel-button-color属性
  • 新增width属性
  • 新增overlay-style属性
Field
  • 新增clickable属性
  • 新增arrow-direction属性
  • 新增hold-keyboard属性
GoodsActionButton
  • 新增color属性
  • 样式升级为圆角风格
GoodsActionIcon
  • 新增icon插槽
  • 新增dot属性
GridItem
  • 新增info属性
  • 新增dot属性
Icon
  • 新增dot属性
  • 新增down图标
  • 新增wap-hone实底风格图标
  • 支持number类型的size属性
Loading
  • 支持number类型的size属性
NoticeBar
  • 阻止关闭图标点击事件冒泡
Notify
  • 新增clear方法
  • 新增round属性
  • 新增closeable属性
  • 新增close-icon属性
  • 新增close-icon-position属性
Progress
  • 新增stroke-width属性
Radio
  • 新增icon-size属性
Rate
  • 优化手势判断
  • 新增gutter属性
  • 新增touchable属性
  • 支持string类型的size属性
  • 新增action-text属性
  • 新增left-icon插槽
  • 新增right-icon插槽
SlidebarItem
  • 新增dot属性
Slider
  • 新增drag-start事件
  • 新增drag-end事件
  • 支持传入任意范围的max和min属性
  • 支持number类型的bar-height属性
  • 增加滑动动画
  • 增大点击区域
SwipeCell
  • 新增name属性
  • 新增open事件
  • 支持打开状态互斥
Switch
  • 加载图标的颜色会跟随开关状态变化
Stepper
  • 支持长按手势
  • 新增input-width属性
  • 新增button-size属性
  • 新增decimalLength属性
  • 新增 disablePlus、disableMinus 属性
Steps
  • 新增active-icon属性
  • 新增inactive-icon属性
Tabs
  • 使用 Sticky 组件重构吸顶实现
  • 新增name属性
  • 新增line-height属性
  • 新增ellipsis属性
  • 新增lazy-render属性
  • line-width属性支持String类型
  • 增加云开发结合示例
TreeSelect
  • 新增max属性
  • 新增content插槽
',48),zd=[Sd],Cd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",kd,zd)))},Pd={class:"van-doc-markdown-body"},Od=wn('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',5),Ed=[Od],Id={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Pd,Ed)))},Dd={class:"van-doc-markdown-body"},Ad=wn('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),Td=[Ad],Nd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Dd,Td)))},Fd={class:"van-doc-markdown-body"},Rd=wn('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

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

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

  • 基于 Vant Weapp 搭建小程序应用
  • 样式覆盖方案

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),Ld=[Rd],Bd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Fd,Ld)))},Md={class:"van-doc-markdown-body"},$d=wn('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

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

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

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

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',7),Ud=[$d],Vd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Md,Ud)))},Hd={class:"van-doc-markdown-body"},Wd=wn('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),Gd=[Wd],Kd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Hd,Gd)))},Jd={class:"van-doc-markdown-body"},Yd=wn('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

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

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

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

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

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

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

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

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',17),Xd=[Yd],Qd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Jd,Xd)))},Zd={class:"van-doc-markdown-body"},sr=wn('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

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

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',18),ar=[sr],tr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Zd,ar)))},nr={class:"van-doc-markdown-body"},er=wn('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

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

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

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

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

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

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

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

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

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

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

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

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

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

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),lr=[er],cr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",nr,lr)))},pr={class:"van-doc-markdown-body"},or=[wn('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10)],dr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",pr,or)))},rr={class:"van-doc-markdown-body"},ir=[wn('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],hr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",rr,ir)))},ur={class:"van-doc-markdown-body"},gr=[wn('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定复选框的勾选状态。

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

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

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

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

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

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

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

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],jr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ur,gr)))},mr={class:"van-doc-markdown-body"},vr=[wn('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

value属性表示进度条的目标进度。

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

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

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

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],br={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",mr,vr)))},fr={class:"van-doc-markdown-body"},yr=[wn('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

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

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

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

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],qr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",fr,yr)))},xr={class:"van-doc-markdown-body"},wr=[wn('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],_r={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",xr,wr)))},kr={class:"van-doc-markdown-body"},Sr=[wn('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],zr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",kr,Sr)))},Cr={class:"van-doc-markdown-body"},Pr=[wn('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

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

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],Or={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Cr,Pr)))},Er={class:"van-doc-markdown-body"},Ir=[wn('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

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

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

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

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

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

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],Dr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Er,Ir)))},Ar={class:"van-doc-markdown-body"},Tr=[wn('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择完整时间

value 为时间戳。

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

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

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

选择日期（年月）

value 为时间戳。

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

选择时间

value 为字符串。

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

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

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

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],Nr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ar,Tr)))},Fr={class:"van-doc-markdown-body"},Rr=[wn('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

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

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],Lr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Fr,Rr)))},Br={class:"van-doc-markdown-body"},Mr=[wn('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

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

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],$r={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Br,Mr)))},Ur={class:"van-doc-markdown-body"},Vr=[wn('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

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

向上展开

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

禁用菜单

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

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
',15)],Hr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ur,Vr)))},Wr={class:"van-doc-markdown-body"},Gr=[wn('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Kr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Wr,Gr)))},Jr={class:"van-doc-markdown-body"},Yr=[wn('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Xr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Jr,Yr)))},Qr={class:"van-doc-markdown-body"},Zr=[wn('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],si={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Qr,Zr)))},ai={class:"van-doc-markdown-body"},ti=[wn('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

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

自定义内容

通过插槽可以自定义格子展示的内容。

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

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

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

格子间距

通过gutter属性设置格子之间的距离。

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

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

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

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],ni={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ai,ti)))},ei={class:"van-doc-markdown-body"},li=[wn('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

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

图标颜色

设置color属性来控制图标颜色。

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

图标大小

设置size属性来控制图标大小。

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

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],ci={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ei,li)))},pi={class:"van-doc-markdown-body"},oi=[wn('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

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

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

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

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

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

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

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

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

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

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],di={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",pi,oi)))},ri={class:"van-doc-markdown-body"},ii=[wn('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],hi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ri,ii)))},ui={class:"van-doc-markdown-body"},gi=[wn('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

加载类型

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

自定义颜色

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

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],ji={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ui,gi)))},mi={class:"van-doc-markdown-body"},vi=[wn('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],bi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",mi,vi)))},fi={class:"van-doc-markdown-body"},yi=[wn('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

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

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],qi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",fi,yi)))},xi={class:"van-doc-markdown-body"},wi=[wn('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],_i={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",xi,wi)))},ki={class:"van-doc-markdown-body"},Si=[wn('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

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

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],zi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ki,Si)))},Ci={class:"van-doc-markdown-body"},Pi=[wn('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],Oi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ci,Pi)))},Ei={class:"van-doc-markdown-body"},Ii=[wn('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

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

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

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

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],Di={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ei,Ii)))},Ai={class:"van-doc-markdown-body"},Ti=[wn('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

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

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

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

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],Ni={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ai,Ti)))},Fi={class:"van-doc-markdown-body"},Ri=[wn('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

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

线条粗细

通过stroke-width可以设置进度条的粗细。

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

置灰

设置inactive属性后进度条将置灰。

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

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],Li={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Fi,Ri)))},Bi={class:"van-doc-markdown-body"},Mi=[wn('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定值当前选中项的 name 。

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

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

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

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

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

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],$i={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Bi,Mi)))},Ui={class:"van-doc-markdown-body"},Vi=[wn('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

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

自定义图标

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

自定义样式

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

半星

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

自定义数量

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

禁用状态

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

只读状态

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

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],Hi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ui,Vi)))},Wi={class:"van-doc-markdown-body"},Gi=[wn('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Ki={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Wi,Gi)))},Ji={class:"van-doc-markdown-body"},Yi=[wn('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Xi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ji,Yi)))},Qi={class:"van-doc-markdown-body"},Zi=[wn('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],sh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Qi,Zi)))},ah={class:"van-doc-markdown-body"},th=[wn('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],nh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ah,th)))},eh={class:"van-doc-markdown-body"},lh=[wn('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],ch={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",eh,lh)))},ph={class:"van-doc-markdown-body"},oh=[wn('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],dh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",ph,oh)))},rh={class:"van-doc-markdown-body"},ih=[wn('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],hh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",rh,ih)))},uh={class:"van-doc-markdown-body"},gh=[wn('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],jh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",uh,gh)))},mh={class:"van-doc-markdown-body"},vh=[wn('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],bh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",mh,vh)))},fh={class:"van-doc-markdown-body"},yh=[wn('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],qh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",fh,yh)))},xh={class:"van-doc-markdown-body"},wh=[wn('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],_h={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",xh,wh)))},kh={class:"van-doc-markdown-body"},Sh=[wn('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],zh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",kh,Sh)))},Ch={class:"van-doc-markdown-body"},Ph=[wn('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],Oh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ch,Ph)))},Eh={class:"van-doc-markdown-body"},Ih=[wn('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],Dh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Eh,Ih)))},Ah={class:"van-doc-markdown-body"},Th=[wn('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],Nh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Ah,Th)))},Fh={class:"van-doc-markdown-body"},Rh=[wn('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],Lh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Fh,Rh)))},Bh={class:"van-doc-markdown-body"},Mh=[wn('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],$h={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Bh,Mh)))},Uh={class:"van-doc-markdown-body"},Vh=[wn('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',18)],Hh={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/vite/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:s=>`/zh-CN${{"/common":"/style","/transition":"/style"}[s]||s}`,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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}},Wh={Changelog:Cd,CustomStyle:Id,Home:Nd,Quickstart:Bd,Theme:Vd,ActionSheet:Kd,Area:Qd,Button:tr,Calendar:cr,Card:dr,Cell:hr,Checkbox:jr,Circle:br,Col:qr,Collapse:_r,Common:zr,ConfigProvider:Or,CountDown:Dr,DatetimePicker:Nr,Dialog:Lr,Divider:$r,DropdownMenu:Hr,Empty:Kr,Field:Xr,GoodsAction:si,Grid:ni,Icon:ci,Image:di,IndexBar:hi,Loading:ji,NavBar:bi,NoticeBar:qi,Notify:_i,Overlay:zi,Panel:Oi,Picker:Di,Popup:Ni,Progress:Li,Radio:$i,Rate:Hi,Search:Ki,ShareSheet:Xi,Sidebar:sh,Skeleton:nh,Slider:ch,Stepper:dh,Steps:hh,Sticky:jh,SubmitBar:bh,SwipeCell:qh,Switch:_h,Tab:zh,Tabbar:Oh,Tag:Dh,Toast:Nh,Transition:Lh,TreeSelect:$h,Uploader:{setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(pn(),hn("div",Uh,Vh)))}};const Gh={class:"van-doc-header"},Kh={class:"van-doc-row"},Jh={class:"van-doc-header__top"},Yh={class:"van-doc-header__logo"},Xh=["src"],Qh={class:"van-doc-header__top-nav"},Zh=["href"],su=["src"],au={key:1},tu={key:0,ref:"version",class:"van-doc-header__top-nav-item"},nu={key:0,class:"van-doc-header__version-pop"},eu=["onClick"],lu={key:1,class:"van-doc-header__top-nav-item"},cu=["href"];const pu={name:"VanDocContainer",props:{hasSimulator:Boolean}};const ou=["src"];const du={name:"VanDoc",components:{DocNav:rl,DocHeader:el({name:"VanDocHeader",components:{SearchInput:_d},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:"1.9.0",showVersionPop:!1}),computed:{langLink(){return`#${this.$route.path.replace(this.lang,this.anotherLang.lang)}`},langLabel(){return this.anotherLang.label},anotherLang(){const s=this.langConfigs.filter((s=>s.lang!==this.lang));return s.length?s[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const s=!this.showVersionPop,a=s?"add":"remove";document.body[`${a}EventListener`]("click",this.checkHideVersionPop),this.showVersionPop=s},checkHideVersionPop(s){this.$refs.version.contains(s.target)||(this.showVersionPop=!1)},onSwitchLang(s){this.$router.push(this.$route.path.replace(s.from,s.to))},onSwitchVersion(s){s.link&&(location.href=s.link)}}},[["render",function(s,a,t,n,e,l){const c=Xt("search-input");return pn(),hn("div",Gh,[fn("div",Kh,[fn("div",Jh,[fn("a",Yh,[fn("img",{src:t.config.logo},null,8,Xh),fn("span",null,j(t.config.title),1)]),fn("ul",Qh,[(pn(!0),hn(an,null,Cn(t.config.links,((s,a)=>(pn(),hn("li",{key:a,class:"van-doc-header__top-nav-item"},[fn("a",{class:"van-doc-header__link",target:"_blank",href:s.url},[s.logo?(pn(),hn("img",{key:0,src:s.logo},null,8,su)):s.text?(pn(),hn("span",au,j(s.text),1)):_n("v-if",!0)],8,Zh)])))),128)),t.versions?(pn(),hn("li",tu,[fn("span",{class:"van-doc-header__cube van-doc-header__version",onClick:a[0]||(a[0]=(...s)=>l.toggleVersionPop&&l.toggleVersionPop(...s))},[xn(j(e.packageVersion)+" ",1),yn(Me,{name:"van-doc-dropdown"},{default:Da((()=>[e.showVersionPop?(pn(),hn("div",nu,[(pn(!0),hn(an,null,Cn(t.versions,((s,a)=>(pn(),hn("div",{key:a,class:"van-doc-header__version-pop-item",onClick:a=>l.onSwitchVersion(s)},j(s.label),9,eu)))),128))])):_n("v-if",!0)])),_:1})])],512)):_n("v-if",!0),l.langLabel&&l.langLink?(pn(),hn("li",lu,[fn("a",{class:"van-doc-header__cube",href:l.langLink},j(l.langLabel),9,cu)])):_n("v-if",!0),l.searchConfig?(pn(),un(c,{key:2,lang:t.lang,"search-config":l.searchConfig},null,8,["lang","search-config"])):_n("v-if",!0)])])])])}]]),DocContent:el({name:"VanDocContent",computed:{currentPage(){const{path:s}=this.$route;return s?s.split("/").slice(-1)[0]:this.$route.name}},mounted(){[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((s=>{s.addEventListener("click",this.scrollToAnchor)}))},methods:{scrollToAnchor(s){s.target.id&&this.$router.push({name:this.$route.name,hash:"#"+s.target.id})}}},[["render",function(s,a,t,n,e,l){return pn(),hn("div",{class:g(["van-doc-content",`van-doc-content--${l.currentPage}`])},[Pn(s.$slots,"default")],2)}]]),DocContainer:el(pu,[["render",function(s,a,t,n,e,l){return pn(),hn("div",{class:g(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":t.hasSimulator}])},[Pn(s.$slots,"default")],2)}]]),DocSimulator:el({name:"VanDocSimulator",props:{src:String},data:()=>({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}))}},[["render",function(s,a,t,n,e,l){return pn(),hn("div",{class:g(["van-doc-simulator",{"van-doc-simulator-fixed":l.isFixed}])},[fn("iframe",{ref:"iframe",src:t.src,style:r(l.simulatorStyle),frameborder:"0"},null,12,ou)],2)}]])},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:s}=this.config,a=s.reduce(((s,a)=>s.concat(a.items)),[]),t=this.$route.path.split("/").pop();let n;for(let e=0,l=a.length;e{switch(s.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next")}}))}}},ru={class:"van-doc"};let iu="zh-CN";function hu(){return iu}function uu(s){const a=localStorage.getItem("vant-cli-lang");iu=a||(navigator.language&&-1!==navigator.language.indexOf("zh-")?"zh-CN":s||"en-US")}const gu={class:"app"};var ju=el({components:{VanDoc:el(du,[["render",function(s,a,t,n,e,l){const c=Xt("doc-header"),p=Xt("doc-nav"),o=Xt("doc-content"),d=Xt("doc-container"),r=Xt("doc-simulator");return pn(),hn("div",ru,[yn(c,{lang:t.lang,config:t.config,versions:t.versions,"lang-configs":t.langConfigs,onSwitchVersion:a[0]||(a[0]=a=>s.$emit("switch-version",a))},null,8,["lang","config","versions","lang-configs"]),yn(p,{lang:t.lang,"nav-config":t.config.nav},null,8,["lang","nav-config"]),yn(d,{"has-simulator":t.hasSimulator},{default:Da((()=>[yn(o,null,{default:Da((()=>[Pn(s.$slots,"default")])),_:3})])),_:3},8,["has-simulator"]),t.hasSimulator?(pn(),un(r,{key:0,src:t.simulator},null,8,["src"])):_n("v-if",!0)])}]])},data:()=>({hasSimulator:!0}),computed:{simulator(){var s,a;if(null==(s=Hh.site.simulator)?void 0:s.url)return null==(a=Hh.site.simulator)?void 0:a.url;return`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:s}=this.$route.meta;return s||""},langConfigs(){const{locales:s={}}=Hh.site;return Object.keys(s).map((a=>({lang:a,label:s[a].langLabel||""})))},config(){const{locales:s}=Hh.site;return s?s[this.lang]:Hh.site},versions:()=>Hh.site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(s){var a;iu=a=s,localStorage.setItem("vant-cli-lang",a),this.setTitleAndToogleSimulator()},config:{handler(s){s&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){this.$route.hash&&this.$nextTick((()=>{const s=document.querySelector(this.$route.hash);s&&s.scrollIntoView()}))},methods:{setTitleAndToogleSimulator(){let{title:s}=this.config;const a=this.config.nav.reduce(((s,a)=>[...s,...a.items]),[]).find((s=>s.path===this.$route.meta.name));a&&a.title?s=a.title+" - "+s:this.config.description&&(s+=` - ${this.config.description}`),document.title=s,this.hasSimulator=!(Hh.site.hideSimulator||this.config.hideSimulator||a&&a.hideSimulator)}}},[["render",function(s,a,t,n,e,l){const c=Xt("router-view"),p=Xt("van-doc");return pn(),hn("div",gu,[l.config?(pn(),un(p,{key:0,lang:l.lang,config:l.config,versions:l.versions,simulator:l.simulator,"has-simulator":e.hasSimulator,"lang-configs":l.langConfigs},{default:Da((()=>[yn(c)])),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):_n("v-if",!0)])}]]);const mu={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape:unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){!function(s){const a=document.createElement("textarea");a.value=s,a.setAttribute("readonly",""),a.style.position="absolute",a.style.left="-9999px",document.body.appendChild(a);const t=document.getSelection();if(!t)return;const n=t.rangeCount>0&&t.getRangeAt(0);a.select(),document.execCommand("copy"),document.body.removeChild(a),n&&(t.removeAllRanges(),t.addRange(n))}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((()=>{this.copyStatus="ready"}),2e3)}}},vu={class:"demo-playground--code"},bu={class:"demo-playground--code--actions"},fu=(s=>(Ea="data-v-9efa7fdc",s=s(),Ea=null,s))((()=>fn("span",null,null,-1))),yu=["data-status"],qu=["innerHTML"];var xu=el(mu,[["render",function(s,a,t,n,e,l){return pn(),hn("div",{class:g({"demo-playground":!t.inline,transform:t.transform})},[t.inline?Pn(s.$slots,"default",{key:0},void 0,!0):(pn(),hn(an,{key:1},[fn("div",{class:g(["demo-playground--previewer",{compact:t.compact}])},[Pn(s.$slots,"default",{},void 0,!0)],2),fn("div",vu,[fn("div",bu,[fu,fn("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":e.copyStatus,onClick:a[0]||(a[0]=(...s)=>l.copySourceCode&&l.copySourceCode(...s))},null,8,yu),fn("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:a[1]||(a[1]=(...s)=>l.toogleSource&&l.toogleSource(...s))})]),Mt(fn("div",{innerHTML:l.unescape(t.codeSnippet),class:"demo-playground--code--content"},null,8,qu),[[Ze,e.showSource]])])],64))],2)}],["__scopeId","data-v-9efa7fdc"]]); -/*! - * vue-router v4.0.6 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */const wu="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,_u=s=>wu?Symbol(s):"_vr_"+s,ku=_u("rvlm"),Su=_u("rvd"),zu=_u("r"),Cu=_u("rl"),Pu=_u("rvl"),Ou="undefined"!=typeof window;const Eu=Object.assign;function Iu(s,a){const t={};for(const n in a){const e=a[n];t[n]=Array.isArray(e)?e.map(s):s(e)}return t}let Du=()=>{};const Au=/\/$/;function Tu(s,a,t="/"){let n,e={},l="",c="";const p=a.indexOf("?"),o=a.indexOf("#",p>-1?p:0);return p>-1&&(n=a.slice(0,p),l=a.slice(p+1,o>-1?o:a.length),e=s(l)),o>-1&&(n=n||a.slice(0,o),c=a.slice(o,a.length)),n=function(s,a){if(s.startsWith("/"))return s;if(!s)return a;const t=a.split("/"),n=s.split("/");let e,l,c=t.length-1;for(e=0;es===a[t])):1===s.length&&s[0]===a}var Mu,$u,Uu,Vu;function Hu(s){if(!s)if(Ou){const a=document.querySelector("base");s=(s=a&&a.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else s="/";return"/"!==s[0]&&"#"!==s[0]&&(s="/"+s),s.replace(Au,"")}($u=Mu||(Mu={})).pop="pop",$u.push="push",(Vu=Uu||(Uu={})).back="back",Vu.forward="forward",Vu.unknown="";const Wu=/^[^#]+#/;function Gu(s,a){return s.replace(Wu,"#")+a}const Ku=()=>({left:window.pageXOffset,top:window.pageYOffset});function Ju(s){let a;if("el"in s){let t=s.el;const n="string"==typeof t&&t.startsWith("#"),e="string"==typeof t?n?document.getElementById(t.slice(1)):document.querySelector(t):t;if(!e)return;a=function(s,a){const t=document.documentElement.getBoundingClientRect(),n=s.getBoundingClientRect();return{behavior:a.behavior,left:n.left-t.left-(a.left||0),top:n.top-t.top-(a.top||0)}}(e,s)}else a=s;"scrollBehavior"in document.documentElement.style?window.scrollTo(a):window.scrollTo(null!=a.left?a.left:window.pageXOffset,null!=a.top?a.top:window.pageYOffset)}function Yu(s,a){return(history.state?history.state.position-a:-1)+s}const Xu=new Map;function Qu(s,a){const{pathname:t,search:n,hash:e}=a;if(s.indexOf("#")>-1){let s=e.slice(1);return"/"!==s[0]&&(s="/"+s),Nu(s,"")}return Nu(t,s)+n+e}function Zu(s,a,t,n=!1,e=!1){return{back:s,current:a,forward:t,replaced:n,position:window.history.length,scroll:e?Ku():null}}function sg(s){const{history:a,location:t}=window;let n={value:Qu(s,t)},e={value:a.state};function l(n,l,c){const p=s.indexOf("#"),o=p>-1?(t.host&&document.querySelector("base")?s:s.slice(p))+n:location.protocol+"//"+location.host+s+n;try{a[c?"replaceState":"pushState"](l,"",o),e.value=l}catch(d){console.error(d),t[c?"replace":"assign"](o)}}return e.value||l(n.value,{back:null,current:n.value,forward:null,position:a.length-1,replaced:!0,scroll:null},!0),{location:n,state:e,push:function(s,t){const c=Eu({},e.value,a.state,{forward:s,scroll:Ku()});l(c.current,c,!0),l(s,Eu({},Zu(n.value,s,null),{position:c.position+1},t),!1),n.value=s},replace:function(s,t){l(s,Eu({},a.state,Zu(e.value.back,s,e.value.forward,!0),t,{position:e.value.position}),!0),n.value=s}}}function ag(s){const a=sg(s=Hu(s)),t=function(s,a,t,n){let e=[],l=[],c=null;const p=({state:l})=>{const p=Qu(s,location),o=t.value,d=a.value;let r=0;if(l){if(t.value=p,a.value=l,c&&c===o)return void(c=null);r=d?l.position-d.position:0}else n(p);e.forEach((s=>{s(t.value,o,{delta:r,type:Mu.pop,direction:r?r>0?Uu.forward:Uu.back:Uu.unknown})}))};function o(){const{history:s}=window;s.state&&s.replaceState(Eu({},s.state,{scroll:Ku()}),"")}return window.addEventListener("popstate",p),window.addEventListener("beforeunload",o),{pauseListeners:function(){c=t.value},listen:function(s){e.push(s);const a=()=>{const a=e.indexOf(s);a>-1&&e.splice(a,1)};return l.push(a),a},destroy:function(){for(const s of l)s();l=[],window.removeEventListener("popstate",p),window.removeEventListener("beforeunload",o)}}}(s,a.state,a.location,a.replace);const n=Eu({location:"",base:s,go:function(s,a=!0){a||t.pauseListeners(),history.go(s)},createHref:Gu.bind(null,s)},a,t);return Object.defineProperty(n,"location",{get:()=>a.location.value}),Object.defineProperty(n,"state",{get:()=>a.state.value}),n}function tg(s){return(s=location.host?s||location.pathname+location.search:"").indexOf("#")<0&&(s+="#"),ag(s)}function ng(s){return"string"==typeof s||"symbol"==typeof s}const eg={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},lg=_u("nf");var cg,pg;function og(s,a){return Eu(new Error,{type:s,[lg]:!0},a)}function dg(s,a){return s instanceof Error&&lg in s&&(null==a||!!(s.type&a))}(pg=cg||(cg={}))[pg.aborted=4]="aborted",pg[pg.cancelled=8]="cancelled",pg[pg.duplicated=16]="duplicated";const rg={sensitive:!1,strict:!1,start:!0,end:!0},ig=/[.+*?^${}()[\]/\\]/g;function hg(s,a){let t=0;for(;ta.length?1===a.length&&80===a[0]?1:-1:0}function ug(s,a){let t=0;const n=s.score,e=a.score;for(;t1&&("*"===p||"+"===p)&&a(`A repeatable param (${d}) must be alone in its segment. eg: '/:ids+.`),l.push({type:1,value:d,regexp:r,repeatable:"*"===p||"+"===p,optional:"*"===p||"?"===p})):a("Invalid state to consume buffer"),d="")}function h(){d+=p}for(;o{l(h)}:Du}function l(s){if(ng(s)){const a=n.get(s);a&&(n.delete(s),t.splice(t.indexOf(a),1),a.children.forEach(l),a.alias.forEach(l))}else{let a=t.indexOf(s);a>-1&&(t.splice(a,1),s.record.name&&n.delete(s.record.name),s.children.forEach(l),s.alias.forEach(l))}}function c(s){let a=0;for(;a=0;)a++;t.splice(a,0,s),s.record.name&&!fg(s)&&n.set(s.record.name,s)}return a=qg({strict:!1,end:!0,sensitive:!1},a),s.forEach((s=>e(s))),{addRoute:e,resolve:function(s,a){let e,l,c,p={};if("name"in s&&s.name){if(e=n.get(s.name),!e)throw og(1,{location:s});c=e.record.name,p=Eu(function(s,a){let t={};for(let n of a)n in s&&(t[n]=s[n]);return t}(a.params,e.keys.filter((s=>!s.optional)).map((s=>s.name))),s.params),l=e.stringify(p)}else if("path"in s)l=s.path,e=t.find((s=>s.re.test(l))),e&&(p=e.parse(l),c=e.record.name);else{if(e=a.name?n.get(a.name):t.find((s=>s.re.test(a.path))),!e)throw og(1,{location:s,currentLocation:a});c=e.record.name,p=Eu({},a.params,s.params),l=e.stringify(p)}const o=[];let d=e;for(;d;)o.unshift(d.record),d=d.parent;return{name:c,path:l,params:p,matched:o,meta:yg(o)}},removeRoute:l,getRoutes:function(){return t},getRecordMatcher:function(s){return n.get(s)}}}function bg(s){const a={},t=s.props||!1;if("component"in s)a.default=t;else for(let n in s.components)a[n]="boolean"==typeof t?t:t[n];return a}function fg(s){for(;s;){if(s.record.aliasOf)return!0;s=s.parent}return!1}function yg(s){return s.reduce(((s,a)=>Eu(s,a.meta)),{})}function qg(s,a){let t={};for(let n in s)t[n]=n in a?a[n]:s[n];return t}const xg=/#/g,wg=/&/g,_g=/\//g,kg=/=/g,Sg=/\?/g,zg=/\+/g,Cg=/%5B/g,Pg=/%5D/g,Og=/%5E/g,Eg=/%60/g,Ig=/%7B/g,Dg=/%7C/g,Ag=/%7D/g,Tg=/%20/g;function Ng(s){return encodeURI(""+s).replace(Dg,"|").replace(Cg,"[").replace(Pg,"]")}function Fg(s){return Ng(s).replace(zg,"%2B").replace(Tg,"+").replace(xg,"%23").replace(wg,"%26").replace(Eg,"`").replace(Ig,"{").replace(Ag,"}").replace(Og,"^")}function Rg(s){return function(s){return Ng(s).replace(xg,"%23").replace(Sg,"%3F")}(s).replace(_g,"%2F")}function Lg(s){try{return decodeURIComponent(""+s)}catch(a){}return""+s}function Bg(s){const a={};if(""===s||"?"===s)return a;const t=("?"===s[0]?s.slice(1):s).split("&");for(let n=0;ns&&Fg(s))):[n&&Fg(n)];for(let s=0;snull==s?null:""+s)):null==n?n:""+n)}return a}function Ug(){let s=[];return{add:function(a){return s.push(a),()=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)}},list:()=>s,reset:function(){s=[]}}}function Vg(s,a,t,n,e){const l=n&&(n.enterCallbacks[e]=n.enterCallbacks[e]||[]);return()=>new Promise(((c,p)=>{const o=s=>{var o;!1===s?p(og(4,{from:t,to:a})):s instanceof Error?p(s):"string"==typeof(o=s)||o&&"object"==typeof o?p(og(2,{from:a,to:s})):(l&&n.enterCallbacks[e]===l&&"function"==typeof s&&l.push(s),c())},d=s.call(n&&n.instances[e],a,t,o);let r=Promise.resolve(d);s.length<3&&(r=r.then(o)),r.catch((s=>p(s)))}))}function Hg(s,a,t,n){const e=[];for(const c of s)for(const s in c.components){let p=c.components[s];if("beforeRouteEnter"===a||c.instances[s])if("object"==typeof(l=p)||"displayName"in l||"props"in l||"__vccOpts"in l){const l=(p.__vccOpts||p)[a];l&&e.push(Vg(l,t,n,c,s))}else{let l=p();l=l.catch(console.error),e.push((()=>l.then((e=>{if(!e)return Promise.reject(new Error(`Couldn't resolve component "${s}" at "${c.path}"`));const l=(p=e).__esModule||wu&&"Module"===p[Symbol.toStringTag]?e.default:e;var p;c.components[s]=l;const o=(l.__vccOpts||l)[a];return o&&Vg(o,t,n,c,s)()}))))}}var l;return e}function Wg(s){const a=La(zu),t=La(Cu),n=Sa((()=>a.resolve(xa(s.to)))),e=Sa((()=>{let{matched:s}=n.value,{length:a}=s;const e=s[a-1];let l=t.matched;if(!e||!l.length)return-1;let c=l.findIndex(Fu.bind(null,e));if(c>-1)return c;let p=Kg(s[a-2]);return a>1&&Kg(e)===p&&l[l.length-1].path!==p?l.findIndex(Fu.bind(null,s[a-2])):c})),l=Sa((()=>e.value>-1&&function(s,a){for(let t in a){let n=a[t],e=s[t];if("string"==typeof n){if(n!==e)return!1}else if(!Array.isArray(e)||e.length!==n.length||n.some(((s,a)=>s!==e[a])))return!1}return!0}(t.params,n.value.params))),c=Sa((()=>e.value>-1&&e.value===t.matched.length-1&&Ru(t.params,n.value.params)));return{route:n,href:Sa((()=>n.value.href)),isActive:l,isExactActive:c,navigate:function(t={}){return function(s){if(s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)return;if(s.defaultPrevented)return;if(void 0!==s.button&&0!==s.button)return;if(s.currentTarget&&s.currentTarget.getAttribute){const a=s.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(a))return}s.preventDefault&&s.preventDefault();return!0}(t)?a[xa(s.replace)?"replace":"push"](xa(s.to)):Promise.resolve()}}}const Gg=Ka({name:"RouterLink",props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},setup(s,{slots:a}){const t=oa(Wg(s)),{options:n}=La(zu),e=Sa((()=>({[Jg(s.activeClass,n.linkActiveClass,"router-link-active")]:t.isActive,[Jg(s.exactActiveClass,n.linkExactActiveClass,"router-link-exact-active")]:t.isExactActive})));return()=>{const n=a.default&&a.default(t);return s.custom?n:xe("a",{"aria-current":t.isExactActive?s.ariaCurrentValue:null,href:t.href,onClick:t.navigate,class:e.value},n)}}});function Kg(s){return s?s.aliasOf?s.aliasOf.path:s.path:""}const Jg=(s,a,t)=>null!=s?s:null!=a?a:t;function Yg(s,a){if(!s)return null;const t=s(a);return 1===t.length?t[0]:t}const Xg=Ka({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},setup(s,{attrs:a,slots:t}){const n=La(Pu),e=Sa((()=>s.route||n.value)),l=La(Su,0),c=Sa((()=>e.value.matched[l]));Ra(Su,l+1),Ra(ku,c),Ra(Pu,e);const p=qa(o);var o;return ve((()=>[p.value,c.value,s.name]),(([s,a,t],[n,e,l])=>{a&&(a.instances[t]=s,e&&e!==a&&s&&s===n&&(a.leaveGuards.size||(a.leaveGuards=e.leaveGuards),a.updateGuards.size||(a.updateGuards=e.updateGuards))),!s||!a||e&&Fu(a,e)&&n||(a.enterCallbacks[t]||[]).forEach((a=>a(s)))}),{flush:"post"}),()=>{const n=e.value,l=c.value,o=l&&l.components[s.name],d=s.name;if(!o)return Yg(t.default,{Component:o,route:n});const r=l.props[s.name],i=r?!0===r?n.params:"function"==typeof r?r(n):r:null,h=xe(o,Eu({},i,a,{onVnodeUnmounted:s=>{s.component.isUnmounted&&(l.instances[d]=null)},ref:p}));return Yg(t.default,{Component:h,route:n})||h}}});function Qg(s){const a=vg(s.routes,s);let t=s.parseQuery||Bg,n=s.stringifyQuery||Mg,e=s.history;const l=Ug(),c=Ug(),p=Ug(),o=qa(eg,!0);let d=eg;Ou&&s.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const r=Iu.bind(null,(s=>""+s)),i=Iu.bind(null,Rg),h=Iu.bind(null,Lg);function u(s,l){if(l=Eu({},l||o.value),"string"==typeof s){let n=Tu(t,s,l.path),c=a.resolve({path:n.path},l),p=e.createHref(n.fullPath);return Eu(n,c,{params:h(c.params),hash:Lg(n.hash),redirectedFrom:void 0,href:p})}let c;"path"in s?c=Eu({},s,{path:Tu(t,s.path,l.path).path}):(c=Eu({},s,{params:i(s.params)}),l.params=i(l.params));let p=a.resolve(c,l);const d=s.hash||"";p.params=r(h(p.params));const u=function(s,a){let t=a.query?s(a.query):"";return a.path+(t&&"?")+t+(a.hash||"")}(n,Eu({},s,{hash:(g=d,Ng(g).replace(Ig,"{").replace(Ag,"}").replace(Og,"^")),path:p.path}));var g;let j=e.createHref(u);return Eu({fullPath:u,hash:d,query:n===Mg?$g(s.query):s.query},p,{redirectedFrom:void 0,href:j})}function g(s){return"string"==typeof s?Tu(t,s,o.value.path):Eu({},s)}function j(s,a){if(d!==s)return og(8,{from:a,to:s})}function m(s){return b(s)}function v(s){const a=s.matched[s.matched.length-1];if(a&&a.redirect){const{redirect:t}=a;let n="function"==typeof t?t(s):t;return"string"==typeof n&&(n=n.indexOf("?")>-1||n.indexOf("#")>-1?n=g(n):{path:n}),Eu({query:s.query,hash:s.hash,params:s.params},n)}}function b(s,a){const t=d=u(s),e=o.value,l=s.state,c=s.force,p=!0===s.replace,r=v(t);if(r)return b(Eu(g(r),{state:l,force:c,replace:p}),a||t);const i=t;let h;return i.redirectedFrom=a,!c&&function(s,a,t){let n=a.matched.length-1,e=t.matched.length-1;return n>-1&&n===e&&Fu(a.matched[n],t.matched[e])&&Ru(a.params,t.params)&&s(a.query)===s(t.query)&&a.hash===t.hash}(n,e,t)&&(h=og(16,{to:i,from:e}),O(e,e,!0,!1)),(h?Promise.resolve(h):y(i,e)).catch((s=>dg(s)?s:C(s))).then((s=>{if(s){if(dg(s,2))return b(Eu(g(s.to),{state:l,force:c,replace:p}),a||i)}else s=x(i,e,!0,p,l);return q(i,e,s),s}))}function f(s,a){const t=j(s,a);return t?Promise.reject(t):Promise.resolve()}function y(s,a){let t;const[n,e,p]=function(s,a){const t=[],n=[],e=[],l=Math.max(a.matched.length,s.matched.length);for(let c=0;cFu(s,l)))?n.push(l):t.push(l));const p=s.matched[c];p&&(a.matched.find((s=>Fu(s,p)))||e.push(p))}return[t,n,e]}(s,a);t=Hg(n.reverse(),"beforeRouteLeave",s,a);for(const l of n)l.leaveGuards.forEach((n=>{t.push(Vg(n,s,a))}));const o=f.bind(null,s,a);return t.push(o),Zg(t).then((()=>{t=[];for(const n of l.list())t.push(Vg(n,s,a));return t.push(o),Zg(t)})).then((()=>{t=Hg(e,"beforeRouteUpdate",s,a);for(const n of e)n.updateGuards.forEach((n=>{t.push(Vg(n,s,a))}));return t.push(o),Zg(t)})).then((()=>{t=[];for(const n of s.matched)if(n.beforeEnter&&a.matched.indexOf(n)<0)if(Array.isArray(n.beforeEnter))for(const e of n.beforeEnter)t.push(Vg(e,s,a));else t.push(Vg(n.beforeEnter,s,a));return t.push(o),Zg(t)})).then((()=>(s.matched.forEach((s=>s.enterCallbacks={})),t=Hg(p,"beforeRouteEnter",s,a),t.push(o),Zg(t)))).then((()=>{t=[];for(const n of c.list())t.push(Vg(n,s,a));return t.push(o),Zg(t)})).catch((s=>dg(s,8)?s:Promise.reject(s)))}function q(s,a,t){for(const n of p.list())n(s,a,t)}function x(s,a,t,n,l){const c=j(s,a);if(c)return c;const p=a===eg,d=Ou?history.state:{};t&&(n||p?e.replace(s.fullPath,Eu({scroll:p&&d&&d.scroll},l)):e.push(s.fullPath,l)),o.value=s,O(s,a,t,p),P()}let w;function _(){w=e.listen(((s,a,t)=>{let n=u(s);const l=v(n);if(l)return void b(Eu(l,{replace:!0}),n).catch(Du);d=n;const c=o.value;var p,r;Ou&&(p=Yu(c.fullPath,t.delta),r=Ku(),Xu.set(p,r)),y(n,c).catch((s=>dg(s,12)?s:dg(s,2)?(b(s.to,n).catch(Du),Promise.reject()):(t.delta&&e.go(-t.delta,!1),C(s)))).then((s=>{(s=s||x(n,c,!1))&&t.delta&&e.go(-t.delta,!1),q(n,c,s)})).catch(Du)}))}let k,S=Ug(),z=Ug();function C(s){return P(s),z.list().forEach((a=>a(s))),Promise.reject(s)}function P(s){k||(k=!0,_(),S.list().forEach((([a,t])=>s?t(s):a())),S.reset())}function O(a,t,n,e){const{scrollBehavior:l}=s;if(!Ou||!l)return Promise.resolve();let c=!n&&function(s){const a=Xu.get(s);return Xu.delete(s),a}(Yu(a.fullPath,0))||(e||!n)&&history.state&&history.state.scroll||null;return oe().then((()=>l(a,t,c))).then((s=>s&&Ju(s))).catch(C)}const E=s=>e.go(s);let I;const D=new Set;return{currentRoute:o,addRoute:function(s,t){let n,e;return ng(s)?(n=a.getRecordMatcher(s),e=t):e=s,a.addRoute(e,n)},removeRoute:function(s){let t=a.getRecordMatcher(s);t&&a.removeRoute(t)},hasRoute:function(s){return!!a.getRecordMatcher(s)},getRoutes:function(){return a.getRoutes().map((s=>s.record))},resolve:u,options:s,push:m,replace:function(s){return m(Eu(g(s),{replace:!0}))},go:E,back:()=>E(-1),forward:()=>E(1),beforeEach:l.add,beforeResolve:c.add,afterEach:p.add,onError:z.add,isReady:function(){return k&&o.value!==eg?Promise.resolve():new Promise(((s,a)=>{S.add([s,a])}))},install(s){s.component("RouterLink",Gg),s.component("RouterView",Xg),s.config.globalProperties.$router=this,Object.defineProperty(s.config.globalProperties,"$route",{get:()=>xa(o)}),Ou&&!I&&o.value===eg&&(I=!0,m(e.location).catch((s=>{})));const a={};for(let n in eg)a[n]=Sa((()=>o.value[n]));s.provide(zu,this),s.provide(Cu,oa(a)),s.provide(Pu,o);let t=s.unmount;D.add(s),s.unmount=function(){D.delete(s),D.size<1&&(w(),o.value=eg,I=!1,k=!1),t()}}}}function Zg(s){return s.reduce(((s,a)=>s.then((()=>a()))),Promise.resolve())}const sj=navigator.userAgent.toLowerCase(),aj=/ios|iphone|ipod|ipad|android/.test(sj);function tj(s,a="-"){return s.replace(/([a-z\d])([A-Z])/g,"$1"+a+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+a+"$2").toLowerCase()}let nj=[],ej=!1;function lj(){var s,a;const t=window.vueRouter,{path:n}=t.currentRoute.value;return(null==(s=Hh.site.simulator)?void 0:s.routeMapper)?null==(a=Hh.site.simulator)?void 0:a.routeMapper(n):n}function cj(){window.top.postMessage({type:"replacePath",value:lj()},"*")}function pj(){const s=document.querySelector("iframe");var a;s&&(a=()=>{s.contentWindow.postMessage({type:"replacePath",value:lj()},"*")},ej?a():nj.push(a))}function oj(s){window.addEventListener("message",(a=>{var t,n;if("replacePath"!==(null==(t=a.data)?void 0:t.type))return;const e=(null==(n=a.data)?void 0:n.value)||"";s.currentRoute.value.path!==e&&s.replace(e).catch((()=>{}))}))}window.top===window?window.addEventListener("message",(s=>{"iframeReady"===s.data.type&&(ej=!0,nj.forEach((s=>s())),nj=[])})):window.top.postMessage({type:"iframeReady"},"*"),aj&&location.replace("mobile.html"+location.hash);const{locales:dj,defaultLang:rj}=Hh.site;function ij(s){const a=s.path.split("/")[1];return-1!==Object.keys(dj).indexOf(a)?a:hu()}uu(rj);const hj=Qg({history:tg(),routes:function(){const s=[],a=Object.keys(Wh);return dj?s.push({name:"notFound",path:"/:path(.*)+",redirect:s=>({name:ij(s)})}):s.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),a.forEach((a=>{const{component:t,lang:n}=function(s){if(-1!==s.indexOf("_")){const a=s.split("_");return{component:`${tj(a.shift())}`,lang:a.join("-")}}return{component:`${tj(s)}`,lang:""}}(a);"home"===t&&function(a,t){s.push({name:t||"home",path:`/${t||""}`,component:a,meta:{lang:t}})}(Wh[a],n),n?s.push({name:`${n}/${t}`,path:`/${n}/${t}`,component:Wh[a],meta:{lang:n,name:t}}):s.push({name:`${t}`,path:`/${t}`,component:Wh[a],meta:{name:t}})})),s}(),scrollBehavior:s=>s.hash?{el:s.hash}:{top:0}});hj.afterEach((()=>{oe(pj)})),!1!==(null==(s=Hh.site.simulator)?void 0:s.syncPathFromSimulator)&&oj(hj),window.vueRouter=hj,window.app=nl(ju).use(hj).component(xu.name,xu),setTimeout((()=>{window.app.mount("#app")}),0);const uj={name:"DemoBlock",props:{card:Boolean,title:String}},gj={class:"van-doc-demo-block"},jj={key:0,class:"van-doc-demo-block__title"},mj={key:1,class:"van-doc-demo-block__card"};var vj=el(uj,[["render",function(s,a,t,n,e,l){return pn(),hn("div",gj,[t.title?(pn(),hn("h2",jj,j(t.title),1)):_n("v-if",!0),t.card?(pn(),hn("div",mj,[Pn(s.$slots,"default")])):Pn(s.$slots,"default",{key:2})])}]]);var bj=el({name:"DemoSection",computed:{demoName(){const{meta:s}=this.$route||{};return s&&s.name?`demo-${tj(s.name)}`:""}}},[["render",function(s,a,t,n,e,l){return pn(),hn("section",{class:g(["van-doc-demo-section",l.demoName])},[Pn(s.$slots,"default")],2)}]]);const fj={},yj={versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[]},qj={},xj={viewBox:"0 0 1024 1024"},wj=[fn("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),fn("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)];const _j={class:"demo-home-nav"},kj={class:"demo-home-nav__title"},Sj={class:"demo-home-nav__group"};const zj={class:"demo-home"},Cj=["src"],Pj={key:0,class:"demo-home__desc"};var Oj=el({components:{DemoHomeNav:el({components:{ArrowRight:el(qj,[["render",function(s,a){return pn(),hn("svg",xj,wj)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(s,a,t,n,e,l){const c=Xt("arrow-right"),p=Xt("router-link");return pn(),hn("div",_j,[fn("div",kj,j(t.group.title),1),fn("div",Sj,[(pn(!0),hn(an,null,Cn(t.group.items,(s=>(pn(),un(p,{class:"demo-home-nav__block",key:s.path,to:`${l.base}/${s.path}`},{default:Da((()=>[xn(j(s.title)+" ",1),yn(c,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:s}=this.$route.meta;return s},config(){const{locales:s}=yj;return s?s[this.lang]:yj},smallTitle(){return this.config.title.length>=8}}},[["render",function(s,a,t,n,e,l){const c=Xt("demo-home-nav");return pn(),hn("div",zj,[fn("h1",{class:g(["demo-home__title",{"demo-home__title--small":l.smallTitle}])},[fn("img",{src:l.config.logo},null,8,Cj),fn("span",null,j(l.config.title),1)],2),l.config.description?(pn(),hn("h2",Pj,j(l.config.description),1)):_n("v-if",!0),(pn(!0),hn(an,null,Cn(l.config.nav,((s,a)=>(pn(),un(c,{key:a,lang:l.lang,group:s},null,8,["lang","group"])))),128))])}]]);const{locales:Ej,defaultLang:Ij}=yj;function Dj(s){const a=s.path.split("/")[1];return-1!==Object.keys(Ej).indexOf(a)?a:hu()}uu(Ij);const Aj=Qg({history:tg(),routes:function(){const s=[],a=Object.keys(fj),t=Ej?Object.keys(Ej):[];return t.length?(s.push({name:"NotFound",path:"/:path(.*)+",redirect:s=>({name:Dj(s)})}),t.forEach((a=>{s.push({name:a,path:`/${a}`,component:Oj,meta:{lang:a}})}))):(s.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),s.push({name:"home",path:"/",component:Oj})),a.forEach((a=>{const n=tj(a);t.length?t.forEach((t=>{s.push({name:`${t}/${n}`,path:`/${t}/${n}`,component:fj[a],meta:{name:a,lang:t}})})):s.push({name:n,path:`/${n}`,component:fj[a],meta:{name:a}})})),s}(),scrollBehavior:(s,a,t)=>t||{x:0,y:0}});ve(Aj.currentRoute,(()=>{Aj.currentRoute.value.redirectedFrom||oe(cj)})),oj(Aj),window.vueRouter=Aj;const Tj={class:"demo-nav"},Nj={class:"demo-nav__title"},Fj=["d"];var Rj=el({components:{DemoNav:el({data:()=>({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:s}=this.$route.meta||{};return s?s.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},[["render",function(s,a,t,n,e,l){return Mt((pn(),hn("div",Tj,[fn("div",Nj,j(l.title),1),(pn(),hn("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:a[0]||(a[0]=(...s)=>l.onBack&&l.onBack(...s))},[fn("path",{fill:"#969799","fill-rule":"evenodd",d:e.path},null,8,Fj)]))],512)),[[Ze,l.title]])}]])}},[["render",function(s,a,t,n,e,l){const c=Xt("demo-nav"),p=Xt("demo-section"),o=Xt("router-view");return pn(),hn(an,null,[yn(c),yn(o,null,{default:Da((({Component:s})=>[(pn(),un(Xa,null,[yn(p,null,{default:Da((()=>{return[(pn(),un((a=s,I(a)?Zt("components",a,!1)||a:a||Qt)))];var a})),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var s,a="ontouchstart"in window;document.createTouch||(document.createTouch=function(s,a,n,e,l,c,p){return new t(a,n,{pageX:e,pageY:l,screenX:c,screenY:p,clientX:e-window.pageXOffset,clientY:l-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var s=e(),a=0;a{window.app.mount("#app")}),0); diff --git a/vite/assets/main.33235344.js b/vite/assets/main.33235344.js deleted file mode 100644 index 5d4c88ce..00000000 --- a/vite/assets/main.33235344.js +++ /dev/null @@ -1,8 +0,0 @@ -var s,a=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,e=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,c=(s,t,n)=>t in s?a(s,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):s[t]=n;function o(s,a){const t=Object.create(null),n=s.split(",");for(let e=0;e!!t[s.toLowerCase()]:s=>!!t[s]}!function(){const s=document.createElement("link").relList;if(!(s&&s.supports&&s.supports("modulepreload"))){for(const s of document.querySelectorAll('link[rel="modulepreload"]'))a(s);new MutationObserver((s=>{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();const d=o("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function r(s){if(z(s)){const a={};for(let t=0;t{if(s){const t=s.split(h);t.length>1&&(a[t[0].trim()]=t[1].trim())}})),a}function g(s){let a="";if(E(s))a=s;else if(z(s))for(let t=0;tnull==s?"":z(s)||T(s)&&s.toString===N?JSON.stringify(s,m,2):String(s),m=(s,a)=>a&&a.__v_isRef?m(s,a.value):P(a)?{[`Map(${a.size})`]:[...a.entries()].reduce(((s,[a,t])=>(s[`${a} =>`]=t,s)),{})}:I(a)?{[`Set(${a.size})`]:[...a.values()]}:!T(a)||z(a)||L(a)?a:String(a),v={},b=[],f=()=>{},y=()=>!1,q=/^on[^a-z]/,x=s=>q.test(s),w=s=>s.startsWith("onUpdate:"),_=Object.assign,k=(s,a)=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)},S=Object.prototype.hasOwnProperty,C=(s,a)=>S.call(s,a),z=Array.isArray,P=s=>"[object Map]"===F(s),I=s=>"[object Set]"===F(s),O=s=>"function"==typeof s,E=s=>"string"==typeof s,D=s=>"symbol"==typeof s,T=s=>null!==s&&"object"==typeof s,A=s=>T(s)&&O(s.then)&&O(s.catch),N=Object.prototype.toString,F=s=>N.call(s),L=s=>"[object Object]"===F(s),R=s=>E(s)&&"NaN"!==s&&"-"!==s[0]&&""+parseInt(s,10)===s,B=o(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),M=s=>{const a=Object.create(null);return t=>a[t]||(a[t]=s(t))},$=/-(\w)/g,U=M((s=>s.replace($,((s,a)=>a?a.toUpperCase():"")))),V=/\B([A-Z])/g,H=M((s=>s.replace(V,"-$1").toLowerCase())),W=M((s=>s.charAt(0).toUpperCase()+s.slice(1))),G=M((s=>s?`on${W(s)}`:"")),K=(s,a)=>!Object.is(s,a),Q=(s,a)=>{for(let t=0;t{Object.defineProperty(s,a,{configurable:!0,enumerable:!1,value:t})},X=s=>{const a=parseFloat(s);return isNaN(a)?s:a};let J;const Z=[];class ss{constructor(s=!1){this.active=!0,this.effects=[],this.cleanups=[],!s&&J&&(this.parent=J,this.index=(J.scopes||(J.scopes=[])).push(this)-1)}run(s){if(this.active)try{return this.on(),s()}finally{this.off()}}on(){this.active&&(Z.push(this),J=this)}off(){this.active&&(Z.pop(),J=Z[Z.length-1])}stop(s){if(this.active){if(this.effects.forEach((s=>s.stop())),this.cleanups.forEach((s=>s())),this.scopes&&this.scopes.forEach((s=>s.stop(!0))),this.parent&&!s){const s=this.parent.scopes.pop();s&&s!==this&&(this.parent.scopes[this.index]=s,s.index=this.index)}this.active=!1}}}const as=s=>{const a=new Set(s);return a.w=0,a.n=0,a},ts=s=>(s.w&ps)>0,ns=s=>(s.n&ps)>0,es=new WeakMap;let ls=0,ps=1;const cs=[];let os;const ds=Symbol(""),rs=Symbol("");class is{constructor(s,a=null,t){this.fn=s,this.scheduler=a,this.active=!0,this.deps=[],function(s,a){(a=a||J)&&a.active&&a.effects.push(s)}(this,t)}run(){if(!this.active)return this.fn();if(!cs.includes(this))try{return cs.push(os=this),gs.push(us),us=!0,ps=1<<++ls,ls<=30?(({deps:s})=>{if(s.length)for(let a=0;a{const{deps:a}=s;if(a.length){let t=0;for(let n=0;n0?cs[s-1]:void 0}}stop(){this.active&&(hs(this),this.onStop&&this.onStop(),this.active=!1)}}function hs(s){const{deps:a}=s;if(a.length){for(let t=0;t{("length"===a||a>=n)&&c.push(s)}));else switch(void 0!==t&&c.push(p.get(t)),a){case"add":z(s)?R(t)&&c.push(p.get("length")):(c.push(p.get(ds)),P(s)&&c.push(p.get(rs)));break;case"delete":z(s)||(c.push(p.get(ds)),P(s)&&c.push(p.get(rs)));break;case"set":P(s)&&c.push(p.get(ds))}if(1===c.length)c[0]&&qs(c[0]);else{const s=[];for(const a of c)a&&s.push(...a);qs(as(s))}}function qs(s,a){for(const t of z(s)?s:[...s])(t!==os||t.allowRecurse)&&(t.scheduler?t.scheduler():t.run())}const xs=o("__proto__,__v_isRef,__isVue"),ws=new Set(Object.getOwnPropertyNames(Symbol).map((s=>Symbol[s])).filter(D)),_s=Ps(),ks=Ps(!1,!0),Ss=Ps(!0),Cs=zs();function zs(){const s={};return["includes","indexOf","lastIndexOf"].forEach((a=>{s[a]=function(...s){const t=ga(this);for(let a=0,e=this.length;a{s[a]=function(...s){js();const t=ga(this)[a].apply(this,s);return ms(),t}})),s}function Ps(s=!1,a=!1){return function(t,n,e){if("__v_isReactive"===n)return!s;if("__v_isReadonly"===n)return s;if("__v_raw"===n&&e===(s?a?pa:la:a?ea:na).get(t))return t;const l=z(t);if(!s&&l&&C(Cs,n))return Reflect.get(Cs,n,e);const p=Reflect.get(t,n,e);if(D(n)?ws.has(n):xs(n))return p;if(s||vs(t,0,n),a)return p;if(fa(p)){return!l||!R(n)?p.value:p}return T(p)?s?da(p):oa(p):p}}function Is(s=!1){return function(a,t,n,e){let l=a[t];if(!s&&(n=ga(n),l=ga(l),!z(a)&&fa(l)&&!fa(n)))return l.value=n,!0;const p=z(a)&&R(t)?Number(t)!0,deleteProperty:(s,a)=>!0},Ds=_({},Os,{get:ks,set:Is(!0)}),Ts=s=>T(s)?oa(s):s,As=s=>T(s)?da(s):s,Ns=s=>s,Fs=s=>Reflect.getPrototypeOf(s);function Ls(s,a,t=!1,n=!1){const e=ga(s=s.__v_raw),l=ga(a);a!==l&&!t&&vs(e,0,a),!t&&vs(e,0,l);const{has:p}=Fs(e),c=n?Ns:t?As:Ts;return p.call(e,a)?c(s.get(a)):p.call(e,l)?c(s.get(l)):void(s!==e&&s.get(a))}function Rs(s,a=!1){const t=this.__v_raw,n=ga(t),e=ga(s);return s!==e&&!a&&vs(n,0,s),!a&&vs(n,0,e),s===e?t.has(s):t.has(s)||t.has(e)}function Bs(s,a=!1){return s=s.__v_raw,!a&&vs(ga(s),0,ds),Reflect.get(s,"size",s)}function Ms(s){s=ga(s);const a=ga(this);return Fs(a).has.call(a,s)||(a.add(s),ys(a,"add",s,s)),this}function $s(s,a){a=ga(a);const t=ga(this),{has:n,get:e}=Fs(t);let l=n.call(t,s);l||(s=ga(s),l=n.call(t,s));const p=e.call(t,s);return t.set(s,a),l?K(a,p)&&ys(t,"set",s,a):ys(t,"add",s,a),this}function Us(s){const a=ga(this),{has:t,get:n}=Fs(a);let e=t.call(a,s);e||(s=ga(s),e=t.call(a,s)),n&&n.call(a,s);const l=a.delete(s);return e&&ys(a,"delete",s,void 0),l}function Vs(){const s=ga(this),a=0!==s.size,t=s.clear();return a&&ys(s,"clear",void 0,void 0),t}function Hs(s,a){return function(t,n){const e=this,l=e.__v_raw,p=ga(l),c=a?Ns:s?As:Ts;return!s&&vs(p,0,ds),l.forEach(((s,a)=>t.call(n,c(s),c(a),e)))}}function Ws(s,a,t){return function(...n){const e=this.__v_raw,l=ga(e),p=P(l),c="entries"===s||s===Symbol.iterator&&p,o="keys"===s&&p,d=e[s](...n),r=t?Ns:a?As:Ts;return!a&&vs(l,0,o?rs:ds),{next(){const{value:s,done:a}=d.next();return a?{value:s,done:a}:{value:c?[r(s[0]),r(s[1])]:r(s),done:a}},[Symbol.iterator](){return this}}}}function Gs(s){return function(...a){return"delete"!==s&&this}}function Ks(){const s={get(s){return Ls(this,s)},get size(){return Bs(this)},has:Rs,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!1)},a={get(s){return Ls(this,s,!1,!0)},get size(){return Bs(this)},has:Rs,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!0)},t={get(s){return Ls(this,s,!0)},get size(){return Bs(this,!0)},has(s){return Rs.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!1)},n={get(s){return Ls(this,s,!0,!0)},get size(){return Bs(this,!0)},has(s){return Rs.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((e=>{s[e]=Ws(e,!1,!1),t[e]=Ws(e,!0,!1),a[e]=Ws(e,!1,!0),n[e]=Ws(e,!0,!0)})),[s,t,a,n]}const[Qs,Ys,Xs,Js]=Ks();function Zs(s,a){const t=a?s?Js:Xs:s?Ys:Qs;return(a,n,e)=>"__v_isReactive"===n?!s:"__v_isReadonly"===n?s:"__v_raw"===n?a:Reflect.get(C(t,n)&&n in a?t:a,n,e)}const sa={get:Zs(!1,!1)},aa={get:Zs(!1,!0)},ta={get:Zs(!0,!1)},na=new WeakMap,ea=new WeakMap,la=new WeakMap,pa=new WeakMap;function ca(s){return s.__v_skip||!Object.isExtensible(s)?0:function(s){switch(s){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((s=>F(s).slice(8,-1))(s))}function oa(s){return s&&s.__v_isReadonly?s:ra(s,!1,Os,sa,na)}function da(s){return ra(s,!0,Es,ta,la)}function ra(s,a,t,n,e){if(!T(s))return s;if(s.__v_raw&&(!a||!s.__v_isReactive))return s;const l=e.get(s);if(l)return l;const p=ca(s);if(0===p)return s;const c=new Proxy(s,2===p?n:t);return e.set(s,c),c}function ia(s){return ha(s)?ia(s.__v_raw):!(!s||!s.__v_isReactive)}function ha(s){return!(!s||!s.__v_isReadonly)}function ua(s){return ia(s)||ha(s)}function ga(s){const a=s&&s.__v_raw;return a?ga(a):s}function ja(s){return Y(s,"__v_skip",!0),s}function ma(s){bs()&&((s=ga(s)).dep||(s.dep=as()),fs(s.dep))}function va(s,a){(s=ga(s)).dep&&qs(s.dep)}const ba=s=>T(s)?oa(s):s;function fa(s){return Boolean(s&&!0===s.__v_isRef)}class ya{constructor(s,a=!1){this._shallow=a,this.dep=void 0,this.__v_isRef=!0,this._rawValue=a?s:ga(s),this._value=a?s:ba(s)}get value(){return ma(this),this._value}set value(s){s=this._shallow?s:ga(s),K(s,this._rawValue)&&(this._rawValue=s,this._value=this._shallow?s:ba(s),va(this))}}function qa(s,a=!1){return fa(s)?s:new ya(s,a)}function xa(s){return fa(s)?s.value:s}const wa={get:(s,a,t)=>xa(Reflect.get(s,a,t)),set:(s,a,t,n)=>{const e=s[a];return fa(e)&&!fa(t)?(e.value=t,!0):Reflect.set(s,a,t,n)}};function _a(s){return ia(s)?s:new Proxy(s,wa)}class ka{constructor(s,a,t){this._setter=a,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new is(s,(()=>{this._dirty||(this._dirty=!0,va(this))})),this.__v_isReadonly=t}get value(){const s=ga(this);return ma(s),s._dirty&&(s._dirty=!1,s._value=s.effect.run()),s._value}set value(s){this._setter(s)}}function Sa(s,a){let t,n;O(s)?(t=s,n=f):(t=s.get,n=s.set);return new ka(t,n,O(s)||!s.set)}Promise.resolve();function Ca(s,a,...t){const n=s.vnode.props||v;let e=t;const l=a.startsWith("update:"),p=l&&a.slice(7);if(p&&p in n){const s=`${"modelValue"===p?"model":p}Modifiers`,{number:a,trim:l}=n[s]||v;l?e=t.map((s=>s.trim())):a&&(e=t.map(X))}let c,o=n[c=G(a)]||n[c=G(U(a))];!o&&l&&(o=n[c=G(H(a))]),o&&Gn(o,s,6,e);const d=n[c+"Once"];if(d){if(s.emitted){if(s.emitted[c])return}else s.emitted={};s.emitted[c]=!0,Gn(d,s,6,e)}}function za(s,a,t=!1){const n=a.emitsCache,e=n.get(s);if(void 0!==e)return e;const l=s.emits;let p={},c=!1;if(!O(s)){const n=s=>{const t=za(s,a,!0);t&&(c=!0,_(p,t))};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}return l||c?(z(l)?l.forEach((s=>p[s]=null)):_(p,l),n.set(s,p),p):(n.set(s,null),null)}function Pa(s,a){return!(!s||!x(a))&&(a=a.slice(2).replace(/Once$/,""),C(s,a[0].toLowerCase()+a.slice(1))||C(s,H(a))||C(s,a))}let Ia=null,Oa=null;function Ea(s){const a=Ia;return Ia=s,Oa=s&&s.type.__scopeId||null,a}function Da(s,a=Ia,t){if(!a)return s;if(s._n)return s;const n=(...t)=>{n._d&&dn(-1);const e=Ea(a),l=s(...t);return Ea(e),n._d&&dn(1),l};return n._n=!0,n._c=!0,n._d=!0,n}function Ta(s){const{type:a,vnode:t,proxy:n,withProxy:e,props:l,propsOptions:[p],slots:c,attrs:o,emit:d,render:r,renderCache:i,data:h,setupState:u,ctx:g,inheritAttrs:j}=s;let m;const v=Ea(s);try{let s;if(4&t.shapeFlag){const a=e||n;m=kn(r.call(a,a,i,l,u,h,g)),s=o}else{const t=a;0,m=kn(t.length>1?t(l,{attrs:o,slots:c,emit:d}):t(l,null)),s=a.props?o:Aa(o)}let v=m;if(s&&!1!==j){const a=Object.keys(s),{shapeFlag:t}=v;a.length&&(1&t||6&t)&&(p&&a.some(w)&&(s=Na(s,p)),v=qn(v,s))}0,t.dirs&&(v.dirs=v.dirs?v.dirs.concat(t.dirs):t.dirs),t.transition&&(v.transition=t.transition),m=v}catch(b){ln.length=0,Kn(b,s,1),m=yn(nn)}return Ea(v),m}const Aa=s=>{let a;for(const t in s)("class"===t||"style"===t||x(t))&&((a||(a={}))[t]=s[t]);return a},Na=(s,a)=>{const t={};for(const n in s)w(n)&&n.slice(9)in a||(t[n]=s[n]);return t};function Fa(s,a,t){const n=Object.keys(a);if(n.length!==Object.keys(s).length)return!0;for(let e=0;e1)return t&&O(a)?a.call(n.proxy):a}}const Ba=[Function,Array],Ma={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Ba,onEnter:Ba,onAfterEnter:Ba,onEnterCancelled:Ba,onBeforeLeave:Ba,onLeave:Ba,onAfterLeave:Ba,onLeaveCancelled:Ba,onBeforeAppear:Ba,onAppear:Ba,onAfterAppear:Ba,onAppearCancelled:Ba},setup(s,{slots:a}){const t=Fn(),n=function(){const s={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return ot((()=>{s.isMounted=!0})),it((()=>{s.isUnmounting=!0})),s}();let e;return()=>{const l=a.default&&Ga(a.default(),!0);if(!l||!l.length)return;const p=ga(s),{mode:c}=p,o=l[0];if(n.isLeaving)return Va(o);const d=Ha(o);if(!d)return Va(o);const r=Ua(d,p,n,t);Wa(d,r);const i=t.subTree,h=i&&Ha(i);let u=!1;const{getTransitionKey:g}=d.type;if(g){const s=g();void 0===e?e=s:s!==e&&(e=s,u=!0)}if(h&&h.type!==nn&&(!jn(d,h)||u)){const s=Ua(h,p,n,t);if(Wa(h,s),"out-in"===c)return n.isLeaving=!0,s.afterLeave=()=>{n.isLeaving=!1,t.update()},Va(o);"in-out"===c&&d.type!==nn&&(s.delayLeave=(s,a,t)=>{$a(n,h)[String(h.key)]=h,s._leaveCb=()=>{a(),s._leaveCb=void 0,delete r.delayedLeave},r.delayedLeave=t})}return o}}};function $a(s,a){const{leavingVNodes:t}=s;let n=t.get(a.type);return n||(n=Object.create(null),t.set(a.type,n)),n}function Ua(s,a,t,n){const{appear:e,mode:l,persisted:p=!1,onBeforeEnter:c,onEnter:o,onAfterEnter:d,onEnterCancelled:r,onBeforeLeave:i,onLeave:h,onAfterLeave:u,onLeaveCancelled:g,onBeforeAppear:j,onAppear:m,onAfterAppear:v,onAppearCancelled:b}=a,f=String(s.key),y=$a(t,s),q=(s,a)=>{s&&Gn(s,n,9,a)},x={mode:l,persisted:p,beforeEnter(a){let n=c;if(!t.isMounted){if(!e)return;n=j||c}a._leaveCb&&a._leaveCb(!0);const l=y[f];l&&jn(s,l)&&l.el._leaveCb&&l.el._leaveCb(),q(n,[a])},enter(s){let a=o,n=d,l=r;if(!t.isMounted){if(!e)return;a=m||o,n=v||d,l=b||r}let p=!1;const c=s._enterCb=a=>{p||(p=!0,q(a?l:n,[s]),x.delayedLeave&&x.delayedLeave(),s._enterCb=void 0)};a?(a(s,c),a.length<=1&&c()):c()},leave(a,n){const e=String(s.key);if(a._enterCb&&a._enterCb(!0),t.isUnmounting)return n();q(i,[a]);let l=!1;const p=a._leaveCb=t=>{l||(l=!0,n(),q(t?g:u,[a]),a._leaveCb=void 0,y[e]===s&&delete y[e])};y[e]=s,h?(h(a,p),h.length<=1&&p()):p()},clone:s=>Ua(s,a,t,n)};return x}function Va(s){if(Ya(s))return(s=qn(s)).children=null,s}function Ha(s){return Ya(s)?s.children?s.children[0]:void 0:s}function Wa(s,a){6&s.shapeFlag&&s.component?Wa(s.component.subTree,a):128&s.shapeFlag?(s.ssContent.transition=a.clone(s.ssContent),s.ssFallback.transition=a.clone(s.ssFallback)):s.transition=a}function Ga(s,a=!1){let t=[],n=0;for(let e=0;e1)for(let e=0;e!!s.type.__asyncLoader,Ya=s=>s.type.__isKeepAlive,Xa={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(s,{slots:a}){const t=Fn(),n=t.ctx;if(!n.renderer)return a.default;const e=new Map,l=new Set;let p=null;const c=t.suspense,{renderer:{p:o,m:d,um:r,o:{createElement:i}}}=n,h=i("div");function u(s){nt(s),r(s,t,c)}function g(s){e.forEach(((a,t)=>{const n=Hn(a.type);!n||s&&s(n)||j(t)}))}function j(s){const a=e.get(s);p&&a.type===p.type?p&&nt(p):u(a),e.delete(s),l.delete(s)}n.activate=(s,a,t,n,e)=>{const l=s.component;d(s,a,t,0,c),o(l.vnode,s,a,t,l,c,n,s.slotScopeIds,e),Wt((()=>{l.isDeactivated=!1,l.a&&Q(l.a);const a=s.props&&s.props.onVnodeMounted;a&&Qt(a,l.parent,s)}),c)},n.deactivate=s=>{const a=s.component;d(s,h,null,1,c),Wt((()=>{a.da&&Q(a.da);const t=s.props&&s.props.onVnodeUnmounted;t&&Qt(t,a.parent,s),a.isDeactivated=!0}),c)},ve((()=>[s.include,s.exclude]),(([s,a])=>{s&&g((a=>Ja(s,a))),a&&g((s=>!Ja(a,s)))}),{flush:"post",deep:!0});let m=null;const v=()=>{null!=m&&e.set(m,et(t.subTree))};return ot(v),rt(v),it((()=>{e.forEach((s=>{const{subTree:a,suspense:n}=t,e=et(a);if(s.type!==e.type)u(s);else{nt(e);const s=e.component.da;s&&Wt(s,n)}}))})),()=>{if(m=null,!a.default)return null;const t=a.default(),n=t[0];if(t.length>1)return p=null,t;if(!(gn(n)&&(4&n.shapeFlag||128&n.shapeFlag)))return p=null,n;let c=et(n);const o=c.type,d=Hn(Qa(c)?c.type.__asyncResolved||{}:o),{include:r,exclude:i,max:h}=s;if(r&&(!d||!Ja(r,d))||i&&d&&Ja(i,d))return p=c,n;const u=null==c.key?o:c.key,g=e.get(u);return c.el&&(c=qn(c),128&n.shapeFlag&&(n.ssContent=c)),m=u,g?(c.el=g.el,c.component=g.component,c.transition&&Wa(c,c.transition),c.shapeFlag|=512,l.delete(u),l.add(u)):(l.add(u),h&&l.size>parseInt(h,10)&&j(l.values().next().value)),c.shapeFlag|=256,p=c,n}}};function Ja(s,a){return z(s)?s.some((s=>Ja(s,a))):E(s)?s.split(",").indexOf(a)>-1:!!s.test&&s.test(a)}function Za(s,a){at(s,"a",a)}function st(s,a){at(s,"da",a)}function at(s,a,t=Nn){const n=s.__wdc||(s.__wdc=()=>{let a=t;for(;a;){if(a.isDeactivated)return;a=a.parent}s()});if(lt(a,n,t),t){let s=t.parent;for(;s&&s.parent;)Ya(s.parent.vnode)&&tt(n,a,t,s),s=s.parent}}function tt(s,a,t,n){const e=lt(a,s,n,!0);ht((()=>{k(n[a],e)}),t)}function nt(s){let a=s.shapeFlag;256&a&&(a-=256),512&a&&(a-=512),s.shapeFlag=a}function et(s){return 128&s.shapeFlag?s.ssContent:s}function lt(s,a,t=Nn,n=!1){if(t){const e=t[s]||(t[s]=[]),l=a.__weh||(a.__weh=(...n)=>{if(t.isUnmounted)return;js(),Ln(t);const e=Gn(a,t,s,n);return Rn(),ms(),e});return n?e.unshift(l):e.push(l),l}}const pt=s=>(a,t=Nn)=>(!Mn||"sp"===s)&<(s,a,t),ct=pt("bm"),ot=pt("m"),dt=pt("bu"),rt=pt("u"),it=pt("bum"),ht=pt("um"),ut=pt("sp"),gt=pt("rtg"),jt=pt("rtc");function mt(s,a=Nn){lt("ec",s,a)}let vt=!0;function bt(s){const a=qt(s),t=s.proxy,n=s.ctx;vt=!1,a.beforeCreate&&ft(a.beforeCreate,s,"bc");const{data:e,computed:l,methods:p,watch:c,provide:o,inject:d,created:r,beforeMount:i,mounted:h,beforeUpdate:u,updated:g,activated:j,deactivated:m,beforeDestroy:v,beforeUnmount:b,destroyed:y,unmounted:q,render:x,renderTracked:w,renderTriggered:_,errorCaptured:k,serverPrefetch:S,expose:C,inheritAttrs:P,components:I,directives:E,filters:D}=a;if(d&&function(s,a,t=f,n=!1){z(s)&&(s=kt(s));for(const e in s){const t=s[e];let l;l=T(t)?"default"in t?Ra(t.from||e,t.default,!0):Ra(t.from||e):Ra(t),fa(l)&&n?Object.defineProperty(a,e,{enumerable:!0,configurable:!0,get:()=>l.value,set:s=>l.value=s}):a[e]=l}}(d,n,null,s.appContext.config.unwrapInjectedRef),p)for(const f in p){const s=p[f];O(s)&&(n[f]=s.bind(t))}if(e){const a=e.call(t,t);T(a)&&(s.data=oa(a))}if(vt=!0,l)for(const z in l){const s=l[z],a=Sa({get:O(s)?s.bind(t,t):O(s.get)?s.get.bind(t,t):f,set:!O(s)&&O(s.set)?s.set.bind(t):f});Object.defineProperty(n,z,{enumerable:!0,configurable:!0,get:()=>a.value,set:s=>a.value=s})}if(c)for(const f in c)yt(c[f],n,t,f);if(o){const s=O(o)?o.call(t):o;Reflect.ownKeys(s).forEach((a=>{La(a,s[a])}))}function A(s,a){z(a)?a.forEach((a=>s(a.bind(t)))):a&&s(a.bind(t))}if(r&&ft(r,s,"c"),A(ct,i),A(ot,h),A(dt,u),A(rt,g),A(Za,j),A(st,m),A(mt,k),A(jt,w),A(gt,_),A(it,b),A(ht,q),A(ut,S),z(C))if(C.length){const a=s.exposed||(s.exposed={});C.forEach((s=>{Object.defineProperty(a,s,{get:()=>t[s],set:a=>t[s]=a})}))}else s.exposed||(s.exposed={});x&&s.render===f&&(s.render=x),null!=P&&(s.inheritAttrs=P),I&&(s.components=I),E&&(s.directives=E)}function ft(s,a,t){Gn(z(s)?s.map((s=>s.bind(a.proxy))):s.bind(a.proxy),a,t)}function yt(s,a,t,n){const e=n.includes(".")?ye(t,n):()=>t[n];if(E(s)){const t=a[s];O(t)&&ve(e,t)}else if(O(s))ve(e,s.bind(t));else if(T(s))if(z(s))s.forEach((s=>yt(s,a,t,n)));else{const n=O(s.handler)?s.handler.bind(t):a[s.handler];O(n)&&ve(e,n,s)}}function qt(s){const a=s.type,{mixins:t,extends:n}=a,{mixins:e,optionsCache:l,config:{optionMergeStrategies:p}}=s.appContext,c=l.get(a);let o;return c?o=c:e.length||t||n?(o={},e.length&&e.forEach((s=>xt(o,s,p,!0))),xt(o,a,p)):o=a,l.set(a,o),o}function xt(s,a,t,n=!1){const{mixins:e,extends:l}=a;l&&xt(s,l,t,!0),e&&e.forEach((a=>xt(s,a,t,!0)));for(const p in a)if(n&&"expose"===p);else{const n=wt[p]||t&&t[p];s[p]=n?n(s[p],a[p]):a[p]}return s}const wt={data:_t,props:Ct,emits:Ct,methods:Ct,computed:Ct,beforeCreate:St,created:St,beforeMount:St,mounted:St,beforeUpdate:St,updated:St,beforeDestroy:St,destroyed:St,activated:St,deactivated:St,errorCaptured:St,serverPrefetch:St,components:Ct,directives:Ct,watch:function(s,a){if(!s)return a;if(!a)return s;const t=_(Object.create(null),s);for(const n in a)t[n]=St(s[n],a[n]);return t},provide:_t,inject:function(s,a){return Ct(kt(s),kt(a))}};function _t(s,a){return a?s?function(){return _(O(s)?s.call(this,this):s,O(a)?a.call(this,this):a)}:a:s}function kt(s){if(z(s)){const a={};for(let t=0;t{o=!0;const[t,n]=Ot(s,a,!0);_(p,t),n&&c.push(...n)};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}if(!l&&!o)return n.set(s,b),b;if(z(l))for(let r=0;r-1,t[1]=n<0||a-1||C(t,"default"))&&c.push(s)}}}const d=[p,c];return n.set(s,d),d}function Et(s){return"$"!==s[0]}function Dt(s){const a=s&&s.toString().match(/^\s*function (\w+)/);return a?a[1]:null===s?"null":""}function Tt(s,a){return Dt(s)===Dt(a)}function At(s,a){return z(a)?a.findIndex((a=>Tt(a,s))):O(a)&&Tt(a,s)?0:-1}const Nt=s=>"_"===s[0]||"$stable"===s,Ft=s=>z(s)?s.map(kn):[kn(s)],Lt=(s,a,t)=>{const n=Da((s=>Ft(a(s))),t);return n._c=!1,n},Rt=(s,a,t)=>{const n=s._ctx;for(const e in s){if(Nt(e))continue;const t=s[e];if(O(t))a[e]=Lt(0,t,n);else if(null!=t){const s=Ft(t);a[e]=()=>s}}},Bt=(s,a)=>{const t=Ft(a);s.slots.default=()=>t};function Mt(s,a){if(null===Ia)return s;const t=Ia.proxy,n=s.dirs||(s.dirs=[]);for(let e=0;e(l.has(s)||(s&&O(s.install)?(l.add(s),s.install(c,...a)):O(s)&&(l.add(s),s(c,...a))),c),mixin:s=>(e.mixins.includes(s)||e.mixins.push(s),c),component:(s,a)=>a?(e.components[s]=a,c):e.components[s],directive:(s,a)=>a?(e.directives[s]=a,c):e.directives[s],mount(l,o,d){if(!p){const r=yn(t,n);return r.appContext=e,o&&a?a(r,l):s(r,l,d),p=!0,c._container=l,l.__vue_app__=c,r.component.proxy}},unmount(){p&&(s(null,c._container),delete c._container.__vue_app__)},provide:(s,a)=>(e.provides[s]=a,c)};return c}}const Wt=function(s,a){a&&a.pendingBranch?z(s)?a.effects.push(...s):a.effects.push(s):ie(s,ne,te,ee)};function Gt(s){return function(s,a){const{insert:t,remove:n,patchProp:e,createElement:l,createText:p,createComment:c,setText:o,setElementText:d,parentNode:r,nextSibling:i,setScopeId:h=f,cloneNode:u,insertStaticContent:g}=s,j=(s,a,t,n=null,e=null,l=null,p=!1,c=null,o=!!a.dynamicChildren)=>{if(s===a)return;s&&!jn(s,a)&&(n=as(s),G(s,e,l,!0),s=null),-2===a.patchFlag&&(o=!1,a.dynamicChildren=null);const{type:d,ref:r,shapeFlag:i}=a;switch(d){case tn:m(s,a,t,n);break;case nn:y(s,a,t,n);break;case en:null==s&&q(a,t,n,p);break;case an:D(s,a,t,n,e,l,p,c,o);break;default:1&i?k(s,a,t,n,e,l,p,c,o):6&i?T(s,a,t,n,e,l,p,c,o):(64&i||128&i)&&d.process(s,a,t,n,e,l,p,c,o,ns)}null!=r&&e&&Kt(r,s&&s.ref,l,a||s,!a)},m=(s,a,n,e)=>{if(null==s)t(a.el=p(a.children),n,e);else{const t=a.el=s.el;a.children!==s.children&&o(t,a.children)}},y=(s,a,n,e)=>{null==s?t(a.el=c(a.children||""),n,e):a.el=s.el},q=(s,a,t,n)=>{[s.el,s.anchor]=g(s.children,a,t,n)},x=({el:s,anchor:a},n,e)=>{let l;for(;s&&s!==a;)l=i(s),t(s,n,e),s=l;t(a,n,e)},w=({el:s,anchor:a})=>{let t;for(;s&&s!==a;)t=i(s),n(s),s=t;n(a)},k=(s,a,t,n,e,l,p,c,o)=>{p=p||"svg"===a.type,null==s?S(a,t,n,e,l,p,c,o):I(s,a,e,l,p,c,o)},S=(s,a,n,p,c,o,r,i)=>{let h,g;const{type:j,props:m,shapeFlag:v,transition:b,patchFlag:f,dirs:y}=s;if(s.el&&void 0!==u&&-1===f)h=s.el=u(s.el);else{if(h=s.el=l(s.type,o,m&&m.is,m),8&v?d(h,s.children):16&v&&P(s.children,h,null,p,c,o&&"foreignObject"!==j,r,i),y&&$t(s,null,p,"created"),m){for(const a in m)"value"===a||B(a)||e(h,a,null,m[a],o,s.children,p,c,Z);"value"in m&&e(h,"value",null,m.value),(g=m.onVnodeBeforeMount)&&Qt(g,p,s)}z(h,s,s.scopeId,r,p)}y&&$t(s,null,p,"beforeMount");const q=(!c||c&&!c.pendingBranch)&&b&&!b.persisted;q&&b.beforeEnter(h),t(h,a,n),((g=m&&m.onVnodeMounted)||q||y)&&Wt((()=>{g&&Qt(g,p,s),q&&b.enter(h),y&&$t(s,null,p,"mounted")}),c)},z=(s,a,t,n,e)=>{if(t&&h(s,t),n)for(let l=0;l{for(let d=o;d{const o=a.el=s.el;let{patchFlag:r,dynamicChildren:i,dirs:h}=a;r|=16&s.patchFlag;const u=s.props||v,g=a.props||v;let j;if((j=g.onVnodeBeforeUpdate)&&Qt(j,t,a,s),h&&$t(a,s,t,"beforeUpdate"),r>0){if(16&r)E(o,a,u,g,t,n,l);else if(2&r&&u.class!==g.class&&e(o,"class",null,g.class,l),4&r&&e(o,"style",u.style,g.style,l),8&r){const p=a.dynamicProps;for(let a=0;a{j&&Qt(j,t,a,s),h&&$t(a,s,t,"updated")}),n)},O=(s,a,t,n,e,l,p)=>{for(let c=0;c{if(t!==n){for(const o in n){if(B(o))continue;const d=n[o],r=t[o];d!==r&&"value"!==o&&e(s,o,r,d,c,a.children,l,p,Z)}if(t!==v)for(const o in t)B(o)||o in n||e(s,o,t[o],null,c,a.children,l,p,Z);"value"in n&&e(s,"value",t.value,n.value)}},D=(s,a,n,e,l,c,o,d,r)=>{const i=a.el=s?s.el:p(""),h=a.anchor=s?s.anchor:p("");let{patchFlag:u,dynamicChildren:g,slotScopeIds:j}=a;j&&(d=d?d.concat(j):j),null==s?(t(i,n,e),t(h,n,e),P(a.children,n,h,l,c,o,d,r)):u>0&&64&u&&g&&s.dynamicChildren?(O(s.dynamicChildren,g,n,l,c,o,d),(null!=a.key||l&&a===l.subTree)&&Yt(s,a,!0)):M(s,a,n,h,l,c,o,d,r)},T=(s,a,t,n,e,l,p,c,o)=>{a.slotScopeIds=c,null==s?512&a.shapeFlag?e.ctx.activate(a,t,n,p,o):N(a,t,n,e,l,p,o):F(s,a,o)},N=(s,a,t,n,e,l,p)=>{const c=s.component=function(s,a,t){const n=s.type,e=(a?a.appContext:s.appContext)||Tn,l={uid:An++,vnode:s,type:n,parent:a,appContext:e,root:null,next:null,subTree:null,update:null,scope:new ss(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:a?a.provides:Object.create(e.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Ot(n,e),emitsOptions:za(n,e),emit:null,emitted:null,propsDefaults:v,inheritAttrs:n.inheritAttrs,ctx:v,data:v,props:v,attrs:v,slots:v,refs:v,setupState:v,setupContext:null,suspense:t,suspenseId:t?t.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};l.ctx={_:l},l.root=a?a.root:l,l.emit=Ca.bind(null,l),s.ce&&s.ce(l);return l}(s,n,e);if(Ya(s)&&(c.ctx.renderer=ns),function(s,a=!1){Mn=a;const{props:t,children:n}=s.vnode,e=Bn(s);zt(s,t,e,a),((s,a)=>{if(32&s.vnode.shapeFlag){const t=a._;t?(s.slots=ga(a),Y(a,"_",t)):Rt(a,s.slots={})}else s.slots={},a&&Bt(s,a);Y(s.slots,mn,1)})(s,n);const l=e?function(s,a){const t=s.type;s.accessCache=Object.create(null),s.proxy=ja(new Proxy(s.ctx,Dn));const{setup:n}=t;if(n){const t=s.setupContext=n.length>1?function(s){const a=a=>{s.exposed=a||{}};let t;return{get attrs(){return t||(t=function(s){return new Proxy(s.attrs,{get:(a,t)=>(vs(s,0,"$attrs"),a[t])})}(s))},slots:s.slots,emit:s.emit,expose:a}}(s):null;Ln(s),js();const e=Wn(n,s,0,[s.props,t]);if(ms(),Rn(),A(e)){if(e.then(Rn,Rn),a)return e.then((a=>{$n(s,a)})).catch((a=>{Kn(a,s,0)}));s.asyncDep=e}else $n(s,e)}else Un(s)}(s,a):void 0;Mn=!1}(c),c.asyncDep){if(e&&e.registerDep(c,L),!s.el){const s=c.subTree=yn(nn);y(null,s,a,t)}}else L(c,s,a,t,e,l,p)},F=(s,a,t)=>{const n=a.component=s.component;if(function(s,a,t){const{props:n,children:e,component:l}=s,{props:p,children:c,patchFlag:o}=a,d=l.emitsOptions;if(a.dirs||a.transition)return!0;if(!(t&&o>=0))return!(!e&&!c||c&&c.$stable)||n!==p&&(n?!p||Fa(n,p,d):!!p);if(1024&o)return!0;if(16&o)return n?Fa(n,p,d):!!p;if(8&o){const s=a.dynamicProps;for(let a=0;aJn&&Xn.splice(a,1)}(n.update),n.update()}else a.component=s.component,a.el=s.el,n.vnode=a},L=(s,a,t,n,e,l,p)=>{const c=new is((()=>{if(s.isMounted){let a,{next:t,bu:n,u:o,parent:d,vnode:i}=s,h=t;t?(t.el=i.el,R(s,t,p)):t=i,c.allowRecurse=!1,n&&Q(n),(a=t.props&&t.props.onVnodeBeforeUpdate)&&Qt(a,d,t,i),c.allowRecurse=!0;const u=Ta(s),g=s.subTree;s.subTree=u,j(g,u,r(g.el),as(g),s,e,l),t.el=u.el,null===h&&function({vnode:s,parent:a},t){for(;a&&a.subTree===s;)(s=a.vnode).el=t,a=a.parent}(s,u.el),o&&Wt(o,e),(a=t.props&&t.props.onVnodeUpdated)&&Wt((()=>Qt(a,d,t,i)),e)}else{let p;const{el:o,props:d}=a,{bm:r,m:i,parent:h}=s;if(c.allowRecurse=!1,r&&Q(r),(p=d&&d.onVnodeBeforeMount)&&Qt(p,h,a),c.allowRecurse=!0,o&&ls){const t=()=>{s.subTree=Ta(s),ls(o,s.subTree,s,e,null)};Qa(a)?a.type.__asyncLoader().then((()=>!s.isUnmounted&&t())):t()}else{const p=s.subTree=Ta(s);j(null,p,t,n,s,e,l),a.el=p.el}if(i&&Wt(i,e),p=d&&d.onVnodeMounted){const s=a;Wt((()=>Qt(p,h,s)),e)}256&a.shapeFlag&&s.a&&Wt(s.a,e),s.isMounted=!0,a=t=n=null}}),(()=>de(s.update)),s.scope),o=s.update=c.run.bind(c);o.id=s.uid,c.allowRecurse=o.allowRecurse=!0,o()},R=(s,a,t)=>{a.component=s;const n=s.vnode.props;s.vnode=a,s.next=null,function(s,a,t,n){const{props:e,attrs:l,vnode:{patchFlag:p}}=s,c=ga(e),[o]=s.propsOptions;let d=!1;if(!(n||p>0)||16&p){let n;Pt(s,a,e,l)&&(d=!0);for(const l in c)a&&(C(a,l)||(n=H(l))!==l&&C(a,n))||(o?!t||void 0===t[l]&&void 0===t[n]||(e[l]=It(o,c,l,void 0,s,!0)):delete e[l]);if(l!==c)for(const s in l)a&&C(a,s)||(delete l[s],d=!0)}else if(8&p){const t=s.vnode.dynamicProps;for(let n=0;n{const{vnode:n,slots:e}=s;let l=!0,p=v;if(32&n.shapeFlag){const s=a._;s?t&&1===s?l=!1:(_(e,a),t||1!==s||delete e._):(l=!a.$stable,Rt(a,e)),p=a}else a&&(Bt(s,a),p={default:1});if(l)for(const c in e)Nt(c)||c in p||delete e[c]})(s,a.children,t),js(),he(void 0,s.update),ms()},M=(s,a,t,n,e,l,p,c,o=!1)=>{const r=s&&s.children,i=s?s.shapeFlag:0,h=a.children,{patchFlag:u,shapeFlag:g}=a;if(u>0){if(128&u)return void V(r,h,t,n,e,l,p,c,o);if(256&u)return void $(r,h,t,n,e,l,p,c,o)}8&g?(16&i&&Z(r,e,l),h!==r&&d(t,h)):16&i?16&g?V(r,h,t,n,e,l,p,c,o):Z(r,e,l,!0):(8&i&&d(t,""),16&g&&P(h,t,n,e,l,p,c,o))},$=(s,a,t,n,e,l,p,c,o)=>{a=a||b;const d=(s=s||b).length,r=a.length,i=Math.min(d,r);let h;for(h=0;hr?Z(s,e,l,!0,!1,i):P(a,t,n,e,l,p,c,o,i)},V=(s,a,t,n,e,l,p,c,o)=>{let d=0;const r=a.length;let i=s.length-1,h=r-1;for(;d<=i&&d<=h;){const n=s[d],r=a[d]=o?Sn(a[d]):kn(a[d]);if(!jn(n,r))break;j(n,r,t,null,e,l,p,c,o),d++}for(;d<=i&&d<=h;){const n=s[i],d=a[h]=o?Sn(a[h]):kn(a[h]);if(!jn(n,d))break;j(n,d,t,null,e,l,p,c,o),i--,h--}if(d>i){if(d<=h){const s=h+1,i=sh)for(;d<=i;)G(s[d],e,l,!0),d++;else{const u=d,g=d,m=new Map;for(d=g;d<=h;d++){const s=a[d]=o?Sn(a[d]):kn(a[d]);null!=s.key&&m.set(s.key,d)}let v,f=0;const y=h-g+1;let q=!1,x=0;const w=new Array(y);for(d=0;d=y){G(n,e,l,!0);continue}let r;if(null!=n.key)r=m.get(n.key);else for(v=g;v<=h;v++)if(0===w[v-g]&&jn(n,a[v])){r=v;break}void 0===r?G(n,e,l,!0):(w[r-g]=d+1,r>=x?x=r:q=!0,j(n,a[r],t,null,e,l,p,c,o),f++)}const _=q?function(s){const a=s.slice(),t=[0];let n,e,l,p,c;const o=s.length;for(n=0;n>1,s[t[c]]0&&(a[n]=t[l-1]),t[l]=n)}}l=t.length,p=t[l-1];for(;l-- >0;)t[l]=p,p=a[p];return t}(w):b;for(v=_.length-1,d=y-1;d>=0;d--){const s=g+d,i=a[s],h=s+1{const{el:p,type:c,transition:o,children:d,shapeFlag:r}=s;if(6&r)return void W(s.component.subTree,a,n,e);if(128&r)return void s.suspense.move(a,n,e);if(64&r)return void c.move(s,a,n,ns);if(c===an){t(p,a,n);for(let s=0;so.enter(p)),l);else{const{leave:s,delayLeave:e,afterLeave:l}=o,c=()=>t(p,a,n),d=()=>{s(p,(()=>{c(),l&&l()}))};e?e(p,c,d):d()}else t(p,a,n)},G=(s,a,t,n=!1,e=!1)=>{const{type:l,props:p,ref:c,children:o,dynamicChildren:d,shapeFlag:r,patchFlag:i,dirs:h}=s;if(null!=c&&Kt(c,null,t,s,!0),256&r)return void a.ctx.deactivate(s);const u=1&r&&h;let g;if((g=p&&p.onVnodeBeforeUnmount)&&Qt(g,a,s),6&r)J(s.component,t,n);else{if(128&r)return void s.suspense.unmount(t,n);u&&$t(s,null,a,"beforeUnmount"),64&r?s.type.remove(s,a,t,e,ns,n):d&&(l!==an||i>0&&64&i)?Z(d,a,t,!1,!0):(l===an&&(128&i||256&i)||!e&&16&r)&&Z(o,a,t),n&&K(s)}((g=p&&p.onVnodeUnmounted)||u)&&Wt((()=>{g&&Qt(g,a,s),u&&$t(s,null,a,"unmounted")}),t)},K=s=>{const{type:a,el:t,anchor:e,transition:l}=s;if(a===an)return void X(t,e);if(a===en)return void w(s);const p=()=>{n(t),l&&!l.persisted&&l.afterLeave&&l.afterLeave()};if(1&s.shapeFlag&&l&&!l.persisted){const{leave:a,delayLeave:n}=l,e=()=>a(t,p);n?n(s.el,p,e):e()}else p()},X=(s,a)=>{let t;for(;s!==a;)t=i(s),n(s),s=t;n(a)},J=(s,a,t)=>{const{bum:n,scope:e,update:l,subTree:p,um:c}=s;n&&Q(n),e.stop(),l&&(l.active=!1,G(p,s,a,t)),c&&Wt(c,a),Wt((()=>{s.isUnmounted=!0}),a),a&&a.pendingBranch&&!a.isUnmounted&&s.asyncDep&&!s.asyncResolved&&s.suspenseId===a.pendingId&&(a.deps--,0===a.deps&&a.resolve())},Z=(s,a,t,n=!1,e=!1,l=0)=>{for(let p=l;p6&s.shapeFlag?as(s.component.subTree):128&s.shapeFlag?s.suspense.next():i(s.anchor||s.el),ts=(s,a,t)=>{null==s?a._vnode&&G(a._vnode,null,null,!0):j(a._vnode||null,s,a,null,null,null,t),ue(),a._vnode=s},ns={p:j,um:G,m:W,r:K,mt:N,mc:P,pc:M,pbc:O,n:as,o:s};let es,ls;a&&([es,ls]=a(ns));return{render:ts,hydrate:es,createApp:Ht(ts,es)}}(s)}function Kt(s,a,t,n,e=!1){if(z(s))return void s.forEach(((s,l)=>Kt(s,a&&(z(a)?a[l]:a),t,n,e)));if(Qa(n)&&!e)return;const l=4&n.shapeFlag?Vn(n.component)||n.component.proxy:n.el,p=e?null:l,{i:c,r:o}=s,d=a&&a.r,r=c.refs===v?c.refs={}:c.refs,i=c.setupState;if(null!=d&&d!==o&&(E(d)?(r[d]=null,C(i,d)&&(i[d]=null)):fa(d)&&(d.value=null)),E(o)){const s=()=>{r[o]=p,C(i,o)&&(i[o]=p)};p?(s.id=-1,Wt(s,t)):s()}else if(fa(o)){const s=()=>{o.value=p};p?(s.id=-1,Wt(s,t)):s()}else O(o)&&Wn(o,c,12,[p,r])}function Qt(s,a,t,n=null){Gn(s,a,7,[t,n])}function Yt(s,a,t=!1){const n=s.children,e=a.children;if(z(n)&&z(e))for(let l=0;l0?pn||b:null,ln.pop(),pn=ln[ln.length-1]||null,on>0&&pn&&pn.push(s),s}function hn(s,a,t,n,e,l){return rn(fn(s,a,t,n,e,l,!0))}function un(s,a,t,n,e){return rn(yn(s,a,t,n,e,!0))}function gn(s){return!!s&&!0===s.__v_isVNode}function jn(s,a){return s.type===a.type&&s.key===a.key}const mn="__vInternal",vn=({key:s})=>null!=s?s:null,bn=({ref:s})=>null!=s?E(s)||fa(s)||O(s)?{i:Ia,r:s}:s:null;function fn(s,a=null,t=null,n=0,e=null,l=(s===an?0:1),p=!1,c=!1){const o={__v_isVNode:!0,__v_skip:!0,type:s,props:a,key:a&&vn(a),ref:a&&bn(a),scopeId:Oa,slotScopeIds:null,children:t,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:n,dynamicProps:e,dynamicChildren:null,appContext:null};return c?(Cn(o,t),128&l&&s.normalize(o)):t&&(o.shapeFlag|=E(t)?8:16),on>0&&!p&&pn&&(o.patchFlag>0||6&l)&&32!==o.patchFlag&&pn.push(o),o}const yn=function(s,a=null,t=null,n=0,e=null,l=!1){s&&s!==Jt||(s=nn);if(gn(s)){const n=qn(s,a,!0);return t&&Cn(n,t),n}p=s,O(p)&&"__vccOpts"in p&&(s=s.__vccOpts);var p;if(a){a=function(s){return s?ua(s)||mn in s?_({},s):s:null}(a);let{class:s,style:t}=a;s&&!E(s)&&(a.class=g(s)),T(t)&&(ua(t)&&!z(t)&&(t=_({},t)),a.style=r(t))}const c=E(s)?1:(s=>s.__isSuspense)(s)?128:(s=>s.__isTeleport)(s)?64:T(s)?4:O(s)?2:0;return fn(s,a,t,n,e,c,l,!0)};function qn(s,a,t=!1){const{props:n,ref:e,patchFlag:l,children:p}=s,c=a?function(...s){const a={};for(let t=0;ta(s,t,void 0,l&&l[t])));else{const t=Object.keys(s);e=new Array(t.length);for(let n=0,p=t.length;n!gn(s)||s.type!==nn&&!(s.type===an&&!In(s.children))))?s:null}const On=s=>s?Bn(s)?Vn(s)||s.proxy:On(s.parent):null,En=_(Object.create(null),{$:s=>s,$el:s=>s.vnode.el,$data:s=>s.data,$props:s=>s.props,$attrs:s=>s.attrs,$slots:s=>s.slots,$refs:s=>s.refs,$parent:s=>On(s.parent),$root:s=>On(s.root),$emit:s=>s.emit,$options:s=>qt(s),$forceUpdate:s=>()=>de(s.update),$nextTick:s=>oe.bind(s.proxy),$watch:s=>fe.bind(s)}),Dn={get({_:s},a){const{ctx:t,setupState:n,data:e,props:l,accessCache:p,type:c,appContext:o}=s;let d;if("$"!==a[0]){const c=p[a];if(void 0!==c)switch(c){case 0:return n[a];case 1:return e[a];case 3:return t[a];case 2:return l[a]}else{if(n!==v&&C(n,a))return p[a]=0,n[a];if(e!==v&&C(e,a))return p[a]=1,e[a];if((d=s.propsOptions[0])&&C(d,a))return p[a]=2,l[a];if(t!==v&&C(t,a))return p[a]=3,t[a];vt&&(p[a]=4)}}const r=En[a];let i,h;return r?("$attrs"===a&&vs(s,0,a),r(s)):(i=c.__cssModules)&&(i=i[a])?i:t!==v&&C(t,a)?(p[a]=3,t[a]):(h=o.config.globalProperties,C(h,a)?h[a]:void 0)},set({_:s},a,t){const{data:n,setupState:e,ctx:l}=s;if(e!==v&&C(e,a))e[a]=t;else if(n!==v&&C(n,a))n[a]=t;else if(C(s.props,a))return!1;return("$"!==a[0]||!(a.slice(1)in s))&&(l[a]=t,!0)},has({_:{data:s,setupState:a,accessCache:t,ctx:n,appContext:e,propsOptions:l}},p){let c;return void 0!==t[p]||s!==v&&C(s,p)||a!==v&&C(a,p)||(c=l[0])&&C(c,p)||C(n,p)||C(En,p)||C(e.config.globalProperties,p)}},Tn=Ut();let An=0;let Nn=null;const Fn=()=>Nn||Ia,Ln=s=>{Nn=s,s.scope.on()},Rn=()=>{Nn&&Nn.scope.off(),Nn=null};function Bn(s){return 4&s.vnode.shapeFlag}let Mn=!1;function $n(s,a,t){O(a)?s.render=a:T(a)&&(s.setupState=_a(a)),Un(s)}function Un(s,a,t){const n=s.type;s.render||(s.render=n.render||f),Ln(s),js(),bt(s),ms(),Rn()}function Vn(s){if(s.exposed)return s.exposeProxy||(s.exposeProxy=new Proxy(_a(ja(s.exposed)),{get:(a,t)=>t in a?a[t]:t in En?En[t](s):void 0}))}function Hn(s){return O(s)&&s.displayName||s.name}function Wn(s,a,t,n){let e;try{e=n?s(...n):s()}catch(l){Kn(l,a,t)}return e}function Gn(s,a,t,n){if(O(s)){const e=Wn(s,a,t,n);return e&&A(e)&&e.catch((s=>{Kn(s,a,t)})),e}const e=[];for(let l=0;l>>1;ge(Xn[n])ge(s)-ge(a))),ee=0;eenull==s.id?1/0:s.id;function je(s){Yn=!1,Qn=!0,he(s),Xn.sort(((s,a)=>ge(s)-ge(a)));try{for(Jn=0;Jns.value,r=!!s._shallow):ia(s)?(o=()=>s,n=!0):z(s)?(i=!0,r=s.some(ia),o=()=>s.map((s=>fa(s)?s.value:ia(s)?qe(s):O(s)?Wn(s,c,2):void 0))):o=O(s)?a?()=>Wn(s,c,2):()=>{if(!c||!c.isUnmounted)return d&&d(),Gn(s,c,3,[h])}:f,a&&n){const s=o;o=()=>qe(s())}let h=s=>{d=m.onStop=()=>{Wn(s,c,4)}},u=i?[]:me;const g=()=>{if(m.active)if(a){const s=m.run();(n||r||(i?s.some(((s,a)=>K(s,u[a]))):K(s,u)))&&(d&&d(),Gn(a,c,3,[s,u===me?void 0:u,h]),u=s)}else m.run()};let j;g.allowRecurse=!!a,j="sync"===e?g:"post"===e?()=>Wt(g,c&&c.suspense):()=>{!c||c.isMounted?function(s){ie(s,se,Zn,ae)}(g):g()};const m=new is(o,j);return a?t?g():u=m.run():"post"===e?Wt(m.run.bind(m),c&&c.suspense):m.run(),()=>{m.stop(),c&&c.scope&&k(c.scope.effects,m)}}function fe(s,a,t){const n=this.proxy,e=E(s)?s.includes(".")?ye(n,s):()=>n[s]:s.bind(n,n);let l;O(a)?l=a:(l=a.handler,t=a);const p=Nn;Ln(this);const c=be(e,l.bind(n),t);return p?Ln(p):Rn(),c}function ye(s,a){const t=a.split(".");return()=>{let a=s;for(let s=0;s{qe(s,a)}));else if(L(s))for(const t in s)qe(s[t],a);return s}function xe(s,a,t){const n=arguments.length;return 2===n?T(a)&&!z(a)?gn(a)?yn(s,null,[a]):yn(s,a):yn(s,null,a):(n>3?t=Array.prototype.slice.call(arguments,2):3===n&&gn(t)&&(t=[t]),yn(s,a,t))}const we="3.2.1",_e="undefined"!=typeof document?document:null,ke=new Map,Se={insert:(s,a,t)=>{a.insertBefore(s,t||null)},remove:s=>{const a=s.parentNode;a&&a.removeChild(s)},createElement:(s,a,t,n)=>{const e=a?_e.createElementNS("http://www.w3.org/2000/svg",s):_e.createElement(s,t?{is:t}:void 0);return"select"===s&&n&&null!=n.multiple&&e.setAttribute("multiple",n.multiple),e},createText:s=>_e.createTextNode(s),createComment:s=>_e.createComment(s),setText:(s,a)=>{s.nodeValue=a},setElementText:(s,a)=>{s.textContent=a},parentNode:s=>s.parentNode,nextSibling:s=>s.nextSibling,querySelector:s=>_e.querySelector(s),setScopeId(s,a){s.setAttribute(a,"")},cloneNode(s){const a=s.cloneNode(!0);return"_value"in s&&(a._value=s._value),a},insertStaticContent(s,a,t,n){const e=t?t.previousSibling:a.lastChild;let l=ke.get(s);if(!l){const a=_e.createElement("template");if(a.innerHTML=n?`${s}`:s,l=a.content,n){const s=l.firstChild;for(;s.firstChild;)l.appendChild(s.firstChild);l.removeChild(s)}ke.set(s,l)}return a.insertBefore(l.cloneNode(!0),t),[e?e.nextSibling:a.firstChild,t?t.previousSibling:a.lastChild]}};const Ce=/\s*!important$/;function ze(s,a,t){if(z(t))t.forEach((t=>ze(s,a,t)));else if(a.startsWith("--"))s.setProperty(a,t);else{const n=function(s,a){const t=Ie[a];if(t)return t;let n=U(a);if("filter"!==n&&n in s)return Ie[a]=n;n=W(n);for(let e=0;edocument.createEvent("Event").timeStamp&&(Ee=()=>performance.now());const s=navigator.userAgent.match(/firefox\/(\d+)/i);De=!!(s&&Number(s[1])<=53)}let Te=0;const Ae=Promise.resolve(),Ne=()=>{Te=0};function Fe(s,a,t,n,e=null){const l=s._vei||(s._vei={}),p=l[a];if(n&&p)p.value=n;else{const[t,c]=function(s){let a;if(Le.test(s)){let t;for(a={};t=s.match(Le);)s=s.slice(0,s.length-t[0].length),a[t[0].toLowerCase()]=!0}return[H(s.slice(2)),a]}(a);if(n){!function(s,a,t,n){s.addEventListener(a,t,n)}(s,t,l[a]=function(s,a){const t=s=>{const n=s.timeStamp||Ee();(De||n>=t.attached-1)&&Gn(function(s,a){if(z(a)){const t=s.stopImmediatePropagation;return s.stopImmediatePropagation=()=>{t.call(s),s._stopped=!0},a.map((s=>a=>!a._stopped&&s(a)))}return a}(s,t.value),a,5,[s])};return t.value=s,t.attached=(()=>Te||(Ae.then(Ne),Te=Ee()))(),t}(n,e),c)}else p&&(!function(s,a,t,n){s.removeEventListener(a,t,n)}(s,t,p,c),l[a]=void 0)}}const Le=/(?:Once|Passive|Capture)$/;const Re=/^on[a-z]/;const Be="transition",Me=(s,{slots:a})=>xe(Ma,function(s){const a={};for(const _ in s)_ in $e||(a[_]=s[_]);if(!1===s.css)return a;const{name:t="v",type:n,duration:e,enterFromClass:l=`${t}-enter-from`,enterActiveClass:p=`${t}-enter-active`,enterToClass:c=`${t}-enter-to`,appearFromClass:o=l,appearActiveClass:d=p,appearToClass:r=c,leaveFromClass:i=`${t}-leave-from`,leaveActiveClass:h=`${t}-leave-active`,leaveToClass:u=`${t}-leave-to`}=s,g=function(s){if(null==s)return null;if(T(s))return[He(s.enter),He(s.leave)];{const a=He(s);return[a,a]}}(e),j=g&&g[0],m=g&&g[1],{onBeforeEnter:v,onEnter:b,onEnterCancelled:f,onLeave:y,onLeaveCancelled:q,onBeforeAppear:x=v,onAppear:w=b,onAppearCancelled:k=f}=a,S=(s,a,t)=>{Ge(s,a?r:c),Ge(s,a?d:p),t&&t()},C=(s,a)=>{Ge(s,u),Ge(s,h),a&&a()},z=s=>(a,t)=>{const e=s?w:b,p=()=>S(a,s,t);Ue(e,[a,p]),Ke((()=>{Ge(a,s?o:l),We(a,s?r:c),Ve(e)||Ye(a,n,j,p)}))};return _(a,{onBeforeEnter(s){Ue(v,[s]),We(s,l),We(s,p)},onBeforeAppear(s){Ue(x,[s]),We(s,o),We(s,d)},onEnter:z(!1),onAppear:z(!0),onLeave(s,a){const t=()=>C(s,a);We(s,i),document.body.offsetHeight,We(s,h),Ke((()=>{Ge(s,i),We(s,u),Ve(y)||Ye(s,n,m,t)})),Ue(y,[s,t])},onEnterCancelled(s){S(s,!1),Ue(f,[s])},onAppearCancelled(s){S(s,!0),Ue(k,[s])},onLeaveCancelled(s){C(s),Ue(q,[s])}})}(s),a);Me.displayName="Transition";const $e={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Me.props=_({},Ma.props,$e);const Ue=(s,a=[])=>{z(s)?s.forEach((s=>s(...a))):s&&s(...a)},Ve=s=>!!s&&(z(s)?s.some((s=>s.length>1)):s.length>1);function He(s){return X(s)}function We(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.add(a))),(s._vtc||(s._vtc=new Set)).add(a)}function Ge(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.remove(a)));const{_vtc:t}=s;t&&(t.delete(a),t.size||(s._vtc=void 0))}function Ke(s){requestAnimationFrame((()=>{requestAnimationFrame(s)}))}let Qe=0;function Ye(s,a,t,n){const e=s._endId=++Qe,l=()=>{e===s._endId&&n()};if(t)return setTimeout(l,t);const{type:p,timeout:c,propCount:o}=function(s,a){const t=window.getComputedStyle(s),n=s=>(t[s]||"").split(", "),e=n("transitionDelay"),l=n("transitionDuration"),p=Xe(e,l),c=n("animationDelay"),o=n("animationDuration"),d=Xe(c,o);let r=null,i=0,h=0;a===Be?p>0&&(r=Be,i=p,h=l.length):"animation"===a?d>0&&(r="animation",i=d,h=o.length):(i=Math.max(p,d),r=i>0?p>d?Be:"animation":null,h=r?r===Be?l.length:o.length:0);const u=r===Be&&/\b(transform|all)(,|$)/.test(t.transitionProperty);return{type:r,timeout:i,propCount:h,hasTransform:u}}(s,a);if(!p)return n();const d=p+"end";let r=0;const i=()=>{s.removeEventListener(d,h),l()},h=a=>{a.target===s&&++r>=o&&i()};setTimeout((()=>{rJe(a)+Je(s[t]))))}function Je(s){return 1e3*Number(s.slice(0,-1).replace(",","."))}const Ze={beforeMount(s,{value:a},{transition:t}){s._vod="none"===s.style.display?"":s.style.display,t&&a?t.beforeEnter(s):sl(s,a)},mounted(s,{value:a},{transition:t}){t&&a&&t.enter(s)},updated(s,{value:a,oldValue:t},{transition:n}){!a!=!t&&(n?a?(n.beforeEnter(s),sl(s,!0),n.enter(s)):n.leave(s,(()=>{sl(s,!1)})):sl(s,a))},beforeUnmount(s,{value:a}){sl(s,a)}};function sl(s,a){s.style.display=a?s._vod:"none"}const al=_({patchProp:(s,a,t,n,e=!1,l,p,c,o)=>{"class"===a?function(s,a,t){const n=s._vtc;n&&(a=(a?[a,...n]:[...n]).join(" ")),null==a?s.removeAttribute("class"):t?s.setAttribute("class",a):s.className=a}(s,n,e):"style"===a?function(s,a,t){const n=s.style;if(t)if(E(t)){if(a!==t){const a=n.display;n.cssText=t,"_vod"in s&&(n.display=a)}}else{for(const s in t)ze(n,s,t[s]);if(a&&!E(a))for(const s in a)null==t[s]&&ze(n,s,"")}else s.removeAttribute("style")}(s,t,n):x(a)?w(a)||Fe(s,a,0,n,p):("."===a[0]?(a=a.slice(1),1):"^"===a[0]?(a=a.slice(1),0):function(s,a,t,n){if(n)return"innerHTML"===a||!!(a in s&&Re.test(a)&&O(t));if("spellcheck"===a||"draggable"===a)return!1;if("form"===a)return!1;if("list"===a&&"INPUT"===s.tagName)return!1;if("type"===a&&"TEXTAREA"===s.tagName)return!1;if(Re.test(a)&&E(t))return!1;return a in s}(s,a,n,e))?function(s,a,t,n,e,l,p){if("innerHTML"===a||"textContent"===a)return n&&p(n,e,l),void(s[a]=null==t?"":t);if("value"===a&&"PROGRESS"!==s.tagName){s._value=t;const n=null==t?"":t;return s.value!==n&&(s.value=n),void(null==t&&s.removeAttribute(a))}if(""===t||null==t){const n=typeof s[a];if(""===t&&"boolean"===n)return void(s[a]=!0);if(null==t&&"string"===n)return s[a]="",void s.removeAttribute(a);if("number"===n){try{s[a]=0}catch(c){}return void s.removeAttribute(a)}}try{s[a]=t}catch(o){}}(s,a,n,l,p,c,o):("true-value"===a?s._trueValue=n:"false-value"===a&&(s._falseValue=n),function(s,a,t,n,e){if(n&&a.startsWith("xlink:"))null==t?s.removeAttributeNS(Oe,a.slice(6,a.length)):s.setAttributeNS(Oe,a,t);else{const n=d(a);null==t||n&&!1===t?s.removeAttribute(a):s.setAttribute(a,n?"":t)}}(s,a,n,e))}},Se);let tl;const nl=(...s)=>{const a=(tl||(tl=Gt(al))).createApp(...s),{mount:t}=a;return a.mount=s=>{const n=function(s){if(E(s)){return document.querySelector(s)}return s}(s);if(!n)return;const e=a._component;O(e)||e.render||e.template||(e.template=n.innerHTML),n.innerHTML="";const l=t(n,!1,n instanceof SVGElement);return n instanceof Element&&(n.removeAttribute("v-cloak"),n.setAttribute("data-v-app","")),l},a};var el=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const ll=["href","innerHTML"],pl=["innerHTML"];var cl=el({name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const s=(this.item.title||this.item.name).split(" ");return`${s[0]} ${s.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(s,a,t,n,e,l){const p=Xt("router-link");return t.item.path?(cn(),un(p,{key:0,class:g({active:l.active}),to:l.path,innerHTML:l.itemName},null,8,["class","to","innerHTML"])):t.item.link?(cn(),hn("a",{key:1,href:t.item.link,innerHTML:l.itemName},null,8,ll)):(cn(),hn("a",{key:2,innerHTML:l.itemName},null,8,pl))}]]);const ol={name:"VanDocNav",components:{[cl.name]:cl},props:{lang:String,navConfig:Array},data:()=>({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:s}=window;this.top=Math.max(0,64-s)}}},dl={class:"van-doc-nav__title"};var rl=el(ol,[["render",function(s,a,t,n,e,l){const p=Xt("van-doc-nav-link");return cn(),hn("div",{class:"van-doc-nav",style:r(l.style)},[(cn(!0),hn(an,null,zn(t.navConfig,((s,a)=>(cn(),hn("div",{class:"van-doc-nav__group",key:a},[fn("div",dl,j(s.title),1),s.items?(cn(!0),hn(an,{key:0},zn(s.items,((s,a)=>(cn(),hn("div",{key:a,class:"van-doc-nav__item"},[yn(p,{item:s,base:l.base},null,8,["item","base"])])))),128)):_n("v-if",!0)])))),128))],4)}]]); -/*! @docsearch/js 3.0.0-alpha.33 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -function il(s){return(il="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function hl(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function ul(){return(ul=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t3)for(t=[t],l=3;l1&&Wl(e,a,t),a=Ml(t,e,e,s.__k,null,e.__e,a),"function"==typeof s.type&&(s.__d=a)))}function Gl(s,a,t,n,e,l,p,c,o){var d,r,i,h,u,g,j,m,v,b,f,y=a.type;if(void 0!==a.constructor)return null;null!=t.__h&&(o=t.__h,c=a.__e=t.__e,a.__h=null,l=[c]),(d=yl.__b)&&d(a);try{s:if("function"==typeof y){if(m=a.props,v=(d=y.contextType)&&n[d.__c],b=d?v?v.props.value:d.__:n,t.__c?j=(r=a.__c=t.__c).__=r.__E:("prototype"in y&&y.prototype.render?a.__c=r=new y(m,b):(a.__c=r=new Tl(m,b),r.constructor=y,r.render=Xl),v&&v.sub(r),r.props=m,r.state||(r.state={}),r.context=b,r.__n=n,i=r.__d=!0,r.__h=[]),null==r.__s&&(r.__s=r.state),null!=y.getDerivedStateFromProps&&(r.__s==r.state&&(r.__s=Pl({},r.__s)),Pl(r.__s,y.getDerivedStateFromProps(m,r.__s))),h=r.props,u=r.state,i)null==y.getDerivedStateFromProps&&null!=r.componentWillMount&&r.componentWillMount(),null!=r.componentDidMount&&r.__h.push(r.componentDidMount);else{if(null==y.getDerivedStateFromProps&&m!==h&&null!=r.componentWillReceiveProps&&r.componentWillReceiveProps(m,b),!r.__e&&null!=r.shouldComponentUpdate&&!1===r.shouldComponentUpdate(m,r.__s,b)||a.__v===t.__v){r.props=m,r.state=r.__s,a.__v!==t.__v&&(r.__d=!1),r.__v=a,a.__e=t.__e,a.__k=t.__k,r.__h.length&&p.push(r),Wl(a,c,s);break s}null!=r.componentWillUpdate&&r.componentWillUpdate(m,r.__s,b),null!=r.componentDidUpdate&&r.__h.push((function(){r.componentDidUpdate(h,u,g)}))}r.context=b,r.props=m,r.state=r.__s,(d=yl.__r)&&d(a),r.__d=!1,r.__v=a,r.__P=s,d=r.render(r.props,r.state,r.context),r.state=r.__s,null!=r.getChildContext&&(n=Pl(Pl({},n),r.getChildContext())),i||null==r.getSnapshotBeforeUpdate||(g=r.getSnapshotBeforeUpdate(h,u)),f=null!=d&&d.type==Dl&&null==d.key?d.props.children:d,Rl(s,Array.isArray(f)?f:[f],a,t,n,e,l,p,c,o),r.base=a.__e,a.__h=null,r.__h.length&&p.push(r),j&&(r.__E=r.__=null),r.__e=!1}else null==l&&a.__v===t.__v?(a.__k=t.__k,a.__e=t.__e):a.__e=function(s,a,t,n,e,l,p,c){var o,d,r,i,h,u=t.props,g=a.props;if(e="svg"===a.type||e,null!=l)for(o=0;o3)for(t=[t],l=3;l=t.__.length&&t.__.push({}),t.__[s]}function hp(s){return ep=1,up(xp,s)}function up(s,a,t){var n=ip(ap++,2);return n.t=s,n.__c||(n.__=[t?t(a):xp(void 0,a),function(s){var a=n.t(n.__[0],s);n.__[0]!==a&&(n.__=[a,n.__[1]],n.__c.setState({}))}],n.__c=tp),n.__}function gp(s,a){var t=ip(ap++,3);!yl.__s&&qp(t.__H,a)&&(t.__=s,t.__H=a,tp.__H.__h.push(t))}function jp(s,a){var t=ip(ap++,4);!yl.__s&&qp(t.__H,a)&&(t.__=s,t.__H=a,tp.__h.push(t))}function mp(s,a){var t=ip(ap++,7);return qp(t.__H,a)&&(t.__=s(),t.__H=a,t.__h=s),t.__}function vp(){lp.forEach((function(s){if(s.__P)try{s.__H.__h.forEach(fp),s.__H.__h.forEach(yp),s.__H.__h=[]}catch(a){s.__H.__h=[],yl.__e(a,s.__v)}})),lp=[]}yl.__b=function(s){tp=null,pp&&pp(s)},yl.__r=function(s){cp&&cp(s),ap=0;var a=(tp=s.__c).__H;a&&(a.__h.forEach(fp),a.__h.forEach(yp),a.__h=[])},yl.diffed=function(s){op&&op(s);var a=s.__c;a&&a.__H&&a.__H.__h.length&&(1!==lp.push(a)&&np===yl.requestAnimationFrame||((np=yl.requestAnimationFrame)||function(s){var a,t=function(){clearTimeout(n),bp&&cancelAnimationFrame(a),setTimeout(s)},n=setTimeout(t,100);bp&&(a=requestAnimationFrame(t))})(vp)),tp=void 0},yl.__c=function(s,a){a.some((function(s){try{s.__h.forEach(fp),s.__h=s.__h.filter((function(s){return!s.__||yp(s)}))}catch(t){a.some((function(s){s.__h&&(s.__h=[])})),a=[],yl.__e(t,s.__v)}})),dp&&dp(s,a)},yl.unmount=function(s){rp&&rp(s);var a=s.__c;if(a&&a.__H)try{a.__H.__.forEach(fp)}catch(t){yl.__e(t,a.__v)}};var bp="function"==typeof requestAnimationFrame;function fp(s){var a=tp;"function"==typeof s.__c&&s.__c(),tp=a}function yp(s){var a=tp;s.__c=s.__(),tp=a}function qp(s,a){return!s||s.length!==a.length||a.some((function(a,t){return a!==s[t]}))}function xp(s,a){return"function"==typeof a?a(s):a}function wp(s,a){for(var t in a)s[t]=a[t];return s}function _p(s,a){for(var t in s)if("__source"!==t&&!(t in a))return!0;for(var n in a)if("__source"!==n&&s[n]!==a[n])return!0;return!1}function kp(s){this.props=s}(kp.prototype=new Tl).isPureReactComponent=!0,kp.prototype.shouldComponentUpdate=function(s,a){return _p(this.props,s)||_p(this.state,a)};var Sp=yl.__b;yl.__b=function(s){s.type&&s.type.__f&&s.ref&&(s.props.ref=s.ref,s.ref=null),Sp&&Sp(s)};var Cp="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,zp=function(s,a){return null==s?null:Bl(Bl(s).map(a))},Pp={map:zp,forEach:zp,count:function(s){return s?Bl(s).length:0},only:function(s){var a=Bl(s);if(1!==a.length)throw"Children.only";return a[0]},toArray:Bl},Ip=yl.__e;function Op(s){return s&&(s.__c&&s.__c.__H&&(s.__c.__H.__.forEach((function(s){"function"==typeof s.__c&&s.__c()})),s.__c.__H=null),(s=wp({},s)).__c=null,s.__k=s.__k&&s.__k.map(Op)),s}function Ep(s){return s&&(s.__v=null,s.__k=s.__k&&s.__k.map(Ep)),s}function Dp(){this.__u=0,this.t=null,this.__b=null}function Tp(s){var a=s.__.__c;return a&&a.__e&&a.__e(s)}function Ap(){this.u=null,this.o=null}yl.__e=function(s,a,t){if(s.then)for(var n,e=a;e=e.__;)if((n=e.__c)&&n.__c)return null==a.__e&&(a.__e=t.__e,a.__k=t.__k),n.__c(s,a);Ip(s,a,t)},(Dp.prototype=new Tl).__c=function(s,a){var t=a.__c,n=this;null==n.t&&(n.t=[]),n.t.push(t);var e=Tp(n.__v),l=!1,p=function(){l||(l=!0,t.componentWillUnmount=t.__c,e?e(c):c())};t.__c=t.componentWillUnmount,t.componentWillUnmount=function(){p(),t.__c&&t.__c()};var c=function(){var s;if(!--n.__u)for(n.__v.__k[0]=Ep(n.state.__e),n.setState({__e:n.__b=null});s=n.t.pop();)s.forceUpdate()};!0===a.__h||n.__u++||n.setState({__e:n.__b=n.__v.__k[0]}),s.then(p,p)},Dp.prototype.componentWillUnmount=function(){this.t=[]},Dp.prototype.render=function(s,a){this.__b&&(this.__v.__k&&(this.__v.__k[0]=Op(this.__b)),this.__b=null);var t=a.__e&&Ol(Dl,null,s.fallback);return t&&(t.__h=null),[Ol(Dl,null,a.__e?null:s.children),t]};var Np=function(s,a,t){if(++t[1]===t[0]&&s.o.delete(a),s.props.revealOrder&&("t"!==s.props.revealOrder[0]||!s.o.size))for(t=s.u;t;){for(;t.length>3;)t.pop()();if(t[1]s.length)&&(a=s.length);for(var t=0,n=new Array(a);t=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["translations"]),l=n.buttonText,p=void 0===l?"Search":l,c=n.buttonAriaLabel,o=void 0===c?"Search":c,d=function(s,a){return function(s){if(Array.isArray(s))return s}(s)||function(s,a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s)){var t=[],n=!0,e=!1,l=void 0;try{for(var p,c=s[Symbol.iterator]();!(n=(p=c.next()).done)&&(t.push(p.value),!a||t.length!==a);n=!0);}catch(o){e=!0,l=o}finally{try{n||null==c.return||c.return()}finally{if(e)throw l}}return t}}(s,a)||function(s,a){if(s){if("string"==typeof s)return nc(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?nc(s,a):void 0}}(s,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(hp(null),2),r=d[0],i=d[1];return gp((function(){"undefined"!=typeof navigator&&i(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl")}),[]),Zp.createElement("button",tc({type:"button",className:"DocSearch DocSearch-Button","aria-label":o},e,{ref:a}),Zp.createElement("span",{className:"DocSearch-Button-Container"},Zp.createElement(ac,null),Zp.createElement("span",{className:"DocSearch-Button-Placeholder"},p)),null!==r&&Zp.createElement("span",{className:"DocSearch-Button-Keys"},Zp.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===r?Zp.createElement(sc,null):r),Zp.createElement("span",{className:"DocSearch-Button-Key"},"K")))}));function lc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function pc(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function cc(s){return s.reduce((function(s,a){return s.concat(a)}),[])}var oc=0;function dc(s){return 0===s.collections.length?0:s.collections.reduce((function(s,a){return s+a.items.length}),0)}function rc(s,a,t,n){if(null===a&&s<0)return t-1;if(null!==n&&0===a&&s<0)return t-1;var e=(null===a?-1:a)+s;return e<=-1||e>=t?null===n?null:0:e}var ic=function(){};function hc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function uc(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function gc(s){var a,t,n=s.state,e=(t=(a={state:n}.state).collections.map((function(s){return s.items.length})).reduce((function(s,a,t){var n=(s[t-1]||0)+a;return s.push(n),s}),[]).reduce((function(s,t){return t<=a.selectedItemId?s+1:s}),0),a.collections[t]);if(!e)return null;var l=e.items[function(s){for(var a=s.state,t=s.collection,n=!1,e=0,l=0;!1===n;){var p=a.collections[e];if(p===t){n=!0;break}l+=p.items.length,e++}return a.selectedItemId-l}({state:n,collection:e})],p=e.source;return{item:l,itemInputValue:p.getItemInputValue({item:l,state:n}),itemUrl:p.getItemUrl({item:l,state:n}),source:p}}function jc(s,a){return s===a||s.contains&&s.contains(a)}function mc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function vc(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t0}},s),{},{id:null!==(a=s.id)&&void 0!==a?a:"autocomplete-".concat(oc++),initialState:xc({selectedItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},s.initialState),plugins:n,onStateChange:function(a){var t;null===(t=s.onStateChange)||void 0===t||t.call(s,a),n.forEach((function(s){var t;null===(t=s.onStateChange)||void 0===t||t.call(s,a)}))},onSubmit:function(a){var t;null===(t=s.onSubmit)||void 0===t||t.call(s,a),n.forEach((function(s){var t;null===(t=s.onSubmit)||void 0===t||t.call(s,a)}))},getSources:function(a){return Promise.all([].concat(function(s){return function(s){if(Array.isArray(s))return yc(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return yc(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?yc(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(n.map((function(s){return s.getSources}))),[s.getSources]).filter(Boolean).map((function(s){return t=s,n=a,Promise.resolve(t(n)).then((function(s){return Promise.all(s.filter(Boolean).map((function(s){return Promise.resolve(function(s){return function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}function Oc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Ec(s){for(var a=1;a0});case"blur":return a.props.debug?s:Nc(Nc({},s),{},{isOpen:!1,selectedItemId:null});case"mousemove":return Nc(Nc({},s),{},{selectedItemId:a.payload});case"mouseleave":return Nc(Nc({},s),{},{selectedItemId:a.props.defaultSelectedItemId});default:return s}};function Rc(s){var a,t=_c(s),n=function(s,a){var t=a.initialState;return{getState:function(){return t},send:function(n,e){var l=function(s){for(var a=1;a0)&&Pc({query:a.getState().completion||a.getState().query,event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d}),a.send("focus",null)}var i="ontouchstart"in t.environment,h=s||{},u=(h.inputElement,h.maxLength),g=void 0===u?512:u,j=Ic(h,["inputElement","maxLength"]);return Ec({"aria-autocomplete":"both","aria-activedescendant":a.getState().isOpen&&null!==a.getState().selectedItemId?"".concat(t.id,"-item-").concat(a.getState().selectedItemId):void 0,"aria-controls":a.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:a.getState().completion||a.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:g,type:"search",onChange:function(s){Pc({query:s.currentTarget.value.slice(0,g),event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d})},onKeyDown:function(s){!function(s){var a=s.event,t=s.store,n=s.props,e=s.setSelectedItemId,l=s.setQuery,p=s.setCollections,c=s.setIsOpen,o=s.setStatus,d=s.setContext,r=s.refresh;if("ArrowUp"===a.key||"ArrowDown"===a.key){a.preventDefault(),t.send(a.key,null);var i=n.environment.document.getElementById("".concat(n.id,"-item-").concat(t.getState().selectedItemId));i&&(i.scrollIntoViewIfNeeded?i.scrollIntoViewIfNeeded(!1):i.scrollIntoView(!1));var h=gc({state:t.getState()});if(null!==t.getState().selectedItemId&&h){var u=h.item,g=h.itemInputValue,j=h.itemUrl,m=h.source;m.onHighlight({item:u,itemInputValue:g,itemUrl:j,source:m,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a})}}else if("Escape"===a.key)a.preventDefault(),t.send(a.key,null);else if("Enter"===a.key){if(null===t.getState().selectedItemId||t.getState().collections.every((function(s){return 0===s.items.length})))return;a.preventDefault();var v=gc({state:t.getState()}),b=v.item,f=v.itemInputValue,y=v.itemUrl,q=v.source;if(a.metaKey||a.ctrlKey)void 0!==y&&(q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a}),n.navigator.navigateNewTab({itemUrl:y,item:b,state:t.getState()}));else if(a.shiftKey)void 0!==y&&(q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a}),n.navigator.navigateNewWindow({itemUrl:y,item:b,state:t.getState()}));else if(a.altKey);else{if(void 0!==y)return q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a}),void n.navigator.navigate({itemUrl:y,item:b,state:t.getState()});Pc({query:f,event:a,store:t,props:n,setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,nextState:{isOpen:!1},refresh:r}).then((function(){q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a})}))}}}({event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d})},onFocus:r,onBlur:function(){i||a.send("blur",null)},onClick:function(n){s.inputElement!==t.environment.document.activeElement||a.getState().isOpen||r(n)}},j)},getPanelProps:function(s){return Ec({onMouseDown:function(s){s.preventDefault()},onMouseLeave:function(){a.send("mouseleave",null)}},s)},getListProps:function(s){return Ec({role:"listbox","aria-labelledby":"".concat(t.id,"-label"),id:"".concat(t.id,"-list")},s)},getItemProps:function(s){var r=s.item,i=s.source,h=Ic(s,["item","source"]);return Ec({id:"".concat(t.id,"-item-").concat(r.__autocomplete_id),role:"option","aria-selected":a.getState().selectedItemId===r.__autocomplete_id,onMouseMove:function(s){if(r.__autocomplete_id!==a.getState().selectedItemId){a.send("mousemove",r.__autocomplete_id);var t=gc({state:a.getState()});if(null!==a.getState().selectedItemId&&t){var d=t.item,i=t.itemInputValue,h=t.itemUrl,u=t.source;u.onHighlight({item:d,itemInputValue:i,itemUrl:h,source:u,state:a.getState(),setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,event:s})}}},onMouseDown:function(s){s.preventDefault()},onClick:function(s){var h=i.getItemInputValue({item:r,state:a.getState()}),u=i.getItemUrl({item:r,state:a.getState()});(u?Promise.resolve():Pc({query:h,event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d,nextState:{isOpen:!1}})).then((function(){i.onSelect({item:r,itemInputValue:h,itemUrl:u,source:i,state:a.getState(),setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,event:s})}))}},h)}}}({store:n,props:t,setSelectedItemId:l,setQuery:p,setCollections:c,setIsOpen:o,setStatus:d,setContext:r,refresh:y}),h=i.getEnvironmentProps,u=i.getRootProps,g=i.getFormProps,j=i.getLabelProps,m=i.getInputProps,v=i.getPanelProps,b=i.getListProps,f=i.getItemProps;function y(){return Pc({query:n.getState().query,event:new Event("input"),store:n,props:t,setSelectedItemId:l,setQuery:p,setCollections:c,setIsOpen:o,setStatus:d,setContext:r,nextState:{isOpen:n.getState().isOpen},refresh:y})}return{setSelectedItemId:l,setQuery:p,setCollections:c,setIsOpen:o,setStatus:d,setContext:r,getEnvironmentProps:h,getRootProps:u,getFormProps:g,getInputProps:m,getLabelProps:j,getPanelProps:v,getListProps:b,getItemProps:f,refresh:y}}function Bc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Mc(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t0&&Zp.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},Zp.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),Zp.createElement("ul",null,a.slice(0,3).reduce((function(a,t){return[].concat(function(s){return function(s){if(Array.isArray(s))return lo(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return lo(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?lo(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(a),[Zp.createElement("li",{key:t},Zp.createElement("button",{className:"DocSearch-Prefill",key:t,onClick:function(){s.setQuery(t.toLowerCase()+" "),s.refresh(),s.inputRef.current.focus()}},t))])}),[]))),Zp.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",Zp.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(s.indexName,']+Missing+results+for+query+"').concat(s.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function co(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function oo(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:io(a,"_snippetResult.".concat(t,".value"))||io(a,t)}}))}function uo(s,a){return function(s){if(Array.isArray(s))return s}(s)||function(s,a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s)){var t=[],n=!0,e=!1,l=void 0;try{for(var p,c=s[Symbol.iterator]();!(n=(p=c.next()).done)&&(t.push(p.value),!a||t.length!==a);n=!0);}catch(o){e=!0,l=o}finally{try{n||null==c.return||c.return()}finally{if(e)throw l}}return t}}(s,a)||function(s,a){if(s){if("string"==typeof s)return go(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?go(s,a):void 0}}(s,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function go(s,a){(null==a||a>s.length)&&(a=s.length);for(var t=0,n=new Array(a);t0}));return s.state.query?!1===a?Zp.createElement(po,s):Zp.createElement(fo,s):Zp.createElement(qo,xo({},s,{hasCollections:a}))}),(function(s,a){return"loading"===a.state.status||"stalled"===a.state.status}));function _o(){return(_o=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(a,["_highlightResult","_snippetResult"])),p=l.findIndex((function(s){return s.objectID===t.objectID}));p>-1&&l.splice(p,1),l.unshift(t),l=l.slice(0,n),e.setItem(l)},remove:function(s){l=l.filter((function(a){return a.objectID!==s.objectID})),e.setItem(l)},getAll:function(){return l}}}function Co(s){var a,t="algoliasearch-client-js-".concat(s.key),n=function(){return void 0===a&&(a=s.localStorage||window.localStorage),a},e=function(){return JSON.parse(n().getItem(t)||"{}")};return{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var t=JSON.stringify(s),n=e()[t];return Promise.all([n||a(),void 0!==n])})).then((function(s){var a=ml(s,2),n=a[0],e=a[1];return Promise.all([n,e||t.miss(n)])})).then((function(s){return ml(s,1)[0]}))},set:function(s,a){return Promise.resolve().then((function(){var l=e();return l[JSON.stringify(s)]=a,n().setItem(t,JSON.stringify(l)),a}))},delete:function(s){return Promise.resolve().then((function(){var a=e();delete a[JSON.stringify(s)],n().setItem(t,JSON.stringify(a))}))},clear:function(){return Promise.resolve().then((function(){n().removeItem(t)}))}}}function zo(s){var a=vl(s.caches),t=a.shift();return void 0===t?{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},n=a();return n.then((function(s){return Promise.all([s,t.miss(s)])})).then((function(s){return ml(s,1)[0]}))},set:function(s,a){return Promise.resolve(a)},delete:function(s){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(s,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t.get(s,n,e).catch((function(){return zo({caches:a}).get(s,n,e)}))},set:function(s,n){return t.set(s,n).catch((function(){return zo({caches:a}).set(s,n)}))},delete:function(s){return t.delete(s).catch((function(){return zo({caches:a}).delete(s)}))},clear:function(){return t.clear().catch((function(){return zo({caches:a}).clear()}))}}}function Po(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},a={};return{get:function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},l=JSON.stringify(t);if(l in a)return Promise.resolve(s.serializable?JSON.parse(a[l]):a[l]);var p=n(),c=e&&e.miss||function(){return Promise.resolve()};return p.then((function(s){return c(s)})).then((function(){return p}))},set:function(t,n){return a[JSON.stringify(t)]=s.serializable?JSON.stringify(n):n,Promise.resolve(n)},delete:function(s){return delete a[JSON.stringify(s)],Promise.resolve()},clear:function(){return a={},Promise.resolve()}}}function Io(s){for(var a=s.length-1;a>0;a--){var t=Math.floor(Math.random()*(a+1)),n=s[a];s[a]=s[t],s[t]=n}return s}function Oo(s,a){return a?(Object.keys(a).forEach((function(t){s[t]=a[t](s)})),s):s}function Eo(s){for(var a=arguments.length,t=new Array(a>1?a-1:0),n=1;n0?n:void 0,timeout:t.timeout||a,headers:t.headers||{},queryParameters:t.queryParameters||{},cacheable:t.cacheable}}var No={Read:1,Write:2,Any:3};function Fo(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return jl(jl({},s),{},{status:a,lastUpdate:Date.now()})}function Lo(s){return"string"==typeof s?{protocol:"https",url:s,accept:No.Any}:{protocol:s.protocol||"https",url:s.url,accept:s.accept||No.Any}}var Ro="POST";function Bo(s,a,t,n){var e,l,p,c=[],o=function(s,a){if("GET"!==s.method&&(void 0!==s.data||void 0!==a.data)){var t=Array.isArray(s.data)?s.data:jl(jl({},s.data),a.data);return JSON.stringify(t)}}(t,n),d=(e=n,l=jl(jl({},s.headers),e.headers),p={},Object.keys(l).forEach((function(s){var a=l[s];p[s.toLowerCase()]=a})),p),r=t.method,i="GET"!==t.method?{}:jl(jl({},t.data),n.data),h=jl(jl(jl({"x-algolia-agent":s.userAgent.value},s.queryParameters),i),n.queryParameters),u=0,g=function a(e,l){var p=e.pop();if(void 0===p)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Vo(c)};var i={data:o,headers:d,method:r,url:$o(p,t.path,h),connectTimeout:l(u,s.timeouts.connect),responseTimeout:l(u,n.timeout)},g=function(s){var a={request:i,response:s,host:p,triesLeft:e.length};return c.push(a),a},j={onSucess:function(s){return function(s){try{return JSON.parse(s.content)}catch(a){throw{name:"DeserializationError",message:a.message,response:s}}}(s)},onRetry:function(t){var n=g(t);return t.isTimedOut&&u++,Promise.all([s.logger.info("Retryable failure",Ho(n)),s.hostsCache.set(p,Fo(p,t.isTimedOut?3:2))]).then((function(){return a(e,l)}))},onFail:function(s){throw g(s),function(s,a){var t=s.content,n=s.status,e=t;try{e=JSON.parse(t).message}catch(l){}return{name:"ApiError",message:e,status:n,transporterStackTrace:a}}(s,Vo(c))}};return s.requester.send(i).then((function(s){return t=j,e=(n=a=s).status,n.isTimedOut||function(s){var a=s.isTimedOut,t=s.status;return!a&&0==~~t}(n)||2!=~~(e/100)&&4!=~~(e/100)?t.onRetry(a):2==~~(a.status/100)?t.onSucess(a):t.onFail(a);var a,t,n,e}))};return function(s,a){return Promise.all(a.map((function(a){return s.get(a,(function(){return Promise.resolve(Fo(a))}))}))).then((function(s){var t=s.filter((function(s){return 1===(a=s).status||Date.now()-a.lastUpdate>12e4;var a})),n=s.filter((function(s){return 3===(a=s).status&&Date.now()-a.lastUpdate<=12e4;var a})),e=[].concat(vl(t),vl(n));return{getTimeout:function(s,a){return(0===n.length&&0===s?1:n.length+3+s)*a},statelessHosts:e.length>0?e.map((function(s){return Lo(s)})):a}}))}(s.hostsCache,a).then((function(s){return g(vl(s.statelessHosts).reverse(),s.getTimeout)}))}function Mo(s){var a={value:"Algolia for JavaScript (".concat(s,")"),add:function(s){var t="; ".concat(s.segment).concat(void 0!==s.version?" (".concat(s.version,")"):"");return-1===a.value.indexOf(t)&&(a.value="".concat(a.value).concat(t)),a}};return a}function $o(s,a,t){var n=Uo(t),e="".concat(s.protocol,"://").concat(s.url,"/").concat("/"===a.charAt(0)?a.substr(1):a);return n.length&&(e+="?".concat(n)),e}function Uo(s){return Object.keys(s).map((function(a){return Eo("%s=%s",a,(t=s[a],"[object Object]"===Object.prototype.toString.call(t)||"[object Array]"===Object.prototype.toString.call(t)?JSON.stringify(s[a]):s[a]));var t})).join("&")}function Vo(s){return s.map((function(s){return Ho(s)}))}function Ho(s){var a=s.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return jl(jl({},s),{},{request:jl(jl({},s.request),{},{headers:jl(jl({},s.request.headers),a)})})}var Wo=function(s){return function(a){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={transporter:s.transporter,appId:s.appId,indexName:a};return Oo(n,t.methods)}},Go=function(s){return function(a,t){var n=a.map((function(s){return jl(jl({},s),{},{params:Uo(s.params||{})})}));return s.transporter.read({method:Ro,path:"1/indexes/*/queries",data:{requests:n},cacheable:!0},t)}},Ko=function(s){return function(a,t){return Promise.all(a.map((function(a){var n=a.params,e=n.facetName,l=n.facetQuery,p=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(n,["facetName","facetQuery"]);return Wo(s)(a.indexName,{methods:{searchForFacetValues:Xo}}).searchForFacetValues(e,l,jl(jl({},t),p))})))}},Qo=function(s){return function(a,t,n){return s.transporter.read({method:Ro,path:Eo("1/answers/%s/prediction",s.indexName),data:{query:a,queryLanguages:t},cacheable:!0},n)}},Yo=function(s){return function(a,t){return s.transporter.read({method:Ro,path:Eo("1/indexes/%s/query",s.indexName),data:{query:a},cacheable:!0},t)}},Xo=function(s){return function(a,t,n){return s.transporter.read({method:Ro,path:Eo("1/indexes/%s/facets/%s/query",s.indexName,a),data:{facetQuery:t},cacheable:!0},n)}};function Jo(s,a,t){return function(s){var a,t,n,e,l=s.appId,p=(a=void 0!==s.authMode?s.authMode:To,t=l,n=s.apiKey,e={"x-algolia-api-key":n,"x-algolia-application-id":t},{headers:function(){return a===To?e:{}},queryParameters:function(){return a===Do?e:{}}}),c=function(s){var a=s.hostsCache,t=s.logger,n=s.requester,e=s.requestsCache,l=s.responsesCache,p=s.timeouts,c=s.userAgent,o=s.hosts,d=s.queryParameters,r={hostsCache:a,logger:t,requester:n,requestsCache:e,responsesCache:l,timeouts:p,userAgent:c,headers:s.headers,queryParameters:d,hosts:o.map((function(s){return Lo(s)})),read:function(s,a){var t=Ao(a,r.timeouts.read),n=function(){return Bo(r,r.hosts.filter((function(s){return 0!=(s.accept&No.Read)})),s,t)};if(!0!==(void 0!==t.cacheable?t.cacheable:s.cacheable))return n();var e={request:s,mappedRequestOptions:t,transporter:{queryParameters:r.queryParameters,headers:r.headers}};return r.responsesCache.get(e,(function(){return r.requestsCache.get(e,(function(){return r.requestsCache.set(e,n()).then((function(s){return Promise.all([r.requestsCache.delete(e),s])}),(function(s){return Promise.all([r.requestsCache.delete(e),Promise.reject(s)])})).then((function(s){var a=ml(s,2);return a[0],a[1]}))}))}),{miss:function(s){return r.responsesCache.set(e,s)}})},write:function(s,a){return Bo(r,r.hosts.filter((function(s){return 0!=(s.accept&No.Write)})),s,Ao(a,r.timeouts.write))}};return r}(jl(jl({hosts:[{url:"".concat(l,"-dsn.algolia.net"),accept:No.Read},{url:"".concat(l,".algolia.net"),accept:No.Write}].concat(Io([{url:"".concat(l,"-1.algolianet.com")},{url:"".concat(l,"-2.algolianet.com")},{url:"".concat(l,"-3.algolianet.com")}]))},s),{},{headers:jl(jl(jl({},p.headers()),{"content-type":"application/x-www-form-urlencoded"}),s.headers),queryParameters:jl(jl({},p.queryParameters()),s.queryParameters)}));return Oo({transporter:c,appId:l,addAlgoliaAgent:function(s,a){c.userAgent.add({segment:s,version:a})},clearCache:function(){return Promise.all([c.requestsCache.clear(),c.responsesCache.clear()]).then((function(){}))}},s.methods)}(jl(jl(jl({},{appId:s,apiKey:a,timeouts:{connect:1,read:2,write:30},requester:{send:function(s){return new Promise((function(a){var t=new XMLHttpRequest;t.open(s.method,s.url,!0),Object.keys(s.headers).forEach((function(a){return t.setRequestHeader(a,s.headers[a])}));var n,e=function(s,n){return setTimeout((function(){t.abort(),a({status:0,content:n,isTimedOut:!0})}),1e3*s)},l=e(s.connectTimeout,"Connection timeout");t.onreadystatechange=function(){t.readyState>t.OPENED&&void 0===n&&(clearTimeout(l),n=e(s.responseTimeout,"Socket timeout"))},t.onerror=function(){0===t.status&&(clearTimeout(l),clearTimeout(n),a({content:t.responseText||"Network request failed",status:t.status,isTimedOut:!1}))},t.onload=function(){clearTimeout(l),clearTimeout(n),a({content:t.responseText,status:t.status,isTimedOut:!1})},t.send(s.data)}))}},logger:(3,{debug:function(s,a){return Promise.resolve()},info:function(s,a){return Promise.resolve()},error:function(s,a){return console.error(s,a),Promise.resolve()}}),responsesCache:Po(),requestsCache:Po({serializable:!1}),hostsCache:zo({caches:[Co({key:"".concat("4.8.1","-").concat(s)}),Po()]}),userAgent:Mo("4.8.1").add({segment:"Browser",version:"lite"}),authMode:Do}),t),{},{methods:{search:Go,searchForFacetValues:Ko,multipleQueries:Go,multipleSearchForFacetValues:Ko,initIndex:function(s){return function(a){return Wo(s)(a,{methods:{search:Yo,searchForFacetValues:Xo,findAnswers:Qo}})}}}}))}function Zo(s,a){return s.reduce((function(s,t){var n=a(t);return s.hasOwnProperty(n)||(s[n]=[]),s[n].length<5&&s[n].push(t),s}),{})}function sd(s){return s}function ad(){}function td(){return(td=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t",highlightPostTag:"",hitsPerPage:20},r)}]}).catch((function(s){throw"RetryError"===s.name&&e("error"),s})).then((function(s){var a=s[0].hits,e=s[0].nbHits,l=Zo(a,(function(s){return s.hierarchy.lvl0}));return t.context.searchSuggestions.length0&&(W(),A.current&&A.current.focus())}),[L,W]),Zp.useEffect((function(){function s(){if(E.current){var s=.01*window.innerHeight;E.current.style.setProperty("--docsearch-vh","".concat(s,"px"))}}return s(),window.addEventListener("resize",s),function(){window.removeEventListener("resize",s)}}),[]),Zp.createElement("div",td({ref:O},H({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===P.status&&"DocSearch-Container--Stalled","error"===P.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(s){s.target===s.currentTarget&&h()}}),Zp.createElement("div",{className:"DocSearch-Modal",ref:E},Zp.createElement("header",{className:"DocSearch-SearchBar",ref:D},Zp.createElement(ko,td({},U,{state:P,autoFocus:0===L.length,onClose:h,inputRef:A,isFromSelection:Boolean(L)&&L===F}))),Zp.createElement("div",{className:"DocSearch-Dropdown",ref:T},Zp.createElement(wo,td({},U,{indexName:c,state:P,hitComponent:m,resultsFooterComponent:b,disableUserPersonalization:k,recentSearches:M,favoriteSearches:B,onItemClick:function(s){$(s),h()},inputRef:A}))),Zp.createElement("footer",{className:"DocSearch-Footer"},Zp.createElement(Vc,null))))}function od(){return(od=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t{for(var t in a||(a={}))l.call(a,t)&&c(s,t,a[t]);if(e)for(var t of e(a))p.call(a,t)&&c(s,t,a[t]);return s})({},this.searchConfig),s=t(a,n({container:"#docsearch"})),Up(Zp.createElement(id,ul({},s,{transformSearchClient:function(a){return a.addAlgoliaAgent("docsearch.js","3.0.0-alpha.33"),s.transformSearchClient?s.transformSearchClient(a):a}})),function(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof s?a.document.querySelector(s):s}(s.container,s.environment)))}}},[["render",function(s,a,t,n,e,l){return cn(),hn("div",hd)}]]);const gd={class:"van-doc-markdown-body"},jd=wn('

更新日志

v1.9.0

2021-09-27

Bug Fixes

  • Slider: 移除 theme mixin #4520
  • Tab: 修复初始位置不正确问题 #4521

Document

  • ActionSheet: 添加 show 属性说明 #4518

Feature

  • Slider: 添加 vertical 属性 #4486

Performance

  • 移除 CSS variables 兼容代码 #4487

v1.8.7

2021-09-22

Features

  • Icons: 新增 guide-o 图标 #4507

1.8.6

2021-09-20

Features

  • Calendar: 新增 confirmDisabledText 默认文案 #4490) (8629da1

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

  • Calendar: 修复超出选择范围 toast 提示一直存在问题 #4474
  • page-scroll: 修复 isDef 取反问题 #4488

1.8.4

2021-09-07

Bug Fixes

  • page-scroll: 修复 getCurrentPage 为空时报错 #4458

Features

  • Field: 新增 clear-trigger 属性 #4461
  • Search: 新增 clear-icon 属性 #4463
  • Search: 新增 clear-trigger 属性 9e17b13
  • Slider: 新增 range 属性 #4442

v1.8.3

2021-08-30

Bug Fixes

  • Calendar: 修复 default-date 属性失效问题 #4430
  • ShareSheet: 调整 overlayStyle 属性类型为 string 8c408e2
  • Stepper: 调整 minus/plus slots 位置 #4427
  • Sticky: 修复 root 为 null 时，读取 root.top 报错问题 #4433
  • Calendar: 调整 minDate 和 maxDate 传值类型为 Number 37d8e69

Features

  • Popup: 新增 lock-scroll 属性 #4384

Performance Improvements

  • Radio: label 的 margin-left 改为 padding-left，增大可点击区域，增强用户体验 #4165

v1.8.2

2021-08-18

Bug Fixes

  • Calendar: 修复 template 引用路径不是相对路径的问题 7f7cf6
  • Field: 修复 template 引用路径不是相对路径的问题 6dd42a

v1.8.1

2021-08-18

Feature

  • Calendar: 新增 click-subtitle 事件 #4385
  • Circle: 使用 setTimeout 代替 setInterval #4401

Bug Fixes

  • Picker: 修复 template 引用路径不是相对路径的问题 #4408

v1.8.0

2021-08-11

Feature

  • Overlay: 新增 lock-scroll 属性 #4383
  • search: 新增 click-input 事件 #4357

Performance

  • 移除了 iOS8 相关的 polyfill，减少包体积 #4395

v1.7.2

2021-07-19

Bug Fixes

  • Calendar: 初始日期设置为当前日期 #4339

Features

  • Cell: CellGroup 新增 inset 属性 #4341
  • Search: 新增 click-input 事件 #4337

1.7.1

2021-07-06

Bug Fixes

  • Col: 修复样式问题 #4322
  • Grid: 增加 icon-prefix 属性默认值 #4318
  • IndexBar: 修复当索引列表为空时报错 #4310

1.7.0

2021-07-04

Bug Fixes

  • Button: 修复 type 为 getUserInfo & wx.getUserProfile 可用时 lang 参数失效 #4250
  • ShareSheet: 新增内置 icon weapp-qrcode wechat-moments #4256

Features

  • Checkbox: 增加 direction 属性，设置排列方向 #4265
  • ConfigProvider: 增加全局配置组件 #4279
  • Grid: 增加 reverse 属性，支持文本&图片位置互换 #4280
  • GridItem: 增加 icon-prefix 属性，支持第三方字体 #4276
  • Rate: 增加更多 css 变量 #4297
  • Slider: 增加更多 css 变量 #4305

Improvements

  • wxs style 方法支持驼峰变量命名，以便能更好的在 wxml 中使用 #4281

1.6.9

2021-06-06

Bug Fixes

  • DatetimePicker: 修复 动态设置 min-hour min-date 显示不正确 #4245
  • Tabs: 修复 tab 数量较多时滚动距离不正确 #4202
  • Uploader: 修复 demo 中 beforeRead 报错 #4235

1.6.9-beta.2

2021-05-22

Bug Fixes

  • Button: 修复 open-type 不生效 #4222
  • Calendar: 修复 allow-same-day 开启时 custom-color 属性无效 #4200
  • Circle: 修复 value 是小数时抖动的情况 #4152
  • NoticeBar: 调整滚动行为 #4201
  • NoticeBar: 修复不正确的滚动速度 cde3876
  • Radio: 支持动态设置 disabled #4191
  • Rate: 支持滑动选择半星 #4195

Features

  • Calendar: 增加 first-day-of-week 属性，设置周起始日 #4211
  • Calendar: 增加 show-range-prompt 属性和 over-range 事件，设置是否展示提示文案 #4212
  • Icons: 图标库迁移至 iconfont.cn #4219
  • OpenType: 支持 getUserProfile #4203
  • Panel: 移除 useFooterSlot #4205

1.6.8

2021-02-26

Features

  • NoticeBar: 新增默认插槽 (#4048)
  • Stepper: 新增 theme 属性，支持圆形风格 (#4049)
  • Stepper: 新增 plus & minus 插槽 (#4049)

Bug Fixes

  • Checkbox: 修复 label-position 属性无效 (#4036)
  • Dialog: 修复 beforeClose 方法类型定义 (#4019)

Improvements

  • Circle: 当内置 canvas 不支持同层渲染时降级至默认 type (#4050)

1.6.7

2021-01-27

Features

  • Radio: 新增 direction 属性 (#4007)

Bug Fixes

  • Icons: 修复部分地区图标不显示 (#4012)
  • Transition: 修复默认设置 show 属性为 true 时不生效 (#4005)

1.6.6

2021-01-21

Features

  • Uploader: 支持文件预览 (#3975)

Bug Fixes

  • Picker: 修复标题栏无法显示 (#3973)

Improvements

  • Calendar: 优化模板代码 (#3972)

1.6.5

2021-01-19

Features

  • Field: 新增 input 插槽 (#3932)
  • Field: 新增 click-input 事件 (#3932)
  • Icon: 新增 delete-o、sort、font、font-o、revoke 图标 (#3881)

Bug Fixes

  • Button: 修复 custom-style 属性不生效 (#3903)
  • Dialog: 修复 close-on-click-overlay 属性不生效 (#3913)

Improvements

  • Cell: 优化性能 (#3888)
  • Col: 优化性能 (#3886)
  • Divider: 优化性能 (#3887)
  • Empty: 优化性能 (#3933)
  • Loading: 优化性能 (#3892)
  • Notice-bar: 优化性能 (#3891)
  • Notify: 优化性能 (#3893)
  • Picker: 优化性能 (#3949)
  • Stepper: 优化性能 (#3890)
  • Sticky: 优化性能 (#3879)
  • SwipeCell: 优化性能 (#3928)
  • Switch: 优化性能 (#3889)
  • Tag: 优化性能 (#3894)
  • Transition: 优化性能 (#3895)
  • Uploader: 优化性能 (#3897)

1.6.4

2020-12-18

Improvements

  • Tab: 优化粘性布局时的渲染性能 (#3875)
  • Grid: 使用 wxs 优化性能 (#3839)
  • Image: 使用 wxs 优化性能 (#3839)
  • Button: 使用 wxs 优化性能 (#3839)
  • Icon: 减少代码体积 (#3839)
  • Checkbox: 减少代码体积 (#3839)
  • Slider: 减少代码体积 (#3839)

Bug Fixes

  • Calendar: 修复在 phone 设备上选择日期后显示错误 (#3833)
  • GoodsAction: 修复部分设备上高度异常 (#3865)
  • Slider: 修复设置 max min 时滑动不均匀 (#3876)
  • Tab: 修复切换时内容区闪烁的问题 (#3866)

1.6.3

2020-12-09

Features

  • Dialog: 新增 beforeClose 属性 (#3815)
  • uploader: 新增若干 CSS 变量 (#3797)
  • Aarea: 支持不传入 county_list 数据 (#3824)
  • Tab: 新增 resize 方法 (#3827)

Improvements

  • Collapse: 使用 animate 提升动画性能 (#3826)
  • Tab: 优化样式拼装性能 (#3827)

Bug Fixes

  • Field: 修复输入中文时显示字数暂时超出 maxlength (#3802)
  • Info: 修复样式错误 (#3823)
  • NavBar: 修复动态渲染时组件报错 (#3822)
  • Progress: 修复 percentage 为 0 时样式异常 (#3808)

1.6.2

2020-11-29

Features

  • Tabbar: 新增 placeholder icon-prefix 属性 (#3792)

Bug Fixes

  • DatetimePicker: 修复 type=year-month 时选择出现报错 (#3783)
  • Info: 修复部分安卓设备中文案不完全居中 (#3778)
  • Tab: 修复 ellipsis 为 false 时下划线位置不正确 (#3777)
  • Notify: 修复组件未全局居中 (#3751)

Improvements

  • Icon: 使用 wxs 优化性能 (#3791)

1.6.1

2020-11-12

Bug Fixes

  • Field: 修复未传入 label 属性时仍渲染 label #3756
  • Picker: 修复 confirm、cancel 事件报错 #3755

1.6.0

2020-11-11

Features

  • SwipeCell: 新增外部样式类 custom-class #3678
  • ActionSheet: 调整取消文字颜色至 @gray-7 #3719
  • ActionSheet: 调整顶部栏样式 #3720
  • ActionSheet: 调整加载图标大小至 22px #3718
  • ActionSheet: 调整描述文字样式 #3726
  • Cell: 调整图标外边距至 4px #3721
  • DropdownMenu: 增加默认阴影 #3723
  • DropdownMenu: 调整选中态默认颜色至 #ee0a24 #3725
  • Image: 调整图标大小至 36px #3724
  • Popup: 调整圆角至 16px #3713
  • Search: 调整左侧内边距至 12px #3716
  • Sidebar: 调整宽度至 85px #3722
  • TabbarItem: 调整图标大小至 22px #3717

Bug Fixes

  • Field: 修复使用 label 属性时 label-class 样式类不生效 #3729
  • NoticeBar: 修复内容较短时开启 scrollable 不生效 #3727
  • SidebarItem: 修复长数字不换行的问题 #3714
  • Tag: 默认字体加入 miui #3715

1.5.2

2020-10-15

Features

  • Uploader: 标准化 file-list 与事件参数 #3673
  • Uploader: 新增 thumb，支持缩略图展示 #3673
  • GoodsAction: 新增若干 CSS 变量 #3654
  • 移动 @types/wechat-miniprogram 至 dependencies #3654

Bug Fixes

  • Button: 修复细边框样式问题 #3653
  • Tab: 重构动画实现，不再使用 transform #3668

1.5.1

2020-09-29

Features

  • Card: 新增 origin-price tag 插槽 #3645
  • ShareSheet: 调整默认 z-index 至 100 #3575
  • ShareSheet: 新增 item 属性 openType #3575
  • Uploader: 扩大删除按钮点击区域 #3631

Bug Fixes

  • Uploader: 支持预览视频 #3594
  • Dialog: 调整类型定义 #3630
  • NavBar: 修复 CSS 变量 --nav-bar-icon-color 不生效 #3643
  • NavBar: 修复未设置 title 时样式异常 #3643
  • Tab: 修复 line-width 属性不支持 string #3628

1.5.0

2020-08-27

Features

  • ShareSheet: 新增组件 #3559
  • Icons: 升级 @vant/icons 至 v1.2.5 #3539
  • sidebar: 新增 badge 属性 #3564
  • Tabs: 调整默认 line-width 至 40px #3518
  • Tabs: 去除默认边框 #3519
  • TreeSelect: 新增 selected-icon 属性 #3565
  • TreeSelect: 支持 badge、dot 显示 #3565

Bug Fixes

  • collapse: 修复嵌套在 popup 等组件中时默认展开无效 #3562
  • empty: 修复 image、description 插槽不生效 #3563

1.4.4

2020-08-12

Bug Fixes

  • Transition: 重构组件以修复卡顿问题 #3498
  • Icon: 修复数字未对齐 #3501
  • Tab: 修复可滚动时下划线位置错误 #3511

v1.4.3

2020-08-07

Features

  • Dialog: 增加圆角按钮样式 #3476
  • Cell: 调整下划线位置 #3487
  • Tab: 调整默认滚动阈值至 5 个、优化样式 #3459

v1.4.2

2020-08-03

Features

Bug Fixes

  • Calendar: 修复超出 max-range 时未显示 Toast #3466
  • Tab: 修复手势滚动可切换至禁用项 #3467

v1.4.1

2020-07-28

Features

  • Picker: 调整默认可见的选项个数为 6 个 #3418
  • Toast: 调整圆角为 8px #3419

Bug Fixes

  • Slider: 修复点击会触发 drag 事件 #3415
  • Area: 修复中间列无法滚动 #3443

v1.4.0

2020-07-17

Features

  • Empty: 新增 Empty 组件 #3327
  • NoticeBar: 新增 background 属性 #3388
  • NoticeBar: 新增 close 事件 #3388
  • GridItem: 新增 icon-color 属性 #3386
  • NavBar: 现在 custom-style 将影响根节点#3371
  • Cell: 新增 title-style 属性, fix Field label width #3370
  • Uploader: 更新 failed 图标 #3359
  • Uploader: 更新删除图标样式 #3385
  • Uploader: 移除圆角样式 #3384
  • Field: 更新禁用态样式 #3358
  • Field: 更新 label 样式 #3357
  • Picker: 调整 action button 样式 #3316

Bug Fixes

  • Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 #3401
  • Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 #3317
  • Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 #3318
  • DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 #3352
  • Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 #3383
  • Dialog: show dialog after class ready #3374
  • Calendar: confirm-disabled-text 属性增加默认值 #3394

v1.3.3

2020-06-24

Features

  • steps: 为每一项增加 inactiveIcon、activeIcon 属性 #3315
  • field: 增加外部样式类 label-class #3311
  • field: 现在总会从内部 set value 值 #3313
  • uploader: 为每一项增加 deletable 属性 #3270
  • uploader: 扩大删除图标的可点击区域 #3265

Bug Fixes

  • tabbar: 修复 iphone-se 上高度异常 #3314
  • grid: 修复 text 与 icon 同时设置时样式异常 #3310
  • calendar: 修复多选模式下 default-date 属性不生效 #3284
  • circle: 修复 type=“2d” 时无法动态变更 value #3264
  • nav-bar: 修复未设置 left-text 时左侧图标样式异常 #3263

v1.3.2

2020-06-04

Features

  • button: 新增 form-type 属性 #3208
  • grid: 新增 icon-size、badge 属性 #3236
  • grid: 新增 direction 属性 #3192

Bug Fixes

  • Grid: 修复开启 square 时横、纵向间距不同 #3231
  • uploader: 修复点击删除图标时触发 click-preview 事件 #3230
  • circle: 修复 type="2d" 不生效 #3228
  • calendar: 修复在选择区间时，点击确定报错 #3195
  • tag: 修复 css 变量名拼写错误 #3191

v1.3.1

2020-05-24

Features

  • Button: 新增 class-prefix 属性 #3159
  • Collapse: 新增 open、close 事件 #3176

Bug Fixes

  • 修复控制台提示选择器错误的问题 #3137
  • 修复 GoodsActionButton 在某些情况下报错的问题 #3145

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

  • sticky: 新增 scroll-top 属性 #3115
  • button: 新增 dataset 属性 #3075
  • uploader: 所有类型都会触发 click-preview 事件 #3071
  • Uploader: 属性 accept 新增值 media #3047
  • feat: 新增基础 font-family #3061
  • submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 #3104

Bug Fixes

  • dialog: 修复 title 多余空格的问题 #3069
  • tab: 修复 tab 个数多时显示滚动条 #3072
  • Sticky: 修复使用组件时页面 onPageScroll 失效 #3092
  • button: 修复 disabled 属性对 open-type 类型的按钮无效 #3076

v1.2.2

2020-04-21

Features

  • GoodsActionButton: 新增 CSS 变量 goods-action-line-height #3037
  • Calendar: 选择区间大于 range 时自动选中最大范围 #3026
  • Notify: 新增 top 属性 #3018

Bug Fixes

  • Field: 修复未设置 autosize 时 wxs 报错 #3038
  • Field: 避免设置 showClear 为 undefined #3012

v1.2.1

2020-04-12

Features

  • Field: 支持小程序双向绑定 #2986
  • Calendar: 多选模式下新增 unselect 事件 #2990

Bug Fixes

  • IndexBar: 移除 scroll-top 属性 #2999
  • Uploader: 修复图片后缀名为大写时未正常识别 #2987
  • Field: 修复 autosize 属性 设置 max-height 不生效 #3007

v1.2.0

2020-04-04

Features

  • TreeSelect: 更新 nav 背景色 #2952
  • Sticky: 使用 page scroll 重构组件 #2950
  • Field: 新增 auto-focus、disable-default-padding、cursor 属性 #2936
  • Field: 新增 linechange、keyboardheightchange 事件 #2936
  • Uploader: 支持显示上传状态 #2929
  • Image: mode 属性新增 widthFix、heightFix #2908
  • Canvas: 新增 type 属性 #2906
  • NavBar: 新增 placeholder 属性 #2896

Bug Fixes

  • Field: 修复输入过快时输入框内容不断回退 #2936
  • Calendar: 修复 show-confirm 为 true 时组件初始化报错 #2951
  • Tab: 修复 type 为 card 时 color 对边框无效 #2941

v1.1.0

2020-03-21

Features

  • 新增 Calendar 日历组件 #2894
  • Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class #2882
  • Steps: 新增 click 事件 #2874
  • SideBar: 新增 title 插槽 #2873
  • Uploader: 新增 upload-icon 属性 #2869
  • Uploader: 新增 show-upload 属性 #2868
  • Uploader: 更新样式、调整事件触发顺序与 vant 一致 #2886
  • Field: 新增 show-word-limit 属性 #2856
  • Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight #2856
  • Field: 新增若干 CSS 变量 #2856

Bug Fixes

  • Button: 移除 lang 属性默认值 #2883
  • Button: 修复 disabled 属性对原生事件无效 #2878

v1.0.7

2020-03-04

Features

  • DropdownItem: 新增 popupStyle 属性 #2804
  • DropdownItem: 新增 open close opened closed 事件 #2804
  • Card: 新增 price num 插槽 #2787
  • Card: 新增 origin-price-class 外部样式类 #2787

Bug Fixes

  • Tab: 修复内容项高度不同时粘性布局异常 #2817
  • Picker: 修复未选中项样式未置灰 #2816
  • GoodsActionButton: 修复仅使用一个 button 时样式异常 #2808
  • Radio: name类型与value统一 #2801
  • Uploader: 修复文档错误 #2777

v1.0.6

2020-02-24

Features

  • GoodsActionButton: 新增默认 slot #2779
  • SubmitBar: 更新圆角样式 #2755
  • Card: 更新样式 #2754
  • 优化 relation 部分代码 #2760

Bug Fixes

  • DropdownItem: 修复点击选项时不触发close事件 #2766
  • GoodsActionButton: 修复低版本基础库下的样式问题 #2762
  • Tabs: 修复点击禁用项时事件参数错误 #2758
  • Checkbox: 修复动态设置disabled属性无效 #2748
  • Button: add loading color when plain is true #2746
  • Radio: 修复label-disabled文档错误 #2763

v1.0.5

2020-02-07

Features

  • ActionSheet: actions 支持更多 openType #2715
  • Uploader: 新增开始disabled时的组件样式 #2720
  • Icon: 调整示例小程序页面与 vant 对齐 #2728
  • 示例小程序首页与 vant 对齐 #2729
  • 完善快速上手文档，增加 npm 构建说明 #2726

Bug Fixes

  • Radio: 修复disabled属性不生效 #2711
  • Tab: 修复animated属性无法动态切换 #2712
  • Circle: 修正文档错误，size属性不支持string类型 #2694
  • 修正文档默认 slot 名称为 default 的错误 #2726
  • TreeSelect: 修正文档示例代码标签闭合错误 #2710

v1.0.4

2020-01-21

Features

  • Stepper: 新增 disable-long-press 属性 #2691
  • quickstart: 快速上手新增关闭 style v2 说明 #2704
  • Search: 新增 background、disabled、input-align 文档示例 #2698
  • Icon: 文档新增图标文字加载失败说明 #2681

Bug Fixes

  • Sticky: 修复真机上页面滚动缓慢时无法吸顶/取消吸顶 #2703
  • DropdownItem: 修复 wx:key 警告 #2670
  • IndexBar: 文档修复组件引入路径错误 #2689
  • 升级依赖版本以避免安全警告 #2680

v1.0.3

2020-01-09

Features

  • npm 包默认输出 es5 版本代码 #2639
  • Steps: 新增外部样式类 desc-class #2630

Bug Fixes

  • Tab: 解决动态添加选项时，顺序错乱和下划线长度不变的问题 #2663
  • NavBar: 修复返回图标未居中的问题 #2633

v1.0.2

2019-12-31

Features

  • Skeleton: 新增外部样式类row-class``avatar-class``title-class #2612
  • SwipeCell: 支持动态修改width属性 #2607
  • Uploader: 新增camera``compressed``maxDuration属性 #2584

Improvements

  • Tab: 优化弹性滚动效果 #2606

Bug Fixes

  • IndexBar: 修复字母未全部定义时 click 事件报错 #2605
  • Field: 修复点击清除图标后下一次点击无效 #2602

v1.0.1

2019-12-23

Features

  • Uploader: 新增 sizeType 属性 #2563
  • GoodsActionButton: 新增 plain 属性 #2559
  • Uploader: 去除 use-slot 属性 #2551
  • 新增样式覆盖说明文档 #2566

Improvements

  • 使用 nextTick 优化部分异步逻辑 #2561
  • wxs 新增 addUnit 方法以减少 setData 调用次数 #2550

Bug Fixes

  • Tag: 修复未依赖 van-icon 组件 #2579
  • Notify: 修复 safeAreaInsetTop 不生效 #2558
  • Uploader: 修复 capture 属性不生效 #2551

v1.0.0

2019-12-11

主要变动

  • npm 包名由 vant-weapp 重命名为 @vant/weapp
  • 增加十一个新组件
  • 增加数十个 API
  • 所有组件支持通过CSS自定义属性自定义样式
  • 使用env()重构 iOS 安全区域适配
  • 调整部分 API 命名，废除少量 API

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

  • Grid 宫格，用于展示内容或进行页面导航
  • Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示
  • Circle 环形进度条，告知用户当前的状态和进度
  • Overaly 遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
  • Divider 分割线，区隔内容的分割线
  • Sticky 粘性布局，与 CSS 中position: sticky属性实现的效果类似
  • Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
  • IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
  • Uploader 文件上传，上传一个或多个文件
  • CountDown 倒计时，用于显示活动倒计时、短信验证码等
  • DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
  • BadgeGroup重命名为Sidebar
  • Badge重命名为SlidebarItem
  • active属性重命名为activeKey
Notify
  • text选项重命名为message
  • backgroundColor选项重命名为background
  • 去除transitionend事件，新增 6 个事件
SwitchCell
  • 移除了SwitchCell组件，可以使用Cell和Switch组件代替
Transition
  • 去除transitionend事件，新增 6 个事件

新特性

ActionSheet
  • 新增click-overlay事件
  • 新增close-on-click-action属性
  • 新增color属性
  • 新增description属性
  • 新增round属性
Area
  • 新增columns-placeholder属性
  • reset方法支持传入code参数
Button
  • 新增loading-type属性
  • color属性支持渐变色
  • 切换disabled时增加过渡效果
Checkbox
  • 新增icon-size属性
Color
  • 基础红色更新为#ee0a24
DatetimePicker
  • 新增filter属性
Dialog
  • 优化文字换行
  • 新增title插槽
  • 新增confirm-button-color属性
  • 新增cancel-button-color属性
  • 新增width属性
  • 新增overlay-style属性
Field
  • 新增clickable属性
  • 新增arrow-direction属性
  • 新增hold-keyboard属性
GoodsActionButton
  • 新增color属性
  • 样式升级为圆角风格
GoodsActionIcon
  • 新增icon插槽
  • 新增dot属性
GridItem
  • 新增info属性
  • 新增dot属性
Icon
  • 新增dot属性
  • 新增down图标
  • 新增wap-hone实底风格图标
  • 支持number类型的size属性
Loading
  • 支持number类型的size属性
NoticeBar
  • 阻止关闭图标点击事件冒泡
Notify
  • 新增clear方法
  • 新增round属性
  • 新增closeable属性
  • 新增close-icon属性
  • 新增close-icon-position属性
Progress
  • 新增stroke-width属性
Radio
  • 新增icon-size属性
Rate
  • 优化手势判断
  • 新增gutter属性
  • 新增touchable属性
  • 支持string类型的size属性
  • 新增action-text属性
  • 新增left-icon插槽
  • 新增right-icon插槽
SlidebarItem
  • 新增dot属性
Slider
  • 新增drag-start事件
  • 新增drag-end事件
  • 支持传入任意范围的max和min属性
  • 支持number类型的bar-height属性
  • 增加滑动动画
  • 增大点击区域
SwipeCell
  • 新增name属性
  • 新增open事件
  • 支持打开状态互斥
Switch
  • 加载图标的颜色会跟随开关状态变化
Stepper
  • 支持长按手势
  • 新增input-width属性
  • 新增button-size属性
  • 新增decimalLength属性
  • 新增 disablePlus、disableMinus 属性
Steps
  • 新增active-icon属性
  • 新增inactive-icon属性
Tabs
  • 使用 Sticky 组件重构吸顶实现
  • 新增name属性
  • 新增line-height属性
  • 新增ellipsis属性
  • 新增lazy-render属性
  • line-width属性支持String类型
  • 增加云开发结合示例
TreeSelect
  • 新增max属性
  • 新增content插槽
',48),md=[jd],vd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gd,md)))},bd={class:"van-doc-markdown-body"},fd=wn('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',5),yd=[fd],qd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",bd,yd)))},xd={class:"van-doc-markdown-body"},wd=wn('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),_d=[wd],kd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",xd,_d)))},Sd={class:"van-doc-markdown-body"},Cd=wn('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

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

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

  • 基于 Vant Weapp 搭建小程序应用
  • 样式覆盖方案

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),zd=[Cd],Pd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Sd,zd)))},Id={class:"van-doc-markdown-body"},Od=wn('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

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

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

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

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',7),Ed=[Od],Dd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Id,Ed)))},Td={class:"van-doc-markdown-body"},Ad=wn('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),Nd=[Ad],Fd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Td,Nd)))},Ld={class:"van-doc-markdown-body"},Rd=wn('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

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

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

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

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

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

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

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

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',17),Bd=[Rd],Md={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ld,Bd)))},$d={class:"van-doc-markdown-body"},Ud=wn('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

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

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',18),Vd=[Ud],Hd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",$d,Vd)))},Wd={class:"van-doc-markdown-body"},Gd=wn('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

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

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

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

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

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

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

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

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

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

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

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

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

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

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),Kd=[Gd],Qd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Wd,Kd)))},Yd={class:"van-doc-markdown-body"},Xd=[wn('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10)],Jd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Yd,Xd)))},Zd={class:"van-doc-markdown-body"},sr=[wn('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],ar={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Zd,sr)))},tr={class:"van-doc-markdown-body"},nr=[wn('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定复选框的勾选状态。

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

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

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

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

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

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

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

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],er={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",tr,nr)))},lr={class:"van-doc-markdown-body"},pr=[wn('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

value属性表示进度条的目标进度。

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

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

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

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],cr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",lr,pr)))},or={class:"van-doc-markdown-body"},dr=[wn('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

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

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

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

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],rr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",or,dr)))},ir={class:"van-doc-markdown-body"},hr=[wn('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ir,hr)))},gr={class:"van-doc-markdown-body"},jr=[wn('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],mr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gr,jr)))},vr={class:"van-doc-markdown-body"},br=[wn('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

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

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",vr,br)))},yr={class:"van-doc-markdown-body"},qr=[wn('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

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

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

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

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

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

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],xr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",yr,qr)))},wr={class:"van-doc-markdown-body"},_r=[wn('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择完整时间

value 为时间戳。

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

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

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

选择日期（年月）

value 为时间戳。

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

选择时间

value 为字符串。

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

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

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

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],kr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",wr,_r)))},Sr={class:"van-doc-markdown-body"},Cr=[wn('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

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

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],zr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Sr,Cr)))},Pr={class:"van-doc-markdown-body"},Ir=[wn('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

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

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],Or={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Pr,Ir)))},Er={class:"van-doc-markdown-body"},Dr=[wn('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

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

向上展开

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

禁用菜单

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

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
',15)],Tr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Er,Dr)))},Ar={class:"van-doc-markdown-body"},Nr=[wn('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ar,Nr)))},Lr={class:"van-doc-markdown-body"},Rr=[wn('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Br={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Lr,Rr)))},Mr={class:"van-doc-markdown-body"},$r=[wn('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],Ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Mr,$r)))},Vr={class:"van-doc-markdown-body"},Hr=[wn('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

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

自定义内容

通过插槽可以自定义格子展示的内容。

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

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

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

格子间距

通过gutter属性设置格子之间的距离。

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

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

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

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],Wr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Vr,Hr)))},Gr={class:"van-doc-markdown-body"},Kr=[wn('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

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

图标颜色

设置color属性来控制图标颜色。

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

图标大小

设置size属性来控制图标大小。

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

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],Qr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Gr,Kr)))},Yr={class:"van-doc-markdown-body"},Xr=[wn('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

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

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

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

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

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

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

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

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

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

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],Jr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Yr,Xr)))},Zr={class:"van-doc-markdown-body"},si=[wn('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],ai={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Zr,si)))},ti={class:"van-doc-markdown-body"},ni=[wn('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

加载类型

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

自定义颜色

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

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],ei={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ti,ni)))},li={class:"van-doc-markdown-body"},pi=[wn('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],ci={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",li,pi)))},oi={class:"van-doc-markdown-body"},di=[wn('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

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

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],ri={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",oi,di)))},ii={class:"van-doc-markdown-body"},hi=[wn('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ii,hi)))},gi={class:"van-doc-markdown-body"},ji=[wn('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

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

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],mi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gi,ji)))},vi={class:"van-doc-markdown-body"},bi=[wn('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",vi,bi)))},yi={class:"van-doc-markdown-body"},qi=[wn('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

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

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

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

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],xi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",yi,qi)))},wi={class:"van-doc-markdown-body"},_i=[wn('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

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

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

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

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],ki={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",wi,_i)))},Si={class:"van-doc-markdown-body"},Ci=[wn('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

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

线条粗细

通过stroke-width可以设置进度条的粗细。

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

置灰

设置inactive属性后进度条将置灰。

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

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],zi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Si,Ci)))},Pi={class:"van-doc-markdown-body"},Ii=[wn('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定值当前选中项的 name 。

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

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

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

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

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

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],Oi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Pi,Ii)))},Ei={class:"van-doc-markdown-body"},Di=[wn('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

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

自定义图标

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

自定义样式

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

半星

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

自定义数量

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

禁用状态

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

只读状态

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

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],Ti={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ei,Di)))},Ai={class:"van-doc-markdown-body"},Ni=[wn('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ai,Ni)))},Li={class:"van-doc-markdown-body"},Ri=[wn('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Bi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Li,Ri)))},Mi={class:"van-doc-markdown-body"},$i=[wn('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],Ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Mi,$i)))},Vi={class:"van-doc-markdown-body"},Hi=[wn('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],Wi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Vi,Hi)))},Gi={class:"van-doc-markdown-body"},Ki=[wn('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],Qi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Gi,Ki)))},Yi={class:"van-doc-markdown-body"},Xi=[wn('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],Ji={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Yi,Xi)))},Zi={class:"van-doc-markdown-body"},sh=[wn('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],ah={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Zi,sh)))},th={class:"van-doc-markdown-body"},nh=[wn('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],eh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",th,nh)))},lh={class:"van-doc-markdown-body"},ph=[wn('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],ch={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",lh,ph)))},oh={class:"van-doc-markdown-body"},dh=[wn('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],rh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",oh,dh)))},ih={class:"van-doc-markdown-body"},hh=[wn('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],uh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ih,hh)))},gh={class:"van-doc-markdown-body"},jh=[wn('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],mh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gh,jh)))},vh={class:"van-doc-markdown-body"},bh=[wn('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],fh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",vh,bh)))},yh={class:"van-doc-markdown-body"},qh=[wn('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],xh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",yh,qh)))},wh={class:"van-doc-markdown-body"},_h=[wn('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],kh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",wh,_h)))},Sh={class:"van-doc-markdown-body"},Ch=[wn('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],zh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Sh,Ch)))},Ph={class:"van-doc-markdown-body"},Ih=[wn('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],Oh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ph,Ih)))},Eh={class:"van-doc-markdown-body"},Dh=[wn('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',18)],Th={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:s=>`/zh-CN${{"/common":"/style","/transition":"/style"}[s]||s}`,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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}},Ah={Changelog:vd,CustomStyle:qd,Home:kd,Quickstart:Pd,Theme:Dd,ActionSheet:Fd,Area:Md,Button:Hd,Calendar:Qd,Card:Jd,Cell:ar,Checkbox:er,Circle:cr,Col:rr,Collapse:ur,Common:mr,ConfigProvider:fr,CountDown:xr,DatetimePicker:kr,Dialog:zr,Divider:Or,DropdownMenu:Tr,Empty:Fr,Field:Br,GoodsAction:Ur,Grid:Wr,Icon:Qr,Image:Jr,IndexBar:ai,Loading:ei,NavBar:ci,NoticeBar:ri,Notify:ui,Overlay:mi,Panel:fi,Picker:xi,Popup:ki,Progress:zi,Radio:Oi,Rate:Ti,Search:Fi,ShareSheet:Bi,Sidebar:Ui,Skeleton:Wi,Slider:Qi,Stepper:Ji,Steps:ah,Sticky:eh,SubmitBar:ch,SwipeCell:rh,Switch:uh,Tab:mh,Tabbar:fh,Tag:xh,Toast:kh,Transition:zh,TreeSelect:Oh,Uploader:{setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Eh,Dh)))}};const Nh={class:"van-doc-header"},Fh={class:"van-doc-row"},Lh={class:"van-doc-header__top"},Rh={class:"van-doc-header__logo"},Bh=["src"],Mh={class:"van-doc-header__top-nav"},$h=["href"],Uh=["src"],Vh={key:1},Hh={key:0,ref:"version",class:"van-doc-header__top-nav-item"},Wh={key:0,class:"van-doc-header__version-pop"},Gh=["onClick"],Kh={key:1,class:"van-doc-header__top-nav-item"},Qh=["href"];const Yh={name:"VanDocContainer",props:{hasSimulator:Boolean}};const Xh=["src"];const Jh={name:"VanDoc",components:{DocNav:rl,DocHeader:el({name:"VanDocHeader",components:{SearchInput:ud},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:"1.9.0",showVersionPop:!1}),computed:{langLink(){return`#${this.$route.path.replace(this.lang,this.anotherLang.lang)}`},langLabel(){return this.anotherLang.label},anotherLang(){const s=this.langConfigs.filter((s=>s.lang!==this.lang));return s.length?s[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const s=!this.showVersionPop,a=s?"add":"remove";document.body[`${a}EventListener`]("click",this.checkHideVersionPop),this.showVersionPop=s},checkHideVersionPop(s){this.$refs.version.contains(s.target)||(this.showVersionPop=!1)},onSwitchLang(s){this.$router.push(this.$route.path.replace(s.from,s.to))},onSwitchVersion(s){s.link&&(location.href=s.link)}}},[["render",function(s,a,t,n,e,l){const p=Xt("search-input");return cn(),hn("div",Nh,[fn("div",Fh,[fn("div",Lh,[fn("a",Rh,[fn("img",{src:t.config.logo},null,8,Bh),fn("span",null,j(t.config.title),1)]),fn("ul",Mh,[(cn(!0),hn(an,null,zn(t.config.links,((s,a)=>(cn(),hn("li",{key:a,class:"van-doc-header__top-nav-item"},[fn("a",{class:"van-doc-header__link",target:"_blank",href:s.url},[s.logo?(cn(),hn("img",{key:0,src:s.logo},null,8,Uh)):s.text?(cn(),hn("span",Vh,j(s.text),1)):_n("v-if",!0)],8,$h)])))),128)),t.versions?(cn(),hn("li",Hh,[fn("span",{class:"van-doc-header__cube van-doc-header__version",onClick:a[0]||(a[0]=(...s)=>l.toggleVersionPop&&l.toggleVersionPop(...s))},[xn(j(e.packageVersion)+" ",1),yn(Me,{name:"van-doc-dropdown"},{default:Da((()=>[e.showVersionPop?(cn(),hn("div",Wh,[(cn(!0),hn(an,null,zn(t.versions,((s,a)=>(cn(),hn("div",{key:a,class:"van-doc-header__version-pop-item",onClick:a=>l.onSwitchVersion(s)},j(s.label),9,Gh)))),128))])):_n("v-if",!0)])),_:1})])],512)):_n("v-if",!0),l.langLabel&&l.langLink?(cn(),hn("li",Kh,[fn("a",{class:"van-doc-header__cube",href:l.langLink},j(l.langLabel),9,Qh)])):_n("v-if",!0),l.searchConfig?(cn(),un(p,{key:2,lang:t.lang,"search-config":l.searchConfig},null,8,["lang","search-config"])):_n("v-if",!0)])])])])}]]),DocContent:el({name:"VanDocContent",computed:{currentPage(){const{path:s}=this.$route;return s?s.split("/").slice(-1)[0]:this.$route.name}}},[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g(["van-doc-content",`van-doc-content--${l.currentPage}`])},[Pn(s.$slots,"default")],2)}]]),DocContainer:el(Yh,[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":t.hasSimulator}])},[Pn(s.$slots,"default")],2)}]]),DocSimulator:el({name:"VanDocSimulator",props:{src:String},data:()=>({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}))}},[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g(["van-doc-simulator",{"van-doc-simulator-fixed":l.isFixed}])},[fn("iframe",{ref:"iframe",src:t.src,style:r(l.simulatorStyle),frameborder:"0"},null,12,Xh)],2)}]])},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:s}=this.config,a=s.reduce(((s,a)=>s.concat(a.items)),[]),t=this.$route.path.split("/").pop();let n;for(let e=0,l=a.length;e{switch(s.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next")}}))}}},Zh={class:"van-doc"};let su="zh-CN";function au(){return su}function tu(s){const a=localStorage.getItem("vant-cli-lang");su=a||(navigator.language&&-1!==navigator.language.indexOf("zh-")?"zh-CN":s||"en-US")}const nu={class:"app"};var eu=el({components:{VanDoc:el(Jh,[["render",function(s,a,t,n,e,l){const p=Xt("doc-header"),c=Xt("doc-nav"),o=Xt("doc-content"),d=Xt("doc-container"),r=Xt("doc-simulator");return cn(),hn("div",Zh,[yn(p,{lang:t.lang,config:t.config,versions:t.versions,"lang-configs":t.langConfigs,onSwitchVersion:a[0]||(a[0]=a=>s.$emit("switch-version",a))},null,8,["lang","config","versions","lang-configs"]),yn(c,{lang:t.lang,"nav-config":t.config.nav},null,8,["lang","nav-config"]),yn(d,{"has-simulator":t.hasSimulator},{default:Da((()=>[yn(o,null,{default:Da((()=>[Pn(s.$slots,"default")])),_:3})])),_:3},8,["has-simulator"]),t.hasSimulator?(cn(),un(r,{key:0,src:t.simulator},null,8,["src"])):_n("v-if",!0)])}]])},data:()=>({hasSimulator:!0}),computed:{simulator(){var s,a;if(null==(s=Th.site.simulator)?void 0:s.url)return null==(a=Th.site.simulator)?void 0:a.url;return`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:s}=this.$route.meta;return s||""},langConfigs(){const{locales:s={}}=Th.site;return Object.keys(s).map((a=>({lang:a,label:s[a].langLabel||""})))},config(){const{locales:s}=Th.site;return s?s[this.lang]:Th.site},versions:()=>Th.site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(s){var a;su=a=s,localStorage.setItem("vant-cli-lang",a),this.setTitleAndToogleSimulator()},config:{handler(s){s&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){this.$route.hash&&this.$nextTick((()=>{const s=document.querySelector(this.$route.hash);s&&s.scrollIntoView()}))},methods:{setTitleAndToogleSimulator(){let{title:s}=this.config;const a=this.config.nav.reduce(((s,a)=>[...s,...a.items]),[]).find((s=>s.path===this.$route.meta.name));a&&a.title?s=a.title+" - "+s:this.config.description&&(s+=` - ${this.config.description}`),document.title=s,this.hasSimulator=!(Th.site.hideSimulator||this.config.hideSimulator||a&&a.hideSimulator)}}},[["render",function(s,a,t,n,e,l){const p=Xt("router-view"),c=Xt("van-doc");return cn(),hn("div",nu,[l.config?(cn(),un(c,{key:0,lang:l.lang,config:l.config,versions:l.versions,simulator:l.simulator,"has-simulator":e.hasSimulator,"lang-configs":l.langConfigs},{default:Da((()=>[yn(p)])),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):_n("v-if",!0)])}]]);const lu={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape:unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){!function(s){const a=document.createElement("textarea");a.value=s,a.setAttribute("readonly",""),a.style.position="absolute",a.style.left="-9999px",document.body.appendChild(a);const t=document.getSelection();if(!t)return;const n=t.rangeCount>0&&t.getRangeAt(0);a.select(),document.execCommand("copy"),document.body.removeChild(a),n&&(t.removeAllRanges(),t.addRange(n))}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((()=>{this.copyStatus="ready"}),2e3)}}},pu={class:"demo-playground--code"},cu={class:"demo-playground--code--actions"},ou=(s=>(Oa="data-v-9efa7fdc",s=s(),Oa=null,s))((()=>fn("span",null,null,-1))),du=["data-status"],ru=["innerHTML"];var iu=el(lu,[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g({"demo-playground":!t.inline,transform:t.transform})},[t.inline?Pn(s.$slots,"default",{key:0},void 0,!0):(cn(),hn(an,{key:1},[fn("div",{class:g(["demo-playground--previewer",{compact:t.compact}])},[Pn(s.$slots,"default",{},void 0,!0)],2),fn("div",pu,[fn("div",cu,[ou,fn("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":e.copyStatus,onClick:a[0]||(a[0]=(...s)=>l.copySourceCode&&l.copySourceCode(...s))},null,8,du),fn("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:a[1]||(a[1]=(...s)=>l.toogleSource&&l.toogleSource(...s))})]),Mt(fn("div",{innerHTML:l.unescape(t.codeSnippet),class:"demo-playground--code--content"},null,8,ru),[[Ze,e.showSource]])])],64))],2)}],["__scopeId","data-v-9efa7fdc"]]); -/*! - * vue-router v4.0.6 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */const hu="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,uu=s=>hu?Symbol(s):"_vr_"+s,gu=uu("rvlm"),ju=uu("rvd"),mu=uu("r"),vu=uu("rl"),bu=uu("rvl"),fu="undefined"!=typeof window;const yu=Object.assign;function qu(s,a){const t={};for(const n in a){const e=a[n];t[n]=Array.isArray(e)?e.map(s):s(e)}return t}let xu=()=>{};const wu=/\/$/;function _u(s,a,t="/"){let n,e={},l="",p="";const c=a.indexOf("?"),o=a.indexOf("#",c>-1?c:0);return c>-1&&(n=a.slice(0,c),l=a.slice(c+1,o>-1?o:a.length),e=s(l)),o>-1&&(n=n||a.slice(0,o),p=a.slice(o,a.length)),n=function(s,a){if(s.startsWith("/"))return s;if(!s)return a;const t=a.split("/"),n=s.split("/");let e,l,p=t.length-1;for(e=0;es===a[t])):1===s.length&&s[0]===a}var Iu,Ou,Eu,Du;function Tu(s){if(!s)if(fu){const a=document.querySelector("base");s=(s=a&&a.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else s="/";return"/"!==s[0]&&"#"!==s[0]&&(s="/"+s),s.replace(wu,"")}(Ou=Iu||(Iu={})).pop="pop",Ou.push="push",(Du=Eu||(Eu={})).back="back",Du.forward="forward",Du.unknown="";const Au=/^[^#]+#/;function Nu(s,a){return s.replace(Au,"#")+a}const Fu=()=>({left:window.pageXOffset,top:window.pageYOffset});function Lu(s){let a;if("el"in s){let t=s.el;const n="string"==typeof t&&t.startsWith("#"),e="string"==typeof t?n?document.getElementById(t.slice(1)):document.querySelector(t):t;if(!e)return;a=function(s,a){const t=document.documentElement.getBoundingClientRect(),n=s.getBoundingClientRect();return{behavior:a.behavior,left:n.left-t.left-(a.left||0),top:n.top-t.top-(a.top||0)}}(e,s)}else a=s;"scrollBehavior"in document.documentElement.style?window.scrollTo(a):window.scrollTo(null!=a.left?a.left:window.pageXOffset,null!=a.top?a.top:window.pageYOffset)}function Ru(s,a){return(history.state?history.state.position-a:-1)+s}const Bu=new Map;function Mu(s,a){const{pathname:t,search:n,hash:e}=a;if(s.indexOf("#")>-1){let s=e.slice(1);return"/"!==s[0]&&(s="/"+s),ku(s,"")}return ku(t,s)+n+e}function $u(s,a,t,n=!1,e=!1){return{back:s,current:a,forward:t,replaced:n,position:window.history.length,scroll:e?Fu():null}}function Uu(s){const{history:a,location:t}=window;let n={value:Mu(s,t)},e={value:a.state};function l(n,l,p){const c=s.indexOf("#"),o=c>-1?(t.host&&document.querySelector("base")?s:s.slice(c))+n:location.protocol+"//"+location.host+s+n;try{a[p?"replaceState":"pushState"](l,"",o),e.value=l}catch(d){console.error(d),t[p?"replace":"assign"](o)}}return e.value||l(n.value,{back:null,current:n.value,forward:null,position:a.length-1,replaced:!0,scroll:null},!0),{location:n,state:e,push:function(s,t){const p=yu({},e.value,a.state,{forward:s,scroll:Fu()});l(p.current,p,!0),l(s,yu({},$u(n.value,s,null),{position:p.position+1},t),!1),n.value=s},replace:function(s,t){l(s,yu({},a.state,$u(e.value.back,s,e.value.forward,!0),t,{position:e.value.position}),!0),n.value=s}}}function Vu(s){const a=Uu(s=Tu(s)),t=function(s,a,t,n){let e=[],l=[],p=null;const c=({state:l})=>{const c=Mu(s,location),o=t.value,d=a.value;let r=0;if(l){if(t.value=c,a.value=l,p&&p===o)return void(p=null);r=d?l.position-d.position:0}else n(c);e.forEach((s=>{s(t.value,o,{delta:r,type:Iu.pop,direction:r?r>0?Eu.forward:Eu.back:Eu.unknown})}))};function o(){const{history:s}=window;s.state&&s.replaceState(yu({},s.state,{scroll:Fu()}),"")}return window.addEventListener("popstate",c),window.addEventListener("beforeunload",o),{pauseListeners:function(){p=t.value},listen:function(s){e.push(s);const a=()=>{const a=e.indexOf(s);a>-1&&e.splice(a,1)};return l.push(a),a},destroy:function(){for(const s of l)s();l=[],window.removeEventListener("popstate",c),window.removeEventListener("beforeunload",o)}}}(s,a.state,a.location,a.replace);const n=yu({location:"",base:s,go:function(s,a=!0){a||t.pauseListeners(),history.go(s)},createHref:Nu.bind(null,s)},a,t);return Object.defineProperty(n,"location",{get:()=>a.location.value}),Object.defineProperty(n,"state",{get:()=>a.state.value}),n}function Hu(s){return(s=location.host?s||location.pathname+location.search:"").indexOf("#")<0&&(s+="#"),Vu(s)}function Wu(s){return"string"==typeof s||"symbol"==typeof s}const Gu={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Ku=uu("nf");var Qu,Yu;function Xu(s,a){return yu(new Error,{type:s,[Ku]:!0},a)}function Ju(s,a){return s instanceof Error&&Ku in s&&(null==a||!!(s.type&a))}(Yu=Qu||(Qu={}))[Yu.aborted=4]="aborted",Yu[Yu.cancelled=8]="cancelled",Yu[Yu.duplicated=16]="duplicated";const Zu={sensitive:!1,strict:!1,start:!0,end:!0},sg=/[.+*?^${}()[\]/\\]/g;function ag(s,a){let t=0;for(;ta.length?1===a.length&&80===a[0]?1:-1:0}function tg(s,a){let t=0;const n=s.score,e=a.score;for(;t1&&("*"===c||"+"===c)&&a(`A repeatable param (${d}) must be alone in its segment. eg: '/:ids+.`),l.push({type:1,value:d,regexp:r,repeatable:"*"===c||"+"===c,optional:"*"===c||"?"===c})):a("Invalid state to consume buffer"),d="")}function h(){d+=c}for(;o{l(h)}:xu}function l(s){if(Wu(s)){const a=n.get(s);a&&(n.delete(s),t.splice(t.indexOf(a),1),a.children.forEach(l),a.alias.forEach(l))}else{let a=t.indexOf(s);a>-1&&(t.splice(a,1),s.record.name&&n.delete(s.record.name),s.children.forEach(l),s.alias.forEach(l))}}function p(s){let a=0;for(;a=0;)a++;t.splice(a,0,s),s.record.name&&!og(s)&&n.set(s.record.name,s)}return a=rg({strict:!1,end:!0,sensitive:!1},a),s.forEach((s=>e(s))),{addRoute:e,resolve:function(s,a){let e,l,p,c={};if("name"in s&&s.name){if(e=n.get(s.name),!e)throw Xu(1,{location:s});p=e.record.name,c=yu(function(s,a){let t={};for(let n of a)n in s&&(t[n]=s[n]);return t}(a.params,e.keys.filter((s=>!s.optional)).map((s=>s.name))),s.params),l=e.stringify(c)}else if("path"in s)l=s.path,e=t.find((s=>s.re.test(l))),e&&(c=e.parse(l),p=e.record.name);else{if(e=a.name?n.get(a.name):t.find((s=>s.re.test(a.path))),!e)throw Xu(1,{location:s,currentLocation:a});p=e.record.name,c=yu({},a.params,s.params),l=e.stringify(c)}const o=[];let d=e;for(;d;)o.unshift(d.record),d=d.parent;return{name:p,path:l,params:c,matched:o,meta:dg(o)}},removeRoute:l,getRoutes:function(){return t},getRecordMatcher:function(s){return n.get(s)}}}function cg(s){const a={},t=s.props||!1;if("component"in s)a.default=t;else for(let n in s.components)a[n]="boolean"==typeof t?t:t[n];return a}function og(s){for(;s;){if(s.record.aliasOf)return!0;s=s.parent}return!1}function dg(s){return s.reduce(((s,a)=>yu(s,a.meta)),{})}function rg(s,a){let t={};for(let n in s)t[n]=n in a?a[n]:s[n];return t}const ig=/#/g,hg=/&/g,ug=/\//g,gg=/=/g,jg=/\?/g,mg=/\+/g,vg=/%5B/g,bg=/%5D/g,fg=/%5E/g,yg=/%60/g,qg=/%7B/g,xg=/%7C/g,wg=/%7D/g,_g=/%20/g;function kg(s){return encodeURI(""+s).replace(xg,"|").replace(vg,"[").replace(bg,"]")}function Sg(s){return kg(s).replace(mg,"%2B").replace(_g,"+").replace(ig,"%23").replace(hg,"%26").replace(yg,"`").replace(qg,"{").replace(wg,"}").replace(fg,"^")}function Cg(s){return function(s){return kg(s).replace(ig,"%23").replace(jg,"%3F")}(s).replace(ug,"%2F")}function zg(s){try{return decodeURIComponent(""+s)}catch(a){}return""+s}function Pg(s){const a={};if(""===s||"?"===s)return a;const t=("?"===s[0]?s.slice(1):s).split("&");for(let n=0;ns&&Sg(s))):[n&&Sg(n)];for(let s=0;snull==s?null:""+s)):null==n?n:""+n)}return a}function Eg(){let s=[];return{add:function(a){return s.push(a),()=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)}},list:()=>s,reset:function(){s=[]}}}function Dg(s,a,t,n,e){const l=n&&(n.enterCallbacks[e]=n.enterCallbacks[e]||[]);return()=>new Promise(((p,c)=>{const o=s=>{var o;!1===s?c(Xu(4,{from:t,to:a})):s instanceof Error?c(s):"string"==typeof(o=s)||o&&"object"==typeof o?c(Xu(2,{from:a,to:s})):(l&&n.enterCallbacks[e]===l&&"function"==typeof s&&l.push(s),p())},d=s.call(n&&n.instances[e],a,t,o);let r=Promise.resolve(d);s.length<3&&(r=r.then(o)),r.catch((s=>c(s)))}))}function Tg(s,a,t,n){const e=[];for(const p of s)for(const s in p.components){let c=p.components[s];if("beforeRouteEnter"===a||p.instances[s])if("object"==typeof(l=c)||"displayName"in l||"props"in l||"__vccOpts"in l){const l=(c.__vccOpts||c)[a];l&&e.push(Dg(l,t,n,p,s))}else{let l=c();l=l.catch(console.error),e.push((()=>l.then((e=>{if(!e)return Promise.reject(new Error(`Couldn't resolve component "${s}" at "${p.path}"`));const l=(c=e).__esModule||hu&&"Module"===c[Symbol.toStringTag]?e.default:e;var c;p.components[s]=l;const o=(l.__vccOpts||l)[a];return o&&Dg(o,t,n,p,s)()}))))}}var l;return e}function Ag(s){const a=Ra(mu),t=Ra(vu),n=Sa((()=>a.resolve(xa(s.to)))),e=Sa((()=>{let{matched:s}=n.value,{length:a}=s;const e=s[a-1];let l=t.matched;if(!e||!l.length)return-1;let p=l.findIndex(Su.bind(null,e));if(p>-1)return p;let c=Fg(s[a-2]);return a>1&&Fg(e)===c&&l[l.length-1].path!==c?l.findIndex(Su.bind(null,s[a-2])):p})),l=Sa((()=>e.value>-1&&function(s,a){for(let t in a){let n=a[t],e=s[t];if("string"==typeof n){if(n!==e)return!1}else if(!Array.isArray(e)||e.length!==n.length||n.some(((s,a)=>s!==e[a])))return!1}return!0}(t.params,n.value.params))),p=Sa((()=>e.value>-1&&e.value===t.matched.length-1&&Cu(t.params,n.value.params)));return{route:n,href:Sa((()=>n.value.href)),isActive:l,isExactActive:p,navigate:function(t={}){return function(s){if(s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)return;if(s.defaultPrevented)return;if(void 0!==s.button&&0!==s.button)return;if(s.currentTarget&&s.currentTarget.getAttribute){const a=s.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(a))return}s.preventDefault&&s.preventDefault();return!0}(t)?a[xa(s.replace)?"replace":"push"](xa(s.to)):Promise.resolve()}}}const Ng=Ka({name:"RouterLink",props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},setup(s,{slots:a}){const t=oa(Ag(s)),{options:n}=Ra(mu),e=Sa((()=>({[Lg(s.activeClass,n.linkActiveClass,"router-link-active")]:t.isActive,[Lg(s.exactActiveClass,n.linkExactActiveClass,"router-link-exact-active")]:t.isExactActive})));return()=>{const n=a.default&&a.default(t);return s.custom?n:xe("a",{"aria-current":t.isExactActive?s.ariaCurrentValue:null,href:t.href,onClick:t.navigate,class:e.value},n)}}});function Fg(s){return s?s.aliasOf?s.aliasOf.path:s.path:""}const Lg=(s,a,t)=>null!=s?s:null!=a?a:t;function Rg(s,a){if(!s)return null;const t=s(a);return 1===t.length?t[0]:t}const Bg=Ka({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},setup(s,{attrs:a,slots:t}){const n=Ra(bu),e=Sa((()=>s.route||n.value)),l=Ra(ju,0),p=Sa((()=>e.value.matched[l]));La(ju,l+1),La(gu,p),La(bu,e);const c=qa(o);var o;return ve((()=>[c.value,p.value,s.name]),(([s,a,t],[n,e,l])=>{a&&(a.instances[t]=s,e&&e!==a&&s&&s===n&&(a.leaveGuards.size||(a.leaveGuards=e.leaveGuards),a.updateGuards.size||(a.updateGuards=e.updateGuards))),!s||!a||e&&Su(a,e)&&n||(a.enterCallbacks[t]||[]).forEach((a=>a(s)))}),{flush:"post"}),()=>{const n=e.value,l=p.value,o=l&&l.components[s.name],d=s.name;if(!o)return Rg(t.default,{Component:o,route:n});const r=l.props[s.name],i=r?!0===r?n.params:"function"==typeof r?r(n):r:null,h=xe(o,yu({},i,a,{onVnodeUnmounted:s=>{s.component.isUnmounted&&(l.instances[d]=null)},ref:c}));return Rg(t.default,{Component:h,route:n})||h}}});function Mg(s){const a=pg(s.routes,s);let t=s.parseQuery||Pg,n=s.stringifyQuery||Ig,e=s.history;const l=Eg(),p=Eg(),c=Eg(),o=qa(Gu,!0);let d=Gu;fu&&s.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const r=qu.bind(null,(s=>""+s)),i=qu.bind(null,Cg),h=qu.bind(null,zg);function u(s,l){if(l=yu({},l||o.value),"string"==typeof s){let n=_u(t,s,l.path),p=a.resolve({path:n.path},l),c=e.createHref(n.fullPath);return yu(n,p,{params:h(p.params),hash:zg(n.hash),redirectedFrom:void 0,href:c})}let p;"path"in s?p=yu({},s,{path:_u(t,s.path,l.path).path}):(p=yu({},s,{params:i(s.params)}),l.params=i(l.params));let c=a.resolve(p,l);const d=s.hash||"";c.params=r(h(c.params));const u=function(s,a){let t=a.query?s(a.query):"";return a.path+(t&&"?")+t+(a.hash||"")}(n,yu({},s,{hash:(g=d,kg(g).replace(qg,"{").replace(wg,"}").replace(fg,"^")),path:c.path}));var g;let j=e.createHref(u);return yu({fullPath:u,hash:d,query:n===Ig?Og(s.query):s.query},c,{redirectedFrom:void 0,href:j})}function g(s){return"string"==typeof s?_u(t,s,o.value.path):yu({},s)}function j(s,a){if(d!==s)return Xu(8,{from:a,to:s})}function m(s){return b(s)}function v(s){const a=s.matched[s.matched.length-1];if(a&&a.redirect){const{redirect:t}=a;let n="function"==typeof t?t(s):t;return"string"==typeof n&&(n=n.indexOf("?")>-1||n.indexOf("#")>-1?n=g(n):{path:n}),yu({query:s.query,hash:s.hash,params:s.params},n)}}function b(s,a){const t=d=u(s),e=o.value,l=s.state,p=s.force,c=!0===s.replace,r=v(t);if(r)return b(yu(g(r),{state:l,force:p,replace:c}),a||t);const i=t;let h;return i.redirectedFrom=a,!p&&function(s,a,t){let n=a.matched.length-1,e=t.matched.length-1;return n>-1&&n===e&&Su(a.matched[n],t.matched[e])&&Cu(a.params,t.params)&&s(a.query)===s(t.query)&&a.hash===t.hash}(n,e,t)&&(h=Xu(16,{to:i,from:e}),I(e,e,!0,!1)),(h?Promise.resolve(h):y(i,e)).catch((s=>Ju(s)?s:z(s))).then((s=>{if(s){if(Ju(s,2))return b(yu(g(s.to),{state:l,force:p,replace:c}),a||i)}else s=x(i,e,!0,c,l);return q(i,e,s),s}))}function f(s,a){const t=j(s,a);return t?Promise.reject(t):Promise.resolve()}function y(s,a){let t;const[n,e,c]=function(s,a){const t=[],n=[],e=[],l=Math.max(a.matched.length,s.matched.length);for(let p=0;pSu(s,l)))?n.push(l):t.push(l));const c=s.matched[p];c&&(a.matched.find((s=>Su(s,c)))||e.push(c))}return[t,n,e]}(s,a);t=Tg(n.reverse(),"beforeRouteLeave",s,a);for(const l of n)l.leaveGuards.forEach((n=>{t.push(Dg(n,s,a))}));const o=f.bind(null,s,a);return t.push(o),$g(t).then((()=>{t=[];for(const n of l.list())t.push(Dg(n,s,a));return t.push(o),$g(t)})).then((()=>{t=Tg(e,"beforeRouteUpdate",s,a);for(const n of e)n.updateGuards.forEach((n=>{t.push(Dg(n,s,a))}));return t.push(o),$g(t)})).then((()=>{t=[];for(const n of s.matched)if(n.beforeEnter&&a.matched.indexOf(n)<0)if(Array.isArray(n.beforeEnter))for(const e of n.beforeEnter)t.push(Dg(e,s,a));else t.push(Dg(n.beforeEnter,s,a));return t.push(o),$g(t)})).then((()=>(s.matched.forEach((s=>s.enterCallbacks={})),t=Tg(c,"beforeRouteEnter",s,a),t.push(o),$g(t)))).then((()=>{t=[];for(const n of p.list())t.push(Dg(n,s,a));return t.push(o),$g(t)})).catch((s=>Ju(s,8)?s:Promise.reject(s)))}function q(s,a,t){for(const n of c.list())n(s,a,t)}function x(s,a,t,n,l){const p=j(s,a);if(p)return p;const c=a===Gu,d=fu?history.state:{};t&&(n||c?e.replace(s.fullPath,yu({scroll:c&&d&&d.scroll},l)):e.push(s.fullPath,l)),o.value=s,I(s,a,t,c),P()}let w;function _(){w=e.listen(((s,a,t)=>{let n=u(s);const l=v(n);if(l)return void b(yu(l,{replace:!0}),n).catch(xu);d=n;const p=o.value;var c,r;fu&&(c=Ru(p.fullPath,t.delta),r=Fu(),Bu.set(c,r)),y(n,p).catch((s=>Ju(s,12)?s:Ju(s,2)?(b(s.to,n).catch(xu),Promise.reject()):(t.delta&&e.go(-t.delta,!1),z(s)))).then((s=>{(s=s||x(n,p,!1))&&t.delta&&e.go(-t.delta,!1),q(n,p,s)})).catch(xu)}))}let k,S=Eg(),C=Eg();function z(s){return P(s),C.list().forEach((a=>a(s))),Promise.reject(s)}function P(s){k||(k=!0,_(),S.list().forEach((([a,t])=>s?t(s):a())),S.reset())}function I(a,t,n,e){const{scrollBehavior:l}=s;if(!fu||!l)return Promise.resolve();let p=!n&&function(s){const a=Bu.get(s);return Bu.delete(s),a}(Ru(a.fullPath,0))||(e||!n)&&history.state&&history.state.scroll||null;return oe().then((()=>l(a,t,p))).then((s=>s&&Lu(s))).catch(z)}const O=s=>e.go(s);let E;const D=new Set;return{currentRoute:o,addRoute:function(s,t){let n,e;return Wu(s)?(n=a.getRecordMatcher(s),e=t):e=s,a.addRoute(e,n)},removeRoute:function(s){let t=a.getRecordMatcher(s);t&&a.removeRoute(t)},hasRoute:function(s){return!!a.getRecordMatcher(s)},getRoutes:function(){return a.getRoutes().map((s=>s.record))},resolve:u,options:s,push:m,replace:function(s){return m(yu(g(s),{replace:!0}))},go:O,back:()=>O(-1),forward:()=>O(1),beforeEach:l.add,beforeResolve:p.add,afterEach:c.add,onError:C.add,isReady:function(){return k&&o.value!==Gu?Promise.resolve():new Promise(((s,a)=>{S.add([s,a])}))},install(s){s.component("RouterLink",Ng),s.component("RouterView",Bg),s.config.globalProperties.$router=this,Object.defineProperty(s.config.globalProperties,"$route",{get:()=>xa(o)}),fu&&!E&&o.value===Gu&&(E=!0,m(e.location).catch((s=>{})));const a={};for(let n in Gu)a[n]=Sa((()=>o.value[n]));s.provide(mu,this),s.provide(vu,oa(a)),s.provide(bu,o);let t=s.unmount;D.add(s),s.unmount=function(){D.delete(s),D.size<1&&(w(),o.value=Gu,E=!1,k=!1),t()}}}}function $g(s){return s.reduce(((s,a)=>s.then((()=>a()))),Promise.resolve())}const Ug=navigator.userAgent.toLowerCase(),Vg=/ios|iphone|ipod|ipad|android/.test(Ug);function Hg(s,a="-"){return s.replace(/([a-z\d])([A-Z])/g,"$1"+a+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+a+"$2").toLowerCase()}let Wg=[],Gg=!1;function Kg(){var s,a;const t=window.vueRouter,{path:n}=t.currentRoute.value;return(null==(s=Th.site.simulator)?void 0:s.routeMapper)?null==(a=Th.site.simulator)?void 0:a.routeMapper(n):n}function Qg(){window.top.postMessage({type:"replacePath",value:Kg()},"*")}function Yg(){const s=document.querySelector("iframe");var a;s&&(a=()=>{s.contentWindow.postMessage({type:"replacePath",value:Kg()},"*")},Gg?a():Wg.push(a))}function Xg(s){window.addEventListener("message",(a=>{var t,n;if("replacePath"!==(null==(t=a.data)?void 0:t.type))return;const e=(null==(n=a.data)?void 0:n.value)||"";s.currentRoute.value.path!==e&&s.replace(e).catch((()=>{}))}))}window.top===window?window.addEventListener("message",(s=>{"iframeReady"===s.data.type&&(Gg=!0,Wg.forEach((s=>s())),Wg=[])})):window.top.postMessage({type:"iframeReady"},"*"),Vg&&location.replace("mobile.html"+location.hash);const{locales:Jg,defaultLang:Zg}=Th.site;function sj(s){const a=s.path.split("/")[1];return-1!==Object.keys(Jg).indexOf(a)?a:au()}tu(Zg);const aj=Mg({history:Hu(),routes:function(){const s=[],a=Object.keys(Ah);return Jg?s.push({name:"notFound",path:"/:path(.*)+",redirect:s=>({name:sj(s)})}):s.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),a.forEach((a=>{const{component:t,lang:n}=function(s){if(-1!==s.indexOf("_")){const a=s.split("_");return{component:`${Hg(a.shift())}`,lang:a.join("-")}}return{component:`${Hg(s)}`,lang:""}}(a);"home"===t&&function(a,t){s.push({name:t||"home",path:`/${t||""}`,component:a,meta:{lang:t}})}(Ah[a],n),n?s.push({name:`${n}/${t}`,path:`/${n}/${t}`,component:Ah[a],meta:{lang:n,name:t}}):s.push({name:`${t}`,path:`/${t}`,component:Ah[a],meta:{name:t}})})),s}(),scrollBehavior:s=>s.hash?{el:s.hash}:{x:0,y:0}});aj.afterEach((()=>{oe(Yg)})),!1!==(null==(s=Th.site.simulator)?void 0:s.syncPathFromSimulator)&&Xg(aj),window.vueRouter=aj,window.app=nl(eu).use(aj).component(iu.name,iu),setTimeout((()=>{window.app.mount("#app")}),0);const tj={name:"DemoBlock",props:{card:Boolean,title:String}},nj={class:"van-doc-demo-block"},ej={key:0,class:"van-doc-demo-block__title"},lj={key:1,class:"van-doc-demo-block__card"};var pj=el(tj,[["render",function(s,a,t,n,e,l){return cn(),hn("div",nj,[t.title?(cn(),hn("h2",ej,j(t.title),1)):_n("v-if",!0),t.card?(cn(),hn("div",lj,[Pn(s.$slots,"default")])):Pn(s.$slots,"default",{key:2})])}]]);var cj=el({name:"DemoSection",computed:{demoName(){const{meta:s}=this.$route||{};return s&&s.name?`demo-${Hg(s.name)}`:""}}},[["render",function(s,a,t,n,e,l){return cn(),hn("section",{class:g(["van-doc-demo-section",l.demoName])},[Pn(s.$slots,"default")],2)}]]);const oj={},dj={versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[]},rj={},ij={viewBox:"0 0 1024 1024"},hj=[fn("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),fn("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)];const uj={class:"demo-home-nav"},gj={class:"demo-home-nav__title"},jj={class:"demo-home-nav__group"};const mj={class:"demo-home"},vj=["src"],bj={key:0,class:"demo-home__desc"};var fj=el({components:{DemoHomeNav:el({components:{ArrowRight:el(rj,[["render",function(s,a){return cn(),hn("svg",ij,hj)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(s,a,t,n,e,l){const p=Xt("arrow-right"),c=Xt("router-link");return cn(),hn("div",uj,[fn("div",gj,j(t.group.title),1),fn("div",jj,[(cn(!0),hn(an,null,zn(t.group.items,(s=>(cn(),un(c,{class:"demo-home-nav__block",key:s.path,to:`${l.base}/${s.path}`},{default:Da((()=>[xn(j(s.title)+" ",1),yn(p,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:s}=this.$route.meta;return s},config(){const{locales:s}=dj;return s?s[this.lang]:dj},smallTitle(){return this.config.title.length>=8}}},[["render",function(s,a,t,n,e,l){const p=Xt("demo-home-nav");return cn(),hn("div",mj,[fn("h1",{class:g(["demo-home__title",{"demo-home__title--small":l.smallTitle}])},[fn("img",{src:l.config.logo},null,8,vj),fn("span",null,j(l.config.title),1)],2),l.config.description?(cn(),hn("h2",bj,j(l.config.description),1)):_n("v-if",!0),(cn(!0),hn(an,null,zn(l.config.nav,((s,a)=>(cn(),un(p,{key:a,lang:l.lang,group:s},null,8,["lang","group"])))),128))])}]]);const{locales:yj,defaultLang:qj}=dj;function xj(s){const a=s.path.split("/")[1];return-1!==Object.keys(yj).indexOf(a)?a:au()}tu(qj);const wj=Mg({history:Hu(),routes:function(){const s=[],a=Object.keys(oj),t=yj?Object.keys(yj):[];return t.length?(s.push({name:"NotFound",path:"/:path(.*)+",redirect:s=>({name:xj(s)})}),t.forEach((a=>{s.push({name:a,path:`/${a}`,component:fj,meta:{lang:a}})}))):(s.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),s.push({name:"home",path:"/",component:fj})),a.forEach((a=>{const n=Hg(a);t.length?t.forEach((t=>{s.push({name:`${t}/${n}`,path:`/${t}/${n}`,component:oj[a],meta:{name:a,lang:t}})})):s.push({name:n,path:`/${n}`,component:oj[a],meta:{name:a}})})),s}(),scrollBehavior:(s,a,t)=>t||{x:0,y:0}});ve(wj.currentRoute,(()=>{wj.currentRoute.value.redirectedFrom||oe(Qg)})),Xg(wj),window.vueRouter=wj;const _j={class:"demo-nav"},kj={class:"demo-nav__title"},Sj=["d"];var Cj=el({components:{DemoNav:el({data:()=>({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:s}=this.$route.meta||{};return s?s.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},[["render",function(s,a,t,n,e,l){return Mt((cn(),hn("div",_j,[fn("div",kj,j(l.title),1),(cn(),hn("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:a[0]||(a[0]=(...s)=>l.onBack&&l.onBack(...s))},[fn("path",{fill:"#969799","fill-rule":"evenodd",d:e.path},null,8,Sj)]))],512)),[[Ze,l.title]])}]])}},[["render",function(s,a,t,n,e,l){const p=Xt("demo-nav"),c=Xt("demo-section"),o=Xt("router-view");return cn(),hn(an,null,[yn(p),yn(o,null,{default:Da((({Component:s})=>[(cn(),un(Xa,null,[yn(c,null,{default:Da((()=>{return[(cn(),un((a=s,E(a)?Zt("components",a,!1)||a:a||Jt)))];var a})),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var s,a="ontouchstart"in window;document.createTouch||(document.createTouch=function(s,a,n,e,l,p,c){return new t(a,n,{pageX:e,pageY:l,screenX:p,screenY:c,clientX:e-window.pageXOffset,clientY:l-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var s=e(),a=0;a{window.app.mount("#app")}),0); diff --git a/vite/assets/main.5e9c7f08.js b/vite/assets/main.5e9c7f08.js deleted file mode 100644 index a7b37143..00000000 --- a/vite/assets/main.5e9c7f08.js +++ /dev/null @@ -1,8 +0,0 @@ -var s,a=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,e=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,c=(s,t,n)=>t in s?a(s,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):s[t]=n;function o(s,a){const t=Object.create(null),n=s.split(",");for(let e=0;e!!t[s.toLowerCase()]:s=>!!t[s]}!function(){const s=document.createElement("link").relList;if(!(s&&s.supports&&s.supports("modulepreload"))){for(const s of document.querySelectorAll('link[rel="modulepreload"]'))a(s);new MutationObserver((s=>{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();const d=o("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function r(s){if(z(s)){const a={};for(let t=0;t{if(s){const t=s.split(h);t.length>1&&(a[t[0].trim()]=t[1].trim())}})),a}function g(s){let a="";if(E(s))a=s;else if(z(s))for(let t=0;tnull==s?"":z(s)||T(s)&&s.toString===N?JSON.stringify(s,m,2):String(s),m=(s,a)=>a&&a.__v_isRef?m(s,a.value):P(a)?{[`Map(${a.size})`]:[...a.entries()].reduce(((s,[a,t])=>(s[`${a} =>`]=t,s)),{})}:I(a)?{[`Set(${a.size})`]:[...a.values()]}:!T(a)||z(a)||L(a)?a:String(a),v={},b=[],f=()=>{},y=()=>!1,q=/^on[^a-z]/,x=s=>q.test(s),w=s=>s.startsWith("onUpdate:"),_=Object.assign,k=(s,a)=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)},S=Object.prototype.hasOwnProperty,C=(s,a)=>S.call(s,a),z=Array.isArray,P=s=>"[object Map]"===F(s),I=s=>"[object Set]"===F(s),O=s=>"function"==typeof s,E=s=>"string"==typeof s,D=s=>"symbol"==typeof s,T=s=>null!==s&&"object"==typeof s,A=s=>T(s)&&O(s.then)&&O(s.catch),N=Object.prototype.toString,F=s=>N.call(s),L=s=>"[object Object]"===F(s),R=s=>E(s)&&"NaN"!==s&&"-"!==s[0]&&""+parseInt(s,10)===s,B=o(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),M=s=>{const a=Object.create(null);return t=>a[t]||(a[t]=s(t))},$=/-(\w)/g,U=M((s=>s.replace($,((s,a)=>a?a.toUpperCase():"")))),V=/\B([A-Z])/g,H=M((s=>s.replace(V,"-$1").toLowerCase())),W=M((s=>s.charAt(0).toUpperCase()+s.slice(1))),G=M((s=>s?`on${W(s)}`:"")),K=(s,a)=>!Object.is(s,a),Q=(s,a)=>{for(let t=0;t{Object.defineProperty(s,a,{configurable:!0,enumerable:!1,value:t})},X=s=>{const a=parseFloat(s);return isNaN(a)?s:a};let J;const Z=[];class ss{constructor(s=!1){this.active=!0,this.effects=[],this.cleanups=[],!s&&J&&(this.parent=J,this.index=(J.scopes||(J.scopes=[])).push(this)-1)}run(s){if(this.active)try{return this.on(),s()}finally{this.off()}}on(){this.active&&(Z.push(this),J=this)}off(){this.active&&(Z.pop(),J=Z[Z.length-1])}stop(s){if(this.active){if(this.effects.forEach((s=>s.stop())),this.cleanups.forEach((s=>s())),this.scopes&&this.scopes.forEach((s=>s.stop(!0))),this.parent&&!s){const s=this.parent.scopes.pop();s&&s!==this&&(this.parent.scopes[this.index]=s,s.index=this.index)}this.active=!1}}}const as=s=>{const a=new Set(s);return a.w=0,a.n=0,a},ts=s=>(s.w&ps)>0,ns=s=>(s.n&ps)>0,es=new WeakMap;let ls=0,ps=1;const cs=[];let os;const ds=Symbol(""),rs=Symbol("");class is{constructor(s,a=null,t){this.fn=s,this.scheduler=a,this.active=!0,this.deps=[],function(s,a){(a=a||J)&&a.active&&a.effects.push(s)}(this,t)}run(){if(!this.active)return this.fn();if(!cs.includes(this))try{return cs.push(os=this),gs.push(us),us=!0,ps=1<<++ls,ls<=30?(({deps:s})=>{if(s.length)for(let a=0;a{const{deps:a}=s;if(a.length){let t=0;for(let n=0;n0?cs[s-1]:void 0}}stop(){this.active&&(hs(this),this.onStop&&this.onStop(),this.active=!1)}}function hs(s){const{deps:a}=s;if(a.length){for(let t=0;t{("length"===a||a>=n)&&c.push(s)}));else switch(void 0!==t&&c.push(p.get(t)),a){case"add":z(s)?R(t)&&c.push(p.get("length")):(c.push(p.get(ds)),P(s)&&c.push(p.get(rs)));break;case"delete":z(s)||(c.push(p.get(ds)),P(s)&&c.push(p.get(rs)));break;case"set":P(s)&&c.push(p.get(ds))}if(1===c.length)c[0]&&qs(c[0]);else{const s=[];for(const a of c)a&&s.push(...a);qs(as(s))}}function qs(s,a){for(const t of z(s)?s:[...s])(t!==os||t.allowRecurse)&&(t.scheduler?t.scheduler():t.run())}const xs=o("__proto__,__v_isRef,__isVue"),ws=new Set(Object.getOwnPropertyNames(Symbol).map((s=>Symbol[s])).filter(D)),_s=Ps(),ks=Ps(!1,!0),Ss=Ps(!0),Cs=zs();function zs(){const s={};return["includes","indexOf","lastIndexOf"].forEach((a=>{s[a]=function(...s){const t=ga(this);for(let a=0,e=this.length;a{s[a]=function(...s){js();const t=ga(this)[a].apply(this,s);return ms(),t}})),s}function Ps(s=!1,a=!1){return function(t,n,e){if("__v_isReactive"===n)return!s;if("__v_isReadonly"===n)return s;if("__v_raw"===n&&e===(s?a?pa:la:a?ea:na).get(t))return t;const l=z(t);if(!s&&l&&C(Cs,n))return Reflect.get(Cs,n,e);const p=Reflect.get(t,n,e);if(D(n)?ws.has(n):xs(n))return p;if(s||vs(t,0,n),a)return p;if(fa(p)){return!l||!R(n)?p.value:p}return T(p)?s?da(p):oa(p):p}}function Is(s=!1){return function(a,t,n,e){let l=a[t];if(!s&&(n=ga(n),l=ga(l),!z(a)&&fa(l)&&!fa(n)))return l.value=n,!0;const p=z(a)&&R(t)?Number(t)!0,deleteProperty:(s,a)=>!0},Ds=_({},Os,{get:ks,set:Is(!0)}),Ts=s=>T(s)?oa(s):s,As=s=>T(s)?da(s):s,Ns=s=>s,Fs=s=>Reflect.getPrototypeOf(s);function Ls(s,a,t=!1,n=!1){const e=ga(s=s.__v_raw),l=ga(a);a!==l&&!t&&vs(e,0,a),!t&&vs(e,0,l);const{has:p}=Fs(e),c=n?Ns:t?As:Ts;return p.call(e,a)?c(s.get(a)):p.call(e,l)?c(s.get(l)):void(s!==e&&s.get(a))}function Rs(s,a=!1){const t=this.__v_raw,n=ga(t),e=ga(s);return s!==e&&!a&&vs(n,0,s),!a&&vs(n,0,e),s===e?t.has(s):t.has(s)||t.has(e)}function Bs(s,a=!1){return s=s.__v_raw,!a&&vs(ga(s),0,ds),Reflect.get(s,"size",s)}function Ms(s){s=ga(s);const a=ga(this);return Fs(a).has.call(a,s)||(a.add(s),ys(a,"add",s,s)),this}function $s(s,a){a=ga(a);const t=ga(this),{has:n,get:e}=Fs(t);let l=n.call(t,s);l||(s=ga(s),l=n.call(t,s));const p=e.call(t,s);return t.set(s,a),l?K(a,p)&&ys(t,"set",s,a):ys(t,"add",s,a),this}function Us(s){const a=ga(this),{has:t,get:n}=Fs(a);let e=t.call(a,s);e||(s=ga(s),e=t.call(a,s)),n&&n.call(a,s);const l=a.delete(s);return e&&ys(a,"delete",s,void 0),l}function Vs(){const s=ga(this),a=0!==s.size,t=s.clear();return a&&ys(s,"clear",void 0,void 0),t}function Hs(s,a){return function(t,n){const e=this,l=e.__v_raw,p=ga(l),c=a?Ns:s?As:Ts;return!s&&vs(p,0,ds),l.forEach(((s,a)=>t.call(n,c(s),c(a),e)))}}function Ws(s,a,t){return function(...n){const e=this.__v_raw,l=ga(e),p=P(l),c="entries"===s||s===Symbol.iterator&&p,o="keys"===s&&p,d=e[s](...n),r=t?Ns:a?As:Ts;return!a&&vs(l,0,o?rs:ds),{next(){const{value:s,done:a}=d.next();return a?{value:s,done:a}:{value:c?[r(s[0]),r(s[1])]:r(s),done:a}},[Symbol.iterator](){return this}}}}function Gs(s){return function(...a){return"delete"!==s&&this}}function Ks(){const s={get(s){return Ls(this,s)},get size(){return Bs(this)},has:Rs,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!1)},a={get(s){return Ls(this,s,!1,!0)},get size(){return Bs(this)},has:Rs,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!0)},t={get(s){return Ls(this,s,!0)},get size(){return Bs(this,!0)},has(s){return Rs.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!1)},n={get(s){return Ls(this,s,!0,!0)},get size(){return Bs(this,!0)},has(s){return Rs.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((e=>{s[e]=Ws(e,!1,!1),t[e]=Ws(e,!0,!1),a[e]=Ws(e,!1,!0),n[e]=Ws(e,!0,!0)})),[s,t,a,n]}const[Qs,Ys,Xs,Js]=Ks();function Zs(s,a){const t=a?s?Js:Xs:s?Ys:Qs;return(a,n,e)=>"__v_isReactive"===n?!s:"__v_isReadonly"===n?s:"__v_raw"===n?a:Reflect.get(C(t,n)&&n in a?t:a,n,e)}const sa={get:Zs(!1,!1)},aa={get:Zs(!1,!0)},ta={get:Zs(!0,!1)},na=new WeakMap,ea=new WeakMap,la=new WeakMap,pa=new WeakMap;function ca(s){return s.__v_skip||!Object.isExtensible(s)?0:function(s){switch(s){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((s=>F(s).slice(8,-1))(s))}function oa(s){return s&&s.__v_isReadonly?s:ra(s,!1,Os,sa,na)}function da(s){return ra(s,!0,Es,ta,la)}function ra(s,a,t,n,e){if(!T(s))return s;if(s.__v_raw&&(!a||!s.__v_isReactive))return s;const l=e.get(s);if(l)return l;const p=ca(s);if(0===p)return s;const c=new Proxy(s,2===p?n:t);return e.set(s,c),c}function ia(s){return ha(s)?ia(s.__v_raw):!(!s||!s.__v_isReactive)}function ha(s){return!(!s||!s.__v_isReadonly)}function ua(s){return ia(s)||ha(s)}function ga(s){const a=s&&s.__v_raw;return a?ga(a):s}function ja(s){return Y(s,"__v_skip",!0),s}function ma(s){bs()&&((s=ga(s)).dep||(s.dep=as()),fs(s.dep))}function va(s,a){(s=ga(s)).dep&&qs(s.dep)}const ba=s=>T(s)?oa(s):s;function fa(s){return Boolean(s&&!0===s.__v_isRef)}class ya{constructor(s,a=!1){this._shallow=a,this.dep=void 0,this.__v_isRef=!0,this._rawValue=a?s:ga(s),this._value=a?s:ba(s)}get value(){return ma(this),this._value}set value(s){s=this._shallow?s:ga(s),K(s,this._rawValue)&&(this._rawValue=s,this._value=this._shallow?s:ba(s),va(this))}}function qa(s,a=!1){return fa(s)?s:new ya(s,a)}function xa(s){return fa(s)?s.value:s}const wa={get:(s,a,t)=>xa(Reflect.get(s,a,t)),set:(s,a,t,n)=>{const e=s[a];return fa(e)&&!fa(t)?(e.value=t,!0):Reflect.set(s,a,t,n)}};function _a(s){return ia(s)?s:new Proxy(s,wa)}class ka{constructor(s,a,t){this._setter=a,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new is(s,(()=>{this._dirty||(this._dirty=!0,va(this))})),this.__v_isReadonly=t}get value(){const s=ga(this);return ma(s),s._dirty&&(s._dirty=!1,s._value=s.effect.run()),s._value}set value(s){this._setter(s)}}function Sa(s,a){let t,n;O(s)?(t=s,n=f):(t=s.get,n=s.set);return new ka(t,n,O(s)||!s.set)}Promise.resolve();function Ca(s,a,...t){const n=s.vnode.props||v;let e=t;const l=a.startsWith("update:"),p=l&&a.slice(7);if(p&&p in n){const s=`${"modelValue"===p?"model":p}Modifiers`,{number:a,trim:l}=n[s]||v;l?e=t.map((s=>s.trim())):a&&(e=t.map(X))}let c,o=n[c=G(a)]||n[c=G(U(a))];!o&&l&&(o=n[c=G(H(a))]),o&&Gn(o,s,6,e);const d=n[c+"Once"];if(d){if(s.emitted){if(s.emitted[c])return}else s.emitted={};s.emitted[c]=!0,Gn(d,s,6,e)}}function za(s,a,t=!1){const n=a.emitsCache,e=n.get(s);if(void 0!==e)return e;const l=s.emits;let p={},c=!1;if(!O(s)){const n=s=>{const t=za(s,a,!0);t&&(c=!0,_(p,t))};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}return l||c?(z(l)?l.forEach((s=>p[s]=null)):_(p,l),n.set(s,p),p):(n.set(s,null),null)}function Pa(s,a){return!(!s||!x(a))&&(a=a.slice(2).replace(/Once$/,""),C(s,a[0].toLowerCase()+a.slice(1))||C(s,H(a))||C(s,a))}let Ia=null,Oa=null;function Ea(s){const a=Ia;return Ia=s,Oa=s&&s.type.__scopeId||null,a}function Da(s,a=Ia,t){if(!a)return s;if(s._n)return s;const n=(...t)=>{n._d&&dn(-1);const e=Ea(a),l=s(...t);return Ea(e),n._d&&dn(1),l};return n._n=!0,n._c=!0,n._d=!0,n}function Ta(s){const{type:a,vnode:t,proxy:n,withProxy:e,props:l,propsOptions:[p],slots:c,attrs:o,emit:d,render:r,renderCache:i,data:h,setupState:u,ctx:g,inheritAttrs:j}=s;let m;const v=Ea(s);try{let s;if(4&t.shapeFlag){const a=e||n;m=kn(r.call(a,a,i,l,u,h,g)),s=o}else{const t=a;0,m=kn(t.length>1?t(l,{attrs:o,slots:c,emit:d}):t(l,null)),s=a.props?o:Aa(o)}let v=m;if(s&&!1!==j){const a=Object.keys(s),{shapeFlag:t}=v;a.length&&(1&t||6&t)&&(p&&a.some(w)&&(s=Na(s,p)),v=qn(v,s))}0,t.dirs&&(v.dirs=v.dirs?v.dirs.concat(t.dirs):t.dirs),t.transition&&(v.transition=t.transition),m=v}catch(b){ln.length=0,Kn(b,s,1),m=yn(nn)}return Ea(v),m}const Aa=s=>{let a;for(const t in s)("class"===t||"style"===t||x(t))&&((a||(a={}))[t]=s[t]);return a},Na=(s,a)=>{const t={};for(const n in s)w(n)&&n.slice(9)in a||(t[n]=s[n]);return t};function Fa(s,a,t){const n=Object.keys(a);if(n.length!==Object.keys(s).length)return!0;for(let e=0;e1)return t&&O(a)?a.call(n.proxy):a}}const Ba=[Function,Array],Ma={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Ba,onEnter:Ba,onAfterEnter:Ba,onEnterCancelled:Ba,onBeforeLeave:Ba,onLeave:Ba,onAfterLeave:Ba,onLeaveCancelled:Ba,onBeforeAppear:Ba,onAppear:Ba,onAfterAppear:Ba,onAppearCancelled:Ba},setup(s,{slots:a}){const t=Fn(),n=function(){const s={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return ot((()=>{s.isMounted=!0})),it((()=>{s.isUnmounting=!0})),s}();let e;return()=>{const l=a.default&&Ga(a.default(),!0);if(!l||!l.length)return;const p=ga(s),{mode:c}=p,o=l[0];if(n.isLeaving)return Va(o);const d=Ha(o);if(!d)return Va(o);const r=Ua(d,p,n,t);Wa(d,r);const i=t.subTree,h=i&&Ha(i);let u=!1;const{getTransitionKey:g}=d.type;if(g){const s=g();void 0===e?e=s:s!==e&&(e=s,u=!0)}if(h&&h.type!==nn&&(!jn(d,h)||u)){const s=Ua(h,p,n,t);if(Wa(h,s),"out-in"===c)return n.isLeaving=!0,s.afterLeave=()=>{n.isLeaving=!1,t.update()},Va(o);"in-out"===c&&d.type!==nn&&(s.delayLeave=(s,a,t)=>{$a(n,h)[String(h.key)]=h,s._leaveCb=()=>{a(),s._leaveCb=void 0,delete r.delayedLeave},r.delayedLeave=t})}return o}}};function $a(s,a){const{leavingVNodes:t}=s;let n=t.get(a.type);return n||(n=Object.create(null),t.set(a.type,n)),n}function Ua(s,a,t,n){const{appear:e,mode:l,persisted:p=!1,onBeforeEnter:c,onEnter:o,onAfterEnter:d,onEnterCancelled:r,onBeforeLeave:i,onLeave:h,onAfterLeave:u,onLeaveCancelled:g,onBeforeAppear:j,onAppear:m,onAfterAppear:v,onAppearCancelled:b}=a,f=String(s.key),y=$a(t,s),q=(s,a)=>{s&&Gn(s,n,9,a)},x={mode:l,persisted:p,beforeEnter(a){let n=c;if(!t.isMounted){if(!e)return;n=j||c}a._leaveCb&&a._leaveCb(!0);const l=y[f];l&&jn(s,l)&&l.el._leaveCb&&l.el._leaveCb(),q(n,[a])},enter(s){let a=o,n=d,l=r;if(!t.isMounted){if(!e)return;a=m||o,n=v||d,l=b||r}let p=!1;const c=s._enterCb=a=>{p||(p=!0,q(a?l:n,[s]),x.delayedLeave&&x.delayedLeave(),s._enterCb=void 0)};a?(a(s,c),a.length<=1&&c()):c()},leave(a,n){const e=String(s.key);if(a._enterCb&&a._enterCb(!0),t.isUnmounting)return n();q(i,[a]);let l=!1;const p=a._leaveCb=t=>{l||(l=!0,n(),q(t?g:u,[a]),a._leaveCb=void 0,y[e]===s&&delete y[e])};y[e]=s,h?(h(a,p),h.length<=1&&p()):p()},clone:s=>Ua(s,a,t,n)};return x}function Va(s){if(Ya(s))return(s=qn(s)).children=null,s}function Ha(s){return Ya(s)?s.children?s.children[0]:void 0:s}function Wa(s,a){6&s.shapeFlag&&s.component?Wa(s.component.subTree,a):128&s.shapeFlag?(s.ssContent.transition=a.clone(s.ssContent),s.ssFallback.transition=a.clone(s.ssFallback)):s.transition=a}function Ga(s,a=!1){let t=[],n=0;for(let e=0;e1)for(let e=0;e!!s.type.__asyncLoader,Ya=s=>s.type.__isKeepAlive,Xa={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(s,{slots:a}){const t=Fn(),n=t.ctx;if(!n.renderer)return a.default;const e=new Map,l=new Set;let p=null;const c=t.suspense,{renderer:{p:o,m:d,um:r,o:{createElement:i}}}=n,h=i("div");function u(s){nt(s),r(s,t,c)}function g(s){e.forEach(((a,t)=>{const n=Hn(a.type);!n||s&&s(n)||j(t)}))}function j(s){const a=e.get(s);p&&a.type===p.type?p&&nt(p):u(a),e.delete(s),l.delete(s)}n.activate=(s,a,t,n,e)=>{const l=s.component;d(s,a,t,0,c),o(l.vnode,s,a,t,l,c,n,s.slotScopeIds,e),Wt((()=>{l.isDeactivated=!1,l.a&&Q(l.a);const a=s.props&&s.props.onVnodeMounted;a&&Qt(a,l.parent,s)}),c)},n.deactivate=s=>{const a=s.component;d(s,h,null,1,c),Wt((()=>{a.da&&Q(a.da);const t=s.props&&s.props.onVnodeUnmounted;t&&Qt(t,a.parent,s),a.isDeactivated=!0}),c)},ve((()=>[s.include,s.exclude]),(([s,a])=>{s&&g((a=>Ja(s,a))),a&&g((s=>!Ja(a,s)))}),{flush:"post",deep:!0});let m=null;const v=()=>{null!=m&&e.set(m,et(t.subTree))};return ot(v),rt(v),it((()=>{e.forEach((s=>{const{subTree:a,suspense:n}=t,e=et(a);if(s.type!==e.type)u(s);else{nt(e);const s=e.component.da;s&&Wt(s,n)}}))})),()=>{if(m=null,!a.default)return null;const t=a.default(),n=t[0];if(t.length>1)return p=null,t;if(!(gn(n)&&(4&n.shapeFlag||128&n.shapeFlag)))return p=null,n;let c=et(n);const o=c.type,d=Hn(Qa(c)?c.type.__asyncResolved||{}:o),{include:r,exclude:i,max:h}=s;if(r&&(!d||!Ja(r,d))||i&&d&&Ja(i,d))return p=c,n;const u=null==c.key?o:c.key,g=e.get(u);return c.el&&(c=qn(c),128&n.shapeFlag&&(n.ssContent=c)),m=u,g?(c.el=g.el,c.component=g.component,c.transition&&Wa(c,c.transition),c.shapeFlag|=512,l.delete(u),l.add(u)):(l.add(u),h&&l.size>parseInt(h,10)&&j(l.values().next().value)),c.shapeFlag|=256,p=c,n}}};function Ja(s,a){return z(s)?s.some((s=>Ja(s,a))):E(s)?s.split(",").indexOf(a)>-1:!!s.test&&s.test(a)}function Za(s,a){at(s,"a",a)}function st(s,a){at(s,"da",a)}function at(s,a,t=Nn){const n=s.__wdc||(s.__wdc=()=>{let a=t;for(;a;){if(a.isDeactivated)return;a=a.parent}s()});if(lt(a,n,t),t){let s=t.parent;for(;s&&s.parent;)Ya(s.parent.vnode)&&tt(n,a,t,s),s=s.parent}}function tt(s,a,t,n){const e=lt(a,s,n,!0);ht((()=>{k(n[a],e)}),t)}function nt(s){let a=s.shapeFlag;256&a&&(a-=256),512&a&&(a-=512),s.shapeFlag=a}function et(s){return 128&s.shapeFlag?s.ssContent:s}function lt(s,a,t=Nn,n=!1){if(t){const e=t[s]||(t[s]=[]),l=a.__weh||(a.__weh=(...n)=>{if(t.isUnmounted)return;js(),Ln(t);const e=Gn(a,t,s,n);return Rn(),ms(),e});return n?e.unshift(l):e.push(l),l}}const pt=s=>(a,t=Nn)=>(!Mn||"sp"===s)&<(s,a,t),ct=pt("bm"),ot=pt("m"),dt=pt("bu"),rt=pt("u"),it=pt("bum"),ht=pt("um"),ut=pt("sp"),gt=pt("rtg"),jt=pt("rtc");function mt(s,a=Nn){lt("ec",s,a)}let vt=!0;function bt(s){const a=qt(s),t=s.proxy,n=s.ctx;vt=!1,a.beforeCreate&&ft(a.beforeCreate,s,"bc");const{data:e,computed:l,methods:p,watch:c,provide:o,inject:d,created:r,beforeMount:i,mounted:h,beforeUpdate:u,updated:g,activated:j,deactivated:m,beforeDestroy:v,beforeUnmount:b,destroyed:y,unmounted:q,render:x,renderTracked:w,renderTriggered:_,errorCaptured:k,serverPrefetch:S,expose:C,inheritAttrs:P,components:I,directives:E,filters:D}=a;if(d&&function(s,a,t=f,n=!1){z(s)&&(s=kt(s));for(const e in s){const t=s[e];let l;l=T(t)?"default"in t?Ra(t.from||e,t.default,!0):Ra(t.from||e):Ra(t),fa(l)&&n?Object.defineProperty(a,e,{enumerable:!0,configurable:!0,get:()=>l.value,set:s=>l.value=s}):a[e]=l}}(d,n,null,s.appContext.config.unwrapInjectedRef),p)for(const f in p){const s=p[f];O(s)&&(n[f]=s.bind(t))}if(e){const a=e.call(t,t);T(a)&&(s.data=oa(a))}if(vt=!0,l)for(const z in l){const s=l[z],a=Sa({get:O(s)?s.bind(t,t):O(s.get)?s.get.bind(t,t):f,set:!O(s)&&O(s.set)?s.set.bind(t):f});Object.defineProperty(n,z,{enumerable:!0,configurable:!0,get:()=>a.value,set:s=>a.value=s})}if(c)for(const f in c)yt(c[f],n,t,f);if(o){const s=O(o)?o.call(t):o;Reflect.ownKeys(s).forEach((a=>{La(a,s[a])}))}function A(s,a){z(a)?a.forEach((a=>s(a.bind(t)))):a&&s(a.bind(t))}if(r&&ft(r,s,"c"),A(ct,i),A(ot,h),A(dt,u),A(rt,g),A(Za,j),A(st,m),A(mt,k),A(jt,w),A(gt,_),A(it,b),A(ht,q),A(ut,S),z(C))if(C.length){const a=s.exposed||(s.exposed={});C.forEach((s=>{Object.defineProperty(a,s,{get:()=>t[s],set:a=>t[s]=a})}))}else s.exposed||(s.exposed={});x&&s.render===f&&(s.render=x),null!=P&&(s.inheritAttrs=P),I&&(s.components=I),E&&(s.directives=E)}function ft(s,a,t){Gn(z(s)?s.map((s=>s.bind(a.proxy))):s.bind(a.proxy),a,t)}function yt(s,a,t,n){const e=n.includes(".")?ye(t,n):()=>t[n];if(E(s)){const t=a[s];O(t)&&ve(e,t)}else if(O(s))ve(e,s.bind(t));else if(T(s))if(z(s))s.forEach((s=>yt(s,a,t,n)));else{const n=O(s.handler)?s.handler.bind(t):a[s.handler];O(n)&&ve(e,n,s)}}function qt(s){const a=s.type,{mixins:t,extends:n}=a,{mixins:e,optionsCache:l,config:{optionMergeStrategies:p}}=s.appContext,c=l.get(a);let o;return c?o=c:e.length||t||n?(o={},e.length&&e.forEach((s=>xt(o,s,p,!0))),xt(o,a,p)):o=a,l.set(a,o),o}function xt(s,a,t,n=!1){const{mixins:e,extends:l}=a;l&&xt(s,l,t,!0),e&&e.forEach((a=>xt(s,a,t,!0)));for(const p in a)if(n&&"expose"===p);else{const n=wt[p]||t&&t[p];s[p]=n?n(s[p],a[p]):a[p]}return s}const wt={data:_t,props:Ct,emits:Ct,methods:Ct,computed:Ct,beforeCreate:St,created:St,beforeMount:St,mounted:St,beforeUpdate:St,updated:St,beforeDestroy:St,destroyed:St,activated:St,deactivated:St,errorCaptured:St,serverPrefetch:St,components:Ct,directives:Ct,watch:function(s,a){if(!s)return a;if(!a)return s;const t=_(Object.create(null),s);for(const n in a)t[n]=St(s[n],a[n]);return t},provide:_t,inject:function(s,a){return Ct(kt(s),kt(a))}};function _t(s,a){return a?s?function(){return _(O(s)?s.call(this,this):s,O(a)?a.call(this,this):a)}:a:s}function kt(s){if(z(s)){const a={};for(let t=0;t{o=!0;const[t,n]=Ot(s,a,!0);_(p,t),n&&c.push(...n)};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}if(!l&&!o)return n.set(s,b),b;if(z(l))for(let r=0;r-1,t[1]=n<0||a-1||C(t,"default"))&&c.push(s)}}}const d=[p,c];return n.set(s,d),d}function Et(s){return"$"!==s[0]}function Dt(s){const a=s&&s.toString().match(/^\s*function (\w+)/);return a?a[1]:null===s?"null":""}function Tt(s,a){return Dt(s)===Dt(a)}function At(s,a){return z(a)?a.findIndex((a=>Tt(a,s))):O(a)&&Tt(a,s)?0:-1}const Nt=s=>"_"===s[0]||"$stable"===s,Ft=s=>z(s)?s.map(kn):[kn(s)],Lt=(s,a,t)=>{const n=Da((s=>Ft(a(s))),t);return n._c=!1,n},Rt=(s,a,t)=>{const n=s._ctx;for(const e in s){if(Nt(e))continue;const t=s[e];if(O(t))a[e]=Lt(0,t,n);else if(null!=t){const s=Ft(t);a[e]=()=>s}}},Bt=(s,a)=>{const t=Ft(a);s.slots.default=()=>t};function Mt(s,a){if(null===Ia)return s;const t=Ia.proxy,n=s.dirs||(s.dirs=[]);for(let e=0;e(l.has(s)||(s&&O(s.install)?(l.add(s),s.install(c,...a)):O(s)&&(l.add(s),s(c,...a))),c),mixin:s=>(e.mixins.includes(s)||e.mixins.push(s),c),component:(s,a)=>a?(e.components[s]=a,c):e.components[s],directive:(s,a)=>a?(e.directives[s]=a,c):e.directives[s],mount(l,o,d){if(!p){const r=yn(t,n);return r.appContext=e,o&&a?a(r,l):s(r,l,d),p=!0,c._container=l,l.__vue_app__=c,r.component.proxy}},unmount(){p&&(s(null,c._container),delete c._container.__vue_app__)},provide:(s,a)=>(e.provides[s]=a,c)};return c}}const Wt=function(s,a){a&&a.pendingBranch?z(s)?a.effects.push(...s):a.effects.push(s):ie(s,ne,te,ee)};function Gt(s){return function(s,a){const{insert:t,remove:n,patchProp:e,createElement:l,createText:p,createComment:c,setText:o,setElementText:d,parentNode:r,nextSibling:i,setScopeId:h=f,cloneNode:u,insertStaticContent:g}=s,j=(s,a,t,n=null,e=null,l=null,p=!1,c=null,o=!!a.dynamicChildren)=>{if(s===a)return;s&&!jn(s,a)&&(n=as(s),G(s,e,l,!0),s=null),-2===a.patchFlag&&(o=!1,a.dynamicChildren=null);const{type:d,ref:r,shapeFlag:i}=a;switch(d){case tn:m(s,a,t,n);break;case nn:y(s,a,t,n);break;case en:null==s&&q(a,t,n,p);break;case an:D(s,a,t,n,e,l,p,c,o);break;default:1&i?k(s,a,t,n,e,l,p,c,o):6&i?T(s,a,t,n,e,l,p,c,o):(64&i||128&i)&&d.process(s,a,t,n,e,l,p,c,o,ns)}null!=r&&e&&Kt(r,s&&s.ref,l,a||s,!a)},m=(s,a,n,e)=>{if(null==s)t(a.el=p(a.children),n,e);else{const t=a.el=s.el;a.children!==s.children&&o(t,a.children)}},y=(s,a,n,e)=>{null==s?t(a.el=c(a.children||""),n,e):a.el=s.el},q=(s,a,t,n)=>{[s.el,s.anchor]=g(s.children,a,t,n)},x=({el:s,anchor:a},n,e)=>{let l;for(;s&&s!==a;)l=i(s),t(s,n,e),s=l;t(a,n,e)},w=({el:s,anchor:a})=>{let t;for(;s&&s!==a;)t=i(s),n(s),s=t;n(a)},k=(s,a,t,n,e,l,p,c,o)=>{p=p||"svg"===a.type,null==s?S(a,t,n,e,l,p,c,o):I(s,a,e,l,p,c,o)},S=(s,a,n,p,c,o,r,i)=>{let h,g;const{type:j,props:m,shapeFlag:v,transition:b,patchFlag:f,dirs:y}=s;if(s.el&&void 0!==u&&-1===f)h=s.el=u(s.el);else{if(h=s.el=l(s.type,o,m&&m.is,m),8&v?d(h,s.children):16&v&&P(s.children,h,null,p,c,o&&"foreignObject"!==j,r,i),y&&$t(s,null,p,"created"),m){for(const a in m)"value"===a||B(a)||e(h,a,null,m[a],o,s.children,p,c,Z);"value"in m&&e(h,"value",null,m.value),(g=m.onVnodeBeforeMount)&&Qt(g,p,s)}z(h,s,s.scopeId,r,p)}y&&$t(s,null,p,"beforeMount");const q=(!c||c&&!c.pendingBranch)&&b&&!b.persisted;q&&b.beforeEnter(h),t(h,a,n),((g=m&&m.onVnodeMounted)||q||y)&&Wt((()=>{g&&Qt(g,p,s),q&&b.enter(h),y&&$t(s,null,p,"mounted")}),c)},z=(s,a,t,n,e)=>{if(t&&h(s,t),n)for(let l=0;l{for(let d=o;d{const o=a.el=s.el;let{patchFlag:r,dynamicChildren:i,dirs:h}=a;r|=16&s.patchFlag;const u=s.props||v,g=a.props||v;let j;if((j=g.onVnodeBeforeUpdate)&&Qt(j,t,a,s),h&&$t(a,s,t,"beforeUpdate"),r>0){if(16&r)E(o,a,u,g,t,n,l);else if(2&r&&u.class!==g.class&&e(o,"class",null,g.class,l),4&r&&e(o,"style",u.style,g.style,l),8&r){const p=a.dynamicProps;for(let a=0;a{j&&Qt(j,t,a,s),h&&$t(a,s,t,"updated")}),n)},O=(s,a,t,n,e,l,p)=>{for(let c=0;c{if(t!==n){for(const o in n){if(B(o))continue;const d=n[o],r=t[o];d!==r&&"value"!==o&&e(s,o,r,d,c,a.children,l,p,Z)}if(t!==v)for(const o in t)B(o)||o in n||e(s,o,t[o],null,c,a.children,l,p,Z);"value"in n&&e(s,"value",t.value,n.value)}},D=(s,a,n,e,l,c,o,d,r)=>{const i=a.el=s?s.el:p(""),h=a.anchor=s?s.anchor:p("");let{patchFlag:u,dynamicChildren:g,slotScopeIds:j}=a;j&&(d=d?d.concat(j):j),null==s?(t(i,n,e),t(h,n,e),P(a.children,n,h,l,c,o,d,r)):u>0&&64&u&&g&&s.dynamicChildren?(O(s.dynamicChildren,g,n,l,c,o,d),(null!=a.key||l&&a===l.subTree)&&Yt(s,a,!0)):M(s,a,n,h,l,c,o,d,r)},T=(s,a,t,n,e,l,p,c,o)=>{a.slotScopeIds=c,null==s?512&a.shapeFlag?e.ctx.activate(a,t,n,p,o):N(a,t,n,e,l,p,o):F(s,a,o)},N=(s,a,t,n,e,l,p)=>{const c=s.component=function(s,a,t){const n=s.type,e=(a?a.appContext:s.appContext)||Tn,l={uid:An++,vnode:s,type:n,parent:a,appContext:e,root:null,next:null,subTree:null,update:null,scope:new ss(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:a?a.provides:Object.create(e.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Ot(n,e),emitsOptions:za(n,e),emit:null,emitted:null,propsDefaults:v,inheritAttrs:n.inheritAttrs,ctx:v,data:v,props:v,attrs:v,slots:v,refs:v,setupState:v,setupContext:null,suspense:t,suspenseId:t?t.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};l.ctx={_:l},l.root=a?a.root:l,l.emit=Ca.bind(null,l),s.ce&&s.ce(l);return l}(s,n,e);if(Ya(s)&&(c.ctx.renderer=ns),function(s,a=!1){Mn=a;const{props:t,children:n}=s.vnode,e=Bn(s);zt(s,t,e,a),((s,a)=>{if(32&s.vnode.shapeFlag){const t=a._;t?(s.slots=ga(a),Y(a,"_",t)):Rt(a,s.slots={})}else s.slots={},a&&Bt(s,a);Y(s.slots,mn,1)})(s,n);const l=e?function(s,a){const t=s.type;s.accessCache=Object.create(null),s.proxy=ja(new Proxy(s.ctx,Dn));const{setup:n}=t;if(n){const t=s.setupContext=n.length>1?function(s){const a=a=>{s.exposed=a||{}};let t;return{get attrs(){return t||(t=function(s){return new Proxy(s.attrs,{get:(a,t)=>(vs(s,0,"$attrs"),a[t])})}(s))},slots:s.slots,emit:s.emit,expose:a}}(s):null;Ln(s),js();const e=Wn(n,s,0,[s.props,t]);if(ms(),Rn(),A(e)){if(e.then(Rn,Rn),a)return e.then((a=>{$n(s,a)})).catch((a=>{Kn(a,s,0)}));s.asyncDep=e}else $n(s,e)}else Un(s)}(s,a):void 0;Mn=!1}(c),c.asyncDep){if(e&&e.registerDep(c,L),!s.el){const s=c.subTree=yn(nn);y(null,s,a,t)}}else L(c,s,a,t,e,l,p)},F=(s,a,t)=>{const n=a.component=s.component;if(function(s,a,t){const{props:n,children:e,component:l}=s,{props:p,children:c,patchFlag:o}=a,d=l.emitsOptions;if(a.dirs||a.transition)return!0;if(!(t&&o>=0))return!(!e&&!c||c&&c.$stable)||n!==p&&(n?!p||Fa(n,p,d):!!p);if(1024&o)return!0;if(16&o)return n?Fa(n,p,d):!!p;if(8&o){const s=a.dynamicProps;for(let a=0;aJn&&Xn.splice(a,1)}(n.update),n.update()}else a.component=s.component,a.el=s.el,n.vnode=a},L=(s,a,t,n,e,l,p)=>{const c=new is((()=>{if(s.isMounted){let a,{next:t,bu:n,u:o,parent:d,vnode:i}=s,h=t;t?(t.el=i.el,R(s,t,p)):t=i,c.allowRecurse=!1,n&&Q(n),(a=t.props&&t.props.onVnodeBeforeUpdate)&&Qt(a,d,t,i),c.allowRecurse=!0;const u=Ta(s),g=s.subTree;s.subTree=u,j(g,u,r(g.el),as(g),s,e,l),t.el=u.el,null===h&&function({vnode:s,parent:a},t){for(;a&&a.subTree===s;)(s=a.vnode).el=t,a=a.parent}(s,u.el),o&&Wt(o,e),(a=t.props&&t.props.onVnodeUpdated)&&Wt((()=>Qt(a,d,t,i)),e)}else{let p;const{el:o,props:d}=a,{bm:r,m:i,parent:h}=s;if(c.allowRecurse=!1,r&&Q(r),(p=d&&d.onVnodeBeforeMount)&&Qt(p,h,a),c.allowRecurse=!0,o&&ls){const t=()=>{s.subTree=Ta(s),ls(o,s.subTree,s,e,null)};Qa(a)?a.type.__asyncLoader().then((()=>!s.isUnmounted&&t())):t()}else{const p=s.subTree=Ta(s);j(null,p,t,n,s,e,l),a.el=p.el}if(i&&Wt(i,e),p=d&&d.onVnodeMounted){const s=a;Wt((()=>Qt(p,h,s)),e)}256&a.shapeFlag&&s.a&&Wt(s.a,e),s.isMounted=!0,a=t=n=null}}),(()=>de(s.update)),s.scope),o=s.update=c.run.bind(c);o.id=s.uid,c.allowRecurse=o.allowRecurse=!0,o()},R=(s,a,t)=>{a.component=s;const n=s.vnode.props;s.vnode=a,s.next=null,function(s,a,t,n){const{props:e,attrs:l,vnode:{patchFlag:p}}=s,c=ga(e),[o]=s.propsOptions;let d=!1;if(!(n||p>0)||16&p){let n;Pt(s,a,e,l)&&(d=!0);for(const l in c)a&&(C(a,l)||(n=H(l))!==l&&C(a,n))||(o?!t||void 0===t[l]&&void 0===t[n]||(e[l]=It(o,c,l,void 0,s,!0)):delete e[l]);if(l!==c)for(const s in l)a&&C(a,s)||(delete l[s],d=!0)}else if(8&p){const t=s.vnode.dynamicProps;for(let n=0;n{const{vnode:n,slots:e}=s;let l=!0,p=v;if(32&n.shapeFlag){const s=a._;s?t&&1===s?l=!1:(_(e,a),t||1!==s||delete e._):(l=!a.$stable,Rt(a,e)),p=a}else a&&(Bt(s,a),p={default:1});if(l)for(const c in e)Nt(c)||c in p||delete e[c]})(s,a.children,t),js(),he(void 0,s.update),ms()},M=(s,a,t,n,e,l,p,c,o=!1)=>{const r=s&&s.children,i=s?s.shapeFlag:0,h=a.children,{patchFlag:u,shapeFlag:g}=a;if(u>0){if(128&u)return void V(r,h,t,n,e,l,p,c,o);if(256&u)return void $(r,h,t,n,e,l,p,c,o)}8&g?(16&i&&Z(r,e,l),h!==r&&d(t,h)):16&i?16&g?V(r,h,t,n,e,l,p,c,o):Z(r,e,l,!0):(8&i&&d(t,""),16&g&&P(h,t,n,e,l,p,c,o))},$=(s,a,t,n,e,l,p,c,o)=>{a=a||b;const d=(s=s||b).length,r=a.length,i=Math.min(d,r);let h;for(h=0;hr?Z(s,e,l,!0,!1,i):P(a,t,n,e,l,p,c,o,i)},V=(s,a,t,n,e,l,p,c,o)=>{let d=0;const r=a.length;let i=s.length-1,h=r-1;for(;d<=i&&d<=h;){const n=s[d],r=a[d]=o?Sn(a[d]):kn(a[d]);if(!jn(n,r))break;j(n,r,t,null,e,l,p,c,o),d++}for(;d<=i&&d<=h;){const n=s[i],d=a[h]=o?Sn(a[h]):kn(a[h]);if(!jn(n,d))break;j(n,d,t,null,e,l,p,c,o),i--,h--}if(d>i){if(d<=h){const s=h+1,i=sh)for(;d<=i;)G(s[d],e,l,!0),d++;else{const u=d,g=d,m=new Map;for(d=g;d<=h;d++){const s=a[d]=o?Sn(a[d]):kn(a[d]);null!=s.key&&m.set(s.key,d)}let v,f=0;const y=h-g+1;let q=!1,x=0;const w=new Array(y);for(d=0;d=y){G(n,e,l,!0);continue}let r;if(null!=n.key)r=m.get(n.key);else for(v=g;v<=h;v++)if(0===w[v-g]&&jn(n,a[v])){r=v;break}void 0===r?G(n,e,l,!0):(w[r-g]=d+1,r>=x?x=r:q=!0,j(n,a[r],t,null,e,l,p,c,o),f++)}const _=q?function(s){const a=s.slice(),t=[0];let n,e,l,p,c;const o=s.length;for(n=0;n>1,s[t[c]]0&&(a[n]=t[l-1]),t[l]=n)}}l=t.length,p=t[l-1];for(;l-- >0;)t[l]=p,p=a[p];return t}(w):b;for(v=_.length-1,d=y-1;d>=0;d--){const s=g+d,i=a[s],h=s+1{const{el:p,type:c,transition:o,children:d,shapeFlag:r}=s;if(6&r)return void W(s.component.subTree,a,n,e);if(128&r)return void s.suspense.move(a,n,e);if(64&r)return void c.move(s,a,n,ns);if(c===an){t(p,a,n);for(let s=0;so.enter(p)),l);else{const{leave:s,delayLeave:e,afterLeave:l}=o,c=()=>t(p,a,n),d=()=>{s(p,(()=>{c(),l&&l()}))};e?e(p,c,d):d()}else t(p,a,n)},G=(s,a,t,n=!1,e=!1)=>{const{type:l,props:p,ref:c,children:o,dynamicChildren:d,shapeFlag:r,patchFlag:i,dirs:h}=s;if(null!=c&&Kt(c,null,t,s,!0),256&r)return void a.ctx.deactivate(s);const u=1&r&&h;let g;if((g=p&&p.onVnodeBeforeUnmount)&&Qt(g,a,s),6&r)J(s.component,t,n);else{if(128&r)return void s.suspense.unmount(t,n);u&&$t(s,null,a,"beforeUnmount"),64&r?s.type.remove(s,a,t,e,ns,n):d&&(l!==an||i>0&&64&i)?Z(d,a,t,!1,!0):(l===an&&(128&i||256&i)||!e&&16&r)&&Z(o,a,t),n&&K(s)}((g=p&&p.onVnodeUnmounted)||u)&&Wt((()=>{g&&Qt(g,a,s),u&&$t(s,null,a,"unmounted")}),t)},K=s=>{const{type:a,el:t,anchor:e,transition:l}=s;if(a===an)return void X(t,e);if(a===en)return void w(s);const p=()=>{n(t),l&&!l.persisted&&l.afterLeave&&l.afterLeave()};if(1&s.shapeFlag&&l&&!l.persisted){const{leave:a,delayLeave:n}=l,e=()=>a(t,p);n?n(s.el,p,e):e()}else p()},X=(s,a)=>{let t;for(;s!==a;)t=i(s),n(s),s=t;n(a)},J=(s,a,t)=>{const{bum:n,scope:e,update:l,subTree:p,um:c}=s;n&&Q(n),e.stop(),l&&(l.active=!1,G(p,s,a,t)),c&&Wt(c,a),Wt((()=>{s.isUnmounted=!0}),a),a&&a.pendingBranch&&!a.isUnmounted&&s.asyncDep&&!s.asyncResolved&&s.suspenseId===a.pendingId&&(a.deps--,0===a.deps&&a.resolve())},Z=(s,a,t,n=!1,e=!1,l=0)=>{for(let p=l;p6&s.shapeFlag?as(s.component.subTree):128&s.shapeFlag?s.suspense.next():i(s.anchor||s.el),ts=(s,a,t)=>{null==s?a._vnode&&G(a._vnode,null,null,!0):j(a._vnode||null,s,a,null,null,null,t),ue(),a._vnode=s},ns={p:j,um:G,m:W,r:K,mt:N,mc:P,pc:M,pbc:O,n:as,o:s};let es,ls;a&&([es,ls]=a(ns));return{render:ts,hydrate:es,createApp:Ht(ts,es)}}(s)}function Kt(s,a,t,n,e=!1){if(z(s))return void s.forEach(((s,l)=>Kt(s,a&&(z(a)?a[l]:a),t,n,e)));if(Qa(n)&&!e)return;const l=4&n.shapeFlag?Vn(n.component)||n.component.proxy:n.el,p=e?null:l,{i:c,r:o}=s,d=a&&a.r,r=c.refs===v?c.refs={}:c.refs,i=c.setupState;if(null!=d&&d!==o&&(E(d)?(r[d]=null,C(i,d)&&(i[d]=null)):fa(d)&&(d.value=null)),E(o)){const s=()=>{r[o]=p,C(i,o)&&(i[o]=p)};p?(s.id=-1,Wt(s,t)):s()}else if(fa(o)){const s=()=>{o.value=p};p?(s.id=-1,Wt(s,t)):s()}else O(o)&&Wn(o,c,12,[p,r])}function Qt(s,a,t,n=null){Gn(s,a,7,[t,n])}function Yt(s,a,t=!1){const n=s.children,e=a.children;if(z(n)&&z(e))for(let l=0;l0?pn||b:null,ln.pop(),pn=ln[ln.length-1]||null,on>0&&pn&&pn.push(s),s}function hn(s,a,t,n,e,l){return rn(fn(s,a,t,n,e,l,!0))}function un(s,a,t,n,e){return rn(yn(s,a,t,n,e,!0))}function gn(s){return!!s&&!0===s.__v_isVNode}function jn(s,a){return s.type===a.type&&s.key===a.key}const mn="__vInternal",vn=({key:s})=>null!=s?s:null,bn=({ref:s})=>null!=s?E(s)||fa(s)||O(s)?{i:Ia,r:s}:s:null;function fn(s,a=null,t=null,n=0,e=null,l=(s===an?0:1),p=!1,c=!1){const o={__v_isVNode:!0,__v_skip:!0,type:s,props:a,key:a&&vn(a),ref:a&&bn(a),scopeId:Oa,slotScopeIds:null,children:t,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:n,dynamicProps:e,dynamicChildren:null,appContext:null};return c?(Cn(o,t),128&l&&s.normalize(o)):t&&(o.shapeFlag|=E(t)?8:16),on>0&&!p&&pn&&(o.patchFlag>0||6&l)&&32!==o.patchFlag&&pn.push(o),o}const yn=function(s,a=null,t=null,n=0,e=null,l=!1){s&&s!==Jt||(s=nn);if(gn(s)){const n=qn(s,a,!0);return t&&Cn(n,t),n}p=s,O(p)&&"__vccOpts"in p&&(s=s.__vccOpts);var p;if(a){a=function(s){return s?ua(s)||mn in s?_({},s):s:null}(a);let{class:s,style:t}=a;s&&!E(s)&&(a.class=g(s)),T(t)&&(ua(t)&&!z(t)&&(t=_({},t)),a.style=r(t))}const c=E(s)?1:(s=>s.__isSuspense)(s)?128:(s=>s.__isTeleport)(s)?64:T(s)?4:O(s)?2:0;return fn(s,a,t,n,e,c,l,!0)};function qn(s,a,t=!1){const{props:n,ref:e,patchFlag:l,children:p}=s,c=a?function(...s){const a={};for(let t=0;ta(s,t,void 0,l&&l[t])));else{const t=Object.keys(s);e=new Array(t.length);for(let n=0,p=t.length;n!gn(s)||s.type!==nn&&!(s.type===an&&!In(s.children))))?s:null}const On=s=>s?Bn(s)?Vn(s)||s.proxy:On(s.parent):null,En=_(Object.create(null),{$:s=>s,$el:s=>s.vnode.el,$data:s=>s.data,$props:s=>s.props,$attrs:s=>s.attrs,$slots:s=>s.slots,$refs:s=>s.refs,$parent:s=>On(s.parent),$root:s=>On(s.root),$emit:s=>s.emit,$options:s=>qt(s),$forceUpdate:s=>()=>de(s.update),$nextTick:s=>oe.bind(s.proxy),$watch:s=>fe.bind(s)}),Dn={get({_:s},a){const{ctx:t,setupState:n,data:e,props:l,accessCache:p,type:c,appContext:o}=s;let d;if("$"!==a[0]){const c=p[a];if(void 0!==c)switch(c){case 0:return n[a];case 1:return e[a];case 3:return t[a];case 2:return l[a]}else{if(n!==v&&C(n,a))return p[a]=0,n[a];if(e!==v&&C(e,a))return p[a]=1,e[a];if((d=s.propsOptions[0])&&C(d,a))return p[a]=2,l[a];if(t!==v&&C(t,a))return p[a]=3,t[a];vt&&(p[a]=4)}}const r=En[a];let i,h;return r?("$attrs"===a&&vs(s,0,a),r(s)):(i=c.__cssModules)&&(i=i[a])?i:t!==v&&C(t,a)?(p[a]=3,t[a]):(h=o.config.globalProperties,C(h,a)?h[a]:void 0)},set({_:s},a,t){const{data:n,setupState:e,ctx:l}=s;if(e!==v&&C(e,a))e[a]=t;else if(n!==v&&C(n,a))n[a]=t;else if(C(s.props,a))return!1;return("$"!==a[0]||!(a.slice(1)in s))&&(l[a]=t,!0)},has({_:{data:s,setupState:a,accessCache:t,ctx:n,appContext:e,propsOptions:l}},p){let c;return void 0!==t[p]||s!==v&&C(s,p)||a!==v&&C(a,p)||(c=l[0])&&C(c,p)||C(n,p)||C(En,p)||C(e.config.globalProperties,p)}},Tn=Ut();let An=0;let Nn=null;const Fn=()=>Nn||Ia,Ln=s=>{Nn=s,s.scope.on()},Rn=()=>{Nn&&Nn.scope.off(),Nn=null};function Bn(s){return 4&s.vnode.shapeFlag}let Mn=!1;function $n(s,a,t){O(a)?s.render=a:T(a)&&(s.setupState=_a(a)),Un(s)}function Un(s,a,t){const n=s.type;s.render||(s.render=n.render||f),Ln(s),js(),bt(s),ms(),Rn()}function Vn(s){if(s.exposed)return s.exposeProxy||(s.exposeProxy=new Proxy(_a(ja(s.exposed)),{get:(a,t)=>t in a?a[t]:t in En?En[t](s):void 0}))}function Hn(s){return O(s)&&s.displayName||s.name}function Wn(s,a,t,n){let e;try{e=n?s(...n):s()}catch(l){Kn(l,a,t)}return e}function Gn(s,a,t,n){if(O(s)){const e=Wn(s,a,t,n);return e&&A(e)&&e.catch((s=>{Kn(s,a,t)})),e}const e=[];for(let l=0;l>>1;ge(Xn[n])ge(s)-ge(a))),ee=0;eenull==s.id?1/0:s.id;function je(s){Yn=!1,Qn=!0,he(s),Xn.sort(((s,a)=>ge(s)-ge(a)));try{for(Jn=0;Jns.value,r=!!s._shallow):ia(s)?(o=()=>s,n=!0):z(s)?(i=!0,r=s.some(ia),o=()=>s.map((s=>fa(s)?s.value:ia(s)?qe(s):O(s)?Wn(s,c,2):void 0))):o=O(s)?a?()=>Wn(s,c,2):()=>{if(!c||!c.isUnmounted)return d&&d(),Gn(s,c,3,[h])}:f,a&&n){const s=o;o=()=>qe(s())}let h=s=>{d=m.onStop=()=>{Wn(s,c,4)}},u=i?[]:me;const g=()=>{if(m.active)if(a){const s=m.run();(n||r||(i?s.some(((s,a)=>K(s,u[a]))):K(s,u)))&&(d&&d(),Gn(a,c,3,[s,u===me?void 0:u,h]),u=s)}else m.run()};let j;g.allowRecurse=!!a,j="sync"===e?g:"post"===e?()=>Wt(g,c&&c.suspense):()=>{!c||c.isMounted?function(s){ie(s,se,Zn,ae)}(g):g()};const m=new is(o,j);return a?t?g():u=m.run():"post"===e?Wt(m.run.bind(m),c&&c.suspense):m.run(),()=>{m.stop(),c&&c.scope&&k(c.scope.effects,m)}}function fe(s,a,t){const n=this.proxy,e=E(s)?s.includes(".")?ye(n,s):()=>n[s]:s.bind(n,n);let l;O(a)?l=a:(l=a.handler,t=a);const p=Nn;Ln(this);const c=be(e,l.bind(n),t);return p?Ln(p):Rn(),c}function ye(s,a){const t=a.split(".");return()=>{let a=s;for(let s=0;s{qe(s,a)}));else if(L(s))for(const t in s)qe(s[t],a);return s}function xe(s,a,t){const n=arguments.length;return 2===n?T(a)&&!z(a)?gn(a)?yn(s,null,[a]):yn(s,a):yn(s,null,a):(n>3?t=Array.prototype.slice.call(arguments,2):3===n&&gn(t)&&(t=[t]),yn(s,a,t))}const we="3.2.1",_e="undefined"!=typeof document?document:null,ke=new Map,Se={insert:(s,a,t)=>{a.insertBefore(s,t||null)},remove:s=>{const a=s.parentNode;a&&a.removeChild(s)},createElement:(s,a,t,n)=>{const e=a?_e.createElementNS("http://www.w3.org/2000/svg",s):_e.createElement(s,t?{is:t}:void 0);return"select"===s&&n&&null!=n.multiple&&e.setAttribute("multiple",n.multiple),e},createText:s=>_e.createTextNode(s),createComment:s=>_e.createComment(s),setText:(s,a)=>{s.nodeValue=a},setElementText:(s,a)=>{s.textContent=a},parentNode:s=>s.parentNode,nextSibling:s=>s.nextSibling,querySelector:s=>_e.querySelector(s),setScopeId(s,a){s.setAttribute(a,"")},cloneNode(s){const a=s.cloneNode(!0);return"_value"in s&&(a._value=s._value),a},insertStaticContent(s,a,t,n){const e=t?t.previousSibling:a.lastChild;let l=ke.get(s);if(!l){const a=_e.createElement("template");if(a.innerHTML=n?`${s}`:s,l=a.content,n){const s=l.firstChild;for(;s.firstChild;)l.appendChild(s.firstChild);l.removeChild(s)}ke.set(s,l)}return a.insertBefore(l.cloneNode(!0),t),[e?e.nextSibling:a.firstChild,t?t.previousSibling:a.lastChild]}};const Ce=/\s*!important$/;function ze(s,a,t){if(z(t))t.forEach((t=>ze(s,a,t)));else if(a.startsWith("--"))s.setProperty(a,t);else{const n=function(s,a){const t=Ie[a];if(t)return t;let n=U(a);if("filter"!==n&&n in s)return Ie[a]=n;n=W(n);for(let e=0;edocument.createEvent("Event").timeStamp&&(Ee=()=>performance.now());const s=navigator.userAgent.match(/firefox\/(\d+)/i);De=!!(s&&Number(s[1])<=53)}let Te=0;const Ae=Promise.resolve(),Ne=()=>{Te=0};function Fe(s,a,t,n,e=null){const l=s._vei||(s._vei={}),p=l[a];if(n&&p)p.value=n;else{const[t,c]=function(s){let a;if(Le.test(s)){let t;for(a={};t=s.match(Le);)s=s.slice(0,s.length-t[0].length),a[t[0].toLowerCase()]=!0}return[H(s.slice(2)),a]}(a);if(n){!function(s,a,t,n){s.addEventListener(a,t,n)}(s,t,l[a]=function(s,a){const t=s=>{const n=s.timeStamp||Ee();(De||n>=t.attached-1)&&Gn(function(s,a){if(z(a)){const t=s.stopImmediatePropagation;return s.stopImmediatePropagation=()=>{t.call(s),s._stopped=!0},a.map((s=>a=>!a._stopped&&s(a)))}return a}(s,t.value),a,5,[s])};return t.value=s,t.attached=(()=>Te||(Ae.then(Ne),Te=Ee()))(),t}(n,e),c)}else p&&(!function(s,a,t,n){s.removeEventListener(a,t,n)}(s,t,p,c),l[a]=void 0)}}const Le=/(?:Once|Passive|Capture)$/;const Re=/^on[a-z]/;const Be="transition",Me=(s,{slots:a})=>xe(Ma,function(s){const a={};for(const _ in s)_ in $e||(a[_]=s[_]);if(!1===s.css)return a;const{name:t="v",type:n,duration:e,enterFromClass:l=`${t}-enter-from`,enterActiveClass:p=`${t}-enter-active`,enterToClass:c=`${t}-enter-to`,appearFromClass:o=l,appearActiveClass:d=p,appearToClass:r=c,leaveFromClass:i=`${t}-leave-from`,leaveActiveClass:h=`${t}-leave-active`,leaveToClass:u=`${t}-leave-to`}=s,g=function(s){if(null==s)return null;if(T(s))return[He(s.enter),He(s.leave)];{const a=He(s);return[a,a]}}(e),j=g&&g[0],m=g&&g[1],{onBeforeEnter:v,onEnter:b,onEnterCancelled:f,onLeave:y,onLeaveCancelled:q,onBeforeAppear:x=v,onAppear:w=b,onAppearCancelled:k=f}=a,S=(s,a,t)=>{Ge(s,a?r:c),Ge(s,a?d:p),t&&t()},C=(s,a)=>{Ge(s,u),Ge(s,h),a&&a()},z=s=>(a,t)=>{const e=s?w:b,p=()=>S(a,s,t);Ue(e,[a,p]),Ke((()=>{Ge(a,s?o:l),We(a,s?r:c),Ve(e)||Ye(a,n,j,p)}))};return _(a,{onBeforeEnter(s){Ue(v,[s]),We(s,l),We(s,p)},onBeforeAppear(s){Ue(x,[s]),We(s,o),We(s,d)},onEnter:z(!1),onAppear:z(!0),onLeave(s,a){const t=()=>C(s,a);We(s,i),document.body.offsetHeight,We(s,h),Ke((()=>{Ge(s,i),We(s,u),Ve(y)||Ye(s,n,m,t)})),Ue(y,[s,t])},onEnterCancelled(s){S(s,!1),Ue(f,[s])},onAppearCancelled(s){S(s,!0),Ue(k,[s])},onLeaveCancelled(s){C(s),Ue(q,[s])}})}(s),a);Me.displayName="Transition";const $e={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Me.props=_({},Ma.props,$e);const Ue=(s,a=[])=>{z(s)?s.forEach((s=>s(...a))):s&&s(...a)},Ve=s=>!!s&&(z(s)?s.some((s=>s.length>1)):s.length>1);function He(s){return X(s)}function We(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.add(a))),(s._vtc||(s._vtc=new Set)).add(a)}function Ge(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.remove(a)));const{_vtc:t}=s;t&&(t.delete(a),t.size||(s._vtc=void 0))}function Ke(s){requestAnimationFrame((()=>{requestAnimationFrame(s)}))}let Qe=0;function Ye(s,a,t,n){const e=s._endId=++Qe,l=()=>{e===s._endId&&n()};if(t)return setTimeout(l,t);const{type:p,timeout:c,propCount:o}=function(s,a){const t=window.getComputedStyle(s),n=s=>(t[s]||"").split(", "),e=n("transitionDelay"),l=n("transitionDuration"),p=Xe(e,l),c=n("animationDelay"),o=n("animationDuration"),d=Xe(c,o);let r=null,i=0,h=0;a===Be?p>0&&(r=Be,i=p,h=l.length):"animation"===a?d>0&&(r="animation",i=d,h=o.length):(i=Math.max(p,d),r=i>0?p>d?Be:"animation":null,h=r?r===Be?l.length:o.length:0);const u=r===Be&&/\b(transform|all)(,|$)/.test(t.transitionProperty);return{type:r,timeout:i,propCount:h,hasTransform:u}}(s,a);if(!p)return n();const d=p+"end";let r=0;const i=()=>{s.removeEventListener(d,h),l()},h=a=>{a.target===s&&++r>=o&&i()};setTimeout((()=>{rJe(a)+Je(s[t]))))}function Je(s){return 1e3*Number(s.slice(0,-1).replace(",","."))}const Ze={beforeMount(s,{value:a},{transition:t}){s._vod="none"===s.style.display?"":s.style.display,t&&a?t.beforeEnter(s):sl(s,a)},mounted(s,{value:a},{transition:t}){t&&a&&t.enter(s)},updated(s,{value:a,oldValue:t},{transition:n}){!a!=!t&&(n?a?(n.beforeEnter(s),sl(s,!0),n.enter(s)):n.leave(s,(()=>{sl(s,!1)})):sl(s,a))},beforeUnmount(s,{value:a}){sl(s,a)}};function sl(s,a){s.style.display=a?s._vod:"none"}const al=_({patchProp:(s,a,t,n,e=!1,l,p,c,o)=>{"class"===a?function(s,a,t){const n=s._vtc;n&&(a=(a?[a,...n]:[...n]).join(" ")),null==a?s.removeAttribute("class"):t?s.setAttribute("class",a):s.className=a}(s,n,e):"style"===a?function(s,a,t){const n=s.style;if(t)if(E(t)){if(a!==t){const a=n.display;n.cssText=t,"_vod"in s&&(n.display=a)}}else{for(const s in t)ze(n,s,t[s]);if(a&&!E(a))for(const s in a)null==t[s]&&ze(n,s,"")}else s.removeAttribute("style")}(s,t,n):x(a)?w(a)||Fe(s,a,0,n,p):("."===a[0]?(a=a.slice(1),1):"^"===a[0]?(a=a.slice(1),0):function(s,a,t,n){if(n)return"innerHTML"===a||!!(a in s&&Re.test(a)&&O(t));if("spellcheck"===a||"draggable"===a)return!1;if("form"===a)return!1;if("list"===a&&"INPUT"===s.tagName)return!1;if("type"===a&&"TEXTAREA"===s.tagName)return!1;if(Re.test(a)&&E(t))return!1;return a in s}(s,a,n,e))?function(s,a,t,n,e,l,p){if("innerHTML"===a||"textContent"===a)return n&&p(n,e,l),void(s[a]=null==t?"":t);if("value"===a&&"PROGRESS"!==s.tagName){s._value=t;const n=null==t?"":t;return s.value!==n&&(s.value=n),void(null==t&&s.removeAttribute(a))}if(""===t||null==t){const n=typeof s[a];if(""===t&&"boolean"===n)return void(s[a]=!0);if(null==t&&"string"===n)return s[a]="",void s.removeAttribute(a);if("number"===n){try{s[a]=0}catch(c){}return void s.removeAttribute(a)}}try{s[a]=t}catch(o){}}(s,a,n,l,p,c,o):("true-value"===a?s._trueValue=n:"false-value"===a&&(s._falseValue=n),function(s,a,t,n,e){if(n&&a.startsWith("xlink:"))null==t?s.removeAttributeNS(Oe,a.slice(6,a.length)):s.setAttributeNS(Oe,a,t);else{const n=d(a);null==t||n&&!1===t?s.removeAttribute(a):s.setAttribute(a,n?"":t)}}(s,a,n,e))}},Se);let tl;const nl=(...s)=>{const a=(tl||(tl=Gt(al))).createApp(...s),{mount:t}=a;return a.mount=s=>{const n=function(s){if(E(s)){return document.querySelector(s)}return s}(s);if(!n)return;const e=a._component;O(e)||e.render||e.template||(e.template=n.innerHTML),n.innerHTML="";const l=t(n,!1,n instanceof SVGElement);return n instanceof Element&&(n.removeAttribute("v-cloak"),n.setAttribute("data-v-app","")),l},a};var el=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const ll=["href","innerHTML"],pl=["innerHTML"];var cl=el({name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const s=(this.item.title||this.item.name).split(" ");return`${s[0]} ${s.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(s,a,t,n,e,l){const p=Xt("router-link");return t.item.path?(cn(),un(p,{key:0,class:g({active:l.active}),to:l.path,innerHTML:l.itemName},null,8,["class","to","innerHTML"])):t.item.link?(cn(),hn("a",{key:1,href:t.item.link,innerHTML:l.itemName},null,8,ll)):(cn(),hn("a",{key:2,innerHTML:l.itemName},null,8,pl))}]]);const ol={name:"VanDocNav",components:{[cl.name]:cl},props:{lang:String,navConfig:Array},data:()=>({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:s}=window;this.top=Math.max(0,64-s)}}},dl={class:"van-doc-nav__title"};var rl=el(ol,[["render",function(s,a,t,n,e,l){const p=Xt("van-doc-nav-link");return cn(),hn("div",{class:"van-doc-nav",style:r(l.style)},[(cn(!0),hn(an,null,zn(t.navConfig,((s,a)=>(cn(),hn("div",{class:"van-doc-nav__group",key:a},[fn("div",dl,j(s.title),1),s.items?(cn(!0),hn(an,{key:0},zn(s.items,((s,a)=>(cn(),hn("div",{key:a,class:"van-doc-nav__item"},[yn(p,{item:s,base:l.base},null,8,["item","base"])])))),128)):_n("v-if",!0)])))),128))],4)}]]); -/*! @docsearch/js 3.0.0-alpha.33 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -function il(s){return(il="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function hl(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function ul(){return(ul=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t3)for(t=[t],l=3;l1&&Wl(e,a,t),a=Ml(t,e,e,s.__k,null,e.__e,a),"function"==typeof s.type&&(s.__d=a)))}function Gl(s,a,t,n,e,l,p,c,o){var d,r,i,h,u,g,j,m,v,b,f,y=a.type;if(void 0!==a.constructor)return null;null!=t.__h&&(o=t.__h,c=a.__e=t.__e,a.__h=null,l=[c]),(d=yl.__b)&&d(a);try{s:if("function"==typeof y){if(m=a.props,v=(d=y.contextType)&&n[d.__c],b=d?v?v.props.value:d.__:n,t.__c?j=(r=a.__c=t.__c).__=r.__E:("prototype"in y&&y.prototype.render?a.__c=r=new y(m,b):(a.__c=r=new Tl(m,b),r.constructor=y,r.render=Xl),v&&v.sub(r),r.props=m,r.state||(r.state={}),r.context=b,r.__n=n,i=r.__d=!0,r.__h=[]),null==r.__s&&(r.__s=r.state),null!=y.getDerivedStateFromProps&&(r.__s==r.state&&(r.__s=Pl({},r.__s)),Pl(r.__s,y.getDerivedStateFromProps(m,r.__s))),h=r.props,u=r.state,i)null==y.getDerivedStateFromProps&&null!=r.componentWillMount&&r.componentWillMount(),null!=r.componentDidMount&&r.__h.push(r.componentDidMount);else{if(null==y.getDerivedStateFromProps&&m!==h&&null!=r.componentWillReceiveProps&&r.componentWillReceiveProps(m,b),!r.__e&&null!=r.shouldComponentUpdate&&!1===r.shouldComponentUpdate(m,r.__s,b)||a.__v===t.__v){r.props=m,r.state=r.__s,a.__v!==t.__v&&(r.__d=!1),r.__v=a,a.__e=t.__e,a.__k=t.__k,r.__h.length&&p.push(r),Wl(a,c,s);break s}null!=r.componentWillUpdate&&r.componentWillUpdate(m,r.__s,b),null!=r.componentDidUpdate&&r.__h.push((function(){r.componentDidUpdate(h,u,g)}))}r.context=b,r.props=m,r.state=r.__s,(d=yl.__r)&&d(a),r.__d=!1,r.__v=a,r.__P=s,d=r.render(r.props,r.state,r.context),r.state=r.__s,null!=r.getChildContext&&(n=Pl(Pl({},n),r.getChildContext())),i||null==r.getSnapshotBeforeUpdate||(g=r.getSnapshotBeforeUpdate(h,u)),f=null!=d&&d.type==Dl&&null==d.key?d.props.children:d,Rl(s,Array.isArray(f)?f:[f],a,t,n,e,l,p,c,o),r.base=a.__e,a.__h=null,r.__h.length&&p.push(r),j&&(r.__E=r.__=null),r.__e=!1}else null==l&&a.__v===t.__v?(a.__k=t.__k,a.__e=t.__e):a.__e=function(s,a,t,n,e,l,p,c){var o,d,r,i,h,u=t.props,g=a.props;if(e="svg"===a.type||e,null!=l)for(o=0;o3)for(t=[t],l=3;l=t.__.length&&t.__.push({}),t.__[s]}function hp(s){return ep=1,up(xp,s)}function up(s,a,t){var n=ip(ap++,2);return n.t=s,n.__c||(n.__=[t?t(a):xp(void 0,a),function(s){var a=n.t(n.__[0],s);n.__[0]!==a&&(n.__=[a,n.__[1]],n.__c.setState({}))}],n.__c=tp),n.__}function gp(s,a){var t=ip(ap++,3);!yl.__s&&qp(t.__H,a)&&(t.__=s,t.__H=a,tp.__H.__h.push(t))}function jp(s,a){var t=ip(ap++,4);!yl.__s&&qp(t.__H,a)&&(t.__=s,t.__H=a,tp.__h.push(t))}function mp(s,a){var t=ip(ap++,7);return qp(t.__H,a)&&(t.__=s(),t.__H=a,t.__h=s),t.__}function vp(){lp.forEach((function(s){if(s.__P)try{s.__H.__h.forEach(fp),s.__H.__h.forEach(yp),s.__H.__h=[]}catch(a){s.__H.__h=[],yl.__e(a,s.__v)}})),lp=[]}yl.__b=function(s){tp=null,pp&&pp(s)},yl.__r=function(s){cp&&cp(s),ap=0;var a=(tp=s.__c).__H;a&&(a.__h.forEach(fp),a.__h.forEach(yp),a.__h=[])},yl.diffed=function(s){op&&op(s);var a=s.__c;a&&a.__H&&a.__H.__h.length&&(1!==lp.push(a)&&np===yl.requestAnimationFrame||((np=yl.requestAnimationFrame)||function(s){var a,t=function(){clearTimeout(n),bp&&cancelAnimationFrame(a),setTimeout(s)},n=setTimeout(t,100);bp&&(a=requestAnimationFrame(t))})(vp)),tp=void 0},yl.__c=function(s,a){a.some((function(s){try{s.__h.forEach(fp),s.__h=s.__h.filter((function(s){return!s.__||yp(s)}))}catch(t){a.some((function(s){s.__h&&(s.__h=[])})),a=[],yl.__e(t,s.__v)}})),dp&&dp(s,a)},yl.unmount=function(s){rp&&rp(s);var a=s.__c;if(a&&a.__H)try{a.__H.__.forEach(fp)}catch(t){yl.__e(t,a.__v)}};var bp="function"==typeof requestAnimationFrame;function fp(s){var a=tp;"function"==typeof s.__c&&s.__c(),tp=a}function yp(s){var a=tp;s.__c=s.__(),tp=a}function qp(s,a){return!s||s.length!==a.length||a.some((function(a,t){return a!==s[t]}))}function xp(s,a){return"function"==typeof a?a(s):a}function wp(s,a){for(var t in a)s[t]=a[t];return s}function _p(s,a){for(var t in s)if("__source"!==t&&!(t in a))return!0;for(var n in a)if("__source"!==n&&s[n]!==a[n])return!0;return!1}function kp(s){this.props=s}(kp.prototype=new Tl).isPureReactComponent=!0,kp.prototype.shouldComponentUpdate=function(s,a){return _p(this.props,s)||_p(this.state,a)};var Sp=yl.__b;yl.__b=function(s){s.type&&s.type.__f&&s.ref&&(s.props.ref=s.ref,s.ref=null),Sp&&Sp(s)};var Cp="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,zp=function(s,a){return null==s?null:Bl(Bl(s).map(a))},Pp={map:zp,forEach:zp,count:function(s){return s?Bl(s).length:0},only:function(s){var a=Bl(s);if(1!==a.length)throw"Children.only";return a[0]},toArray:Bl},Ip=yl.__e;function Op(s){return s&&(s.__c&&s.__c.__H&&(s.__c.__H.__.forEach((function(s){"function"==typeof s.__c&&s.__c()})),s.__c.__H=null),(s=wp({},s)).__c=null,s.__k=s.__k&&s.__k.map(Op)),s}function Ep(s){return s&&(s.__v=null,s.__k=s.__k&&s.__k.map(Ep)),s}function Dp(){this.__u=0,this.t=null,this.__b=null}function Tp(s){var a=s.__.__c;return a&&a.__e&&a.__e(s)}function Ap(){this.u=null,this.o=null}yl.__e=function(s,a,t){if(s.then)for(var n,e=a;e=e.__;)if((n=e.__c)&&n.__c)return null==a.__e&&(a.__e=t.__e,a.__k=t.__k),n.__c(s,a);Ip(s,a,t)},(Dp.prototype=new Tl).__c=function(s,a){var t=a.__c,n=this;null==n.t&&(n.t=[]),n.t.push(t);var e=Tp(n.__v),l=!1,p=function(){l||(l=!0,t.componentWillUnmount=t.__c,e?e(c):c())};t.__c=t.componentWillUnmount,t.componentWillUnmount=function(){p(),t.__c&&t.__c()};var c=function(){var s;if(!--n.__u)for(n.__v.__k[0]=Ep(n.state.__e),n.setState({__e:n.__b=null});s=n.t.pop();)s.forceUpdate()};!0===a.__h||n.__u++||n.setState({__e:n.__b=n.__v.__k[0]}),s.then(p,p)},Dp.prototype.componentWillUnmount=function(){this.t=[]},Dp.prototype.render=function(s,a){this.__b&&(this.__v.__k&&(this.__v.__k[0]=Op(this.__b)),this.__b=null);var t=a.__e&&Ol(Dl,null,s.fallback);return t&&(t.__h=null),[Ol(Dl,null,a.__e?null:s.children),t]};var Np=function(s,a,t){if(++t[1]===t[0]&&s.o.delete(a),s.props.revealOrder&&("t"!==s.props.revealOrder[0]||!s.o.size))for(t=s.u;t;){for(;t.length>3;)t.pop()();if(t[1]s.length)&&(a=s.length);for(var t=0,n=new Array(a);t=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["translations"]),l=n.buttonText,p=void 0===l?"Search":l,c=n.buttonAriaLabel,o=void 0===c?"Search":c,d=function(s,a){return function(s){if(Array.isArray(s))return s}(s)||function(s,a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s)){var t=[],n=!0,e=!1,l=void 0;try{for(var p,c=s[Symbol.iterator]();!(n=(p=c.next()).done)&&(t.push(p.value),!a||t.length!==a);n=!0);}catch(o){e=!0,l=o}finally{try{n||null==c.return||c.return()}finally{if(e)throw l}}return t}}(s,a)||function(s,a){if(s){if("string"==typeof s)return nc(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?nc(s,a):void 0}}(s,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(hp(null),2),r=d[0],i=d[1];return gp((function(){"undefined"!=typeof navigator&&i(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl")}),[]),Zp.createElement("button",tc({type:"button",className:"DocSearch DocSearch-Button","aria-label":o},e,{ref:a}),Zp.createElement("span",{className:"DocSearch-Button-Container"},Zp.createElement(ac,null),Zp.createElement("span",{className:"DocSearch-Button-Placeholder"},p)),null!==r&&Zp.createElement("span",{className:"DocSearch-Button-Keys"},Zp.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===r?Zp.createElement(sc,null):r),Zp.createElement("span",{className:"DocSearch-Button-Key"},"K")))}));function lc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function pc(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function cc(s){return s.reduce((function(s,a){return s.concat(a)}),[])}var oc=0;function dc(s){return 0===s.collections.length?0:s.collections.reduce((function(s,a){return s+a.items.length}),0)}function rc(s,a,t,n){if(null===a&&s<0)return t-1;if(null!==n&&0===a&&s<0)return t-1;var e=(null===a?-1:a)+s;return e<=-1||e>=t?null===n?null:0:e}var ic=function(){};function hc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function uc(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function gc(s){var a,t,n=s.state,e=(t=(a={state:n}.state).collections.map((function(s){return s.items.length})).reduce((function(s,a,t){var n=(s[t-1]||0)+a;return s.push(n),s}),[]).reduce((function(s,t){return t<=a.selectedItemId?s+1:s}),0),a.collections[t]);if(!e)return null;var l=e.items[function(s){for(var a=s.state,t=s.collection,n=!1,e=0,l=0;!1===n;){var p=a.collections[e];if(p===t){n=!0;break}l+=p.items.length,e++}return a.selectedItemId-l}({state:n,collection:e})],p=e.source;return{item:l,itemInputValue:p.getItemInputValue({item:l,state:n}),itemUrl:p.getItemUrl({item:l,state:n}),source:p}}function jc(s,a){return s===a||s.contains&&s.contains(a)}function mc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function vc(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t0}},s),{},{id:null!==(a=s.id)&&void 0!==a?a:"autocomplete-".concat(oc++),initialState:xc({selectedItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},s.initialState),plugins:n,onStateChange:function(a){var t;null===(t=s.onStateChange)||void 0===t||t.call(s,a),n.forEach((function(s){var t;null===(t=s.onStateChange)||void 0===t||t.call(s,a)}))},onSubmit:function(a){var t;null===(t=s.onSubmit)||void 0===t||t.call(s,a),n.forEach((function(s){var t;null===(t=s.onSubmit)||void 0===t||t.call(s,a)}))},getSources:function(a){return Promise.all([].concat(function(s){return function(s){if(Array.isArray(s))return yc(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return yc(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?yc(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(n.map((function(s){return s.getSources}))),[s.getSources]).filter(Boolean).map((function(s){return t=s,n=a,Promise.resolve(t(n)).then((function(s){return Promise.all(s.filter(Boolean).map((function(s){return Promise.resolve(function(s){return function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}function Oc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Ec(s){for(var a=1;a0});case"blur":return a.props.debug?s:Nc(Nc({},s),{},{isOpen:!1,selectedItemId:null});case"mousemove":return Nc(Nc({},s),{},{selectedItemId:a.payload});case"mouseleave":return Nc(Nc({},s),{},{selectedItemId:a.props.defaultSelectedItemId});default:return s}};function Rc(s){var a,t=_c(s),n=function(s,a){var t=a.initialState;return{getState:function(){return t},send:function(n,e){var l=function(s){for(var a=1;a0)&&Pc({query:a.getState().completion||a.getState().query,event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d}),a.send("focus",null)}var i="ontouchstart"in t.environment,h=s||{},u=(h.inputElement,h.maxLength),g=void 0===u?512:u,j=Ic(h,["inputElement","maxLength"]);return Ec({"aria-autocomplete":"both","aria-activedescendant":a.getState().isOpen&&null!==a.getState().selectedItemId?"".concat(t.id,"-item-").concat(a.getState().selectedItemId):void 0,"aria-controls":a.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:a.getState().completion||a.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:g,type:"search",onChange:function(s){Pc({query:s.currentTarget.value.slice(0,g),event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d})},onKeyDown:function(s){!function(s){var a=s.event,t=s.store,n=s.props,e=s.setSelectedItemId,l=s.setQuery,p=s.setCollections,c=s.setIsOpen,o=s.setStatus,d=s.setContext,r=s.refresh;if("ArrowUp"===a.key||"ArrowDown"===a.key){a.preventDefault(),t.send(a.key,null);var i=n.environment.document.getElementById("".concat(n.id,"-item-").concat(t.getState().selectedItemId));i&&(i.scrollIntoViewIfNeeded?i.scrollIntoViewIfNeeded(!1):i.scrollIntoView(!1));var h=gc({state:t.getState()});if(null!==t.getState().selectedItemId&&h){var u=h.item,g=h.itemInputValue,j=h.itemUrl,m=h.source;m.onHighlight({item:u,itemInputValue:g,itemUrl:j,source:m,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a})}}else if("Escape"===a.key)a.preventDefault(),t.send(a.key,null);else if("Enter"===a.key){if(null===t.getState().selectedItemId||t.getState().collections.every((function(s){return 0===s.items.length})))return;a.preventDefault();var v=gc({state:t.getState()}),b=v.item,f=v.itemInputValue,y=v.itemUrl,q=v.source;if(a.metaKey||a.ctrlKey)void 0!==y&&(q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a}),n.navigator.navigateNewTab({itemUrl:y,item:b,state:t.getState()}));else if(a.shiftKey)void 0!==y&&(q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a}),n.navigator.navigateNewWindow({itemUrl:y,item:b,state:t.getState()}));else if(a.altKey);else{if(void 0!==y)return q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a}),void n.navigator.navigate({itemUrl:y,item:b,state:t.getState()});Pc({query:f,event:a,store:t,props:n,setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,nextState:{isOpen:!1},refresh:r}).then((function(){q.onSelect({item:b,itemInputValue:f,itemUrl:y,source:q,state:t.getState(),setSelectedItemId:e,setQuery:l,setCollections:p,setIsOpen:c,setStatus:o,setContext:d,event:a})}))}}}({event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d})},onFocus:r,onBlur:function(){i||a.send("blur",null)},onClick:function(n){s.inputElement!==t.environment.document.activeElement||a.getState().isOpen||r(n)}},j)},getPanelProps:function(s){return Ec({onMouseDown:function(s){s.preventDefault()},onMouseLeave:function(){a.send("mouseleave",null)}},s)},getListProps:function(s){return Ec({role:"listbox","aria-labelledby":"".concat(t.id,"-label"),id:"".concat(t.id,"-list")},s)},getItemProps:function(s){var r=s.item,i=s.source,h=Ic(s,["item","source"]);return Ec({id:"".concat(t.id,"-item-").concat(r.__autocomplete_id),role:"option","aria-selected":a.getState().selectedItemId===r.__autocomplete_id,onMouseMove:function(s){if(r.__autocomplete_id!==a.getState().selectedItemId){a.send("mousemove",r.__autocomplete_id);var t=gc({state:a.getState()});if(null!==a.getState().selectedItemId&&t){var d=t.item,i=t.itemInputValue,h=t.itemUrl,u=t.source;u.onHighlight({item:d,itemInputValue:i,itemUrl:h,source:u,state:a.getState(),setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,event:s})}}},onMouseDown:function(s){s.preventDefault()},onClick:function(s){var h=i.getItemInputValue({item:r,state:a.getState()}),u=i.getItemUrl({item:r,state:a.getState()});(u?Promise.resolve():Pc({query:h,event:s,store:a,props:t,setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,refresh:d,nextState:{isOpen:!1}})).then((function(){i.onSelect({item:r,itemInputValue:h,itemUrl:u,source:i,state:a.getState(),setSelectedItemId:n,setQuery:e,setCollections:l,setIsOpen:p,setStatus:c,setContext:o,event:s})}))}},h)}}}({store:n,props:t,setSelectedItemId:l,setQuery:p,setCollections:c,setIsOpen:o,setStatus:d,setContext:r,refresh:y}),h=i.getEnvironmentProps,u=i.getRootProps,g=i.getFormProps,j=i.getLabelProps,m=i.getInputProps,v=i.getPanelProps,b=i.getListProps,f=i.getItemProps;function y(){return Pc({query:n.getState().query,event:new Event("input"),store:n,props:t,setSelectedItemId:l,setQuery:p,setCollections:c,setIsOpen:o,setStatus:d,setContext:r,nextState:{isOpen:n.getState().isOpen},refresh:y})}return{setSelectedItemId:l,setQuery:p,setCollections:c,setIsOpen:o,setStatus:d,setContext:r,getEnvironmentProps:h,getRootProps:u,getFormProps:g,getInputProps:m,getLabelProps:j,getPanelProps:v,getListProps:b,getItemProps:f,refresh:y}}function Bc(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Mc(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t0&&Zp.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},Zp.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),Zp.createElement("ul",null,a.slice(0,3).reduce((function(a,t){return[].concat(function(s){return function(s){if(Array.isArray(s))return lo(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return lo(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?lo(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(a),[Zp.createElement("li",{key:t},Zp.createElement("button",{className:"DocSearch-Prefill",key:t,onClick:function(){s.setQuery(t.toLowerCase()+" "),s.refresh(),s.inputRef.current.focus()}},t))])}),[]))),Zp.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",Zp.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(s.indexName,']+Missing+results+for+query+"').concat(s.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function co(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function oo(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:io(a,"_snippetResult.".concat(t,".value"))||io(a,t)}}))}function uo(s,a){return function(s){if(Array.isArray(s))return s}(s)||function(s,a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s)){var t=[],n=!0,e=!1,l=void 0;try{for(var p,c=s[Symbol.iterator]();!(n=(p=c.next()).done)&&(t.push(p.value),!a||t.length!==a);n=!0);}catch(o){e=!0,l=o}finally{try{n||null==c.return||c.return()}finally{if(e)throw l}}return t}}(s,a)||function(s,a){if(s){if("string"==typeof s)return go(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?go(s,a):void 0}}(s,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function go(s,a){(null==a||a>s.length)&&(a=s.length);for(var t=0,n=new Array(a);t0}));return s.state.query?!1===a?Zp.createElement(po,s):Zp.createElement(fo,s):Zp.createElement(qo,xo({},s,{hasCollections:a}))}),(function(s,a){return"loading"===a.state.status||"stalled"===a.state.status}));function _o(){return(_o=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(a,["_highlightResult","_snippetResult"])),p=l.findIndex((function(s){return s.objectID===t.objectID}));p>-1&&l.splice(p,1),l.unshift(t),l=l.slice(0,n),e.setItem(l)},remove:function(s){l=l.filter((function(a){return a.objectID!==s.objectID})),e.setItem(l)},getAll:function(){return l}}}function Co(s){var a,t="algoliasearch-client-js-".concat(s.key),n=function(){return void 0===a&&(a=s.localStorage||window.localStorage),a},e=function(){return JSON.parse(n().getItem(t)||"{}")};return{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var t=JSON.stringify(s),n=e()[t];return Promise.all([n||a(),void 0!==n])})).then((function(s){var a=ml(s,2),n=a[0],e=a[1];return Promise.all([n,e||t.miss(n)])})).then((function(s){return ml(s,1)[0]}))},set:function(s,a){return Promise.resolve().then((function(){var l=e();return l[JSON.stringify(s)]=a,n().setItem(t,JSON.stringify(l)),a}))},delete:function(s){return Promise.resolve().then((function(){var a=e();delete a[JSON.stringify(s)],n().setItem(t,JSON.stringify(a))}))},clear:function(){return Promise.resolve().then((function(){n().removeItem(t)}))}}}function zo(s){var a=vl(s.caches),t=a.shift();return void 0===t?{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},n=a();return n.then((function(s){return Promise.all([s,t.miss(s)])})).then((function(s){return ml(s,1)[0]}))},set:function(s,a){return Promise.resolve(a)},delete:function(s){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(s,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t.get(s,n,e).catch((function(){return zo({caches:a}).get(s,n,e)}))},set:function(s,n){return t.set(s,n).catch((function(){return zo({caches:a}).set(s,n)}))},delete:function(s){return t.delete(s).catch((function(){return zo({caches:a}).delete(s)}))},clear:function(){return t.clear().catch((function(){return zo({caches:a}).clear()}))}}}function Po(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},a={};return{get:function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},l=JSON.stringify(t);if(l in a)return Promise.resolve(s.serializable?JSON.parse(a[l]):a[l]);var p=n(),c=e&&e.miss||function(){return Promise.resolve()};return p.then((function(s){return c(s)})).then((function(){return p}))},set:function(t,n){return a[JSON.stringify(t)]=s.serializable?JSON.stringify(n):n,Promise.resolve(n)},delete:function(s){return delete a[JSON.stringify(s)],Promise.resolve()},clear:function(){return a={},Promise.resolve()}}}function Io(s){for(var a=s.length-1;a>0;a--){var t=Math.floor(Math.random()*(a+1)),n=s[a];s[a]=s[t],s[t]=n}return s}function Oo(s,a){return a?(Object.keys(a).forEach((function(t){s[t]=a[t](s)})),s):s}function Eo(s){for(var a=arguments.length,t=new Array(a>1?a-1:0),n=1;n0?n:void 0,timeout:t.timeout||a,headers:t.headers||{},queryParameters:t.queryParameters||{},cacheable:t.cacheable}}var No={Read:1,Write:2,Any:3};function Fo(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return jl(jl({},s),{},{status:a,lastUpdate:Date.now()})}function Lo(s){return"string"==typeof s?{protocol:"https",url:s,accept:No.Any}:{protocol:s.protocol||"https",url:s.url,accept:s.accept||No.Any}}var Ro="POST";function Bo(s,a,t,n){var e,l,p,c=[],o=function(s,a){if("GET"!==s.method&&(void 0!==s.data||void 0!==a.data)){var t=Array.isArray(s.data)?s.data:jl(jl({},s.data),a.data);return JSON.stringify(t)}}(t,n),d=(e=n,l=jl(jl({},s.headers),e.headers),p={},Object.keys(l).forEach((function(s){var a=l[s];p[s.toLowerCase()]=a})),p),r=t.method,i="GET"!==t.method?{}:jl(jl({},t.data),n.data),h=jl(jl(jl({"x-algolia-agent":s.userAgent.value},s.queryParameters),i),n.queryParameters),u=0,g=function a(e,l){var p=e.pop();if(void 0===p)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Vo(c)};var i={data:o,headers:d,method:r,url:$o(p,t.path,h),connectTimeout:l(u,s.timeouts.connect),responseTimeout:l(u,n.timeout)},g=function(s){var a={request:i,response:s,host:p,triesLeft:e.length};return c.push(a),a},j={onSucess:function(s){return function(s){try{return JSON.parse(s.content)}catch(a){throw{name:"DeserializationError",message:a.message,response:s}}}(s)},onRetry:function(t){var n=g(t);return t.isTimedOut&&u++,Promise.all([s.logger.info("Retryable failure",Ho(n)),s.hostsCache.set(p,Fo(p,t.isTimedOut?3:2))]).then((function(){return a(e,l)}))},onFail:function(s){throw g(s),function(s,a){var t=s.content,n=s.status,e=t;try{e=JSON.parse(t).message}catch(l){}return{name:"ApiError",message:e,status:n,transporterStackTrace:a}}(s,Vo(c))}};return s.requester.send(i).then((function(s){return t=j,e=(n=a=s).status,n.isTimedOut||function(s){var a=s.isTimedOut,t=s.status;return!a&&0==~~t}(n)||2!=~~(e/100)&&4!=~~(e/100)?t.onRetry(a):2==~~(a.status/100)?t.onSucess(a):t.onFail(a);var a,t,n,e}))};return function(s,a){return Promise.all(a.map((function(a){return s.get(a,(function(){return Promise.resolve(Fo(a))}))}))).then((function(s){var t=s.filter((function(s){return 1===(a=s).status||Date.now()-a.lastUpdate>12e4;var a})),n=s.filter((function(s){return 3===(a=s).status&&Date.now()-a.lastUpdate<=12e4;var a})),e=[].concat(vl(t),vl(n));return{getTimeout:function(s,a){return(0===n.length&&0===s?1:n.length+3+s)*a},statelessHosts:e.length>0?e.map((function(s){return Lo(s)})):a}}))}(s.hostsCache,a).then((function(s){return g(vl(s.statelessHosts).reverse(),s.getTimeout)}))}function Mo(s){var a={value:"Algolia for JavaScript (".concat(s,")"),add:function(s){var t="; ".concat(s.segment).concat(void 0!==s.version?" (".concat(s.version,")"):"");return-1===a.value.indexOf(t)&&(a.value="".concat(a.value).concat(t)),a}};return a}function $o(s,a,t){var n=Uo(t),e="".concat(s.protocol,"://").concat(s.url,"/").concat("/"===a.charAt(0)?a.substr(1):a);return n.length&&(e+="?".concat(n)),e}function Uo(s){return Object.keys(s).map((function(a){return Eo("%s=%s",a,(t=s[a],"[object Object]"===Object.prototype.toString.call(t)||"[object Array]"===Object.prototype.toString.call(t)?JSON.stringify(s[a]):s[a]));var t})).join("&")}function Vo(s){return s.map((function(s){return Ho(s)}))}function Ho(s){var a=s.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return jl(jl({},s),{},{request:jl(jl({},s.request),{},{headers:jl(jl({},s.request.headers),a)})})}var Wo=function(s){return function(a){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={transporter:s.transporter,appId:s.appId,indexName:a};return Oo(n,t.methods)}},Go=function(s){return function(a,t){var n=a.map((function(s){return jl(jl({},s),{},{params:Uo(s.params||{})})}));return s.transporter.read({method:Ro,path:"1/indexes/*/queries",data:{requests:n},cacheable:!0},t)}},Ko=function(s){return function(a,t){return Promise.all(a.map((function(a){var n=a.params,e=n.facetName,l=n.facetQuery,p=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(n,["facetName","facetQuery"]);return Wo(s)(a.indexName,{methods:{searchForFacetValues:Xo}}).searchForFacetValues(e,l,jl(jl({},t),p))})))}},Qo=function(s){return function(a,t,n){return s.transporter.read({method:Ro,path:Eo("1/answers/%s/prediction",s.indexName),data:{query:a,queryLanguages:t},cacheable:!0},n)}},Yo=function(s){return function(a,t){return s.transporter.read({method:Ro,path:Eo("1/indexes/%s/query",s.indexName),data:{query:a},cacheable:!0},t)}},Xo=function(s){return function(a,t,n){return s.transporter.read({method:Ro,path:Eo("1/indexes/%s/facets/%s/query",s.indexName,a),data:{facetQuery:t},cacheable:!0},n)}};function Jo(s,a,t){return function(s){var a,t,n,e,l=s.appId,p=(a=void 0!==s.authMode?s.authMode:To,t=l,n=s.apiKey,e={"x-algolia-api-key":n,"x-algolia-application-id":t},{headers:function(){return a===To?e:{}},queryParameters:function(){return a===Do?e:{}}}),c=function(s){var a=s.hostsCache,t=s.logger,n=s.requester,e=s.requestsCache,l=s.responsesCache,p=s.timeouts,c=s.userAgent,o=s.hosts,d=s.queryParameters,r={hostsCache:a,logger:t,requester:n,requestsCache:e,responsesCache:l,timeouts:p,userAgent:c,headers:s.headers,queryParameters:d,hosts:o.map((function(s){return Lo(s)})),read:function(s,a){var t=Ao(a,r.timeouts.read),n=function(){return Bo(r,r.hosts.filter((function(s){return 0!=(s.accept&No.Read)})),s,t)};if(!0!==(void 0!==t.cacheable?t.cacheable:s.cacheable))return n();var e={request:s,mappedRequestOptions:t,transporter:{queryParameters:r.queryParameters,headers:r.headers}};return r.responsesCache.get(e,(function(){return r.requestsCache.get(e,(function(){return r.requestsCache.set(e,n()).then((function(s){return Promise.all([r.requestsCache.delete(e),s])}),(function(s){return Promise.all([r.requestsCache.delete(e),Promise.reject(s)])})).then((function(s){var a=ml(s,2);return a[0],a[1]}))}))}),{miss:function(s){return r.responsesCache.set(e,s)}})},write:function(s,a){return Bo(r,r.hosts.filter((function(s){return 0!=(s.accept&No.Write)})),s,Ao(a,r.timeouts.write))}};return r}(jl(jl({hosts:[{url:"".concat(l,"-dsn.algolia.net"),accept:No.Read},{url:"".concat(l,".algolia.net"),accept:No.Write}].concat(Io([{url:"".concat(l,"-1.algolianet.com")},{url:"".concat(l,"-2.algolianet.com")},{url:"".concat(l,"-3.algolianet.com")}]))},s),{},{headers:jl(jl(jl({},p.headers()),{"content-type":"application/x-www-form-urlencoded"}),s.headers),queryParameters:jl(jl({},p.queryParameters()),s.queryParameters)}));return Oo({transporter:c,appId:l,addAlgoliaAgent:function(s,a){c.userAgent.add({segment:s,version:a})},clearCache:function(){return Promise.all([c.requestsCache.clear(),c.responsesCache.clear()]).then((function(){}))}},s.methods)}(jl(jl(jl({},{appId:s,apiKey:a,timeouts:{connect:1,read:2,write:30},requester:{send:function(s){return new Promise((function(a){var t=new XMLHttpRequest;t.open(s.method,s.url,!0),Object.keys(s.headers).forEach((function(a){return t.setRequestHeader(a,s.headers[a])}));var n,e=function(s,n){return setTimeout((function(){t.abort(),a({status:0,content:n,isTimedOut:!0})}),1e3*s)},l=e(s.connectTimeout,"Connection timeout");t.onreadystatechange=function(){t.readyState>t.OPENED&&void 0===n&&(clearTimeout(l),n=e(s.responseTimeout,"Socket timeout"))},t.onerror=function(){0===t.status&&(clearTimeout(l),clearTimeout(n),a({content:t.responseText||"Network request failed",status:t.status,isTimedOut:!1}))},t.onload=function(){clearTimeout(l),clearTimeout(n),a({content:t.responseText,status:t.status,isTimedOut:!1})},t.send(s.data)}))}},logger:(3,{debug:function(s,a){return Promise.resolve()},info:function(s,a){return Promise.resolve()},error:function(s,a){return console.error(s,a),Promise.resolve()}}),responsesCache:Po(),requestsCache:Po({serializable:!1}),hostsCache:zo({caches:[Co({key:"".concat("4.8.1","-").concat(s)}),Po()]}),userAgent:Mo("4.8.1").add({segment:"Browser",version:"lite"}),authMode:Do}),t),{},{methods:{search:Go,searchForFacetValues:Ko,multipleQueries:Go,multipleSearchForFacetValues:Ko,initIndex:function(s){return function(a){return Wo(s)(a,{methods:{search:Yo,searchForFacetValues:Xo,findAnswers:Qo}})}}}}))}function Zo(s,a){return s.reduce((function(s,t){var n=a(t);return s.hasOwnProperty(n)||(s[n]=[]),s[n].length<5&&s[n].push(t),s}),{})}function sd(s){return s}function ad(){}function td(){return(td=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t",highlightPostTag:"",hitsPerPage:20},r)}]}).catch((function(s){throw"RetryError"===s.name&&e("error"),s})).then((function(s){var a=s[0].hits,e=s[0].nbHits,l=Zo(a,(function(s){return s.hierarchy.lvl0}));return t.context.searchSuggestions.length0&&(W(),A.current&&A.current.focus())}),[L,W]),Zp.useEffect((function(){function s(){if(E.current){var s=.01*window.innerHeight;E.current.style.setProperty("--docsearch-vh","".concat(s,"px"))}}return s(),window.addEventListener("resize",s),function(){window.removeEventListener("resize",s)}}),[]),Zp.createElement("div",td({ref:O},H({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===P.status&&"DocSearch-Container--Stalled","error"===P.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(s){s.target===s.currentTarget&&h()}}),Zp.createElement("div",{className:"DocSearch-Modal",ref:E},Zp.createElement("header",{className:"DocSearch-SearchBar",ref:D},Zp.createElement(ko,td({},U,{state:P,autoFocus:0===L.length,onClose:h,inputRef:A,isFromSelection:Boolean(L)&&L===F}))),Zp.createElement("div",{className:"DocSearch-Dropdown",ref:T},Zp.createElement(wo,td({},U,{indexName:c,state:P,hitComponent:m,resultsFooterComponent:b,disableUserPersonalization:k,recentSearches:M,favoriteSearches:B,onItemClick:function(s){$(s),h()},inputRef:A}))),Zp.createElement("footer",{className:"DocSearch-Footer"},Zp.createElement(Vc,null))))}function od(){return(od=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t{for(var t in a||(a={}))l.call(a,t)&&c(s,t,a[t]);if(e)for(var t of e(a))p.call(a,t)&&c(s,t,a[t]);return s})({},this.searchConfig),s=t(a,n({container:"#docsearch"})),Up(Zp.createElement(id,ul({},s,{transformSearchClient:function(a){return a.addAlgoliaAgent("docsearch.js","3.0.0-alpha.33"),s.transformSearchClient?s.transformSearchClient(a):a}})),function(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof s?a.document.querySelector(s):s}(s.container,s.environment)))}}},[["render",function(s,a,t,n,e,l){return cn(),hn("div",hd)}]]);const gd={class:"van-doc-markdown-body"},jd=wn('

更新日志

v1.9.0

2021-09-27

Bug Fixes

  • Slider: 移除 theme mixin #4520
  • Tab: 修复初始位置不正确问题 #4521

Document

  • ActionSheet: 添加 show 属性说明 #4518

Feature

  • Slider: 添加 vertical 属性 #4486

Performance

  • 移除 CSS variables 兼容代码 #4487

v1.8.7

2021-09-22

Features

  • Icons: 新增 guide-o 图标 #4507

1.8.6

2021-09-20

Features

  • Calendar: 新增 confirmDisabledText 默认文案 #4490) (8629da1

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

  • Calendar: 修复超出选择范围 toast 提示一直存在问题 #4474
  • page-scroll: 修复 isDef 取反问题 #4488

1.8.4

2021-09-07

Bug Fixes

  • page-scroll: 修复 getCurrentPage 为空时报错 #4458

Features

  • Field: 新增 clear-trigger 属性 #4461
  • Search: 新增 clear-icon 属性 #4463
  • Search: 新增 clear-trigger 属性 9e17b13
  • Slider: 新增 range 属性 #4442

v1.8.3

2021-08-30

Bug Fixes

  • Calendar: 修复 default-date 属性失效问题 #4430
  • ShareSheet: 调整 overlayStyle 属性类型为 string 8c408e2
  • Stepper: 调整 minus/plus slots 位置 #4427
  • Sticky: 修复 root 为 null 时，读取 root.top 报错问题 #4433
  • Calendar: 调整 minDate 和 maxDate 传值类型为 Number 37d8e69

Features

  • Popup: 新增 lock-scroll 属性 #4384

Performance Improvements

  • Radio: label 的 margin-left 改为 padding-left，增大可点击区域，增强用户体验 #4165

v1.8.2

2021-08-18

Bug Fixes

  • Calendar: 修复 template 引用路径不是相对路径的问题 7f7cf6
  • Field: 修复 template 引用路径不是相对路径的问题 6dd42a

v1.8.1

2021-08-18

Feature

  • Calendar: 新增 click-subtitle 事件 #4385
  • Circle: 使用 setTimeout 代替 setInterval #4401

Bug Fixes

  • Picker: 修复 template 引用路径不是相对路径的问题 #4408

v1.8.0

2021-08-11

Feature

  • Overlay: 新增 lock-scroll 属性 #4383
  • search: 新增 click-input 事件 #4357

Performance

  • 移除了 iOS8 相关的 polyfill，减少包体积 #4395

v1.7.2

2021-07-19

Bug Fixes

  • Calendar: 初始日期设置为当前日期 #4339

Features

  • Cell: CellGroup 新增 inset 属性 #4341
  • Search: 新增 click-input 事件 #4337

1.7.1

2021-07-06

Bug Fixes

  • Col: 修复样式问题 #4322
  • Grid: 增加 icon-prefix 属性默认值 #4318
  • IndexBar: 修复当索引列表为空时报错 #4310

1.7.0

2021-07-04

Bug Fixes

  • Button: 修复 type 为 getUserInfo & wx.getUserProfile 可用时 lang 参数失效 #4250
  • ShareSheet: 新增内置 icon weapp-qrcode wechat-moments #4256

Features

  • Checkbox: 增加 direction 属性，设置排列方向 #4265
  • ConfigProvider: 增加全局配置组件 #4279
  • Grid: 增加 reverse 属性，支持文本&图片位置互换 #4280
  • GridItem: 增加 icon-prefix 属性，支持第三方字体 #4276
  • Rate: 增加更多 css 变量 #4297
  • Slider: 增加更多 css 变量 #4305

Improvements

  • wxs style 方法支持驼峰变量命名，以便能更好的在 wxml 中使用 #4281

1.6.9

2021-06-06

Bug Fixes

  • DatetimePicker: 修复 动态设置 min-hour min-date 显示不正确 #4245
  • Tabs: 修复 tab 数量较多时滚动距离不正确 #4202
  • Uploader: 修复 demo 中 beforeRead 报错 #4235

1.6.9-beta.2

2021-05-22

Bug Fixes

  • Button: 修复 open-type 不生效 #4222
  • Calendar: 修复 allow-same-day 开启时 custom-color 属性无效 #4200
  • Circle: 修复 value 是小数时抖动的情况 #4152
  • NoticeBar: 调整滚动行为 #4201
  • NoticeBar: 修复不正确的滚动速度 cde3876
  • Radio: 支持动态设置 disabled #4191
  • Rate: 支持滑动选择半星 #4195

Features

  • Calendar: 增加 first-day-of-week 属性，设置周起始日 #4211
  • Calendar: 增加 show-range-prompt 属性和 over-range 事件，设置是否展示提示文案 #4212
  • Icons: 图标库迁移至 iconfont.cn #4219
  • OpenType: 支持 getUserProfile #4203
  • Panel: 移除 useFooterSlot #4205

1.6.8

2021-02-26

Features

  • NoticeBar: 新增默认插槽 (#4048)
  • Stepper: 新增 theme 属性，支持圆形风格 (#4049)
  • Stepper: 新增 plus & minus 插槽 (#4049)

Bug Fixes

  • Checkbox: 修复 label-position 属性无效 (#4036)
  • Dialog: 修复 beforeClose 方法类型定义 (#4019)

Improvements

  • Circle: 当内置 canvas 不支持同层渲染时降级至默认 type (#4050)

1.6.7

2021-01-27

Features

  • Radio: 新增 direction 属性 (#4007)

Bug Fixes

  • Icons: 修复部分地区图标不显示 (#4012)
  • Transition: 修复默认设置 show 属性为 true 时不生效 (#4005)

1.6.6

2021-01-21

Features

  • Uploader: 支持文件预览 (#3975)

Bug Fixes

  • Picker: 修复标题栏无法显示 (#3973)

Improvements

  • Calendar: 优化模板代码 (#3972)

1.6.5

2021-01-19

Features

  • Field: 新增 input 插槽 (#3932)
  • Field: 新增 click-input 事件 (#3932)
  • Icon: 新增 delete-o、sort、font、font-o、revoke 图标 (#3881)

Bug Fixes

  • Button: 修复 custom-style 属性不生效 (#3903)
  • Dialog: 修复 close-on-click-overlay 属性不生效 (#3913)

Improvements

  • Cell: 优化性能 (#3888)
  • Col: 优化性能 (#3886)
  • Divider: 优化性能 (#3887)
  • Empty: 优化性能 (#3933)
  • Loading: 优化性能 (#3892)
  • Notice-bar: 优化性能 (#3891)
  • Notify: 优化性能 (#3893)
  • Picker: 优化性能 (#3949)
  • Stepper: 优化性能 (#3890)
  • Sticky: 优化性能 (#3879)
  • SwipeCell: 优化性能 (#3928)
  • Switch: 优化性能 (#3889)
  • Tag: 优化性能 (#3894)
  • Transition: 优化性能 (#3895)
  • Uploader: 优化性能 (#3897)

1.6.4

2020-12-18

Improvements

  • Tab: 优化粘性布局时的渲染性能 (#3875)
  • Grid: 使用 wxs 优化性能 (#3839)
  • Image: 使用 wxs 优化性能 (#3839)
  • Button: 使用 wxs 优化性能 (#3839)
  • Icon: 减少代码体积 (#3839)
  • Checkbox: 减少代码体积 (#3839)
  • Slider: 减少代码体积 (#3839)

Bug Fixes

  • Calendar: 修复在 phone 设备上选择日期后显示错误 (#3833)
  • GoodsAction: 修复部分设备上高度异常 (#3865)
  • Slider: 修复设置 max min 时滑动不均匀 (#3876)
  • Tab: 修复切换时内容区闪烁的问题 (#3866)

1.6.3

2020-12-09

Features

  • Dialog: 新增 beforeClose 属性 (#3815)
  • uploader: 新增若干 CSS 变量 (#3797)
  • Aarea: 支持不传入 county_list 数据 (#3824)
  • Tab: 新增 resize 方法 (#3827)

Improvements

  • Collapse: 使用 animate 提升动画性能 (#3826)
  • Tab: 优化样式拼装性能 (#3827)

Bug Fixes

  • Field: 修复输入中文时显示字数暂时超出 maxlength (#3802)
  • Info: 修复样式错误 (#3823)
  • NavBar: 修复动态渲染时组件报错 (#3822)
  • Progress: 修复 percentage 为 0 时样式异常 (#3808)

1.6.2

2020-11-29

Features

  • Tabbar: 新增 placeholder icon-prefix 属性 (#3792)

Bug Fixes

  • DatetimePicker: 修复 type=year-month 时选择出现报错 (#3783)
  • Info: 修复部分安卓设备中文案不完全居中 (#3778)
  • Tab: 修复 ellipsis 为 false 时下划线位置不正确 (#3777)
  • Notify: 修复组件未全局居中 (#3751)

Improvements

  • Icon: 使用 wxs 优化性能 (#3791)

1.6.1

2020-11-12

Bug Fixes

  • Field: 修复未传入 label 属性时仍渲染 label #3756
  • Picker: 修复 confirm、cancel 事件报错 #3755

1.6.0

2020-11-11

Features

  • SwipeCell: 新增外部样式类 custom-class #3678
  • ActionSheet: 调整取消文字颜色至 @gray-7 #3719
  • ActionSheet: 调整顶部栏样式 #3720
  • ActionSheet: 调整加载图标大小至 22px #3718
  • ActionSheet: 调整描述文字样式 #3726
  • Cell: 调整图标外边距至 4px #3721
  • DropdownMenu: 增加默认阴影 #3723
  • DropdownMenu: 调整选中态默认颜色至 #ee0a24 #3725
  • Image: 调整图标大小至 36px #3724
  • Popup: 调整圆角至 16px #3713
  • Search: 调整左侧内边距至 12px #3716
  • Sidebar: 调整宽度至 85px #3722
  • TabbarItem: 调整图标大小至 22px #3717

Bug Fixes

  • Field: 修复使用 label 属性时 label-class 样式类不生效 #3729
  • NoticeBar: 修复内容较短时开启 scrollable 不生效 #3727
  • SidebarItem: 修复长数字不换行的问题 #3714
  • Tag: 默认字体加入 miui #3715

1.5.2

2020-10-15

Features

  • Uploader: 标准化 file-list 与事件参数 #3673
  • Uploader: 新增 thumb，支持缩略图展示 #3673
  • GoodsAction: 新增若干 CSS 变量 #3654
  • 移动 @types/wechat-miniprogram 至 dependencies #3654

Bug Fixes

  • Button: 修复细边框样式问题 #3653
  • Tab: 重构动画实现，不再使用 transform #3668

1.5.1

2020-09-29

Features

  • Card: 新增 origin-price tag 插槽 #3645
  • ShareSheet: 调整默认 z-index 至 100 #3575
  • ShareSheet: 新增 item 属性 openType #3575
  • Uploader: 扩大删除按钮点击区域 #3631

Bug Fixes

  • Uploader: 支持预览视频 #3594
  • Dialog: 调整类型定义 #3630
  • NavBar: 修复 CSS 变量 --nav-bar-icon-color 不生效 #3643
  • NavBar: 修复未设置 title 时样式异常 #3643
  • Tab: 修复 line-width 属性不支持 string #3628

1.5.0

2020-08-27

Features

  • ShareSheet: 新增组件 #3559
  • Icons: 升级 @vant/icons 至 v1.2.5 #3539
  • sidebar: 新增 badge 属性 #3564
  • Tabs: 调整默认 line-width 至 40px #3518
  • Tabs: 去除默认边框 #3519
  • TreeSelect: 新增 selected-icon 属性 #3565
  • TreeSelect: 支持 badge、dot 显示 #3565

Bug Fixes

  • collapse: 修复嵌套在 popup 等组件中时默认展开无效 #3562
  • empty: 修复 image、description 插槽不生效 #3563

1.4.4

2020-08-12

Bug Fixes

  • Transition: 重构组件以修复卡顿问题 #3498
  • Icon: 修复数字未对齐 #3501
  • Tab: 修复可滚动时下划线位置错误 #3511

v1.4.3

2020-08-07

Features

  • Dialog: 增加圆角按钮样式 #3476
  • Cell: 调整下划线位置 #3487
  • Tab: 调整默认滚动阈值至 5 个、优化样式 #3459

v1.4.2

2020-08-03

Features

Bug Fixes

  • Calendar: 修复超出 max-range 时未显示 Toast #3466
  • Tab: 修复手势滚动可切换至禁用项 #3467

v1.4.1

2020-07-28

Features

  • Picker: 调整默认可见的选项个数为 6 个 #3418
  • Toast: 调整圆角为 8px #3419

Bug Fixes

  • Slider: 修复点击会触发 drag 事件 #3415
  • Area: 修复中间列无法滚动 #3443

v1.4.0

2020-07-17

Features

  • Empty: 新增 Empty 组件 #3327
  • NoticeBar: 新增 background 属性 #3388
  • NoticeBar: 新增 close 事件 #3388
  • GridItem: 新增 icon-color 属性 #3386
  • NavBar: 现在 custom-style 将影响根节点#3371
  • Cell: 新增 title-style 属性, fix Field label width #3370
  • Uploader: 更新 failed 图标 #3359
  • Uploader: 更新删除图标样式 #3385
  • Uploader: 移除圆角样式 #3384
  • Field: 更新禁用态样式 #3358
  • Field: 更新 label 样式 #3357
  • Picker: 调整 action button 样式 #3316

Bug Fixes

  • Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 #3401
  • Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 #3317
  • Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 #3318
  • DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 #3352
  • Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 #3383
  • Dialog: show dialog after class ready #3374
  • Calendar: confirm-disabled-text 属性增加默认值 #3394

v1.3.3

2020-06-24

Features

  • steps: 为每一项增加 inactiveIcon、activeIcon 属性 #3315
  • field: 增加外部样式类 label-class #3311
  • field: 现在总会从内部 set value 值 #3313
  • uploader: 为每一项增加 deletable 属性 #3270
  • uploader: 扩大删除图标的可点击区域 #3265

Bug Fixes

  • tabbar: 修复 iphone-se 上高度异常 #3314
  • grid: 修复 text 与 icon 同时设置时样式异常 #3310
  • calendar: 修复多选模式下 default-date 属性不生效 #3284
  • circle: 修复 type=“2d” 时无法动态变更 value #3264
  • nav-bar: 修复未设置 left-text 时左侧图标样式异常 #3263

v1.3.2

2020-06-04

Features

  • button: 新增 form-type 属性 #3208
  • grid: 新增 icon-size、badge 属性 #3236
  • grid: 新增 direction 属性 #3192

Bug Fixes

  • Grid: 修复开启 square 时横、纵向间距不同 #3231
  • uploader: 修复点击删除图标时触发 click-preview 事件 #3230
  • circle: 修复 type="2d" 不生效 #3228
  • calendar: 修复在选择区间时，点击确定报错 #3195
  • tag: 修复 css 变量名拼写错误 #3191

v1.3.1

2020-05-24

Features

  • Button: 新增 class-prefix 属性 #3159
  • Collapse: 新增 open、close 事件 #3176

Bug Fixes

  • 修复控制台提示选择器错误的问题 #3137
  • 修复 GoodsActionButton 在某些情况下报错的问题 #3145

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

  • sticky: 新增 scroll-top 属性 #3115
  • button: 新增 dataset 属性 #3075
  • uploader: 所有类型都会触发 click-preview 事件 #3071
  • Uploader: 属性 accept 新增值 media #3047
  • feat: 新增基础 font-family #3061
  • submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 #3104

Bug Fixes

  • dialog: 修复 title 多余空格的问题 #3069
  • tab: 修复 tab 个数多时显示滚动条 #3072
  • Sticky: 修复使用组件时页面 onPageScroll 失效 #3092
  • button: 修复 disabled 属性对 open-type 类型的按钮无效 #3076

v1.2.2

2020-04-21

Features

  • GoodsActionButton: 新增 CSS 变量 goods-action-line-height #3037
  • Calendar: 选择区间大于 range 时自动选中最大范围 #3026
  • Notify: 新增 top 属性 #3018

Bug Fixes

  • Field: 修复未设置 autosize 时 wxs 报错 #3038
  • Field: 避免设置 showClear 为 undefined #3012

v1.2.1

2020-04-12

Features

  • Field: 支持小程序双向绑定 #2986
  • Calendar: 多选模式下新增 unselect 事件 #2990

Bug Fixes

  • IndexBar: 移除 scroll-top 属性 #2999
  • Uploader: 修复图片后缀名为大写时未正常识别 #2987
  • Field: 修复 autosize 属性 设置 max-height 不生效 #3007

v1.2.0

2020-04-04

Features

  • TreeSelect: 更新 nav 背景色 #2952
  • Sticky: 使用 page scroll 重构组件 #2950
  • Field: 新增 auto-focus、disable-default-padding、cursor 属性 #2936
  • Field: 新增 linechange、keyboardheightchange 事件 #2936
  • Uploader: 支持显示上传状态 #2929
  • Image: mode 属性新增 widthFix、heightFix #2908
  • Canvas: 新增 type 属性 #2906
  • NavBar: 新增 placeholder 属性 #2896

Bug Fixes

  • Field: 修复输入过快时输入框内容不断回退 #2936
  • Calendar: 修复 show-confirm 为 true 时组件初始化报错 #2951
  • Tab: 修复 type 为 card 时 color 对边框无效 #2941

v1.1.0

2020-03-21

Features

  • 新增 Calendar 日历组件 #2894
  • Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class #2882
  • Steps: 新增 click 事件 #2874
  • SideBar: 新增 title 插槽 #2873
  • Uploader: 新增 upload-icon 属性 #2869
  • Uploader: 新增 show-upload 属性 #2868
  • Uploader: 更新样式、调整事件触发顺序与 vant 一致 #2886
  • Field: 新增 show-word-limit 属性 #2856
  • Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight #2856
  • Field: 新增若干 CSS 变量 #2856

Bug Fixes

  • Button: 移除 lang 属性默认值 #2883
  • Button: 修复 disabled 属性对原生事件无效 #2878

v1.0.7

2020-03-04

Features

  • DropdownItem: 新增 popupStyle 属性 #2804
  • DropdownItem: 新增 open close opened closed 事件 #2804
  • Card: 新增 price num 插槽 #2787
  • Card: 新增 origin-price-class 外部样式类 #2787

Bug Fixes

  • Tab: 修复内容项高度不同时粘性布局异常 #2817
  • Picker: 修复未选中项样式未置灰 #2816
  • GoodsActionButton: 修复仅使用一个 button 时样式异常 #2808
  • Radio: name类型与value统一 #2801
  • Uploader: 修复文档错误 #2777

v1.0.6

2020-02-24

Features

  • GoodsActionButton: 新增默认 slot #2779
  • SubmitBar: 更新圆角样式 #2755
  • Card: 更新样式 #2754
  • 优化 relation 部分代码 #2760

Bug Fixes

  • DropdownItem: 修复点击选项时不触发close事件 #2766
  • GoodsActionButton: 修复低版本基础库下的样式问题 #2762
  • Tabs: 修复点击禁用项时事件参数错误 #2758
  • Checkbox: 修复动态设置disabled属性无效 #2748
  • Button: add loading color when plain is true #2746
  • Radio: 修复label-disabled文档错误 #2763

v1.0.5

2020-02-07

Features

  • ActionSheet: actions 支持更多 openType #2715
  • Uploader: 新增开始disabled时的组件样式 #2720
  • Icon: 调整示例小程序页面与 vant 对齐 #2728
  • 示例小程序首页与 vant 对齐 #2729
  • 完善快速上手文档，增加 npm 构建说明 #2726

Bug Fixes

  • Radio: 修复disabled属性不生效 #2711
  • Tab: 修复animated属性无法动态切换 #2712
  • Circle: 修正文档错误，size属性不支持string类型 #2694
  • 修正文档默认 slot 名称为 default 的错误 #2726
  • TreeSelect: 修正文档示例代码标签闭合错误 #2710

v1.0.4

2020-01-21

Features

  • Stepper: 新增 disable-long-press 属性 #2691
  • quickstart: 快速上手新增关闭 style v2 说明 #2704
  • Search: 新增 background、disabled、input-align 文档示例 #2698
  • Icon: 文档新增图标文字加载失败说明 #2681

Bug Fixes

  • Sticky: 修复真机上页面滚动缓慢时无法吸顶/取消吸顶 #2703
  • DropdownItem: 修复 wx:key 警告 #2670
  • IndexBar: 文档修复组件引入路径错误 #2689
  • 升级依赖版本以避免安全警告 #2680

v1.0.3

2020-01-09

Features

  • npm 包默认输出 es5 版本代码 #2639
  • Steps: 新增外部样式类 desc-class #2630

Bug Fixes

  • Tab: 解决动态添加选项时，顺序错乱和下划线长度不变的问题 #2663
  • NavBar: 修复返回图标未居中的问题 #2633

v1.0.2

2019-12-31

Features

  • Skeleton: 新增外部样式类row-class``avatar-class``title-class #2612
  • SwipeCell: 支持动态修改width属性 #2607
  • Uploader: 新增camera``compressed``maxDuration属性 #2584

Improvements

  • Tab: 优化弹性滚动效果 #2606

Bug Fixes

  • IndexBar: 修复字母未全部定义时 click 事件报错 #2605
  • Field: 修复点击清除图标后下一次点击无效 #2602

v1.0.1

2019-12-23

Features

  • Uploader: 新增 sizeType 属性 #2563
  • GoodsActionButton: 新增 plain 属性 #2559
  • Uploader: 去除 use-slot 属性 #2551
  • 新增样式覆盖说明文档 #2566

Improvements

  • 使用 nextTick 优化部分异步逻辑 #2561
  • wxs 新增 addUnit 方法以减少 setData 调用次数 #2550

Bug Fixes

  • Tag: 修复未依赖 van-icon 组件 #2579
  • Notify: 修复 safeAreaInsetTop 不生效 #2558
  • Uploader: 修复 capture 属性不生效 #2551

v1.0.0

2019-12-11

主要变动

  • npm 包名由 vant-weapp 重命名为 @vant/weapp
  • 增加十一个新组件
  • 增加数十个 API
  • 所有组件支持通过CSS自定义属性自定义样式
  • 使用env()重构 iOS 安全区域适配
  • 调整部分 API 命名，废除少量 API

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

  • Grid 宫格，用于展示内容或进行页面导航
  • Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示
  • Circle 环形进度条，告知用户当前的状态和进度
  • Overaly 遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
  • Divider 分割线，区隔内容的分割线
  • Sticky 粘性布局，与 CSS 中position: sticky属性实现的效果类似
  • Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
  • IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
  • Uploader 文件上传，上传一个或多个文件
  • CountDown 倒计时，用于显示活动倒计时、短信验证码等
  • DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
  • BadgeGroup重命名为Sidebar
  • Badge重命名为SlidebarItem
  • active属性重命名为activeKey
Notify
  • text选项重命名为message
  • backgroundColor选项重命名为background
  • 去除transitionend事件，新增 6 个事件
SwitchCell
  • 移除了SwitchCell组件，可以使用Cell和Switch组件代替
Transition
  • 去除transitionend事件，新增 6 个事件

新特性

ActionSheet
  • 新增click-overlay事件
  • 新增close-on-click-action属性
  • 新增color属性
  • 新增description属性
  • 新增round属性
Area
  • 新增columns-placeholder属性
  • reset方法支持传入code参数
Button
  • 新增loading-type属性
  • color属性支持渐变色
  • 切换disabled时增加过渡效果
Checkbox
  • 新增icon-size属性
Color
  • 基础红色更新为#ee0a24
DatetimePicker
  • 新增filter属性
Dialog
  • 优化文字换行
  • 新增title插槽
  • 新增confirm-button-color属性
  • 新增cancel-button-color属性
  • 新增width属性
  • 新增overlay-style属性
Field
  • 新增clickable属性
  • 新增arrow-direction属性
  • 新增hold-keyboard属性
GoodsActionButton
  • 新增color属性
  • 样式升级为圆角风格
GoodsActionIcon
  • 新增icon插槽
  • 新增dot属性
GridItem
  • 新增info属性
  • 新增dot属性
Icon
  • 新增dot属性
  • 新增down图标
  • 新增wap-hone实底风格图标
  • 支持number类型的size属性
Loading
  • 支持number类型的size属性
NoticeBar
  • 阻止关闭图标点击事件冒泡
Notify
  • 新增clear方法
  • 新增round属性
  • 新增closeable属性
  • 新增close-icon属性
  • 新增close-icon-position属性
Progress
  • 新增stroke-width属性
Radio
  • 新增icon-size属性
Rate
  • 优化手势判断
  • 新增gutter属性
  • 新增touchable属性
  • 支持string类型的size属性
  • 新增action-text属性
  • 新增left-icon插槽
  • 新增right-icon插槽
SlidebarItem
  • 新增dot属性
Slider
  • 新增drag-start事件
  • 新增drag-end事件
  • 支持传入任意范围的max和min属性
  • 支持number类型的bar-height属性
  • 增加滑动动画
  • 增大点击区域
SwipeCell
  • 新增name属性
  • 新增open事件
  • 支持打开状态互斥
Switch
  • 加载图标的颜色会跟随开关状态变化
Stepper
  • 支持长按手势
  • 新增input-width属性
  • 新增button-size属性
  • 新增decimalLength属性
  • 新增 disablePlus、disableMinus 属性
Steps
  • 新增active-icon属性
  • 新增inactive-icon属性
Tabs
  • 使用 Sticky 组件重构吸顶实现
  • 新增name属性
  • 新增line-height属性
  • 新增ellipsis属性
  • 新增lazy-render属性
  • line-width属性支持String类型
  • 增加云开发结合示例
TreeSelect
  • 新增max属性
  • 新增content插槽
',48),md=[jd],vd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gd,md)))},bd={class:"van-doc-markdown-body"},fd=wn('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',5),yd=[fd],qd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",bd,yd)))},xd={class:"van-doc-markdown-body"},wd=wn('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),_d=[wd],kd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",xd,_d)))},Sd={class:"van-doc-markdown-body"},Cd=wn('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

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

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

  • 基于 Vant Weapp 搭建小程序应用
  • 样式覆盖方案

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),zd=[Cd],Pd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Sd,zd)))},Id={class:"van-doc-markdown-body"},Od=wn('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

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

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

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

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',7),Ed=[Od],Dd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Id,Ed)))},Td={class:"van-doc-markdown-body"},Ad=wn('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),Nd=[Ad],Fd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Td,Nd)))},Ld={class:"van-doc-markdown-body"},Rd=wn('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

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

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

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

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

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

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

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

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',17),Bd=[Rd],Md={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ld,Bd)))},$d={class:"van-doc-markdown-body"},Ud=wn('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

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

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',18),Vd=[Ud],Hd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",$d,Vd)))},Wd={class:"van-doc-markdown-body"},Gd=wn('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

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

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

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

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

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

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

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

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

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

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

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

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

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

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),Kd=[Gd],Qd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Wd,Kd)))},Yd={class:"van-doc-markdown-body"},Xd=[wn('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10)],Jd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Yd,Xd)))},Zd={class:"van-doc-markdown-body"},sr=[wn('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],ar={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Zd,sr)))},tr={class:"van-doc-markdown-body"},nr=[wn('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定复选框的勾选状态。

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

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

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

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

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

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

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

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],er={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",tr,nr)))},lr={class:"van-doc-markdown-body"},pr=[wn('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

value属性表示进度条的目标进度。

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

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

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

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],cr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",lr,pr)))},or={class:"van-doc-markdown-body"},dr=[wn('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

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

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

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

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],rr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",or,dr)))},ir={class:"van-doc-markdown-body"},hr=[wn('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ir,hr)))},gr={class:"van-doc-markdown-body"},jr=[wn('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],mr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gr,jr)))},vr={class:"van-doc-markdown-body"},br=[wn('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

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

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",vr,br)))},yr={class:"van-doc-markdown-body"},qr=[wn('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

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

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

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

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

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

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],xr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",yr,qr)))},wr={class:"van-doc-markdown-body"},_r=[wn('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择完整时间

value 为时间戳。

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

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

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

选择日期（年月）

value 为时间戳。

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

选择时间

value 为字符串。

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

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

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

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],kr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",wr,_r)))},Sr={class:"van-doc-markdown-body"},Cr=[wn('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

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

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],zr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Sr,Cr)))},Pr={class:"van-doc-markdown-body"},Ir=[wn('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

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

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],Or={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Pr,Ir)))},Er={class:"van-doc-markdown-body"},Dr=[wn('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

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

向上展开

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

禁用菜单

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

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
',15)],Tr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Er,Dr)))},Ar={class:"van-doc-markdown-body"},Nr=[wn('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ar,Nr)))},Lr={class:"van-doc-markdown-body"},Rr=[wn('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Br={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Lr,Rr)))},Mr={class:"van-doc-markdown-body"},$r=[wn('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],Ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Mr,$r)))},Vr={class:"van-doc-markdown-body"},Hr=[wn('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

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

自定义内容

通过插槽可以自定义格子展示的内容。

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

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

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

格子间距

通过gutter属性设置格子之间的距离。

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

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

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

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],Wr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Vr,Hr)))},Gr={class:"van-doc-markdown-body"},Kr=[wn('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

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

图标颜色

设置color属性来控制图标颜色。

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

图标大小

设置size属性来控制图标大小。

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

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],Qr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Gr,Kr)))},Yr={class:"van-doc-markdown-body"},Xr=[wn('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

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

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

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

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

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

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

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

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

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

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],Jr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Yr,Xr)))},Zr={class:"van-doc-markdown-body"},si=[wn('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],ai={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Zr,si)))},ti={class:"van-doc-markdown-body"},ni=[wn('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

加载类型

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

自定义颜色

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

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],ei={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ti,ni)))},li={class:"van-doc-markdown-body"},pi=[wn('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],ci={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",li,pi)))},oi={class:"van-doc-markdown-body"},di=[wn('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

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

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],ri={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",oi,di)))},ii={class:"van-doc-markdown-body"},hi=[wn('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ii,hi)))},gi={class:"van-doc-markdown-body"},ji=[wn('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

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

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],mi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gi,ji)))},vi={class:"van-doc-markdown-body"},bi=[wn('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",vi,bi)))},yi={class:"van-doc-markdown-body"},qi=[wn('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

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

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

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

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],xi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",yi,qi)))},wi={class:"van-doc-markdown-body"},_i=[wn('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

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

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

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

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],ki={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",wi,_i)))},Si={class:"van-doc-markdown-body"},Ci=[wn('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

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

线条粗细

通过stroke-width可以设置进度条的粗细。

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

置灰

设置inactive属性后进度条将置灰。

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

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],zi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Si,Ci)))},Pi={class:"van-doc-markdown-body"},Ii=[wn('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定值当前选中项的 name 。

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

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

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

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

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

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],Oi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Pi,Ii)))},Ei={class:"van-doc-markdown-body"},Di=[wn('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

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

自定义图标

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

自定义样式

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

半星

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

自定义数量

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

禁用状态

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

只读状态

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

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],Ti={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ei,Di)))},Ai={class:"van-doc-markdown-body"},Ni=[wn('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ai,Ni)))},Li={class:"van-doc-markdown-body"},Ri=[wn('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Bi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Li,Ri)))},Mi={class:"van-doc-markdown-body"},$i=[wn('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],Ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Mi,$i)))},Vi={class:"van-doc-markdown-body"},Hi=[wn('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],Wi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Vi,Hi)))},Gi={class:"van-doc-markdown-body"},Ki=[wn('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],Qi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Gi,Ki)))},Yi={class:"van-doc-markdown-body"},Xi=[wn('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],Ji={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Yi,Xi)))},Zi={class:"van-doc-markdown-body"},sh=[wn('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],ah={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Zi,sh)))},th={class:"van-doc-markdown-body"},nh=[wn('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],eh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",th,nh)))},lh={class:"van-doc-markdown-body"},ph=[wn('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],ch={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",lh,ph)))},oh={class:"van-doc-markdown-body"},dh=[wn('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],rh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",oh,dh)))},ih={class:"van-doc-markdown-body"},hh=[wn('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],uh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",ih,hh)))},gh={class:"van-doc-markdown-body"},jh=[wn('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],mh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",gh,jh)))},vh={class:"van-doc-markdown-body"},bh=[wn('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],fh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",vh,bh)))},yh={class:"van-doc-markdown-body"},qh=[wn('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],xh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",yh,qh)))},wh={class:"van-doc-markdown-body"},_h=[wn('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],kh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",wh,_h)))},Sh={class:"van-doc-markdown-body"},Ch=[wn('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],zh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Sh,Ch)))},Ph={class:"van-doc-markdown-body"},Ih=[wn('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],Oh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Ph,Ih)))},Eh={class:"van-doc-markdown-body"},Dh=[wn('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',18)],Th={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/vite/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:s=>`/zh-CN${{"/common":"/style","/transition":"/style"}[s]||s}`,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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}},Ah={Changelog:vd,CustomStyle:qd,Home:kd,Quickstart:Pd,Theme:Dd,ActionSheet:Fd,Area:Md,Button:Hd,Calendar:Qd,Card:Jd,Cell:ar,Checkbox:er,Circle:cr,Col:rr,Collapse:ur,Common:mr,ConfigProvider:fr,CountDown:xr,DatetimePicker:kr,Dialog:zr,Divider:Or,DropdownMenu:Tr,Empty:Fr,Field:Br,GoodsAction:Ur,Grid:Wr,Icon:Qr,Image:Jr,IndexBar:ai,Loading:ei,NavBar:ci,NoticeBar:ri,Notify:ui,Overlay:mi,Panel:fi,Picker:xi,Popup:ki,Progress:zi,Radio:Oi,Rate:Ti,Search:Fi,ShareSheet:Bi,Sidebar:Ui,Skeleton:Wi,Slider:Qi,Stepper:Ji,Steps:ah,Sticky:eh,SubmitBar:ch,SwipeCell:rh,Switch:uh,Tab:mh,Tabbar:fh,Tag:xh,Toast:kh,Transition:zh,TreeSelect:Oh,Uploader:{setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(cn(),hn("div",Eh,Dh)))}};const Nh={class:"van-doc-header"},Fh={class:"van-doc-row"},Lh={class:"van-doc-header__top"},Rh={class:"van-doc-header__logo"},Bh=["src"],Mh={class:"van-doc-header__top-nav"},$h=["href"],Uh=["src"],Vh={key:1},Hh={key:0,ref:"version",class:"van-doc-header__top-nav-item"},Wh={key:0,class:"van-doc-header__version-pop"},Gh=["onClick"],Kh={key:1,class:"van-doc-header__top-nav-item"},Qh=["href"];const Yh={name:"VanDocContainer",props:{hasSimulator:Boolean}};const Xh=["src"];const Jh={name:"VanDoc",components:{DocNav:rl,DocHeader:el({name:"VanDocHeader",components:{SearchInput:ud},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:"1.9.0",showVersionPop:!1}),computed:{langLink(){return`#${this.$route.path.replace(this.lang,this.anotherLang.lang)}`},langLabel(){return this.anotherLang.label},anotherLang(){const s=this.langConfigs.filter((s=>s.lang!==this.lang));return s.length?s[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const s=!this.showVersionPop,a=s?"add":"remove";document.body[`${a}EventListener`]("click",this.checkHideVersionPop),this.showVersionPop=s},checkHideVersionPop(s){this.$refs.version.contains(s.target)||(this.showVersionPop=!1)},onSwitchLang(s){this.$router.push(this.$route.path.replace(s.from,s.to))},onSwitchVersion(s){s.link&&(location.href=s.link)}}},[["render",function(s,a,t,n,e,l){const p=Xt("search-input");return cn(),hn("div",Nh,[fn("div",Fh,[fn("div",Lh,[fn("a",Rh,[fn("img",{src:t.config.logo},null,8,Bh),fn("span",null,j(t.config.title),1)]),fn("ul",Mh,[(cn(!0),hn(an,null,zn(t.config.links,((s,a)=>(cn(),hn("li",{key:a,class:"van-doc-header__top-nav-item"},[fn("a",{class:"van-doc-header__link",target:"_blank",href:s.url},[s.logo?(cn(),hn("img",{key:0,src:s.logo},null,8,Uh)):s.text?(cn(),hn("span",Vh,j(s.text),1)):_n("v-if",!0)],8,$h)])))),128)),t.versions?(cn(),hn("li",Hh,[fn("span",{class:"van-doc-header__cube van-doc-header__version",onClick:a[0]||(a[0]=(...s)=>l.toggleVersionPop&&l.toggleVersionPop(...s))},[xn(j(e.packageVersion)+" ",1),yn(Me,{name:"van-doc-dropdown"},{default:Da((()=>[e.showVersionPop?(cn(),hn("div",Wh,[(cn(!0),hn(an,null,zn(t.versions,((s,a)=>(cn(),hn("div",{key:a,class:"van-doc-header__version-pop-item",onClick:a=>l.onSwitchVersion(s)},j(s.label),9,Gh)))),128))])):_n("v-if",!0)])),_:1})])],512)):_n("v-if",!0),l.langLabel&&l.langLink?(cn(),hn("li",Kh,[fn("a",{class:"van-doc-header__cube",href:l.langLink},j(l.langLabel),9,Qh)])):_n("v-if",!0),l.searchConfig?(cn(),un(p,{key:2,lang:t.lang,"search-config":l.searchConfig},null,8,["lang","search-config"])):_n("v-if",!0)])])])])}]]),DocContent:el({name:"VanDocContent",computed:{currentPage(){const{path:s}=this.$route;return s?s.split("/").slice(-1)[0]:this.$route.name}}},[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g(["van-doc-content",`van-doc-content--${l.currentPage}`])},[Pn(s.$slots,"default")],2)}]]),DocContainer:el(Yh,[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":t.hasSimulator}])},[Pn(s.$slots,"default")],2)}]]),DocSimulator:el({name:"VanDocSimulator",props:{src:String},data:()=>({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}))}},[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g(["van-doc-simulator",{"van-doc-simulator-fixed":l.isFixed}])},[fn("iframe",{ref:"iframe",src:t.src,style:r(l.simulatorStyle),frameborder:"0"},null,12,Xh)],2)}]])},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:s}=this.config,a=s.reduce(((s,a)=>s.concat(a.items)),[]),t=this.$route.path.split("/").pop();let n;for(let e=0,l=a.length;e{switch(s.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next")}}))}}},Zh={class:"van-doc"};let su="zh-CN";function au(){return su}function tu(s){const a=localStorage.getItem("vant-cli-lang");su=a||(navigator.language&&-1!==navigator.language.indexOf("zh-")?"zh-CN":s||"en-US")}const nu={class:"app"};var eu=el({components:{VanDoc:el(Jh,[["render",function(s,a,t,n,e,l){const p=Xt("doc-header"),c=Xt("doc-nav"),o=Xt("doc-content"),d=Xt("doc-container"),r=Xt("doc-simulator");return cn(),hn("div",Zh,[yn(p,{lang:t.lang,config:t.config,versions:t.versions,"lang-configs":t.langConfigs,onSwitchVersion:a[0]||(a[0]=a=>s.$emit("switch-version",a))},null,8,["lang","config","versions","lang-configs"]),yn(c,{lang:t.lang,"nav-config":t.config.nav},null,8,["lang","nav-config"]),yn(d,{"has-simulator":t.hasSimulator},{default:Da((()=>[yn(o,null,{default:Da((()=>[Pn(s.$slots,"default")])),_:3})])),_:3},8,["has-simulator"]),t.hasSimulator?(cn(),un(r,{key:0,src:t.simulator},null,8,["src"])):_n("v-if",!0)])}]])},data:()=>({hasSimulator:!0}),computed:{simulator(){var s,a;if(null==(s=Th.site.simulator)?void 0:s.url)return null==(a=Th.site.simulator)?void 0:a.url;return`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:s}=this.$route.meta;return s||""},langConfigs(){const{locales:s={}}=Th.site;return Object.keys(s).map((a=>({lang:a,label:s[a].langLabel||""})))},config(){const{locales:s}=Th.site;return s?s[this.lang]:Th.site},versions:()=>Th.site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(s){var a;su=a=s,localStorage.setItem("vant-cli-lang",a),this.setTitleAndToogleSimulator()},config:{handler(s){s&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){this.$route.hash&&this.$nextTick((()=>{const s=document.querySelector(this.$route.hash);s&&s.scrollIntoView()}))},methods:{setTitleAndToogleSimulator(){let{title:s}=this.config;const a=this.config.nav.reduce(((s,a)=>[...s,...a.items]),[]).find((s=>s.path===this.$route.meta.name));a&&a.title?s=a.title+" - "+s:this.config.description&&(s+=` - ${this.config.description}`),document.title=s,this.hasSimulator=!(Th.site.hideSimulator||this.config.hideSimulator||a&&a.hideSimulator)}}},[["render",function(s,a,t,n,e,l){const p=Xt("router-view"),c=Xt("van-doc");return cn(),hn("div",nu,[l.config?(cn(),un(c,{key:0,lang:l.lang,config:l.config,versions:l.versions,simulator:l.simulator,"has-simulator":e.hasSimulator,"lang-configs":l.langConfigs},{default:Da((()=>[yn(p)])),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):_n("v-if",!0)])}]]);const lu={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape:unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){!function(s){const a=document.createElement("textarea");a.value=s,a.setAttribute("readonly",""),a.style.position="absolute",a.style.left="-9999px",document.body.appendChild(a);const t=document.getSelection();if(!t)return;const n=t.rangeCount>0&&t.getRangeAt(0);a.select(),document.execCommand("copy"),document.body.removeChild(a),n&&(t.removeAllRanges(),t.addRange(n))}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((()=>{this.copyStatus="ready"}),2e3)}}},pu={class:"demo-playground--code"},cu={class:"demo-playground--code--actions"},ou=(s=>(Oa="data-v-9efa7fdc",s=s(),Oa=null,s))((()=>fn("span",null,null,-1))),du=["data-status"],ru=["innerHTML"];var iu=el(lu,[["render",function(s,a,t,n,e,l){return cn(),hn("div",{class:g({"demo-playground":!t.inline,transform:t.transform})},[t.inline?Pn(s.$slots,"default",{key:0},void 0,!0):(cn(),hn(an,{key:1},[fn("div",{class:g(["demo-playground--previewer",{compact:t.compact}])},[Pn(s.$slots,"default",{},void 0,!0)],2),fn("div",pu,[fn("div",cu,[ou,fn("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":e.copyStatus,onClick:a[0]||(a[0]=(...s)=>l.copySourceCode&&l.copySourceCode(...s))},null,8,du),fn("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:a[1]||(a[1]=(...s)=>l.toogleSource&&l.toogleSource(...s))})]),Mt(fn("div",{innerHTML:l.unescape(t.codeSnippet),class:"demo-playground--code--content"},null,8,ru),[[Ze,e.showSource]])])],64))],2)}],["__scopeId","data-v-9efa7fdc"]]); -/*! - * vue-router v4.0.6 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */const hu="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,uu=s=>hu?Symbol(s):"_vr_"+s,gu=uu("rvlm"),ju=uu("rvd"),mu=uu("r"),vu=uu("rl"),bu=uu("rvl"),fu="undefined"!=typeof window;const yu=Object.assign;function qu(s,a){const t={};for(const n in a){const e=a[n];t[n]=Array.isArray(e)?e.map(s):s(e)}return t}let xu=()=>{};const wu=/\/$/;function _u(s,a,t="/"){let n,e={},l="",p="";const c=a.indexOf("?"),o=a.indexOf("#",c>-1?c:0);return c>-1&&(n=a.slice(0,c),l=a.slice(c+1,o>-1?o:a.length),e=s(l)),o>-1&&(n=n||a.slice(0,o),p=a.slice(o,a.length)),n=function(s,a){if(s.startsWith("/"))return s;if(!s)return a;const t=a.split("/"),n=s.split("/");let e,l,p=t.length-1;for(e=0;es===a[t])):1===s.length&&s[0]===a}var Iu,Ou,Eu,Du;function Tu(s){if(!s)if(fu){const a=document.querySelector("base");s=(s=a&&a.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else s="/";return"/"!==s[0]&&"#"!==s[0]&&(s="/"+s),s.replace(wu,"")}(Ou=Iu||(Iu={})).pop="pop",Ou.push="push",(Du=Eu||(Eu={})).back="back",Du.forward="forward",Du.unknown="";const Au=/^[^#]+#/;function Nu(s,a){return s.replace(Au,"#")+a}const Fu=()=>({left:window.pageXOffset,top:window.pageYOffset});function Lu(s){let a;if("el"in s){let t=s.el;const n="string"==typeof t&&t.startsWith("#"),e="string"==typeof t?n?document.getElementById(t.slice(1)):document.querySelector(t):t;if(!e)return;a=function(s,a){const t=document.documentElement.getBoundingClientRect(),n=s.getBoundingClientRect();return{behavior:a.behavior,left:n.left-t.left-(a.left||0),top:n.top-t.top-(a.top||0)}}(e,s)}else a=s;"scrollBehavior"in document.documentElement.style?window.scrollTo(a):window.scrollTo(null!=a.left?a.left:window.pageXOffset,null!=a.top?a.top:window.pageYOffset)}function Ru(s,a){return(history.state?history.state.position-a:-1)+s}const Bu=new Map;function Mu(s,a){const{pathname:t,search:n,hash:e}=a;if(s.indexOf("#")>-1){let s=e.slice(1);return"/"!==s[0]&&(s="/"+s),ku(s,"")}return ku(t,s)+n+e}function $u(s,a,t,n=!1,e=!1){return{back:s,current:a,forward:t,replaced:n,position:window.history.length,scroll:e?Fu():null}}function Uu(s){const{history:a,location:t}=window;let n={value:Mu(s,t)},e={value:a.state};function l(n,l,p){const c=s.indexOf("#"),o=c>-1?(t.host&&document.querySelector("base")?s:s.slice(c))+n:location.protocol+"//"+location.host+s+n;try{a[p?"replaceState":"pushState"](l,"",o),e.value=l}catch(d){console.error(d),t[p?"replace":"assign"](o)}}return e.value||l(n.value,{back:null,current:n.value,forward:null,position:a.length-1,replaced:!0,scroll:null},!0),{location:n,state:e,push:function(s,t){const p=yu({},e.value,a.state,{forward:s,scroll:Fu()});l(p.current,p,!0),l(s,yu({},$u(n.value,s,null),{position:p.position+1},t),!1),n.value=s},replace:function(s,t){l(s,yu({},a.state,$u(e.value.back,s,e.value.forward,!0),t,{position:e.value.position}),!0),n.value=s}}}function Vu(s){const a=Uu(s=Tu(s)),t=function(s,a,t,n){let e=[],l=[],p=null;const c=({state:l})=>{const c=Mu(s,location),o=t.value,d=a.value;let r=0;if(l){if(t.value=c,a.value=l,p&&p===o)return void(p=null);r=d?l.position-d.position:0}else n(c);e.forEach((s=>{s(t.value,o,{delta:r,type:Iu.pop,direction:r?r>0?Eu.forward:Eu.back:Eu.unknown})}))};function o(){const{history:s}=window;s.state&&s.replaceState(yu({},s.state,{scroll:Fu()}),"")}return window.addEventListener("popstate",c),window.addEventListener("beforeunload",o),{pauseListeners:function(){p=t.value},listen:function(s){e.push(s);const a=()=>{const a=e.indexOf(s);a>-1&&e.splice(a,1)};return l.push(a),a},destroy:function(){for(const s of l)s();l=[],window.removeEventListener("popstate",c),window.removeEventListener("beforeunload",o)}}}(s,a.state,a.location,a.replace);const n=yu({location:"",base:s,go:function(s,a=!0){a||t.pauseListeners(),history.go(s)},createHref:Nu.bind(null,s)},a,t);return Object.defineProperty(n,"location",{get:()=>a.location.value}),Object.defineProperty(n,"state",{get:()=>a.state.value}),n}function Hu(s){return(s=location.host?s||location.pathname+location.search:"").indexOf("#")<0&&(s+="#"),Vu(s)}function Wu(s){return"string"==typeof s||"symbol"==typeof s}const Gu={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Ku=uu("nf");var Qu,Yu;function Xu(s,a){return yu(new Error,{type:s,[Ku]:!0},a)}function Ju(s,a){return s instanceof Error&&Ku in s&&(null==a||!!(s.type&a))}(Yu=Qu||(Qu={}))[Yu.aborted=4]="aborted",Yu[Yu.cancelled=8]="cancelled",Yu[Yu.duplicated=16]="duplicated";const Zu={sensitive:!1,strict:!1,start:!0,end:!0},sg=/[.+*?^${}()[\]/\\]/g;function ag(s,a){let t=0;for(;ta.length?1===a.length&&80===a[0]?1:-1:0}function tg(s,a){let t=0;const n=s.score,e=a.score;for(;t1&&("*"===c||"+"===c)&&a(`A repeatable param (${d}) must be alone in its segment. eg: '/:ids+.`),l.push({type:1,value:d,regexp:r,repeatable:"*"===c||"+"===c,optional:"*"===c||"?"===c})):a("Invalid state to consume buffer"),d="")}function h(){d+=c}for(;o{l(h)}:xu}function l(s){if(Wu(s)){const a=n.get(s);a&&(n.delete(s),t.splice(t.indexOf(a),1),a.children.forEach(l),a.alias.forEach(l))}else{let a=t.indexOf(s);a>-1&&(t.splice(a,1),s.record.name&&n.delete(s.record.name),s.children.forEach(l),s.alias.forEach(l))}}function p(s){let a=0;for(;a=0;)a++;t.splice(a,0,s),s.record.name&&!og(s)&&n.set(s.record.name,s)}return a=rg({strict:!1,end:!0,sensitive:!1},a),s.forEach((s=>e(s))),{addRoute:e,resolve:function(s,a){let e,l,p,c={};if("name"in s&&s.name){if(e=n.get(s.name),!e)throw Xu(1,{location:s});p=e.record.name,c=yu(function(s,a){let t={};for(let n of a)n in s&&(t[n]=s[n]);return t}(a.params,e.keys.filter((s=>!s.optional)).map((s=>s.name))),s.params),l=e.stringify(c)}else if("path"in s)l=s.path,e=t.find((s=>s.re.test(l))),e&&(c=e.parse(l),p=e.record.name);else{if(e=a.name?n.get(a.name):t.find((s=>s.re.test(a.path))),!e)throw Xu(1,{location:s,currentLocation:a});p=e.record.name,c=yu({},a.params,s.params),l=e.stringify(c)}const o=[];let d=e;for(;d;)o.unshift(d.record),d=d.parent;return{name:p,path:l,params:c,matched:o,meta:dg(o)}},removeRoute:l,getRoutes:function(){return t},getRecordMatcher:function(s){return n.get(s)}}}function cg(s){const a={},t=s.props||!1;if("component"in s)a.default=t;else for(let n in s.components)a[n]="boolean"==typeof t?t:t[n];return a}function og(s){for(;s;){if(s.record.aliasOf)return!0;s=s.parent}return!1}function dg(s){return s.reduce(((s,a)=>yu(s,a.meta)),{})}function rg(s,a){let t={};for(let n in s)t[n]=n in a?a[n]:s[n];return t}const ig=/#/g,hg=/&/g,ug=/\//g,gg=/=/g,jg=/\?/g,mg=/\+/g,vg=/%5B/g,bg=/%5D/g,fg=/%5E/g,yg=/%60/g,qg=/%7B/g,xg=/%7C/g,wg=/%7D/g,_g=/%20/g;function kg(s){return encodeURI(""+s).replace(xg,"|").replace(vg,"[").replace(bg,"]")}function Sg(s){return kg(s).replace(mg,"%2B").replace(_g,"+").replace(ig,"%23").replace(hg,"%26").replace(yg,"`").replace(qg,"{").replace(wg,"}").replace(fg,"^")}function Cg(s){return function(s){return kg(s).replace(ig,"%23").replace(jg,"%3F")}(s).replace(ug,"%2F")}function zg(s){try{return decodeURIComponent(""+s)}catch(a){}return""+s}function Pg(s){const a={};if(""===s||"?"===s)return a;const t=("?"===s[0]?s.slice(1):s).split("&");for(let n=0;ns&&Sg(s))):[n&&Sg(n)];for(let s=0;snull==s?null:""+s)):null==n?n:""+n)}return a}function Eg(){let s=[];return{add:function(a){return s.push(a),()=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)}},list:()=>s,reset:function(){s=[]}}}function Dg(s,a,t,n,e){const l=n&&(n.enterCallbacks[e]=n.enterCallbacks[e]||[]);return()=>new Promise(((p,c)=>{const o=s=>{var o;!1===s?c(Xu(4,{from:t,to:a})):s instanceof Error?c(s):"string"==typeof(o=s)||o&&"object"==typeof o?c(Xu(2,{from:a,to:s})):(l&&n.enterCallbacks[e]===l&&"function"==typeof s&&l.push(s),p())},d=s.call(n&&n.instances[e],a,t,o);let r=Promise.resolve(d);s.length<3&&(r=r.then(o)),r.catch((s=>c(s)))}))}function Tg(s,a,t,n){const e=[];for(const p of s)for(const s in p.components){let c=p.components[s];if("beforeRouteEnter"===a||p.instances[s])if("object"==typeof(l=c)||"displayName"in l||"props"in l||"__vccOpts"in l){const l=(c.__vccOpts||c)[a];l&&e.push(Dg(l,t,n,p,s))}else{let l=c();l=l.catch(console.error),e.push((()=>l.then((e=>{if(!e)return Promise.reject(new Error(`Couldn't resolve component "${s}" at "${p.path}"`));const l=(c=e).__esModule||hu&&"Module"===c[Symbol.toStringTag]?e.default:e;var c;p.components[s]=l;const o=(l.__vccOpts||l)[a];return o&&Dg(o,t,n,p,s)()}))))}}var l;return e}function Ag(s){const a=Ra(mu),t=Ra(vu),n=Sa((()=>a.resolve(xa(s.to)))),e=Sa((()=>{let{matched:s}=n.value,{length:a}=s;const e=s[a-1];let l=t.matched;if(!e||!l.length)return-1;let p=l.findIndex(Su.bind(null,e));if(p>-1)return p;let c=Fg(s[a-2]);return a>1&&Fg(e)===c&&l[l.length-1].path!==c?l.findIndex(Su.bind(null,s[a-2])):p})),l=Sa((()=>e.value>-1&&function(s,a){for(let t in a){let n=a[t],e=s[t];if("string"==typeof n){if(n!==e)return!1}else if(!Array.isArray(e)||e.length!==n.length||n.some(((s,a)=>s!==e[a])))return!1}return!0}(t.params,n.value.params))),p=Sa((()=>e.value>-1&&e.value===t.matched.length-1&&Cu(t.params,n.value.params)));return{route:n,href:Sa((()=>n.value.href)),isActive:l,isExactActive:p,navigate:function(t={}){return function(s){if(s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)return;if(s.defaultPrevented)return;if(void 0!==s.button&&0!==s.button)return;if(s.currentTarget&&s.currentTarget.getAttribute){const a=s.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(a))return}s.preventDefault&&s.preventDefault();return!0}(t)?a[xa(s.replace)?"replace":"push"](xa(s.to)):Promise.resolve()}}}const Ng=Ka({name:"RouterLink",props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},setup(s,{slots:a}){const t=oa(Ag(s)),{options:n}=Ra(mu),e=Sa((()=>({[Lg(s.activeClass,n.linkActiveClass,"router-link-active")]:t.isActive,[Lg(s.exactActiveClass,n.linkExactActiveClass,"router-link-exact-active")]:t.isExactActive})));return()=>{const n=a.default&&a.default(t);return s.custom?n:xe("a",{"aria-current":t.isExactActive?s.ariaCurrentValue:null,href:t.href,onClick:t.navigate,class:e.value},n)}}});function Fg(s){return s?s.aliasOf?s.aliasOf.path:s.path:""}const Lg=(s,a,t)=>null!=s?s:null!=a?a:t;function Rg(s,a){if(!s)return null;const t=s(a);return 1===t.length?t[0]:t}const Bg=Ka({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},setup(s,{attrs:a,slots:t}){const n=Ra(bu),e=Sa((()=>s.route||n.value)),l=Ra(ju,0),p=Sa((()=>e.value.matched[l]));La(ju,l+1),La(gu,p),La(bu,e);const c=qa(o);var o;return ve((()=>[c.value,p.value,s.name]),(([s,a,t],[n,e,l])=>{a&&(a.instances[t]=s,e&&e!==a&&s&&s===n&&(a.leaveGuards.size||(a.leaveGuards=e.leaveGuards),a.updateGuards.size||(a.updateGuards=e.updateGuards))),!s||!a||e&&Su(a,e)&&n||(a.enterCallbacks[t]||[]).forEach((a=>a(s)))}),{flush:"post"}),()=>{const n=e.value,l=p.value,o=l&&l.components[s.name],d=s.name;if(!o)return Rg(t.default,{Component:o,route:n});const r=l.props[s.name],i=r?!0===r?n.params:"function"==typeof r?r(n):r:null,h=xe(o,yu({},i,a,{onVnodeUnmounted:s=>{s.component.isUnmounted&&(l.instances[d]=null)},ref:c}));return Rg(t.default,{Component:h,route:n})||h}}});function Mg(s){const a=pg(s.routes,s);let t=s.parseQuery||Pg,n=s.stringifyQuery||Ig,e=s.history;const l=Eg(),p=Eg(),c=Eg(),o=qa(Gu,!0);let d=Gu;fu&&s.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const r=qu.bind(null,(s=>""+s)),i=qu.bind(null,Cg),h=qu.bind(null,zg);function u(s,l){if(l=yu({},l||o.value),"string"==typeof s){let n=_u(t,s,l.path),p=a.resolve({path:n.path},l),c=e.createHref(n.fullPath);return yu(n,p,{params:h(p.params),hash:zg(n.hash),redirectedFrom:void 0,href:c})}let p;"path"in s?p=yu({},s,{path:_u(t,s.path,l.path).path}):(p=yu({},s,{params:i(s.params)}),l.params=i(l.params));let c=a.resolve(p,l);const d=s.hash||"";c.params=r(h(c.params));const u=function(s,a){let t=a.query?s(a.query):"";return a.path+(t&&"?")+t+(a.hash||"")}(n,yu({},s,{hash:(g=d,kg(g).replace(qg,"{").replace(wg,"}").replace(fg,"^")),path:c.path}));var g;let j=e.createHref(u);return yu({fullPath:u,hash:d,query:n===Ig?Og(s.query):s.query},c,{redirectedFrom:void 0,href:j})}function g(s){return"string"==typeof s?_u(t,s,o.value.path):yu({},s)}function j(s,a){if(d!==s)return Xu(8,{from:a,to:s})}function m(s){return b(s)}function v(s){const a=s.matched[s.matched.length-1];if(a&&a.redirect){const{redirect:t}=a;let n="function"==typeof t?t(s):t;return"string"==typeof n&&(n=n.indexOf("?")>-1||n.indexOf("#")>-1?n=g(n):{path:n}),yu({query:s.query,hash:s.hash,params:s.params},n)}}function b(s,a){const t=d=u(s),e=o.value,l=s.state,p=s.force,c=!0===s.replace,r=v(t);if(r)return b(yu(g(r),{state:l,force:p,replace:c}),a||t);const i=t;let h;return i.redirectedFrom=a,!p&&function(s,a,t){let n=a.matched.length-1,e=t.matched.length-1;return n>-1&&n===e&&Su(a.matched[n],t.matched[e])&&Cu(a.params,t.params)&&s(a.query)===s(t.query)&&a.hash===t.hash}(n,e,t)&&(h=Xu(16,{to:i,from:e}),I(e,e,!0,!1)),(h?Promise.resolve(h):y(i,e)).catch((s=>Ju(s)?s:z(s))).then((s=>{if(s){if(Ju(s,2))return b(yu(g(s.to),{state:l,force:p,replace:c}),a||i)}else s=x(i,e,!0,c,l);return q(i,e,s),s}))}function f(s,a){const t=j(s,a);return t?Promise.reject(t):Promise.resolve()}function y(s,a){let t;const[n,e,c]=function(s,a){const t=[],n=[],e=[],l=Math.max(a.matched.length,s.matched.length);for(let p=0;pSu(s,l)))?n.push(l):t.push(l));const c=s.matched[p];c&&(a.matched.find((s=>Su(s,c)))||e.push(c))}return[t,n,e]}(s,a);t=Tg(n.reverse(),"beforeRouteLeave",s,a);for(const l of n)l.leaveGuards.forEach((n=>{t.push(Dg(n,s,a))}));const o=f.bind(null,s,a);return t.push(o),$g(t).then((()=>{t=[];for(const n of l.list())t.push(Dg(n,s,a));return t.push(o),$g(t)})).then((()=>{t=Tg(e,"beforeRouteUpdate",s,a);for(const n of e)n.updateGuards.forEach((n=>{t.push(Dg(n,s,a))}));return t.push(o),$g(t)})).then((()=>{t=[];for(const n of s.matched)if(n.beforeEnter&&a.matched.indexOf(n)<0)if(Array.isArray(n.beforeEnter))for(const e of n.beforeEnter)t.push(Dg(e,s,a));else t.push(Dg(n.beforeEnter,s,a));return t.push(o),$g(t)})).then((()=>(s.matched.forEach((s=>s.enterCallbacks={})),t=Tg(c,"beforeRouteEnter",s,a),t.push(o),$g(t)))).then((()=>{t=[];for(const n of p.list())t.push(Dg(n,s,a));return t.push(o),$g(t)})).catch((s=>Ju(s,8)?s:Promise.reject(s)))}function q(s,a,t){for(const n of c.list())n(s,a,t)}function x(s,a,t,n,l){const p=j(s,a);if(p)return p;const c=a===Gu,d=fu?history.state:{};t&&(n||c?e.replace(s.fullPath,yu({scroll:c&&d&&d.scroll},l)):e.push(s.fullPath,l)),o.value=s,I(s,a,t,c),P()}let w;function _(){w=e.listen(((s,a,t)=>{let n=u(s);const l=v(n);if(l)return void b(yu(l,{replace:!0}),n).catch(xu);d=n;const p=o.value;var c,r;fu&&(c=Ru(p.fullPath,t.delta),r=Fu(),Bu.set(c,r)),y(n,p).catch((s=>Ju(s,12)?s:Ju(s,2)?(b(s.to,n).catch(xu),Promise.reject()):(t.delta&&e.go(-t.delta,!1),z(s)))).then((s=>{(s=s||x(n,p,!1))&&t.delta&&e.go(-t.delta,!1),q(n,p,s)})).catch(xu)}))}let k,S=Eg(),C=Eg();function z(s){return P(s),C.list().forEach((a=>a(s))),Promise.reject(s)}function P(s){k||(k=!0,_(),S.list().forEach((([a,t])=>s?t(s):a())),S.reset())}function I(a,t,n,e){const{scrollBehavior:l}=s;if(!fu||!l)return Promise.resolve();let p=!n&&function(s){const a=Bu.get(s);return Bu.delete(s),a}(Ru(a.fullPath,0))||(e||!n)&&history.state&&history.state.scroll||null;return oe().then((()=>l(a,t,p))).then((s=>s&&Lu(s))).catch(z)}const O=s=>e.go(s);let E;const D=new Set;return{currentRoute:o,addRoute:function(s,t){let n,e;return Wu(s)?(n=a.getRecordMatcher(s),e=t):e=s,a.addRoute(e,n)},removeRoute:function(s){let t=a.getRecordMatcher(s);t&&a.removeRoute(t)},hasRoute:function(s){return!!a.getRecordMatcher(s)},getRoutes:function(){return a.getRoutes().map((s=>s.record))},resolve:u,options:s,push:m,replace:function(s){return m(yu(g(s),{replace:!0}))},go:O,back:()=>O(-1),forward:()=>O(1),beforeEach:l.add,beforeResolve:p.add,afterEach:c.add,onError:C.add,isReady:function(){return k&&o.value!==Gu?Promise.resolve():new Promise(((s,a)=>{S.add([s,a])}))},install(s){s.component("RouterLink",Ng),s.component("RouterView",Bg),s.config.globalProperties.$router=this,Object.defineProperty(s.config.globalProperties,"$route",{get:()=>xa(o)}),fu&&!E&&o.value===Gu&&(E=!0,m(e.location).catch((s=>{})));const a={};for(let n in Gu)a[n]=Sa((()=>o.value[n]));s.provide(mu,this),s.provide(vu,oa(a)),s.provide(bu,o);let t=s.unmount;D.add(s),s.unmount=function(){D.delete(s),D.size<1&&(w(),o.value=Gu,E=!1,k=!1),t()}}}}function $g(s){return s.reduce(((s,a)=>s.then((()=>a()))),Promise.resolve())}const Ug=navigator.userAgent.toLowerCase(),Vg=/ios|iphone|ipod|ipad|android/.test(Ug);function Hg(s,a="-"){return s.replace(/([a-z\d])([A-Z])/g,"$1"+a+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+a+"$2").toLowerCase()}let Wg=[],Gg=!1;function Kg(){var s,a;const t=window.vueRouter,{path:n}=t.currentRoute.value;return(null==(s=Th.site.simulator)?void 0:s.routeMapper)?null==(a=Th.site.simulator)?void 0:a.routeMapper(n):n}function Qg(){window.top.postMessage({type:"replacePath",value:Kg()},"*")}function Yg(){const s=document.querySelector("iframe");var a;s&&(a=()=>{s.contentWindow.postMessage({type:"replacePath",value:Kg()},"*")},Gg?a():Wg.push(a))}function Xg(s){window.addEventListener("message",(a=>{var t,n;if("replacePath"!==(null==(t=a.data)?void 0:t.type))return;const e=(null==(n=a.data)?void 0:n.value)||"";s.currentRoute.value.path!==e&&s.replace(e).catch((()=>{}))}))}window.top===window?window.addEventListener("message",(s=>{"iframeReady"===s.data.type&&(Gg=!0,Wg.forEach((s=>s())),Wg=[])})):window.top.postMessage({type:"iframeReady"},"*"),Vg&&location.replace("mobile.html"+location.hash);const{locales:Jg,defaultLang:Zg}=Th.site;function sj(s){const a=s.path.split("/")[1];return-1!==Object.keys(Jg).indexOf(a)?a:au()}tu(Zg);const aj=Mg({history:Hu(),routes:function(){const s=[],a=Object.keys(Ah);return Jg?s.push({name:"notFound",path:"/:path(.*)+",redirect:s=>({name:sj(s)})}):s.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),a.forEach((a=>{const{component:t,lang:n}=function(s){if(-1!==s.indexOf("_")){const a=s.split("_");return{component:`${Hg(a.shift())}`,lang:a.join("-")}}return{component:`${Hg(s)}`,lang:""}}(a);"home"===t&&function(a,t){s.push({name:t||"home",path:`/${t||""}`,component:a,meta:{lang:t}})}(Ah[a],n),n?s.push({name:`${n}/${t}`,path:`/${n}/${t}`,component:Ah[a],meta:{lang:n,name:t}}):s.push({name:`${t}`,path:`/${t}`,component:Ah[a],meta:{name:t}})})),s}(),scrollBehavior:s=>s.hash?{el:s.hash}:{x:0,y:0}});aj.afterEach((()=>{oe(Yg)})),!1!==(null==(s=Th.site.simulator)?void 0:s.syncPathFromSimulator)&&Xg(aj),window.vueRouter=aj,window.app=nl(eu).use(aj).component(iu.name,iu),setTimeout((()=>{window.app.mount("#app")}),0);const tj={name:"DemoBlock",props:{card:Boolean,title:String}},nj={class:"van-doc-demo-block"},ej={key:0,class:"van-doc-demo-block__title"},lj={key:1,class:"van-doc-demo-block__card"};var pj=el(tj,[["render",function(s,a,t,n,e,l){return cn(),hn("div",nj,[t.title?(cn(),hn("h2",ej,j(t.title),1)):_n("v-if",!0),t.card?(cn(),hn("div",lj,[Pn(s.$slots,"default")])):Pn(s.$slots,"default",{key:2})])}]]);var cj=el({name:"DemoSection",computed:{demoName(){const{meta:s}=this.$route||{};return s&&s.name?`demo-${Hg(s.name)}`:""}}},[["render",function(s,a,t,n,e,l){return cn(),hn("section",{class:g(["van-doc-demo-section",l.demoName])},[Pn(s.$slots,"default")],2)}]]);const oj={},dj={versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[]},rj={},ij={viewBox:"0 0 1024 1024"},hj=[fn("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),fn("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)];const uj={class:"demo-home-nav"},gj={class:"demo-home-nav__title"},jj={class:"demo-home-nav__group"};const mj={class:"demo-home"},vj=["src"],bj={key:0,class:"demo-home__desc"};var fj=el({components:{DemoHomeNav:el({components:{ArrowRight:el(rj,[["render",function(s,a){return cn(),hn("svg",ij,hj)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(s,a,t,n,e,l){const p=Xt("arrow-right"),c=Xt("router-link");return cn(),hn("div",uj,[fn("div",gj,j(t.group.title),1),fn("div",jj,[(cn(!0),hn(an,null,zn(t.group.items,(s=>(cn(),un(c,{class:"demo-home-nav__block",key:s.path,to:`${l.base}/${s.path}`},{default:Da((()=>[xn(j(s.title)+" ",1),yn(p,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:s}=this.$route.meta;return s},config(){const{locales:s}=dj;return s?s[this.lang]:dj},smallTitle(){return this.config.title.length>=8}}},[["render",function(s,a,t,n,e,l){const p=Xt("demo-home-nav");return cn(),hn("div",mj,[fn("h1",{class:g(["demo-home__title",{"demo-home__title--small":l.smallTitle}])},[fn("img",{src:l.config.logo},null,8,vj),fn("span",null,j(l.config.title),1)],2),l.config.description?(cn(),hn("h2",bj,j(l.config.description),1)):_n("v-if",!0),(cn(!0),hn(an,null,zn(l.config.nav,((s,a)=>(cn(),un(p,{key:a,lang:l.lang,group:s},null,8,["lang","group"])))),128))])}]]);const{locales:yj,defaultLang:qj}=dj;function xj(s){const a=s.path.split("/")[1];return-1!==Object.keys(yj).indexOf(a)?a:au()}tu(qj);const wj=Mg({history:Hu(),routes:function(){const s=[],a=Object.keys(oj),t=yj?Object.keys(yj):[];return t.length?(s.push({name:"NotFound",path:"/:path(.*)+",redirect:s=>({name:xj(s)})}),t.forEach((a=>{s.push({name:a,path:`/${a}`,component:fj,meta:{lang:a}})}))):(s.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),s.push({name:"home",path:"/",component:fj})),a.forEach((a=>{const n=Hg(a);t.length?t.forEach((t=>{s.push({name:`${t}/${n}`,path:`/${t}/${n}`,component:oj[a],meta:{name:a,lang:t}})})):s.push({name:n,path:`/${n}`,component:oj[a],meta:{name:a}})})),s}(),scrollBehavior:(s,a,t)=>t||{x:0,y:0}});ve(wj.currentRoute,(()=>{wj.currentRoute.value.redirectedFrom||oe(Qg)})),Xg(wj),window.vueRouter=wj;const _j={class:"demo-nav"},kj={class:"demo-nav__title"},Sj=["d"];var Cj=el({components:{DemoNav:el({data:()=>({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:s}=this.$route.meta||{};return s?s.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},[["render",function(s,a,t,n,e,l){return Mt((cn(),hn("div",_j,[fn("div",kj,j(l.title),1),(cn(),hn("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:a[0]||(a[0]=(...s)=>l.onBack&&l.onBack(...s))},[fn("path",{fill:"#969799","fill-rule":"evenodd",d:e.path},null,8,Sj)]))],512)),[[Ze,l.title]])}]])}},[["render",function(s,a,t,n,e,l){const p=Xt("demo-nav"),c=Xt("demo-section"),o=Xt("router-view");return cn(),hn(an,null,[yn(p),yn(o,null,{default:Da((({Component:s})=>[(cn(),un(Xa,null,[yn(c,null,{default:Da((()=>{return[(cn(),un((a=s,E(a)?Zt("components",a,!1)||a:a||Jt)))];var a})),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var s,a="ontouchstart"in window;document.createTouch||(document.createTouch=function(s,a,n,e,l,p,c){return new t(a,n,{pageX:e,pageY:l,screenX:p,screenY:c,clientX:e-window.pageXOffset,clientY:l-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var s=e(),a=0;a{window.app.mount("#app")}),0); diff --git a/vite/assets/main.6d70fb31.js b/vite/assets/main.6d70fb31.js deleted file mode 100644 index e6b10d33..00000000 --- a/vite/assets/main.6d70fb31.js +++ /dev/null @@ -1,8 +0,0 @@ -var s,a=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,e=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,p=(s,t,n)=>t in s?a(s,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):s[t]=n;function o(s,a){const t=Object.create(null),n=s.split(",");for(let e=0;e!!t[s.toLowerCase()]:s=>!!t[s]}!function(){const s=document.createElement("link").relList;if(!(s&&s.supports&&s.supports("modulepreload"))){for(const s of document.querySelectorAll('link[rel="modulepreload"]'))a(s);new MutationObserver((s=>{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();const d=o("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function r(s){return!!s||""===s}function i(s){if(P(s)){const a={};for(let t=0;t{if(s){const t=s.split(u);t.length>1&&(a[t[0].trim()]=t[1].trim())}})),a}function j(s){let a="";if(D(s))a=s;else if(P(s))for(let t=0;tnull==s?"":P(s)||T(s)&&(s.toString===F||!I(s.toString))?JSON.stringify(s,v,2):String(s),v=(s,a)=>a&&a.__v_isRef?v(s,a.value):O(a)?{[`Map(${a.size})`]:[...a.entries()].reduce(((s,[a,t])=>(s[`${a} =>`]=t,s)),{})}:E(a)?{[`Set(${a.size})`]:[...a.values()]}:!T(a)||P(a)||L(a)?a:String(a),b={},f=[],y=()=>{},q=()=>!1,x=/^on[^a-z]/,w=s=>x.test(s),_=s=>s.startsWith("onUpdate:"),k=Object.assign,S=(s,a)=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)},z=Object.prototype.hasOwnProperty,C=(s,a)=>z.call(s,a),P=Array.isArray,O=s=>"[object Map]"===R(s),E=s=>"[object Set]"===R(s),I=s=>"function"==typeof s,D=s=>"string"==typeof s,A=s=>"symbol"==typeof s,T=s=>null!==s&&"object"==typeof s,N=s=>T(s)&&I(s.then)&&I(s.catch),F=Object.prototype.toString,R=s=>F.call(s),L=s=>"[object Object]"===R(s),B=s=>D(s)&&"NaN"!==s&&"-"!==s[0]&&""+parseInt(s,10)===s,M=o(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),$=s=>{const a=Object.create(null);return t=>a[t]||(a[t]=s(t))},U=/-(\w)/g,V=$((s=>s.replace(U,((s,a)=>a?a.toUpperCase():"")))),H=/\B([A-Z])/g,W=$((s=>s.replace(H,"-$1").toLowerCase())),G=$((s=>s.charAt(0).toUpperCase()+s.slice(1))),K=$((s=>s?`on${G(s)}`:"")),J=(s,a)=>!Object.is(s,a),Y=(s,a)=>{for(let t=0;t{Object.defineProperty(s,a,{configurable:!0,enumerable:!1,value:t})},Q=s=>{const a=parseFloat(s);return isNaN(a)?s:a};let Z;let ss;const as=[];class ts{constructor(s=!1){this.active=!0,this.effects=[],this.cleanups=[],!s&&ss&&(this.parent=ss,this.index=(ss.scopes||(ss.scopes=[])).push(this)-1)}run(s){if(this.active)try{return this.on(),s()}finally{this.off()}}on(){this.active&&(as.push(this),ss=this)}off(){this.active&&(as.pop(),ss=as[as.length-1])}stop(s){if(this.active){if(this.effects.forEach((s=>s.stop())),this.cleanups.forEach((s=>s())),this.scopes&&this.scopes.forEach((s=>s.stop(!0))),this.parent&&!s){const s=this.parent.scopes.pop();s&&s!==this&&(this.parent.scopes[this.index]=s,s.index=this.index)}this.active=!1}}}const ns=s=>{const a=new Set(s);return a.w=0,a.n=0,a},es=s=>(s.w&os)>0,ls=s=>(s.n&os)>0,cs=new WeakMap;let ps=0,os=1;const ds=[];let rs;const is=Symbol(""),hs=Symbol("");class us{constructor(s,a=null,t){this.fn=s,this.scheduler=a,this.active=!0,this.deps=[],function(s,a){(a=a||ss)&&a.active&&a.effects.push(s)}(this,t)}run(){if(!this.active)return this.fn();if(!ds.includes(this))try{return ds.push(rs=this),ms.push(js),js=!0,os=1<<++ps,ps<=30?(({deps:s})=>{if(s.length)for(let a=0;a{const{deps:a}=s;if(a.length){let t=0;for(let n=0;n0?ds[s-1]:void 0}}stop(){this.active&&(gs(this),this.onStop&&this.onStop(),this.active=!1)}}function gs(s){const{deps:a}=s;if(a.length){for(let t=0;t{("length"===a||a>=n)&&p.push(s)}));else switch(void 0!==t&&p.push(c.get(t)),a){case"add":P(s)?B(t)&&p.push(c.get("length")):(p.push(c.get(is)),O(s)&&p.push(c.get(hs)));break;case"delete":P(s)||(p.push(c.get(is)),O(s)&&p.push(c.get(hs)));break;case"set":O(s)&&p.push(c.get(is))}if(1===p.length)p[0]&&ws(p[0]);else{const s=[];for(const a of p)a&&s.push(...a);ws(ns(s))}}function ws(s,a){for(const t of P(s)?s:[...s])(t!==rs||t.allowRecurse)&&(t.scheduler?t.scheduler():t.run())}const _s=o("__proto__,__v_isRef,__isVue"),ks=new Set(Object.getOwnPropertyNames(Symbol).map((s=>Symbol[s])).filter(A)),Ss=Es(),zs=Es(!1,!0),Cs=Es(!0),Ps=Os();function Os(){const s={};return["includes","indexOf","lastIndexOf"].forEach((a=>{s[a]=function(...s){const t=ga(this);for(let a=0,e=this.length;a{s[a]=function(...s){vs();const t=ga(this)[a].apply(this,s);return bs(),t}})),s}function Es(s=!1,a=!1){return function(t,n,e){if("__v_isReactive"===n)return!s;if("__v_isReadonly"===n)return s;if("__v_raw"===n&&e===(s?a?ca:la:a?ea:na).get(t))return t;const l=P(t);if(!s&&l&&C(Ps,n))return Reflect.get(Ps,n,e);const c=Reflect.get(t,n,e);if(A(n)?ks.has(n):_s(n))return c;if(s||fs(t,0,n),a)return c;if(ya(c)){return!l||!B(n)?c.value:c}return T(c)?s?da(c):oa(c):c}}function Is(s=!1){return function(a,t,n,e){let l=a[t];if(!s&&(n=ga(n),l=ga(l),!P(a)&&ya(l)&&!ya(n)))return l.value=n,!0;const c=P(a)&&B(t)?Number(t)!0,deleteProperty:(s,a)=>!0},Ts=k({},Ds,{get:zs,set:Is(!0)}),Ns=s=>s,Fs=s=>Reflect.getPrototypeOf(s);function Rs(s,a,t=!1,n=!1){const e=ga(s=s.__v_raw),l=ga(a);a!==l&&!t&&fs(e,0,a),!t&&fs(e,0,l);const{has:c}=Fs(e),p=n?Ns:t?va:ma;return c.call(e,a)?p(s.get(a)):c.call(e,l)?p(s.get(l)):void(s!==e&&s.get(a))}function Ls(s,a=!1){const t=this.__v_raw,n=ga(t),e=ga(s);return s!==e&&!a&&fs(n,0,s),!a&&fs(n,0,e),s===e?t.has(s):t.has(s)||t.has(e)}function Bs(s,a=!1){return s=s.__v_raw,!a&&fs(ga(s),0,is),Reflect.get(s,"size",s)}function Ms(s){s=ga(s);const a=ga(this);return Fs(a).has.call(a,s)||(a.add(s),xs(a,"add",s,s)),this}function $s(s,a){a=ga(a);const t=ga(this),{has:n,get:e}=Fs(t);let l=n.call(t,s);l||(s=ga(s),l=n.call(t,s));const c=e.call(t,s);return t.set(s,a),l?J(a,c)&&xs(t,"set",s,a):xs(t,"add",s,a),this}function Us(s){const a=ga(this),{has:t,get:n}=Fs(a);let e=t.call(a,s);e||(s=ga(s),e=t.call(a,s)),n&&n.call(a,s);const l=a.delete(s);return e&&xs(a,"delete",s,void 0),l}function Vs(){const s=ga(this),a=0!==s.size,t=s.clear();return a&&xs(s,"clear",void 0,void 0),t}function Hs(s,a){return function(t,n){const e=this,l=e.__v_raw,c=ga(l),p=a?Ns:s?va:ma;return!s&&fs(c,0,is),l.forEach(((s,a)=>t.call(n,p(s),p(a),e)))}}function Ws(s,a,t){return function(...n){const e=this.__v_raw,l=ga(e),c=O(l),p="entries"===s||s===Symbol.iterator&&c,o="keys"===s&&c,d=e[s](...n),r=t?Ns:a?va:ma;return!a&&fs(l,0,o?hs:is),{next(){const{value:s,done:a}=d.next();return a?{value:s,done:a}:{value:p?[r(s[0]),r(s[1])]:r(s),done:a}},[Symbol.iterator](){return this}}}}function Gs(s){return function(...a){return"delete"!==s&&this}}function Ks(){const s={get(s){return Rs(this,s)},get size(){return Bs(this)},has:Ls,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!1)},a={get(s){return Rs(this,s,!1,!0)},get size(){return Bs(this)},has:Ls,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!0)},t={get(s){return Rs(this,s,!0)},get size(){return Bs(this,!0)},has(s){return Ls.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!1)},n={get(s){return Rs(this,s,!0,!0)},get size(){return Bs(this,!0)},has(s){return Ls.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((e=>{s[e]=Ws(e,!1,!1),t[e]=Ws(e,!0,!1),a[e]=Ws(e,!1,!0),n[e]=Ws(e,!0,!0)})),[s,t,a,n]}const[Js,Ys,Xs,Qs]=Ks();function Zs(s,a){const t=a?s?Qs:Xs:s?Ys:Js;return(a,n,e)=>"__v_isReactive"===n?!s:"__v_isReadonly"===n?s:"__v_raw"===n?a:Reflect.get(C(t,n)&&n in a?t:a,n,e)}const sa={get:Zs(!1,!1)},aa={get:Zs(!1,!0)},ta={get:Zs(!0,!1)},na=new WeakMap,ea=new WeakMap,la=new WeakMap,ca=new WeakMap;function pa(s){return s.__v_skip||!Object.isExtensible(s)?0:function(s){switch(s){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((s=>R(s).slice(8,-1))(s))}function oa(s){return s&&s.__v_isReadonly?s:ra(s,!1,Ds,sa,na)}function da(s){return ra(s,!0,As,ta,la)}function ra(s,a,t,n,e){if(!T(s))return s;if(s.__v_raw&&(!a||!s.__v_isReactive))return s;const l=e.get(s);if(l)return l;const c=pa(s);if(0===c)return s;const p=new Proxy(s,2===c?n:t);return e.set(s,p),p}function ia(s){return ha(s)?ia(s.__v_raw):!(!s||!s.__v_isReactive)}function ha(s){return!(!s||!s.__v_isReadonly)}function ua(s){return ia(s)||ha(s)}function ga(s){const a=s&&s.__v_raw;return a?ga(a):s}function ja(s){return X(s,"__v_skip",!0),s}const ma=s=>T(s)?oa(s):s,va=s=>T(s)?da(s):s;function ba(s){ys()&&((s=ga(s)).dep||(s.dep=ns()),qs(s.dep))}function fa(s,a){(s=ga(s)).dep&&ws(s.dep)}function ya(s){return Boolean(s&&!0===s.__v_isRef)}function qa(s,a){return ya(s)?s:new xa(s,a)}class xa{constructor(s,a){this._shallow=a,this.dep=void 0,this.__v_isRef=!0,this._rawValue=a?s:ga(s),this._value=a?s:ma(s)}get value(){return ba(this),this._value}set value(s){s=this._shallow?s:ga(s),J(s,this._rawValue)&&(this._rawValue=s,this._value=this._shallow?s:ma(s),fa(this))}}function wa(s){return ya(s)?s.value:s}const _a={get:(s,a,t)=>wa(Reflect.get(s,a,t)),set:(s,a,t,n)=>{const e=s[a];return ya(e)&&!ya(t)?(e.value=t,!0):Reflect.set(s,a,t,n)}};function ka(s){return ia(s)?s:new Proxy(s,_a)}class Sa{constructor(s,a,t){this._setter=a,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new us(s,(()=>{this._dirty||(this._dirty=!0,fa(this))})),this.__v_isReadonly=t}get value(){const s=ga(this);return ba(s),s._dirty&&(s._dirty=!1,s._value=s.effect.run()),s._value}set value(s){this._setter(s)}}function za(s,a){let t,n;const e=I(s);e?(t=s,n=y):(t=s.get,n=s.set);return new Sa(t,n,e||!n)}function Ca(s,a,...t){const n=s.vnode.props||b;let e=t;const l=a.startsWith("update:"),c=l&&a.slice(7);if(c&&c in n){const s=`${"modelValue"===c?"model":c}Modifiers`,{number:a,trim:l}=n[s]||b;l?e=t.map((s=>s.trim())):a&&(e=t.map(Q))}let p,o=n[p=K(a)]||n[p=K(V(a))];!o&&l&&(o=n[p=K(W(a))]),o&&Kn(o,s,6,e);const d=n[p+"Once"];if(d){if(s.emitted){if(s.emitted[p])return}else s.emitted={};s.emitted[p]=!0,Kn(d,s,6,e)}}function Pa(s,a,t=!1){const n=a.emitsCache,e=n.get(s);if(void 0!==e)return e;const l=s.emits;let c={},p=!1;if(!I(s)){const n=s=>{const t=Pa(s,a,!0);t&&(p=!0,k(c,t))};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}return l||p?(P(l)?l.forEach((s=>c[s]=null)):k(c,l),n.set(s,c),c):(n.set(s,null),null)}function Oa(s,a){return!(!s||!w(a))&&(a=a.slice(2).replace(/Once$/,""),C(s,a[0].toLowerCase()+a.slice(1))||C(s,W(a))||C(s,a))}Promise.resolve();let Ea=null,Ia=null;function Da(s){const a=Ea;return Ea=s,Ia=s&&s.type.__scopeId||null,a}function Aa(s,a=Ea,t){if(!a)return s;if(s._n)return s;const n=(...t)=>{n._d&&rn(-1);const e=Da(a),l=s(...t);return Da(e),n._d&&rn(1),l};return n._n=!0,n._c=!0,n._d=!0,n}function Ta(s){const{type:a,vnode:t,proxy:n,withProxy:e,props:l,propsOptions:[c],slots:p,attrs:o,emit:d,render:r,renderCache:i,data:h,setupState:u,ctx:g,inheritAttrs:j}=s;let m,v;const b=Da(s);try{if(4&t.shapeFlag){const s=e||n;m=Sn(r.call(s,s,i,l,u,h,g)),v=o}else{const s=a;0,m=Sn(s.length>1?s(l,{attrs:o,slots:p,emit:d}):s(l,null)),v=a.props?o:Na(o)}}catch(y){cn.length=0,Jn(y,s,1),m=qn(en)}let f=m;if(v&&!1!==j){const s=Object.keys(v),{shapeFlag:a}=f;s.length&&7&a&&(c&&s.some(_)&&(v=Fa(v,c)),f=xn(f,v))}return t.dirs&&(f.dirs=f.dirs?f.dirs.concat(t.dirs):t.dirs),t.transition&&(f.transition=t.transition),m=f,Da(b),m}const Na=s=>{let a;for(const t in s)("class"===t||"style"===t||w(t))&&((a||(a={}))[t]=s[t]);return a},Fa=(s,a)=>{const t={};for(const n in s)_(n)&&n.slice(9)in a||(t[n]=s[n]);return t};function Ra(s,a,t){const n=Object.keys(a);if(n.length!==Object.keys(s).length)return!0;for(let e=0;e1)return t&&I(a)?a.call(n.proxy):a}}const Ma=[Function,Array],$a={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Ma,onEnter:Ma,onAfterEnter:Ma,onEnterCancelled:Ma,onBeforeLeave:Ma,onLeave:Ma,onAfterLeave:Ma,onLeaveCancelled:Ma,onBeforeAppear:Ma,onAppear:Ma,onAfterAppear:Ma,onAppearCancelled:Ma},setup(s,{slots:a}){const t=Rn(),n=function(){const s={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return dt((()=>{s.isMounted=!0})),ht((()=>{s.isUnmounting=!0})),s}();let e;return()=>{const l=a.default&&Ka(a.default(),!0);if(!l||!l.length)return;const c=ga(s),{mode:p}=c,o=l[0];if(n.isLeaving)return Ha(o);const d=Wa(o);if(!d)return Ha(o);const r=Va(d,c,n,t);Ga(d,r);const i=t.subTree,h=i&&Wa(i);let u=!1;const{getTransitionKey:g}=d.type;if(g){const s=g();void 0===e?e=s:s!==e&&(e=s,u=!0)}if(h&&h.type!==en&&(!mn(d,h)||u)){const s=Va(h,c,n,t);if(Ga(h,s),"out-in"===p)return n.isLeaving=!0,s.afterLeave=()=>{n.isLeaving=!1,t.update()},Ha(o);"in-out"===p&&d.type!==en&&(s.delayLeave=(s,a,t)=>{Ua(n,h)[String(h.key)]=h,s._leaveCb=()=>{a(),s._leaveCb=void 0,delete r.delayedLeave},r.delayedLeave=t})}return o}}};function Ua(s,a){const{leavingVNodes:t}=s;let n=t.get(a.type);return n||(n=Object.create(null),t.set(a.type,n)),n}function Va(s,a,t,n){const{appear:e,mode:l,persisted:c=!1,onBeforeEnter:p,onEnter:o,onAfterEnter:d,onEnterCancelled:r,onBeforeLeave:i,onLeave:h,onAfterLeave:u,onLeaveCancelled:g,onBeforeAppear:j,onAppear:m,onAfterAppear:v,onAppearCancelled:b}=a,f=String(s.key),y=Ua(t,s),q=(s,a)=>{s&&Kn(s,n,9,a)},x={mode:l,persisted:c,beforeEnter(a){let n=p;if(!t.isMounted){if(!e)return;n=j||p}a._leaveCb&&a._leaveCb(!0);const l=y[f];l&&mn(s,l)&&l.el._leaveCb&&l.el._leaveCb(),q(n,[a])},enter(s){let a=o,n=d,l=r;if(!t.isMounted){if(!e)return;a=m||o,n=v||d,l=b||r}let c=!1;const p=s._enterCb=a=>{c||(c=!0,q(a?l:n,[s]),x.delayedLeave&&x.delayedLeave(),s._enterCb=void 0)};a?(a(s,p),a.length<=1&&p()):p()},leave(a,n){const e=String(s.key);if(a._enterCb&&a._enterCb(!0),t.isUnmounting)return n();q(i,[a]);let l=!1;const c=a._leaveCb=t=>{l||(l=!0,n(),q(t?g:u,[a]),a._leaveCb=void 0,y[e]===s&&delete y[e])};y[e]=s,h?(h(a,c),h.length<=1&&c()):c()},clone:s=>Va(s,a,t,n)};return x}function Ha(s){if(Xa(s))return(s=xn(s)).children=null,s}function Wa(s){return Xa(s)?s.children?s.children[0]:void 0:s}function Ga(s,a){6&s.shapeFlag&&s.component?Ga(s.component.subTree,a):128&s.shapeFlag?(s.ssContent.transition=a.clone(s.ssContent),s.ssFallback.transition=a.clone(s.ssFallback)):s.transition=a}function Ka(s,a=!1){let t=[],n=0;for(let e=0;e1)for(let e=0;e!!s.type.__asyncLoader,Xa=s=>s.type.__isKeepAlive,Qa={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(s,{slots:a}){const t=Rn(),n=t.ctx;if(!n.renderer)return a.default;const e=new Map,l=new Set;let c=null;const p=t.suspense,{renderer:{p:o,m:d,um:r,o:{createElement:i}}}=n,h=i("div");function u(s){et(s),r(s,t,p)}function g(s){e.forEach(((a,t)=>{const n=Wn(a.type);!n||s&&s(n)||j(t)}))}function j(s){const a=e.get(s);c&&a.type===c.type?c&&et(c):u(a),e.delete(s),l.delete(s)}n.activate=(s,a,t,n,e)=>{const l=s.component;d(s,a,t,0,p),o(l.vnode,s,a,t,l,p,n,s.slotScopeIds,e),Gt((()=>{l.isDeactivated=!1,l.a&&Y(l.a);const a=s.props&&s.props.onVnodeMounted;a&&Yt(a,l.parent,s)}),p)},n.deactivate=s=>{const a=s.component;d(s,h,null,1,p),Gt((()=>{a.da&&Y(a.da);const t=s.props&&s.props.onVnodeUnmounted;t&&Yt(t,a.parent,s),a.isDeactivated=!0}),p)},be((()=>[s.include,s.exclude]),(([s,a])=>{s&&g((a=>Za(s,a))),a&&g((s=>!Za(a,s)))}),{flush:"post",deep:!0});let m=null;const v=()=>{null!=m&&e.set(m,lt(t.subTree))};return dt(v),it(v),ht((()=>{e.forEach((s=>{const{subTree:a,suspense:n}=t,e=lt(a);if(s.type!==e.type)u(s);else{et(e);const s=e.component.da;s&&Gt(s,n)}}))})),()=>{if(m=null,!a.default)return null;const t=a.default(),n=t[0];if(t.length>1)return c=null,t;if(!(jn(n)&&(4&n.shapeFlag||128&n.shapeFlag)))return c=null,n;let p=lt(n);const o=p.type,d=Wn(Ya(p)?p.type.__asyncResolved||{}:o),{include:r,exclude:i,max:h}=s;if(r&&(!d||!Za(r,d))||i&&d&&Za(i,d))return c=p,n;const u=null==p.key?o:p.key,g=e.get(u);return p.el&&(p=xn(p),128&n.shapeFlag&&(n.ssContent=p)),m=u,g?(p.el=g.el,p.component=g.component,p.transition&&Ga(p,p.transition),p.shapeFlag|=512,l.delete(u),l.add(u)):(l.add(u),h&&l.size>parseInt(h,10)&&j(l.values().next().value)),p.shapeFlag|=256,c=p,n}}};function Za(s,a){return P(s)?s.some((s=>Za(s,a))):D(s)?s.split(",").indexOf(a)>-1:!!s.test&&s.test(a)}function st(s,a){tt(s,"a",a)}function at(s,a){tt(s,"da",a)}function tt(s,a,t=Fn){const n=s.__wdc||(s.__wdc=()=>{let a=t;for(;a;){if(a.isDeactivated)return;a=a.parent}s()});if(ct(a,n,t),t){let s=t.parent;for(;s&&s.parent;)Xa(s.parent.vnode)&&nt(n,a,t,s),s=s.parent}}function nt(s,a,t,n){const e=ct(a,s,n,!0);ut((()=>{S(n[a],e)}),t)}function et(s){let a=s.shapeFlag;256&a&&(a-=256),512&a&&(a-=512),s.shapeFlag=a}function lt(s){return 128&s.shapeFlag?s.ssContent:s}function ct(s,a,t=Fn,n=!1){if(t){const e=t[s]||(t[s]=[]),l=a.__weh||(a.__weh=(...n)=>{if(t.isUnmounted)return;vs(),Ln(t);const e=Kn(a,t,s,n);return Bn(),bs(),e});return n?e.unshift(l):e.push(l),l}}const pt=s=>(a,t=Fn)=>(!$n||"sp"===s)&&ct(s,a,t),ot=pt("bm"),dt=pt("m"),rt=pt("bu"),it=pt("u"),ht=pt("bum"),ut=pt("um"),gt=pt("sp"),jt=pt("rtg"),mt=pt("rtc");function vt(s,a=Fn){ct("ec",s,a)}let bt=!0;function ft(s){const a=xt(s),t=s.proxy,n=s.ctx;bt=!1,a.beforeCreate&&yt(a.beforeCreate,s,"bc");const{data:e,computed:l,methods:c,watch:p,provide:o,inject:d,created:r,beforeMount:i,mounted:h,beforeUpdate:u,updated:g,activated:j,deactivated:m,beforeDestroy:v,beforeUnmount:b,destroyed:f,unmounted:q,render:x,renderTracked:w,renderTriggered:_,errorCaptured:k,serverPrefetch:S,expose:z,inheritAttrs:C,components:O,directives:E,filters:D}=a;if(d&&function(s,a,t=y,n=!1){P(s)&&(s=St(s));for(const e in s){const t=s[e];let l;l=T(t)?"default"in t?Ba(t.from||e,t.default,!0):Ba(t.from||e):Ba(t),ya(l)&&n?Object.defineProperty(a,e,{enumerable:!0,configurable:!0,get:()=>l.value,set:s=>l.value=s}):a[e]=l}}(d,n,null,s.appContext.config.unwrapInjectedRef),c)for(const y in c){const s=c[y];I(s)&&(n[y]=s.bind(t))}if(e){const a=e.call(t,t);T(a)&&(s.data=oa(a))}if(bt=!0,l)for(const P in l){const s=l[P],a=za({get:I(s)?s.bind(t,t):I(s.get)?s.get.bind(t,t):y,set:!I(s)&&I(s.set)?s.set.bind(t):y});Object.defineProperty(n,P,{enumerable:!0,configurable:!0,get:()=>a.value,set:s=>a.value=s})}if(p)for(const y in p)qt(p[y],n,t,y);if(o){const s=I(o)?o.call(t):o;Reflect.ownKeys(s).forEach((a=>{La(a,s[a])}))}function A(s,a){P(a)?a.forEach((a=>s(a.bind(t)))):a&&s(a.bind(t))}if(r&&yt(r,s,"c"),A(ot,i),A(dt,h),A(rt,u),A(it,g),A(st,j),A(at,m),A(vt,k),A(mt,w),A(jt,_),A(ht,b),A(ut,q),A(gt,S),P(z))if(z.length){const a=s.exposed||(s.exposed={});z.forEach((s=>{Object.defineProperty(a,s,{get:()=>t[s],set:a=>t[s]=a})}))}else s.exposed||(s.exposed={});x&&s.render===y&&(s.render=x),null!=C&&(s.inheritAttrs=C),O&&(s.components=O),E&&(s.directives=E)}function yt(s,a,t){Kn(P(s)?s.map((s=>s.bind(a.proxy))):s.bind(a.proxy),a,t)}function qt(s,a,t,n){const e=n.includes(".")?qe(t,n):()=>t[n];if(D(s)){const t=a[s];I(t)&&be(e,t)}else if(I(s))be(e,s.bind(t));else if(T(s))if(P(s))s.forEach((s=>qt(s,a,t,n)));else{const n=I(s.handler)?s.handler.bind(t):a[s.handler];I(n)&&be(e,n,s)}}function xt(s){const a=s.type,{mixins:t,extends:n}=a,{mixins:e,optionsCache:l,config:{optionMergeStrategies:c}}=s.appContext,p=l.get(a);let o;return p?o=p:e.length||t||n?(o={},e.length&&e.forEach((s=>wt(o,s,c,!0))),wt(o,a,c)):o=a,l.set(a,o),o}function wt(s,a,t,n=!1){const{mixins:e,extends:l}=a;l&&wt(s,l,t,!0),e&&e.forEach((a=>wt(s,a,t,!0)));for(const c in a)if(n&&"expose"===c);else{const n=_t[c]||t&&t[c];s[c]=n?n(s[c],a[c]):a[c]}return s}const _t={data:kt,props:Ct,emits:Ct,methods:Ct,computed:Ct,beforeCreate:zt,created:zt,beforeMount:zt,mounted:zt,beforeUpdate:zt,updated:zt,beforeDestroy:zt,beforeUnmount:zt,destroyed:zt,unmounted:zt,activated:zt,deactivated:zt,errorCaptured:zt,serverPrefetch:zt,components:Ct,directives:Ct,watch:function(s,a){if(!s)return a;if(!a)return s;const t=k(Object.create(null),s);for(const n in a)t[n]=zt(s[n],a[n]);return t},provide:kt,inject:function(s,a){return Ct(St(s),St(a))}};function kt(s,a){return a?s?function(){return k(I(s)?s.call(this,this):s,I(a)?a.call(this,this):a)}:a:s}function St(s){if(P(s)){const a={};for(let t=0;t{o=!0;const[t,n]=It(s,a,!0);k(c,t),n&&p.push(...n)};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}if(!l&&!o)return n.set(s,f),f;if(P(l))for(let r=0;r-1,t[1]=n<0||a-1||C(t,"default"))&&p.push(s)}}}const d=[c,p];return n.set(s,d),d}function Dt(s){return"$"!==s[0]}function At(s){const a=s&&s.toString().match(/^\s*function (\w+)/);return a?a[1]:null===s?"null":""}function Tt(s,a){return At(s)===At(a)}function Nt(s,a){return P(a)?a.findIndex((a=>Tt(a,s))):I(a)&&Tt(a,s)?0:-1}const Ft=s=>"_"===s[0]||"$stable"===s,Rt=s=>P(s)?s.map(Sn):[Sn(s)],Lt=(s,a,t)=>{const n=Aa(((...s)=>Rt(a(...s))),t);return n._c=!1,n},Bt=(s,a,t)=>{const n=s._ctx;for(const e in s){if(Ft(e))continue;const t=s[e];if(I(t))a[e]=Lt(0,t,n);else if(null!=t){const s=Rt(t);a[e]=()=>s}}},Mt=(s,a)=>{const t=Rt(a);s.slots.default=()=>t};function $t(s,a){if(null===Ea)return s;const t=Ea.proxy,n=s.dirs||(s.dirs=[]);for(let e=0;e(l.has(s)||(s&&I(s.install)?(l.add(s),s.install(p,...a)):I(s)&&(l.add(s),s(p,...a))),p),mixin:s=>(e.mixins.includes(s)||e.mixins.push(s),p),component:(s,a)=>a?(e.components[s]=a,p):e.components[s],directive:(s,a)=>a?(e.directives[s]=a,p):e.directives[s],mount(l,o,d){if(!c){const r=qn(t,n);return r.appContext=e,o&&a?a(r,l):s(r,l,d),c=!0,p._container=l,l.__vue_app__=p,Hn(r.component)||r.component.proxy}},unmount(){c&&(s(null,p._container),delete p._container.__vue_app__)},provide:(s,a)=>(e.provides[s]=a,p)};return p}}const Gt=function(s,a){a&&a.pendingBranch?P(s)?a.effects.push(...s):a.effects.push(s):he(s,ee,ne,le)};function Kt(s){return function(s,a){(Z||(Z="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{})).__VUE__=!0;const{insert:t,remove:n,patchProp:e,createElement:l,createText:c,createComment:p,setText:o,setElementText:d,parentNode:r,nextSibling:i,setScopeId:h=y,cloneNode:u,insertStaticContent:g}=s,j=(s,a,t,n=null,e=null,l=null,c=!1,p=null,o=!!a.dynamicChildren)=>{if(s===a)return;s&&!mn(s,a)&&(n=as(s),G(s,e,l,!0),s=null),-2===a.patchFlag&&(o=!1,a.dynamicChildren=null);const{type:d,ref:r,shapeFlag:i}=a;switch(d){case nn:m(s,a,t,n);break;case en:v(s,a,t,n);break;case ln:null==s&&q(a,t,n,c);break;case tn:D(s,a,t,n,e,l,c,p,o);break;default:1&i?_(s,a,t,n,e,l,c,p,o):6&i?A(s,a,t,n,e,l,c,p,o):(64&i||128&i)&&d.process(s,a,t,n,e,l,c,p,o,es)}null!=r&&e&&Jt(r,s&&s.ref,l,a||s,!a)},m=(s,a,n,e)=>{if(null==s)t(a.el=c(a.children),n,e);else{const t=a.el=s.el;a.children!==s.children&&o(t,a.children)}},v=(s,a,n,e)=>{null==s?t(a.el=p(a.children||""),n,e):a.el=s.el},q=(s,a,t,n)=>{[s.el,s.anchor]=g(s.children,a,t,n)},x=({el:s,anchor:a},n,e)=>{let l;for(;s&&s!==a;)l=i(s),t(s,n,e),s=l;t(a,n,e)},w=({el:s,anchor:a})=>{let t;for(;s&&s!==a;)t=i(s),n(s),s=t;n(a)},_=(s,a,t,n,e,l,c,p,o)=>{c=c||"svg"===a.type,null==s?S(a,t,n,e,l,c,p,o):O(s,a,e,l,c,p,o)},S=(s,a,n,c,p,o,r,i)=>{let h,g;const{type:j,props:m,shapeFlag:v,transition:b,patchFlag:f,dirs:y}=s;if(s.el&&void 0!==u&&-1===f)h=s.el=u(s.el);else{if(h=s.el=l(s.type,o,m&&m.is,m),8&v?d(h,s.children):16&v&&P(s.children,h,null,c,p,o&&"foreignObject"!==j,r,i),y&&Ut(s,null,c,"created"),m){for(const a in m)"value"===a||M(a)||e(h,a,null,m[a],o,s.children,c,p,ss);"value"in m&&e(h,"value",null,m.value),(g=m.onVnodeBeforeMount)&&Yt(g,c,s)}z(h,s,s.scopeId,r,c)}y&&Ut(s,null,c,"beforeMount");const q=(!p||p&&!p.pendingBranch)&&b&&!b.persisted;q&&b.beforeEnter(h),t(h,a,n),((g=m&&m.onVnodeMounted)||q||y)&&Gt((()=>{g&&Yt(g,c,s),q&&b.enter(h),y&&Ut(s,null,c,"mounted")}),p)},z=(s,a,t,n,e)=>{if(t&&h(s,t),n)for(let l=0;l{for(let d=o;d{const o=a.el=s.el;let{patchFlag:r,dynamicChildren:i,dirs:h}=a;r|=16&s.patchFlag;const u=s.props||b,g=a.props||b;let j;(j=g.onVnodeBeforeUpdate)&&Yt(j,t,a,s),h&&Ut(a,s,t,"beforeUpdate");const m=l&&"foreignObject"!==a.type;if(i?E(s.dynamicChildren,i,o,t,n,m,c):p||B(s,a,o,null,t,n,m,c,!1),r>0){if(16&r)I(o,a,u,g,t,n,l);else if(2&r&&u.class!==g.class&&e(o,"class",null,g.class,l),4&r&&e(o,"style",u.style,g.style,l),8&r){const c=a.dynamicProps;for(let a=0;a{j&&Yt(j,t,a,s),h&&Ut(a,s,t,"updated")}),n)},E=(s,a,t,n,e,l,c)=>{for(let p=0;p{if(t!==n){for(const o in n){if(M(o))continue;const d=n[o],r=t[o];d!==r&&"value"!==o&&e(s,o,r,d,p,a.children,l,c,ss)}if(t!==b)for(const o in t)M(o)||o in n||e(s,o,t[o],null,p,a.children,l,c,ss);"value"in n&&e(s,"value",t.value,n.value)}},D=(s,a,n,e,l,p,o,d,r)=>{const i=a.el=s?s.el:c(""),h=a.anchor=s?s.anchor:c("");let{patchFlag:u,dynamicChildren:g,slotScopeIds:j}=a;j&&(d=d?d.concat(j):j),null==s?(t(i,n,e),t(h,n,e),P(a.children,n,h,l,p,o,d,r)):u>0&&64&u&&g&&s.dynamicChildren?(E(s.dynamicChildren,g,n,l,p,o,d),(null!=a.key||l&&a===l.subTree)&&Xt(s,a,!0)):B(s,a,n,h,l,p,o,d,r)},A=(s,a,t,n,e,l,c,p,o)=>{a.slotScopeIds=p,null==s?512&a.shapeFlag?e.ctx.activate(a,t,n,c,o):T(a,t,n,e,l,c,o):F(s,a,o)},T=(s,a,t,n,e,l,c)=>{const p=s.component=function(s,a,t){const n=s.type,e=(a?a.appContext:s.appContext)||Tn,l={uid:Nn++,vnode:s,type:n,parent:a,appContext:e,root:null,next:null,subTree:null,update:null,scope:new ts(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:a?a.provides:Object.create(e.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:It(n,e),emitsOptions:Pa(n,e),emit:null,emitted:null,propsDefaults:b,inheritAttrs:n.inheritAttrs,ctx:b,data:b,props:b,attrs:b,slots:b,refs:b,setupState:b,setupContext:null,suspense:t,suspenseId:t?t.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};l.ctx={_:l},l.root=a?a.root:l,l.emit=Ca.bind(null,l),s.ce&&s.ce(l);return l}(s,n,e);if(Xa(s)&&(p.ctx.renderer=es),function(s,a=!1){$n=a;const{props:t,children:n}=s.vnode,e=Mn(s);Pt(s,t,e,a),((s,a)=>{if(32&s.vnode.shapeFlag){const t=a._;t?(s.slots=ga(a),X(a,"_",t)):Bt(a,s.slots={})}else s.slots={},a&&Mt(s,a);X(s.slots,vn,1)})(s,n);const l=e?function(s,a){const t=s.type;s.accessCache=Object.create(null),s.proxy=ja(new Proxy(s.ctx,An));const{setup:n}=t;if(n){const t=s.setupContext=n.length>1?function(s){const a=a=>{s.exposed=a||{}};let t;return{get attrs(){return t||(t=function(s){return new Proxy(s.attrs,{get:(a,t)=>(fs(s,0,"$attrs"),a[t])})}(s))},slots:s.slots,emit:s.emit,expose:a}}(s):null;Ln(s),vs();const e=Gn(n,s,0,[s.props,t]);if(bs(),Bn(),N(e)){if(e.then(Bn,Bn),a)return e.then((t=>{Un(s,t,a)})).catch((a=>{Jn(a,s,0)}));s.asyncDep=e}else Un(s,e,a)}else Vn(s,a)}(s,a):void 0;$n=!1}(p),p.asyncDep){if(e&&e.registerDep(p,R),!s.el){const s=p.subTree=qn(en);v(null,s,a,t)}}else R(p,s,a,t,e,l,c)},F=(s,a,t)=>{const n=a.component=s.component;if(function(s,a,t){const{props:n,children:e,component:l}=s,{props:c,children:p,patchFlag:o}=a,d=l.emitsOptions;if(a.dirs||a.transition)return!0;if(!(t&&o>=0))return!(!e&&!p||p&&p.$stable)||n!==c&&(n?!c||Ra(n,c,d):!!c);if(1024&o)return!0;if(16&o)return n?Ra(n,c,d):!!c;if(8&o){const s=a.dynamicProps;for(let a=0;aZn&&Qn.splice(a,1)}(n.update),n.update()}else a.component=s.component,a.el=s.el,n.vnode=a},R=(s,a,t,n,e,l,c)=>{const p=new us((()=>{if(s.isMounted){let a,{next:t,bu:n,u:o,parent:d,vnode:i}=s,h=t;p.allowRecurse=!1,t?(t.el=i.el,L(s,t,c)):t=i,n&&Y(n),(a=t.props&&t.props.onVnodeBeforeUpdate)&&Yt(a,d,t,i),p.allowRecurse=!0;const u=Ta(s),g=s.subTree;s.subTree=u,j(g,u,r(g.el),as(g),s,e,l),t.el=u.el,null===h&&function({vnode:s,parent:a},t){for(;a&&a.subTree===s;)(s=a.vnode).el=t,a=a.parent}(s,u.el),o&&Gt(o,e),(a=t.props&&t.props.onVnodeUpdated)&&Gt((()=>Yt(a,d,t,i)),e)}else{let c;const{el:o,props:d}=a,{bm:r,m:i,parent:h}=s,u=Ya(a);if(p.allowRecurse=!1,r&&Y(r),!u&&(c=d&&d.onVnodeBeforeMount)&&Yt(c,h,a),p.allowRecurse=!0,o&&cs){const t=()=>{s.subTree=Ta(s),cs(o,s.subTree,s,e,null)};u?a.type.__asyncLoader().then((()=>!s.isUnmounted&&t())):t()}else{const c=s.subTree=Ta(s);j(null,c,t,n,s,e,l),a.el=c.el}if(i&&Gt(i,e),!u&&(c=d&&d.onVnodeMounted)){const s=a;Gt((()=>Yt(c,h,s)),e)}256&a.shapeFlag&&s.a&&Gt(s.a,e),s.isMounted=!0,a=t=n=null}}),(()=>re(s.update)),s.scope),o=s.update=p.run.bind(p);o.id=s.uid,p.allowRecurse=o.allowRecurse=!0,o()},L=(s,a,t)=>{a.component=s;const n=s.vnode.props;s.vnode=a,s.next=null,function(s,a,t,n){const{props:e,attrs:l,vnode:{patchFlag:c}}=s,p=ga(e),[o]=s.propsOptions;let d=!1;if(!(n||c>0)||16&c){let n;Ot(s,a,e,l)&&(d=!0);for(const l in p)a&&(C(a,l)||(n=W(l))!==l&&C(a,n))||(o?!t||void 0===t[l]&&void 0===t[n]||(e[l]=Et(o,p,l,void 0,s,!0)):delete e[l]);if(l!==p)for(const s in l)a&&C(a,s)||(delete l[s],d=!0)}else if(8&c){const t=s.vnode.dynamicProps;for(let n=0;n{const{vnode:n,slots:e}=s;let l=!0,c=b;if(32&n.shapeFlag){const s=a._;s?t&&1===s?l=!1:(k(e,a),t||1!==s||delete e._):(l=!a.$stable,Bt(a,e)),c=a}else a&&(Mt(s,a),c={default:1});if(l)for(const p in e)Ft(p)||p in c||delete e[p]})(s,a.children,t),vs(),ue(void 0,s.update),bs()},B=(s,a,t,n,e,l,c,p,o=!1)=>{const r=s&&s.children,i=s?s.shapeFlag:0,h=a.children,{patchFlag:u,shapeFlag:g}=a;if(u>0){if(128&u)return void U(r,h,t,n,e,l,c,p,o);if(256&u)return void $(r,h,t,n,e,l,c,p,o)}8&g?(16&i&&ss(r,e,l),h!==r&&d(t,h)):16&i?16&g?U(r,h,t,n,e,l,c,p,o):ss(r,e,l,!0):(8&i&&d(t,""),16&g&&P(h,t,n,e,l,c,p,o))},$=(s,a,t,n,e,l,c,p,o)=>{a=a||f;const d=(s=s||f).length,r=a.length,i=Math.min(d,r);let h;for(h=0;hr?ss(s,e,l,!0,!1,i):P(a,t,n,e,l,c,p,o,i)},U=(s,a,t,n,e,l,c,p,o)=>{let d=0;const r=a.length;let i=s.length-1,h=r-1;for(;d<=i&&d<=h;){const n=s[d],r=a[d]=o?zn(a[d]):Sn(a[d]);if(!mn(n,r))break;j(n,r,t,null,e,l,c,p,o),d++}for(;d<=i&&d<=h;){const n=s[i],d=a[h]=o?zn(a[h]):Sn(a[h]);if(!mn(n,d))break;j(n,d,t,null,e,l,c,p,o),i--,h--}if(d>i){if(d<=h){const s=h+1,i=sh)for(;d<=i;)G(s[d],e,l,!0),d++;else{const u=d,g=d,m=new Map;for(d=g;d<=h;d++){const s=a[d]=o?zn(a[d]):Sn(a[d]);null!=s.key&&m.set(s.key,d)}let v,b=0;const y=h-g+1;let q=!1,x=0;const w=new Array(y);for(d=0;d=y){G(n,e,l,!0);continue}let r;if(null!=n.key)r=m.get(n.key);else for(v=g;v<=h;v++)if(0===w[v-g]&&mn(n,a[v])){r=v;break}void 0===r?G(n,e,l,!0):(w[r-g]=d+1,r>=x?x=r:q=!0,j(n,a[r],t,null,e,l,c,p,o),b++)}const _=q?function(s){const a=s.slice(),t=[0];let n,e,l,c,p;const o=s.length;for(n=0;n>1,s[t[p]]0&&(a[n]=t[l-1]),t[l]=n)}}l=t.length,c=t[l-1];for(;l-- >0;)t[l]=c,c=a[c];return t}(w):f;for(v=_.length-1,d=y-1;d>=0;d--){const s=g+d,i=a[s],h=s+1{const{el:c,type:p,transition:o,children:d,shapeFlag:r}=s;if(6&r)return void H(s.component.subTree,a,n,e);if(128&r)return void s.suspense.move(a,n,e);if(64&r)return void p.move(s,a,n,es);if(p===tn){t(c,a,n);for(let s=0;so.enter(c)),l);else{const{leave:s,delayLeave:e,afterLeave:l}=o,p=()=>t(c,a,n),d=()=>{s(c,(()=>{p(),l&&l()}))};e?e(c,p,d):d()}else t(c,a,n)},G=(s,a,t,n=!1,e=!1)=>{const{type:l,props:c,ref:p,children:o,dynamicChildren:d,shapeFlag:r,patchFlag:i,dirs:h}=s;if(null!=p&&Jt(p,null,t,s,!0),256&r)return void a.ctx.deactivate(s);const u=1&r&&h,g=!Ya(s);let j;if(g&&(j=c&&c.onVnodeBeforeUnmount)&&Yt(j,a,s),6&r)Q(s.component,t,n);else{if(128&r)return void s.suspense.unmount(t,n);u&&Ut(s,null,a,"beforeUnmount"),64&r?s.type.remove(s,a,t,e,es,n):d&&(l!==tn||i>0&&64&i)?ss(d,a,t,!1,!0):(l===tn&&384&i||!e&&16&r)&&ss(o,a,t),n&&K(s)}(g&&(j=c&&c.onVnodeUnmounted)||u)&&Gt((()=>{j&&Yt(j,a,s),u&&Ut(s,null,a,"unmounted")}),t)},K=s=>{const{type:a,el:t,anchor:e,transition:l}=s;if(a===tn)return void J(t,e);if(a===ln)return void w(s);const c=()=>{n(t),l&&!l.persisted&&l.afterLeave&&l.afterLeave()};if(1&s.shapeFlag&&l&&!l.persisted){const{leave:a,delayLeave:n}=l,e=()=>a(t,c);n?n(s.el,c,e):e()}else c()},J=(s,a)=>{let t;for(;s!==a;)t=i(s),n(s),s=t;n(a)},Q=(s,a,t)=>{const{bum:n,scope:e,update:l,subTree:c,um:p}=s;n&&Y(n),e.stop(),l&&(l.active=!1,G(c,s,a,t)),p&&Gt(p,a),Gt((()=>{s.isUnmounted=!0}),a),a&&a.pendingBranch&&!a.isUnmounted&&s.asyncDep&&!s.asyncResolved&&s.suspenseId===a.pendingId&&(a.deps--,0===a.deps&&a.resolve())},ss=(s,a,t,n=!1,e=!1,l=0)=>{for(let c=l;c6&s.shapeFlag?as(s.component.subTree):128&s.shapeFlag?s.suspense.next():i(s.anchor||s.el),ns=(s,a,t)=>{null==s?a._vnode&&G(a._vnode,null,null,!0):j(a._vnode||null,s,a,null,null,null,t),ge(),a._vnode=s},es={p:j,um:G,m:H,r:K,mt:T,mc:P,pc:B,pbc:E,n:as,o:s};let ls,cs;a&&([ls,cs]=a(es));return{render:ns,hydrate:ls,createApp:Wt(ns,ls)}}(s)}function Jt(s,a,t,n,e=!1){if(P(s))return void s.forEach(((s,l)=>Jt(s,a&&(P(a)?a[l]:a),t,n,e)));if(Ya(n)&&!e)return;const l=4&n.shapeFlag?Hn(n.component)||n.component.proxy:n.el,c=e?null:l,{i:p,r:o}=s,d=a&&a.r,r=p.refs===b?p.refs={}:p.refs,i=p.setupState;if(null!=d&&d!==o&&(D(d)?(r[d]=null,C(i,d)&&(i[d]=null)):ya(d)&&(d.value=null)),D(o)){const s=()=>{r[o]=c,C(i,o)&&(i[o]=c)};c?(s.id=-1,Gt(s,t)):s()}else if(ya(o)){const s=()=>{o.value=c};c?(s.id=-1,Gt(s,t)):s()}else I(o)&&Gn(o,p,12,[c,r])}function Yt(s,a,t,n=null){Kn(s,a,7,[t,n])}function Xt(s,a,t=!1){const n=s.children,e=a.children;if(P(n)&&P(e))for(let l=0;l0?pn||f:null,cn.pop(),pn=cn[cn.length-1]||null,dn>0&&pn&&pn.push(s),s}function un(s,a,t,n,e,l){return hn(yn(s,a,t,n,e,l,!0))}function gn(s,a,t,n,e){return hn(qn(s,a,t,n,e,!0))}function jn(s){return!!s&&!0===s.__v_isVNode}function mn(s,a){return s.type===a.type&&s.key===a.key}const vn="__vInternal",bn=({key:s})=>null!=s?s:null,fn=({ref:s})=>null!=s?D(s)||ya(s)||I(s)?{i:Ea,r:s}:s:null;function yn(s,a=null,t=null,n=0,e=null,l=(s===tn?0:1),c=!1,p=!1){const o={__v_isVNode:!0,__v_skip:!0,type:s,props:a,key:a&&bn(a),ref:a&&fn(a),scopeId:Ia,slotScopeIds:null,children:t,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:n,dynamicProps:e,dynamicChildren:null,appContext:null};return p?(Cn(o,t),128&l&&s.normalize(o)):t&&(o.shapeFlag|=D(t)?8:16),dn>0&&!c&&pn&&(o.patchFlag>0||6&l)&&32!==o.patchFlag&&pn.push(o),o}const qn=function(s,a=null,t=null,n=0,e=null,l=!1){s&&s!==Zt||(s=en);if(jn(s)){const n=xn(s,a,!0);return t&&Cn(n,t),n}c=s,I(c)&&"__vccOpts"in c&&(s=s.__vccOpts);var c;if(a){a=function(s){return s?ua(s)||vn in s?k({},s):s:null}(a);let{class:s,style:t}=a;s&&!D(s)&&(a.class=j(s)),T(t)&&(ua(t)&&!P(t)&&(t=k({},t)),a.style=i(t))}const p=D(s)?1:(s=>s.__isSuspense)(s)?128:(s=>s.__isTeleport)(s)?64:T(s)?4:I(s)?2:0;return yn(s,a,t,n,e,p,l,!0)};function xn(s,a,t=!1){const{props:n,ref:e,patchFlag:l,children:c}=s,p=a?function(...s){const a={};for(let t=0;ta(s,t,void 0,l&&l[t])));else{const t=Object.keys(s);e=new Array(t.length);for(let n=0,c=t.length;n!jn(s)||s.type!==en&&!(s.type===tn&&!En(s.children))))?s:null}const In=s=>s?Mn(s)?Hn(s)||s.proxy:In(s.parent):null,Dn=k(Object.create(null),{$:s=>s,$el:s=>s.vnode.el,$data:s=>s.data,$props:s=>s.props,$attrs:s=>s.attrs,$slots:s=>s.slots,$refs:s=>s.refs,$parent:s=>In(s.parent),$root:s=>In(s.root),$emit:s=>s.emit,$options:s=>xt(s),$forceUpdate:s=>()=>re(s.update),$nextTick:s=>de.bind(s.proxy),$watch:s=>ye.bind(s)}),An={get({_:s},a){const{ctx:t,setupState:n,data:e,props:l,accessCache:c,type:p,appContext:o}=s;let d;if("$"!==a[0]){const p=c[a];if(void 0!==p)switch(p){case 0:return n[a];case 1:return e[a];case 3:return t[a];case 2:return l[a]}else{if(n!==b&&C(n,a))return c[a]=0,n[a];if(e!==b&&C(e,a))return c[a]=1,e[a];if((d=s.propsOptions[0])&&C(d,a))return c[a]=2,l[a];if(t!==b&&C(t,a))return c[a]=3,t[a];bt&&(c[a]=4)}}const r=Dn[a];let i,h;return r?("$attrs"===a&&fs(s,0,a),r(s)):(i=p.__cssModules)&&(i=i[a])?i:t!==b&&C(t,a)?(c[a]=3,t[a]):(h=o.config.globalProperties,C(h,a)?h[a]:void 0)},set({_:s},a,t){const{data:n,setupState:e,ctx:l}=s;if(e!==b&&C(e,a))e[a]=t;else if(n!==b&&C(n,a))n[a]=t;else if(C(s.props,a))return!1;return("$"!==a[0]||!(a.slice(1)in s))&&(l[a]=t,!0)},has({_:{data:s,setupState:a,accessCache:t,ctx:n,appContext:e,propsOptions:l}},c){let p;return void 0!==t[c]||s!==b&&C(s,c)||a!==b&&C(a,c)||(p=l[0])&&C(p,c)||C(n,c)||C(Dn,c)||C(e.config.globalProperties,c)}},Tn=Vt();let Nn=0;let Fn=null;const Rn=()=>Fn||Ea,Ln=s=>{Fn=s,s.scope.on()},Bn=()=>{Fn&&Fn.scope.off(),Fn=null};function Mn(s){return 4&s.vnode.shapeFlag}let $n=!1;function Un(s,a,t){I(a)?s.type.__ssrInlineRender?s.ssrRender=a:s.render=a:T(a)&&(s.setupState=ka(a)),Vn(s,t)}function Vn(s,a,t){const n=s.type;s.render||(s.render=n.render||y),Ln(s),vs(),ft(s),bs(),Bn()}function Hn(s){if(s.exposed)return s.exposeProxy||(s.exposeProxy=new Proxy(ka(ja(s.exposed)),{get:(a,t)=>t in a?a[t]:t in Dn?Dn[t](s):void 0}))}function Wn(s){return I(s)&&s.displayName||s.name}function Gn(s,a,t,n){let e;try{e=n?s(...n):s()}catch(l){Jn(l,a,t)}return e}function Kn(s,a,t,n){if(I(s)){const e=Gn(s,a,t,n);return e&&N(e)&&e.catch((s=>{Jn(s,a,t)})),e}const e=[];for(let l=0;l>>1;je(Qn[n])je(s)-je(a))),le=0;lenull==s.id?1/0:s.id;function me(s){Xn=!1,Yn=!0,ue(s),Qn.sort(((s,a)=>je(s)-je(a)));try{for(Zn=0;Zns.value,r=!!s._shallow):ia(s)?(o=()=>s,n=!0):P(s)?(i=!0,r=s.some(ia),o=()=>s.map((s=>ya(s)?s.value:ia(s)?xe(s):I(s)?Gn(s,p,2):void 0))):o=I(s)?a?()=>Gn(s,p,2):()=>{if(!p||!p.isUnmounted)return d&&d(),Kn(s,p,3,[h])}:y,a&&n){const s=o;o=()=>xe(s())}let h=s=>{d=m.onStop=()=>{Gn(s,p,4)}};if($n)return h=y,a?t&&Kn(a,p,3,[o(),i?[]:void 0,h]):o(),y;let u=i?[]:ve;const g=()=>{if(m.active)if(a){const s=m.run();(n||r||(i?s.some(((s,a)=>J(s,u[a]))):J(s,u)))&&(d&&d(),Kn(a,p,3,[s,u===ve?void 0:u,h]),u=s)}else m.run()};let j;g.allowRecurse=!!a,j="sync"===e?g:"post"===e?()=>Gt(g,p&&p.suspense):()=>{!p||p.isMounted?function(s){he(s,ae,se,te)}(g):g()};const m=new us(o,j);return a?t?g():u=m.run():"post"===e?Gt(m.run.bind(m),p&&p.suspense):m.run(),()=>{m.stop(),p&&p.scope&&S(p.scope.effects,m)}}function ye(s,a,t){const n=this.proxy,e=D(s)?s.includes(".")?qe(n,s):()=>n[s]:s.bind(n,n);let l;I(a)?l=a:(l=a.handler,t=a);const c=Fn;Ln(this);const p=fe(e,l.bind(n),t);return c?Ln(c):Bn(),p}function qe(s,a){const t=a.split(".");return()=>{let a=s;for(let s=0;s{xe(s,a)}));else if(L(s))for(const t in s)xe(s[t],a);return s}function we(s,a,t){const n=arguments.length;return 2===n?T(a)&&!P(a)?jn(a)?qn(s,null,[a]):qn(s,a):qn(s,null,a):(n>3?t=Array.prototype.slice.call(arguments,2):3===n&&jn(t)&&(t=[t]),qn(s,a,t))}const _e="3.2.19",ke="undefined"!=typeof document?document:null,Se=new Map,ze={insert:(s,a,t)=>{a.insertBefore(s,t||null)},remove:s=>{const a=s.parentNode;a&&a.removeChild(s)},createElement:(s,a,t,n)=>{const e=a?ke.createElementNS("http://www.w3.org/2000/svg",s):ke.createElement(s,t?{is:t}:void 0);return"select"===s&&n&&null!=n.multiple&&e.setAttribute("multiple",n.multiple),e},createText:s=>ke.createTextNode(s),createComment:s=>ke.createComment(s),setText:(s,a)=>{s.nodeValue=a},setElementText:(s,a)=>{s.textContent=a},parentNode:s=>s.parentNode,nextSibling:s=>s.nextSibling,querySelector:s=>ke.querySelector(s),setScopeId(s,a){s.setAttribute(a,"")},cloneNode(s){const a=s.cloneNode(!0);return"_value"in s&&(a._value=s._value),a},insertStaticContent(s,a,t,n){const e=t?t.previousSibling:a.lastChild;let l=Se.get(s);if(!l){const a=ke.createElement("template");if(a.innerHTML=n?`${s}`:s,l=a.content,n){const s=l.firstChild;for(;s.firstChild;)l.appendChild(s.firstChild);l.removeChild(s)}Se.set(s,l)}return a.insertBefore(l.cloneNode(!0),t),[e?e.nextSibling:a.firstChild,t?t.previousSibling:a.lastChild]}};const Ce=/\s*!important$/;function Pe(s,a,t){if(P(t))t.forEach((t=>Pe(s,a,t)));else if(a.startsWith("--"))s.setProperty(a,t);else{const n=function(s,a){const t=Ee[a];if(t)return t;let n=V(a);if("filter"!==n&&n in s)return Ee[a]=n;n=G(n);for(let e=0;edocument.createEvent("Event").timeStamp&&(De=()=>performance.now());const s=navigator.userAgent.match(/firefox\/(\d+)/i);Ae=!!(s&&Number(s[1])<=53)}let Te=0;const Ne=Promise.resolve(),Fe=()=>{Te=0};function Re(s,a,t,n,e=null){const l=s._vei||(s._vei={}),c=l[a];if(n&&c)c.value=n;else{const[t,p]=function(s){let a;if(Le.test(s)){let t;for(a={};t=s.match(Le);)s=s.slice(0,s.length-t[0].length),a[t[0].toLowerCase()]=!0}return[W(s.slice(2)),a]}(a);if(n){!function(s,a,t,n){s.addEventListener(a,t,n)}(s,t,l[a]=function(s,a){const t=s=>{const n=s.timeStamp||De();(Ae||n>=t.attached-1)&&Kn(function(s,a){if(P(a)){const t=s.stopImmediatePropagation;return s.stopImmediatePropagation=()=>{t.call(s),s._stopped=!0},a.map((s=>a=>!a._stopped&&s(a)))}return a}(s,t.value),a,5,[s])};return t.value=s,t.attached=(()=>Te||(Ne.then(Fe),Te=De()))(),t}(n,e),p)}else c&&(!function(s,a,t,n){s.removeEventListener(a,t,n)}(s,t,c,p),l[a]=void 0)}}const Le=/(?:Once|Passive|Capture)$/;const Be=/^on[a-z]/;const Me="transition",$e=(s,{slots:a})=>we($a,function(s){const a={};for(const k in s)k in Ue||(a[k]=s[k]);if(!1===s.css)return a;const{name:t="v",type:n,duration:e,enterFromClass:l=`${t}-enter-from`,enterActiveClass:c=`${t}-enter-active`,enterToClass:p=`${t}-enter-to`,appearFromClass:o=l,appearActiveClass:d=c,appearToClass:r=p,leaveFromClass:i=`${t}-leave-from`,leaveActiveClass:h=`${t}-leave-active`,leaveToClass:u=`${t}-leave-to`}=s,g=function(s){if(null==s)return null;if(T(s))return[We(s.enter),We(s.leave)];{const a=We(s);return[a,a]}}(e),j=g&&g[0],m=g&&g[1],{onBeforeEnter:v,onEnter:b,onEnterCancelled:f,onLeave:y,onLeaveCancelled:q,onBeforeAppear:x=v,onAppear:w=b,onAppearCancelled:_=f}=a,S=(s,a,t)=>{Ke(s,a?r:p),Ke(s,a?d:c),t&&t()},z=(s,a)=>{Ke(s,u),Ke(s,h),a&&a()},C=s=>(a,t)=>{const e=s?w:b,c=()=>S(a,s,t);Ve(e,[a,c]),Je((()=>{Ke(a,s?o:l),Ge(a,s?r:p),He(e)||Xe(a,n,j,c)}))};return k(a,{onBeforeEnter(s){Ve(v,[s]),Ge(s,l),Ge(s,c)},onBeforeAppear(s){Ve(x,[s]),Ge(s,o),Ge(s,d)},onEnter:C(!1),onAppear:C(!0),onLeave(s,a){const t=()=>z(s,a);Ge(s,i),document.body.offsetHeight,Ge(s,h),Je((()=>{Ke(s,i),Ge(s,u),He(y)||Xe(s,n,m,t)})),Ve(y,[s,t])},onEnterCancelled(s){S(s,!1),Ve(f,[s])},onAppearCancelled(s){S(s,!0),Ve(_,[s])},onLeaveCancelled(s){z(s),Ve(q,[s])}})}(s),a);$e.displayName="Transition";const Ue={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};$e.props=k({},$a.props,Ue);const Ve=(s,a=[])=>{P(s)?s.forEach((s=>s(...a))):s&&s(...a)},He=s=>!!s&&(P(s)?s.some((s=>s.length>1)):s.length>1);function We(s){return Q(s)}function Ge(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.add(a))),(s._vtc||(s._vtc=new Set)).add(a)}function Ke(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.remove(a)));const{_vtc:t}=s;t&&(t.delete(a),t.size||(s._vtc=void 0))}function Je(s){requestAnimationFrame((()=>{requestAnimationFrame(s)}))}let Ye=0;function Xe(s,a,t,n){const e=s._endId=++Ye,l=()=>{e===s._endId&&n()};if(t)return setTimeout(l,t);const{type:c,timeout:p,propCount:o}=function(s,a){const t=window.getComputedStyle(s),n=s=>(t[s]||"").split(", "),e=n("transitionDelay"),l=n("transitionDuration"),c=Qe(e,l),p=n("animationDelay"),o=n("animationDuration"),d=Qe(p,o);let r=null,i=0,h=0;a===Me?c>0&&(r=Me,i=c,h=l.length):"animation"===a?d>0&&(r="animation",i=d,h=o.length):(i=Math.max(c,d),r=i>0?c>d?Me:"animation":null,h=r?r===Me?l.length:o.length:0);const u=r===Me&&/\b(transform|all)(,|$)/.test(t.transitionProperty);return{type:r,timeout:i,propCount:h,hasTransform:u}}(s,a);if(!c)return n();const d=c+"end";let r=0;const i=()=>{s.removeEventListener(d,h),l()},h=a=>{a.target===s&&++r>=o&&i()};setTimeout((()=>{rZe(a)+Ze(s[t]))))}function Ze(s){return 1e3*Number(s.slice(0,-1).replace(",","."))}const sl={beforeMount(s,{value:a},{transition:t}){s._vod="none"===s.style.display?"":s.style.display,t&&a?t.beforeEnter(s):al(s,a)},mounted(s,{value:a},{transition:t}){t&&a&&t.enter(s)},updated(s,{value:a,oldValue:t},{transition:n}){!a!=!t&&(n?a?(n.beforeEnter(s),al(s,!0),n.enter(s)):n.leave(s,(()=>{al(s,!1)})):al(s,a))},beforeUnmount(s,{value:a}){al(s,a)}};function al(s,a){s.style.display=a?s._vod:"none"}const tl=k({patchProp:(s,a,t,n,e=!1,l,c,p,o)=>{"class"===a?function(s,a,t){const n=s._vtc;n&&(a=(a?[a,...n]:[...n]).join(" ")),null==a?s.removeAttribute("class"):t?s.setAttribute("class",a):s.className=a}(s,n,e):"style"===a?function(s,a,t){const n=s.style,e=n.display;if(t)if(D(t))a!==t&&(n.cssText=t);else{for(const s in t)Pe(n,s,t[s]);if(a&&!D(a))for(const s in a)null==t[s]&&Pe(n,s,"")}else s.removeAttribute("style");"_vod"in s&&(n.display=e)}(s,t,n):w(a)?_(a)||Re(s,a,0,n,c):("."===a[0]?(a=a.slice(1),1):"^"===a[0]?(a=a.slice(1),0):function(s,a,t,n){if(n)return"innerHTML"===a||"textContent"===a||!!(a in s&&Be.test(a)&&I(t));if("spellcheck"===a||"draggable"===a)return!1;if("form"===a)return!1;if("list"===a&&"INPUT"===s.tagName)return!1;if("type"===a&&"TEXTAREA"===s.tagName)return!1;if(Be.test(a)&&D(t))return!1;return a in s}(s,a,n,e))?function(s,a,t,n,e,l,c){if("innerHTML"===a||"textContent"===a)return n&&c(n,e,l),void(s[a]=null==t?"":t);if("value"===a&&"PROGRESS"!==s.tagName){s._value=t;const n=null==t?"":t;return s.value!==n&&(s.value=n),void(null==t&&s.removeAttribute(a))}if(""===t||null==t){const n=typeof s[a];if("boolean"===n)return void(s[a]=r(t));if(null==t&&"string"===n)return s[a]="",void s.removeAttribute(a);if("number"===n){try{s[a]=0}catch(p){}return void s.removeAttribute(a)}}try{s[a]=t}catch(o){}}(s,a,n,l,c,p,o):("true-value"===a?s._trueValue=n:"false-value"===a&&(s._falseValue=n),function(s,a,t,n,e){if(n&&a.startsWith("xlink:"))null==t?s.removeAttributeNS(Ie,a.slice(6,a.length)):s.setAttributeNS(Ie,a,t);else{const n=d(a);null==t||n&&!r(t)?s.removeAttribute(a):s.setAttribute(a,n?"":t)}}(s,a,n,e))}},ze);let nl;const el=(...s)=>{const a=(nl||(nl=Kt(tl))).createApp(...s),{mount:t}=a;return a.mount=s=>{const n=function(s){if(D(s)){return document.querySelector(s)}return s}(s);if(!n)return;const e=a._component;I(e)||e.render||e.template||(e.template=n.innerHTML),n.innerHTML="";const l=t(n,!1,n instanceof SVGElement);return n instanceof Element&&(n.removeAttribute("v-cloak"),n.setAttribute("data-v-app","")),l},a};var ll=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const cl=["href","innerHTML"],pl=["innerHTML"];var ol=ll({name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const s=(this.item.title||this.item.name).split(" ");return`${s[0]} ${s.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(s,a,t,n,e,l){const c=Qt("router-link");return t.item.path?(on(),gn(c,{key:0,class:j({active:l.active}),to:l.path,innerHTML:l.itemName},null,8,["class","to","innerHTML"])):t.item.link?(on(),un("a",{key:1,href:t.item.link,innerHTML:l.itemName},null,8,cl)):(on(),un("a",{key:2,innerHTML:l.itemName},null,8,pl))}]]);const dl={name:"VanDocNav",components:{[ol.name]:ol},props:{lang:String,navConfig:Array},data:()=>({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:s}=window;this.top=Math.max(0,64-s)}}},rl={class:"van-doc-nav__title"};var il=ll(dl,[["render",function(s,a,t,n,e,l){const c=Qt("van-doc-nav-link");return on(),un("div",{class:"van-doc-nav",style:i(l.style)},[(on(!0),un(tn,null,Pn(t.navConfig,((s,a)=>(on(),un("div",{class:"van-doc-nav__group",key:a},[yn("div",rl,m(s.title),1),s.items?(on(!0),un(tn,{key:0},Pn(s.items,((s,a)=>(on(),un("div",{key:a,class:"van-doc-nav__item"},[qn(c,{item:s,base:l.base},null,8,["item","base"])])))),128)):kn("v-if",!0)])))),128))],4)}]]); -/*! @docsearch/js 3.0.0-alpha.40 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -function hl(s){return(hl="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function ul(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function gl(){return(gl=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t3)for(t=[t],l=3;l0?Il(u.type,u.props,u.key,null,u.__v):u)){if(u.__=t,u.__b=t.__b+1,null===(h=v[r])||h&&u.key==h.key&&u.type===h.type)v[r]=void 0;else for(i=0;i3)for(t=[t],l=3;l=t.__.length&&t.__.push({}),t.__[s]}function hc(s,a,t){var n=ic(ac++,2);return n.t=s,n.__c||(n.__=[t?t(a):yc(void 0,a),function(s){var a=n.t(n.__[0],s);n.__[0]!==a&&(n.__=[a,n.__[1]],n.__c.setState({}))}],n.__c=tc),n.__}function uc(s,a){var t=ic(ac++,4);!ql.__s&&fc(t.__H,a)&&(t.__=s,t.__H=a,tc.__h.push(t))}function gc(s,a){var t=ic(ac++,7);return fc(t.__H,a)&&(t.__=s(),t.__H=a,t.__h=s),t.__}function jc(){lc.forEach((function(s){if(s.__P)try{s.__H.__h.forEach(vc),s.__H.__h.forEach(bc),s.__H.__h=[]}catch(a){s.__H.__h=[],ql.__e(a,s.__v)}})),lc=[]}ql.__b=function(s){tc=null,cc&&cc(s)},ql.__r=function(s){pc&&pc(s),ac=0;var a=(tc=s.__c).__H;a&&(a.__h.forEach(vc),a.__h.forEach(bc),a.__h=[])},ql.diffed=function(s){oc&&oc(s);var a=s.__c;a&&a.__H&&a.__H.__h.length&&(1!==lc.push(a)&&nc===ql.requestAnimationFrame||((nc=ql.requestAnimationFrame)||function(s){var a,t=function(){clearTimeout(n),mc&&cancelAnimationFrame(a),setTimeout(s)},n=setTimeout(t,100);mc&&(a=requestAnimationFrame(t))})(jc)),tc=void 0},ql.__c=function(s,a){a.some((function(s){try{s.__h.forEach(vc),s.__h=s.__h.filter((function(s){return!s.__||bc(s)}))}catch(t){a.some((function(s){s.__h&&(s.__h=[])})),a=[],ql.__e(t,s.__v)}})),dc&&dc(s,a)},ql.unmount=function(s){rc&&rc(s);var a=s.__c;if(a&&a.__H)try{a.__H.__.forEach(vc)}catch(t){ql.__e(t,a.__v)}};var mc="function"==typeof requestAnimationFrame;function vc(s){var a=tc;"function"==typeof s.__c&&s.__c(),tc=a}function bc(s){var a=tc;s.__c=s.__(),tc=a}function fc(s,a){return!s||s.length!==a.length||a.some((function(a,t){return a!==s[t]}))}function yc(s,a){return"function"==typeof a?a(s):a}function qc(s,a){for(var t in a)s[t]=a[t];return s}function xc(s,a){for(var t in s)if("__source"!==t&&!(t in a))return!0;for(var n in a)if("__source"!==n&&s[n]!==a[n])return!0;return!1}function wc(s){this.props=s}(wc.prototype=new Al).isPureReactComponent=!0,wc.prototype.shouldComponentUpdate=function(s,a){return xc(this.props,s)||xc(this.state,a)};var _c=ql.__b;ql.__b=function(s){s.type&&s.type.__f&&s.ref&&(s.props.ref=s.ref,s.ref=null),_c&&_c(s)};var kc="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,Sc=function(s,a){return null==s?null:Ml(Ml(s).map(a))},zc={map:Sc,forEach:Sc,count:function(s){return s?Ml(s).length:0},only:function(s){var a=Ml(s);if(1!==a.length)throw"Children.only";return a[0]},toArray:Ml},Cc=ql.__e;function Pc(){this.__u=0,this.t=null,this.__b=null}function Oc(s){var a=s.__.__c;return a&&a.__e&&a.__e(s)}function Ec(){this.u=null,this.o=null}ql.__e=function(s,a,t){if(s.then)for(var n,e=a;e=e.__;)if((n=e.__c)&&n.__c)return null==a.__e&&(a.__e=t.__e,a.__k=t.__k),n.__c(s,a);Cc(s,a,t)},(Pc.prototype=new Al).__c=function(s,a){var t=a.__c,n=this;null==n.t&&(n.t=[]),n.t.push(t);var e=Oc(n.__v),l=!1,c=function(){l||(l=!0,t.componentWillUnmount=t.__c,e?e(p):p())};t.__c=t.componentWillUnmount,t.componentWillUnmount=function(){c(),t.__c&&t.__c()};var p=function(){if(!--n.__u){if(n.state.__e){var s=n.state.__e;n.__v.__k[0]=function s(a,t,n){return a&&(a.__v=null,a.__k=a.__k&&a.__k.map((function(a){return s(a,t,n)})),a.__c&&a.__c.__P===t&&(a.__e&&n.insertBefore(a.__e,a.__d),a.__c.__e=!0,a.__c.__P=n)),a}(s,s.__c.__P,s.__c.__O)}var a;for(n.setState({__e:n.__b=null});a=n.t.pop();)a.forceUpdate()}},o=!0===a.__h;n.__u++||o||n.setState({__e:n.__b=n.__v.__k[0]}),s.then(c,c)},Pc.prototype.componentWillUnmount=function(){this.t=[]},Pc.prototype.render=function(s,a){if(this.__b){if(this.__v.__k){var t=document.createElement("div"),n=this.__v.__k[0].__c;this.__v.__k[0]=function s(a,t,n){return a&&(a.__c&&a.__c.__H&&(a.__c.__H.__.forEach((function(s){"function"==typeof s.__c&&s.__c()})),a.__c.__H=null),null!=(a=qc({},a)).__c&&(a.__c.__P===n&&(a.__c.__P=t),a.__c=null),a.__k=a.__k&&a.__k.map((function(a){return s(a,t,n)}))),a}(this.__b,t,n.__O=n.__P)}this.__b=null}var e=a.__e&&El(Dl,null,s.fallback);return e&&(e.__h=null),[El(Dl,null,a.__e?null:s.children),e]};var Ic=function(s,a,t){if(++t[1]===t[0]&&s.o.delete(a),s.props.revealOrder&&("t"!==s.props.revealOrder[0]||!s.o.size))for(t=s.u;t;){for(;t.length>3;)t.pop()();if(t[1]>>1,1),a.i.removeChild(s)}}),Ql(El(Dc,{context:a.context},s.__v),a.l)):a.l&&a.componentWillUnmount()}function Tc(s,a){return El(Ac,{__v:s,i:a})}(Ec.prototype=new Al).__e=function(s){var a=this,t=Oc(a.__v),n=a.o.get(s);return n[0]++,function(e){var l=function(){a.props.revealOrder?(n.push(e),Ic(a,s,n)):e()};t?t(l):l()}},Ec.prototype.render=function(s){this.u=null,this.o=new Map;var a=Ml(s.children);s.revealOrder&&"b"===s.revealOrder[0]&&a.reverse();for(var t=a.length;t--;)this.o.set(a[t],this.u=[1,0,this.u]);return s.children},Ec.prototype.componentDidUpdate=Ec.prototype.componentDidMount=function(){var s=this;this.o.forEach((function(a,t){Ic(s,t,a)}))};var Nc="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,Fc=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Rc=function(s){return("undefined"!=typeof Symbol&&"symbol"==hl(Symbol())?/fil|che|rad/i:/fil|che|ra/i).test(s)};function Lc(s,a,t){return null==a.__k&&(a.textContent=""),Ql(s,a),"function"==typeof t&&t(),s?s.__c:null}Al.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(s){Object.defineProperty(Al.prototype,s,{configurable:!0,get:function(){return this["UNSAFE_"+s]},set:function(a){Object.defineProperty(this,s,{configurable:!0,writable:!0,value:a})}})}));var Bc=ql.event;function Mc(){}function $c(){return this.cancelBubble}function Uc(){return this.defaultPrevented}ql.event=function(s){return Bc&&(s=Bc(s)),s.persist=Mc,s.isPropagationStopped=$c,s.isDefaultPrevented=Uc,s.nativeEvent=s};var Vc,Hc={configurable:!0,get:function(){return this.class}},Wc=ql.vnode;ql.vnode=function(s){var a=s.type,t=s.props,n=t;if("string"==typeof a){for(var e in n={},t){var l=t[e];"value"===e&&"defaultValue"in t&&null==l||("defaultValue"===e&&"value"in t&&null==t.value?e="value":"download"===e&&!0===l?l="":/ondoubleclick/i.test(e)?e="ondblclick":/^onchange(textarea|input)/i.test(e+a)&&!Rc(t.type)?e="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(e)?e=e.toLowerCase():Fc.test(e)?e=e.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===l&&(l=void 0),n[e]=l)}"select"==a&&n.multiple&&Array.isArray(n.value)&&(n.value=Ml(t.children).forEach((function(s){s.props.selected=-1!=n.value.indexOf(s.props.value)}))),"select"==a&&null!=n.defaultValue&&(n.value=Ml(t.children).forEach((function(s){s.props.selected=n.multiple?-1!=n.defaultValue.indexOf(s.props.value):n.defaultValue==s.props.value}))),s.props=n}a&&t.class!=t.className&&(Hc.enumerable="className"in t,null!=t.className&&(n.class=t.className),Object.defineProperty(n,"className",Hc)),s.$$typeof=Nc,Wc&&Wc(s)};var Gc=ql.__r;ql.__r=function(s){Gc&&Gc(s),Vc=s.__c};var Kc={ReactCurrentDispatcher:{current:{readContext:function(s){return Vc.__n[s.__c].props.value}}}};function Jc(s){return!!s&&s.$$typeof===Nc}"object"==("undefined"==typeof performance?"undefined":hl(performance))&&"function"==typeof performance.now&&performance.now.bind(performance);var Yc={useState:function(s){return ec=1,hc(yc,s)},useReducer:hc,useEffect:function(s,a){var t=ic(ac++,3);!ql.__s&&fc(t.__H,a)&&(t.__=s,t.__H=a,tc.__H.__h.push(t))},useLayoutEffect:uc,useRef:function(s){return ec=5,gc((function(){return{current:s}}),[])},useImperativeHandle:function(s,a,t){ec=6,uc((function(){"function"==typeof s?s(a()):s&&(s.current=a())}),null==t?t:t.concat(s))},useMemo:gc,useCallback:function(s,a){return ec=8,gc((function(){return s}),a)},useContext:function(s){var a=tc.context[s.__c],t=ic(ac++,9);return t.__c=s,a?(null==t.__&&(t.__=!0,a.sub(tc)),a.props.value):s.__},useDebugValue:function(s,a){ql.useDebugValue&&ql.useDebugValue(a?a(s):s)},version:"16.8.0",Children:zc,render:Lc,hydrate:function(s,a,t){return Zl(s,a),"function"==typeof t&&t(),s?s.__c:null},unmountComponentAtNode:function(s){return!!s.__k&&(Ql(null,s),!0)},createPortal:Tc,createElement:El,createContext:function(s,a){var t={__c:a="__cC"+kl++,__:s,Consumer:function(s,a){return s.children(a)},Provider:function(s){var t,n;return this.getChildContext||(t=[],(n={})[a]=this,this.getChildContext=function(){return n},this.shouldComponentUpdate=function(s){this.props.value!==s.value&&t.some(Fl)},this.sub=function(s){t.push(s);var a=s.componentWillUnmount;s.componentWillUnmount=function(){t.splice(t.indexOf(s),1),a&&a.call(s)}}),s.children}};return t.Provider.__=t.Consumer.contextType=t},createFactory:function(s){return El.bind(null,s)},cloneElement:function(s){return Jc(s)?sc.apply(null,arguments):s},createRef:function(){return{current:null}},Fragment:Dl,isValidElement:Jc,findDOMNode:function(s){return s&&(s.base||1===s.nodeType&&s)||null},Component:Al,PureComponent:wc,memo:function(s,a){function t(s){var t=this.props.ref,n=t==s.ref;return!n&&t&&(t.call?t(null):t.current=null),a?!a(this.props,s)||!n:xc(this.props,s)}function n(a){return this.shouldComponentUpdate=t,El(s,a)}return n.displayName="Memo("+(s.displayName||s.name)+")",n.prototype.isReactComponent=!0,n.__f=!0,n},forwardRef:function(s){function a(a,t){var n=qc({},a);return delete n.ref,s(n,(t=a.ref||t)&&("object"!=hl(t)||"current"in t)?t:null)}return a.$$typeof=kc,a.render=a,a.prototype.isReactComponent=a.__f=!0,a.displayName="ForwardRef("+(s.displayName||s.name)+")",a},unstable_batchedUpdates:function(s,a){return s(a)},StrictMode:Dl,Suspense:Pc,SuspenseList:Ec,lazy:function(s){var a,t,n;function e(e){if(a||(a=s()).then((function(s){t=s.default||s}),(function(s){n=s})),n)throw n;if(!t)throw a;return El(t,e)}return e.displayName="Lazy",e.__f=!0,e},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Kc};function Xc(){return Yc.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},Yc.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function Qc(){return Yc.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},Yc.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Zc(){return(Zc=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["translations"]),l=n.buttonText,c=void 0===l?"Search":l,p=n.buttonAriaLabel,o=void 0===p?"Search":p,d=gc((function(){return"undefined"!=typeof navigator?/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl":null}),[]);return Yc.createElement("button",Zc({type:"button",className:"DocSearch DocSearch-Button","aria-label":o},e,{ref:a}),Yc.createElement("span",{className:"DocSearch-Button-Container"},Yc.createElement(Qc,null),Yc.createElement("span",{className:"DocSearch-Button-Placeholder"},c)),Yc.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&Yc.createElement(Yc.Fragment,null,Yc.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===d?Yc.createElement(Xc,null):d),Yc.createElement("span",{className:"DocSearch-Button-Key"},"K"))))})),ap=0;function tp(s){return 0===s.collections.length?0:s.collections.reduce((function(s,a){return s+a.items.length}),0)}function np(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function ep(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function lp(s){return s.reduce((function(s,a){return s.concat(a)}),[])}function cp(s,a,t,n){if(!t)return null;if(s<0&&(null===a||null!==n&&0===a))return t+s;var e=(null===a?-1:a)+s;return e<=-1||e>=t?null===n?null:0:e}var pp=function(){};function op(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function dp(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function rp(s){return(rp="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function ip(s){var a,t,n=(t=(a=s).collections.map((function(s){return s.items.length})).reduce((function(s,a,t){var n=(s[t-1]||0)+a;return s.push(n),s}),[]).reduce((function(s,t){return t<=a.activeItemId?s+1:s}),0),a.collections[t]);if(!n)return null;var e=n.items[function(s){for(var a=s.state,t=s.collection,n=!1,e=0,l=0;!1===n;){var c=a.collections[e];if(c===t){n=!0;break}l+=c.items.length,e++}return a.activeItemId-l}({state:s,collection:n})],l=n.source;return{item:e,itemInputValue:l.getItemInputValue({item:e,state:s}),itemUrl:l.getItemUrl({item:e,state:s}),source:l}}function hp(s,a){return s===a||s.contains(a)}function up(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function gp(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);ts.length)&&(a=s.length);for(var t=0,n=new Array(a);t=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["event","nextState","props","query","refresh","store"]);Dp&&e.environment.clearTimeout(Dp);var d,r=o.setCollections,i=o.setIsOpen,h=o.setQuery,u=o.setActiveItemId,g=o.setStatus;return h(l),u(e.defaultActiveItemId),l||!1!==e.openOnFocus?(g("loading"),Dp=e.environment.setTimeout((function(){g("stalled")}),e.stallThreshold),e.getSources(Ep({query:l,refresh:c,state:p.getState()},o)).then((function(s){return g("loading"),Promise.all(s.map((function(s){return Promise.resolve(s.getItems(Ep({query:l,refresh:c,state:p.getState()},o))).then((function(a){return function(s,a){return t=s,Boolean(null==t?void 0:t.execute)?Sp(Sp({},s),{},{requests:s.queries.map((function(t){return{query:t,sourceId:a,transformResponse:s.transformResponse}}))}):{items:s,sourceId:a};var t}(a,s.sourceId)}))}))).then(Pp).then((function(a){return function(s,a){return a.map((function(a){var t,n=s.filter((function(s){return s.sourceId===a.sourceId})),e=n.map((function(s){return s.items})),l=n[0].transformResponse,c=l?l({results:t=e.map((function(s){var a;return gp(gp({},s),{},{hits:null===(a=s.hits)||void 0===a?void 0:a.map((function(a){return gp(gp({},a),{},{__autocomplete_indexName:s.index,__autocomplete_queryID:s.queryID})}))})})),hits:t.map((function(s){return s.hits})).filter(Boolean),facetHits:t.map((function(s){var a;return null===(a=s.facetHits)||void 0===a?void 0:a.map((function(s){return{label:s.value,count:s.count,_highlightResult:{label:{value:s.highlighted}}}}))})).filter(Boolean)}):e;return Array.isArray(c),'The `getItems` function from source "'.concat(a.sourceId,'" must return an array of items but returned type ').concat(JSON.stringify(wp(c)),":\n\n").concat(JSON.stringify(c,null,2),".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),c.every(Boolean),'The `getItems` function from source "'.concat(a.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:a,items:c}}))}(a,s)})).then((function(s){var t;g("idle"),r(s);var d=e.shouldPanelOpen({state:p.getState()});i(null!==(t=n.isOpen)&&void 0!==t?t:e.openOnFocus&&!l&&d||d);var h=ip(p.getState());if(null!==p.getState().activeItemId&&h){var u=h.item,j=h.itemInputValue,m=h.itemUrl,v=h.source;v.onActive(Ep({event:a,item:u,itemInputValue:j,itemUrl:m,refresh:c,source:v,state:p.getState()},o))}})).finally((function(){Dp&&e.environment.clearTimeout(Dp)}))}))):(g("idle"),r(p.getState().collections.map((function(s){return Ep(Ep({},s),{},{items:[]})}))),i(null!==(d=n.isOpen)&&void 0!==d?d:e.shouldPanelOpen({state:p.getState()})),Promise.resolve())}function Tp(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Np(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}function $p(s){var a=s.props,t=s.refresh,n=s.store,e=Mp(s,["props","refresh","store"]);return{getEnvironmentProps:function(s){var t=s.inputElement,e=s.formElement,l=s.panelElement;return Lp({onTouchStart:function(s){!1!==n.getState().isOpen&&s.target!==t&&!1===[e,l].some((function(t){return hp(t,s.target)||hp(t,a.environment.document.activeElement)}))&&n.dispatch("blur",null)},onTouchMove:function(s){!1!==n.getState().isOpen&&t===a.environment.document.activeElement&&s.target!==t&&t.blur()}},Mp(s,["inputElement","formElement","panelElement"]))},getRootProps:function(s){return Lp({role:"combobox","aria-expanded":n.getState().isOpen,"aria-haspopup":"listbox","aria-owns":n.getState().isOpen?"".concat(a.id,"-list"):void 0,"aria-labelledby":"".concat(a.id,"-label")},s)},getFormProps:function(s){return s.inputElement,Lp({action:"",noValidate:!0,role:"search",onSubmit:function(l){var c;l.preventDefault(),a.onSubmit(Lp({event:l,refresh:t,state:n.getState()},e)),n.dispatch("submit",null),null===(c=s.inputElement)||void 0===c||c.blur()},onReset:function(l){var c;l.preventDefault(),a.onReset(Lp({event:l,refresh:t,state:n.getState()},e)),n.dispatch("reset",null),null===(c=s.inputElement)||void 0===c||c.focus()}},Mp(s,["inputElement"]))},getLabelProps:function(s){return Lp({htmlFor:"".concat(a.id,"-input"),id:"".concat(a.id,"-label")},s)},getInputProps:function(s){function l(s){(a.openOnFocus||Boolean(n.getState().query))&&Ap(Lp({event:s,props:a,query:n.getState().completion||n.getState().query,refresh:t,store:n},e)),n.dispatch("focus",null)}var c="ontouchstart"in a.environment,p=s||{},o=(p.inputElement,p.maxLength),d=void 0===o?512:o,r=Mp(p,["inputElement","maxLength"]),i=ip(n.getState());return Lp({"aria-autocomplete":"both","aria-activedescendant":n.getState().isOpen&&null!==n.getState().activeItemId?"".concat(a.id,"-item-").concat(n.getState().activeItemId):void 0,"aria-controls":n.getState().isOpen?"".concat(a.id,"-list"):void 0,"aria-labelledby":"".concat(a.id,"-label"),value:n.getState().completion||n.getState().query,id:"".concat(a.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:null!=i&&i.itemUrl?"go":"search",spellCheck:"false",autoFocus:a.autoFocus,placeholder:a.placeholder,maxLength:d,type:"search",onChange:function(s){Ap(Lp({event:s,props:a,query:s.currentTarget.value.slice(0,d),refresh:t,store:n},e))},onKeyDown:function(s){!function(s){var a=s.event,t=s.props,n=s.refresh,e=s.store,l=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["event","props","refresh","store"]);if("ArrowUp"===a.key||"ArrowDown"===a.key){var c=function(){var s=t.environment.document.getElementById("".concat(t.id,"-item-").concat(e.getState().activeItemId));s&&(s.scrollIntoViewIfNeeded?s.scrollIntoViewIfNeeded(!1):s.scrollIntoView(!1))},p=function(){var s=ip(e.getState());if(null!==e.getState().activeItemId&&s){var t=s.item,c=s.itemInputValue,p=s.itemUrl,o=s.source;o.onActive(Np({event:a,item:t,itemInputValue:c,itemUrl:p,refresh:n,source:o,state:e.getState()},l))}};a.preventDefault(),!1===e.getState().isOpen&&(t.openOnFocus||Boolean(e.getState().query))?Ap(Np({event:a,props:t,query:e.getState().query,refresh:n,store:e},l)).then((function(){e.dispatch(a.key,{nextActiveItemId:t.defaultActiveItemId}),p(),setTimeout(c,0)})):(e.dispatch(a.key,{}),p(),c())}else if("Escape"===a.key)a.preventDefault(),e.dispatch(a.key,null);else if("Enter"===a.key){if(null===e.getState().activeItemId||e.getState().collections.every((function(s){return 0===s.items.length})))return;a.preventDefault();var o=ip(e.getState()),d=o.item,r=o.itemInputValue,i=o.itemUrl,h=o.source;if(a.metaKey||a.ctrlKey)void 0!==i&&(h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),t.navigator.navigateNewTab({itemUrl:i,item:d,state:e.getState()}));else if(a.shiftKey)void 0!==i&&(h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),t.navigator.navigateNewWindow({itemUrl:i,item:d,state:e.getState()}));else if(a.altKey);else{if(void 0!==i)return h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),void t.navigator.navigate({itemUrl:i,item:d,state:e.getState()});Ap(Np({event:a,nextState:{isOpen:!1},props:t,query:r,refresh:n,store:e},l)).then((function(){h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l))}))}}}(Lp({event:s,props:a,refresh:t,store:n},e))},onFocus:l,onBlur:function(){c||n.dispatch("blur",null)},onClick:function(t){s.inputElement!==a.environment.document.activeElement||n.getState().isOpen||l(t)}},r)},getPanelProps:function(s){return Lp({onMouseDown:function(s){s.preventDefault()},onMouseLeave:function(){n.dispatch("mouseleave",null)}},s)},getListProps:function(s){return Lp({role:"listbox","aria-labelledby":"".concat(a.id,"-label"),id:"".concat(a.id,"-list")},s)},getItemProps:function(s){var l=s.item,c=s.source,p=Mp(s,["item","source"]);return Lp({id:"".concat(a.id,"-item-").concat(l.__autocomplete_id),role:"option","aria-selected":n.getState().activeItemId===l.__autocomplete_id,onMouseMove:function(s){if(l.__autocomplete_id!==n.getState().activeItemId){n.dispatch("mousemove",l.__autocomplete_id);var a=ip(n.getState());if(null!==n.getState().activeItemId&&a){var c=a.item,p=a.itemInputValue,o=a.itemUrl,d=a.source;d.onActive(Lp({event:s,item:c,itemInputValue:p,itemUrl:o,refresh:t,source:d,state:n.getState()},e))}}},onMouseDown:function(s){s.preventDefault()},onClick:function(s){var p=c.getItemInputValue({item:l,state:n.getState()}),o=c.getItemUrl({item:l,state:n.getState()});(o?Promise.resolve():Ap(Lp({event:s,nextState:{isOpen:!1},props:a,query:p,refresh:t,store:n},e))).then((function(){c.onSelect(Lp({event:s,item:l,itemInputValue:p,itemUrl:o,refresh:t,source:c,state:n.getState()},e))}))}},p)}}}function Up(s){var a,t=s.state;return!1===t.isOpen||null===t.activeItemId?null:(null===(a=ip(t))||void 0===a?void 0:a.itemInputValue)||null}function Vp(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Hp(s){for(var a=1;a0}},a),{},{id:null!==(n=a.id)&&void 0!==n?n:"autocomplete-".concat(ap++),plugins:l,initialState:qp({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},a.initialState),onStateChange:function(s){var t;null===(t=a.onStateChange)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onStateChange)||void 0===t?void 0:t.call(a,s)}))},onSubmit:function(s){var t;null===(t=a.onSubmit)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onSubmit)||void 0===t?void 0:t.call(a,s)}))},onReset:function(s){var t;null===(t=a.onReset)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onReset)||void 0===t?void 0:t.call(a,s)}))},getSources:function(s){return Promise.all([].concat(function(s){return function(s){if(Array.isArray(s))return fp(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return fp(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?fp(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(l.map((function(s){return s.getSources}))),[a.getSources]).filter(Boolean).map((function(a){return function(s,a){var t=[];return Promise.resolve(s(a)).then((function(s){return Array.isArray(s),"The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(rp(s)),":\n\n").concat(JSON.stringify(s,null,2)),Promise.all(s.filter((function(s){return Boolean(s)})).map((function(s){if(s.sourceId,t.includes(s.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(s.sourceId)," is not unique."));t.push(s.sourceId);var a=function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t0&&Yc.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},Yc.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),Yc.createElement("ul",null,a.slice(0,3).reduce((function(a,t){return[].concat(function(s){return function(s){if(Array.isArray(s))return jo(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return jo(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?jo(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(a),[Yc.createElement("li",{key:t},Yc.createElement("button",{className:"DocSearch-Prefill",key:t,onClick:function(){s.setQuery(t.toLowerCase()+" "),s.refresh(),s.inputRef.current.focus()}},t))])}),[]))),Yc.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",Yc.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(s.indexName,']+Missing+results+for+query+"').concat(s.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function vo(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function bo(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:yo(a,"_snippetResult.".concat(t,".value"))||yo(a,t)}}))}function xo(s,a){return function(s){if(Array.isArray(s))return s}(s)||function(s,a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s)){var t=[],n=!0,e=!1,l=void 0;try{for(var c,p=s[Symbol.iterator]();!(n=(c=p.next()).done)&&(t.push(c.value),!a||t.length!==a);n=!0);}catch(o){e=!0,l=o}finally{try{n||null==p.return||p.return()}finally{if(e)throw l}}return t}}(s,a)||function(s,a){if(s){if("string"==typeof s)return wo(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?wo(s,a):void 0}}(s,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function wo(s,a){(null==a||a>s.length)&&(a=s.length);for(var t=0,n=new Array(a);t|<\/mark>)/g,Eo=RegExp(Oo.source);function Io(s){var a,t,n,e,l,c=s;if(!c.__docsearch_parent&&!s._highlightResult)return s.hierarchy.lvl0;var p=((c.__docsearch_parent?null===(a=c.__docsearch_parent)||void 0===a||null===(t=a._highlightResult)||void 0===t||null===(n=t.hierarchy)||void 0===n?void 0:n.lvl0:null===(e=s._highlightResult)||void 0===e||null===(l=e.hierarchy)||void 0===l?void 0:l.lvl0)||{}).value;return p&&Eo.test(p)?p.replace(Oo,""):p}function Do(){return(Do=Object.assign||function(s){for(var a=1;a0}));return s.state.query?!1===a?Yc.createElement(mo,s):Yc.createElement(Ao,s):Yc.createElement(No,Fo({},s,{hasCollections:a}))}),(function(s,a){return"loading"===a.state.status||"stalled"===a.state.status}));function Lo(){return(Lo=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(a,["_highlightResult","_snippetResult"])),c=l.findIndex((function(s){return s.objectID===t.objectID}));c>-1&&l.splice(c,1),l.unshift(t),l=l.slice(0,n),e.setItem(l)},remove:function(s){l=l.filter((function(a){return a.objectID!==s.objectID})),e.setItem(l)},getAll:function(){return l}}}function $o(s){var a,t="algoliasearch-client-js-".concat(s.key),n=function(){return void 0===a&&(a=s.localStorage||window.localStorage),a},e=function(){return JSON.parse(n().getItem(t)||"{}")};return{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var t=JSON.stringify(s),n=e()[t];return Promise.all([n||a(),void 0!==n])})).then((function(s){var a=vl(s,2),n=a[0],e=a[1];return Promise.all([n,e||t.miss(n)])})).then((function(s){return vl(s,1)[0]}))},set:function(s,a){return Promise.resolve().then((function(){var l=e();return l[JSON.stringify(s)]=a,n().setItem(t,JSON.stringify(l)),a}))},delete:function(s){return Promise.resolve().then((function(){var a=e();delete a[JSON.stringify(s)],n().setItem(t,JSON.stringify(a))}))},clear:function(){return Promise.resolve().then((function(){n().removeItem(t)}))}}}function Uo(s){var a=bl(s.caches),t=a.shift();return void 0===t?{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},n=a();return n.then((function(s){return Promise.all([s,t.miss(s)])})).then((function(s){return vl(s,1)[0]}))},set:function(s,a){return Promise.resolve(a)},delete:function(s){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(s,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t.get(s,n,e).catch((function(){return Uo({caches:a}).get(s,n,e)}))},set:function(s,n){return t.set(s,n).catch((function(){return Uo({caches:a}).set(s,n)}))},delete:function(s){return t.delete(s).catch((function(){return Uo({caches:a}).delete(s)}))},clear:function(){return t.clear().catch((function(){return Uo({caches:a}).clear()}))}}}function Vo(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},a={};return{get:function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},l=JSON.stringify(t);if(l in a)return Promise.resolve(s.serializable?JSON.parse(a[l]):a[l]);var c=n(),p=e&&e.miss||function(){return Promise.resolve()};return c.then((function(s){return p(s)})).then((function(){return c}))},set:function(t,n){return a[JSON.stringify(t)]=s.serializable?JSON.stringify(n):n,Promise.resolve(n)},delete:function(s){return delete a[JSON.stringify(s)],Promise.resolve()},clear:function(){return a={},Promise.resolve()}}}function Ho(s){for(var a=s.length-1;a>0;a--){var t=Math.floor(Math.random()*(a+1)),n=s[a];s[a]=s[t],s[t]=n}return s}function Wo(s,a){return a?(Object.keys(a).forEach((function(t){s[t]=a[t](s)})),s):s}function Go(s){for(var a=arguments.length,t=new Array(a>1?a-1:0),n=1;n0?n:void 0,timeout:t.timeout||a,headers:t.headers||{},queryParameters:t.queryParameters||{},cacheable:t.cacheable}}var Xo={Read:1,Write:2,Any:3};function Qo(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return ml(ml({},s),{},{status:a,lastUpdate:Date.now()})}function Zo(s){return"string"==typeof s?{protocol:"https",url:s,accept:Xo.Any}:{protocol:s.protocol||"https",url:s.url,accept:s.accept||Xo.Any}}var sd="POST";function ad(s,a,t,n){var e,l,c,p=[],o=function(s,a){if("GET"!==s.method&&(void 0!==s.data||void 0!==a.data)){var t=Array.isArray(s.data)?s.data:ml(ml({},s.data),a.data);return JSON.stringify(t)}}(t,n),d=(e=n,l=ml(ml({},s.headers),e.headers),c={},Object.keys(l).forEach((function(s){var a=l[s];c[s.toLowerCase()]=a})),c),r=t.method,i="GET"!==t.method?{}:ml(ml({},t.data),n.data),h=ml(ml(ml({"x-algolia-agent":s.userAgent.value},s.queryParameters),i),n.queryParameters),u=0,g=function a(e,l){var c=e.pop();if(void 0===c)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:ld(p)};var i={data:o,headers:d,method:r,url:nd(c,t.path,h),connectTimeout:l(u,s.timeouts.connect),responseTimeout:l(u,n.timeout)},g=function(s){var a={request:i,response:s,host:c,triesLeft:e.length};return p.push(a),a},j={onSucess:function(s){return function(s){try{return JSON.parse(s.content)}catch(a){throw{name:"DeserializationError",message:a.message,response:s}}}(s)},onRetry:function(t){var n=g(t);return t.isTimedOut&&u++,Promise.all([s.logger.info("Retryable failure",cd(n)),s.hostsCache.set(c,Qo(c,t.isTimedOut?3:2))]).then((function(){return a(e,l)}))},onFail:function(s){throw g(s),function(s,a){var t=s.content,n=s.status,e=t;try{e=JSON.parse(t).message}catch(l){}return{name:"ApiError",message:e,status:n,transporterStackTrace:a}}(s,ld(p))}};return s.requester.send(i).then((function(s){return t=j,e=(n=a=s).status,n.isTimedOut||function(s){var a=s.isTimedOut,t=s.status;return!a&&0==~~t}(n)||2!=~~(e/100)&&4!=~~(e/100)?t.onRetry(a):2==~~(a.status/100)?t.onSucess(a):t.onFail(a);var a,t,n,e}))};return function(s,a){return Promise.all(a.map((function(a){return s.get(a,(function(){return Promise.resolve(Qo(a))}))}))).then((function(s){var t=s.filter((function(s){return 1===(a=s).status||Date.now()-a.lastUpdate>12e4;var a})),n=s.filter((function(s){return 3===(a=s).status&&Date.now()-a.lastUpdate<=12e4;var a})),e=[].concat(bl(t),bl(n));return{getTimeout:function(s,a){return(0===n.length&&0===s?1:n.length+3+s)*a},statelessHosts:e.length>0?e.map((function(s){return Zo(s)})):a}}))}(s.hostsCache,a).then((function(s){return g(bl(s.statelessHosts).reverse(),s.getTimeout)}))}function td(s){var a={value:"Algolia for JavaScript (".concat(s,")"),add:function(s){var t="; ".concat(s.segment).concat(void 0!==s.version?" (".concat(s.version,")"):"");return-1===a.value.indexOf(t)&&(a.value="".concat(a.value).concat(t)),a}};return a}function nd(s,a,t){var n=ed(t),e="".concat(s.protocol,"://").concat(s.url,"/").concat("/"===a.charAt(0)?a.substr(1):a);return n.length&&(e+="?".concat(n)),e}function ed(s){return Object.keys(s).map((function(a){return Go("%s=%s",a,(t=s[a],"[object Object]"===Object.prototype.toString.call(t)||"[object Array]"===Object.prototype.toString.call(t)?JSON.stringify(s[a]):s[a]));var t})).join("&")}function ld(s){return s.map((function(s){return cd(s)}))}function cd(s){var a=s.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return ml(ml({},s),{},{request:ml(ml({},s.request),{},{headers:ml(ml({},s.request.headers),a)})})}var pd=function(s){return function(a){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={transporter:s.transporter,appId:s.appId,indexName:a};return Wo(n,t.methods)}},od=function(s){return function(a,t){var n=a.map((function(s){return ml(ml({},s),{},{params:ed(s.params||{})})}));return s.transporter.read({method:sd,path:"1/indexes/*/queries",data:{requests:n},cacheable:!0},t)}},dd=function(s){return function(a,t){return Promise.all(a.map((function(a){var n=a.params,e=n.facetName,l=n.facetQuery,c=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(n,["facetName","facetQuery"]);return pd(s)(a.indexName,{methods:{searchForFacetValues:hd}}).searchForFacetValues(e,l,ml(ml({},t),c))})))}},rd=function(s){return function(a,t,n){return s.transporter.read({method:sd,path:Go("1/answers/%s/prediction",s.indexName),data:{query:a,queryLanguages:t},cacheable:!0},n)}},id=function(s){return function(a,t){return s.transporter.read({method:sd,path:Go("1/indexes/%s/query",s.indexName),data:{query:a},cacheable:!0},t)}},hd=function(s){return function(a,t,n){return s.transporter.read({method:sd,path:Go("1/indexes/%s/facets/%s/query",s.indexName,a),data:{facetQuery:t},cacheable:!0},n)}};function ud(s,a,t){return function(s){var a,t,n,e,l=s.appId,c=(a=void 0!==s.authMode?s.authMode:Jo,t=l,n=s.apiKey,e={"x-algolia-api-key":n,"x-algolia-application-id":t},{headers:function(){return a===Jo?e:{}},queryParameters:function(){return a===Ko?e:{}}}),p=function(s){var a=s.hostsCache,t=s.logger,n=s.requester,e=s.requestsCache,l=s.responsesCache,c=s.timeouts,p=s.userAgent,o=s.hosts,d=s.queryParameters,r={hostsCache:a,logger:t,requester:n,requestsCache:e,responsesCache:l,timeouts:c,userAgent:p,headers:s.headers,queryParameters:d,hosts:o.map((function(s){return Zo(s)})),read:function(s,a){var t=Yo(a,r.timeouts.read),n=function(){return ad(r,r.hosts.filter((function(s){return 0!=(s.accept&Xo.Read)})),s,t)};if(!0!==(void 0!==t.cacheable?t.cacheable:s.cacheable))return n();var e={request:s,mappedRequestOptions:t,transporter:{queryParameters:r.queryParameters,headers:r.headers}};return r.responsesCache.get(e,(function(){return r.requestsCache.get(e,(function(){return r.requestsCache.set(e,n()).then((function(s){return Promise.all([r.requestsCache.delete(e),s])}),(function(s){return Promise.all([r.requestsCache.delete(e),Promise.reject(s)])})).then((function(s){var a=vl(s,2);return a[0],a[1]}))}))}),{miss:function(s){return r.responsesCache.set(e,s)}})},write:function(s,a){return ad(r,r.hosts.filter((function(s){return 0!=(s.accept&Xo.Write)})),s,Yo(a,r.timeouts.write))}};return r}(ml(ml({hosts:[{url:"".concat(l,"-dsn.algolia.net"),accept:Xo.Read},{url:"".concat(l,".algolia.net"),accept:Xo.Write}].concat(Ho([{url:"".concat(l,"-1.algolianet.com")},{url:"".concat(l,"-2.algolianet.com")},{url:"".concat(l,"-3.algolianet.com")}]))},s),{},{headers:ml(ml(ml({},c.headers()),{"content-type":"application/x-www-form-urlencoded"}),s.headers),queryParameters:ml(ml({},c.queryParameters()),s.queryParameters)}));return Wo({transporter:p,appId:l,addAlgoliaAgent:function(s,a){p.userAgent.add({segment:s,version:a})},clearCache:function(){return Promise.all([p.requestsCache.clear(),p.responsesCache.clear()]).then((function(){}))}},s.methods)}(ml(ml(ml({},{appId:s,apiKey:a,timeouts:{connect:1,read:2,write:30},requester:{send:function(s){return new Promise((function(a){var t=new XMLHttpRequest;t.open(s.method,s.url,!0),Object.keys(s.headers).forEach((function(a){return t.setRequestHeader(a,s.headers[a])}));var n,e=function(s,n){return setTimeout((function(){t.abort(),a({status:0,content:n,isTimedOut:!0})}),1e3*s)},l=e(s.connectTimeout,"Connection timeout");t.onreadystatechange=function(){t.readyState>t.OPENED&&void 0===n&&(clearTimeout(l),n=e(s.responseTimeout,"Socket timeout"))},t.onerror=function(){0===t.status&&(clearTimeout(l),clearTimeout(n),a({content:t.responseText||"Network request failed",status:t.status,isTimedOut:!1}))},t.onload=function(){clearTimeout(l),clearTimeout(n),a({content:t.responseText,status:t.status,isTimedOut:!1})},t.send(s.data)}))}},logger:(3,{debug:function(s,a){return Promise.resolve()},info:function(s,a){return Promise.resolve()},error:function(s,a){return console.error(s,a),Promise.resolve()}}),responsesCache:Vo(),requestsCache:Vo({serializable:!1}),hostsCache:Uo({caches:[$o({key:"".concat("4.8.5","-").concat(s)}),Vo()]}),userAgent:td("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Ko}),t),{},{methods:{search:od,searchForFacetValues:dd,multipleQueries:od,multipleSearchForFacetValues:dd,initIndex:function(s){return function(a){return pd(s)(a,{methods:{search:id,searchForFacetValues:hd,findAnswers:rd}})}}}}))}function gd(){return(gd=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t",highlightPostTag:"",hitsPerPage:20},r)}]).catch((function(s){throw"RetryError"===s.name&&e("error"),s})).then((function(s){var a=s.results[0],e=a.hits,l=a.nbHits,c=zo(e,(function(s){return Io(s)}));return t.context.searchSuggestions.length0&&(W(),T.current&&T.current.focus())}),[R,W]),Yc.useEffect((function(){function s(){if(I.current){var s=.01*window.innerHeight;I.current.style.setProperty("--docsearch-vh","".concat(s,"px"))}}return s(),window.addEventListener("resize",s),function(){window.removeEventListener("resize",s)}}),[]),Yc.createElement("div",gd({ref:E},H({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===P.status&&"DocSearch-Container--Stalled","error"===P.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(s){s.target===s.currentTarget&&h()}}),Yc.createElement("div",{className:"DocSearch-Modal",ref:I},Yc.createElement("header",{className:"DocSearch-SearchBar",ref:D},Yc.createElement(Bo,gd({},U,{state:P,autoFocus:0===R.length,onClose:h,inputRef:T,isFromSelection:Boolean(R)&&R===F}))),Yc.createElement("div",{className:"DocSearch-Dropdown",ref:A},Yc.createElement(Ro,gd({},U,{indexName:p,state:P,hitComponent:m,resultsFooterComponent:b,disableUserPersonalization:k,recentSearches:M,favoriteSearches:B,onItemClick:function(s){$(s),h()},inputRef:T}))),Yc.createElement("footer",{className:"DocSearch-Footer"},Yc.createElement(Zp,null))))}function yd(){return(yd=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t{for(var t in a||(a={}))l.call(a,t)&&p(s,t,a[t]);if(e)for(var t of e(a))c.call(a,t)&&p(s,t,a[t]);return s})({},this.searchConfig),s=t(a,n({container:"#docsearch"})),Lc(Yc.createElement(wd,gl({},s,{transformSearchClient:function(a){return a.addAlgoliaAgent("docsearch.js","3.0.0-alpha.40"),s.transformSearchClient?s.transformSearchClient(a):a}})),function(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof s?a.document.querySelector(s):s}(s.container,s.environment)))}}},[["render",function(s,a,t,n,e,l){return on(),un("div",_d)}]]);const Sd={class:"van-doc-markdown-body"},zd=_n('

更新日志

v1.9.0

2021-09-27

Bug Fixes

  • Slider: 移除 theme mixin #4520
  • Tab: 修复初始位置不正确问题 #4521

Document

  • ActionSheet: 添加 show 属性说明 #4518

Feature

  • Slider: 添加 vertical 属性 #4486

Performance

  • 移除 CSS variables 兼容代码 #4487

v1.8.7

2021-09-22

Features

  • Icons: 新增 guide-o 图标 #4507

1.8.6

2021-09-20

Features

  • Calendar: 新增 confirmDisabledText 默认文案 #4490) (8629da1

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

  • Calendar: 修复超出选择范围 toast 提示一直存在问题 #4474
  • page-scroll: 修复 isDef 取反问题 #4488

1.8.4

2021-09-07

Bug Fixes

  • page-scroll: 修复 getCurrentPage 为空时报错 #4458

Features

  • Field: 新增 clear-trigger 属性 #4461
  • Search: 新增 clear-icon 属性 #4463
  • Search: 新增 clear-trigger 属性 9e17b13
  • Slider: 新增 range 属性 #4442

v1.8.3

2021-08-30

Bug Fixes

  • Calendar: 修复 default-date 属性失效问题 #4430
  • ShareSheet: 调整 overlayStyle 属性类型为 string 8c408e2
  • Stepper: 调整 minus/plus slots 位置 #4427
  • Sticky: 修复 root 为 null 时，读取 root.top 报错问题 #4433
  • Calendar: 调整 minDate 和 maxDate 传值类型为 Number 37d8e69

Features

  • Popup: 新增 lock-scroll 属性 #4384

Performance Improvements

  • Radio: label 的 margin-left 改为 padding-left，增大可点击区域，增强用户体验 #4165

v1.8.2

2021-08-18

Bug Fixes

  • Calendar: 修复 template 引用路径不是相对路径的问题 7f7cf6
  • Field: 修复 template 引用路径不是相对路径的问题 6dd42a

v1.8.1

2021-08-18

Feature

  • Calendar: 新增 click-subtitle 事件 #4385
  • Circle: 使用 setTimeout 代替 setInterval #4401

Bug Fixes

  • Picker: 修复 template 引用路径不是相对路径的问题 #4408

v1.8.0

2021-08-11

Feature

  • Overlay: 新增 lock-scroll 属性 #4383
  • search: 新增 click-input 事件 #4357

Performance

  • 移除了 iOS8 相关的 polyfill，减少包体积 #4395

v1.7.2

2021-07-19

Bug Fixes

  • Calendar: 初始日期设置为当前日期 #4339

Features

  • Cell: CellGroup 新增 inset 属性 #4341
  • Search: 新增 click-input 事件 #4337

1.7.1

2021-07-06

Bug Fixes

  • Col: 修复样式问题 #4322
  • Grid: 增加 icon-prefix 属性默认值 #4318
  • IndexBar: 修复当索引列表为空时报错 #4310

1.7.0

2021-07-04

Bug Fixes

  • Button: 修复 type 为 getUserInfo & wx.getUserProfile 可用时 lang 参数失效 #4250
  • ShareSheet: 新增内置 icon weapp-qrcode wechat-moments #4256

Features

  • Checkbox: 增加 direction 属性，设置排列方向 #4265
  • ConfigProvider: 增加全局配置组件 #4279
  • Grid: 增加 reverse 属性，支持文本&图片位置互换 #4280
  • GridItem: 增加 icon-prefix 属性，支持第三方字体 #4276
  • Rate: 增加更多 css 变量 #4297
  • Slider: 增加更多 css 变量 #4305

Improvements

  • wxs style 方法支持驼峰变量命名，以便能更好的在 wxml 中使用 #4281

1.6.9

2021-06-06

Bug Fixes

  • DatetimePicker: 修复 动态设置 min-hour min-date 显示不正确 #4245
  • Tabs: 修复 tab 数量较多时滚动距离不正确 #4202
  • Uploader: 修复 demo 中 beforeRead 报错 #4235

1.6.9-beta.2

2021-05-22

Bug Fixes

  • Button: 修复 open-type 不生效 #4222
  • Calendar: 修复 allow-same-day 开启时 custom-color 属性无效 #4200
  • Circle: 修复 value 是小数时抖动的情况 #4152
  • NoticeBar: 调整滚动行为 #4201
  • NoticeBar: 修复不正确的滚动速度 cde3876
  • Radio: 支持动态设置 disabled #4191
  • Rate: 支持滑动选择半星 #4195

Features

  • Calendar: 增加 first-day-of-week 属性，设置周起始日 #4211
  • Calendar: 增加 show-range-prompt 属性和 over-range 事件，设置是否展示提示文案 #4212
  • Icons: 图标库迁移至 iconfont.cn #4219
  • OpenType: 支持 getUserProfile #4203
  • Panel: 移除 useFooterSlot #4205

1.6.8

2021-02-26

Features

  • NoticeBar: 新增默认插槽 (#4048)
  • Stepper: 新增 theme 属性，支持圆形风格 (#4049)
  • Stepper: 新增 plus & minus 插槽 (#4049)

Bug Fixes

  • Checkbox: 修复 label-position 属性无效 (#4036)
  • Dialog: 修复 beforeClose 方法类型定义 (#4019)

Improvements

  • Circle: 当内置 canvas 不支持同层渲染时降级至默认 type (#4050)

1.6.7

2021-01-27

Features

  • Radio: 新增 direction 属性 (#4007)

Bug Fixes

  • Icons: 修复部分地区图标不显示 (#4012)
  • Transition: 修复默认设置 show 属性为 true 时不生效 (#4005)

1.6.6

2021-01-21

Features

  • Uploader: 支持文件预览 (#3975)

Bug Fixes

  • Picker: 修复标题栏无法显示 (#3973)

Improvements

  • Calendar: 优化模板代码 (#3972)

1.6.5

2021-01-19

Features

  • Field: 新增 input 插槽 (#3932)
  • Field: 新增 click-input 事件 (#3932)
  • Icon: 新增 delete-o、sort、font、font-o、revoke 图标 (#3881)

Bug Fixes

  • Button: 修复 custom-style 属性不生效 (#3903)
  • Dialog: 修复 close-on-click-overlay 属性不生效 (#3913)

Improvements

  • Cell: 优化性能 (#3888)
  • Col: 优化性能 (#3886)
  • Divider: 优化性能 (#3887)
  • Empty: 优化性能 (#3933)
  • Loading: 优化性能 (#3892)
  • Notice-bar: 优化性能 (#3891)
  • Notify: 优化性能 (#3893)
  • Picker: 优化性能 (#3949)
  • Stepper: 优化性能 (#3890)
  • Sticky: 优化性能 (#3879)
  • SwipeCell: 优化性能 (#3928)
  • Switch: 优化性能 (#3889)
  • Tag: 优化性能 (#3894)
  • Transition: 优化性能 (#3895)
  • Uploader: 优化性能 (#3897)

1.6.4

2020-12-18

Improvements

  • Tab: 优化粘性布局时的渲染性能 (#3875)
  • Grid: 使用 wxs 优化性能 (#3839)
  • Image: 使用 wxs 优化性能 (#3839)
  • Button: 使用 wxs 优化性能 (#3839)
  • Icon: 减少代码体积 (#3839)
  • Checkbox: 减少代码体积 (#3839)
  • Slider: 减少代码体积 (#3839)

Bug Fixes

  • Calendar: 修复在 phone 设备上选择日期后显示错误 (#3833)
  • GoodsAction: 修复部分设备上高度异常 (#3865)
  • Slider: 修复设置 max min 时滑动不均匀 (#3876)
  • Tab: 修复切换时内容区闪烁的问题 (#3866)

1.6.3

2020-12-09

Features

  • Dialog: 新增 beforeClose 属性 (#3815)
  • uploader: 新增若干 CSS 变量 (#3797)
  • Aarea: 支持不传入 county_list 数据 (#3824)
  • Tab: 新增 resize 方法 (#3827)

Improvements

  • Collapse: 使用 animate 提升动画性能 (#3826)
  • Tab: 优化样式拼装性能 (#3827)

Bug Fixes

  • Field: 修复输入中文时显示字数暂时超出 maxlength (#3802)
  • Info: 修复样式错误 (#3823)
  • NavBar: 修复动态渲染时组件报错 (#3822)
  • Progress: 修复 percentage 为 0 时样式异常 (#3808)

1.6.2

2020-11-29

Features

  • Tabbar: 新增 placeholder icon-prefix 属性 (#3792)

Bug Fixes

  • DatetimePicker: 修复 type=year-month 时选择出现报错 (#3783)
  • Info: 修复部分安卓设备中文案不完全居中 (#3778)
  • Tab: 修复 ellipsis 为 false 时下划线位置不正确 (#3777)
  • Notify: 修复组件未全局居中 (#3751)

Improvements

  • Icon: 使用 wxs 优化性能 (#3791)

1.6.1

2020-11-12

Bug Fixes

  • Field: 修复未传入 label 属性时仍渲染 label #3756
  • Picker: 修复 confirm、cancel 事件报错 #3755

1.6.0

2020-11-11

Features

  • SwipeCell: 新增外部样式类 custom-class #3678
  • ActionSheet: 调整取消文字颜色至 @gray-7 #3719
  • ActionSheet: 调整顶部栏样式 #3720
  • ActionSheet: 调整加载图标大小至 22px #3718
  • ActionSheet: 调整描述文字样式 #3726
  • Cell: 调整图标外边距至 4px #3721
  • DropdownMenu: 增加默认阴影 #3723
  • DropdownMenu: 调整选中态默认颜色至 #ee0a24 #3725
  • Image: 调整图标大小至 36px #3724
  • Popup: 调整圆角至 16px #3713
  • Search: 调整左侧内边距至 12px #3716
  • Sidebar: 调整宽度至 85px #3722
  • TabbarItem: 调整图标大小至 22px #3717

Bug Fixes

  • Field: 修复使用 label 属性时 label-class 样式类不生效 #3729
  • NoticeBar: 修复内容较短时开启 scrollable 不生效 #3727
  • SidebarItem: 修复长数字不换行的问题 #3714
  • Tag: 默认字体加入 miui #3715

1.5.2

2020-10-15

Features

  • Uploader: 标准化 file-list 与事件参数 #3673
  • Uploader: 新增 thumb，支持缩略图展示 #3673
  • GoodsAction: 新增若干 CSS 变量 #3654
  • 移动 @types/wechat-miniprogram 至 dependencies #3654

Bug Fixes

  • Button: 修复细边框样式问题 #3653
  • Tab: 重构动画实现，不再使用 transform #3668

1.5.1

2020-09-29

Features

  • Card: 新增 origin-price tag 插槽 #3645
  • ShareSheet: 调整默认 z-index 至 100 #3575
  • ShareSheet: 新增 item 属性 openType #3575
  • Uploader: 扩大删除按钮点击区域 #3631

Bug Fixes

  • Uploader: 支持预览视频 #3594
  • Dialog: 调整类型定义 #3630
  • NavBar: 修复 CSS 变量 --nav-bar-icon-color 不生效 #3643
  • NavBar: 修复未设置 title 时样式异常 #3643
  • Tab: 修复 line-width 属性不支持 string #3628

1.5.0

2020-08-27

Features

  • ShareSheet: 新增组件 #3559
  • Icons: 升级 @vant/icons 至 v1.2.5 #3539
  • sidebar: 新增 badge 属性 #3564
  • Tabs: 调整默认 line-width 至 40px #3518
  • Tabs: 去除默认边框 #3519
  • TreeSelect: 新增 selected-icon 属性 #3565
  • TreeSelect: 支持 badge、dot 显示 #3565

Bug Fixes

  • collapse: 修复嵌套在 popup 等组件中时默认展开无效 #3562
  • empty: 修复 image、description 插槽不生效 #3563

1.4.4

2020-08-12

Bug Fixes

  • Transition: 重构组件以修复卡顿问题 #3498
  • Icon: 修复数字未对齐 #3501
  • Tab: 修复可滚动时下划线位置错误 #3511

v1.4.3

2020-08-07

Features

  • Dialog: 增加圆角按钮样式 #3476
  • Cell: 调整下划线位置 #3487
  • Tab: 调整默认滚动阈值至 5 个、优化样式 #3459

v1.4.2

2020-08-03

Features

Bug Fixes

  • Calendar: 修复超出 max-range 时未显示 Toast #3466
  • Tab: 修复手势滚动可切换至禁用项 #3467

v1.4.1

2020-07-28

Features

  • Picker: 调整默认可见的选项个数为 6 个 #3418
  • Toast: 调整圆角为 8px #3419

Bug Fixes

  • Slider: 修复点击会触发 drag 事件 #3415
  • Area: 修复中间列无法滚动 #3443

v1.4.0

2020-07-17

Features

  • Empty: 新增 Empty 组件 #3327
  • NoticeBar: 新增 background 属性 #3388
  • NoticeBar: 新增 close 事件 #3388
  • GridItem: 新增 icon-color 属性 #3386
  • NavBar: 现在 custom-style 将影响根节点#3371
  • Cell: 新增 title-style 属性, fix Field label width #3370
  • Uploader: 更新 failed 图标 #3359
  • Uploader: 更新删除图标样式 #3385
  • Uploader: 移除圆角样式 #3384
  • Field: 更新禁用态样式 #3358
  • Field: 更新 label 样式 #3357
  • Picker: 调整 action button 样式 #3316

Bug Fixes

  • Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 #3401
  • Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 #3317
  • Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 #3318
  • DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 #3352
  • Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 #3383
  • Dialog: show dialog after class ready #3374
  • Calendar: confirm-disabled-text 属性增加默认值 #3394

v1.3.3

2020-06-24

Features

  • steps: 为每一项增加 inactiveIcon、activeIcon 属性 #3315
  • field: 增加外部样式类 label-class #3311
  • field: 现在总会从内部 set value 值 #3313
  • uploader: 为每一项增加 deletable 属性 #3270
  • uploader: 扩大删除图标的可点击区域 #3265

Bug Fixes

  • tabbar: 修复 iphone-se 上高度异常 #3314
  • grid: 修复 text 与 icon 同时设置时样式异常 #3310
  • calendar: 修复多选模式下 default-date 属性不生效 #3284
  • circle: 修复 type=“2d” 时无法动态变更 value #3264
  • nav-bar: 修复未设置 left-text 时左侧图标样式异常 #3263

v1.3.2

2020-06-04

Features

  • button: 新增 form-type 属性 #3208
  • grid: 新增 icon-size、badge 属性 #3236
  • grid: 新增 direction 属性 #3192

Bug Fixes

  • Grid: 修复开启 square 时横、纵向间距不同 #3231
  • uploader: 修复点击删除图标时触发 click-preview 事件 #3230
  • circle: 修复 type="2d" 不生效 #3228
  • calendar: 修复在选择区间时，点击确定报错 #3195
  • tag: 修复 css 变量名拼写错误 #3191

v1.3.1

2020-05-24

Features

  • Button: 新增 class-prefix 属性 #3159
  • Collapse: 新增 open、close 事件 #3176

Bug Fixes

  • 修复控制台提示选择器错误的问题 #3137
  • 修复 GoodsActionButton 在某些情况下报错的问题 #3145

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

  • sticky: 新增 scroll-top 属性 #3115
  • button: 新增 dataset 属性 #3075
  • uploader: 所有类型都会触发 click-preview 事件 #3071
  • Uploader: 属性 accept 新增值 media #3047
  • feat: 新增基础 font-family #3061
  • submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 #3104

Bug Fixes

  • dialog: 修复 title 多余空格的问题 #3069
  • tab: 修复 tab 个数多时显示滚动条 #3072
  • Sticky: 修复使用组件时页面 onPageScroll 失效 #3092
  • button: 修复 disabled 属性对 open-type 类型的按钮无效 #3076

v1.2.2

2020-04-21

Features

  • GoodsActionButton: 新增 CSS 变量 goods-action-line-height #3037
  • Calendar: 选择区间大于 range 时自动选中最大范围 #3026
  • Notify: 新增 top 属性 #3018

Bug Fixes

  • Field: 修复未设置 autosize 时 wxs 报错 #3038
  • Field: 避免设置 showClear 为 undefined #3012

v1.2.1

2020-04-12

Features

  • Field: 支持小程序双向绑定 #2986
  • Calendar: 多选模式下新增 unselect 事件 #2990

Bug Fixes

  • IndexBar: 移除 scroll-top 属性 #2999
  • Uploader: 修复图片后缀名为大写时未正常识别 #2987
  • Field: 修复 autosize 属性 设置 max-height 不生效 #3007

v1.2.0

2020-04-04

Features

  • TreeSelect: 更新 nav 背景色 #2952
  • Sticky: 使用 page scroll 重构组件 #2950
  • Field: 新增 auto-focus、disable-default-padding、cursor 属性 #2936
  • Field: 新增 linechange、keyboardheightchange 事件 #2936
  • Uploader: 支持显示上传状态 #2929
  • Image: mode 属性新增 widthFix、heightFix #2908
  • Canvas: 新增 type 属性 #2906
  • NavBar: 新增 placeholder 属性 #2896

Bug Fixes

  • Field: 修复输入过快时输入框内容不断回退 #2936
  • Calendar: 修复 show-confirm 为 true 时组件初始化报错 #2951
  • Tab: 修复 type 为 card 时 color 对边框无效 #2941

v1.1.0

2020-03-21

Features

  • 新增 Calendar 日历组件 #2894
  • Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class #2882
  • Steps: 新增 click 事件 #2874
  • SideBar: 新增 title 插槽 #2873
  • Uploader: 新增 upload-icon 属性 #2869
  • Uploader: 新增 show-upload 属性 #2868
  • Uploader: 更新样式、调整事件触发顺序与 vant 一致 #2886
  • Field: 新增 show-word-limit 属性 #2856
  • Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight #2856
  • Field: 新增若干 CSS 变量 #2856

Bug Fixes

  • Button: 移除 lang 属性默认值 #2883
  • Button: 修复 disabled 属性对原生事件无效 #2878

v1.0.7

2020-03-04

Features

  • DropdownItem: 新增 popupStyle 属性 #2804
  • DropdownItem: 新增 open close opened closed 事件 #2804
  • Card: 新增 price num 插槽 #2787
  • Card: 新增 origin-price-class 外部样式类 #2787

Bug Fixes

  • Tab: 修复内容项高度不同时粘性布局异常 #2817
  • Picker: 修复未选中项样式未置灰 #2816
  • GoodsActionButton: 修复仅使用一个 button 时样式异常 #2808
  • Radio: name类型与value统一 #2801
  • Uploader: 修复文档错误 #2777

v1.0.6

2020-02-24

Features

  • GoodsActionButton: 新增默认 slot #2779
  • SubmitBar: 更新圆角样式 #2755
  • Card: 更新样式 #2754
  • 优化 relation 部分代码 #2760

Bug Fixes

  • DropdownItem: 修复点击选项时不触发close事件 #2766
  • GoodsActionButton: 修复低版本基础库下的样式问题 #2762
  • Tabs: 修复点击禁用项时事件参数错误 #2758
  • Checkbox: 修复动态设置disabled属性无效 #2748
  • Button: add loading color when plain is true #2746
  • Radio: 修复label-disabled文档错误 #2763

v1.0.5

2020-02-07

Features

  • ActionSheet: actions 支持更多 openType #2715
  • Uploader: 新增开始disabled时的组件样式 #2720
  • Icon: 调整示例小程序页面与 vant 对齐 #2728
  • 示例小程序首页与 vant 对齐 #2729
  • 完善快速上手文档，增加 npm 构建说明 #2726

Bug Fixes

  • Radio: 修复disabled属性不生效 #2711
  • Tab: 修复animated属性无法动态切换 #2712
  • Circle: 修正文档错误，size属性不支持string类型 #2694
  • 修正文档默认 slot 名称为 default 的错误 #2726
  • TreeSelect: 修正文档示例代码标签闭合错误 #2710

v1.0.4

2020-01-21

Features

  • Stepper: 新增 disable-long-press 属性 #2691
  • quickstart: 快速上手新增关闭 style v2 说明 #2704
  • Search: 新增 background、disabled、input-align 文档示例 #2698
  • Icon: 文档新增图标文字加载失败说明 #2681

Bug Fixes

  • Sticky: 修复真机上页面滚动缓慢时无法吸顶/取消吸顶 #2703
  • DropdownItem: 修复 wx:key 警告 #2670
  • IndexBar: 文档修复组件引入路径错误 #2689
  • 升级依赖版本以避免安全警告 #2680

v1.0.3

2020-01-09

Features

  • npm 包默认输出 es5 版本代码 #2639
  • Steps: 新增外部样式类 desc-class #2630

Bug Fixes

  • Tab: 解决动态添加选项时，顺序错乱和下划线长度不变的问题 #2663
  • NavBar: 修复返回图标未居中的问题 #2633

v1.0.2

2019-12-31

Features

  • Skeleton: 新增外部样式类row-class``avatar-class``title-class #2612
  • SwipeCell: 支持动态修改width属性 #2607
  • Uploader: 新增camera``compressed``maxDuration属性 #2584

Improvements

  • Tab: 优化弹性滚动效果 #2606

Bug Fixes

  • IndexBar: 修复字母未全部定义时 click 事件报错 #2605
  • Field: 修复点击清除图标后下一次点击无效 #2602

v1.0.1

2019-12-23

Features

  • Uploader: 新增 sizeType 属性 #2563
  • GoodsActionButton: 新增 plain 属性 #2559
  • Uploader: 去除 use-slot 属性 #2551
  • 新增样式覆盖说明文档 #2566

Improvements

  • 使用 nextTick 优化部分异步逻辑 #2561
  • wxs 新增 addUnit 方法以减少 setData 调用次数 #2550

Bug Fixes

  • Tag: 修复未依赖 van-icon 组件 #2579
  • Notify: 修复 safeAreaInsetTop 不生效 #2558
  • Uploader: 修复 capture 属性不生效 #2551

v1.0.0

2019-12-11

主要变动

  • npm 包名由 vant-weapp 重命名为 @vant/weapp
  • 增加十一个新组件
  • 增加数十个 API
  • 所有组件支持通过CSS自定义属性自定义样式
  • 使用env()重构 iOS 安全区域适配
  • 调整部分 API 命名，废除少量 API

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

  • Grid 宫格，用于展示内容或进行页面导航
  • Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示
  • Circle 环形进度条，告知用户当前的状态和进度
  • Overaly 遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
  • Divider 分割线，区隔内容的分割线
  • Sticky 粘性布局，与 CSS 中position: sticky属性实现的效果类似
  • Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
  • IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
  • Uploader 文件上传，上传一个或多个文件
  • CountDown 倒计时，用于显示活动倒计时、短信验证码等
  • DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
  • BadgeGroup重命名为Sidebar
  • Badge重命名为SlidebarItem
  • active属性重命名为activeKey
Notify
  • text选项重命名为message
  • backgroundColor选项重命名为background
  • 去除transitionend事件，新增 6 个事件
SwitchCell
  • 移除了SwitchCell组件，可以使用Cell和Switch组件代替
Transition
  • 去除transitionend事件，新增 6 个事件

新特性

ActionSheet
  • 新增click-overlay事件
  • 新增close-on-click-action属性
  • 新增color属性
  • 新增description属性
  • 新增round属性
Area
  • 新增columns-placeholder属性
  • reset方法支持传入code参数
Button
  • 新增loading-type属性
  • color属性支持渐变色
  • 切换disabled时增加过渡效果
Checkbox
  • 新增icon-size属性
Color
  • 基础红色更新为#ee0a24
DatetimePicker
  • 新增filter属性
Dialog
  • 优化文字换行
  • 新增title插槽
  • 新增confirm-button-color属性
  • 新增cancel-button-color属性
  • 新增width属性
  • 新增overlay-style属性
Field
  • 新增clickable属性
  • 新增arrow-direction属性
  • 新增hold-keyboard属性
GoodsActionButton
  • 新增color属性
  • 样式升级为圆角风格
GoodsActionIcon
  • 新增icon插槽
  • 新增dot属性
GridItem
  • 新增info属性
  • 新增dot属性
Icon
  • 新增dot属性
  • 新增down图标
  • 新增wap-hone实底风格图标
  • 支持number类型的size属性
Loading
  • 支持number类型的size属性
NoticeBar
  • 阻止关闭图标点击事件冒泡
Notify
  • 新增clear方法
  • 新增round属性
  • 新增closeable属性
  • 新增close-icon属性
  • 新增close-icon-position属性
Progress
  • 新增stroke-width属性
Radio
  • 新增icon-size属性
Rate
  • 优化手势判断
  • 新增gutter属性
  • 新增touchable属性
  • 支持string类型的size属性
  • 新增action-text属性
  • 新增left-icon插槽
  • 新增right-icon插槽
SlidebarItem
  • 新增dot属性
Slider
  • 新增drag-start事件
  • 新增drag-end事件
  • 支持传入任意范围的max和min属性
  • 支持number类型的bar-height属性
  • 增加滑动动画
  • 增大点击区域
SwipeCell
  • 新增name属性
  • 新增open事件
  • 支持打开状态互斥
Switch
  • 加载图标的颜色会跟随开关状态变化
Stepper
  • 支持长按手势
  • 新增input-width属性
  • 新增button-size属性
  • 新增decimalLength属性
  • 新增 disablePlus、disableMinus 属性
Steps
  • 新增active-icon属性
  • 新增inactive-icon属性
Tabs
  • 使用 Sticky 组件重构吸顶实现
  • 新增name属性
  • 新增line-height属性
  • 新增ellipsis属性
  • 新增lazy-render属性
  • line-width属性支持String类型
  • 增加云开发结合示例
TreeSelect
  • 新增max属性
  • 新增content插槽
',48),Cd=[zd],Pd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Sd,Cd)))},Od={class:"van-doc-markdown-body"},Ed=_n('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',5),Id=[Ed],Dd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Od,Id)))},Ad={class:"van-doc-markdown-body"},Td=_n('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),Nd=[Td],Fd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ad,Nd)))},Rd={class:"van-doc-markdown-body"},Ld=_n('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

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

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

  • 基于 Vant Weapp 搭建小程序应用
  • 样式覆盖方案

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),Bd=[Ld],Md={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Rd,Bd)))},$d={class:"van-doc-markdown-body"},Ud=_n('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

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

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

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

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',7),Vd=[Ud],Hd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",$d,Vd)))},Wd={class:"van-doc-markdown-body"},Gd=_n('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),Kd=[Gd],Jd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Wd,Kd)))},Yd={class:"van-doc-markdown-body"},Xd=_n('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

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

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

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

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

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

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

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

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',17),Qd=[Xd],Zd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Yd,Qd)))},sr={class:"van-doc-markdown-body"},ar=_n('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

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

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',18),tr=[ar],nr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",sr,tr)))},er={class:"van-doc-markdown-body"},lr=_n('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

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

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

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

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

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

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

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

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

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

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

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

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

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

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),cr=[lr],pr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",er,cr)))},or={class:"van-doc-markdown-body"},dr=[_n('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10)],rr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",or,dr)))},ir={class:"van-doc-markdown-body"},hr=[_n('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ir,hr)))},gr={class:"van-doc-markdown-body"},jr=[_n('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定复选框的勾选状态。

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

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

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

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

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

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

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

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],mr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",gr,jr)))},vr={class:"van-doc-markdown-body"},br=[_n('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

value属性表示进度条的目标进度。

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

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

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

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",vr,br)))},yr={class:"van-doc-markdown-body"},qr=[_n('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

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

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

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

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],xr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",yr,qr)))},wr={class:"van-doc-markdown-body"},_r=[_n('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],kr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",wr,_r)))},Sr={class:"van-doc-markdown-body"},zr=[_n('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],Cr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Sr,zr)))},Pr={class:"van-doc-markdown-body"},Or=[_n('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

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

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],Er={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Pr,Or)))},Ir={class:"van-doc-markdown-body"},Dr=[_n('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

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

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

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

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

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

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],Ar={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ir,Dr)))},Tr={class:"van-doc-markdown-body"},Nr=[_n('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择完整时间

value 为时间戳。

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

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

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

选择日期（年月）

value 为时间戳。

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

选择时间

value 为字符串。

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

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

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

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],Fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Tr,Nr)))},Rr={class:"van-doc-markdown-body"},Lr=[_n('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

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

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],Br={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Rr,Lr)))},Mr={class:"van-doc-markdown-body"},$r=[_n('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

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

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],Ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Mr,$r)))},Vr={class:"van-doc-markdown-body"},Hr=[_n('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

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

向上展开

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

禁用菜单

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

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
',15)],Wr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Vr,Hr)))},Gr={class:"van-doc-markdown-body"},Kr=[_n('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Jr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Gr,Kr)))},Yr={class:"van-doc-markdown-body"},Xr=[_n('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Qr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Yr,Xr)))},Zr={class:"van-doc-markdown-body"},si=[_n('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],ai={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Zr,si)))},ti={class:"van-doc-markdown-body"},ni=[_n('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

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

自定义内容

通过插槽可以自定义格子展示的内容。

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

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

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

格子间距

通过gutter属性设置格子之间的距离。

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

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

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

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],ei={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ti,ni)))},li={class:"van-doc-markdown-body"},ci=[_n('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

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

图标颜色

设置color属性来控制图标颜色。

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

图标大小

设置size属性来控制图标大小。

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

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],pi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",li,ci)))},oi={class:"van-doc-markdown-body"},di=[_n('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

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

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

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

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

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

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

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

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

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

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],ri={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",oi,di)))},ii={class:"van-doc-markdown-body"},hi=[_n('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ii,hi)))},gi={class:"van-doc-markdown-body"},ji=[_n('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

加载类型

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

自定义颜色

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

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],mi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",gi,ji)))},vi={class:"van-doc-markdown-body"},bi=[_n('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",vi,bi)))},yi={class:"van-doc-markdown-body"},qi=[_n('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

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

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],xi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",yi,qi)))},wi={class:"van-doc-markdown-body"},_i=[_n('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],ki={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",wi,_i)))},Si={class:"van-doc-markdown-body"},zi=[_n('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

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

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],Ci={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Si,zi)))},Pi={class:"van-doc-markdown-body"},Oi=[_n('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],Ei={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Pi,Oi)))},Ii={class:"van-doc-markdown-body"},Di=[_n('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

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

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

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

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],Ai={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ii,Di)))},Ti={class:"van-doc-markdown-body"},Ni=[_n('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

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

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

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

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],Fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ti,Ni)))},Ri={class:"van-doc-markdown-body"},Li=[_n('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

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

线条粗细

通过stroke-width可以设置进度条的粗细。

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

置灰

设置inactive属性后进度条将置灰。

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

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],Bi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ri,Li)))},Mi={class:"van-doc-markdown-body"},$i=[_n('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定值当前选中项的 name 。

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

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

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

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

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

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],Ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Mi,$i)))},Vi={class:"van-doc-markdown-body"},Hi=[_n('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

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

自定义图标

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

自定义样式

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

半星

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

自定义数量

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

禁用状态

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

只读状态

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

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],Wi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Vi,Hi)))},Gi={class:"van-doc-markdown-body"},Ki=[_n('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Ji={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Gi,Ki)))},Yi={class:"van-doc-markdown-body"},Xi=[_n('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Qi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Yi,Xi)))},Zi={class:"van-doc-markdown-body"},sh=[_n('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],ah={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Zi,sh)))},th={class:"van-doc-markdown-body"},nh=[_n('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],eh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",th,nh)))},lh={class:"van-doc-markdown-body"},ch=[_n('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],ph={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",lh,ch)))},oh={class:"van-doc-markdown-body"},dh=[_n('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],rh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",oh,dh)))},ih={class:"van-doc-markdown-body"},hh=[_n('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],uh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ih,hh)))},gh={class:"van-doc-markdown-body"},jh=[_n('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],mh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",gh,jh)))},vh={class:"van-doc-markdown-body"},bh=[_n('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],fh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",vh,bh)))},yh={class:"van-doc-markdown-body"},qh=[_n('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],xh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",yh,qh)))},wh={class:"van-doc-markdown-body"},_h=[_n('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],kh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",wh,_h)))},Sh={class:"van-doc-markdown-body"},zh=[_n('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],Ch={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Sh,zh)))},Ph={class:"van-doc-markdown-body"},Oh=[_n('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],Eh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ph,Oh)))},Ih={class:"van-doc-markdown-body"},Dh=[_n('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],Ah={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ih,Dh)))},Th={class:"van-doc-markdown-body"},Nh=[_n('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],Fh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Th,Nh)))},Rh={class:"van-doc-markdown-body"},Lh=[_n('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],Bh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Rh,Lh)))},Mh={class:"van-doc-markdown-body"},$h=[_n('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],Uh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Mh,$h)))},Vh={class:"van-doc-markdown-body"},Hh=[_n('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',18)],Wh={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/vite/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:s=>`/zh-CN${{"/common":"/style","/transition":"/style"}[s]||s}`,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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}},Gh={Changelog:Pd,CustomStyle:Dd,Home:Fd,Quickstart:Md,Theme:Hd,ActionSheet:Jd,Area:Zd,Button:nr,Calendar:pr,Card:rr,Cell:ur,Checkbox:mr,Circle:fr,Col:xr,Collapse:kr,Common:Cr,ConfigProvider:Er,CountDown:Ar,DatetimePicker:Fr,Dialog:Br,Divider:Ur,DropdownMenu:Wr,Empty:Jr,Field:Qr,GoodsAction:ai,Grid:ei,Icon:pi,Image:ri,IndexBar:ui,Loading:mi,NavBar:fi,NoticeBar:xi,Notify:ki,Overlay:Ci,Panel:Ei,Picker:Ai,Popup:Fi,Progress:Bi,Radio:Ui,Rate:Wi,Search:Ji,ShareSheet:Qi,Sidebar:ah,Skeleton:eh,Slider:ph,Stepper:rh,Steps:uh,Sticky:mh,SubmitBar:fh,SwipeCell:xh,Switch:kh,Tab:Ch,Tabbar:Eh,Tag:Ah,Toast:Fh,Transition:Bh,TreeSelect:Uh,Uploader:{setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Vh,Hh)))}};const Kh={class:"van-doc-header"},Jh={class:"van-doc-row"},Yh={class:"van-doc-header__top"},Xh={class:"van-doc-header__logo"},Qh=["src"],Zh={class:"van-doc-header__top-nav"},su=["href"],au=["src"],tu={key:1},nu={key:0,ref:"version",class:"van-doc-header__top-nav-item"},eu={key:0,class:"van-doc-header__version-pop"},lu=["onClick"],cu={key:1,class:"van-doc-header__top-nav-item"},pu=["href"];const ou={name:"VanDocContainer",props:{hasSimulator:Boolean}};const du=["src"];const ru={name:"VanDoc",components:{DocNav:il,DocHeader:ll({name:"VanDocHeader",components:{SearchInput:kd},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:"1.9.0",showVersionPop:!1}),computed:{langLink(){return`#${this.$route.path.replace(this.lang,this.anotherLang.lang)}`},langLabel(){return this.anotherLang.label},anotherLang(){const s=this.langConfigs.filter((s=>s.lang!==this.lang));return s.length?s[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const s=!this.showVersionPop,a=s?"add":"remove";document.body[`${a}EventListener`]("click",this.checkHideVersionPop),this.showVersionPop=s},checkHideVersionPop(s){this.$refs.version.contains(s.target)||(this.showVersionPop=!1)},onSwitchLang(s){this.$router.push(this.$route.path.replace(s.from,s.to))},onSwitchVersion(s){s.link&&(location.href=s.link)}}},[["render",function(s,a,t,n,e,l){const c=Qt("search-input");return on(),un("div",Kh,[yn("div",Jh,[yn("div",Yh,[yn("a",Xh,[yn("img",{src:t.config.logo},null,8,Qh),yn("span",null,m(t.config.title),1)]),yn("ul",Zh,[(on(!0),un(tn,null,Pn(t.config.links,((s,a)=>(on(),un("li",{key:a,class:"van-doc-header__top-nav-item"},[yn("a",{class:"van-doc-header__link",target:"_blank",href:s.url},[s.logo?(on(),un("img",{key:0,src:s.logo},null,8,au)):s.text?(on(),un("span",tu,m(s.text),1)):kn("v-if",!0)],8,su)])))),128)),t.versions?(on(),un("li",nu,[yn("span",{class:"van-doc-header__cube van-doc-header__version",onClick:a[0]||(a[0]=(...s)=>l.toggleVersionPop&&l.toggleVersionPop(...s))},[wn(m(e.packageVersion)+" ",1),qn($e,{name:"van-doc-dropdown"},{default:Aa((()=>[e.showVersionPop?(on(),un("div",eu,[(on(!0),un(tn,null,Pn(t.versions,((s,a)=>(on(),un("div",{key:a,class:"van-doc-header__version-pop-item",onClick:a=>l.onSwitchVersion(s)},m(s.label),9,lu)))),128))])):kn("v-if",!0)])),_:1})])],512)):kn("v-if",!0),l.langLabel&&l.langLink?(on(),un("li",cu,[yn("a",{class:"van-doc-header__cube",href:l.langLink},m(l.langLabel),9,pu)])):kn("v-if",!0),l.searchConfig?(on(),gn(c,{key:2,lang:t.lang,"search-config":l.searchConfig},null,8,["lang","search-config"])):kn("v-if",!0)])])])])}]]),DocContent:ll({name:"VanDocContent",computed:{currentPage(){const{path:s}=this.$route;return s?s.split("/").slice(-1)[0]:this.$route.name}},mounted(){[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((s=>{s.addEventListener("click",this.scrollToAnchor)}))},methods:{scrollToAnchor(s){s.target.id&&this.$router.push({name:this.$route.name,hash:"#"+s.target.id})}}},[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j(["van-doc-content",`van-doc-content--${l.currentPage}`])},[On(s.$slots,"default")],2)}]]),DocContainer:ll(ou,[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":t.hasSimulator}])},[On(s.$slots,"default")],2)}]]),DocSimulator:ll({name:"VanDocSimulator",props:{src:String},data:()=>({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}))}},[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j(["van-doc-simulator",{"van-doc-simulator-fixed":l.isFixed}])},[yn("iframe",{ref:"iframe",src:t.src,style:i(l.simulatorStyle),frameborder:"0"},null,12,du)],2)}]])},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:s}=this.config,a=s.reduce(((s,a)=>s.concat(a.items)),[]),t=this.$route.path.split("/").pop();let n;for(let e=0,l=a.length;e{switch(s.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next")}}))}}},iu={class:"van-doc"};let hu="zh-CN";function uu(){return hu}function gu(s){const a=localStorage.getItem("vant-cli-lang");hu=a||(navigator.language&&-1!==navigator.language.indexOf("zh-")?"zh-CN":s||"en-US")}const ju={class:"app"};var mu=ll({components:{VanDoc:ll(ru,[["render",function(s,a,t,n,e,l){const c=Qt("doc-header"),p=Qt("doc-nav"),o=Qt("doc-content"),d=Qt("doc-container"),r=Qt("doc-simulator");return on(),un("div",iu,[qn(c,{lang:t.lang,config:t.config,versions:t.versions,"lang-configs":t.langConfigs,onSwitchVersion:a[0]||(a[0]=a=>s.$emit("switch-version",a))},null,8,["lang","config","versions","lang-configs"]),qn(p,{lang:t.lang,"nav-config":t.config.nav},null,8,["lang","nav-config"]),qn(d,{"has-simulator":t.hasSimulator},{default:Aa((()=>[qn(o,null,{default:Aa((()=>[On(s.$slots,"default")])),_:3})])),_:3},8,["has-simulator"]),t.hasSimulator?(on(),gn(r,{key:0,src:t.simulator},null,8,["src"])):kn("v-if",!0)])}]])},data:()=>({hasSimulator:!0}),computed:{simulator(){var s,a;if(null==(s=Wh.site.simulator)?void 0:s.url)return null==(a=Wh.site.simulator)?void 0:a.url;return`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:s}=this.$route.meta;return s||""},langConfigs(){const{locales:s={}}=Wh.site;return Object.keys(s).map((a=>({lang:a,label:s[a].langLabel||""})))},config(){const{locales:s}=Wh.site;return s?s[this.lang]:Wh.site},versions:()=>Wh.site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(s){var a;hu=a=s,localStorage.setItem("vant-cli-lang",a),this.setTitleAndToogleSimulator()},config:{handler(s){s&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){this.$route.hash&&this.$nextTick((()=>{const s=document.querySelector(this.$route.hash);s&&s.scrollIntoView()}))},methods:{setTitleAndToogleSimulator(){let{title:s}=this.config;const a=this.config.nav.reduce(((s,a)=>[...s,...a.items]),[]).find((s=>s.path===this.$route.meta.name));a&&a.title?s=a.title+" - "+s:this.config.description&&(s+=` - ${this.config.description}`),document.title=s,this.hasSimulator=!(Wh.site.hideSimulator||this.config.hideSimulator||a&&a.hideSimulator)}}},[["render",function(s,a,t,n,e,l){const c=Qt("router-view"),p=Qt("van-doc");return on(),un("div",ju,[l.config?(on(),gn(p,{key:0,lang:l.lang,config:l.config,versions:l.versions,simulator:l.simulator,"has-simulator":e.hasSimulator,"lang-configs":l.langConfigs},{default:Aa((()=>[qn(c)])),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):kn("v-if",!0)])}]]);const vu={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape:unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){!function(s){const a=document.createElement("textarea");a.value=s,a.setAttribute("readonly",""),a.style.position="absolute",a.style.left="-9999px",document.body.appendChild(a);const t=document.getSelection();if(!t)return;const n=t.rangeCount>0&&t.getRangeAt(0);a.select(),document.execCommand("copy"),document.body.removeChild(a),n&&(t.removeAllRanges(),t.addRange(n))}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((()=>{this.copyStatus="ready"}),2e3)}}},bu={class:"demo-playground--code"},fu={class:"demo-playground--code--actions"},yu=(s=>(Ia="data-v-9efa7fdc",s=s(),Ia=null,s))((()=>yn("span",null,null,-1))),qu=["data-status"],xu=["innerHTML"];var wu=ll(vu,[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j({"demo-playground":!t.inline,transform:t.transform})},[t.inline?On(s.$slots,"default",{key:0},void 0,!0):(on(),un(tn,{key:1},[yn("div",{class:j(["demo-playground--previewer",{compact:t.compact}])},[On(s.$slots,"default",{},void 0,!0)],2),yn("div",bu,[yn("div",fu,[yu,yn("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":e.copyStatus,onClick:a[0]||(a[0]=(...s)=>l.copySourceCode&&l.copySourceCode(...s))},null,8,qu),yn("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:a[1]||(a[1]=(...s)=>l.toogleSource&&l.toogleSource(...s))})]),$t(yn("div",{innerHTML:l.unescape(t.codeSnippet),class:"demo-playground--code--content"},null,8,xu),[[sl,e.showSource]])])],64))],2)}],["__scopeId","data-v-9efa7fdc"]]); -/*! - * vue-router v4.0.6 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */const _u="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,ku=s=>_u?Symbol(s):"_vr_"+s,Su=ku("rvlm"),zu=ku("rvd"),Cu=ku("r"),Pu=ku("rl"),Ou=ku("rvl"),Eu="undefined"!=typeof window;const Iu=Object.assign;function Du(s,a){const t={};for(const n in a){const e=a[n];t[n]=Array.isArray(e)?e.map(s):s(e)}return t}let Au=()=>{};const Tu=/\/$/;function Nu(s,a,t="/"){let n,e={},l="",c="";const p=a.indexOf("?"),o=a.indexOf("#",p>-1?p:0);return p>-1&&(n=a.slice(0,p),l=a.slice(p+1,o>-1?o:a.length),e=s(l)),o>-1&&(n=n||a.slice(0,o),c=a.slice(o,a.length)),n=function(s,a){if(s.startsWith("/"))return s;if(!s)return a;const t=a.split("/"),n=s.split("/");let e,l,c=t.length-1;for(e=0;es===a[t])):1===s.length&&s[0]===a}var $u,Uu,Vu,Hu;function Wu(s){if(!s)if(Eu){const a=document.querySelector("base");s=(s=a&&a.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else s="/";return"/"!==s[0]&&"#"!==s[0]&&(s="/"+s),s.replace(Tu,"")}(Uu=$u||($u={})).pop="pop",Uu.push="push",(Hu=Vu||(Vu={})).back="back",Hu.forward="forward",Hu.unknown="";const Gu=/^[^#]+#/;function Ku(s,a){return s.replace(Gu,"#")+a}const Ju=()=>({left:window.pageXOffset,top:window.pageYOffset});function Yu(s){let a;if("el"in s){let t=s.el;const n="string"==typeof t&&t.startsWith("#"),e="string"==typeof t?n?document.getElementById(t.slice(1)):document.querySelector(t):t;if(!e)return;a=function(s,a){const t=document.documentElement.getBoundingClientRect(),n=s.getBoundingClientRect();return{behavior:a.behavior,left:n.left-t.left-(a.left||0),top:n.top-t.top-(a.top||0)}}(e,s)}else a=s;"scrollBehavior"in document.documentElement.style?window.scrollTo(a):window.scrollTo(null!=a.left?a.left:window.pageXOffset,null!=a.top?a.top:window.pageYOffset)}function Xu(s,a){return(history.state?history.state.position-a:-1)+s}const Qu=new Map;function Zu(s,a){const{pathname:t,search:n,hash:e}=a;if(s.indexOf("#")>-1){let s=e.slice(1);return"/"!==s[0]&&(s="/"+s),Fu(s,"")}return Fu(t,s)+n+e}function sg(s,a,t,n=!1,e=!1){return{back:s,current:a,forward:t,replaced:n,position:window.history.length,scroll:e?Ju():null}}function ag(s){const{history:a,location:t}=window;let n={value:Zu(s,t)},e={value:a.state};function l(n,l,c){const p=s.indexOf("#"),o=p>-1?(t.host&&document.querySelector("base")?s:s.slice(p))+n:location.protocol+"//"+location.host+s+n;try{a[c?"replaceState":"pushState"](l,"",o),e.value=l}catch(d){console.error(d),t[c?"replace":"assign"](o)}}return e.value||l(n.value,{back:null,current:n.value,forward:null,position:a.length-1,replaced:!0,scroll:null},!0),{location:n,state:e,push:function(s,t){const c=Iu({},e.value,a.state,{forward:s,scroll:Ju()});l(c.current,c,!0),l(s,Iu({},sg(n.value,s,null),{position:c.position+1},t),!1),n.value=s},replace:function(s,t){l(s,Iu({},a.state,sg(e.value.back,s,e.value.forward,!0),t,{position:e.value.position}),!0),n.value=s}}}function tg(s){const a=ag(s=Wu(s)),t=function(s,a,t,n){let e=[],l=[],c=null;const p=({state:l})=>{const p=Zu(s,location),o=t.value,d=a.value;let r=0;if(l){if(t.value=p,a.value=l,c&&c===o)return void(c=null);r=d?l.position-d.position:0}else n(p);e.forEach((s=>{s(t.value,o,{delta:r,type:$u.pop,direction:r?r>0?Vu.forward:Vu.back:Vu.unknown})}))};function o(){const{history:s}=window;s.state&&s.replaceState(Iu({},s.state,{scroll:Ju()}),"")}return window.addEventListener("popstate",p),window.addEventListener("beforeunload",o),{pauseListeners:function(){c=t.value},listen:function(s){e.push(s);const a=()=>{const a=e.indexOf(s);a>-1&&e.splice(a,1)};return l.push(a),a},destroy:function(){for(const s of l)s();l=[],window.removeEventListener("popstate",p),window.removeEventListener("beforeunload",o)}}}(s,a.state,a.location,a.replace);const n=Iu({location:"",base:s,go:function(s,a=!0){a||t.pauseListeners(),history.go(s)},createHref:Ku.bind(null,s)},a,t);return Object.defineProperty(n,"location",{get:()=>a.location.value}),Object.defineProperty(n,"state",{get:()=>a.state.value}),n}function ng(s){return(s=location.host?s||location.pathname+location.search:"").indexOf("#")<0&&(s+="#"),tg(s)}function eg(s){return"string"==typeof s||"symbol"==typeof s}const lg={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},cg=ku("nf");var pg,og;function dg(s,a){return Iu(new Error,{type:s,[cg]:!0},a)}function rg(s,a){return s instanceof Error&&cg in s&&(null==a||!!(s.type&a))}(og=pg||(pg={}))[og.aborted=4]="aborted",og[og.cancelled=8]="cancelled",og[og.duplicated=16]="duplicated";const ig={sensitive:!1,strict:!1,start:!0,end:!0},hg=/[.+*?^${}()[\]/\\]/g;function ug(s,a){let t=0;for(;ta.length?1===a.length&&80===a[0]?1:-1:0}function gg(s,a){let t=0;const n=s.score,e=a.score;for(;t1&&("*"===p||"+"===p)&&a(`A repeatable param (${d}) must be alone in its segment. eg: '/:ids+.`),l.push({type:1,value:d,regexp:r,repeatable:"*"===p||"+"===p,optional:"*"===p||"?"===p})):a("Invalid state to consume buffer"),d="")}function h(){d+=p}for(;o{l(h)}:Au}function l(s){if(eg(s)){const a=n.get(s);a&&(n.delete(s),t.splice(t.indexOf(a),1),a.children.forEach(l),a.alias.forEach(l))}else{let a=t.indexOf(s);a>-1&&(t.splice(a,1),s.record.name&&n.delete(s.record.name),s.children.forEach(l),s.alias.forEach(l))}}function c(s){let a=0;for(;a=0;)a++;t.splice(a,0,s),s.record.name&&!yg(s)&&n.set(s.record.name,s)}return a=xg({strict:!1,end:!0,sensitive:!1},a),s.forEach((s=>e(s))),{addRoute:e,resolve:function(s,a){let e,l,c,p={};if("name"in s&&s.name){if(e=n.get(s.name),!e)throw dg(1,{location:s});c=e.record.name,p=Iu(function(s,a){let t={};for(let n of a)n in s&&(t[n]=s[n]);return t}(a.params,e.keys.filter((s=>!s.optional)).map((s=>s.name))),s.params),l=e.stringify(p)}else if("path"in s)l=s.path,e=t.find((s=>s.re.test(l))),e&&(p=e.parse(l),c=e.record.name);else{if(e=a.name?n.get(a.name):t.find((s=>s.re.test(a.path))),!e)throw dg(1,{location:s,currentLocation:a});c=e.record.name,p=Iu({},a.params,s.params),l=e.stringify(p)}const o=[];let d=e;for(;d;)o.unshift(d.record),d=d.parent;return{name:c,path:l,params:p,matched:o,meta:qg(o)}},removeRoute:l,getRoutes:function(){return t},getRecordMatcher:function(s){return n.get(s)}}}function fg(s){const a={},t=s.props||!1;if("component"in s)a.default=t;else for(let n in s.components)a[n]="boolean"==typeof t?t:t[n];return a}function yg(s){for(;s;){if(s.record.aliasOf)return!0;s=s.parent}return!1}function qg(s){return s.reduce(((s,a)=>Iu(s,a.meta)),{})}function xg(s,a){let t={};for(let n in s)t[n]=n in a?a[n]:s[n];return t}const wg=/#/g,_g=/&/g,kg=/\//g,Sg=/=/g,zg=/\?/g,Cg=/\+/g,Pg=/%5B/g,Og=/%5D/g,Eg=/%5E/g,Ig=/%60/g,Dg=/%7B/g,Ag=/%7C/g,Tg=/%7D/g,Ng=/%20/g;function Fg(s){return encodeURI(""+s).replace(Ag,"|").replace(Pg,"[").replace(Og,"]")}function Rg(s){return Fg(s).replace(Cg,"%2B").replace(Ng,"+").replace(wg,"%23").replace(_g,"%26").replace(Ig,"`").replace(Dg,"{").replace(Tg,"}").replace(Eg,"^")}function Lg(s){return function(s){return Fg(s).replace(wg,"%23").replace(zg,"%3F")}(s).replace(kg,"%2F")}function Bg(s){try{return decodeURIComponent(""+s)}catch(a){}return""+s}function Mg(s){const a={};if(""===s||"?"===s)return a;const t=("?"===s[0]?s.slice(1):s).split("&");for(let n=0;ns&&Rg(s))):[n&&Rg(n)];for(let s=0;snull==s?null:""+s)):null==n?n:""+n)}return a}function Vg(){let s=[];return{add:function(a){return s.push(a),()=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)}},list:()=>s,reset:function(){s=[]}}}function Hg(s,a,t,n,e){const l=n&&(n.enterCallbacks[e]=n.enterCallbacks[e]||[]);return()=>new Promise(((c,p)=>{const o=s=>{var o;!1===s?p(dg(4,{from:t,to:a})):s instanceof Error?p(s):"string"==typeof(o=s)||o&&"object"==typeof o?p(dg(2,{from:a,to:s})):(l&&n.enterCallbacks[e]===l&&"function"==typeof s&&l.push(s),c())},d=s.call(n&&n.instances[e],a,t,o);let r=Promise.resolve(d);s.length<3&&(r=r.then(o)),r.catch((s=>p(s)))}))}function Wg(s,a,t,n){const e=[];for(const c of s)for(const s in c.components){let p=c.components[s];if("beforeRouteEnter"===a||c.instances[s])if("object"==typeof(l=p)||"displayName"in l||"props"in l||"__vccOpts"in l){const l=(p.__vccOpts||p)[a];l&&e.push(Hg(l,t,n,c,s))}else{let l=p();l=l.catch(console.error),e.push((()=>l.then((e=>{if(!e)return Promise.reject(new Error(`Couldn't resolve component "${s}" at "${c.path}"`));const l=(p=e).__esModule||_u&&"Module"===p[Symbol.toStringTag]?e.default:e;var p;c.components[s]=l;const o=(l.__vccOpts||l)[a];return o&&Hg(o,t,n,c,s)()}))))}}var l;return e}function Gg(s){const a=Ba(Cu),t=Ba(Pu),n=za((()=>a.resolve(wa(s.to)))),e=za((()=>{let{matched:s}=n.value,{length:a}=s;const e=s[a-1];let l=t.matched;if(!e||!l.length)return-1;let c=l.findIndex(Ru.bind(null,e));if(c>-1)return c;let p=Jg(s[a-2]);return a>1&&Jg(e)===p&&l[l.length-1].path!==p?l.findIndex(Ru.bind(null,s[a-2])):c})),l=za((()=>e.value>-1&&function(s,a){for(let t in a){let n=a[t],e=s[t];if("string"==typeof n){if(n!==e)return!1}else if(!Array.isArray(e)||e.length!==n.length||n.some(((s,a)=>s!==e[a])))return!1}return!0}(t.params,n.value.params))),c=za((()=>e.value>-1&&e.value===t.matched.length-1&&Lu(t.params,n.value.params)));return{route:n,href:za((()=>n.value.href)),isActive:l,isExactActive:c,navigate:function(t={}){return function(s){if(s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)return;if(s.defaultPrevented)return;if(void 0!==s.button&&0!==s.button)return;if(s.currentTarget&&s.currentTarget.getAttribute){const a=s.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(a))return}s.preventDefault&&s.preventDefault();return!0}(t)?a[wa(s.replace)?"replace":"push"](wa(s.to)):Promise.resolve()}}}const Kg=Ja({name:"RouterLink",props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},setup(s,{slots:a}){const t=oa(Gg(s)),{options:n}=Ba(Cu),e=za((()=>({[Yg(s.activeClass,n.linkActiveClass,"router-link-active")]:t.isActive,[Yg(s.exactActiveClass,n.linkExactActiveClass,"router-link-exact-active")]:t.isExactActive})));return()=>{const n=a.default&&a.default(t);return s.custom?n:we("a",{"aria-current":t.isExactActive?s.ariaCurrentValue:null,href:t.href,onClick:t.navigate,class:e.value},n)}}});function Jg(s){return s?s.aliasOf?s.aliasOf.path:s.path:""}const Yg=(s,a,t)=>null!=s?s:null!=a?a:t;function Xg(s,a){if(!s)return null;const t=s(a);return 1===t.length?t[0]:t}const Qg=Ja({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},setup(s,{attrs:a,slots:t}){const n=Ba(Ou),e=za((()=>s.route||n.value)),l=Ba(zu,0),c=za((()=>e.value.matched[l]));La(zu,l+1),La(Su,c),La(Ou,e);const p=qa(o,!1);var o;return be((()=>[p.value,c.value,s.name]),(([s,a,t],[n,e,l])=>{a&&(a.instances[t]=s,e&&e!==a&&s&&s===n&&(a.leaveGuards.size||(a.leaveGuards=e.leaveGuards),a.updateGuards.size||(a.updateGuards=e.updateGuards))),!s||!a||e&&Ru(a,e)&&n||(a.enterCallbacks[t]||[]).forEach((a=>a(s)))}),{flush:"post"}),()=>{const n=e.value,l=c.value,o=l&&l.components[s.name],d=s.name;if(!o)return Xg(t.default,{Component:o,route:n});const r=l.props[s.name],i=r?!0===r?n.params:"function"==typeof r?r(n):r:null,h=we(o,Iu({},i,a,{onVnodeUnmounted:s=>{s.component.isUnmounted&&(l.instances[d]=null)},ref:p}));return Xg(t.default,{Component:h,route:n})||h}}});function Zg(s){const a=bg(s.routes,s);let t=s.parseQuery||Mg,n=s.stringifyQuery||$g,e=s.history;const l=Vg(),c=Vg(),p=Vg(),o=qa(lg,!0);let d=lg;Eu&&s.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const r=Du.bind(null,(s=>""+s)),i=Du.bind(null,Lg),h=Du.bind(null,Bg);function u(s,l){if(l=Iu({},l||o.value),"string"==typeof s){let n=Nu(t,s,l.path),c=a.resolve({path:n.path},l),p=e.createHref(n.fullPath);return Iu(n,c,{params:h(c.params),hash:Bg(n.hash),redirectedFrom:void 0,href:p})}let c;"path"in s?c=Iu({},s,{path:Nu(t,s.path,l.path).path}):(c=Iu({},s,{params:i(s.params)}),l.params=i(l.params));let p=a.resolve(c,l);const d=s.hash||"";p.params=r(h(p.params));const u=function(s,a){let t=a.query?s(a.query):"";return a.path+(t&&"?")+t+(a.hash||"")}(n,Iu({},s,{hash:(g=d,Fg(g).replace(Dg,"{").replace(Tg,"}").replace(Eg,"^")),path:p.path}));var g;let j=e.createHref(u);return Iu({fullPath:u,hash:d,query:n===$g?Ug(s.query):s.query},p,{redirectedFrom:void 0,href:j})}function g(s){return"string"==typeof s?Nu(t,s,o.value.path):Iu({},s)}function j(s,a){if(d!==s)return dg(8,{from:a,to:s})}function m(s){return b(s)}function v(s){const a=s.matched[s.matched.length-1];if(a&&a.redirect){const{redirect:t}=a;let n="function"==typeof t?t(s):t;return"string"==typeof n&&(n=n.indexOf("?")>-1||n.indexOf("#")>-1?n=g(n):{path:n}),Iu({query:s.query,hash:s.hash,params:s.params},n)}}function b(s,a){const t=d=u(s),e=o.value,l=s.state,c=s.force,p=!0===s.replace,r=v(t);if(r)return b(Iu(g(r),{state:l,force:c,replace:p}),a||t);const i=t;let h;return i.redirectedFrom=a,!c&&function(s,a,t){let n=a.matched.length-1,e=t.matched.length-1;return n>-1&&n===e&&Ru(a.matched[n],t.matched[e])&&Lu(a.params,t.params)&&s(a.query)===s(t.query)&&a.hash===t.hash}(n,e,t)&&(h=dg(16,{to:i,from:e}),O(e,e,!0,!1)),(h?Promise.resolve(h):y(i,e)).catch((s=>rg(s)?s:C(s))).then((s=>{if(s){if(rg(s,2))return b(Iu(g(s.to),{state:l,force:c,replace:p}),a||i)}else s=x(i,e,!0,p,l);return q(i,e,s),s}))}function f(s,a){const t=j(s,a);return t?Promise.reject(t):Promise.resolve()}function y(s,a){let t;const[n,e,p]=function(s,a){const t=[],n=[],e=[],l=Math.max(a.matched.length,s.matched.length);for(let c=0;cRu(s,l)))?n.push(l):t.push(l));const p=s.matched[c];p&&(a.matched.find((s=>Ru(s,p)))||e.push(p))}return[t,n,e]}(s,a);t=Wg(n.reverse(),"beforeRouteLeave",s,a);for(const l of n)l.leaveGuards.forEach((n=>{t.push(Hg(n,s,a))}));const o=f.bind(null,s,a);return t.push(o),sj(t).then((()=>{t=[];for(const n of l.list())t.push(Hg(n,s,a));return t.push(o),sj(t)})).then((()=>{t=Wg(e,"beforeRouteUpdate",s,a);for(const n of e)n.updateGuards.forEach((n=>{t.push(Hg(n,s,a))}));return t.push(o),sj(t)})).then((()=>{t=[];for(const n of s.matched)if(n.beforeEnter&&a.matched.indexOf(n)<0)if(Array.isArray(n.beforeEnter))for(const e of n.beforeEnter)t.push(Hg(e,s,a));else t.push(Hg(n.beforeEnter,s,a));return t.push(o),sj(t)})).then((()=>(s.matched.forEach((s=>s.enterCallbacks={})),t=Wg(p,"beforeRouteEnter",s,a),t.push(o),sj(t)))).then((()=>{t=[];for(const n of c.list())t.push(Hg(n,s,a));return t.push(o),sj(t)})).catch((s=>rg(s,8)?s:Promise.reject(s)))}function q(s,a,t){for(const n of p.list())n(s,a,t)}function x(s,a,t,n,l){const c=j(s,a);if(c)return c;const p=a===lg,d=Eu?history.state:{};t&&(n||p?e.replace(s.fullPath,Iu({scroll:p&&d&&d.scroll},l)):e.push(s.fullPath,l)),o.value=s,O(s,a,t,p),P()}let w;function _(){w=e.listen(((s,a,t)=>{let n=u(s);const l=v(n);if(l)return void b(Iu(l,{replace:!0}),n).catch(Au);d=n;const c=o.value;var p,r;Eu&&(p=Xu(c.fullPath,t.delta),r=Ju(),Qu.set(p,r)),y(n,c).catch((s=>rg(s,12)?s:rg(s,2)?(b(s.to,n).catch(Au),Promise.reject()):(t.delta&&e.go(-t.delta,!1),C(s)))).then((s=>{(s=s||x(n,c,!1))&&t.delta&&e.go(-t.delta,!1),q(n,c,s)})).catch(Au)}))}let k,S=Vg(),z=Vg();function C(s){return P(s),z.list().forEach((a=>a(s))),Promise.reject(s)}function P(s){k||(k=!0,_(),S.list().forEach((([a,t])=>s?t(s):a())),S.reset())}function O(a,t,n,e){const{scrollBehavior:l}=s;if(!Eu||!l)return Promise.resolve();let c=!n&&function(s){const a=Qu.get(s);return Qu.delete(s),a}(Xu(a.fullPath,0))||(e||!n)&&history.state&&history.state.scroll||null;return de().then((()=>l(a,t,c))).then((s=>s&&Yu(s))).catch(C)}const E=s=>e.go(s);let I;const D=new Set;return{currentRoute:o,addRoute:function(s,t){let n,e;return eg(s)?(n=a.getRecordMatcher(s),e=t):e=s,a.addRoute(e,n)},removeRoute:function(s){let t=a.getRecordMatcher(s);t&&a.removeRoute(t)},hasRoute:function(s){return!!a.getRecordMatcher(s)},getRoutes:function(){return a.getRoutes().map((s=>s.record))},resolve:u,options:s,push:m,replace:function(s){return m(Iu(g(s),{replace:!0}))},go:E,back:()=>E(-1),forward:()=>E(1),beforeEach:l.add,beforeResolve:c.add,afterEach:p.add,onError:z.add,isReady:function(){return k&&o.value!==lg?Promise.resolve():new Promise(((s,a)=>{S.add([s,a])}))},install(s){s.component("RouterLink",Kg),s.component("RouterView",Qg),s.config.globalProperties.$router=this,Object.defineProperty(s.config.globalProperties,"$route",{get:()=>wa(o)}),Eu&&!I&&o.value===lg&&(I=!0,m(e.location).catch((s=>{})));const a={};for(let n in lg)a[n]=za((()=>o.value[n]));s.provide(Cu,this),s.provide(Pu,oa(a)),s.provide(Ou,o);let t=s.unmount;D.add(s),s.unmount=function(){D.delete(s),D.size<1&&(w(),o.value=lg,I=!1,k=!1),t()}}}}function sj(s){return s.reduce(((s,a)=>s.then((()=>a()))),Promise.resolve())}const aj=navigator.userAgent.toLowerCase(),tj=/ios|iphone|ipod|ipad|android/.test(aj);function nj(s,a="-"){return s.replace(/([a-z\d])([A-Z])/g,"$1"+a+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+a+"$2").toLowerCase()}let ej=[],lj=!1;function cj(){var s,a;const t=window.vueRouter,{path:n}=t.currentRoute.value;return(null==(s=Wh.site.simulator)?void 0:s.routeMapper)?null==(a=Wh.site.simulator)?void 0:a.routeMapper(n):n}function pj(){window.top.postMessage({type:"replacePath",value:cj()},"*")}function oj(){const s=document.querySelector("iframe");var a;s&&(a=()=>{s.contentWindow.postMessage({type:"replacePath",value:cj()},"*")},lj?a():ej.push(a))}function dj(s){window.addEventListener("message",(a=>{var t,n;if("replacePath"!==(null==(t=a.data)?void 0:t.type))return;const e=(null==(n=a.data)?void 0:n.value)||"";s.currentRoute.value.path!==e&&s.replace(e).catch((()=>{}))}))}window.top===window?window.addEventListener("message",(s=>{"iframeReady"===s.data.type&&(lj=!0,ej.forEach((s=>s())),ej=[])})):window.top.postMessage({type:"iframeReady"},"*"),tj&&location.replace("mobile.html"+location.hash);const{locales:rj,defaultLang:ij}=Wh.site;function hj(s){const a=s.path.split("/")[1];return-1!==Object.keys(rj).indexOf(a)?a:uu()}gu(ij);const uj=Zg({history:ng(),routes:function(){const s=[],a=Object.keys(Gh);return rj?s.push({name:"notFound",path:"/:path(.*)+",redirect:s=>({name:hj(s)})}):s.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),a.forEach((a=>{const{component:t,lang:n}=function(s){if(-1!==s.indexOf("_")){const a=s.split("_");return{component:`${nj(a.shift())}`,lang:a.join("-")}}return{component:`${nj(s)}`,lang:""}}(a);"home"===t&&function(a,t){s.push({name:t||"home",path:`/${t||""}`,component:a,meta:{lang:t}})}(Gh[a],n),n?s.push({name:`${n}/${t}`,path:`/${n}/${t}`,component:Gh[a],meta:{lang:n,name:t}}):s.push({name:`${t}`,path:`/${t}`,component:Gh[a],meta:{name:t}})})),s}(),scrollBehavior:s=>s.hash?{el:s.hash}:{top:0}});uj.afterEach((()=>{de(oj)})),!1!==(null==(s=Wh.site.simulator)?void 0:s.syncPathFromSimulator)&&dj(uj),window.vueRouter=uj,window.app=el(mu).use(uj).component(wu.name,wu),setTimeout((()=>{window.app.mount("#app")}),0);const gj={name:"DemoBlock",props:{card:Boolean,title:String}},jj={class:"van-doc-demo-block"},mj={key:0,class:"van-doc-demo-block__title"},vj={key:1,class:"van-doc-demo-block__card"};var bj=ll(gj,[["render",function(s,a,t,n,e,l){return on(),un("div",jj,[t.title?(on(),un("h2",mj,m(t.title),1)):kn("v-if",!0),t.card?(on(),un("div",vj,[On(s.$slots,"default")])):On(s.$slots,"default",{key:2})])}]]);var fj=ll({name:"DemoSection",computed:{demoName(){const{meta:s}=this.$route||{};return s&&s.name?`demo-${nj(s.name)}`:""}}},[["render",function(s,a,t,n,e,l){return on(),un("section",{class:j(["van-doc-demo-section",l.demoName])},[On(s.$slots,"default")],2)}]]);const yj={},qj={versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[]},xj={},wj={viewBox:"0 0 1024 1024"},_j=[yn("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),yn("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)];const kj={class:"demo-home-nav"},Sj={class:"demo-home-nav__title"},zj={class:"demo-home-nav__group"};const Cj={class:"demo-home"},Pj=["src"],Oj={key:0,class:"demo-home__desc"};var Ej=ll({components:{DemoHomeNav:ll({components:{ArrowRight:ll(xj,[["render",function(s,a){return on(),un("svg",wj,_j)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(s,a,t,n,e,l){const c=Qt("arrow-right"),p=Qt("router-link");return on(),un("div",kj,[yn("div",Sj,m(t.group.title),1),yn("div",zj,[(on(!0),un(tn,null,Pn(t.group.items,(s=>(on(),gn(p,{class:"demo-home-nav__block",key:s.path,to:`${l.base}/${s.path}`},{default:Aa((()=>[wn(m(s.title)+" ",1),qn(c,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:s}=this.$route.meta;return s},config(){const{locales:s}=qj;return s?s[this.lang]:qj},smallTitle(){return this.config.title.length>=8}}},[["render",function(s,a,t,n,e,l){const c=Qt("demo-home-nav");return on(),un("div",Cj,[yn("h1",{class:j(["demo-home__title",{"demo-home__title--small":l.smallTitle}])},[yn("img",{src:l.config.logo},null,8,Pj),yn("span",null,m(l.config.title),1)],2),l.config.description?(on(),un("h2",Oj,m(l.config.description),1)):kn("v-if",!0),(on(!0),un(tn,null,Pn(l.config.nav,((s,a)=>(on(),gn(c,{key:a,lang:l.lang,group:s},null,8,["lang","group"])))),128))])}]]);const{locales:Ij,defaultLang:Dj}=qj;function Aj(s){const a=s.path.split("/")[1];return-1!==Object.keys(Ij).indexOf(a)?a:uu()}gu(Dj);const Tj=Zg({history:ng(),routes:function(){const s=[],a=Object.keys(yj),t=Ij?Object.keys(Ij):[];return t.length?(s.push({name:"NotFound",path:"/:path(.*)+",redirect:s=>({name:Aj(s)})}),t.forEach((a=>{s.push({name:a,path:`/${a}`,component:Ej,meta:{lang:a}})}))):(s.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),s.push({name:"home",path:"/",component:Ej})),a.forEach((a=>{const n=nj(a);t.length?t.forEach((t=>{s.push({name:`${t}/${n}`,path:`/${t}/${n}`,component:yj[a],meta:{name:a,lang:t}})})):s.push({name:n,path:`/${n}`,component:yj[a],meta:{name:a}})})),s}(),scrollBehavior:(s,a,t)=>t||{x:0,y:0}});be(Tj.currentRoute,(()=>{Tj.currentRoute.value.redirectedFrom||de(pj)})),dj(Tj),window.vueRouter=Tj;const Nj={class:"demo-nav"},Fj={class:"demo-nav__title"},Rj=["d"];var Lj=ll({components:{DemoNav:ll({data:()=>({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:s}=this.$route.meta||{};return s?s.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},[["render",function(s,a,t,n,e,l){return $t((on(),un("div",Nj,[yn("div",Fj,m(l.title),1),(on(),un("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:a[0]||(a[0]=(...s)=>l.onBack&&l.onBack(...s))},[yn("path",{fill:"#969799","fill-rule":"evenodd",d:e.path},null,8,Rj)]))],512)),[[sl,l.title]])}]])}},[["render",function(s,a,t,n,e,l){const c=Qt("demo-nav"),p=Qt("demo-section"),o=Qt("router-view");return on(),un(tn,null,[qn(c),qn(o,null,{default:Aa((({Component:s})=>[(on(),gn(Qa,null,[qn(p,null,{default:Aa((()=>{return[(on(),gn((a=s,D(a)?sn("components",a,!1)||a:a||Zt)))];var a})),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var s,a="ontouchstart"in window;document.createTouch||(document.createTouch=function(s,a,n,e,l,c,p){return new t(a,n,{pageX:e,pageY:l,screenX:c,screenY:p,clientX:e-window.pageXOffset,clientY:l-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var s=e(),a=0;a{window.app.mount("#app")}),0); diff --git a/vite/assets/main.a57ec5f0.js b/vite/assets/main.a57ec5f0.js deleted file mode 100644 index 6da50a93..00000000 --- a/vite/assets/main.a57ec5f0.js +++ /dev/null @@ -1,8 +0,0 @@ -var s,a=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,e=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,p=(s,t,n)=>t in s?a(s,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):s[t]=n;function o(s,a){const t=Object.create(null),n=s.split(",");for(let e=0;e!!t[s.toLowerCase()]:s=>!!t[s]}!function(){const s=document.createElement("link").relList;if(!(s&&s.supports&&s.supports("modulepreload"))){for(const s of document.querySelectorAll('link[rel="modulepreload"]'))a(s);new MutationObserver((s=>{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();const d=o("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function r(s){return!!s||""===s}function i(s){if(P(s)){const a={};for(let t=0;t{if(s){const t=s.split(u);t.length>1&&(a[t[0].trim()]=t[1].trim())}})),a}function j(s){let a="";if(D(s))a=s;else if(P(s))for(let t=0;tnull==s?"":P(s)||T(s)&&(s.toString===F||!I(s.toString))?JSON.stringify(s,v,2):String(s),v=(s,a)=>a&&a.__v_isRef?v(s,a.value):O(a)?{[`Map(${a.size})`]:[...a.entries()].reduce(((s,[a,t])=>(s[`${a} =>`]=t,s)),{})}:E(a)?{[`Set(${a.size})`]:[...a.values()]}:!T(a)||P(a)||L(a)?a:String(a),b={},f=[],y=()=>{},q=()=>!1,x=/^on[^a-z]/,w=s=>x.test(s),_=s=>s.startsWith("onUpdate:"),k=Object.assign,S=(s,a)=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)},z=Object.prototype.hasOwnProperty,C=(s,a)=>z.call(s,a),P=Array.isArray,O=s=>"[object Map]"===R(s),E=s=>"[object Set]"===R(s),I=s=>"function"==typeof s,D=s=>"string"==typeof s,A=s=>"symbol"==typeof s,T=s=>null!==s&&"object"==typeof s,N=s=>T(s)&&I(s.then)&&I(s.catch),F=Object.prototype.toString,R=s=>F.call(s),L=s=>"[object Object]"===R(s),B=s=>D(s)&&"NaN"!==s&&"-"!==s[0]&&""+parseInt(s,10)===s,M=o(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),$=s=>{const a=Object.create(null);return t=>a[t]||(a[t]=s(t))},U=/-(\w)/g,V=$((s=>s.replace(U,((s,a)=>a?a.toUpperCase():"")))),H=/\B([A-Z])/g,W=$((s=>s.replace(H,"-$1").toLowerCase())),G=$((s=>s.charAt(0).toUpperCase()+s.slice(1))),K=$((s=>s?`on${G(s)}`:"")),J=(s,a)=>!Object.is(s,a),Y=(s,a)=>{for(let t=0;t{Object.defineProperty(s,a,{configurable:!0,enumerable:!1,value:t})},Q=s=>{const a=parseFloat(s);return isNaN(a)?s:a};let Z;let ss;const as=[];class ts{constructor(s=!1){this.active=!0,this.effects=[],this.cleanups=[],!s&&ss&&(this.parent=ss,this.index=(ss.scopes||(ss.scopes=[])).push(this)-1)}run(s){if(this.active)try{return this.on(),s()}finally{this.off()}}on(){this.active&&(as.push(this),ss=this)}off(){this.active&&(as.pop(),ss=as[as.length-1])}stop(s){if(this.active){if(this.effects.forEach((s=>s.stop())),this.cleanups.forEach((s=>s())),this.scopes&&this.scopes.forEach((s=>s.stop(!0))),this.parent&&!s){const s=this.parent.scopes.pop();s&&s!==this&&(this.parent.scopes[this.index]=s,s.index=this.index)}this.active=!1}}}const ns=s=>{const a=new Set(s);return a.w=0,a.n=0,a},es=s=>(s.w&os)>0,ls=s=>(s.n&os)>0,cs=new WeakMap;let ps=0,os=1;const ds=[];let rs;const is=Symbol(""),hs=Symbol("");class us{constructor(s,a=null,t){this.fn=s,this.scheduler=a,this.active=!0,this.deps=[],function(s,a){(a=a||ss)&&a.active&&a.effects.push(s)}(this,t)}run(){if(!this.active)return this.fn();if(!ds.includes(this))try{return ds.push(rs=this),ms.push(js),js=!0,os=1<<++ps,ps<=30?(({deps:s})=>{if(s.length)for(let a=0;a{const{deps:a}=s;if(a.length){let t=0;for(let n=0;n0?ds[s-1]:void 0}}stop(){this.active&&(gs(this),this.onStop&&this.onStop(),this.active=!1)}}function gs(s){const{deps:a}=s;if(a.length){for(let t=0;t{("length"===a||a>=n)&&p.push(s)}));else switch(void 0!==t&&p.push(c.get(t)),a){case"add":P(s)?B(t)&&p.push(c.get("length")):(p.push(c.get(is)),O(s)&&p.push(c.get(hs)));break;case"delete":P(s)||(p.push(c.get(is)),O(s)&&p.push(c.get(hs)));break;case"set":O(s)&&p.push(c.get(is))}if(1===p.length)p[0]&&ws(p[0]);else{const s=[];for(const a of p)a&&s.push(...a);ws(ns(s))}}function ws(s,a){for(const t of P(s)?s:[...s])(t!==rs||t.allowRecurse)&&(t.scheduler?t.scheduler():t.run())}const _s=o("__proto__,__v_isRef,__isVue"),ks=new Set(Object.getOwnPropertyNames(Symbol).map((s=>Symbol[s])).filter(A)),Ss=Es(),zs=Es(!1,!0),Cs=Es(!0),Ps=Os();function Os(){const s={};return["includes","indexOf","lastIndexOf"].forEach((a=>{s[a]=function(...s){const t=ga(this);for(let a=0,e=this.length;a{s[a]=function(...s){vs();const t=ga(this)[a].apply(this,s);return bs(),t}})),s}function Es(s=!1,a=!1){return function(t,n,e){if("__v_isReactive"===n)return!s;if("__v_isReadonly"===n)return s;if("__v_raw"===n&&e===(s?a?ca:la:a?ea:na).get(t))return t;const l=P(t);if(!s&&l&&C(Ps,n))return Reflect.get(Ps,n,e);const c=Reflect.get(t,n,e);if(A(n)?ks.has(n):_s(n))return c;if(s||fs(t,0,n),a)return c;if(ya(c)){return!l||!B(n)?c.value:c}return T(c)?s?da(c):oa(c):c}}function Is(s=!1){return function(a,t,n,e){let l=a[t];if(!s&&(n=ga(n),l=ga(l),!P(a)&&ya(l)&&!ya(n)))return l.value=n,!0;const c=P(a)&&B(t)?Number(t)!0,deleteProperty:(s,a)=>!0},Ts=k({},Ds,{get:zs,set:Is(!0)}),Ns=s=>s,Fs=s=>Reflect.getPrototypeOf(s);function Rs(s,a,t=!1,n=!1){const e=ga(s=s.__v_raw),l=ga(a);a!==l&&!t&&fs(e,0,a),!t&&fs(e,0,l);const{has:c}=Fs(e),p=n?Ns:t?va:ma;return c.call(e,a)?p(s.get(a)):c.call(e,l)?p(s.get(l)):void(s!==e&&s.get(a))}function Ls(s,a=!1){const t=this.__v_raw,n=ga(t),e=ga(s);return s!==e&&!a&&fs(n,0,s),!a&&fs(n,0,e),s===e?t.has(s):t.has(s)||t.has(e)}function Bs(s,a=!1){return s=s.__v_raw,!a&&fs(ga(s),0,is),Reflect.get(s,"size",s)}function Ms(s){s=ga(s);const a=ga(this);return Fs(a).has.call(a,s)||(a.add(s),xs(a,"add",s,s)),this}function $s(s,a){a=ga(a);const t=ga(this),{has:n,get:e}=Fs(t);let l=n.call(t,s);l||(s=ga(s),l=n.call(t,s));const c=e.call(t,s);return t.set(s,a),l?J(a,c)&&xs(t,"set",s,a):xs(t,"add",s,a),this}function Us(s){const a=ga(this),{has:t,get:n}=Fs(a);let e=t.call(a,s);e||(s=ga(s),e=t.call(a,s)),n&&n.call(a,s);const l=a.delete(s);return e&&xs(a,"delete",s,void 0),l}function Vs(){const s=ga(this),a=0!==s.size,t=s.clear();return a&&xs(s,"clear",void 0,void 0),t}function Hs(s,a){return function(t,n){const e=this,l=e.__v_raw,c=ga(l),p=a?Ns:s?va:ma;return!s&&fs(c,0,is),l.forEach(((s,a)=>t.call(n,p(s),p(a),e)))}}function Ws(s,a,t){return function(...n){const e=this.__v_raw,l=ga(e),c=O(l),p="entries"===s||s===Symbol.iterator&&c,o="keys"===s&&c,d=e[s](...n),r=t?Ns:a?va:ma;return!a&&fs(l,0,o?hs:is),{next(){const{value:s,done:a}=d.next();return a?{value:s,done:a}:{value:p?[r(s[0]),r(s[1])]:r(s),done:a}},[Symbol.iterator](){return this}}}}function Gs(s){return function(...a){return"delete"!==s&&this}}function Ks(){const s={get(s){return Rs(this,s)},get size(){return Bs(this)},has:Ls,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!1)},a={get(s){return Rs(this,s,!1,!0)},get size(){return Bs(this)},has:Ls,add:Ms,set:$s,delete:Us,clear:Vs,forEach:Hs(!1,!0)},t={get(s){return Rs(this,s,!0)},get size(){return Bs(this,!0)},has(s){return Ls.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!1)},n={get(s){return Rs(this,s,!0,!0)},get size(){return Bs(this,!0)},has(s){return Ls.call(this,s,!0)},add:Gs("add"),set:Gs("set"),delete:Gs("delete"),clear:Gs("clear"),forEach:Hs(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((e=>{s[e]=Ws(e,!1,!1),t[e]=Ws(e,!0,!1),a[e]=Ws(e,!1,!0),n[e]=Ws(e,!0,!0)})),[s,t,a,n]}const[Js,Ys,Xs,Qs]=Ks();function Zs(s,a){const t=a?s?Qs:Xs:s?Ys:Js;return(a,n,e)=>"__v_isReactive"===n?!s:"__v_isReadonly"===n?s:"__v_raw"===n?a:Reflect.get(C(t,n)&&n in a?t:a,n,e)}const sa={get:Zs(!1,!1)},aa={get:Zs(!1,!0)},ta={get:Zs(!0,!1)},na=new WeakMap,ea=new WeakMap,la=new WeakMap,ca=new WeakMap;function pa(s){return s.__v_skip||!Object.isExtensible(s)?0:function(s){switch(s){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((s=>R(s).slice(8,-1))(s))}function oa(s){return s&&s.__v_isReadonly?s:ra(s,!1,Ds,sa,na)}function da(s){return ra(s,!0,As,ta,la)}function ra(s,a,t,n,e){if(!T(s))return s;if(s.__v_raw&&(!a||!s.__v_isReactive))return s;const l=e.get(s);if(l)return l;const c=pa(s);if(0===c)return s;const p=new Proxy(s,2===c?n:t);return e.set(s,p),p}function ia(s){return ha(s)?ia(s.__v_raw):!(!s||!s.__v_isReactive)}function ha(s){return!(!s||!s.__v_isReadonly)}function ua(s){return ia(s)||ha(s)}function ga(s){const a=s&&s.__v_raw;return a?ga(a):s}function ja(s){return X(s,"__v_skip",!0),s}const ma=s=>T(s)?oa(s):s,va=s=>T(s)?da(s):s;function ba(s){ys()&&((s=ga(s)).dep||(s.dep=ns()),qs(s.dep))}function fa(s,a){(s=ga(s)).dep&&ws(s.dep)}function ya(s){return Boolean(s&&!0===s.__v_isRef)}function qa(s,a){return ya(s)?s:new xa(s,a)}class xa{constructor(s,a){this._shallow=a,this.dep=void 0,this.__v_isRef=!0,this._rawValue=a?s:ga(s),this._value=a?s:ma(s)}get value(){return ba(this),this._value}set value(s){s=this._shallow?s:ga(s),J(s,this._rawValue)&&(this._rawValue=s,this._value=this._shallow?s:ma(s),fa(this))}}function wa(s){return ya(s)?s.value:s}const _a={get:(s,a,t)=>wa(Reflect.get(s,a,t)),set:(s,a,t,n)=>{const e=s[a];return ya(e)&&!ya(t)?(e.value=t,!0):Reflect.set(s,a,t,n)}};function ka(s){return ia(s)?s:new Proxy(s,_a)}class Sa{constructor(s,a,t){this._setter=a,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new us(s,(()=>{this._dirty||(this._dirty=!0,fa(this))})),this.__v_isReadonly=t}get value(){const s=ga(this);return ba(s),s._dirty&&(s._dirty=!1,s._value=s.effect.run()),s._value}set value(s){this._setter(s)}}function za(s,a){let t,n;const e=I(s);e?(t=s,n=y):(t=s.get,n=s.set);return new Sa(t,n,e||!n)}function Ca(s,a,...t){const n=s.vnode.props||b;let e=t;const l=a.startsWith("update:"),c=l&&a.slice(7);if(c&&c in n){const s=`${"modelValue"===c?"model":c}Modifiers`,{number:a,trim:l}=n[s]||b;l?e=t.map((s=>s.trim())):a&&(e=t.map(Q))}let p,o=n[p=K(a)]||n[p=K(V(a))];!o&&l&&(o=n[p=K(W(a))]),o&&Kn(o,s,6,e);const d=n[p+"Once"];if(d){if(s.emitted){if(s.emitted[p])return}else s.emitted={};s.emitted[p]=!0,Kn(d,s,6,e)}}function Pa(s,a,t=!1){const n=a.emitsCache,e=n.get(s);if(void 0!==e)return e;const l=s.emits;let c={},p=!1;if(!I(s)){const n=s=>{const t=Pa(s,a,!0);t&&(p=!0,k(c,t))};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}return l||p?(P(l)?l.forEach((s=>c[s]=null)):k(c,l),n.set(s,c),c):(n.set(s,null),null)}function Oa(s,a){return!(!s||!w(a))&&(a=a.slice(2).replace(/Once$/,""),C(s,a[0].toLowerCase()+a.slice(1))||C(s,W(a))||C(s,a))}Promise.resolve();let Ea=null,Ia=null;function Da(s){const a=Ea;return Ea=s,Ia=s&&s.type.__scopeId||null,a}function Aa(s,a=Ea,t){if(!a)return s;if(s._n)return s;const n=(...t)=>{n._d&&rn(-1);const e=Da(a),l=s(...t);return Da(e),n._d&&rn(1),l};return n._n=!0,n._c=!0,n._d=!0,n}function Ta(s){const{type:a,vnode:t,proxy:n,withProxy:e,props:l,propsOptions:[c],slots:p,attrs:o,emit:d,render:r,renderCache:i,data:h,setupState:u,ctx:g,inheritAttrs:j}=s;let m,v;const b=Da(s);try{if(4&t.shapeFlag){const s=e||n;m=Sn(r.call(s,s,i,l,u,h,g)),v=o}else{const s=a;0,m=Sn(s.length>1?s(l,{attrs:o,slots:p,emit:d}):s(l,null)),v=a.props?o:Na(o)}}catch(y){cn.length=0,Jn(y,s,1),m=qn(en)}let f=m;if(v&&!1!==j){const s=Object.keys(v),{shapeFlag:a}=f;s.length&&7&a&&(c&&s.some(_)&&(v=Fa(v,c)),f=xn(f,v))}return t.dirs&&(f.dirs=f.dirs?f.dirs.concat(t.dirs):t.dirs),t.transition&&(f.transition=t.transition),m=f,Da(b),m}const Na=s=>{let a;for(const t in s)("class"===t||"style"===t||w(t))&&((a||(a={}))[t]=s[t]);return a},Fa=(s,a)=>{const t={};for(const n in s)_(n)&&n.slice(9)in a||(t[n]=s[n]);return t};function Ra(s,a,t){const n=Object.keys(a);if(n.length!==Object.keys(s).length)return!0;for(let e=0;e1)return t&&I(a)?a.call(n.proxy):a}}const Ma=[Function,Array],$a={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Ma,onEnter:Ma,onAfterEnter:Ma,onEnterCancelled:Ma,onBeforeLeave:Ma,onLeave:Ma,onAfterLeave:Ma,onLeaveCancelled:Ma,onBeforeAppear:Ma,onAppear:Ma,onAfterAppear:Ma,onAppearCancelled:Ma},setup(s,{slots:a}){const t=Rn(),n=function(){const s={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return dt((()=>{s.isMounted=!0})),ht((()=>{s.isUnmounting=!0})),s}();let e;return()=>{const l=a.default&&Ka(a.default(),!0);if(!l||!l.length)return;const c=ga(s),{mode:p}=c,o=l[0];if(n.isLeaving)return Ha(o);const d=Wa(o);if(!d)return Ha(o);const r=Va(d,c,n,t);Ga(d,r);const i=t.subTree,h=i&&Wa(i);let u=!1;const{getTransitionKey:g}=d.type;if(g){const s=g();void 0===e?e=s:s!==e&&(e=s,u=!0)}if(h&&h.type!==en&&(!mn(d,h)||u)){const s=Va(h,c,n,t);if(Ga(h,s),"out-in"===p)return n.isLeaving=!0,s.afterLeave=()=>{n.isLeaving=!1,t.update()},Ha(o);"in-out"===p&&d.type!==en&&(s.delayLeave=(s,a,t)=>{Ua(n,h)[String(h.key)]=h,s._leaveCb=()=>{a(),s._leaveCb=void 0,delete r.delayedLeave},r.delayedLeave=t})}return o}}};function Ua(s,a){const{leavingVNodes:t}=s;let n=t.get(a.type);return n||(n=Object.create(null),t.set(a.type,n)),n}function Va(s,a,t,n){const{appear:e,mode:l,persisted:c=!1,onBeforeEnter:p,onEnter:o,onAfterEnter:d,onEnterCancelled:r,onBeforeLeave:i,onLeave:h,onAfterLeave:u,onLeaveCancelled:g,onBeforeAppear:j,onAppear:m,onAfterAppear:v,onAppearCancelled:b}=a,f=String(s.key),y=Ua(t,s),q=(s,a)=>{s&&Kn(s,n,9,a)},x={mode:l,persisted:c,beforeEnter(a){let n=p;if(!t.isMounted){if(!e)return;n=j||p}a._leaveCb&&a._leaveCb(!0);const l=y[f];l&&mn(s,l)&&l.el._leaveCb&&l.el._leaveCb(),q(n,[a])},enter(s){let a=o,n=d,l=r;if(!t.isMounted){if(!e)return;a=m||o,n=v||d,l=b||r}let c=!1;const p=s._enterCb=a=>{c||(c=!0,q(a?l:n,[s]),x.delayedLeave&&x.delayedLeave(),s._enterCb=void 0)};a?(a(s,p),a.length<=1&&p()):p()},leave(a,n){const e=String(s.key);if(a._enterCb&&a._enterCb(!0),t.isUnmounting)return n();q(i,[a]);let l=!1;const c=a._leaveCb=t=>{l||(l=!0,n(),q(t?g:u,[a]),a._leaveCb=void 0,y[e]===s&&delete y[e])};y[e]=s,h?(h(a,c),h.length<=1&&c()):c()},clone:s=>Va(s,a,t,n)};return x}function Ha(s){if(Xa(s))return(s=xn(s)).children=null,s}function Wa(s){return Xa(s)?s.children?s.children[0]:void 0:s}function Ga(s,a){6&s.shapeFlag&&s.component?Ga(s.component.subTree,a):128&s.shapeFlag?(s.ssContent.transition=a.clone(s.ssContent),s.ssFallback.transition=a.clone(s.ssFallback)):s.transition=a}function Ka(s,a=!1){let t=[],n=0;for(let e=0;e1)for(let e=0;e!!s.type.__asyncLoader,Xa=s=>s.type.__isKeepAlive,Qa={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(s,{slots:a}){const t=Rn(),n=t.ctx;if(!n.renderer)return a.default;const e=new Map,l=new Set;let c=null;const p=t.suspense,{renderer:{p:o,m:d,um:r,o:{createElement:i}}}=n,h=i("div");function u(s){et(s),r(s,t,p)}function g(s){e.forEach(((a,t)=>{const n=Wn(a.type);!n||s&&s(n)||j(t)}))}function j(s){const a=e.get(s);c&&a.type===c.type?c&&et(c):u(a),e.delete(s),l.delete(s)}n.activate=(s,a,t,n,e)=>{const l=s.component;d(s,a,t,0,p),o(l.vnode,s,a,t,l,p,n,s.slotScopeIds,e),Gt((()=>{l.isDeactivated=!1,l.a&&Y(l.a);const a=s.props&&s.props.onVnodeMounted;a&&Yt(a,l.parent,s)}),p)},n.deactivate=s=>{const a=s.component;d(s,h,null,1,p),Gt((()=>{a.da&&Y(a.da);const t=s.props&&s.props.onVnodeUnmounted;t&&Yt(t,a.parent,s),a.isDeactivated=!0}),p)},be((()=>[s.include,s.exclude]),(([s,a])=>{s&&g((a=>Za(s,a))),a&&g((s=>!Za(a,s)))}),{flush:"post",deep:!0});let m=null;const v=()=>{null!=m&&e.set(m,lt(t.subTree))};return dt(v),it(v),ht((()=>{e.forEach((s=>{const{subTree:a,suspense:n}=t,e=lt(a);if(s.type!==e.type)u(s);else{et(e);const s=e.component.da;s&&Gt(s,n)}}))})),()=>{if(m=null,!a.default)return null;const t=a.default(),n=t[0];if(t.length>1)return c=null,t;if(!(jn(n)&&(4&n.shapeFlag||128&n.shapeFlag)))return c=null,n;let p=lt(n);const o=p.type,d=Wn(Ya(p)?p.type.__asyncResolved||{}:o),{include:r,exclude:i,max:h}=s;if(r&&(!d||!Za(r,d))||i&&d&&Za(i,d))return c=p,n;const u=null==p.key?o:p.key,g=e.get(u);return p.el&&(p=xn(p),128&n.shapeFlag&&(n.ssContent=p)),m=u,g?(p.el=g.el,p.component=g.component,p.transition&&Ga(p,p.transition),p.shapeFlag|=512,l.delete(u),l.add(u)):(l.add(u),h&&l.size>parseInt(h,10)&&j(l.values().next().value)),p.shapeFlag|=256,c=p,n}}};function Za(s,a){return P(s)?s.some((s=>Za(s,a))):D(s)?s.split(",").indexOf(a)>-1:!!s.test&&s.test(a)}function st(s,a){tt(s,"a",a)}function at(s,a){tt(s,"da",a)}function tt(s,a,t=Fn){const n=s.__wdc||(s.__wdc=()=>{let a=t;for(;a;){if(a.isDeactivated)return;a=a.parent}s()});if(ct(a,n,t),t){let s=t.parent;for(;s&&s.parent;)Xa(s.parent.vnode)&&nt(n,a,t,s),s=s.parent}}function nt(s,a,t,n){const e=ct(a,s,n,!0);ut((()=>{S(n[a],e)}),t)}function et(s){let a=s.shapeFlag;256&a&&(a-=256),512&a&&(a-=512),s.shapeFlag=a}function lt(s){return 128&s.shapeFlag?s.ssContent:s}function ct(s,a,t=Fn,n=!1){if(t){const e=t[s]||(t[s]=[]),l=a.__weh||(a.__weh=(...n)=>{if(t.isUnmounted)return;vs(),Ln(t);const e=Kn(a,t,s,n);return Bn(),bs(),e});return n?e.unshift(l):e.push(l),l}}const pt=s=>(a,t=Fn)=>(!$n||"sp"===s)&&ct(s,a,t),ot=pt("bm"),dt=pt("m"),rt=pt("bu"),it=pt("u"),ht=pt("bum"),ut=pt("um"),gt=pt("sp"),jt=pt("rtg"),mt=pt("rtc");function vt(s,a=Fn){ct("ec",s,a)}let bt=!0;function ft(s){const a=xt(s),t=s.proxy,n=s.ctx;bt=!1,a.beforeCreate&&yt(a.beforeCreate,s,"bc");const{data:e,computed:l,methods:c,watch:p,provide:o,inject:d,created:r,beforeMount:i,mounted:h,beforeUpdate:u,updated:g,activated:j,deactivated:m,beforeDestroy:v,beforeUnmount:b,destroyed:f,unmounted:q,render:x,renderTracked:w,renderTriggered:_,errorCaptured:k,serverPrefetch:S,expose:z,inheritAttrs:C,components:O,directives:E,filters:D}=a;if(d&&function(s,a,t=y,n=!1){P(s)&&(s=St(s));for(const e in s){const t=s[e];let l;l=T(t)?"default"in t?Ba(t.from||e,t.default,!0):Ba(t.from||e):Ba(t),ya(l)&&n?Object.defineProperty(a,e,{enumerable:!0,configurable:!0,get:()=>l.value,set:s=>l.value=s}):a[e]=l}}(d,n,null,s.appContext.config.unwrapInjectedRef),c)for(const y in c){const s=c[y];I(s)&&(n[y]=s.bind(t))}if(e){const a=e.call(t,t);T(a)&&(s.data=oa(a))}if(bt=!0,l)for(const P in l){const s=l[P],a=za({get:I(s)?s.bind(t,t):I(s.get)?s.get.bind(t,t):y,set:!I(s)&&I(s.set)?s.set.bind(t):y});Object.defineProperty(n,P,{enumerable:!0,configurable:!0,get:()=>a.value,set:s=>a.value=s})}if(p)for(const y in p)qt(p[y],n,t,y);if(o){const s=I(o)?o.call(t):o;Reflect.ownKeys(s).forEach((a=>{La(a,s[a])}))}function A(s,a){P(a)?a.forEach((a=>s(a.bind(t)))):a&&s(a.bind(t))}if(r&&yt(r,s,"c"),A(ot,i),A(dt,h),A(rt,u),A(it,g),A(st,j),A(at,m),A(vt,k),A(mt,w),A(jt,_),A(ht,b),A(ut,q),A(gt,S),P(z))if(z.length){const a=s.exposed||(s.exposed={});z.forEach((s=>{Object.defineProperty(a,s,{get:()=>t[s],set:a=>t[s]=a})}))}else s.exposed||(s.exposed={});x&&s.render===y&&(s.render=x),null!=C&&(s.inheritAttrs=C),O&&(s.components=O),E&&(s.directives=E)}function yt(s,a,t){Kn(P(s)?s.map((s=>s.bind(a.proxy))):s.bind(a.proxy),a,t)}function qt(s,a,t,n){const e=n.includes(".")?qe(t,n):()=>t[n];if(D(s)){const t=a[s];I(t)&&be(e,t)}else if(I(s))be(e,s.bind(t));else if(T(s))if(P(s))s.forEach((s=>qt(s,a,t,n)));else{const n=I(s.handler)?s.handler.bind(t):a[s.handler];I(n)&&be(e,n,s)}}function xt(s){const a=s.type,{mixins:t,extends:n}=a,{mixins:e,optionsCache:l,config:{optionMergeStrategies:c}}=s.appContext,p=l.get(a);let o;return p?o=p:e.length||t||n?(o={},e.length&&e.forEach((s=>wt(o,s,c,!0))),wt(o,a,c)):o=a,l.set(a,o),o}function wt(s,a,t,n=!1){const{mixins:e,extends:l}=a;l&&wt(s,l,t,!0),e&&e.forEach((a=>wt(s,a,t,!0)));for(const c in a)if(n&&"expose"===c);else{const n=_t[c]||t&&t[c];s[c]=n?n(s[c],a[c]):a[c]}return s}const _t={data:kt,props:Ct,emits:Ct,methods:Ct,computed:Ct,beforeCreate:zt,created:zt,beforeMount:zt,mounted:zt,beforeUpdate:zt,updated:zt,beforeDestroy:zt,beforeUnmount:zt,destroyed:zt,unmounted:zt,activated:zt,deactivated:zt,errorCaptured:zt,serverPrefetch:zt,components:Ct,directives:Ct,watch:function(s,a){if(!s)return a;if(!a)return s;const t=k(Object.create(null),s);for(const n in a)t[n]=zt(s[n],a[n]);return t},provide:kt,inject:function(s,a){return Ct(St(s),St(a))}};function kt(s,a){return a?s?function(){return k(I(s)?s.call(this,this):s,I(a)?a.call(this,this):a)}:a:s}function St(s){if(P(s)){const a={};for(let t=0;t{o=!0;const[t,n]=It(s,a,!0);k(c,t),n&&p.push(...n)};!t&&a.mixins.length&&a.mixins.forEach(n),s.extends&&n(s.extends),s.mixins&&s.mixins.forEach(n)}if(!l&&!o)return n.set(s,f),f;if(P(l))for(let r=0;r-1,t[1]=n<0||a-1||C(t,"default"))&&p.push(s)}}}const d=[c,p];return n.set(s,d),d}function Dt(s){return"$"!==s[0]}function At(s){const a=s&&s.toString().match(/^\s*function (\w+)/);return a?a[1]:null===s?"null":""}function Tt(s,a){return At(s)===At(a)}function Nt(s,a){return P(a)?a.findIndex((a=>Tt(a,s))):I(a)&&Tt(a,s)?0:-1}const Ft=s=>"_"===s[0]||"$stable"===s,Rt=s=>P(s)?s.map(Sn):[Sn(s)],Lt=(s,a,t)=>{const n=Aa(((...s)=>Rt(a(...s))),t);return n._c=!1,n},Bt=(s,a,t)=>{const n=s._ctx;for(const e in s){if(Ft(e))continue;const t=s[e];if(I(t))a[e]=Lt(0,t,n);else if(null!=t){const s=Rt(t);a[e]=()=>s}}},Mt=(s,a)=>{const t=Rt(a);s.slots.default=()=>t};function $t(s,a){if(null===Ea)return s;const t=Ea.proxy,n=s.dirs||(s.dirs=[]);for(let e=0;e(l.has(s)||(s&&I(s.install)?(l.add(s),s.install(p,...a)):I(s)&&(l.add(s),s(p,...a))),p),mixin:s=>(e.mixins.includes(s)||e.mixins.push(s),p),component:(s,a)=>a?(e.components[s]=a,p):e.components[s],directive:(s,a)=>a?(e.directives[s]=a,p):e.directives[s],mount(l,o,d){if(!c){const r=qn(t,n);return r.appContext=e,o&&a?a(r,l):s(r,l,d),c=!0,p._container=l,l.__vue_app__=p,Hn(r.component)||r.component.proxy}},unmount(){c&&(s(null,p._container),delete p._container.__vue_app__)},provide:(s,a)=>(e.provides[s]=a,p)};return p}}const Gt=function(s,a){a&&a.pendingBranch?P(s)?a.effects.push(...s):a.effects.push(s):he(s,ee,ne,le)};function Kt(s){return function(s,a){(Z||(Z="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{})).__VUE__=!0;const{insert:t,remove:n,patchProp:e,createElement:l,createText:c,createComment:p,setText:o,setElementText:d,parentNode:r,nextSibling:i,setScopeId:h=y,cloneNode:u,insertStaticContent:g}=s,j=(s,a,t,n=null,e=null,l=null,c=!1,p=null,o=!!a.dynamicChildren)=>{if(s===a)return;s&&!mn(s,a)&&(n=as(s),G(s,e,l,!0),s=null),-2===a.patchFlag&&(o=!1,a.dynamicChildren=null);const{type:d,ref:r,shapeFlag:i}=a;switch(d){case nn:m(s,a,t,n);break;case en:v(s,a,t,n);break;case ln:null==s&&q(a,t,n,c);break;case tn:D(s,a,t,n,e,l,c,p,o);break;default:1&i?_(s,a,t,n,e,l,c,p,o):6&i?A(s,a,t,n,e,l,c,p,o):(64&i||128&i)&&d.process(s,a,t,n,e,l,c,p,o,es)}null!=r&&e&&Jt(r,s&&s.ref,l,a||s,!a)},m=(s,a,n,e)=>{if(null==s)t(a.el=c(a.children),n,e);else{const t=a.el=s.el;a.children!==s.children&&o(t,a.children)}},v=(s,a,n,e)=>{null==s?t(a.el=p(a.children||""),n,e):a.el=s.el},q=(s,a,t,n)=>{[s.el,s.anchor]=g(s.children,a,t,n)},x=({el:s,anchor:a},n,e)=>{let l;for(;s&&s!==a;)l=i(s),t(s,n,e),s=l;t(a,n,e)},w=({el:s,anchor:a})=>{let t;for(;s&&s!==a;)t=i(s),n(s),s=t;n(a)},_=(s,a,t,n,e,l,c,p,o)=>{c=c||"svg"===a.type,null==s?S(a,t,n,e,l,c,p,o):O(s,a,e,l,c,p,o)},S=(s,a,n,c,p,o,r,i)=>{let h,g;const{type:j,props:m,shapeFlag:v,transition:b,patchFlag:f,dirs:y}=s;if(s.el&&void 0!==u&&-1===f)h=s.el=u(s.el);else{if(h=s.el=l(s.type,o,m&&m.is,m),8&v?d(h,s.children):16&v&&P(s.children,h,null,c,p,o&&"foreignObject"!==j,r,i),y&&Ut(s,null,c,"created"),m){for(const a in m)"value"===a||M(a)||e(h,a,null,m[a],o,s.children,c,p,ss);"value"in m&&e(h,"value",null,m.value),(g=m.onVnodeBeforeMount)&&Yt(g,c,s)}z(h,s,s.scopeId,r,c)}y&&Ut(s,null,c,"beforeMount");const q=(!p||p&&!p.pendingBranch)&&b&&!b.persisted;q&&b.beforeEnter(h),t(h,a,n),((g=m&&m.onVnodeMounted)||q||y)&&Gt((()=>{g&&Yt(g,c,s),q&&b.enter(h),y&&Ut(s,null,c,"mounted")}),p)},z=(s,a,t,n,e)=>{if(t&&h(s,t),n)for(let l=0;l{for(let d=o;d{const o=a.el=s.el;let{patchFlag:r,dynamicChildren:i,dirs:h}=a;r|=16&s.patchFlag;const u=s.props||b,g=a.props||b;let j;(j=g.onVnodeBeforeUpdate)&&Yt(j,t,a,s),h&&Ut(a,s,t,"beforeUpdate");const m=l&&"foreignObject"!==a.type;if(i?E(s.dynamicChildren,i,o,t,n,m,c):p||B(s,a,o,null,t,n,m,c,!1),r>0){if(16&r)I(o,a,u,g,t,n,l);else if(2&r&&u.class!==g.class&&e(o,"class",null,g.class,l),4&r&&e(o,"style",u.style,g.style,l),8&r){const c=a.dynamicProps;for(let a=0;a{j&&Yt(j,t,a,s),h&&Ut(a,s,t,"updated")}),n)},E=(s,a,t,n,e,l,c)=>{for(let p=0;p{if(t!==n){for(const o in n){if(M(o))continue;const d=n[o],r=t[o];d!==r&&"value"!==o&&e(s,o,r,d,p,a.children,l,c,ss)}if(t!==b)for(const o in t)M(o)||o in n||e(s,o,t[o],null,p,a.children,l,c,ss);"value"in n&&e(s,"value",t.value,n.value)}},D=(s,a,n,e,l,p,o,d,r)=>{const i=a.el=s?s.el:c(""),h=a.anchor=s?s.anchor:c("");let{patchFlag:u,dynamicChildren:g,slotScopeIds:j}=a;j&&(d=d?d.concat(j):j),null==s?(t(i,n,e),t(h,n,e),P(a.children,n,h,l,p,o,d,r)):u>0&&64&u&&g&&s.dynamicChildren?(E(s.dynamicChildren,g,n,l,p,o,d),(null!=a.key||l&&a===l.subTree)&&Xt(s,a,!0)):B(s,a,n,h,l,p,o,d,r)},A=(s,a,t,n,e,l,c,p,o)=>{a.slotScopeIds=p,null==s?512&a.shapeFlag?e.ctx.activate(a,t,n,c,o):T(a,t,n,e,l,c,o):F(s,a,o)},T=(s,a,t,n,e,l,c)=>{const p=s.component=function(s,a,t){const n=s.type,e=(a?a.appContext:s.appContext)||Tn,l={uid:Nn++,vnode:s,type:n,parent:a,appContext:e,root:null,next:null,subTree:null,update:null,scope:new ts(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:a?a.provides:Object.create(e.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:It(n,e),emitsOptions:Pa(n,e),emit:null,emitted:null,propsDefaults:b,inheritAttrs:n.inheritAttrs,ctx:b,data:b,props:b,attrs:b,slots:b,refs:b,setupState:b,setupContext:null,suspense:t,suspenseId:t?t.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};l.ctx={_:l},l.root=a?a.root:l,l.emit=Ca.bind(null,l),s.ce&&s.ce(l);return l}(s,n,e);if(Xa(s)&&(p.ctx.renderer=es),function(s,a=!1){$n=a;const{props:t,children:n}=s.vnode,e=Mn(s);Pt(s,t,e,a),((s,a)=>{if(32&s.vnode.shapeFlag){const t=a._;t?(s.slots=ga(a),X(a,"_",t)):Bt(a,s.slots={})}else s.slots={},a&&Mt(s,a);X(s.slots,vn,1)})(s,n);const l=e?function(s,a){const t=s.type;s.accessCache=Object.create(null),s.proxy=ja(new Proxy(s.ctx,An));const{setup:n}=t;if(n){const t=s.setupContext=n.length>1?function(s){const a=a=>{s.exposed=a||{}};let t;return{get attrs(){return t||(t=function(s){return new Proxy(s.attrs,{get:(a,t)=>(fs(s,0,"$attrs"),a[t])})}(s))},slots:s.slots,emit:s.emit,expose:a}}(s):null;Ln(s),vs();const e=Gn(n,s,0,[s.props,t]);if(bs(),Bn(),N(e)){if(e.then(Bn,Bn),a)return e.then((t=>{Un(s,t,a)})).catch((a=>{Jn(a,s,0)}));s.asyncDep=e}else Un(s,e,a)}else Vn(s,a)}(s,a):void 0;$n=!1}(p),p.asyncDep){if(e&&e.registerDep(p,R),!s.el){const s=p.subTree=qn(en);v(null,s,a,t)}}else R(p,s,a,t,e,l,c)},F=(s,a,t)=>{const n=a.component=s.component;if(function(s,a,t){const{props:n,children:e,component:l}=s,{props:c,children:p,patchFlag:o}=a,d=l.emitsOptions;if(a.dirs||a.transition)return!0;if(!(t&&o>=0))return!(!e&&!p||p&&p.$stable)||n!==c&&(n?!c||Ra(n,c,d):!!c);if(1024&o)return!0;if(16&o)return n?Ra(n,c,d):!!c;if(8&o){const s=a.dynamicProps;for(let a=0;aZn&&Qn.splice(a,1)}(n.update),n.update()}else a.component=s.component,a.el=s.el,n.vnode=a},R=(s,a,t,n,e,l,c)=>{const p=new us((()=>{if(s.isMounted){let a,{next:t,bu:n,u:o,parent:d,vnode:i}=s,h=t;p.allowRecurse=!1,t?(t.el=i.el,L(s,t,c)):t=i,n&&Y(n),(a=t.props&&t.props.onVnodeBeforeUpdate)&&Yt(a,d,t,i),p.allowRecurse=!0;const u=Ta(s),g=s.subTree;s.subTree=u,j(g,u,r(g.el),as(g),s,e,l),t.el=u.el,null===h&&function({vnode:s,parent:a},t){for(;a&&a.subTree===s;)(s=a.vnode).el=t,a=a.parent}(s,u.el),o&&Gt(o,e),(a=t.props&&t.props.onVnodeUpdated)&&Gt((()=>Yt(a,d,t,i)),e)}else{let c;const{el:o,props:d}=a,{bm:r,m:i,parent:h}=s,u=Ya(a);if(p.allowRecurse=!1,r&&Y(r),!u&&(c=d&&d.onVnodeBeforeMount)&&Yt(c,h,a),p.allowRecurse=!0,o&&cs){const t=()=>{s.subTree=Ta(s),cs(o,s.subTree,s,e,null)};u?a.type.__asyncLoader().then((()=>!s.isUnmounted&&t())):t()}else{const c=s.subTree=Ta(s);j(null,c,t,n,s,e,l),a.el=c.el}if(i&&Gt(i,e),!u&&(c=d&&d.onVnodeMounted)){const s=a;Gt((()=>Yt(c,h,s)),e)}256&a.shapeFlag&&s.a&&Gt(s.a,e),s.isMounted=!0,a=t=n=null}}),(()=>re(s.update)),s.scope),o=s.update=p.run.bind(p);o.id=s.uid,p.allowRecurse=o.allowRecurse=!0,o()},L=(s,a,t)=>{a.component=s;const n=s.vnode.props;s.vnode=a,s.next=null,function(s,a,t,n){const{props:e,attrs:l,vnode:{patchFlag:c}}=s,p=ga(e),[o]=s.propsOptions;let d=!1;if(!(n||c>0)||16&c){let n;Ot(s,a,e,l)&&(d=!0);for(const l in p)a&&(C(a,l)||(n=W(l))!==l&&C(a,n))||(o?!t||void 0===t[l]&&void 0===t[n]||(e[l]=Et(o,p,l,void 0,s,!0)):delete e[l]);if(l!==p)for(const s in l)a&&C(a,s)||(delete l[s],d=!0)}else if(8&c){const t=s.vnode.dynamicProps;for(let n=0;n{const{vnode:n,slots:e}=s;let l=!0,c=b;if(32&n.shapeFlag){const s=a._;s?t&&1===s?l=!1:(k(e,a),t||1!==s||delete e._):(l=!a.$stable,Bt(a,e)),c=a}else a&&(Mt(s,a),c={default:1});if(l)for(const p in e)Ft(p)||p in c||delete e[p]})(s,a.children,t),vs(),ue(void 0,s.update),bs()},B=(s,a,t,n,e,l,c,p,o=!1)=>{const r=s&&s.children,i=s?s.shapeFlag:0,h=a.children,{patchFlag:u,shapeFlag:g}=a;if(u>0){if(128&u)return void U(r,h,t,n,e,l,c,p,o);if(256&u)return void $(r,h,t,n,e,l,c,p,o)}8&g?(16&i&&ss(r,e,l),h!==r&&d(t,h)):16&i?16&g?U(r,h,t,n,e,l,c,p,o):ss(r,e,l,!0):(8&i&&d(t,""),16&g&&P(h,t,n,e,l,c,p,o))},$=(s,a,t,n,e,l,c,p,o)=>{a=a||f;const d=(s=s||f).length,r=a.length,i=Math.min(d,r);let h;for(h=0;hr?ss(s,e,l,!0,!1,i):P(a,t,n,e,l,c,p,o,i)},U=(s,a,t,n,e,l,c,p,o)=>{let d=0;const r=a.length;let i=s.length-1,h=r-1;for(;d<=i&&d<=h;){const n=s[d],r=a[d]=o?zn(a[d]):Sn(a[d]);if(!mn(n,r))break;j(n,r,t,null,e,l,c,p,o),d++}for(;d<=i&&d<=h;){const n=s[i],d=a[h]=o?zn(a[h]):Sn(a[h]);if(!mn(n,d))break;j(n,d,t,null,e,l,c,p,o),i--,h--}if(d>i){if(d<=h){const s=h+1,i=sh)for(;d<=i;)G(s[d],e,l,!0),d++;else{const u=d,g=d,m=new Map;for(d=g;d<=h;d++){const s=a[d]=o?zn(a[d]):Sn(a[d]);null!=s.key&&m.set(s.key,d)}let v,b=0;const y=h-g+1;let q=!1,x=0;const w=new Array(y);for(d=0;d=y){G(n,e,l,!0);continue}let r;if(null!=n.key)r=m.get(n.key);else for(v=g;v<=h;v++)if(0===w[v-g]&&mn(n,a[v])){r=v;break}void 0===r?G(n,e,l,!0):(w[r-g]=d+1,r>=x?x=r:q=!0,j(n,a[r],t,null,e,l,c,p,o),b++)}const _=q?function(s){const a=s.slice(),t=[0];let n,e,l,c,p;const o=s.length;for(n=0;n>1,s[t[p]]0&&(a[n]=t[l-1]),t[l]=n)}}l=t.length,c=t[l-1];for(;l-- >0;)t[l]=c,c=a[c];return t}(w):f;for(v=_.length-1,d=y-1;d>=0;d--){const s=g+d,i=a[s],h=s+1{const{el:c,type:p,transition:o,children:d,shapeFlag:r}=s;if(6&r)return void H(s.component.subTree,a,n,e);if(128&r)return void s.suspense.move(a,n,e);if(64&r)return void p.move(s,a,n,es);if(p===tn){t(c,a,n);for(let s=0;so.enter(c)),l);else{const{leave:s,delayLeave:e,afterLeave:l}=o,p=()=>t(c,a,n),d=()=>{s(c,(()=>{p(),l&&l()}))};e?e(c,p,d):d()}else t(c,a,n)},G=(s,a,t,n=!1,e=!1)=>{const{type:l,props:c,ref:p,children:o,dynamicChildren:d,shapeFlag:r,patchFlag:i,dirs:h}=s;if(null!=p&&Jt(p,null,t,s,!0),256&r)return void a.ctx.deactivate(s);const u=1&r&&h,g=!Ya(s);let j;if(g&&(j=c&&c.onVnodeBeforeUnmount)&&Yt(j,a,s),6&r)Q(s.component,t,n);else{if(128&r)return void s.suspense.unmount(t,n);u&&Ut(s,null,a,"beforeUnmount"),64&r?s.type.remove(s,a,t,e,es,n):d&&(l!==tn||i>0&&64&i)?ss(d,a,t,!1,!0):(l===tn&&384&i||!e&&16&r)&&ss(o,a,t),n&&K(s)}(g&&(j=c&&c.onVnodeUnmounted)||u)&&Gt((()=>{j&&Yt(j,a,s),u&&Ut(s,null,a,"unmounted")}),t)},K=s=>{const{type:a,el:t,anchor:e,transition:l}=s;if(a===tn)return void J(t,e);if(a===ln)return void w(s);const c=()=>{n(t),l&&!l.persisted&&l.afterLeave&&l.afterLeave()};if(1&s.shapeFlag&&l&&!l.persisted){const{leave:a,delayLeave:n}=l,e=()=>a(t,c);n?n(s.el,c,e):e()}else c()},J=(s,a)=>{let t;for(;s!==a;)t=i(s),n(s),s=t;n(a)},Q=(s,a,t)=>{const{bum:n,scope:e,update:l,subTree:c,um:p}=s;n&&Y(n),e.stop(),l&&(l.active=!1,G(c,s,a,t)),p&&Gt(p,a),Gt((()=>{s.isUnmounted=!0}),a),a&&a.pendingBranch&&!a.isUnmounted&&s.asyncDep&&!s.asyncResolved&&s.suspenseId===a.pendingId&&(a.deps--,0===a.deps&&a.resolve())},ss=(s,a,t,n=!1,e=!1,l=0)=>{for(let c=l;c6&s.shapeFlag?as(s.component.subTree):128&s.shapeFlag?s.suspense.next():i(s.anchor||s.el),ns=(s,a,t)=>{null==s?a._vnode&&G(a._vnode,null,null,!0):j(a._vnode||null,s,a,null,null,null,t),ge(),a._vnode=s},es={p:j,um:G,m:H,r:K,mt:T,mc:P,pc:B,pbc:E,n:as,o:s};let ls,cs;a&&([ls,cs]=a(es));return{render:ns,hydrate:ls,createApp:Wt(ns,ls)}}(s)}function Jt(s,a,t,n,e=!1){if(P(s))return void s.forEach(((s,l)=>Jt(s,a&&(P(a)?a[l]:a),t,n,e)));if(Ya(n)&&!e)return;const l=4&n.shapeFlag?Hn(n.component)||n.component.proxy:n.el,c=e?null:l,{i:p,r:o}=s,d=a&&a.r,r=p.refs===b?p.refs={}:p.refs,i=p.setupState;if(null!=d&&d!==o&&(D(d)?(r[d]=null,C(i,d)&&(i[d]=null)):ya(d)&&(d.value=null)),D(o)){const s=()=>{r[o]=c,C(i,o)&&(i[o]=c)};c?(s.id=-1,Gt(s,t)):s()}else if(ya(o)){const s=()=>{o.value=c};c?(s.id=-1,Gt(s,t)):s()}else I(o)&&Gn(o,p,12,[c,r])}function Yt(s,a,t,n=null){Kn(s,a,7,[t,n])}function Xt(s,a,t=!1){const n=s.children,e=a.children;if(P(n)&&P(e))for(let l=0;l0?pn||f:null,cn.pop(),pn=cn[cn.length-1]||null,dn>0&&pn&&pn.push(s),s}function un(s,a,t,n,e,l){return hn(yn(s,a,t,n,e,l,!0))}function gn(s,a,t,n,e){return hn(qn(s,a,t,n,e,!0))}function jn(s){return!!s&&!0===s.__v_isVNode}function mn(s,a){return s.type===a.type&&s.key===a.key}const vn="__vInternal",bn=({key:s})=>null!=s?s:null,fn=({ref:s})=>null!=s?D(s)||ya(s)||I(s)?{i:Ea,r:s}:s:null;function yn(s,a=null,t=null,n=0,e=null,l=(s===tn?0:1),c=!1,p=!1){const o={__v_isVNode:!0,__v_skip:!0,type:s,props:a,key:a&&bn(a),ref:a&&fn(a),scopeId:Ia,slotScopeIds:null,children:t,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:n,dynamicProps:e,dynamicChildren:null,appContext:null};return p?(Cn(o,t),128&l&&s.normalize(o)):t&&(o.shapeFlag|=D(t)?8:16),dn>0&&!c&&pn&&(o.patchFlag>0||6&l)&&32!==o.patchFlag&&pn.push(o),o}const qn=function(s,a=null,t=null,n=0,e=null,l=!1){s&&s!==Zt||(s=en);if(jn(s)){const n=xn(s,a,!0);return t&&Cn(n,t),n}c=s,I(c)&&"__vccOpts"in c&&(s=s.__vccOpts);var c;if(a){a=function(s){return s?ua(s)||vn in s?k({},s):s:null}(a);let{class:s,style:t}=a;s&&!D(s)&&(a.class=j(s)),T(t)&&(ua(t)&&!P(t)&&(t=k({},t)),a.style=i(t))}const p=D(s)?1:(s=>s.__isSuspense)(s)?128:(s=>s.__isTeleport)(s)?64:T(s)?4:I(s)?2:0;return yn(s,a,t,n,e,p,l,!0)};function xn(s,a,t=!1){const{props:n,ref:e,patchFlag:l,children:c}=s,p=a?function(...s){const a={};for(let t=0;ta(s,t,void 0,l&&l[t])));else{const t=Object.keys(s);e=new Array(t.length);for(let n=0,c=t.length;n!jn(s)||s.type!==en&&!(s.type===tn&&!En(s.children))))?s:null}const In=s=>s?Mn(s)?Hn(s)||s.proxy:In(s.parent):null,Dn=k(Object.create(null),{$:s=>s,$el:s=>s.vnode.el,$data:s=>s.data,$props:s=>s.props,$attrs:s=>s.attrs,$slots:s=>s.slots,$refs:s=>s.refs,$parent:s=>In(s.parent),$root:s=>In(s.root),$emit:s=>s.emit,$options:s=>xt(s),$forceUpdate:s=>()=>re(s.update),$nextTick:s=>de.bind(s.proxy),$watch:s=>ye.bind(s)}),An={get({_:s},a){const{ctx:t,setupState:n,data:e,props:l,accessCache:c,type:p,appContext:o}=s;let d;if("$"!==a[0]){const p=c[a];if(void 0!==p)switch(p){case 0:return n[a];case 1:return e[a];case 3:return t[a];case 2:return l[a]}else{if(n!==b&&C(n,a))return c[a]=0,n[a];if(e!==b&&C(e,a))return c[a]=1,e[a];if((d=s.propsOptions[0])&&C(d,a))return c[a]=2,l[a];if(t!==b&&C(t,a))return c[a]=3,t[a];bt&&(c[a]=4)}}const r=Dn[a];let i,h;return r?("$attrs"===a&&fs(s,0,a),r(s)):(i=p.__cssModules)&&(i=i[a])?i:t!==b&&C(t,a)?(c[a]=3,t[a]):(h=o.config.globalProperties,C(h,a)?h[a]:void 0)},set({_:s},a,t){const{data:n,setupState:e,ctx:l}=s;if(e!==b&&C(e,a))e[a]=t;else if(n!==b&&C(n,a))n[a]=t;else if(C(s.props,a))return!1;return("$"!==a[0]||!(a.slice(1)in s))&&(l[a]=t,!0)},has({_:{data:s,setupState:a,accessCache:t,ctx:n,appContext:e,propsOptions:l}},c){let p;return void 0!==t[c]||s!==b&&C(s,c)||a!==b&&C(a,c)||(p=l[0])&&C(p,c)||C(n,c)||C(Dn,c)||C(e.config.globalProperties,c)}},Tn=Vt();let Nn=0;let Fn=null;const Rn=()=>Fn||Ea,Ln=s=>{Fn=s,s.scope.on()},Bn=()=>{Fn&&Fn.scope.off(),Fn=null};function Mn(s){return 4&s.vnode.shapeFlag}let $n=!1;function Un(s,a,t){I(a)?s.type.__ssrInlineRender?s.ssrRender=a:s.render=a:T(a)&&(s.setupState=ka(a)),Vn(s,t)}function Vn(s,a,t){const n=s.type;s.render||(s.render=n.render||y),Ln(s),vs(),ft(s),bs(),Bn()}function Hn(s){if(s.exposed)return s.exposeProxy||(s.exposeProxy=new Proxy(ka(ja(s.exposed)),{get:(a,t)=>t in a?a[t]:t in Dn?Dn[t](s):void 0}))}function Wn(s){return I(s)&&s.displayName||s.name}function Gn(s,a,t,n){let e;try{e=n?s(...n):s()}catch(l){Jn(l,a,t)}return e}function Kn(s,a,t,n){if(I(s)){const e=Gn(s,a,t,n);return e&&N(e)&&e.catch((s=>{Jn(s,a,t)})),e}const e=[];for(let l=0;l>>1;je(Qn[n])je(s)-je(a))),le=0;lenull==s.id?1/0:s.id;function me(s){Xn=!1,Yn=!0,ue(s),Qn.sort(((s,a)=>je(s)-je(a)));try{for(Zn=0;Zns.value,r=!!s._shallow):ia(s)?(o=()=>s,n=!0):P(s)?(i=!0,r=s.some(ia),o=()=>s.map((s=>ya(s)?s.value:ia(s)?xe(s):I(s)?Gn(s,p,2):void 0))):o=I(s)?a?()=>Gn(s,p,2):()=>{if(!p||!p.isUnmounted)return d&&d(),Kn(s,p,3,[h])}:y,a&&n){const s=o;o=()=>xe(s())}let h=s=>{d=m.onStop=()=>{Gn(s,p,4)}};if($n)return h=y,a?t&&Kn(a,p,3,[o(),i?[]:void 0,h]):o(),y;let u=i?[]:ve;const g=()=>{if(m.active)if(a){const s=m.run();(n||r||(i?s.some(((s,a)=>J(s,u[a]))):J(s,u)))&&(d&&d(),Kn(a,p,3,[s,u===ve?void 0:u,h]),u=s)}else m.run()};let j;g.allowRecurse=!!a,j="sync"===e?g:"post"===e?()=>Gt(g,p&&p.suspense):()=>{!p||p.isMounted?function(s){he(s,ae,se,te)}(g):g()};const m=new us(o,j);return a?t?g():u=m.run():"post"===e?Gt(m.run.bind(m),p&&p.suspense):m.run(),()=>{m.stop(),p&&p.scope&&S(p.scope.effects,m)}}function ye(s,a,t){const n=this.proxy,e=D(s)?s.includes(".")?qe(n,s):()=>n[s]:s.bind(n,n);let l;I(a)?l=a:(l=a.handler,t=a);const c=Fn;Ln(this);const p=fe(e,l.bind(n),t);return c?Ln(c):Bn(),p}function qe(s,a){const t=a.split(".");return()=>{let a=s;for(let s=0;s{xe(s,a)}));else if(L(s))for(const t in s)xe(s[t],a);return s}function we(s,a,t){const n=arguments.length;return 2===n?T(a)&&!P(a)?jn(a)?qn(s,null,[a]):qn(s,a):qn(s,null,a):(n>3?t=Array.prototype.slice.call(arguments,2):3===n&&jn(t)&&(t=[t]),qn(s,a,t))}const _e="3.2.19",ke="undefined"!=typeof document?document:null,Se=new Map,ze={insert:(s,a,t)=>{a.insertBefore(s,t||null)},remove:s=>{const a=s.parentNode;a&&a.removeChild(s)},createElement:(s,a,t,n)=>{const e=a?ke.createElementNS("http://www.w3.org/2000/svg",s):ke.createElement(s,t?{is:t}:void 0);return"select"===s&&n&&null!=n.multiple&&e.setAttribute("multiple",n.multiple),e},createText:s=>ke.createTextNode(s),createComment:s=>ke.createComment(s),setText:(s,a)=>{s.nodeValue=a},setElementText:(s,a)=>{s.textContent=a},parentNode:s=>s.parentNode,nextSibling:s=>s.nextSibling,querySelector:s=>ke.querySelector(s),setScopeId(s,a){s.setAttribute(a,"")},cloneNode(s){const a=s.cloneNode(!0);return"_value"in s&&(a._value=s._value),a},insertStaticContent(s,a,t,n){const e=t?t.previousSibling:a.lastChild;let l=Se.get(s);if(!l){const a=ke.createElement("template");if(a.innerHTML=n?`${s}`:s,l=a.content,n){const s=l.firstChild;for(;s.firstChild;)l.appendChild(s.firstChild);l.removeChild(s)}Se.set(s,l)}return a.insertBefore(l.cloneNode(!0),t),[e?e.nextSibling:a.firstChild,t?t.previousSibling:a.lastChild]}};const Ce=/\s*!important$/;function Pe(s,a,t){if(P(t))t.forEach((t=>Pe(s,a,t)));else if(a.startsWith("--"))s.setProperty(a,t);else{const n=function(s,a){const t=Ee[a];if(t)return t;let n=V(a);if("filter"!==n&&n in s)return Ee[a]=n;n=G(n);for(let e=0;edocument.createEvent("Event").timeStamp&&(De=()=>performance.now());const s=navigator.userAgent.match(/firefox\/(\d+)/i);Ae=!!(s&&Number(s[1])<=53)}let Te=0;const Ne=Promise.resolve(),Fe=()=>{Te=0};function Re(s,a,t,n,e=null){const l=s._vei||(s._vei={}),c=l[a];if(n&&c)c.value=n;else{const[t,p]=function(s){let a;if(Le.test(s)){let t;for(a={};t=s.match(Le);)s=s.slice(0,s.length-t[0].length),a[t[0].toLowerCase()]=!0}return[W(s.slice(2)),a]}(a);if(n){!function(s,a,t,n){s.addEventListener(a,t,n)}(s,t,l[a]=function(s,a){const t=s=>{const n=s.timeStamp||De();(Ae||n>=t.attached-1)&&Kn(function(s,a){if(P(a)){const t=s.stopImmediatePropagation;return s.stopImmediatePropagation=()=>{t.call(s),s._stopped=!0},a.map((s=>a=>!a._stopped&&s(a)))}return a}(s,t.value),a,5,[s])};return t.value=s,t.attached=(()=>Te||(Ne.then(Fe),Te=De()))(),t}(n,e),p)}else c&&(!function(s,a,t,n){s.removeEventListener(a,t,n)}(s,t,c,p),l[a]=void 0)}}const Le=/(?:Once|Passive|Capture)$/;const Be=/^on[a-z]/;const Me="transition",$e=(s,{slots:a})=>we($a,function(s){const a={};for(const k in s)k in Ue||(a[k]=s[k]);if(!1===s.css)return a;const{name:t="v",type:n,duration:e,enterFromClass:l=`${t}-enter-from`,enterActiveClass:c=`${t}-enter-active`,enterToClass:p=`${t}-enter-to`,appearFromClass:o=l,appearActiveClass:d=c,appearToClass:r=p,leaveFromClass:i=`${t}-leave-from`,leaveActiveClass:h=`${t}-leave-active`,leaveToClass:u=`${t}-leave-to`}=s,g=function(s){if(null==s)return null;if(T(s))return[We(s.enter),We(s.leave)];{const a=We(s);return[a,a]}}(e),j=g&&g[0],m=g&&g[1],{onBeforeEnter:v,onEnter:b,onEnterCancelled:f,onLeave:y,onLeaveCancelled:q,onBeforeAppear:x=v,onAppear:w=b,onAppearCancelled:_=f}=a,S=(s,a,t)=>{Ke(s,a?r:p),Ke(s,a?d:c),t&&t()},z=(s,a)=>{Ke(s,u),Ke(s,h),a&&a()},C=s=>(a,t)=>{const e=s?w:b,c=()=>S(a,s,t);Ve(e,[a,c]),Je((()=>{Ke(a,s?o:l),Ge(a,s?r:p),He(e)||Xe(a,n,j,c)}))};return k(a,{onBeforeEnter(s){Ve(v,[s]),Ge(s,l),Ge(s,c)},onBeforeAppear(s){Ve(x,[s]),Ge(s,o),Ge(s,d)},onEnter:C(!1),onAppear:C(!0),onLeave(s,a){const t=()=>z(s,a);Ge(s,i),document.body.offsetHeight,Ge(s,h),Je((()=>{Ke(s,i),Ge(s,u),He(y)||Xe(s,n,m,t)})),Ve(y,[s,t])},onEnterCancelled(s){S(s,!1),Ve(f,[s])},onAppearCancelled(s){S(s,!0),Ve(_,[s])},onLeaveCancelled(s){z(s),Ve(q,[s])}})}(s),a);$e.displayName="Transition";const Ue={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};$e.props=k({},$a.props,Ue);const Ve=(s,a=[])=>{P(s)?s.forEach((s=>s(...a))):s&&s(...a)},He=s=>!!s&&(P(s)?s.some((s=>s.length>1)):s.length>1);function We(s){return Q(s)}function Ge(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.add(a))),(s._vtc||(s._vtc=new Set)).add(a)}function Ke(s,a){a.split(/\s+/).forEach((a=>a&&s.classList.remove(a)));const{_vtc:t}=s;t&&(t.delete(a),t.size||(s._vtc=void 0))}function Je(s){requestAnimationFrame((()=>{requestAnimationFrame(s)}))}let Ye=0;function Xe(s,a,t,n){const e=s._endId=++Ye,l=()=>{e===s._endId&&n()};if(t)return setTimeout(l,t);const{type:c,timeout:p,propCount:o}=function(s,a){const t=window.getComputedStyle(s),n=s=>(t[s]||"").split(", "),e=n("transitionDelay"),l=n("transitionDuration"),c=Qe(e,l),p=n("animationDelay"),o=n("animationDuration"),d=Qe(p,o);let r=null,i=0,h=0;a===Me?c>0&&(r=Me,i=c,h=l.length):"animation"===a?d>0&&(r="animation",i=d,h=o.length):(i=Math.max(c,d),r=i>0?c>d?Me:"animation":null,h=r?r===Me?l.length:o.length:0);const u=r===Me&&/\b(transform|all)(,|$)/.test(t.transitionProperty);return{type:r,timeout:i,propCount:h,hasTransform:u}}(s,a);if(!c)return n();const d=c+"end";let r=0;const i=()=>{s.removeEventListener(d,h),l()},h=a=>{a.target===s&&++r>=o&&i()};setTimeout((()=>{rZe(a)+Ze(s[t]))))}function Ze(s){return 1e3*Number(s.slice(0,-1).replace(",","."))}const sl={beforeMount(s,{value:a},{transition:t}){s._vod="none"===s.style.display?"":s.style.display,t&&a?t.beforeEnter(s):al(s,a)},mounted(s,{value:a},{transition:t}){t&&a&&t.enter(s)},updated(s,{value:a,oldValue:t},{transition:n}){!a!=!t&&(n?a?(n.beforeEnter(s),al(s,!0),n.enter(s)):n.leave(s,(()=>{al(s,!1)})):al(s,a))},beforeUnmount(s,{value:a}){al(s,a)}};function al(s,a){s.style.display=a?s._vod:"none"}const tl=k({patchProp:(s,a,t,n,e=!1,l,c,p,o)=>{"class"===a?function(s,a,t){const n=s._vtc;n&&(a=(a?[a,...n]:[...n]).join(" ")),null==a?s.removeAttribute("class"):t?s.setAttribute("class",a):s.className=a}(s,n,e):"style"===a?function(s,a,t){const n=s.style,e=n.display;if(t)if(D(t))a!==t&&(n.cssText=t);else{for(const s in t)Pe(n,s,t[s]);if(a&&!D(a))for(const s in a)null==t[s]&&Pe(n,s,"")}else s.removeAttribute("style");"_vod"in s&&(n.display=e)}(s,t,n):w(a)?_(a)||Re(s,a,0,n,c):("."===a[0]?(a=a.slice(1),1):"^"===a[0]?(a=a.slice(1),0):function(s,a,t,n){if(n)return"innerHTML"===a||"textContent"===a||!!(a in s&&Be.test(a)&&I(t));if("spellcheck"===a||"draggable"===a)return!1;if("form"===a)return!1;if("list"===a&&"INPUT"===s.tagName)return!1;if("type"===a&&"TEXTAREA"===s.tagName)return!1;if(Be.test(a)&&D(t))return!1;return a in s}(s,a,n,e))?function(s,a,t,n,e,l,c){if("innerHTML"===a||"textContent"===a)return n&&c(n,e,l),void(s[a]=null==t?"":t);if("value"===a&&"PROGRESS"!==s.tagName){s._value=t;const n=null==t?"":t;return s.value!==n&&(s.value=n),void(null==t&&s.removeAttribute(a))}if(""===t||null==t){const n=typeof s[a];if("boolean"===n)return void(s[a]=r(t));if(null==t&&"string"===n)return s[a]="",void s.removeAttribute(a);if("number"===n){try{s[a]=0}catch(p){}return void s.removeAttribute(a)}}try{s[a]=t}catch(o){}}(s,a,n,l,c,p,o):("true-value"===a?s._trueValue=n:"false-value"===a&&(s._falseValue=n),function(s,a,t,n,e){if(n&&a.startsWith("xlink:"))null==t?s.removeAttributeNS(Ie,a.slice(6,a.length)):s.setAttributeNS(Ie,a,t);else{const n=d(a);null==t||n&&!r(t)?s.removeAttribute(a):s.setAttribute(a,n?"":t)}}(s,a,n,e))}},ze);let nl;const el=(...s)=>{const a=(nl||(nl=Kt(tl))).createApp(...s),{mount:t}=a;return a.mount=s=>{const n=function(s){if(D(s)){return document.querySelector(s)}return s}(s);if(!n)return;const e=a._component;I(e)||e.render||e.template||(e.template=n.innerHTML),n.innerHTML="";const l=t(n,!1,n instanceof SVGElement);return n instanceof Element&&(n.removeAttribute("v-cloak"),n.setAttribute("data-v-app","")),l},a};var ll=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const cl=["href","innerHTML"],pl=["innerHTML"];var ol=ll({name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const s=(this.item.title||this.item.name).split(" ");return`${s[0]} ${s.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(s,a,t,n,e,l){const c=Qt("router-link");return t.item.path?(on(),gn(c,{key:0,class:j({active:l.active}),to:l.path,innerHTML:l.itemName},null,8,["class","to","innerHTML"])):t.item.link?(on(),un("a",{key:1,href:t.item.link,innerHTML:l.itemName},null,8,cl)):(on(),un("a",{key:2,innerHTML:l.itemName},null,8,pl))}]]);const dl={name:"VanDocNav",components:{[ol.name]:ol},props:{lang:String,navConfig:Array},data:()=>({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:s}=window;this.top=Math.max(0,64-s)}}},rl={class:"van-doc-nav__title"};var il=ll(dl,[["render",function(s,a,t,n,e,l){const c=Qt("van-doc-nav-link");return on(),un("div",{class:"van-doc-nav",style:i(l.style)},[(on(!0),un(tn,null,Pn(t.navConfig,((s,a)=>(on(),un("div",{class:"van-doc-nav__group",key:a},[yn("div",rl,m(s.title),1),s.items?(on(!0),un(tn,{key:0},Pn(s.items,((s,a)=>(on(),un("div",{key:a,class:"van-doc-nav__item"},[qn(c,{item:s,base:l.base},null,8,["item","base"])])))),128)):kn("v-if",!0)])))),128))],4)}]]); -/*! @docsearch/js 3.0.0-alpha.40 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -function hl(s){return(hl="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function ul(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function gl(){return(gl=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t3)for(t=[t],l=3;l0?Il(u.type,u.props,u.key,null,u.__v):u)){if(u.__=t,u.__b=t.__b+1,null===(h=v[r])||h&&u.key==h.key&&u.type===h.type)v[r]=void 0;else for(i=0;i3)for(t=[t],l=3;l=t.__.length&&t.__.push({}),t.__[s]}function hc(s,a,t){var n=ic(ac++,2);return n.t=s,n.__c||(n.__=[t?t(a):yc(void 0,a),function(s){var a=n.t(n.__[0],s);n.__[0]!==a&&(n.__=[a,n.__[1]],n.__c.setState({}))}],n.__c=tc),n.__}function uc(s,a){var t=ic(ac++,4);!ql.__s&&fc(t.__H,a)&&(t.__=s,t.__H=a,tc.__h.push(t))}function gc(s,a){var t=ic(ac++,7);return fc(t.__H,a)&&(t.__=s(),t.__H=a,t.__h=s),t.__}function jc(){lc.forEach((function(s){if(s.__P)try{s.__H.__h.forEach(vc),s.__H.__h.forEach(bc),s.__H.__h=[]}catch(a){s.__H.__h=[],ql.__e(a,s.__v)}})),lc=[]}ql.__b=function(s){tc=null,cc&&cc(s)},ql.__r=function(s){pc&&pc(s),ac=0;var a=(tc=s.__c).__H;a&&(a.__h.forEach(vc),a.__h.forEach(bc),a.__h=[])},ql.diffed=function(s){oc&&oc(s);var a=s.__c;a&&a.__H&&a.__H.__h.length&&(1!==lc.push(a)&&nc===ql.requestAnimationFrame||((nc=ql.requestAnimationFrame)||function(s){var a,t=function(){clearTimeout(n),mc&&cancelAnimationFrame(a),setTimeout(s)},n=setTimeout(t,100);mc&&(a=requestAnimationFrame(t))})(jc)),tc=void 0},ql.__c=function(s,a){a.some((function(s){try{s.__h.forEach(vc),s.__h=s.__h.filter((function(s){return!s.__||bc(s)}))}catch(t){a.some((function(s){s.__h&&(s.__h=[])})),a=[],ql.__e(t,s.__v)}})),dc&&dc(s,a)},ql.unmount=function(s){rc&&rc(s);var a=s.__c;if(a&&a.__H)try{a.__H.__.forEach(vc)}catch(t){ql.__e(t,a.__v)}};var mc="function"==typeof requestAnimationFrame;function vc(s){var a=tc;"function"==typeof s.__c&&s.__c(),tc=a}function bc(s){var a=tc;s.__c=s.__(),tc=a}function fc(s,a){return!s||s.length!==a.length||a.some((function(a,t){return a!==s[t]}))}function yc(s,a){return"function"==typeof a?a(s):a}function qc(s,a){for(var t in a)s[t]=a[t];return s}function xc(s,a){for(var t in s)if("__source"!==t&&!(t in a))return!0;for(var n in a)if("__source"!==n&&s[n]!==a[n])return!0;return!1}function wc(s){this.props=s}(wc.prototype=new Al).isPureReactComponent=!0,wc.prototype.shouldComponentUpdate=function(s,a){return xc(this.props,s)||xc(this.state,a)};var _c=ql.__b;ql.__b=function(s){s.type&&s.type.__f&&s.ref&&(s.props.ref=s.ref,s.ref=null),_c&&_c(s)};var kc="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,Sc=function(s,a){return null==s?null:Ml(Ml(s).map(a))},zc={map:Sc,forEach:Sc,count:function(s){return s?Ml(s).length:0},only:function(s){var a=Ml(s);if(1!==a.length)throw"Children.only";return a[0]},toArray:Ml},Cc=ql.__e;function Pc(){this.__u=0,this.t=null,this.__b=null}function Oc(s){var a=s.__.__c;return a&&a.__e&&a.__e(s)}function Ec(){this.u=null,this.o=null}ql.__e=function(s,a,t){if(s.then)for(var n,e=a;e=e.__;)if((n=e.__c)&&n.__c)return null==a.__e&&(a.__e=t.__e,a.__k=t.__k),n.__c(s,a);Cc(s,a,t)},(Pc.prototype=new Al).__c=function(s,a){var t=a.__c,n=this;null==n.t&&(n.t=[]),n.t.push(t);var e=Oc(n.__v),l=!1,c=function(){l||(l=!0,t.componentWillUnmount=t.__c,e?e(p):p())};t.__c=t.componentWillUnmount,t.componentWillUnmount=function(){c(),t.__c&&t.__c()};var p=function(){if(!--n.__u){if(n.state.__e){var s=n.state.__e;n.__v.__k[0]=function s(a,t,n){return a&&(a.__v=null,a.__k=a.__k&&a.__k.map((function(a){return s(a,t,n)})),a.__c&&a.__c.__P===t&&(a.__e&&n.insertBefore(a.__e,a.__d),a.__c.__e=!0,a.__c.__P=n)),a}(s,s.__c.__P,s.__c.__O)}var a;for(n.setState({__e:n.__b=null});a=n.t.pop();)a.forceUpdate()}},o=!0===a.__h;n.__u++||o||n.setState({__e:n.__b=n.__v.__k[0]}),s.then(c,c)},Pc.prototype.componentWillUnmount=function(){this.t=[]},Pc.prototype.render=function(s,a){if(this.__b){if(this.__v.__k){var t=document.createElement("div"),n=this.__v.__k[0].__c;this.__v.__k[0]=function s(a,t,n){return a&&(a.__c&&a.__c.__H&&(a.__c.__H.__.forEach((function(s){"function"==typeof s.__c&&s.__c()})),a.__c.__H=null),null!=(a=qc({},a)).__c&&(a.__c.__P===n&&(a.__c.__P=t),a.__c=null),a.__k=a.__k&&a.__k.map((function(a){return s(a,t,n)}))),a}(this.__b,t,n.__O=n.__P)}this.__b=null}var e=a.__e&&El(Dl,null,s.fallback);return e&&(e.__h=null),[El(Dl,null,a.__e?null:s.children),e]};var Ic=function(s,a,t){if(++t[1]===t[0]&&s.o.delete(a),s.props.revealOrder&&("t"!==s.props.revealOrder[0]||!s.o.size))for(t=s.u;t;){for(;t.length>3;)t.pop()();if(t[1]>>1,1),a.i.removeChild(s)}}),Ql(El(Dc,{context:a.context},s.__v),a.l)):a.l&&a.componentWillUnmount()}function Tc(s,a){return El(Ac,{__v:s,i:a})}(Ec.prototype=new Al).__e=function(s){var a=this,t=Oc(a.__v),n=a.o.get(s);return n[0]++,function(e){var l=function(){a.props.revealOrder?(n.push(e),Ic(a,s,n)):e()};t?t(l):l()}},Ec.prototype.render=function(s){this.u=null,this.o=new Map;var a=Ml(s.children);s.revealOrder&&"b"===s.revealOrder[0]&&a.reverse();for(var t=a.length;t--;)this.o.set(a[t],this.u=[1,0,this.u]);return s.children},Ec.prototype.componentDidUpdate=Ec.prototype.componentDidMount=function(){var s=this;this.o.forEach((function(a,t){Ic(s,t,a)}))};var Nc="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,Fc=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Rc=function(s){return("undefined"!=typeof Symbol&&"symbol"==hl(Symbol())?/fil|che|rad/i:/fil|che|ra/i).test(s)};function Lc(s,a,t){return null==a.__k&&(a.textContent=""),Ql(s,a),"function"==typeof t&&t(),s?s.__c:null}Al.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(s){Object.defineProperty(Al.prototype,s,{configurable:!0,get:function(){return this["UNSAFE_"+s]},set:function(a){Object.defineProperty(this,s,{configurable:!0,writable:!0,value:a})}})}));var Bc=ql.event;function Mc(){}function $c(){return this.cancelBubble}function Uc(){return this.defaultPrevented}ql.event=function(s){return Bc&&(s=Bc(s)),s.persist=Mc,s.isPropagationStopped=$c,s.isDefaultPrevented=Uc,s.nativeEvent=s};var Vc,Hc={configurable:!0,get:function(){return this.class}},Wc=ql.vnode;ql.vnode=function(s){var a=s.type,t=s.props,n=t;if("string"==typeof a){for(var e in n={},t){var l=t[e];"value"===e&&"defaultValue"in t&&null==l||("defaultValue"===e&&"value"in t&&null==t.value?e="value":"download"===e&&!0===l?l="":/ondoubleclick/i.test(e)?e="ondblclick":/^onchange(textarea|input)/i.test(e+a)&&!Rc(t.type)?e="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(e)?e=e.toLowerCase():Fc.test(e)?e=e.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===l&&(l=void 0),n[e]=l)}"select"==a&&n.multiple&&Array.isArray(n.value)&&(n.value=Ml(t.children).forEach((function(s){s.props.selected=-1!=n.value.indexOf(s.props.value)}))),"select"==a&&null!=n.defaultValue&&(n.value=Ml(t.children).forEach((function(s){s.props.selected=n.multiple?-1!=n.defaultValue.indexOf(s.props.value):n.defaultValue==s.props.value}))),s.props=n}a&&t.class!=t.className&&(Hc.enumerable="className"in t,null!=t.className&&(n.class=t.className),Object.defineProperty(n,"className",Hc)),s.$$typeof=Nc,Wc&&Wc(s)};var Gc=ql.__r;ql.__r=function(s){Gc&&Gc(s),Vc=s.__c};var Kc={ReactCurrentDispatcher:{current:{readContext:function(s){return Vc.__n[s.__c].props.value}}}};function Jc(s){return!!s&&s.$$typeof===Nc}"object"==("undefined"==typeof performance?"undefined":hl(performance))&&"function"==typeof performance.now&&performance.now.bind(performance);var Yc={useState:function(s){return ec=1,hc(yc,s)},useReducer:hc,useEffect:function(s,a){var t=ic(ac++,3);!ql.__s&&fc(t.__H,a)&&(t.__=s,t.__H=a,tc.__H.__h.push(t))},useLayoutEffect:uc,useRef:function(s){return ec=5,gc((function(){return{current:s}}),[])},useImperativeHandle:function(s,a,t){ec=6,uc((function(){"function"==typeof s?s(a()):s&&(s.current=a())}),null==t?t:t.concat(s))},useMemo:gc,useCallback:function(s,a){return ec=8,gc((function(){return s}),a)},useContext:function(s){var a=tc.context[s.__c],t=ic(ac++,9);return t.__c=s,a?(null==t.__&&(t.__=!0,a.sub(tc)),a.props.value):s.__},useDebugValue:function(s,a){ql.useDebugValue&&ql.useDebugValue(a?a(s):s)},version:"16.8.0",Children:zc,render:Lc,hydrate:function(s,a,t){return Zl(s,a),"function"==typeof t&&t(),s?s.__c:null},unmountComponentAtNode:function(s){return!!s.__k&&(Ql(null,s),!0)},createPortal:Tc,createElement:El,createContext:function(s,a){var t={__c:a="__cC"+kl++,__:s,Consumer:function(s,a){return s.children(a)},Provider:function(s){var t,n;return this.getChildContext||(t=[],(n={})[a]=this,this.getChildContext=function(){return n},this.shouldComponentUpdate=function(s){this.props.value!==s.value&&t.some(Fl)},this.sub=function(s){t.push(s);var a=s.componentWillUnmount;s.componentWillUnmount=function(){t.splice(t.indexOf(s),1),a&&a.call(s)}}),s.children}};return t.Provider.__=t.Consumer.contextType=t},createFactory:function(s){return El.bind(null,s)},cloneElement:function(s){return Jc(s)?sc.apply(null,arguments):s},createRef:function(){return{current:null}},Fragment:Dl,isValidElement:Jc,findDOMNode:function(s){return s&&(s.base||1===s.nodeType&&s)||null},Component:Al,PureComponent:wc,memo:function(s,a){function t(s){var t=this.props.ref,n=t==s.ref;return!n&&t&&(t.call?t(null):t.current=null),a?!a(this.props,s)||!n:xc(this.props,s)}function n(a){return this.shouldComponentUpdate=t,El(s,a)}return n.displayName="Memo("+(s.displayName||s.name)+")",n.prototype.isReactComponent=!0,n.__f=!0,n},forwardRef:function(s){function a(a,t){var n=qc({},a);return delete n.ref,s(n,(t=a.ref||t)&&("object"!=hl(t)||"current"in t)?t:null)}return a.$$typeof=kc,a.render=a,a.prototype.isReactComponent=a.__f=!0,a.displayName="ForwardRef("+(s.displayName||s.name)+")",a},unstable_batchedUpdates:function(s,a){return s(a)},StrictMode:Dl,Suspense:Pc,SuspenseList:Ec,lazy:function(s){var a,t,n;function e(e){if(a||(a=s()).then((function(s){t=s.default||s}),(function(s){n=s})),n)throw n;if(!t)throw a;return El(t,e)}return e.displayName="Lazy",e.__f=!0,e},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Kc};function Xc(){return Yc.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},Yc.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function Qc(){return Yc.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},Yc.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Zc(){return(Zc=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["translations"]),l=n.buttonText,c=void 0===l?"Search":l,p=n.buttonAriaLabel,o=void 0===p?"Search":p,d=gc((function(){return"undefined"!=typeof navigator?/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl":null}),[]);return Yc.createElement("button",Zc({type:"button",className:"DocSearch DocSearch-Button","aria-label":o},e,{ref:a}),Yc.createElement("span",{className:"DocSearch-Button-Container"},Yc.createElement(Qc,null),Yc.createElement("span",{className:"DocSearch-Button-Placeholder"},c)),Yc.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&Yc.createElement(Yc.Fragment,null,Yc.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===d?Yc.createElement(Xc,null):d),Yc.createElement("span",{className:"DocSearch-Button-Key"},"K"))))})),ap=0;function tp(s){return 0===s.collections.length?0:s.collections.reduce((function(s,a){return s+a.items.length}),0)}function np(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function ep(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function lp(s){return s.reduce((function(s,a){return s.concat(a)}),[])}function cp(s,a,t,n){if(!t)return null;if(s<0&&(null===a||null!==n&&0===a))return t+s;var e=(null===a?-1:a)+s;return e<=-1||e>=t?null===n?null:0:e}var pp=function(){};function op(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function dp(s,a,t){return a in s?Object.defineProperty(s,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[a]=t,s}function rp(s){return(rp="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s})(s)}function ip(s){var a,t,n=(t=(a=s).collections.map((function(s){return s.items.length})).reduce((function(s,a,t){var n=(s[t-1]||0)+a;return s.push(n),s}),[]).reduce((function(s,t){return t<=a.activeItemId?s+1:s}),0),a.collections[t]);if(!n)return null;var e=n.items[function(s){for(var a=s.state,t=s.collection,n=!1,e=0,l=0;!1===n;){var c=a.collections[e];if(c===t){n=!0;break}l+=c.items.length,e++}return a.activeItemId-l}({state:s,collection:n})],l=n.source;return{item:e,itemInputValue:l.getItemInputValue({item:e,state:s}),itemUrl:l.getItemUrl({item:e,state:s}),source:l}}function hp(s,a){return s===a||s.contains(a)}function up(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function gp(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);ts.length)&&(a=s.length);for(var t=0,n=new Array(a);t=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["event","nextState","props","query","refresh","store"]);Dp&&e.environment.clearTimeout(Dp);var d,r=o.setCollections,i=o.setIsOpen,h=o.setQuery,u=o.setActiveItemId,g=o.setStatus;return h(l),u(e.defaultActiveItemId),l||!1!==e.openOnFocus?(g("loading"),Dp=e.environment.setTimeout((function(){g("stalled")}),e.stallThreshold),e.getSources(Ep({query:l,refresh:c,state:p.getState()},o)).then((function(s){return g("loading"),Promise.all(s.map((function(s){return Promise.resolve(s.getItems(Ep({query:l,refresh:c,state:p.getState()},o))).then((function(a){return function(s,a){return t=s,Boolean(null==t?void 0:t.execute)?Sp(Sp({},s),{},{requests:s.queries.map((function(t){return{query:t,sourceId:a,transformResponse:s.transformResponse}}))}):{items:s,sourceId:a};var t}(a,s.sourceId)}))}))).then(Pp).then((function(a){return function(s,a){return a.map((function(a){var t,n=s.filter((function(s){return s.sourceId===a.sourceId})),e=n.map((function(s){return s.items})),l=n[0].transformResponse,c=l?l({results:t=e.map((function(s){var a;return gp(gp({},s),{},{hits:null===(a=s.hits)||void 0===a?void 0:a.map((function(a){return gp(gp({},a),{},{__autocomplete_indexName:s.index,__autocomplete_queryID:s.queryID})}))})})),hits:t.map((function(s){return s.hits})).filter(Boolean),facetHits:t.map((function(s){var a;return null===(a=s.facetHits)||void 0===a?void 0:a.map((function(s){return{label:s.value,count:s.count,_highlightResult:{label:{value:s.highlighted}}}}))})).filter(Boolean)}):e;return Array.isArray(c),'The `getItems` function from source "'.concat(a.sourceId,'" must return an array of items but returned type ').concat(JSON.stringify(wp(c)),":\n\n").concat(JSON.stringify(c,null,2),".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),c.every(Boolean),'The `getItems` function from source "'.concat(a.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:a,items:c}}))}(a,s)})).then((function(s){var t;g("idle"),r(s);var d=e.shouldPanelOpen({state:p.getState()});i(null!==(t=n.isOpen)&&void 0!==t?t:e.openOnFocus&&!l&&d||d);var h=ip(p.getState());if(null!==p.getState().activeItemId&&h){var u=h.item,j=h.itemInputValue,m=h.itemUrl,v=h.source;v.onActive(Ep({event:a,item:u,itemInputValue:j,itemUrl:m,refresh:c,source:v,state:p.getState()},o))}})).finally((function(){Dp&&e.environment.clearTimeout(Dp)}))}))):(g("idle"),r(p.getState().collections.map((function(s){return Ep(Ep({},s),{},{items:[]})}))),i(null!==(d=n.isOpen)&&void 0!==d?d:e.shouldPanelOpen({state:p.getState()})),Promise.resolve())}function Tp(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Np(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}function $p(s){var a=s.props,t=s.refresh,n=s.store,e=Mp(s,["props","refresh","store"]);return{getEnvironmentProps:function(s){var t=s.inputElement,e=s.formElement,l=s.panelElement;return Lp({onTouchStart:function(s){!1!==n.getState().isOpen&&s.target!==t&&!1===[e,l].some((function(t){return hp(t,s.target)||hp(t,a.environment.document.activeElement)}))&&n.dispatch("blur",null)},onTouchMove:function(s){!1!==n.getState().isOpen&&t===a.environment.document.activeElement&&s.target!==t&&t.blur()}},Mp(s,["inputElement","formElement","panelElement"]))},getRootProps:function(s){return Lp({role:"combobox","aria-expanded":n.getState().isOpen,"aria-haspopup":"listbox","aria-owns":n.getState().isOpen?"".concat(a.id,"-list"):void 0,"aria-labelledby":"".concat(a.id,"-label")},s)},getFormProps:function(s){return s.inputElement,Lp({action:"",noValidate:!0,role:"search",onSubmit:function(l){var c;l.preventDefault(),a.onSubmit(Lp({event:l,refresh:t,state:n.getState()},e)),n.dispatch("submit",null),null===(c=s.inputElement)||void 0===c||c.blur()},onReset:function(l){var c;l.preventDefault(),a.onReset(Lp({event:l,refresh:t,state:n.getState()},e)),n.dispatch("reset",null),null===(c=s.inputElement)||void 0===c||c.focus()}},Mp(s,["inputElement"]))},getLabelProps:function(s){return Lp({htmlFor:"".concat(a.id,"-input"),id:"".concat(a.id,"-label")},s)},getInputProps:function(s){function l(s){(a.openOnFocus||Boolean(n.getState().query))&&Ap(Lp({event:s,props:a,query:n.getState().completion||n.getState().query,refresh:t,store:n},e)),n.dispatch("focus",null)}var c="ontouchstart"in a.environment,p=s||{},o=(p.inputElement,p.maxLength),d=void 0===o?512:o,r=Mp(p,["inputElement","maxLength"]),i=ip(n.getState());return Lp({"aria-autocomplete":"both","aria-activedescendant":n.getState().isOpen&&null!==n.getState().activeItemId?"".concat(a.id,"-item-").concat(n.getState().activeItemId):void 0,"aria-controls":n.getState().isOpen?"".concat(a.id,"-list"):void 0,"aria-labelledby":"".concat(a.id,"-label"),value:n.getState().completion||n.getState().query,id:"".concat(a.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:null!=i&&i.itemUrl?"go":"search",spellCheck:"false",autoFocus:a.autoFocus,placeholder:a.placeholder,maxLength:d,type:"search",onChange:function(s){Ap(Lp({event:s,props:a,query:s.currentTarget.value.slice(0,d),refresh:t,store:n},e))},onKeyDown:function(s){!function(s){var a=s.event,t=s.props,n=s.refresh,e=s.store,l=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["event","props","refresh","store"]);if("ArrowUp"===a.key||"ArrowDown"===a.key){var c=function(){var s=t.environment.document.getElementById("".concat(t.id,"-item-").concat(e.getState().activeItemId));s&&(s.scrollIntoViewIfNeeded?s.scrollIntoViewIfNeeded(!1):s.scrollIntoView(!1))},p=function(){var s=ip(e.getState());if(null!==e.getState().activeItemId&&s){var t=s.item,c=s.itemInputValue,p=s.itemUrl,o=s.source;o.onActive(Np({event:a,item:t,itemInputValue:c,itemUrl:p,refresh:n,source:o,state:e.getState()},l))}};a.preventDefault(),!1===e.getState().isOpen&&(t.openOnFocus||Boolean(e.getState().query))?Ap(Np({event:a,props:t,query:e.getState().query,refresh:n,store:e},l)).then((function(){e.dispatch(a.key,{nextActiveItemId:t.defaultActiveItemId}),p(),setTimeout(c,0)})):(e.dispatch(a.key,{}),p(),c())}else if("Escape"===a.key)a.preventDefault(),e.dispatch(a.key,null);else if("Enter"===a.key){if(null===e.getState().activeItemId||e.getState().collections.every((function(s){return 0===s.items.length})))return;a.preventDefault();var o=ip(e.getState()),d=o.item,r=o.itemInputValue,i=o.itemUrl,h=o.source;if(a.metaKey||a.ctrlKey)void 0!==i&&(h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),t.navigator.navigateNewTab({itemUrl:i,item:d,state:e.getState()}));else if(a.shiftKey)void 0!==i&&(h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),t.navigator.navigateNewWindow({itemUrl:i,item:d,state:e.getState()}));else if(a.altKey);else{if(void 0!==i)return h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l)),void t.navigator.navigate({itemUrl:i,item:d,state:e.getState()});Ap(Np({event:a,nextState:{isOpen:!1},props:t,query:r,refresh:n,store:e},l)).then((function(){h.onSelect(Np({event:a,item:d,itemInputValue:r,itemUrl:i,refresh:n,source:h,state:e.getState()},l))}))}}}(Lp({event:s,props:a,refresh:t,store:n},e))},onFocus:l,onBlur:function(){c||n.dispatch("blur",null)},onClick:function(t){s.inputElement!==a.environment.document.activeElement||n.getState().isOpen||l(t)}},r)},getPanelProps:function(s){return Lp({onMouseDown:function(s){s.preventDefault()},onMouseLeave:function(){n.dispatch("mouseleave",null)}},s)},getListProps:function(s){return Lp({role:"listbox","aria-labelledby":"".concat(a.id,"-label"),id:"".concat(a.id,"-list")},s)},getItemProps:function(s){var l=s.item,c=s.source,p=Mp(s,["item","source"]);return Lp({id:"".concat(a.id,"-item-").concat(l.__autocomplete_id),role:"option","aria-selected":n.getState().activeItemId===l.__autocomplete_id,onMouseMove:function(s){if(l.__autocomplete_id!==n.getState().activeItemId){n.dispatch("mousemove",l.__autocomplete_id);var a=ip(n.getState());if(null!==n.getState().activeItemId&&a){var c=a.item,p=a.itemInputValue,o=a.itemUrl,d=a.source;d.onActive(Lp({event:s,item:c,itemInputValue:p,itemUrl:o,refresh:t,source:d,state:n.getState()},e))}}},onMouseDown:function(s){s.preventDefault()},onClick:function(s){var p=c.getItemInputValue({item:l,state:n.getState()}),o=c.getItemUrl({item:l,state:n.getState()});(o?Promise.resolve():Ap(Lp({event:s,nextState:{isOpen:!1},props:a,query:p,refresh:t,store:n},e))).then((function(){c.onSelect(Lp({event:s,item:l,itemInputValue:p,itemUrl:o,refresh:t,source:c,state:n.getState()},e))}))}},p)}}}function Up(s){var a,t=s.state;return!1===t.isOpen||null===t.activeItemId?null:(null===(a=ip(t))||void 0===a?void 0:a.itemInputValue)||null}function Vp(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function Hp(s){for(var a=1;a0}},a),{},{id:null!==(n=a.id)&&void 0!==n?n:"autocomplete-".concat(ap++),plugins:l,initialState:qp({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},a.initialState),onStateChange:function(s){var t;null===(t=a.onStateChange)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onStateChange)||void 0===t?void 0:t.call(a,s)}))},onSubmit:function(s){var t;null===(t=a.onSubmit)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onSubmit)||void 0===t?void 0:t.call(a,s)}))},onReset:function(s){var t;null===(t=a.onReset)||void 0===t||t.call(a,s),l.forEach((function(a){var t;return null===(t=a.onReset)||void 0===t?void 0:t.call(a,s)}))},getSources:function(s){return Promise.all([].concat(function(s){return function(s){if(Array.isArray(s))return fp(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return fp(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?fp(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(l.map((function(s){return s.getSources}))),[a.getSources]).filter(Boolean).map((function(a){return function(s,a){var t=[];return Promise.resolve(s(a)).then((function(s){return Array.isArray(s),"The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(rp(s)),":\n\n").concat(JSON.stringify(s,null,2)),Promise.all(s.filter((function(s){return Boolean(s)})).map((function(s){if(s.sourceId,t.includes(s.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(s.sourceId)," is not unique."));t.push(s.sourceId);var a=function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t0&&Yc.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},Yc.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),Yc.createElement("ul",null,a.slice(0,3).reduce((function(a,t){return[].concat(function(s){return function(s){if(Array.isArray(s))return jo(s)}(s)||function(s){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s))return Array.from(s)}(s)||function(s,a){if(s){if("string"==typeof s)return jo(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?jo(s,a):void 0}}(s)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(a),[Yc.createElement("li",{key:t},Yc.createElement("button",{className:"DocSearch-Prefill",key:t,onClick:function(){s.setQuery(t.toLowerCase()+" "),s.refresh(),s.inputRef.current.focus()}},t))])}),[]))),Yc.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",Yc.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(s.indexName,']+Missing+results+for+query+"').concat(s.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function vo(s,a){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(s,a).enumerable}))),t.push.apply(t,n)}return t}function bo(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(s,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:yo(a,"_snippetResult.".concat(t,".value"))||yo(a,t)}}))}function xo(s,a){return function(s){if(Array.isArray(s))return s}(s)||function(s,a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(s)){var t=[],n=!0,e=!1,l=void 0;try{for(var c,p=s[Symbol.iterator]();!(n=(c=p.next()).done)&&(t.push(c.value),!a||t.length!==a);n=!0);}catch(o){e=!0,l=o}finally{try{n||null==p.return||p.return()}finally{if(e)throw l}}return t}}(s,a)||function(s,a){if(s){if("string"==typeof s)return wo(s,a);var t=Object.prototype.toString.call(s).slice(8,-1);return"Object"===t&&s.constructor&&(t=s.constructor.name),"Map"===t||"Set"===t?Array.from(s):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?wo(s,a):void 0}}(s,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function wo(s,a){(null==a||a>s.length)&&(a=s.length);for(var t=0,n=new Array(a);t|<\/mark>)/g,Eo=RegExp(Oo.source);function Io(s){var a,t,n,e,l,c=s;if(!c.__docsearch_parent&&!s._highlightResult)return s.hierarchy.lvl0;var p=((c.__docsearch_parent?null===(a=c.__docsearch_parent)||void 0===a||null===(t=a._highlightResult)||void 0===t||null===(n=t.hierarchy)||void 0===n?void 0:n.lvl0:null===(e=s._highlightResult)||void 0===e||null===(l=e.hierarchy)||void 0===l?void 0:l.lvl0)||{}).value;return p&&Eo.test(p)?p.replace(Oo,""):p}function Do(){return(Do=Object.assign||function(s){for(var a=1;a0}));return s.state.query?!1===a?Yc.createElement(mo,s):Yc.createElement(Ao,s):Yc.createElement(No,Fo({},s,{hasCollections:a}))}),(function(s,a){return"loading"===a.state.status||"stalled"===a.state.status}));function Lo(){return(Lo=Object.assign||function(s){for(var a=1;a=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(a,["_highlightResult","_snippetResult"])),c=l.findIndex((function(s){return s.objectID===t.objectID}));c>-1&&l.splice(c,1),l.unshift(t),l=l.slice(0,n),e.setItem(l)},remove:function(s){l=l.filter((function(a){return a.objectID!==s.objectID})),e.setItem(l)},getAll:function(){return l}}}function $o(s){var a,t="algoliasearch-client-js-".concat(s.key),n=function(){return void 0===a&&(a=s.localStorage||window.localStorage),a},e=function(){return JSON.parse(n().getItem(t)||"{}")};return{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var t=JSON.stringify(s),n=e()[t];return Promise.all([n||a(),void 0!==n])})).then((function(s){var a=vl(s,2),n=a[0],e=a[1];return Promise.all([n,e||t.miss(n)])})).then((function(s){return vl(s,1)[0]}))},set:function(s,a){return Promise.resolve().then((function(){var l=e();return l[JSON.stringify(s)]=a,n().setItem(t,JSON.stringify(l)),a}))},delete:function(s){return Promise.resolve().then((function(){var a=e();delete a[JSON.stringify(s)],n().setItem(t,JSON.stringify(a))}))},clear:function(){return Promise.resolve().then((function(){n().removeItem(t)}))}}}function Uo(s){var a=bl(s.caches),t=a.shift();return void 0===t?{get:function(s,a){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},n=a();return n.then((function(s){return Promise.all([s,t.miss(s)])})).then((function(s){return vl(s,1)[0]}))},set:function(s,a){return Promise.resolve(a)},delete:function(s){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(s,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t.get(s,n,e).catch((function(){return Uo({caches:a}).get(s,n,e)}))},set:function(s,n){return t.set(s,n).catch((function(){return Uo({caches:a}).set(s,n)}))},delete:function(s){return t.delete(s).catch((function(){return Uo({caches:a}).delete(s)}))},clear:function(){return t.clear().catch((function(){return Uo({caches:a}).clear()}))}}}function Vo(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},a={};return{get:function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},l=JSON.stringify(t);if(l in a)return Promise.resolve(s.serializable?JSON.parse(a[l]):a[l]);var c=n(),p=e&&e.miss||function(){return Promise.resolve()};return c.then((function(s){return p(s)})).then((function(){return c}))},set:function(t,n){return a[JSON.stringify(t)]=s.serializable?JSON.stringify(n):n,Promise.resolve(n)},delete:function(s){return delete a[JSON.stringify(s)],Promise.resolve()},clear:function(){return a={},Promise.resolve()}}}function Ho(s){for(var a=s.length-1;a>0;a--){var t=Math.floor(Math.random()*(a+1)),n=s[a];s[a]=s[t],s[t]=n}return s}function Wo(s,a){return a?(Object.keys(a).forEach((function(t){s[t]=a[t](s)})),s):s}function Go(s){for(var a=arguments.length,t=new Array(a>1?a-1:0),n=1;n0?n:void 0,timeout:t.timeout||a,headers:t.headers||{},queryParameters:t.queryParameters||{},cacheable:t.cacheable}}var Xo={Read:1,Write:2,Any:3};function Qo(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return ml(ml({},s),{},{status:a,lastUpdate:Date.now()})}function Zo(s){return"string"==typeof s?{protocol:"https",url:s,accept:Xo.Any}:{protocol:s.protocol||"https",url:s.url,accept:s.accept||Xo.Any}}var sd="POST";function ad(s,a,t,n){var e,l,c,p=[],o=function(s,a){if("GET"!==s.method&&(void 0!==s.data||void 0!==a.data)){var t=Array.isArray(s.data)?s.data:ml(ml({},s.data),a.data);return JSON.stringify(t)}}(t,n),d=(e=n,l=ml(ml({},s.headers),e.headers),c={},Object.keys(l).forEach((function(s){var a=l[s];c[s.toLowerCase()]=a})),c),r=t.method,i="GET"!==t.method?{}:ml(ml({},t.data),n.data),h=ml(ml(ml({"x-algolia-agent":s.userAgent.value},s.queryParameters),i),n.queryParameters),u=0,g=function a(e,l){var c=e.pop();if(void 0===c)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:ld(p)};var i={data:o,headers:d,method:r,url:nd(c,t.path,h),connectTimeout:l(u,s.timeouts.connect),responseTimeout:l(u,n.timeout)},g=function(s){var a={request:i,response:s,host:c,triesLeft:e.length};return p.push(a),a},j={onSucess:function(s){return function(s){try{return JSON.parse(s.content)}catch(a){throw{name:"DeserializationError",message:a.message,response:s}}}(s)},onRetry:function(t){var n=g(t);return t.isTimedOut&&u++,Promise.all([s.logger.info("Retryable failure",cd(n)),s.hostsCache.set(c,Qo(c,t.isTimedOut?3:2))]).then((function(){return a(e,l)}))},onFail:function(s){throw g(s),function(s,a){var t=s.content,n=s.status,e=t;try{e=JSON.parse(t).message}catch(l){}return{name:"ApiError",message:e,status:n,transporterStackTrace:a}}(s,ld(p))}};return s.requester.send(i).then((function(s){return t=j,e=(n=a=s).status,n.isTimedOut||function(s){var a=s.isTimedOut,t=s.status;return!a&&0==~~t}(n)||2!=~~(e/100)&&4!=~~(e/100)?t.onRetry(a):2==~~(a.status/100)?t.onSucess(a):t.onFail(a);var a,t,n,e}))};return function(s,a){return Promise.all(a.map((function(a){return s.get(a,(function(){return Promise.resolve(Qo(a))}))}))).then((function(s){var t=s.filter((function(s){return 1===(a=s).status||Date.now()-a.lastUpdate>12e4;var a})),n=s.filter((function(s){return 3===(a=s).status&&Date.now()-a.lastUpdate<=12e4;var a})),e=[].concat(bl(t),bl(n));return{getTimeout:function(s,a){return(0===n.length&&0===s?1:n.length+3+s)*a},statelessHosts:e.length>0?e.map((function(s){return Zo(s)})):a}}))}(s.hostsCache,a).then((function(s){return g(bl(s.statelessHosts).reverse(),s.getTimeout)}))}function td(s){var a={value:"Algolia for JavaScript (".concat(s,")"),add:function(s){var t="; ".concat(s.segment).concat(void 0!==s.version?" (".concat(s.version,")"):"");return-1===a.value.indexOf(t)&&(a.value="".concat(a.value).concat(t)),a}};return a}function nd(s,a,t){var n=ed(t),e="".concat(s.protocol,"://").concat(s.url,"/").concat("/"===a.charAt(0)?a.substr(1):a);return n.length&&(e+="?".concat(n)),e}function ed(s){return Object.keys(s).map((function(a){return Go("%s=%s",a,(t=s[a],"[object Object]"===Object.prototype.toString.call(t)||"[object Array]"===Object.prototype.toString.call(t)?JSON.stringify(s[a]):s[a]));var t})).join("&")}function ld(s){return s.map((function(s){return cd(s)}))}function cd(s){var a=s.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return ml(ml({},s),{},{request:ml(ml({},s.request),{},{headers:ml(ml({},s.request.headers),a)})})}var pd=function(s){return function(a){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={transporter:s.transporter,appId:s.appId,indexName:a};return Wo(n,t.methods)}},od=function(s){return function(a,t){var n=a.map((function(s){return ml(ml({},s),{},{params:ed(s.params||{})})}));return s.transporter.read({method:sd,path:"1/indexes/*/queries",data:{requests:n},cacheable:!0},t)}},dd=function(s){return function(a,t){return Promise.all(a.map((function(a){var n=a.params,e=n.facetName,l=n.facetQuery,c=function(s,a){if(null==s)return{};var t,n,e=function(s,a){if(null==s)return{};var t,n,e={},l=Object.keys(s);for(n=0;n=0||(e[t]=s[t]);return e}(s,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(s);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(s,t)&&(e[t]=s[t])}return e}(n,["facetName","facetQuery"]);return pd(s)(a.indexName,{methods:{searchForFacetValues:hd}}).searchForFacetValues(e,l,ml(ml({},t),c))})))}},rd=function(s){return function(a,t,n){return s.transporter.read({method:sd,path:Go("1/answers/%s/prediction",s.indexName),data:{query:a,queryLanguages:t},cacheable:!0},n)}},id=function(s){return function(a,t){return s.transporter.read({method:sd,path:Go("1/indexes/%s/query",s.indexName),data:{query:a},cacheable:!0},t)}},hd=function(s){return function(a,t,n){return s.transporter.read({method:sd,path:Go("1/indexes/%s/facets/%s/query",s.indexName,a),data:{facetQuery:t},cacheable:!0},n)}};function ud(s,a,t){return function(s){var a,t,n,e,l=s.appId,c=(a=void 0!==s.authMode?s.authMode:Jo,t=l,n=s.apiKey,e={"x-algolia-api-key":n,"x-algolia-application-id":t},{headers:function(){return a===Jo?e:{}},queryParameters:function(){return a===Ko?e:{}}}),p=function(s){var a=s.hostsCache,t=s.logger,n=s.requester,e=s.requestsCache,l=s.responsesCache,c=s.timeouts,p=s.userAgent,o=s.hosts,d=s.queryParameters,r={hostsCache:a,logger:t,requester:n,requestsCache:e,responsesCache:l,timeouts:c,userAgent:p,headers:s.headers,queryParameters:d,hosts:o.map((function(s){return Zo(s)})),read:function(s,a){var t=Yo(a,r.timeouts.read),n=function(){return ad(r,r.hosts.filter((function(s){return 0!=(s.accept&Xo.Read)})),s,t)};if(!0!==(void 0!==t.cacheable?t.cacheable:s.cacheable))return n();var e={request:s,mappedRequestOptions:t,transporter:{queryParameters:r.queryParameters,headers:r.headers}};return r.responsesCache.get(e,(function(){return r.requestsCache.get(e,(function(){return r.requestsCache.set(e,n()).then((function(s){return Promise.all([r.requestsCache.delete(e),s])}),(function(s){return Promise.all([r.requestsCache.delete(e),Promise.reject(s)])})).then((function(s){var a=vl(s,2);return a[0],a[1]}))}))}),{miss:function(s){return r.responsesCache.set(e,s)}})},write:function(s,a){return ad(r,r.hosts.filter((function(s){return 0!=(s.accept&Xo.Write)})),s,Yo(a,r.timeouts.write))}};return r}(ml(ml({hosts:[{url:"".concat(l,"-dsn.algolia.net"),accept:Xo.Read},{url:"".concat(l,".algolia.net"),accept:Xo.Write}].concat(Ho([{url:"".concat(l,"-1.algolianet.com")},{url:"".concat(l,"-2.algolianet.com")},{url:"".concat(l,"-3.algolianet.com")}]))},s),{},{headers:ml(ml(ml({},c.headers()),{"content-type":"application/x-www-form-urlencoded"}),s.headers),queryParameters:ml(ml({},c.queryParameters()),s.queryParameters)}));return Wo({transporter:p,appId:l,addAlgoliaAgent:function(s,a){p.userAgent.add({segment:s,version:a})},clearCache:function(){return Promise.all([p.requestsCache.clear(),p.responsesCache.clear()]).then((function(){}))}},s.methods)}(ml(ml(ml({},{appId:s,apiKey:a,timeouts:{connect:1,read:2,write:30},requester:{send:function(s){return new Promise((function(a){var t=new XMLHttpRequest;t.open(s.method,s.url,!0),Object.keys(s.headers).forEach((function(a){return t.setRequestHeader(a,s.headers[a])}));var n,e=function(s,n){return setTimeout((function(){t.abort(),a({status:0,content:n,isTimedOut:!0})}),1e3*s)},l=e(s.connectTimeout,"Connection timeout");t.onreadystatechange=function(){t.readyState>t.OPENED&&void 0===n&&(clearTimeout(l),n=e(s.responseTimeout,"Socket timeout"))},t.onerror=function(){0===t.status&&(clearTimeout(l),clearTimeout(n),a({content:t.responseText||"Network request failed",status:t.status,isTimedOut:!1}))},t.onload=function(){clearTimeout(l),clearTimeout(n),a({content:t.responseText,status:t.status,isTimedOut:!1})},t.send(s.data)}))}},logger:(3,{debug:function(s,a){return Promise.resolve()},info:function(s,a){return Promise.resolve()},error:function(s,a){return console.error(s,a),Promise.resolve()}}),responsesCache:Vo(),requestsCache:Vo({serializable:!1}),hostsCache:Uo({caches:[$o({key:"".concat("4.8.5","-").concat(s)}),Vo()]}),userAgent:td("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Ko}),t),{},{methods:{search:od,searchForFacetValues:dd,multipleQueries:od,multipleSearchForFacetValues:dd,initIndex:function(s){return function(a){return pd(s)(a,{methods:{search:id,searchForFacetValues:hd,findAnswers:rd}})}}}}))}function gd(){return(gd=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t",highlightPostTag:"",hitsPerPage:20},r)}]).catch((function(s){throw"RetryError"===s.name&&e("error"),s})).then((function(s){var a=s.results[0],e=a.hits,l=a.nbHits,c=zo(e,(function(s){return Io(s)}));return t.context.searchSuggestions.length0&&(W(),T.current&&T.current.focus())}),[R,W]),Yc.useEffect((function(){function s(){if(I.current){var s=.01*window.innerHeight;I.current.style.setProperty("--docsearch-vh","".concat(s,"px"))}}return s(),window.addEventListener("resize",s),function(){window.removeEventListener("resize",s)}}),[]),Yc.createElement("div",gd({ref:E},H({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===P.status&&"DocSearch-Container--Stalled","error"===P.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(s){s.target===s.currentTarget&&h()}}),Yc.createElement("div",{className:"DocSearch-Modal",ref:I},Yc.createElement("header",{className:"DocSearch-SearchBar",ref:D},Yc.createElement(Bo,gd({},U,{state:P,autoFocus:0===R.length,onClose:h,inputRef:T,isFromSelection:Boolean(R)&&R===F}))),Yc.createElement("div",{className:"DocSearch-Dropdown",ref:A},Yc.createElement(Ro,gd({},U,{indexName:p,state:P,hitComponent:m,resultsFooterComponent:b,disableUserPersonalization:k,recentSearches:M,favoriteSearches:B,onItemClick:function(s){$(s),h()},inputRef:T}))),Yc.createElement("footer",{className:"DocSearch-Footer"},Yc.createElement(Zp,null))))}function yd(){return(yd=Object.assign||function(s){for(var a=1;as.length)&&(a=s.length);for(var t=0,n=new Array(a);t{for(var t in a||(a={}))l.call(a,t)&&p(s,t,a[t]);if(e)for(var t of e(a))c.call(a,t)&&p(s,t,a[t]);return s})({},this.searchConfig),s=t(a,n({container:"#docsearch"})),Lc(Yc.createElement(wd,gl({},s,{transformSearchClient:function(a){return a.addAlgoliaAgent("docsearch.js","3.0.0-alpha.40"),s.transformSearchClient?s.transformSearchClient(a):a}})),function(s){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof s?a.document.querySelector(s):s}(s.container,s.environment)))}}},[["render",function(s,a,t,n,e,l){return on(),un("div",_d)}]]);const Sd={class:"van-doc-markdown-body"},zd=_n('

更新日志

v1.9.0

2021-09-27

Bug Fixes

  • Slider: 移除 theme mixin #4520
  • Tab: 修复初始位置不正确问题 #4521

Document

  • ActionSheet: 添加 show 属性说明 #4518

Feature

  • Slider: 添加 vertical 属性 #4486

Performance

  • 移除 CSS variables 兼容代码 #4487

v1.8.7

2021-09-22

Features

  • Icons: 新增 guide-o 图标 #4507

1.8.6

2021-09-20

Features

  • Calendar: 新增 confirmDisabledText 默认文案 #4490) (8629da1

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

  • Calendar: 修复超出选择范围 toast 提示一直存在问题 #4474
  • page-scroll: 修复 isDef 取反问题 #4488

1.8.4

2021-09-07

Bug Fixes

  • page-scroll: 修复 getCurrentPage 为空时报错 #4458

Features

  • Field: 新增 clear-trigger 属性 #4461
  • Search: 新增 clear-icon 属性 #4463
  • Search: 新增 clear-trigger 属性 9e17b13
  • Slider: 新增 range 属性 #4442

v1.8.3

2021-08-30

Bug Fixes

  • Calendar: 修复 default-date 属性失效问题 #4430
  • ShareSheet: 调整 overlayStyle 属性类型为 string 8c408e2
  • Stepper: 调整 minus/plus slots 位置 #4427
  • Sticky: 修复 root 为 null 时，读取 root.top 报错问题 #4433
  • Calendar: 调整 minDate 和 maxDate 传值类型为 Number 37d8e69

Features

  • Popup: 新增 lock-scroll 属性 #4384

Performance Improvements

  • Radio: label 的 margin-left 改为 padding-left，增大可点击区域，增强用户体验 #4165

v1.8.2

2021-08-18

Bug Fixes

  • Calendar: 修复 template 引用路径不是相对路径的问题 7f7cf6
  • Field: 修复 template 引用路径不是相对路径的问题 6dd42a

v1.8.1

2021-08-18

Feature

  • Calendar: 新增 click-subtitle 事件 #4385
  • Circle: 使用 setTimeout 代替 setInterval #4401

Bug Fixes

  • Picker: 修复 template 引用路径不是相对路径的问题 #4408

v1.8.0

2021-08-11

Feature

  • Overlay: 新增 lock-scroll 属性 #4383
  • search: 新增 click-input 事件 #4357

Performance

  • 移除了 iOS8 相关的 polyfill，减少包体积 #4395

v1.7.2

2021-07-19

Bug Fixes

  • Calendar: 初始日期设置为当前日期 #4339

Features

  • Cell: CellGroup 新增 inset 属性 #4341
  • Search: 新增 click-input 事件 #4337

1.7.1

2021-07-06

Bug Fixes

  • Col: 修复样式问题 #4322
  • Grid: 增加 icon-prefix 属性默认值 #4318
  • IndexBar: 修复当索引列表为空时报错 #4310

1.7.0

2021-07-04

Bug Fixes

  • Button: 修复 type 为 getUserInfo & wx.getUserProfile 可用时 lang 参数失效 #4250
  • ShareSheet: 新增内置 icon weapp-qrcode wechat-moments #4256

Features

  • Checkbox: 增加 direction 属性，设置排列方向 #4265
  • ConfigProvider: 增加全局配置组件 #4279
  • Grid: 增加 reverse 属性，支持文本&图片位置互换 #4280
  • GridItem: 增加 icon-prefix 属性，支持第三方字体 #4276
  • Rate: 增加更多 css 变量 #4297
  • Slider: 增加更多 css 变量 #4305

Improvements

  • wxs style 方法支持驼峰变量命名，以便能更好的在 wxml 中使用 #4281

1.6.9

2021-06-06

Bug Fixes

  • DatetimePicker: 修复 动态设置 min-hour min-date 显示不正确 #4245
  • Tabs: 修复 tab 数量较多时滚动距离不正确 #4202
  • Uploader: 修复 demo 中 beforeRead 报错 #4235

1.6.9-beta.2

2021-05-22

Bug Fixes

  • Button: 修复 open-type 不生效 #4222
  • Calendar: 修复 allow-same-day 开启时 custom-color 属性无效 #4200
  • Circle: 修复 value 是小数时抖动的情况 #4152
  • NoticeBar: 调整滚动行为 #4201
  • NoticeBar: 修复不正确的滚动速度 cde3876
  • Radio: 支持动态设置 disabled #4191
  • Rate: 支持滑动选择半星 #4195

Features

  • Calendar: 增加 first-day-of-week 属性，设置周起始日 #4211
  • Calendar: 增加 show-range-prompt 属性和 over-range 事件，设置是否展示提示文案 #4212
  • Icons: 图标库迁移至 iconfont.cn #4219
  • OpenType: 支持 getUserProfile #4203
  • Panel: 移除 useFooterSlot #4205

1.6.8

2021-02-26

Features

  • NoticeBar: 新增默认插槽 (#4048)
  • Stepper: 新增 theme 属性，支持圆形风格 (#4049)
  • Stepper: 新增 plus & minus 插槽 (#4049)

Bug Fixes

  • Checkbox: 修复 label-position 属性无效 (#4036)
  • Dialog: 修复 beforeClose 方法类型定义 (#4019)

Improvements

  • Circle: 当内置 canvas 不支持同层渲染时降级至默认 type (#4050)

1.6.7

2021-01-27

Features

  • Radio: 新增 direction 属性 (#4007)

Bug Fixes

  • Icons: 修复部分地区图标不显示 (#4012)
  • Transition: 修复默认设置 show 属性为 true 时不生效 (#4005)

1.6.6

2021-01-21

Features

  • Uploader: 支持文件预览 (#3975)

Bug Fixes

  • Picker: 修复标题栏无法显示 (#3973)

Improvements

  • Calendar: 优化模板代码 (#3972)

1.6.5

2021-01-19

Features

  • Field: 新增 input 插槽 (#3932)
  • Field: 新增 click-input 事件 (#3932)
  • Icon: 新增 delete-o、sort、font、font-o、revoke 图标 (#3881)

Bug Fixes

  • Button: 修复 custom-style 属性不生效 (#3903)
  • Dialog: 修复 close-on-click-overlay 属性不生效 (#3913)

Improvements

  • Cell: 优化性能 (#3888)
  • Col: 优化性能 (#3886)
  • Divider: 优化性能 (#3887)
  • Empty: 优化性能 (#3933)
  • Loading: 优化性能 (#3892)
  • Notice-bar: 优化性能 (#3891)
  • Notify: 优化性能 (#3893)
  • Picker: 优化性能 (#3949)
  • Stepper: 优化性能 (#3890)
  • Sticky: 优化性能 (#3879)
  • SwipeCell: 优化性能 (#3928)
  • Switch: 优化性能 (#3889)
  • Tag: 优化性能 (#3894)
  • Transition: 优化性能 (#3895)
  • Uploader: 优化性能 (#3897)

1.6.4

2020-12-18

Improvements

  • Tab: 优化粘性布局时的渲染性能 (#3875)
  • Grid: 使用 wxs 优化性能 (#3839)
  • Image: 使用 wxs 优化性能 (#3839)
  • Button: 使用 wxs 优化性能 (#3839)
  • Icon: 减少代码体积 (#3839)
  • Checkbox: 减少代码体积 (#3839)
  • Slider: 减少代码体积 (#3839)

Bug Fixes

  • Calendar: 修复在 phone 设备上选择日期后显示错误 (#3833)
  • GoodsAction: 修复部分设备上高度异常 (#3865)
  • Slider: 修复设置 max min 时滑动不均匀 (#3876)
  • Tab: 修复切换时内容区闪烁的问题 (#3866)

1.6.3

2020-12-09

Features

  • Dialog: 新增 beforeClose 属性 (#3815)
  • uploader: 新增若干 CSS 变量 (#3797)
  • Aarea: 支持不传入 county_list 数据 (#3824)
  • Tab: 新增 resize 方法 (#3827)

Improvements

  • Collapse: 使用 animate 提升动画性能 (#3826)
  • Tab: 优化样式拼装性能 (#3827)

Bug Fixes

  • Field: 修复输入中文时显示字数暂时超出 maxlength (#3802)
  • Info: 修复样式错误 (#3823)
  • NavBar: 修复动态渲染时组件报错 (#3822)
  • Progress: 修复 percentage 为 0 时样式异常 (#3808)

1.6.2

2020-11-29

Features

  • Tabbar: 新增 placeholder icon-prefix 属性 (#3792)

Bug Fixes

  • DatetimePicker: 修复 type=year-month 时选择出现报错 (#3783)
  • Info: 修复部分安卓设备中文案不完全居中 (#3778)
  • Tab: 修复 ellipsis 为 false 时下划线位置不正确 (#3777)
  • Notify: 修复组件未全局居中 (#3751)

Improvements

  • Icon: 使用 wxs 优化性能 (#3791)

1.6.1

2020-11-12

Bug Fixes

  • Field: 修复未传入 label 属性时仍渲染 label #3756
  • Picker: 修复 confirm、cancel 事件报错 #3755

1.6.0

2020-11-11

Features

  • SwipeCell: 新增外部样式类 custom-class #3678
  • ActionSheet: 调整取消文字颜色至 @gray-7 #3719
  • ActionSheet: 调整顶部栏样式 #3720
  • ActionSheet: 调整加载图标大小至 22px #3718
  • ActionSheet: 调整描述文字样式 #3726
  • Cell: 调整图标外边距至 4px #3721
  • DropdownMenu: 增加默认阴影 #3723
  • DropdownMenu: 调整选中态默认颜色至 #ee0a24 #3725
  • Image: 调整图标大小至 36px #3724
  • Popup: 调整圆角至 16px #3713
  • Search: 调整左侧内边距至 12px #3716
  • Sidebar: 调整宽度至 85px #3722
  • TabbarItem: 调整图标大小至 22px #3717

Bug Fixes

  • Field: 修复使用 label 属性时 label-class 样式类不生效 #3729
  • NoticeBar: 修复内容较短时开启 scrollable 不生效 #3727
  • SidebarItem: 修复长数字不换行的问题 #3714
  • Tag: 默认字体加入 miui #3715

1.5.2

2020-10-15

Features

  • Uploader: 标准化 file-list 与事件参数 #3673
  • Uploader: 新增 thumb，支持缩略图展示 #3673
  • GoodsAction: 新增若干 CSS 变量 #3654
  • 移动 @types/wechat-miniprogram 至 dependencies #3654

Bug Fixes

  • Button: 修复细边框样式问题 #3653
  • Tab: 重构动画实现，不再使用 transform #3668

1.5.1

2020-09-29

Features

  • Card: 新增 origin-price tag 插槽 #3645
  • ShareSheet: 调整默认 z-index 至 100 #3575
  • ShareSheet: 新增 item 属性 openType #3575
  • Uploader: 扩大删除按钮点击区域 #3631

Bug Fixes

  • Uploader: 支持预览视频 #3594
  • Dialog: 调整类型定义 #3630
  • NavBar: 修复 CSS 变量 --nav-bar-icon-color 不生效 #3643
  • NavBar: 修复未设置 title 时样式异常 #3643
  • Tab: 修复 line-width 属性不支持 string #3628

1.5.0

2020-08-27

Features

  • ShareSheet: 新增组件 #3559
  • Icons: 升级 @vant/icons 至 v1.2.5 #3539
  • sidebar: 新增 badge 属性 #3564
  • Tabs: 调整默认 line-width 至 40px #3518
  • Tabs: 去除默认边框 #3519
  • TreeSelect: 新增 selected-icon 属性 #3565
  • TreeSelect: 支持 badge、dot 显示 #3565

Bug Fixes

  • collapse: 修复嵌套在 popup 等组件中时默认展开无效 #3562
  • empty: 修复 image、description 插槽不生效 #3563

1.4.4

2020-08-12

Bug Fixes

  • Transition: 重构组件以修复卡顿问题 #3498
  • Icon: 修复数字未对齐 #3501
  • Tab: 修复可滚动时下划线位置错误 #3511

v1.4.3

2020-08-07

Features

  • Dialog: 增加圆角按钮样式 #3476
  • Cell: 调整下划线位置 #3487
  • Tab: 调整默认滚动阈值至 5 个、优化样式 #3459

v1.4.2

2020-08-03

Features

Bug Fixes

  • Calendar: 修复超出 max-range 时未显示 Toast #3466
  • Tab: 修复手势滚动可切换至禁用项 #3467

v1.4.1

2020-07-28

Features

  • Picker: 调整默认可见的选项个数为 6 个 #3418
  • Toast: 调整圆角为 8px #3419

Bug Fixes

  • Slider: 修复点击会触发 drag 事件 #3415
  • Area: 修复中间列无法滚动 #3443

v1.4.0

2020-07-17

Features

  • Empty: 新增 Empty 组件 #3327
  • NoticeBar: 新增 background 属性 #3388
  • NoticeBar: 新增 close 事件 #3388
  • GridItem: 新增 icon-color 属性 #3386
  • NavBar: 现在 custom-style 将影响根节点#3371
  • Cell: 新增 title-style 属性, fix Field label width #3370
  • Uploader: 更新 failed 图标 #3359
  • Uploader: 更新删除图标样式 #3385
  • Uploader: 移除圆角样式 #3384
  • Field: 更新禁用态样式 #3358
  • Field: 更新 label 样式 #3357
  • Picker: 调整 action button 样式 #3316

Bug Fixes

  • Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 #3401
  • Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 #3317
  • Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 #3318
  • DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 #3352
  • Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 #3383
  • Dialog: show dialog after class ready #3374
  • Calendar: confirm-disabled-text 属性增加默认值 #3394

v1.3.3

2020-06-24

Features

  • steps: 为每一项增加 inactiveIcon、activeIcon 属性 #3315
  • field: 增加外部样式类 label-class #3311
  • field: 现在总会从内部 set value 值 #3313
  • uploader: 为每一项增加 deletable 属性 #3270
  • uploader: 扩大删除图标的可点击区域 #3265

Bug Fixes

  • tabbar: 修复 iphone-se 上高度异常 #3314
  • grid: 修复 text 与 icon 同时设置时样式异常 #3310
  • calendar: 修复多选模式下 default-date 属性不生效 #3284
  • circle: 修复 type=“2d” 时无法动态变更 value #3264
  • nav-bar: 修复未设置 left-text 时左侧图标样式异常 #3263

v1.3.2

2020-06-04

Features

  • button: 新增 form-type 属性 #3208
  • grid: 新增 icon-size、badge 属性 #3236
  • grid: 新增 direction 属性 #3192

Bug Fixes

  • Grid: 修复开启 square 时横、纵向间距不同 #3231
  • uploader: 修复点击删除图标时触发 click-preview 事件 #3230
  • circle: 修复 type="2d" 不生效 #3228
  • calendar: 修复在选择区间时，点击确定报错 #3195
  • tag: 修复 css 变量名拼写错误 #3191

v1.3.1

2020-05-24

Features

  • Button: 新增 class-prefix 属性 #3159
  • Collapse: 新增 open、close 事件 #3176

Bug Fixes

  • 修复控制台提示选择器错误的问题 #3137
  • 修复 GoodsActionButton 在某些情况下报错的问题 #3145

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

  • sticky: 新增 scroll-top 属性 #3115
  • button: 新增 dataset 属性 #3075
  • uploader: 所有类型都会触发 click-preview 事件 #3071
  • Uploader: 属性 accept 新增值 media #3047
  • feat: 新增基础 font-family #3061
  • submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 #3104

Bug Fixes

  • dialog: 修复 title 多余空格的问题 #3069
  • tab: 修复 tab 个数多时显示滚动条 #3072
  • Sticky: 修复使用组件时页面 onPageScroll 失效 #3092
  • button: 修复 disabled 属性对 open-type 类型的按钮无效 #3076

v1.2.2

2020-04-21

Features

  • GoodsActionButton: 新增 CSS 变量 goods-action-line-height #3037
  • Calendar: 选择区间大于 range 时自动选中最大范围 #3026
  • Notify: 新增 top 属性 #3018

Bug Fixes

  • Field: 修复未设置 autosize 时 wxs 报错 #3038
  • Field: 避免设置 showClear 为 undefined #3012

v1.2.1

2020-04-12

Features

  • Field: 支持小程序双向绑定 #2986
  • Calendar: 多选模式下新增 unselect 事件 #2990

Bug Fixes

  • IndexBar: 移除 scroll-top 属性 #2999
  • Uploader: 修复图片后缀名为大写时未正常识别 #2987
  • Field: 修复 autosize 属性 设置 max-height 不生效 #3007

v1.2.0

2020-04-04

Features

  • TreeSelect: 更新 nav 背景色 #2952
  • Sticky: 使用 page scroll 重构组件 #2950
  • Field: 新增 auto-focus、disable-default-padding、cursor 属性 #2936
  • Field: 新增 linechange、keyboardheightchange 事件 #2936
  • Uploader: 支持显示上传状态 #2929
  • Image: mode 属性新增 widthFix、heightFix #2908
  • Canvas: 新增 type 属性 #2906
  • NavBar: 新增 placeholder 属性 #2896

Bug Fixes

  • Field: 修复输入过快时输入框内容不断回退 #2936
  • Calendar: 修复 show-confirm 为 true 时组件初始化报错 #2951
  • Tab: 修复 type 为 card 时 color 对边框无效 #2941

v1.1.0

2020-03-21

Features

  • 新增 Calendar 日历组件 #2894
  • Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class #2882
  • Steps: 新增 click 事件 #2874
  • SideBar: 新增 title 插槽 #2873
  • Uploader: 新增 upload-icon 属性 #2869
  • Uploader: 新增 show-upload 属性 #2868
  • Uploader: 更新样式、调整事件触发顺序与 vant 一致 #2886
  • Field: 新增 show-word-limit 属性 #2856
  • Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight #2856
  • Field: 新增若干 CSS 变量 #2856

Bug Fixes

  • Button: 移除 lang 属性默认值 #2883
  • Button: 修复 disabled 属性对原生事件无效 #2878

v1.0.7

2020-03-04

Features

  • DropdownItem: 新增 popupStyle 属性 #2804
  • DropdownItem: 新增 open close opened closed 事件 #2804
  • Card: 新增 price num 插槽 #2787
  • Card: 新增 origin-price-class 外部样式类 #2787

Bug Fixes

  • Tab: 修复内容项高度不同时粘性布局异常 #2817
  • Picker: 修复未选中项样式未置灰 #2816
  • GoodsActionButton: 修复仅使用一个 button 时样式异常 #2808
  • Radio: name类型与value统一 #2801
  • Uploader: 修复文档错误 #2777

v1.0.6

2020-02-24

Features

  • GoodsActionButton: 新增默认 slot #2779
  • SubmitBar: 更新圆角样式 #2755
  • Card: 更新样式 #2754
  • 优化 relation 部分代码 #2760

Bug Fixes

  • DropdownItem: 修复点击选项时不触发close事件 #2766
  • GoodsActionButton: 修复低版本基础库下的样式问题 #2762
  • Tabs: 修复点击禁用项时事件参数错误 #2758
  • Checkbox: 修复动态设置disabled属性无效 #2748
  • Button: add loading color when plain is true #2746
  • Radio: 修复label-disabled文档错误 #2763

v1.0.5

2020-02-07

Features

  • ActionSheet: actions 支持更多 openType #2715
  • Uploader: 新增开始disabled时的组件样式 #2720
  • Icon: 调整示例小程序页面与 vant 对齐 #2728
  • 示例小程序首页与 vant 对齐 #2729
  • 完善快速上手文档，增加 npm 构建说明 #2726

Bug Fixes

  • Radio: 修复disabled属性不生效 #2711
  • Tab: 修复animated属性无法动态切换 #2712
  • Circle: 修正文档错误，size属性不支持string类型 #2694
  • 修正文档默认 slot 名称为 default 的错误 #2726
  • TreeSelect: 修正文档示例代码标签闭合错误 #2710

v1.0.4

2020-01-21

Features

  • Stepper: 新增 disable-long-press 属性 #2691
  • quickstart: 快速上手新增关闭 style v2 说明 #2704
  • Search: 新增 background、disabled、input-align 文档示例 #2698
  • Icon: 文档新增图标文字加载失败说明 #2681

Bug Fixes

  • Sticky: 修复真机上页面滚动缓慢时无法吸顶/取消吸顶 #2703
  • DropdownItem: 修复 wx:key 警告 #2670
  • IndexBar: 文档修复组件引入路径错误 #2689
  • 升级依赖版本以避免安全警告 #2680

v1.0.3

2020-01-09

Features

  • npm 包默认输出 es5 版本代码 #2639
  • Steps: 新增外部样式类 desc-class #2630

Bug Fixes

  • Tab: 解决动态添加选项时，顺序错乱和下划线长度不变的问题 #2663
  • NavBar: 修复返回图标未居中的问题 #2633

v1.0.2

2019-12-31

Features

  • Skeleton: 新增外部样式类row-class``avatar-class``title-class #2612
  • SwipeCell: 支持动态修改width属性 #2607
  • Uploader: 新增camera``compressed``maxDuration属性 #2584

Improvements

  • Tab: 优化弹性滚动效果 #2606

Bug Fixes

  • IndexBar: 修复字母未全部定义时 click 事件报错 #2605
  • Field: 修复点击清除图标后下一次点击无效 #2602

v1.0.1

2019-12-23

Features

  • Uploader: 新增 sizeType 属性 #2563
  • GoodsActionButton: 新增 plain 属性 #2559
  • Uploader: 去除 use-slot 属性 #2551
  • 新增样式覆盖说明文档 #2566

Improvements

  • 使用 nextTick 优化部分异步逻辑 #2561
  • wxs 新增 addUnit 方法以减少 setData 调用次数 #2550

Bug Fixes

  • Tag: 修复未依赖 van-icon 组件 #2579
  • Notify: 修复 safeAreaInsetTop 不生效 #2558
  • Uploader: 修复 capture 属性不生效 #2551

v1.0.0

2019-12-11

主要变动

  • npm 包名由 vant-weapp 重命名为 @vant/weapp
  • 增加十一个新组件
  • 增加数十个 API
  • 所有组件支持通过CSS自定义属性自定义样式
  • 使用env()重构 iOS 安全区域适配
  • 调整部分 API 命名，废除少量 API

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

  • Grid 宫格，用于展示内容或进行页面导航
  • Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示
  • Circle 环形进度条，告知用户当前的状态和进度
  • Overaly 遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
  • Divider 分割线，区隔内容的分割线
  • Sticky 粘性布局，与 CSS 中position: sticky属性实现的效果类似
  • Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
  • IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
  • Uploader 文件上传，上传一个或多个文件
  • CountDown 倒计时，用于显示活动倒计时、短信验证码等
  • DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
  • BadgeGroup重命名为Sidebar
  • Badge重命名为SlidebarItem
  • active属性重命名为activeKey
Notify
  • text选项重命名为message
  • backgroundColor选项重命名为background
  • 去除transitionend事件，新增 6 个事件
SwitchCell
  • 移除了SwitchCell组件，可以使用Cell和Switch组件代替
Transition
  • 去除transitionend事件，新增 6 个事件

新特性

ActionSheet
  • 新增click-overlay事件
  • 新增close-on-click-action属性
  • 新增color属性
  • 新增description属性
  • 新增round属性
Area
  • 新增columns-placeholder属性
  • reset方法支持传入code参数
Button
  • 新增loading-type属性
  • color属性支持渐变色
  • 切换disabled时增加过渡效果
Checkbox
  • 新增icon-size属性
Color
  • 基础红色更新为#ee0a24
DatetimePicker
  • 新增filter属性
Dialog
  • 优化文字换行
  • 新增title插槽
  • 新增confirm-button-color属性
  • 新增cancel-button-color属性
  • 新增width属性
  • 新增overlay-style属性
Field
  • 新增clickable属性
  • 新增arrow-direction属性
  • 新增hold-keyboard属性
GoodsActionButton
  • 新增color属性
  • 样式升级为圆角风格
GoodsActionIcon
  • 新增icon插槽
  • 新增dot属性
GridItem
  • 新增info属性
  • 新增dot属性
Icon
  • 新增dot属性
  • 新增down图标
  • 新增wap-hone实底风格图标
  • 支持number类型的size属性
Loading
  • 支持number类型的size属性
NoticeBar
  • 阻止关闭图标点击事件冒泡
Notify
  • 新增clear方法
  • 新增round属性
  • 新增closeable属性
  • 新增close-icon属性
  • 新增close-icon-position属性
Progress
  • 新增stroke-width属性
Radio
  • 新增icon-size属性
Rate
  • 优化手势判断
  • 新增gutter属性
  • 新增touchable属性
  • 支持string类型的size属性
  • 新增action-text属性
  • 新增left-icon插槽
  • 新增right-icon插槽
SlidebarItem
  • 新增dot属性
Slider
  • 新增drag-start事件
  • 新增drag-end事件
  • 支持传入任意范围的max和min属性
  • 支持number类型的bar-height属性
  • 增加滑动动画
  • 增大点击区域
SwipeCell
  • 新增name属性
  • 新增open事件
  • 支持打开状态互斥
Switch
  • 加载图标的颜色会跟随开关状态变化
Stepper
  • 支持长按手势
  • 新增input-width属性
  • 新增button-size属性
  • 新增decimalLength属性
  • 新增 disablePlus、disableMinus 属性
Steps
  • 新增active-icon属性
  • 新增inactive-icon属性
Tabs
  • 使用 Sticky 组件重构吸顶实现
  • 新增name属性
  • 新增line-height属性
  • 新增ellipsis属性
  • 新增lazy-render属性
  • line-width属性支持String类型
  • 增加云开发结合示例
TreeSelect
  • 新增max属性
  • 新增content插槽
',48),Cd=[zd],Pd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Sd,Cd)))},Od={class:"van-doc-markdown-body"},Ed=_n('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',5),Id=[Ed],Dd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Od,Id)))},Ad={class:"van-doc-markdown-body"},Td=_n('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),Nd=[Td],Fd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ad,Nd)))},Rd={class:"van-doc-markdown-body"},Ld=_n('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

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

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

  • 基于 Vant Weapp 搭建小程序应用
  • 样式覆盖方案

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),Bd=[Ld],Md={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Rd,Bd)))},$d={class:"van-doc-markdown-body"},Ud=_n('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

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

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

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

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',7),Vd=[Ud],Hd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",$d,Vd)))},Wd={class:"van-doc-markdown-body"},Gd=_n('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),Kd=[Gd],Jd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Wd,Kd)))},Yd={class:"van-doc-markdown-body"},Xd=_n('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

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

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

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

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

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

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

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

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',17),Qd=[Xd],Zd={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Yd,Qd)))},sr={class:"van-doc-markdown-body"},ar=_n('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

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

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',18),tr=[ar],nr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",sr,tr)))},er={class:"van-doc-markdown-body"},lr=_n('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

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

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

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

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

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

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

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

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

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

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

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

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

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

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),cr=[lr],pr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",er,cr)))},or={class:"van-doc-markdown-body"},dr=[_n('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10)],rr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",or,dr)))},ir={class:"van-doc-markdown-body"},hr=[_n('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ir,hr)))},gr={class:"van-doc-markdown-body"},jr=[_n('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定复选框的勾选状态。

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

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

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

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

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

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

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

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],mr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",gr,jr)))},vr={class:"van-doc-markdown-body"},br=[_n('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

value属性表示进度条的目标进度。

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

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

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

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",vr,br)))},yr={class:"van-doc-markdown-body"},qr=[_n('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

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

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

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

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],xr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",yr,qr)))},wr={class:"van-doc-markdown-body"},_r=[_n('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],kr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",wr,_r)))},Sr={class:"van-doc-markdown-body"},zr=[_n('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],Cr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Sr,zr)))},Pr={class:"van-doc-markdown-body"},Or=[_n('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

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

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],Er={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Pr,Or)))},Ir={class:"van-doc-markdown-body"},Dr=[_n('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

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

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

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

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

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

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],Ar={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ir,Dr)))},Tr={class:"van-doc-markdown-body"},Nr=[_n('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

选择完整时间

value 为时间戳。

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

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

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

选择日期（年月）

value 为时间戳。

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

选择时间

value 为字符串。

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

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

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

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],Fr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Tr,Nr)))},Rr={class:"van-doc-markdown-body"},Lr=[_n('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

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

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],Br={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Rr,Lr)))},Mr={class:"van-doc-markdown-body"},$r=[_n('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

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

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],Ur={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Mr,$r)))},Vr={class:"van-doc-markdown-body"},Hr=[_n('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

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

向上展开

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

禁用菜单

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

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
',15)],Wr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Vr,Hr)))},Gr={class:"van-doc-markdown-body"},Kr=[_n('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

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

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Jr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Gr,Kr)))},Yr={class:"van-doc-markdown-body"},Xr=[_n('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Qr={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Yr,Xr)))},Zr={class:"van-doc-markdown-body"},si=[_n('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],ai={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Zr,si)))},ti={class:"van-doc-markdown-body"},ni=[_n('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

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

自定义内容

通过插槽可以自定义格子展示的内容。

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

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

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

格子间距

通过gutter属性设置格子之间的距离。

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

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

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

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],ei={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ti,ni)))},li={class:"van-doc-markdown-body"},ci=[_n('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

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

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

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

图标颜色

设置color属性来控制图标颜色。

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

图标大小

设置size属性来控制图标大小。

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

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],pi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",li,ci)))},oi={class:"van-doc-markdown-body"},di=[_n('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

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

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

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

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

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

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

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

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

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

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],ri={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",oi,di)))},ii={class:"van-doc-markdown-body"},hi=[_n('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ii,hi)))},gi={class:"van-doc-markdown-body"},ji=[_n('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

加载类型

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

自定义颜色

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

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],mi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",gi,ji)))},vi={class:"van-doc-markdown-body"},bi=[_n('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",vi,bi)))},yi={class:"van-doc-markdown-body"},qi=[_n('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

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

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],xi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",yi,qi)))},wi={class:"van-doc-markdown-body"},_i=[_n('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],ki={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",wi,_i)))},Si={class:"van-doc-markdown-body"},zi=[_n('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

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

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],Ci={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Si,zi)))},Pi={class:"van-doc-markdown-body"},Oi=[_n('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],Ei={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Pi,Oi)))},Ii={class:"van-doc-markdown-body"},Di=[_n('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

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

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

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

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],Ai={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ii,Di)))},Ti={class:"van-doc-markdown-body"},Ni=[_n('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

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

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

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

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],Fi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ti,Ni)))},Ri={class:"van-doc-markdown-body"},Li=[_n('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

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

线条粗细

通过stroke-width可以设置进度条的粗细。

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

置灰

设置inactive属性后进度条将置灰。

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

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],Bi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ri,Li)))},Mi={class:"van-doc-markdown-body"},$i=[_n('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

通过value绑定值当前选中项的 name 。

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

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

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

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

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

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],Ui={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Mi,$i)))},Vi={class:"van-doc-markdown-body"},Hi=[_n('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

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

自定义图标

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

自定义样式

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

半星

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

自定义数量

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

禁用状态

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

只读状态

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

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],Wi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Vi,Hi)))},Gi={class:"van-doc-markdown-body"},Ki=[_n('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

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

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Ji={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Gi,Ki)))},Yi={class:"van-doc-markdown-body"},Xi=[_n('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Qi={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Yi,Xi)))},Zi={class:"van-doc-markdown-body"},sh=[_n('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],ah={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Zi,sh)))},th={class:"van-doc-markdown-body"},nh=[_n('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],eh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",th,nh)))},lh={class:"van-doc-markdown-body"},ch=[_n('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],ph={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",lh,ch)))},oh={class:"van-doc-markdown-body"},dh=[_n('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],rh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",oh,dh)))},ih={class:"van-doc-markdown-body"},hh=[_n('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],uh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",ih,hh)))},gh={class:"van-doc-markdown-body"},jh=[_n('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],mh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",gh,jh)))},vh={class:"van-doc-markdown-body"},bh=[_n('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],fh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",vh,bh)))},yh={class:"van-doc-markdown-body"},qh=[_n('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],xh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",yh,qh)))},wh={class:"van-doc-markdown-body"},_h=[_n('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],kh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",wh,_h)))},Sh={class:"van-doc-markdown-body"},zh=[_n('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],Ch={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Sh,zh)))},Ph={class:"van-doc-markdown-body"},Oh=[_n('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],Eh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ph,Oh)))},Ih={class:"van-doc-markdown-body"},Dh=[_n('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],Ah={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Ih,Dh)))},Th={class:"van-doc-markdown-body"},Nh=[_n('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],Fh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Th,Nh)))},Rh={class:"van-doc-markdown-body"},Lh=[_n('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],Bh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Rh,Lh)))},Mh={class:"van-doc-markdown-body"},$h=[_n('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],Uh={setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Mh,$h)))},Vh={class:"van-doc-markdown-body"},Hh=[_n('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',18)],Wh={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/vite/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:s=>`/zh-CN${{"/common":"/style","/transition":"/style"}[s]||s}`,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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}},Gh={Changelog:Pd,CustomStyle:Dd,Home:Fd,Quickstart:Md,Theme:Hd,ActionSheet:Jd,Area:Zd,Button:nr,Calendar:pr,Card:rr,Cell:ur,Checkbox:mr,Circle:fr,Col:xr,Collapse:kr,Common:Cr,ConfigProvider:Er,CountDown:Ar,DatetimePicker:Fr,Dialog:Br,Divider:Ur,DropdownMenu:Wr,Empty:Jr,Field:Qr,GoodsAction:ai,Grid:ei,Icon:pi,Image:ri,IndexBar:ui,Loading:mi,NavBar:fi,NoticeBar:xi,Notify:ki,Overlay:Ci,Panel:Ei,Picker:Ai,Popup:Fi,Progress:Bi,Radio:Ui,Rate:Wi,Search:Ji,ShareSheet:Qi,Sidebar:ah,Skeleton:eh,Slider:ph,Stepper:rh,Steps:uh,Sticky:mh,SubmitBar:fh,SwipeCell:xh,Switch:kh,Tab:Ch,Tabbar:Eh,Tag:Ah,Toast:Fh,Transition:Bh,TreeSelect:Uh,Uploader:{setup:(s,{expose:a})=>(a({frontmatter:{}}),(s,a)=>(on(),un("div",Vh,Hh)))}};const Kh={class:"van-doc-header"},Jh={class:"van-doc-row"},Yh={class:"van-doc-header__top"},Xh={class:"van-doc-header__logo"},Qh=["src"],Zh={class:"van-doc-header__top-nav"},su=["href"],au=["src"],tu={key:1},nu={key:0,ref:"version",class:"van-doc-header__top-nav-item"},eu={key:0,class:"van-doc-header__version-pop"},lu=["onClick"],cu={key:1,class:"van-doc-header__top-nav-item"},pu=["href"];const ou={name:"VanDocContainer",props:{hasSimulator:Boolean}};const du=["src"];const ru={name:"VanDoc",components:{DocNav:il,DocHeader:ll({name:"VanDocHeader",components:{SearchInput:kd},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:"1.9.0",showVersionPop:!1}),computed:{langLink(){return`#${this.$route.path.replace(this.lang,this.anotherLang.lang)}`},langLabel(){return this.anotherLang.label},anotherLang(){const s=this.langConfigs.filter((s=>s.lang!==this.lang));return s.length?s[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const s=!this.showVersionPop,a=s?"add":"remove";document.body[`${a}EventListener`]("click",this.checkHideVersionPop),this.showVersionPop=s},checkHideVersionPop(s){this.$refs.version.contains(s.target)||(this.showVersionPop=!1)},onSwitchLang(s){this.$router.push(this.$route.path.replace(s.from,s.to))},onSwitchVersion(s){s.link&&(location.href=s.link)}}},[["render",function(s,a,t,n,e,l){const c=Qt("search-input");return on(),un("div",Kh,[yn("div",Jh,[yn("div",Yh,[yn("a",Xh,[yn("img",{src:t.config.logo},null,8,Qh),yn("span",null,m(t.config.title),1)]),yn("ul",Zh,[(on(!0),un(tn,null,Pn(t.config.links,((s,a)=>(on(),un("li",{key:a,class:"van-doc-header__top-nav-item"},[yn("a",{class:"van-doc-header__link",target:"_blank",href:s.url},[s.logo?(on(),un("img",{key:0,src:s.logo},null,8,au)):s.text?(on(),un("span",tu,m(s.text),1)):kn("v-if",!0)],8,su)])))),128)),t.versions?(on(),un("li",nu,[yn("span",{class:"van-doc-header__cube van-doc-header__version",onClick:a[0]||(a[0]=(...s)=>l.toggleVersionPop&&l.toggleVersionPop(...s))},[wn(m(e.packageVersion)+" ",1),qn($e,{name:"van-doc-dropdown"},{default:Aa((()=>[e.showVersionPop?(on(),un("div",eu,[(on(!0),un(tn,null,Pn(t.versions,((s,a)=>(on(),un("div",{key:a,class:"van-doc-header__version-pop-item",onClick:a=>l.onSwitchVersion(s)},m(s.label),9,lu)))),128))])):kn("v-if",!0)])),_:1})])],512)):kn("v-if",!0),l.langLabel&&l.langLink?(on(),un("li",cu,[yn("a",{class:"van-doc-header__cube",href:l.langLink},m(l.langLabel),9,pu)])):kn("v-if",!0),l.searchConfig?(on(),gn(c,{key:2,lang:t.lang,"search-config":l.searchConfig},null,8,["lang","search-config"])):kn("v-if",!0)])])])])}]]),DocContent:ll({name:"VanDocContent",computed:{currentPage(){const{path:s}=this.$route;return s?s.split("/").slice(-1)[0]:this.$route.name}},mounted(){[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((s=>{s.addEventListener("click",this.scrollToAnchor)}))},methods:{scrollToAnchor(s){s.target.id&&this.$router.push({name:this.$route.name,hash:"#"+s.target.id})}}},[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j(["van-doc-content",`van-doc-content--${l.currentPage}`])},[On(s.$slots,"default")],2)}]]),DocContainer:ll(ou,[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":t.hasSimulator}])},[On(s.$slots,"default")],2)}]]),DocSimulator:ll({name:"VanDocSimulator",props:{src:String},data:()=>({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}))}},[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j(["van-doc-simulator",{"van-doc-simulator-fixed":l.isFixed}])},[yn("iframe",{ref:"iframe",src:t.src,style:i(l.simulatorStyle),frameborder:"0"},null,12,du)],2)}]])},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:s}=this.config,a=s.reduce(((s,a)=>s.concat(a.items)),[]),t=this.$route.path.split("/").pop();let n;for(let e=0,l=a.length;e{switch(s.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next")}}))}}},iu={class:"van-doc"};let hu="zh-CN";function uu(){return hu}function gu(s){const a=localStorage.getItem("vant-cli-lang");hu=a||(navigator.language&&-1!==navigator.language.indexOf("zh-")?"zh-CN":s||"en-US")}const ju={class:"app"};var mu=ll({components:{VanDoc:ll(ru,[["render",function(s,a,t,n,e,l){const c=Qt("doc-header"),p=Qt("doc-nav"),o=Qt("doc-content"),d=Qt("doc-container"),r=Qt("doc-simulator");return on(),un("div",iu,[qn(c,{lang:t.lang,config:t.config,versions:t.versions,"lang-configs":t.langConfigs,onSwitchVersion:a[0]||(a[0]=a=>s.$emit("switch-version",a))},null,8,["lang","config","versions","lang-configs"]),qn(p,{lang:t.lang,"nav-config":t.config.nav},null,8,["lang","nav-config"]),qn(d,{"has-simulator":t.hasSimulator},{default:Aa((()=>[qn(o,null,{default:Aa((()=>[On(s.$slots,"default")])),_:3})])),_:3},8,["has-simulator"]),t.hasSimulator?(on(),gn(r,{key:0,src:t.simulator},null,8,["src"])):kn("v-if",!0)])}]])},data:()=>({hasSimulator:!0}),computed:{simulator(){var s,a;if(null==(s=Wh.site.simulator)?void 0:s.url)return null==(a=Wh.site.simulator)?void 0:a.url;return`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:s}=this.$route.meta;return s||""},langConfigs(){const{locales:s={}}=Wh.site;return Object.keys(s).map((a=>({lang:a,label:s[a].langLabel||""})))},config(){const{locales:s}=Wh.site;return s?s[this.lang]:Wh.site},versions:()=>Wh.site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(s){var a;hu=a=s,localStorage.setItem("vant-cli-lang",a),this.setTitleAndToogleSimulator()},config:{handler(s){s&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){this.$route.hash&&this.$nextTick((()=>{const s=document.querySelector(this.$route.hash);s&&s.scrollIntoView()}))},methods:{setTitleAndToogleSimulator(){let{title:s}=this.config;const a=this.config.nav.reduce(((s,a)=>[...s,...a.items]),[]).find((s=>s.path===this.$route.meta.name));a&&a.title?s=a.title+" - "+s:this.config.description&&(s+=` - ${this.config.description}`),document.title=s,this.hasSimulator=!(Wh.site.hideSimulator||this.config.hideSimulator||a&&a.hideSimulator)}}},[["render",function(s,a,t,n,e,l){const c=Qt("router-view"),p=Qt("van-doc");return on(),un("div",ju,[l.config?(on(),gn(p,{key:0,lang:l.lang,config:l.config,versions:l.versions,simulator:l.simulator,"has-simulator":e.hasSimulator,"lang-configs":l.langConfigs},{default:Aa((()=>[qn(c)])),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):kn("v-if",!0)])}]]);const vu={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape:unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){!function(s){const a=document.createElement("textarea");a.value=s,a.setAttribute("readonly",""),a.style.position="absolute",a.style.left="-9999px",document.body.appendChild(a);const t=document.getSelection();if(!t)return;const n=t.rangeCount>0&&t.getRangeAt(0);a.select(),document.execCommand("copy"),document.body.removeChild(a),n&&(t.removeAllRanges(),t.addRange(n))}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((()=>{this.copyStatus="ready"}),2e3)}}},bu={class:"demo-playground--code"},fu={class:"demo-playground--code--actions"},yu=(s=>(Ia="data-v-9efa7fdc",s=s(),Ia=null,s))((()=>yn("span",null,null,-1))),qu=["data-status"],xu=["innerHTML"];var wu=ll(vu,[["render",function(s,a,t,n,e,l){return on(),un("div",{class:j({"demo-playground":!t.inline,transform:t.transform})},[t.inline?On(s.$slots,"default",{key:0},void 0,!0):(on(),un(tn,{key:1},[yn("div",{class:j(["demo-playground--previewer",{compact:t.compact}])},[On(s.$slots,"default",{},void 0,!0)],2),yn("div",bu,[yn("div",fu,[yu,yn("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":e.copyStatus,onClick:a[0]||(a[0]=(...s)=>l.copySourceCode&&l.copySourceCode(...s))},null,8,qu),yn("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:a[1]||(a[1]=(...s)=>l.toogleSource&&l.toogleSource(...s))})]),$t(yn("div",{innerHTML:l.unescape(t.codeSnippet),class:"demo-playground--code--content"},null,8,xu),[[sl,e.showSource]])])],64))],2)}],["__scopeId","data-v-9efa7fdc"]]); -/*! - * vue-router v4.0.11 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */const _u="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,ku=s=>_u?Symbol(s):"_vr_"+s,Su=ku("rvlm"),zu=ku("rvd"),Cu=ku("r"),Pu=ku("rl"),Ou=ku("rvl"),Eu="undefined"!=typeof window;const Iu=Object.assign;function Du(s,a){const t={};for(const n in a){const e=a[n];t[n]=Array.isArray(e)?e.map(s):s(e)}return t}const Au=()=>{},Tu=/\/$/;function Nu(s,a,t="/"){let n,e={},l="",c="";const p=a.indexOf("?"),o=a.indexOf("#",p>-1?p:0);return p>-1&&(n=a.slice(0,p),l=a.slice(p+1,o>-1?o:a.length),e=s(l)),o>-1&&(n=n||a.slice(0,o),c=a.slice(o,a.length)),n=function(s,a){if(s.startsWith("/"))return s;if(!s)return a;const t=a.split("/"),n=s.split("/");let e,l,c=t.length-1;for(e=0;es===a[t])):1===s.length&&s[0]===a}var $u,Uu,Vu,Hu;function Wu(s){if(!s)if(Eu){const a=document.querySelector("base");s=(s=a&&a.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else s="/";return"/"!==s[0]&&"#"!==s[0]&&(s="/"+s),s.replace(Tu,"")}(Uu=$u||($u={})).pop="pop",Uu.push="push",(Hu=Vu||(Vu={})).back="back",Hu.forward="forward",Hu.unknown="";const Gu=/^[^#]+#/;function Ku(s,a){return s.replace(Gu,"#")+a}const Ju=()=>({left:window.pageXOffset,top:window.pageYOffset});function Yu(s){let a;if("el"in s){const t=s.el,n="string"==typeof t&&t.startsWith("#"),e="string"==typeof t?n?document.getElementById(t.slice(1)):document.querySelector(t):t;if(!e)return;a=function(s,a){const t=document.documentElement.getBoundingClientRect(),n=s.getBoundingClientRect();return{behavior:a.behavior,left:n.left-t.left-(a.left||0),top:n.top-t.top-(a.top||0)}}(e,s)}else a=s;"scrollBehavior"in document.documentElement.style?window.scrollTo(a):window.scrollTo(null!=a.left?a.left:window.pageXOffset,null!=a.top?a.top:window.pageYOffset)}function Xu(s,a){return(history.state?history.state.position-a:-1)+s}const Qu=new Map;function Zu(s,a){const{pathname:t,search:n,hash:e}=a,l=s.indexOf("#");if(l>-1){let a=e.includes(s.slice(l))?s.slice(l).length:1,t=e.slice(a);return"/"!==t[0]&&(t="/"+t),Fu(t,"")}return Fu(t,s)+n+e}function sg(s,a,t,n=!1,e=!1){return{back:s,current:a,forward:t,replaced:n,position:window.history.length,scroll:e?Ju():null}}function ag(s){const{history:a,location:t}=window,n={value:Zu(s,t)},e={value:a.state};function l(n,l,c){const p=s.indexOf("#"),o=p>-1?(t.host&&document.querySelector("base")?s:s.slice(p))+n:location.protocol+"//"+location.host+s+n;try{a[c?"replaceState":"pushState"](l,"",o),e.value=l}catch(d){console.error(d),t[c?"replace":"assign"](o)}}return e.value||l(n.value,{back:null,current:n.value,forward:null,position:a.length-1,replaced:!0,scroll:null},!0),{location:n,state:e,push:function(s,t){const c=Iu({},e.value,a.state,{forward:s,scroll:Ju()});l(c.current,c,!0),l(s,Iu({},sg(n.value,s,null),{position:c.position+1},t),!1),n.value=s},replace:function(s,t){l(s,Iu({},a.state,sg(e.value.back,s,e.value.forward,!0),t,{position:e.value.position}),!0),n.value=s}}}function tg(s){const a=ag(s=Wu(s)),t=function(s,a,t,n){let e=[],l=[],c=null;const p=({state:l})=>{const p=Zu(s,location),o=t.value,d=a.value;let r=0;if(l){if(t.value=p,a.value=l,c&&c===o)return void(c=null);r=d?l.position-d.position:0}else n(p);e.forEach((s=>{s(t.value,o,{delta:r,type:$u.pop,direction:r?r>0?Vu.forward:Vu.back:Vu.unknown})}))};function o(){const{history:s}=window;s.state&&s.replaceState(Iu({},s.state,{scroll:Ju()}),"")}return window.addEventListener("popstate",p),window.addEventListener("beforeunload",o),{pauseListeners:function(){c=t.value},listen:function(s){e.push(s);const a=()=>{const a=e.indexOf(s);a>-1&&e.splice(a,1)};return l.push(a),a},destroy:function(){for(const s of l)s();l=[],window.removeEventListener("popstate",p),window.removeEventListener("beforeunload",o)}}}(s,a.state,a.location,a.replace);const n=Iu({location:"",base:s,go:function(s,a=!0){a||t.pauseListeners(),history.go(s)},createHref:Ku.bind(null,s)},a,t);return Object.defineProperty(n,"location",{enumerable:!0,get:()=>a.location.value}),Object.defineProperty(n,"state",{enumerable:!0,get:()=>a.state.value}),n}function ng(s){return(s=location.host?s||location.pathname+location.search:"").includes("#")||(s+="#"),tg(s)}function eg(s){return"string"==typeof s||"symbol"==typeof s}const lg={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},cg=ku("nf");var pg,og;function dg(s,a){return Iu(new Error,{type:s,[cg]:!0},a)}function rg(s,a){return s instanceof Error&&cg in s&&(null==a||!!(s.type&a))}(og=pg||(pg={}))[og.aborted=4]="aborted",og[og.cancelled=8]="cancelled",og[og.duplicated=16]="duplicated";const ig={sensitive:!1,strict:!1,start:!0,end:!0},hg=/[.+*?^${}()[\]/\\]/g;function ug(s,a){let t=0;for(;ta.length?1===a.length&&80===a[0]?1:-1:0}function gg(s,a){let t=0;const n=s.score,e=a.score;for(;t1&&("*"===p||"+"===p)&&a(`A repeatable param (${d}) must be alone in its segment. eg: '/:ids+.`),l.push({type:1,value:d,regexp:r,repeatable:"*"===p||"+"===p,optional:"*"===p||"?"===p})):a("Invalid state to consume buffer"),d="")}function h(){d+=p}for(;o{l(h)}:Au}function l(s){if(eg(s)){const a=n.get(s);a&&(n.delete(s),t.splice(t.indexOf(a),1),a.children.forEach(l),a.alias.forEach(l))}else{const a=t.indexOf(s);a>-1&&(t.splice(a,1),s.record.name&&n.delete(s.record.name),s.children.forEach(l),s.alias.forEach(l))}}function c(s){let a=0;for(;a=0;)a++;t.splice(a,0,s),s.record.name&&!yg(s)&&n.set(s.record.name,s)}return a=xg({strict:!1,end:!0,sensitive:!1},a),s.forEach((s=>e(s))),{addRoute:e,resolve:function(s,a){let e,l,c,p={};if("name"in s&&s.name){if(e=n.get(s.name),!e)throw dg(1,{location:s});c=e.record.name,p=Iu(function(s,a){const t={};for(const n of a)n in s&&(t[n]=s[n]);return t}(a.params,e.keys.filter((s=>!s.optional)).map((s=>s.name))),s.params),l=e.stringify(p)}else if("path"in s)l=s.path,e=t.find((s=>s.re.test(l))),e&&(p=e.parse(l),c=e.record.name);else{if(e=a.name?n.get(a.name):t.find((s=>s.re.test(a.path))),!e)throw dg(1,{location:s,currentLocation:a});c=e.record.name,p=Iu({},a.params,s.params),l=e.stringify(p)}const o=[];let d=e;for(;d;)o.unshift(d.record),d=d.parent;return{name:c,path:l,params:p,matched:o,meta:qg(o)}},removeRoute:l,getRoutes:function(){return t},getRecordMatcher:function(s){return n.get(s)}}}function fg(s){const a={},t=s.props||!1;if("component"in s)a.default=t;else for(const n in s.components)a[n]="boolean"==typeof t?t:t[n];return a}function yg(s){for(;s;){if(s.record.aliasOf)return!0;s=s.parent}return!1}function qg(s){return s.reduce(((s,a)=>Iu(s,a.meta)),{})}function xg(s,a){const t={};for(const n in s)t[n]=n in a?a[n]:s[n];return t}const wg=/#/g,_g=/&/g,kg=/\//g,Sg=/=/g,zg=/\?/g,Cg=/\+/g,Pg=/%5B/g,Og=/%5D/g,Eg=/%5E/g,Ig=/%60/g,Dg=/%7B/g,Ag=/%7C/g,Tg=/%7D/g,Ng=/%20/g;function Fg(s){return encodeURI(""+s).replace(Ag,"|").replace(Pg,"[").replace(Og,"]")}function Rg(s){return Fg(s).replace(Cg,"%2B").replace(Ng,"+").replace(wg,"%23").replace(_g,"%26").replace(Ig,"`").replace(Dg,"{").replace(Tg,"}").replace(Eg,"^")}function Lg(s){return null==s?"":function(s){return Fg(s).replace(wg,"%23").replace(zg,"%3F")}(s).replace(kg,"%2F")}function Bg(s){try{return decodeURIComponent(""+s)}catch(a){}return""+s}function Mg(s){const a={};if(""===s||"?"===s)return a;const t=("?"===s[0]?s.slice(1):s).split("&");for(let n=0;ns&&Rg(s))):[n&&Rg(n)]).forEach((s=>{void 0!==s&&(a+=(a.length?"&":"")+t,null!=s&&(a+="="+s))}))}return a}function Ug(s){const a={};for(const t in s){const n=s[t];void 0!==n&&(a[t]=Array.isArray(n)?n.map((s=>null==s?null:""+s)):null==n?n:""+n)}return a}function Vg(){let s=[];return{add:function(a){return s.push(a),()=>{const t=s.indexOf(a);t>-1&&s.splice(t,1)}},list:()=>s,reset:function(){s=[]}}}function Hg(s,a,t,n,e){const l=n&&(n.enterCallbacks[e]=n.enterCallbacks[e]||[]);return()=>new Promise(((c,p)=>{const o=s=>{var o;!1===s?p(dg(4,{from:t,to:a})):s instanceof Error?p(s):"string"==typeof(o=s)||o&&"object"==typeof o?p(dg(2,{from:a,to:s})):(l&&n.enterCallbacks[e]===l&&"function"==typeof s&&l.push(s),c())},d=s.call(n&&n.instances[e],a,t,o);let r=Promise.resolve(d);s.length<3&&(r=r.then(o)),r.catch((s=>p(s)))}))}function Wg(s,a,t,n){const e=[];for(const c of s)for(const s in c.components){let p=c.components[s];if("beforeRouteEnter"===a||c.instances[s])if("object"==typeof(l=p)||"displayName"in l||"props"in l||"__vccOpts"in l){const l=(p.__vccOpts||p)[a];l&&e.push(Hg(l,t,n,c,s))}else{let l=p();e.push((()=>l.then((e=>{if(!e)return Promise.reject(new Error(`Couldn't resolve component "${s}" at "${c.path}"`));const l=(p=e).__esModule||_u&&"Module"===p[Symbol.toStringTag]?e.default:e;var p;c.components[s]=l;const o=(l.__vccOpts||l)[a];return o&&Hg(o,t,n,c,s)()}))))}}var l;return e}function Gg(s){const a=Ba(Cu),t=Ba(Pu),n=za((()=>a.resolve(wa(s.to)))),e=za((()=>{const{matched:s}=n.value,{length:a}=s,e=s[a-1],l=t.matched;if(!e||!l.length)return-1;const c=l.findIndex(Ru.bind(null,e));if(c>-1)return c;const p=Jg(s[a-2]);return a>1&&Jg(e)===p&&l[l.length-1].path!==p?l.findIndex(Ru.bind(null,s[a-2])):c})),l=za((()=>e.value>-1&&function(s,a){for(const t in a){const n=a[t],e=s[t];if("string"==typeof n){if(n!==e)return!1}else if(!Array.isArray(e)||e.length!==n.length||n.some(((s,a)=>s!==e[a])))return!1}return!0}(t.params,n.value.params))),c=za((()=>e.value>-1&&e.value===t.matched.length-1&&Lu(t.params,n.value.params)));return{route:n,href:za((()=>n.value.href)),isActive:l,isExactActive:c,navigate:function(t={}){return function(s){if(s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)return;if(s.defaultPrevented)return;if(void 0!==s.button&&0!==s.button)return;if(s.currentTarget&&s.currentTarget.getAttribute){const a=s.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(a))return}s.preventDefault&&s.preventDefault();return!0}(t)?a[wa(s.replace)?"replace":"push"](wa(s.to)).catch(Au):Promise.resolve()}}}const Kg=Ja({name:"RouterLink",props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:Gg,setup(s,{slots:a}){const t=oa(Gg(s)),{options:n}=Ba(Cu),e=za((()=>({[Yg(s.activeClass,n.linkActiveClass,"router-link-active")]:t.isActive,[Yg(s.exactActiveClass,n.linkExactActiveClass,"router-link-exact-active")]:t.isExactActive})));return()=>{const n=a.default&&a.default(t);return s.custom?n:we("a",{"aria-current":t.isExactActive?s.ariaCurrentValue:null,href:t.href,onClick:t.navigate,class:e.value},n)}}});function Jg(s){return s?s.aliasOf?s.aliasOf.path:s.path:""}const Yg=(s,a,t)=>null!=s?s:null!=a?a:t;function Xg(s,a){if(!s)return null;const t=s(a);return 1===t.length?t[0]:t}const Qg=Ja({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},setup(s,{attrs:a,slots:t}){const n=Ba(Ou),e=za((()=>s.route||n.value)),l=Ba(zu,0),c=za((()=>e.value.matched[l]));La(zu,l+1),La(Su,c),La(Ou,e);const p=qa(o,!1);var o;return be((()=>[p.value,c.value,s.name]),(([s,a,t],[n,e,l])=>{a&&(a.instances[t]=s,e&&e!==a&&s&&s===n&&(a.leaveGuards.size||(a.leaveGuards=e.leaveGuards),a.updateGuards.size||(a.updateGuards=e.updateGuards))),!s||!a||e&&Ru(a,e)&&n||(a.enterCallbacks[t]||[]).forEach((a=>a(s)))}),{flush:"post"}),()=>{const n=e.value,l=c.value,o=l&&l.components[s.name],d=s.name;if(!o)return Xg(t.default,{Component:o,route:n});const r=l.props[s.name],i=r?!0===r?n.params:"function"==typeof r?r(n):r:null,h=we(o,Iu({},i,a,{onVnodeUnmounted:s=>{s.component.isUnmounted&&(l.instances[d]=null)},ref:p}));return Xg(t.default,{Component:h,route:n})||h}}});function Zg(s){const a=bg(s.routes,s),t=s.parseQuery||Mg,n=s.stringifyQuery||$g,e=s.history,l=Vg(),c=Vg(),p=Vg(),o=qa(lg,!0);let d=lg;Eu&&s.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const r=Du.bind(null,(s=>""+s)),i=Du.bind(null,Lg),h=Du.bind(null,Bg);function u(s,l){if(l=Iu({},l||o.value),"string"==typeof s){const n=Nu(t,s,l.path),c=a.resolve({path:n.path},l),p=e.createHref(n.fullPath);return Iu(n,c,{params:h(c.params),hash:Bg(n.hash),redirectedFrom:void 0,href:p})}let c;if("path"in s)c=Iu({},s,{path:Nu(t,s.path,l.path).path});else{const a=Iu({},s.params);for(const s in a)null==a[s]&&delete a[s];c=Iu({},s,{params:i(s.params)}),l.params=i(l.params)}const p=a.resolve(c,l),d=s.hash||"";p.params=r(h(p.params));const u=function(s,a){const t=a.query?s(a.query):"";return a.path+(t&&"?")+t+(a.hash||"")}(n,Iu({},s,{hash:(g=d,Fg(g).replace(Dg,"{").replace(Tg,"}").replace(Eg,"^")),path:p.path}));var g;const j=e.createHref(u);return Iu({fullPath:u,hash:d,query:n===$g?Ug(s.query):s.query||{}},p,{redirectedFrom:void 0,href:j})}function g(s){return"string"==typeof s?Nu(t,s,o.value.path):Iu({},s)}function j(s,a){if(d!==s)return dg(8,{from:a,to:s})}function m(s){return b(s)}function v(s){const a=s.matched[s.matched.length-1];if(a&&a.redirect){const{redirect:t}=a;let n="function"==typeof t?t(s):t;return"string"==typeof n&&(n=n.includes("?")||n.includes("#")?n=g(n):{path:n},n.params={}),Iu({query:s.query,hash:s.hash,params:s.params},n)}}function b(s,a){const t=d=u(s),e=o.value,l=s.state,c=s.force,p=!0===s.replace,r=v(t);if(r)return b(Iu(g(r),{state:l,force:c,replace:p}),a||t);const i=t;let h;return i.redirectedFrom=a,!c&&function(s,a,t){const n=a.matched.length-1,e=t.matched.length-1;return n>-1&&n===e&&Ru(a.matched[n],t.matched[e])&&Lu(a.params,t.params)&&s(a.query)===s(t.query)&&a.hash===t.hash}(n,e,t)&&(h=dg(16,{to:i,from:e}),O(e,e,!0,!1)),(h?Promise.resolve(h):y(i,e)).catch((s=>rg(s)?s:C(s,i,e))).then((s=>{if(s){if(rg(s,2))return b(Iu(g(s.to),{state:l,force:c,replace:p}),a||i)}else s=x(i,e,!0,p,l);return q(i,e,s),s}))}function f(s,a){const t=j(s,a);return t?Promise.reject(t):Promise.resolve()}function y(s,a){let t;const[n,e,p]=function(s,a){const t=[],n=[],e=[],l=Math.max(a.matched.length,s.matched.length);for(let c=0;cRu(s,l)))?n.push(l):t.push(l));const p=s.matched[c];p&&(a.matched.find((s=>Ru(s,p)))||e.push(p))}return[t,n,e]}(s,a);t=Wg(n.reverse(),"beforeRouteLeave",s,a);for(const l of n)l.leaveGuards.forEach((n=>{t.push(Hg(n,s,a))}));const o=f.bind(null,s,a);return t.push(o),sj(t).then((()=>{t=[];for(const n of l.list())t.push(Hg(n,s,a));return t.push(o),sj(t)})).then((()=>{t=Wg(e,"beforeRouteUpdate",s,a);for(const n of e)n.updateGuards.forEach((n=>{t.push(Hg(n,s,a))}));return t.push(o),sj(t)})).then((()=>{t=[];for(const n of s.matched)if(n.beforeEnter&&!a.matched.includes(n))if(Array.isArray(n.beforeEnter))for(const e of n.beforeEnter)t.push(Hg(e,s,a));else t.push(Hg(n.beforeEnter,s,a));return t.push(o),sj(t)})).then((()=>(s.matched.forEach((s=>s.enterCallbacks={})),t=Wg(p,"beforeRouteEnter",s,a),t.push(o),sj(t)))).then((()=>{t=[];for(const n of c.list())t.push(Hg(n,s,a));return t.push(o),sj(t)})).catch((s=>rg(s,8)?s:Promise.reject(s)))}function q(s,a,t){for(const n of p.list())n(s,a,t)}function x(s,a,t,n,l){const c=j(s,a);if(c)return c;const p=a===lg,d=Eu?history.state:{};t&&(n||p?e.replace(s.fullPath,Iu({scroll:p&&d&&d.scroll},l)):e.push(s.fullPath,l)),o.value=s,O(s,a,t,p),P()}let w;function _(){w=e.listen(((s,a,t)=>{const n=u(s),l=v(n);if(l)return void b(Iu(l,{replace:!0}),n).catch(Au);d=n;const c=o.value;var p,r;Eu&&(p=Xu(c.fullPath,t.delta),r=Ju(),Qu.set(p,r)),y(n,c).catch((s=>rg(s,12)?s:rg(s,2)?(b(s.to,n).then((s=>{rg(s,20)&&!t.delta&&t.type===$u.pop&&e.go(-1,!1)})).catch(Au),Promise.reject()):(t.delta&&e.go(-t.delta,!1),C(s,n,c)))).then((s=>{(s=s||x(n,c,!1))&&(t.delta?e.go(-t.delta,!1):t.type===$u.pop&&rg(s,20)&&e.go(-1,!1)),q(n,c,s)})).catch(Au)}))}let k,S=Vg(),z=Vg();function C(s,a,t){P(s);const n=z.list();return n.length?n.forEach((n=>n(s,a,t))):console.error(s),Promise.reject(s)}function P(s){k||(k=!0,_(),S.list().forEach((([a,t])=>s?t(s):a())),S.reset())}function O(a,t,n,e){const{scrollBehavior:l}=s;if(!Eu||!l)return Promise.resolve();const c=!n&&function(s){const a=Qu.get(s);return Qu.delete(s),a}(Xu(a.fullPath,0))||(e||!n)&&history.state&&history.state.scroll||null;return de().then((()=>l(a,t,c))).then((s=>s&&Yu(s))).catch((s=>C(s,a,t)))}const E=s=>e.go(s);let I;const D=new Set;return{currentRoute:o,addRoute:function(s,t){let n,e;return eg(s)?(n=a.getRecordMatcher(s),e=t):e=s,a.addRoute(e,n)},removeRoute:function(s){const t=a.getRecordMatcher(s);t&&a.removeRoute(t)},hasRoute:function(s){return!!a.getRecordMatcher(s)},getRoutes:function(){return a.getRoutes().map((s=>s.record))},resolve:u,options:s,push:m,replace:function(s){return m(Iu(g(s),{replace:!0}))},go:E,back:()=>E(-1),forward:()=>E(1),beforeEach:l.add,beforeResolve:c.add,afterEach:p.add,onError:z.add,isReady:function(){return k&&o.value!==lg?Promise.resolve():new Promise(((s,a)=>{S.add([s,a])}))},install(s){s.component("RouterLink",Kg),s.component("RouterView",Qg),s.config.globalProperties.$router=this,Object.defineProperty(s.config.globalProperties,"$route",{enumerable:!0,get:()=>wa(o)}),Eu&&!I&&o.value===lg&&(I=!0,m(e.location).catch((s=>{})));const a={};for(const n in lg)a[n]=za((()=>o.value[n]));s.provide(Cu,this),s.provide(Pu,oa(a)),s.provide(Ou,o);const t=s.unmount;D.add(s),s.unmount=function(){D.delete(s),D.size<1&&(d=lg,w&&w(),o.value=lg,I=!1,k=!1),t()}}}}function sj(s){return s.reduce(((s,a)=>s.then((()=>a()))),Promise.resolve())}const aj=navigator.userAgent.toLowerCase(),tj=/ios|iphone|ipod|ipad|android/.test(aj);function nj(s,a="-"){return s.replace(/([a-z\d])([A-Z])/g,"$1"+a+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+a+"$2").toLowerCase()}let ej=[],lj=!1;function cj(){var s,a;const t=window.vueRouter,{path:n}=t.currentRoute.value;return(null==(s=Wh.site.simulator)?void 0:s.routeMapper)?null==(a=Wh.site.simulator)?void 0:a.routeMapper(n):n}function pj(){window.top.postMessage({type:"replacePath",value:cj()},"*")}function oj(){const s=document.querySelector("iframe");var a;s&&(a=()=>{s.contentWindow.postMessage({type:"replacePath",value:cj()},"*")},lj?a():ej.push(a))}function dj(s){window.addEventListener("message",(a=>{var t,n;if("replacePath"!==(null==(t=a.data)?void 0:t.type))return;const e=(null==(n=a.data)?void 0:n.value)||"";s.currentRoute.value.path!==e&&s.replace(e).catch((()=>{}))}))}window.top===window?window.addEventListener("message",(s=>{"iframeReady"===s.data.type&&(lj=!0,ej.forEach((s=>s())),ej=[])})):window.top.postMessage({type:"iframeReady"},"*"),tj&&location.replace("mobile.html"+location.hash);const{locales:rj,defaultLang:ij}=Wh.site;function hj(s){const a=s.path.split("/")[1];return-1!==Object.keys(rj).indexOf(a)?a:uu()}gu(ij);const uj=Zg({history:ng(),routes:function(){const s=[],a=Object.keys(Gh);return rj?s.push({name:"notFound",path:"/:path(.*)+",redirect:s=>({name:hj(s)})}):s.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),a.forEach((a=>{const{component:t,lang:n}=function(s){if(-1!==s.indexOf("_")){const a=s.split("_");return{component:`${nj(a.shift())}`,lang:a.join("-")}}return{component:`${nj(s)}`,lang:""}}(a);"home"===t&&function(a,t){s.push({name:t||"home",path:`/${t||""}`,component:a,meta:{lang:t}})}(Gh[a],n),n?s.push({name:`${n}/${t}`,path:`/${n}/${t}`,component:Gh[a],meta:{lang:n,name:t}}):s.push({name:`${t}`,path:`/${t}`,component:Gh[a],meta:{name:t}})})),s}(),scrollBehavior:s=>s.hash?{el:s.hash}:{top:0}});uj.afterEach((()=>{de(oj)})),!1!==(null==(s=Wh.site.simulator)?void 0:s.syncPathFromSimulator)&&dj(uj),window.vueRouter=uj,window.app=el(mu).use(uj).component(wu.name,wu),setTimeout((()=>{window.app.mount("#app")}),0);const gj={name:"DemoBlock",props:{card:Boolean,title:String}},jj={class:"van-doc-demo-block"},mj={key:0,class:"van-doc-demo-block__title"},vj={key:1,class:"van-doc-demo-block__card"};var bj=ll(gj,[["render",function(s,a,t,n,e,l){return on(),un("div",jj,[t.title?(on(),un("h2",mj,m(t.title),1)):kn("v-if",!0),t.card?(on(),un("div",vj,[On(s.$slots,"default")])):On(s.$slots,"default",{key:2})])}]]);var fj=ll({name:"DemoSection",computed:{demoName(){const{meta:s}=this.$route||{};return s&&s.name?`demo-${nj(s.name)}`:""}}},[["render",function(s,a,t,n,e,l){return on(),un("section",{class:j(["van-doc-demo-section",l.demoName])},[On(s.$slots,"default")],2)}]]);const yj={},qj={versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[]},xj={},wj={viewBox:"0 0 1024 1024"},_j=[yn("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),yn("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)];const kj={class:"demo-home-nav"},Sj={class:"demo-home-nav__title"},zj={class:"demo-home-nav__group"};const Cj={class:"demo-home"},Pj=["src"],Oj={key:0,class:"demo-home__desc"};var Ej=ll({components:{DemoHomeNav:ll({components:{ArrowRight:ll(xj,[["render",function(s,a){return on(),un("svg",wj,_j)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(s,a,t,n,e,l){const c=Qt("arrow-right"),p=Qt("router-link");return on(),un("div",kj,[yn("div",Sj,m(t.group.title),1),yn("div",zj,[(on(!0),un(tn,null,Pn(t.group.items,(s=>(on(),gn(p,{class:"demo-home-nav__block",key:s.path,to:`${l.base}/${s.path}`},{default:Aa((()=>[wn(m(s.title)+" ",1),qn(c,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:s}=this.$route.meta;return s},config(){const{locales:s}=qj;return s?s[this.lang]:qj},smallTitle(){return this.config.title.length>=8}}},[["render",function(s,a,t,n,e,l){const c=Qt("demo-home-nav");return on(),un("div",Cj,[yn("h1",{class:j(["demo-home__title",{"demo-home__title--small":l.smallTitle}])},[yn("img",{src:l.config.logo},null,8,Pj),yn("span",null,m(l.config.title),1)],2),l.config.description?(on(),un("h2",Oj,m(l.config.description),1)):kn("v-if",!0),(on(!0),un(tn,null,Pn(l.config.nav,((s,a)=>(on(),gn(c,{key:a,lang:l.lang,group:s},null,8,["lang","group"])))),128))])}]]);const{locales:Ij,defaultLang:Dj}=qj;function Aj(s){const a=s.path.split("/")[1];return-1!==Object.keys(Ij).indexOf(a)?a:uu()}gu(Dj);const Tj=Zg({history:ng(),routes:function(){const s=[],a=Object.keys(yj),t=Ij?Object.keys(Ij):[];return t.length?(s.push({name:"NotFound",path:"/:path(.*)+",redirect:s=>({name:Aj(s)})}),t.forEach((a=>{s.push({name:a,path:`/${a}`,component:Ej,meta:{lang:a}})}))):(s.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),s.push({name:"home",path:"/",component:Ej})),a.forEach((a=>{const n=nj(a);t.length?t.forEach((t=>{s.push({name:`${t}/${n}`,path:`/${t}/${n}`,component:yj[a],meta:{name:a,lang:t}})})):s.push({name:n,path:`/${n}`,component:yj[a],meta:{name:a}})})),s}(),scrollBehavior:(s,a,t)=>t||{x:0,y:0}});be(Tj.currentRoute,(()=>{Tj.currentRoute.value.redirectedFrom||de(pj)})),dj(Tj),window.vueRouter=Tj;const Nj={class:"demo-nav"},Fj={class:"demo-nav__title"},Rj=["d"];var Lj=ll({components:{DemoNav:ll({data:()=>({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:s}=this.$route.meta||{};return s?s.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},[["render",function(s,a,t,n,e,l){return $t((on(),un("div",Nj,[yn("div",Fj,m(l.title),1),(on(),un("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:a[0]||(a[0]=(...s)=>l.onBack&&l.onBack(...s))},[yn("path",{fill:"#969799","fill-rule":"evenodd",d:e.path},null,8,Rj)]))],512)),[[sl,l.title]])}]])}},[["render",function(s,a,t,n,e,l){const c=Qt("demo-nav"),p=Qt("demo-section"),o=Qt("router-view");return on(),un(tn,null,[qn(c),qn(o,null,{default:Aa((({Component:s})=>[(on(),gn(Qa,null,[qn(p,null,{default:Aa((()=>{return[(on(),gn((a=s,D(a)?sn("components",a,!1)||a:a||Zt)))];var a})),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var s,a="ontouchstart"in window;document.createTouch||(document.createTouch=function(s,a,n,e,l,c,p){return new t(a,n,{pageX:e,pageY:l,screenX:c,screenY:p,clientX:e-window.pageXOffset,clientY:l-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var s=e(),a=0;a{window.app.mount("#app")}),0); diff --git a/vite/assets/main.bec8a985.js b/vite/assets/main.bec8a985.js deleted file mode 100644 index 7710e374..00000000 --- a/vite/assets/main.bec8a985.js +++ /dev/null @@ -1,11876 +0,0 @@ -var __defProp = Object.defineProperty; -var __defProps = Object.defineProperties; -var __getOwnPropDescs = Object.getOwnPropertyDescriptors; -var __getOwnPropSymbols = Object.getOwnPropertySymbols; -var __hasOwnProp = Object.prototype.hasOwnProperty; -var __propIsEnum = Object.prototype.propertyIsEnumerable; -var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; -var __spreadValues = (a2, b2) => { - for (var prop in b2 || (b2 = {})) - if (__hasOwnProp.call(b2, prop)) - __defNormalProp(a2, prop, b2[prop]); - if (__getOwnPropSymbols) - for (var prop of __getOwnPropSymbols(b2)) { - if (__propIsEnum.call(b2, prop)) - __defNormalProp(a2, prop, b2[prop]); - } - return a2; -}; -var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2)); -var _a; -const p$2 = function polyfill() { - const relList = document.createElement("link").relList; - if (relList && relList.supports && relList.supports("modulepreload")) { - return; - } - for (const link of document.querySelectorAll('link[rel="modulepreload"]')) { - processPreload(link); - } - new MutationObserver((mutations) => { - for (const mutation of mutations) { - if (mutation.type !== "childList") { - continue; - } - for (const node of mutation.addedNodes) { - if (node.tagName === "LINK" && node.rel === "modulepreload") - processPreload(node); - } - } - }).observe(document, { childList: true, subtree: true }); - function getFetchOpts(script) { - const fetchOpts = {}; - if (script.integrity) - fetchOpts.integrity = script.integrity; - if (script.referrerpolicy) - fetchOpts.referrerPolicy = script.referrerpolicy; - if (script.crossorigin === "use-credentials") - fetchOpts.credentials = "include"; - else if (script.crossorigin === "anonymous") - fetchOpts.credentials = "omit"; - else - fetchOpts.credentials = "same-origin"; - return fetchOpts; - } - function processPreload(link) { - if (link.ep) - return; - link.ep = true; - const fetchOpts = getFetchOpts(link); - fetch(link.href, fetchOpts); - } -}; -p$2(); -function makeMap(str, expectsLowerCase) { - const map = Object.create(null); - const list = str.split(","); - for (let i2 = 0; i2 < list.length; i2++) { - map[list[i2]] = true; - } - return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val]; -} -const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`; -const isSpecialBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs); -function includeBooleanAttr(value) { - return !!value || value === ""; -} -function normalizeStyle(value) { - if (isArray(value)) { - const res = {}; - for (let i2 = 0; i2 < value.length; i2++) { - const item = value[i2]; - const normalized = isString(item) ? parseStringStyle(item) : normalizeStyle(item); - if (normalized) { - for (const key in normalized) { - res[key] = normalized[key]; - } - } - } - return res; - } else if (isString(value)) { - return value; - } else if (isObject(value)) { - return value; - } -} -const listDelimiterRE = /;(?![^(]*\))/g; -const propertyDelimiterRE = /:(.+)/; -function parseStringStyle(cssText) { - const ret = {}; - cssText.split(listDelimiterRE).forEach((item) => { - if (item) { - const tmp = item.split(propertyDelimiterRE); - tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim()); - } - }); - return ret; -} -function normalizeClass(value) { - let res = ""; - if (isString(value)) { - res = value; - } else if (isArray(value)) { - for (let i2 = 0; i2 < value.length; i2++) { - const normalized = normalizeClass(value[i2]); - if (normalized) { - res += normalized + " "; - } - } - } else if (isObject(value)) { - for (const name in value) { - if (value[name]) { - res += name + " "; - } - } - } - return res.trim(); -} -const toDisplayString = (val) => { - return val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val); -}; -const replacer = (_key, val) => { - if (val && val.__v_isRef) { - return replacer(_key, val.value); - } else if (isMap(val)) { - return { - [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => { - entries[`${key} =>`] = val2; - return entries; - }, {}) - }; - } else if (isSet(val)) { - return { - [`Set(${val.size})`]: [...val.values()] - }; - } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) { - return String(val); - } - return val; -}; -const EMPTY_OBJ = {}; -const EMPTY_ARR = []; -const NOOP = () => { -}; -const NO = () => false; -const onRE = /^on[^a-z]/; -const isOn = (key) => onRE.test(key); -const isModelListener = (key) => key.startsWith("onUpdate:"); -const extend = Object.assign; -const remove = (arr, el) => { - const i2 = arr.indexOf(el); - if (i2 > -1) { - arr.splice(i2, 1); - } -}; -const hasOwnProperty = Object.prototype.hasOwnProperty; -const hasOwn = (val, key) => hasOwnProperty.call(val, key); -const isArray = Array.isArray; -const isMap = (val) => toTypeString(val) === "[object Map]"; -const isSet = (val) => toTypeString(val) === "[object Set]"; -const isFunction = (val) => typeof val === "function"; -const isString = (val) => typeof val === "string"; -const isSymbol = (val) => typeof val === "symbol"; -const isObject = (val) => val !== null && typeof val === "object"; -const isPromise = (val) => { - return isObject(val) && isFunction(val.then) && isFunction(val.catch); -}; -const objectToString = Object.prototype.toString; -const toTypeString = (value) => objectToString.call(value); -const toRawType = (value) => { - return toTypeString(value).slice(8, -1); -}; -const isPlainObject = (val) => toTypeString(val) === "[object Object]"; -const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key; -const isReservedProp = /* @__PURE__ */ makeMap(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"); -const cacheStringFunction = (fn2) => { - const cache = Object.create(null); - return (str) => { - const hit = cache[str]; - return hit || (cache[str] = fn2(str)); - }; -}; -const camelizeRE = /-(\w)/g; -const camelize = cacheStringFunction((str) => { - return str.replace(camelizeRE, (_2, c2) => c2 ? c2.toUpperCase() : ""); -}); -const hyphenateRE = /\B([A-Z])/g; -const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase()); -const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1)); -const toHandlerKey = cacheStringFunction((str) => str ? `on${capitalize(str)}` : ``); -const hasChanged = (value, oldValue) => !Object.is(value, oldValue); -const invokeArrayFns = (fns, arg) => { - for (let i2 = 0; i2 < fns.length; i2++) { - fns[i2](arg); - } -}; -const def = (obj, key, value) => { - Object.defineProperty(obj, key, { - configurable: true, - enumerable: false, - value - }); -}; -const toNumber = (val) => { - const n2 = parseFloat(val); - return isNaN(n2) ? val : n2; -}; -let _globalThis; -const getGlobalThis = () => { - return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {}); -}; -let activeEffectScope; -const effectScopeStack = []; -class EffectScope { - constructor(detached = false) { - this.active = true; - this.effects = []; - this.cleanups = []; - if (!detached && activeEffectScope) { - this.parent = activeEffectScope; - this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1; - } - } - run(fn2) { - if (this.active) { - try { - this.on(); - return fn2(); - } finally { - this.off(); - } - } - } - on() { - if (this.active) { - effectScopeStack.push(this); - activeEffectScope = this; - } - } - off() { - if (this.active) { - effectScopeStack.pop(); - activeEffectScope = effectScopeStack[effectScopeStack.length - 1]; - } - } - stop(fromParent) { - if (this.active) { - this.effects.forEach((e2) => e2.stop()); - this.cleanups.forEach((cleanup) => cleanup()); - if (this.scopes) { - this.scopes.forEach((e2) => e2.stop(true)); - } - if (this.parent && !fromParent) { - const last = this.parent.scopes.pop(); - if (last && last !== this) { - this.parent.scopes[this.index] = last; - last.index = this.index; - } - } - this.active = false; - } - } -} -function recordEffectScope(effect, scope) { - scope = scope || activeEffectScope; - if (scope && scope.active) { - scope.effects.push(effect); - } -} -const createDep = (effects) => { - const dep = new Set(effects); - dep.w = 0; - dep.n = 0; - return dep; -}; -const wasTracked = (dep) => (dep.w & trackOpBit) > 0; -const newTracked = (dep) => (dep.n & trackOpBit) > 0; -const initDepMarkers = ({ deps }) => { - if (deps.length) { - for (let i2 = 0; i2 < deps.length; i2++) { - deps[i2].w |= trackOpBit; - } - } -}; -const finalizeDepMarkers = (effect) => { - const { deps } = effect; - if (deps.length) { - let ptr = 0; - for (let i2 = 0; i2 < deps.length; i2++) { - const dep = deps[i2]; - if (wasTracked(dep) && !newTracked(dep)) { - dep.delete(effect); - } else { - deps[ptr++] = dep; - } - dep.w &= ~trackOpBit; - dep.n &= ~trackOpBit; - } - deps.length = ptr; - } -}; -const targetMap = new WeakMap(); -let effectTrackDepth = 0; -let trackOpBit = 1; -const maxMarkerBits = 30; -const effectStack = []; -let activeEffect; -const ITERATE_KEY = Symbol(""); -const MAP_KEY_ITERATE_KEY = Symbol(""); -class ReactiveEffect { - constructor(fn2, scheduler = null, scope) { - this.fn = fn2; - this.scheduler = scheduler; - this.active = true; - this.deps = []; - recordEffectScope(this, scope); - } - run() { - if (!this.active) { - return this.fn(); - } - if (!effectStack.includes(this)) { - try { - effectStack.push(activeEffect = this); - enableTracking(); - trackOpBit = 1 << ++effectTrackDepth; - if (effectTrackDepth <= maxMarkerBits) { - initDepMarkers(this); - } else { - cleanupEffect(this); - } - return this.fn(); - } finally { - if (effectTrackDepth <= maxMarkerBits) { - finalizeDepMarkers(this); - } - trackOpBit = 1 << --effectTrackDepth; - resetTracking(); - effectStack.pop(); - const n2 = effectStack.length; - activeEffect = n2 > 0 ? effectStack[n2 - 1] : void 0; - } - } - } - stop() { - if (this.active) { - cleanupEffect(this); - if (this.onStop) { - this.onStop(); - } - this.active = false; - } - } -} -function cleanupEffect(effect) { - const { deps } = effect; - if (deps.length) { - for (let i2 = 0; i2 < deps.length; i2++) { - deps[i2].delete(effect); - } - deps.length = 0; - } -} -let shouldTrack = true; -const trackStack = []; -function pauseTracking() { - trackStack.push(shouldTrack); - shouldTrack = false; -} -function enableTracking() { - trackStack.push(shouldTrack); - shouldTrack = true; -} -function resetTracking() { - const last = trackStack.pop(); - shouldTrack = last === void 0 ? true : last; -} -function track(target, type, key) { - if (!isTracking()) { - return; - } - let depsMap = targetMap.get(target); - if (!depsMap) { - targetMap.set(target, depsMap = new Map()); - } - let dep = depsMap.get(key); - if (!dep) { - depsMap.set(key, dep = createDep()); - } - trackEffects(dep); -} -function isTracking() { - return shouldTrack && activeEffect !== void 0; -} -function trackEffects(dep, debuggerEventExtraInfo) { - let shouldTrack2 = false; - if (effectTrackDepth <= maxMarkerBits) { - if (!newTracked(dep)) { - dep.n |= trackOpBit; - shouldTrack2 = !wasTracked(dep); - } - } else { - shouldTrack2 = !dep.has(activeEffect); - } - if (shouldTrack2) { - dep.add(activeEffect); - activeEffect.deps.push(dep); - } -} -function trigger(target, type, key, newValue, oldValue, oldTarget) { - const depsMap = targetMap.get(target); - if (!depsMap) { - return; - } - let deps = []; - if (type === "clear") { - deps = [...depsMap.values()]; - } else if (key === "length" && isArray(target)) { - depsMap.forEach((dep, key2) => { - if (key2 === "length" || key2 >= newValue) { - deps.push(dep); - } - }); - } else { - if (key !== void 0) { - deps.push(depsMap.get(key)); - } - switch (type) { - case "add": - if (!isArray(target)) { - deps.push(depsMap.get(ITERATE_KEY)); - if (isMap(target)) { - deps.push(depsMap.get(MAP_KEY_ITERATE_KEY)); - } - } else if (isIntegerKey(key)) { - deps.push(depsMap.get("length")); - } - break; - case "delete": - if (!isArray(target)) { - deps.push(depsMap.get(ITERATE_KEY)); - if (isMap(target)) { - deps.push(depsMap.get(MAP_KEY_ITERATE_KEY)); - } - } - break; - case "set": - if (isMap(target)) { - deps.push(depsMap.get(ITERATE_KEY)); - } - break; - } - } - if (deps.length === 1) { - if (deps[0]) { - { - triggerEffects(deps[0]); - } - } - } else { - const effects = []; - for (const dep of deps) { - if (dep) { - effects.push(...dep); - } - } - { - triggerEffects(createDep(effects)); - } - } -} -function triggerEffects(dep, debuggerEventExtraInfo) { - for (const effect of isArray(dep) ? dep : [...dep]) { - if (effect !== activeEffect || effect.allowRecurse) { - if (effect.scheduler) { - effect.scheduler(); - } else { - effect.run(); - } - } - } -} -const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`); -const builtInSymbols = new Set(Object.getOwnPropertyNames(Symbol).map((key) => Symbol[key]).filter(isSymbol)); -const get = /* @__PURE__ */ createGetter(); -const shallowGet = /* @__PURE__ */ createGetter(false, true); -const readonlyGet = /* @__PURE__ */ createGetter(true); -const arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations(); -function createArrayInstrumentations() { - const instrumentations = {}; - ["includes", "indexOf", "lastIndexOf"].forEach((key) => { - instrumentations[key] = function(...args) { - const arr = toRaw(this); - for (let i2 = 0, l2 = this.length; i2 < l2; i2++) { - track(arr, "get", i2 + ""); - } - const res = arr[key](...args); - if (res === -1 || res === false) { - return arr[key](...args.map(toRaw)); - } else { - return res; - } - }; - }); - ["push", "pop", "shift", "unshift", "splice"].forEach((key) => { - instrumentations[key] = function(...args) { - pauseTracking(); - const res = toRaw(this)[key].apply(this, args); - resetTracking(); - return res; - }; - }); - return instrumentations; -} -function createGetter(isReadonly2 = false, shallow = false) { - return function get2(target, key, receiver) { - if (key === "__v_isReactive") { - return !isReadonly2; - } else if (key === "__v_isReadonly") { - return isReadonly2; - } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) { - return target; - } - const targetIsArray = isArray(target); - if (!isReadonly2 && targetIsArray && hasOwn(arrayInstrumentations, key)) { - return Reflect.get(arrayInstrumentations, key, receiver); - } - const res = Reflect.get(target, key, receiver); - if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) { - return res; - } - if (!isReadonly2) { - track(target, "get", key); - } - if (shallow) { - return res; - } - if (isRef(res)) { - const shouldUnwrap = !targetIsArray || !isIntegerKey(key); - return shouldUnwrap ? res.value : res; - } - if (isObject(res)) { - return isReadonly2 ? readonly(res) : reactive(res); - } - return res; - }; -} -const set = /* @__PURE__ */ createSetter(); -const shallowSet = /* @__PURE__ */ createSetter(true); -function createSetter(shallow = false) { - return function set2(target, key, value, receiver) { - let oldValue = target[key]; - if (!shallow) { - value = toRaw(value); - oldValue = toRaw(oldValue); - if (!isArray(target) && isRef(oldValue) && !isRef(value)) { - oldValue.value = value; - return true; - } - } - const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key); - const result = Reflect.set(target, key, value, receiver); - if (target === toRaw(receiver)) { - if (!hadKey) { - trigger(target, "add", key, value); - } else if (hasChanged(value, oldValue)) { - trigger(target, "set", key, value); - } - } - return result; - }; -} -function deleteProperty(target, key) { - const hadKey = hasOwn(target, key); - target[key]; - const result = Reflect.deleteProperty(target, key); - if (result && hadKey) { - trigger(target, "delete", key, void 0); - } - return result; -} -function has(target, key) { - const result = Reflect.has(target, key); - if (!isSymbol(key) || !builtInSymbols.has(key)) { - track(target, "has", key); - } - return result; -} -function ownKeys(target) { - track(target, "iterate", isArray(target) ? "length" : ITERATE_KEY); - return Reflect.ownKeys(target); -} -const mutableHandlers = { - get, - set, - deleteProperty, - has, - ownKeys -}; -const readonlyHandlers = { - get: readonlyGet, - set(target, key) { - return true; - }, - deleteProperty(target, key) { - return true; - } -}; -const shallowReactiveHandlers = /* @__PURE__ */ extend({}, mutableHandlers, { - get: shallowGet, - set: shallowSet -}); -const toShallow = (value) => value; -const getProto = (v2) => Reflect.getPrototypeOf(v2); -function get$1(target, key, isReadonly2 = false, isShallow = false) { - target = target["__v_raw"]; - const rawTarget = toRaw(target); - const rawKey = toRaw(key); - if (key !== rawKey) { - !isReadonly2 && track(rawTarget, "get", key); - } - !isReadonly2 && track(rawTarget, "get", rawKey); - const { has: has2 } = getProto(rawTarget); - const wrap = isShallow ? toShallow : isReadonly2 ? toReadonly : toReactive; - if (has2.call(rawTarget, key)) { - return wrap(target.get(key)); - } else if (has2.call(rawTarget, rawKey)) { - return wrap(target.get(rawKey)); - } else if (target !== rawTarget) { - target.get(key); - } -} -function has$1(key, isReadonly2 = false) { - const target = this["__v_raw"]; - const rawTarget = toRaw(target); - const rawKey = toRaw(key); - if (key !== rawKey) { - !isReadonly2 && track(rawTarget, "has", key); - } - !isReadonly2 && track(rawTarget, "has", rawKey); - return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey); -} -function size(target, isReadonly2 = false) { - target = target["__v_raw"]; - !isReadonly2 && track(toRaw(target), "iterate", ITERATE_KEY); - return Reflect.get(target, "size", target); -} -function add(value) { - value = toRaw(value); - const target = toRaw(this); - const proto = getProto(target); - const hadKey = proto.has.call(target, value); - if (!hadKey) { - target.add(value); - trigger(target, "add", value, value); - } - return this; -} -function set$1(key, value) { - value = toRaw(value); - const target = toRaw(this); - const { has: has2, get: get2 } = getProto(target); - let hadKey = has2.call(target, key); - if (!hadKey) { - key = toRaw(key); - hadKey = has2.call(target, key); - } - const oldValue = get2.call(target, key); - target.set(key, value); - if (!hadKey) { - trigger(target, "add", key, value); - } else if (hasChanged(value, oldValue)) { - trigger(target, "set", key, value); - } - return this; -} -function deleteEntry(key) { - const target = toRaw(this); - const { has: has2, get: get2 } = getProto(target); - let hadKey = has2.call(target, key); - if (!hadKey) { - key = toRaw(key); - hadKey = has2.call(target, key); - } - get2 ? get2.call(target, key) : void 0; - const result = target.delete(key); - if (hadKey) { - trigger(target, "delete", key, void 0); - } - return result; -} -function clear() { - const target = toRaw(this); - const hadItems = target.size !== 0; - const result = target.clear(); - if (hadItems) { - trigger(target, "clear", void 0, void 0); - } - return result; -} -function createForEach(isReadonly2, isShallow) { - return function forEach(callback, thisArg) { - const observed = this; - const target = observed["__v_raw"]; - const rawTarget = toRaw(target); - const wrap = isShallow ? toShallow : isReadonly2 ? toReadonly : toReactive; - !isReadonly2 && track(rawTarget, "iterate", ITERATE_KEY); - return target.forEach((value, key) => { - return callback.call(thisArg, wrap(value), wrap(key), observed); - }); - }; -} -function createIterableMethod(method, isReadonly2, isShallow) { - return function(...args) { - const target = this["__v_raw"]; - const rawTarget = toRaw(target); - const targetIsMap = isMap(rawTarget); - const isPair = method === "entries" || method === Symbol.iterator && targetIsMap; - const isKeyOnly = method === "keys" && targetIsMap; - const innerIterator = target[method](...args); - const wrap = isShallow ? toShallow : isReadonly2 ? toReadonly : toReactive; - !isReadonly2 && track(rawTarget, "iterate", isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY); - return { - next() { - const { value, done } = innerIterator.next(); - return done ? { value, done } : { - value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value), - done - }; - }, - [Symbol.iterator]() { - return this; - } - }; - }; -} -function createReadonlyMethod(type) { - return function(...args) { - return type === "delete" ? false : this; - }; -} -function createInstrumentations() { - const mutableInstrumentations2 = { - get(key) { - return get$1(this, key); - }, - get size() { - return size(this); - }, - has: has$1, - add, - set: set$1, - delete: deleteEntry, - clear, - forEach: createForEach(false, false) - }; - const shallowInstrumentations2 = { - get(key) { - return get$1(this, key, false, true); - }, - get size() { - return size(this); - }, - has: has$1, - add, - set: set$1, - delete: deleteEntry, - clear, - forEach: createForEach(false, true) - }; - const readonlyInstrumentations2 = { - get(key) { - return get$1(this, key, true); - }, - get size() { - return size(this, true); - }, - has(key) { - return has$1.call(this, key, true); - }, - add: createReadonlyMethod("add"), - set: createReadonlyMethod("set"), - delete: createReadonlyMethod("delete"), - clear: createReadonlyMethod("clear"), - forEach: createForEach(true, false) - }; - const shallowReadonlyInstrumentations2 = { - get(key) { - return get$1(this, key, true, true); - }, - get size() { - return size(this, true); - }, - has(key) { - return has$1.call(this, key, true); - }, - add: createReadonlyMethod("add"), - set: createReadonlyMethod("set"), - delete: createReadonlyMethod("delete"), - clear: createReadonlyMethod("clear"), - forEach: createForEach(true, true) - }; - const iteratorMethods = ["keys", "values", "entries", Symbol.iterator]; - iteratorMethods.forEach((method) => { - mutableInstrumentations2[method] = createIterableMethod(method, false, false); - readonlyInstrumentations2[method] = createIterableMethod(method, true, false); - shallowInstrumentations2[method] = createIterableMethod(method, false, true); - shallowReadonlyInstrumentations2[method] = createIterableMethod(method, true, true); - }); - return [ - mutableInstrumentations2, - readonlyInstrumentations2, - shallowInstrumentations2, - shallowReadonlyInstrumentations2 - ]; -} -const [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* @__PURE__ */ createInstrumentations(); -function createInstrumentationGetter(isReadonly2, shallow) { - const instrumentations = shallow ? isReadonly2 ? shallowReadonlyInstrumentations : shallowInstrumentations : isReadonly2 ? readonlyInstrumentations : mutableInstrumentations; - return (target, key, receiver) => { - if (key === "__v_isReactive") { - return !isReadonly2; - } else if (key === "__v_isReadonly") { - return isReadonly2; - } else if (key === "__v_raw") { - return target; - } - return Reflect.get(hasOwn(instrumentations, key) && key in target ? instrumentations : target, key, receiver); - }; -} -const mutableCollectionHandlers = { - get: /* @__PURE__ */ createInstrumentationGetter(false, false) -}; -const shallowCollectionHandlers = { - get: /* @__PURE__ */ createInstrumentationGetter(false, true) -}; -const readonlyCollectionHandlers = { - get: /* @__PURE__ */ createInstrumentationGetter(true, false) -}; -const reactiveMap = new WeakMap(); -const shallowReactiveMap = new WeakMap(); -const readonlyMap = new WeakMap(); -const shallowReadonlyMap = new WeakMap(); -function targetTypeMap(rawType) { - switch (rawType) { - case "Object": - case "Array": - return 1; - case "Map": - case "Set": - case "WeakMap": - case "WeakSet": - return 2; - default: - return 0; - } -} -function getTargetType(value) { - return value["__v_skip"] || !Object.isExtensible(value) ? 0 : targetTypeMap(toRawType(value)); -} -function reactive(target) { - if (target && target["__v_isReadonly"]) { - return target; - } - return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap); -} -function shallowReactive(target) { - return createReactiveObject(target, false, shallowReactiveHandlers, shallowCollectionHandlers, shallowReactiveMap); -} -function readonly(target) { - return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap); -} -function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) { - if (!isObject(target)) { - return target; - } - if (target["__v_raw"] && !(isReadonly2 && target["__v_isReactive"])) { - return target; - } - const existingProxy = proxyMap.get(target); - if (existingProxy) { - return existingProxy; - } - const targetType = getTargetType(target); - if (targetType === 0) { - return target; - } - const proxy = new Proxy(target, targetType === 2 ? collectionHandlers : baseHandlers); - proxyMap.set(target, proxy); - return proxy; -} -function isReactive(value) { - if (isReadonly(value)) { - return isReactive(value["__v_raw"]); - } - return !!(value && value["__v_isReactive"]); -} -function isReadonly(value) { - return !!(value && value["__v_isReadonly"]); -} -function isProxy(value) { - return isReactive(value) || isReadonly(value); -} -function toRaw(observed) { - const raw = observed && observed["__v_raw"]; - return raw ? toRaw(raw) : observed; -} -function markRaw(value) { - def(value, "__v_skip", true); - return value; -} -const toReactive = (value) => isObject(value) ? reactive(value) : value; -const toReadonly = (value) => isObject(value) ? readonly(value) : value; -function trackRefValue(ref2) { - if (isTracking()) { - ref2 = toRaw(ref2); - if (!ref2.dep) { - ref2.dep = createDep(); - } - { - trackEffects(ref2.dep); - } - } -} -function triggerRefValue(ref2, newVal) { - ref2 = toRaw(ref2); - if (ref2.dep) { - { - triggerEffects(ref2.dep); - } - } -} -function isRef(r2) { - return Boolean(r2 && r2.__v_isRef === true); -} -function ref(value) { - return createRef(value, false); -} -function shallowRef(value) { - return createRef(value, true); -} -function createRef(rawValue, shallow) { - if (isRef(rawValue)) { - return rawValue; - } - return new RefImpl(rawValue, shallow); -} -class RefImpl { - constructor(value, _shallow) { - this._shallow = _shallow; - this.dep = void 0; - this.__v_isRef = true; - this._rawValue = _shallow ? value : toRaw(value); - this._value = _shallow ? value : toReactive(value); - } - get value() { - trackRefValue(this); - return this._value; - } - set value(newVal) { - newVal = this._shallow ? newVal : toRaw(newVal); - if (hasChanged(newVal, this._rawValue)) { - this._rawValue = newVal; - this._value = this._shallow ? newVal : toReactive(newVal); - triggerRefValue(this); - } - } -} -function unref(ref2) { - return isRef(ref2) ? ref2.value : ref2; -} -const shallowUnwrapHandlers = { - get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)), - set: (target, key, value, receiver) => { - const oldValue = target[key]; - if (isRef(oldValue) && !isRef(value)) { - oldValue.value = value; - return true; - } else { - return Reflect.set(target, key, value, receiver); - } - } -}; -function proxyRefs(objectWithRefs) { - return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers); -} -class ComputedRefImpl { - constructor(getter, _setter, isReadonly2) { - this._setter = _setter; - this.dep = void 0; - this._dirty = true; - this.__v_isRef = true; - this.effect = new ReactiveEffect(getter, () => { - if (!this._dirty) { - this._dirty = true; - triggerRefValue(this); - } - }); - this["__v_isReadonly"] = isReadonly2; - } - get value() { - const self2 = toRaw(this); - trackRefValue(self2); - if (self2._dirty) { - self2._dirty = false; - self2._value = self2.effect.run(); - } - return self2._value; - } - set value(newValue) { - this._setter(newValue); - } -} -function computed(getterOrOptions, debugOptions) { - let getter; - let setter; - const onlyGetter = isFunction(getterOrOptions); - if (onlyGetter) { - getter = getterOrOptions; - setter = NOOP; - } else { - getter = getterOrOptions.get; - setter = getterOrOptions.set; - } - const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter); - return cRef; -} -Promise.resolve(); -function emit$1(instance, event, ...rawArgs) { - const props = instance.vnode.props || EMPTY_OBJ; - let args = rawArgs; - const isModelListener2 = event.startsWith("update:"); - const modelArg = isModelListener2 && event.slice(7); - if (modelArg && modelArg in props) { - const modifiersKey = `${modelArg === "modelValue" ? "model" : modelArg}Modifiers`; - const { number, trim } = props[modifiersKey] || EMPTY_OBJ; - if (trim) { - args = rawArgs.map((a2) => a2.trim()); - } else if (number) { - args = rawArgs.map(toNumber); - } - } - let handlerName; - let handler = props[handlerName = toHandlerKey(event)] || props[handlerName = toHandlerKey(camelize(event))]; - if (!handler && isModelListener2) { - handler = props[handlerName = toHandlerKey(hyphenate(event))]; - } - if (handler) { - callWithAsyncErrorHandling(handler, instance, 6, args); - } - const onceHandler = props[handlerName + `Once`]; - if (onceHandler) { - if (!instance.emitted) { - instance.emitted = {}; - } else if (instance.emitted[handlerName]) { - return; - } - instance.emitted[handlerName] = true; - callWithAsyncErrorHandling(onceHandler, instance, 6, args); - } -} -function normalizeEmitsOptions(comp, appContext, asMixin = false) { - const cache = appContext.emitsCache; - const cached = cache.get(comp); - if (cached !== void 0) { - return cached; - } - const raw = comp.emits; - let normalized = {}; - let hasExtends = false; - if (!isFunction(comp)) { - const extendEmits = (raw2) => { - const normalizedFromExtend = normalizeEmitsOptions(raw2, appContext, true); - if (normalizedFromExtend) { - hasExtends = true; - extend(normalized, normalizedFromExtend); - } - }; - if (!asMixin && appContext.mixins.length) { - appContext.mixins.forEach(extendEmits); - } - if (comp.extends) { - extendEmits(comp.extends); - } - if (comp.mixins) { - comp.mixins.forEach(extendEmits); - } - } - if (!raw && !hasExtends) { - cache.set(comp, null); - return null; - } - if (isArray(raw)) { - raw.forEach((key) => normalized[key] = null); - } else { - extend(normalized, raw); - } - cache.set(comp, normalized); - return normalized; -} -function isEmitListener(options, key) { - if (!options || !isOn(key)) { - return false; - } - key = key.slice(2).replace(/Once$/, ""); - return hasOwn(options, key[0].toLowerCase() + key.slice(1)) || hasOwn(options, hyphenate(key)) || hasOwn(options, key); -} -let currentRenderingInstance = null; -let currentScopeId = null; -function setCurrentRenderingInstance(instance) { - const prev = currentRenderingInstance; - currentRenderingInstance = instance; - currentScopeId = instance && instance.type.__scopeId || null; - return prev; -} -function pushScopeId(id) { - currentScopeId = id; -} -function popScopeId() { - currentScopeId = null; -} -function withCtx(fn2, ctx = currentRenderingInstance, isNonScopedSlot) { - if (!ctx) - return fn2; - if (fn2._n) { - return fn2; - } - const renderFnWithContext = (...args) => { - if (renderFnWithContext._d) { - setBlockTracking(-1); - } - const prevInstance = setCurrentRenderingInstance(ctx); - const res = fn2(...args); - setCurrentRenderingInstance(prevInstance); - if (renderFnWithContext._d) { - setBlockTracking(1); - } - return res; - }; - renderFnWithContext._n = true; - renderFnWithContext._c = true; - renderFnWithContext._d = true; - return renderFnWithContext; -} -function markAttrsAccessed() { -} -function renderComponentRoot(instance) { - const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance; - let result; - let fallthroughAttrs; - const prev = setCurrentRenderingInstance(instance); - try { - if (vnode.shapeFlag & 4) { - const proxyToUse = withProxy || proxy; - result = normalizeVNode(render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx)); - fallthroughAttrs = attrs; - } else { - const render2 = Component; - if (false) - ; - result = normalizeVNode(render2.length > 1 ? render2(props, false ? { - get attrs() { - markAttrsAccessed(); - return attrs; - }, - slots, - emit - } : { attrs, slots, emit }) : render2(props, null)); - fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs); - } - } catch (err) { - blockStack.length = 0; - handleError(err, instance, 1); - result = createVNode(Comment); - } - let root = result; - if (fallthroughAttrs && inheritAttrs !== false) { - const keys = Object.keys(fallthroughAttrs); - const { shapeFlag } = root; - if (keys.length) { - if (shapeFlag & (1 | 6)) { - if (propsOptions && keys.some(isModelListener)) { - fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions); - } - root = cloneVNode(root, fallthroughAttrs); - } - } - } - if (vnode.dirs) { - root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs; - } - if (vnode.transition) { - root.transition = vnode.transition; - } - { - result = root; - } - setCurrentRenderingInstance(prev); - return result; -} -const getFunctionalFallthrough = (attrs) => { - let res; - for (const key in attrs) { - if (key === "class" || key === "style" || isOn(key)) { - (res || (res = {}))[key] = attrs[key]; - } - } - return res; -}; -const filterModelListeners = (attrs, props) => { - const res = {}; - for (const key in attrs) { - if (!isModelListener(key) || !(key.slice(9) in props)) { - res[key] = attrs[key]; - } - } - return res; -}; -function shouldUpdateComponent(prevVNode, nextVNode, optimized) { - const { props: prevProps, children: prevChildren, component } = prevVNode; - const { props: nextProps, children: nextChildren, patchFlag } = nextVNode; - const emits = component.emitsOptions; - if (nextVNode.dirs || nextVNode.transition) { - return true; - } - if (optimized && patchFlag >= 0) { - if (patchFlag & 1024) { - return true; - } - if (patchFlag & 16) { - if (!prevProps) { - return !!nextProps; - } - return hasPropsChanged(prevProps, nextProps, emits); - } else if (patchFlag & 8) { - const dynamicProps = nextVNode.dynamicProps; - for (let i2 = 0; i2 < dynamicProps.length; i2++) { - const key = dynamicProps[i2]; - if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) { - return true; - } - } - } - } else { - if (prevChildren || nextChildren) { - if (!nextChildren || !nextChildren.$stable) { - return true; - } - } - if (prevProps === nextProps) { - return false; - } - if (!prevProps) { - return !!nextProps; - } - if (!nextProps) { - return true; - } - return hasPropsChanged(prevProps, nextProps, emits); - } - return false; -} -function hasPropsChanged(prevProps, nextProps, emitsOptions) { - const nextKeys = Object.keys(nextProps); - if (nextKeys.length !== Object.keys(prevProps).length) { - return true; - } - for (let i2 = 0; i2 < nextKeys.length; i2++) { - const key = nextKeys[i2]; - if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) { - return true; - } - } - return false; -} -function updateHOCHostEl({ vnode, parent }, el) { - while (parent && parent.subTree === vnode) { - (vnode = parent.vnode).el = el; - parent = parent.parent; - } -} -const isSuspense = (type) => type.__isSuspense; -function queueEffectWithSuspense(fn2, suspense) { - if (suspense && suspense.pendingBranch) { - if (isArray(fn2)) { - suspense.effects.push(...fn2); - } else { - suspense.effects.push(fn2); - } - } else { - queuePostFlushCb(fn2); - } -} -function provide(key, value) { - if (!currentInstance) - ; - else { - let provides = currentInstance.provides; - const parentProvides = currentInstance.parent && currentInstance.parent.provides; - if (parentProvides === provides) { - provides = currentInstance.provides = Object.create(parentProvides); - } - provides[key] = value; - } -} -function inject(key, defaultValue, treatDefaultAsFactory = false) { - const instance = currentInstance || currentRenderingInstance; - if (instance) { - const provides = instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides; - if (provides && key in provides) { - return provides[key]; - } else if (arguments.length > 1) { - return treatDefaultAsFactory && isFunction(defaultValue) ? defaultValue.call(instance.proxy) : defaultValue; - } else - ; - } -} -function useTransitionState() { - const state = { - isMounted: false, - isLeaving: false, - isUnmounting: false, - leavingVNodes: new Map() - }; - onMounted(() => { - state.isMounted = true; - }); - onBeforeUnmount(() => { - state.isUnmounting = true; - }); - return state; -} -const TransitionHookValidator = [Function, Array]; -const BaseTransitionImpl = { - name: `BaseTransition`, - props: { - mode: String, - appear: Boolean, - persisted: Boolean, - onBeforeEnter: TransitionHookValidator, - onEnter: TransitionHookValidator, - onAfterEnter: TransitionHookValidator, - onEnterCancelled: TransitionHookValidator, - onBeforeLeave: TransitionHookValidator, - onLeave: TransitionHookValidator, - onAfterLeave: TransitionHookValidator, - onLeaveCancelled: TransitionHookValidator, - onBeforeAppear: TransitionHookValidator, - onAppear: TransitionHookValidator, - onAfterAppear: TransitionHookValidator, - onAppearCancelled: TransitionHookValidator - }, - setup(props, { slots }) { - const instance = getCurrentInstance(); - const state = useTransitionState(); - let prevTransitionKey; - return () => { - const children = slots.default && getTransitionRawChildren(slots.default(), true); - if (!children || !children.length) { - return; - } - const rawProps = toRaw(props); - const { mode } = rawProps; - const child = children[0]; - if (state.isLeaving) { - return emptyPlaceholder(child); - } - const innerChild = getKeepAliveChild(child); - if (!innerChild) { - return emptyPlaceholder(child); - } - const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance); - setTransitionHooks(innerChild, enterHooks); - const oldChild = instance.subTree; - const oldInnerChild = oldChild && getKeepAliveChild(oldChild); - let transitionKeyChanged = false; - const { getTransitionKey } = innerChild.type; - if (getTransitionKey) { - const key = getTransitionKey(); - if (prevTransitionKey === void 0) { - prevTransitionKey = key; - } else if (key !== prevTransitionKey) { - prevTransitionKey = key; - transitionKeyChanged = true; - } - } - if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) { - const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance); - setTransitionHooks(oldInnerChild, leavingHooks); - if (mode === "out-in") { - state.isLeaving = true; - leavingHooks.afterLeave = () => { - state.isLeaving = false; - instance.update(); - }; - return emptyPlaceholder(child); - } else if (mode === "in-out" && innerChild.type !== Comment) { - leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => { - const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild); - leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild; - el._leaveCb = () => { - earlyRemove(); - el._leaveCb = void 0; - delete enterHooks.delayedLeave; - }; - enterHooks.delayedLeave = delayedLeave; - }; - } - } - return child; - }; - } -}; -const BaseTransition = BaseTransitionImpl; -function getLeavingNodesForType(state, vnode) { - const { leavingVNodes } = state; - let leavingVNodesCache = leavingVNodes.get(vnode.type); - if (!leavingVNodesCache) { - leavingVNodesCache = Object.create(null); - leavingVNodes.set(vnode.type, leavingVNodesCache); - } - return leavingVNodesCache; -} -function resolveTransitionHooks(vnode, props, state, instance) { - const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props; - const key = String(vnode.key); - const leavingVNodesCache = getLeavingNodesForType(state, vnode); - const callHook2 = (hook, args) => { - hook && callWithAsyncErrorHandling(hook, instance, 9, args); - }; - const hooks = { - mode, - persisted, - beforeEnter(el) { - let hook = onBeforeEnter; - if (!state.isMounted) { - if (appear) { - hook = onBeforeAppear || onBeforeEnter; - } else { - return; - } - } - if (el._leaveCb) { - el._leaveCb(true); - } - const leavingVNode = leavingVNodesCache[key]; - if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el._leaveCb) { - leavingVNode.el._leaveCb(); - } - callHook2(hook, [el]); - }, - enter(el) { - let hook = onEnter; - let afterHook = onAfterEnter; - let cancelHook = onEnterCancelled; - if (!state.isMounted) { - if (appear) { - hook = onAppear || onEnter; - afterHook = onAfterAppear || onAfterEnter; - cancelHook = onAppearCancelled || onEnterCancelled; - } else { - return; - } - } - let called = false; - const done = el._enterCb = (cancelled) => { - if (called) - return; - called = true; - if (cancelled) { - callHook2(cancelHook, [el]); - } else { - callHook2(afterHook, [el]); - } - if (hooks.delayedLeave) { - hooks.delayedLeave(); - } - el._enterCb = void 0; - }; - if (hook) { - hook(el, done); - if (hook.length <= 1) { - done(); - } - } else { - done(); - } - }, - leave(el, remove2) { - const key2 = String(vnode.key); - if (el._enterCb) { - el._enterCb(true); - } - if (state.isUnmounting) { - return remove2(); - } - callHook2(onBeforeLeave, [el]); - let called = false; - const done = el._leaveCb = (cancelled) => { - if (called) - return; - called = true; - remove2(); - if (cancelled) { - callHook2(onLeaveCancelled, [el]); - } else { - callHook2(onAfterLeave, [el]); - } - el._leaveCb = void 0; - if (leavingVNodesCache[key2] === vnode) { - delete leavingVNodesCache[key2]; - } - }; - leavingVNodesCache[key2] = vnode; - if (onLeave) { - onLeave(el, done); - if (onLeave.length <= 1) { - done(); - } - } else { - done(); - } - }, - clone(vnode2) { - return resolveTransitionHooks(vnode2, props, state, instance); - } - }; - return hooks; -} -function emptyPlaceholder(vnode) { - if (isKeepAlive(vnode)) { - vnode = cloneVNode(vnode); - vnode.children = null; - return vnode; - } -} -function getKeepAliveChild(vnode) { - return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode; -} -function setTransitionHooks(vnode, hooks) { - if (vnode.shapeFlag & 6 && vnode.component) { - setTransitionHooks(vnode.component.subTree, hooks); - } else if (vnode.shapeFlag & 128) { - vnode.ssContent.transition = hooks.clone(vnode.ssContent); - vnode.ssFallback.transition = hooks.clone(vnode.ssFallback); - } else { - vnode.transition = hooks; - } -} -function getTransitionRawChildren(children, keepComment = false) { - let ret = []; - let keyedFragmentCount = 0; - for (let i2 = 0; i2 < children.length; i2++) { - const child = children[i2]; - if (child.type === Fragment) { - if (child.patchFlag & 128) - keyedFragmentCount++; - ret = ret.concat(getTransitionRawChildren(child.children, keepComment)); - } else if (keepComment || child.type !== Comment) { - ret.push(child); - } - } - if (keyedFragmentCount > 1) { - for (let i2 = 0; i2 < ret.length; i2++) { - ret[i2].patchFlag = -2; - } - } - return ret; -} -function defineComponent(options) { - return isFunction(options) ? { setup: options, name: options.name } : options; -} -const isAsyncWrapper = (i2) => !!i2.type.__asyncLoader; -const isKeepAlive = (vnode) => vnode.type.__isKeepAlive; -const KeepAliveImpl = { - name: `KeepAlive`, - __isKeepAlive: true, - props: { - include: [String, RegExp, Array], - exclude: [String, RegExp, Array], - max: [String, Number] - }, - setup(props, { slots }) { - const instance = getCurrentInstance(); - const sharedContext = instance.ctx; - if (!sharedContext.renderer) { - return slots.default; - } - const cache = new Map(); - const keys = new Set(); - let current = null; - const parentSuspense = instance.suspense; - const { renderer: { p: patch, m: move, um: _unmount, o: { createElement } } } = sharedContext; - const storageContainer = createElement("div"); - sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => { - const instance2 = vnode.component; - move(vnode, container, anchor, 0, parentSuspense); - patch(instance2.vnode, vnode, container, anchor, instance2, parentSuspense, isSVG, vnode.slotScopeIds, optimized); - queuePostRenderEffect(() => { - instance2.isDeactivated = false; - if (instance2.a) { - invokeArrayFns(instance2.a); - } - const vnodeHook = vnode.props && vnode.props.onVnodeMounted; - if (vnodeHook) { - invokeVNodeHook(vnodeHook, instance2.parent, vnode); - } - }, parentSuspense); - }; - sharedContext.deactivate = (vnode) => { - const instance2 = vnode.component; - move(vnode, storageContainer, null, 1, parentSuspense); - queuePostRenderEffect(() => { - if (instance2.da) { - invokeArrayFns(instance2.da); - } - const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted; - if (vnodeHook) { - invokeVNodeHook(vnodeHook, instance2.parent, vnode); - } - instance2.isDeactivated = true; - }, parentSuspense); - }; - function unmount(vnode) { - resetShapeFlag(vnode); - _unmount(vnode, instance, parentSuspense); - } - function pruneCache(filter) { - cache.forEach((vnode, key) => { - const name = getComponentName(vnode.type); - if (name && (!filter || !filter(name))) { - pruneCacheEntry(key); - } - }); - } - function pruneCacheEntry(key) { - const cached = cache.get(key); - if (!current || cached.type !== current.type) { - unmount(cached); - } else if (current) { - resetShapeFlag(current); - } - cache.delete(key); - keys.delete(key); - } - watch(() => [props.include, props.exclude], ([include, exclude]) => { - include && pruneCache((name) => matches(include, name)); - exclude && pruneCache((name) => !matches(exclude, name)); - }, { flush: "post", deep: true }); - let pendingCacheKey = null; - const cacheSubtree = () => { - if (pendingCacheKey != null) { - cache.set(pendingCacheKey, getInnerChild(instance.subTree)); - } - }; - onMounted(cacheSubtree); - onUpdated(cacheSubtree); - onBeforeUnmount(() => { - cache.forEach((cached) => { - const { subTree, suspense } = instance; - const vnode = getInnerChild(subTree); - if (cached.type === vnode.type) { - resetShapeFlag(vnode); - const da = vnode.component.da; - da && queuePostRenderEffect(da, suspense); - return; - } - unmount(cached); - }); - }); - return () => { - pendingCacheKey = null; - if (!slots.default) { - return null; - } - const children = slots.default(); - const rawVNode = children[0]; - if (children.length > 1) { - current = null; - return children; - } else if (!isVNode(rawVNode) || !(rawVNode.shapeFlag & 4) && !(rawVNode.shapeFlag & 128)) { - current = null; - return rawVNode; - } - let vnode = getInnerChild(rawVNode); - const comp = vnode.type; - const name = getComponentName(isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp); - const { include, exclude, max } = props; - if (include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name)) { - current = vnode; - return rawVNode; - } - const key = vnode.key == null ? comp : vnode.key; - const cachedVNode = cache.get(key); - if (vnode.el) { - vnode = cloneVNode(vnode); - if (rawVNode.shapeFlag & 128) { - rawVNode.ssContent = vnode; - } - } - pendingCacheKey = key; - if (cachedVNode) { - vnode.el = cachedVNode.el; - vnode.component = cachedVNode.component; - if (vnode.transition) { - setTransitionHooks(vnode, vnode.transition); - } - vnode.shapeFlag |= 512; - keys.delete(key); - keys.add(key); - } else { - keys.add(key); - if (max && keys.size > parseInt(max, 10)) { - pruneCacheEntry(keys.values().next().value); - } - } - vnode.shapeFlag |= 256; - current = vnode; - return rawVNode; - }; - } -}; -const KeepAlive = KeepAliveImpl; -function matches(pattern, name) { - if (isArray(pattern)) { - return pattern.some((p2) => matches(p2, name)); - } else if (isString(pattern)) { - return pattern.split(",").indexOf(name) > -1; - } else if (pattern.test) { - return pattern.test(name); - } - return false; -} -function onActivated(hook, target) { - registerKeepAliveHook(hook, "a", target); -} -function onDeactivated(hook, target) { - registerKeepAliveHook(hook, "da", target); -} -function registerKeepAliveHook(hook, type, target = currentInstance) { - const wrappedHook = hook.__wdc || (hook.__wdc = () => { - let current = target; - while (current) { - if (current.isDeactivated) { - return; - } - current = current.parent; - } - hook(); - }); - injectHook(type, wrappedHook, target); - if (target) { - let current = target.parent; - while (current && current.parent) { - if (isKeepAlive(current.parent.vnode)) { - injectToKeepAliveRoot(wrappedHook, type, target, current); - } - current = current.parent; - } - } -} -function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) { - const injected = injectHook(type, hook, keepAliveRoot, true); - onUnmounted(() => { - remove(keepAliveRoot[type], injected); - }, target); -} -function resetShapeFlag(vnode) { - let shapeFlag = vnode.shapeFlag; - if (shapeFlag & 256) { - shapeFlag -= 256; - } - if (shapeFlag & 512) { - shapeFlag -= 512; - } - vnode.shapeFlag = shapeFlag; -} -function getInnerChild(vnode) { - return vnode.shapeFlag & 128 ? vnode.ssContent : vnode; -} -function injectHook(type, hook, target = currentInstance, prepend = false) { - if (target) { - const hooks = target[type] || (target[type] = []); - const wrappedHook = hook.__weh || (hook.__weh = (...args) => { - if (target.isUnmounted) { - return; - } - pauseTracking(); - setCurrentInstance(target); - const res = callWithAsyncErrorHandling(hook, target, type, args); - unsetCurrentInstance(); - resetTracking(); - return res; - }); - if (prepend) { - hooks.unshift(wrappedHook); - } else { - hooks.push(wrappedHook); - } - return wrappedHook; - } -} -const createHook = (lifecycle) => (hook, target = currentInstance) => (!isInSSRComponentSetup || lifecycle === "sp") && injectHook(lifecycle, hook, target); -const onBeforeMount = createHook("bm"); -const onMounted = createHook("m"); -const onBeforeUpdate = createHook("bu"); -const onUpdated = createHook("u"); -const onBeforeUnmount = createHook("bum"); -const onUnmounted = createHook("um"); -const onServerPrefetch = createHook("sp"); -const onRenderTriggered = createHook("rtg"); -const onRenderTracked = createHook("rtc"); -function onErrorCaptured(hook, target = currentInstance) { - injectHook("ec", hook, target); -} -let shouldCacheAccess = true; -function applyOptions(instance) { - const options = resolveMergedOptions(instance); - const publicThis = instance.proxy; - const ctx = instance.ctx; - shouldCacheAccess = false; - if (options.beforeCreate) { - callHook$1(options.beforeCreate, instance, "bc"); - } - const { - data: dataOptions, - computed: computedOptions, - methods, - watch: watchOptions, - provide: provideOptions, - inject: injectOptions, - created, - beforeMount, - mounted, - beforeUpdate, - updated, - activated, - deactivated, - beforeDestroy, - beforeUnmount, - destroyed, - unmounted, - render, - renderTracked, - renderTriggered, - errorCaptured, - serverPrefetch, - expose, - inheritAttrs, - components, - directives, - filters - } = options; - const checkDuplicateProperties = null; - if (injectOptions) { - resolveInjections(injectOptions, ctx, checkDuplicateProperties, instance.appContext.config.unwrapInjectedRef); - } - if (methods) { - for (const key in methods) { - const methodHandler = methods[key]; - if (isFunction(methodHandler)) { - { - ctx[key] = methodHandler.bind(publicThis); - } - } - } - } - if (dataOptions) { - const data = dataOptions.call(publicThis, publicThis); - if (!isObject(data)) - ; - else { - instance.data = reactive(data); - } - } - shouldCacheAccess = true; - if (computedOptions) { - for (const key in computedOptions) { - const opt = computedOptions[key]; - const get2 = isFunction(opt) ? opt.bind(publicThis, publicThis) : isFunction(opt.get) ? opt.get.bind(publicThis, publicThis) : NOOP; - const set2 = !isFunction(opt) && isFunction(opt.set) ? opt.set.bind(publicThis) : NOOP; - const c2 = computed({ - get: get2, - set: set2 - }); - Object.defineProperty(ctx, key, { - enumerable: true, - configurable: true, - get: () => c2.value, - set: (v2) => c2.value = v2 - }); - } - } - if (watchOptions) { - for (const key in watchOptions) { - createWatcher(watchOptions[key], ctx, publicThis, key); - } - } - if (provideOptions) { - const provides = isFunction(provideOptions) ? provideOptions.call(publicThis) : provideOptions; - Reflect.ownKeys(provides).forEach((key) => { - provide(key, provides[key]); - }); - } - if (created) { - callHook$1(created, instance, "c"); - } - function registerLifecycleHook(register, hook) { - if (isArray(hook)) { - hook.forEach((_hook) => register(_hook.bind(publicThis))); - } else if (hook) { - register(hook.bind(publicThis)); - } - } - registerLifecycleHook(onBeforeMount, beforeMount); - registerLifecycleHook(onMounted, mounted); - registerLifecycleHook(onBeforeUpdate, beforeUpdate); - registerLifecycleHook(onUpdated, updated); - registerLifecycleHook(onActivated, activated); - registerLifecycleHook(onDeactivated, deactivated); - registerLifecycleHook(onErrorCaptured, errorCaptured); - registerLifecycleHook(onRenderTracked, renderTracked); - registerLifecycleHook(onRenderTriggered, renderTriggered); - registerLifecycleHook(onBeforeUnmount, beforeUnmount); - registerLifecycleHook(onUnmounted, unmounted); - registerLifecycleHook(onServerPrefetch, serverPrefetch); - if (isArray(expose)) { - if (expose.length) { - const exposed = instance.exposed || (instance.exposed = {}); - expose.forEach((key) => { - Object.defineProperty(exposed, key, { - get: () => publicThis[key], - set: (val) => publicThis[key] = val - }); - }); - } else if (!instance.exposed) { - instance.exposed = {}; - } - } - if (render && instance.render === NOOP) { - instance.render = render; - } - if (inheritAttrs != null) { - instance.inheritAttrs = inheritAttrs; - } - if (components) - instance.components = components; - if (directives) - instance.directives = directives; -} -function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP, unwrapRef = false) { - if (isArray(injectOptions)) { - injectOptions = normalizeInject(injectOptions); - } - for (const key in injectOptions) { - const opt = injectOptions[key]; - let injected; - if (isObject(opt)) { - if ("default" in opt) { - injected = inject(opt.from || key, opt.default, true); - } else { - injected = inject(opt.from || key); - } - } else { - injected = inject(opt); - } - if (isRef(injected)) { - if (unwrapRef) { - Object.defineProperty(ctx, key, { - enumerable: true, - configurable: true, - get: () => injected.value, - set: (v2) => injected.value = v2 - }); - } else { - ctx[key] = injected; - } - } else { - ctx[key] = injected; - } - } -} -function callHook$1(hook, instance, type) { - callWithAsyncErrorHandling(isArray(hook) ? hook.map((h2) => h2.bind(instance.proxy)) : hook.bind(instance.proxy), instance, type); -} -function createWatcher(raw, ctx, publicThis, key) { - const getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key]; - if (isString(raw)) { - const handler = ctx[raw]; - if (isFunction(handler)) { - watch(getter, handler); - } - } else if (isFunction(raw)) { - watch(getter, raw.bind(publicThis)); - } else if (isObject(raw)) { - if (isArray(raw)) { - raw.forEach((r2) => createWatcher(r2, ctx, publicThis, key)); - } else { - const handler = isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler]; - if (isFunction(handler)) { - watch(getter, handler, raw); - } - } - } else - ; -} -function resolveMergedOptions(instance) { - const base = instance.type; - const { mixins, extends: extendsOptions } = base; - const { mixins: globalMixins, optionsCache: cache, config: { optionMergeStrategies } } = instance.appContext; - const cached = cache.get(base); - let resolved; - if (cached) { - resolved = cached; - } else if (!globalMixins.length && !mixins && !extendsOptions) { - { - resolved = base; - } - } else { - resolved = {}; - if (globalMixins.length) { - globalMixins.forEach((m2) => mergeOptions$1(resolved, m2, optionMergeStrategies, true)); - } - mergeOptions$1(resolved, base, optionMergeStrategies); - } - cache.set(base, resolved); - return resolved; -} -function mergeOptions$1(to, from, strats, asMixin = false) { - const { mixins, extends: extendsOptions } = from; - if (extendsOptions) { - mergeOptions$1(to, extendsOptions, strats, true); - } - if (mixins) { - mixins.forEach((m2) => mergeOptions$1(to, m2, strats, true)); - } - for (const key in from) { - if (asMixin && key === "expose") - ; - else { - const strat = internalOptionMergeStrats[key] || strats && strats[key]; - to[key] = strat ? strat(to[key], from[key]) : from[key]; - } - } - return to; -} -const internalOptionMergeStrats = { - data: mergeDataFn, - props: mergeObjectOptions, - emits: mergeObjectOptions, - methods: mergeObjectOptions, - computed: mergeObjectOptions, - beforeCreate: mergeAsArray, - created: mergeAsArray, - beforeMount: mergeAsArray, - mounted: mergeAsArray, - beforeUpdate: mergeAsArray, - updated: mergeAsArray, - beforeDestroy: mergeAsArray, - beforeUnmount: mergeAsArray, - destroyed: mergeAsArray, - unmounted: mergeAsArray, - activated: mergeAsArray, - deactivated: mergeAsArray, - errorCaptured: mergeAsArray, - serverPrefetch: mergeAsArray, - components: mergeObjectOptions, - directives: mergeObjectOptions, - watch: mergeWatchOptions, - provide: mergeDataFn, - inject: mergeInject -}; -function mergeDataFn(to, from) { - if (!from) { - return to; - } - if (!to) { - return from; - } - return function mergedDataFn() { - return extend(isFunction(to) ? to.call(this, this) : to, isFunction(from) ? from.call(this, this) : from); - }; -} -function mergeInject(to, from) { - return mergeObjectOptions(normalizeInject(to), normalizeInject(from)); -} -function normalizeInject(raw) { - if (isArray(raw)) { - const res = {}; - for (let i2 = 0; i2 < raw.length; i2++) { - res[raw[i2]] = raw[i2]; - } - return res; - } - return raw; -} -function mergeAsArray(to, from) { - return to ? [...new Set([].concat(to, from))] : from; -} -function mergeObjectOptions(to, from) { - return to ? extend(extend(Object.create(null), to), from) : from; -} -function mergeWatchOptions(to, from) { - if (!to) - return from; - if (!from) - return to; - const merged = extend(Object.create(null), to); - for (const key in from) { - merged[key] = mergeAsArray(to[key], from[key]); - } - return merged; -} -function initProps(instance, rawProps, isStateful, isSSR = false) { - const props = {}; - const attrs = {}; - def(attrs, InternalObjectKey, 1); - instance.propsDefaults = Object.create(null); - setFullProps(instance, rawProps, props, attrs); - for (const key in instance.propsOptions[0]) { - if (!(key in props)) { - props[key] = void 0; - } - } - if (isStateful) { - instance.props = isSSR ? props : shallowReactive(props); - } else { - if (!instance.type.props) { - instance.props = attrs; - } else { - instance.props = props; - } - } - instance.attrs = attrs; -} -function updateProps(instance, rawProps, rawPrevProps, optimized) { - const { props, attrs, vnode: { patchFlag } } = instance; - const rawCurrentProps = toRaw(props); - const [options] = instance.propsOptions; - let hasAttrsChanged = false; - if ((optimized || patchFlag > 0) && !(patchFlag & 16)) { - if (patchFlag & 8) { - const propsToUpdate = instance.vnode.dynamicProps; - for (let i2 = 0; i2 < propsToUpdate.length; i2++) { - let key = propsToUpdate[i2]; - const value = rawProps[key]; - if (options) { - if (hasOwn(attrs, key)) { - if (value !== attrs[key]) { - attrs[key] = value; - hasAttrsChanged = true; - } - } else { - const camelizedKey = camelize(key); - props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value, instance, false); - } - } else { - if (value !== attrs[key]) { - attrs[key] = value; - hasAttrsChanged = true; - } - } - } - } - } else { - if (setFullProps(instance, rawProps, props, attrs)) { - hasAttrsChanged = true; - } - let kebabKey; - for (const key in rawCurrentProps) { - if (!rawProps || !hasOwn(rawProps, key) && ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey))) { - if (options) { - if (rawPrevProps && (rawPrevProps[key] !== void 0 || rawPrevProps[kebabKey] !== void 0)) { - props[key] = resolvePropValue(options, rawCurrentProps, key, void 0, instance, true); - } - } else { - delete props[key]; - } - } - } - if (attrs !== rawCurrentProps) { - for (const key in attrs) { - if (!rawProps || !hasOwn(rawProps, key)) { - delete attrs[key]; - hasAttrsChanged = true; - } - } - } - } - if (hasAttrsChanged) { - trigger(instance, "set", "$attrs"); - } -} -function setFullProps(instance, rawProps, props, attrs) { - const [options, needCastKeys] = instance.propsOptions; - let hasAttrsChanged = false; - let rawCastValues; - if (rawProps) { - for (let key in rawProps) { - if (isReservedProp(key)) { - continue; - } - const value = rawProps[key]; - let camelKey; - if (options && hasOwn(options, camelKey = camelize(key))) { - if (!needCastKeys || !needCastKeys.includes(camelKey)) { - props[camelKey] = value; - } else { - (rawCastValues || (rawCastValues = {}))[camelKey] = value; - } - } else if (!isEmitListener(instance.emitsOptions, key)) { - if (value !== attrs[key]) { - attrs[key] = value; - hasAttrsChanged = true; - } - } - } - } - if (needCastKeys) { - const rawCurrentProps = toRaw(props); - const castValues = rawCastValues || EMPTY_OBJ; - for (let i2 = 0; i2 < needCastKeys.length; i2++) { - const key = needCastKeys[i2]; - props[key] = resolvePropValue(options, rawCurrentProps, key, castValues[key], instance, !hasOwn(castValues, key)); - } - } - return hasAttrsChanged; -} -function resolvePropValue(options, props, key, value, instance, isAbsent) { - const opt = options[key]; - if (opt != null) { - const hasDefault = hasOwn(opt, "default"); - if (hasDefault && value === void 0) { - const defaultValue = opt.default; - if (opt.type !== Function && isFunction(defaultValue)) { - const { propsDefaults } = instance; - if (key in propsDefaults) { - value = propsDefaults[key]; - } else { - setCurrentInstance(instance); - value = propsDefaults[key] = defaultValue.call(null, props); - unsetCurrentInstance(); - } - } else { - value = defaultValue; - } - } - if (opt[0]) { - if (isAbsent && !hasDefault) { - value = false; - } else if (opt[1] && (value === "" || value === hyphenate(key))) { - value = true; - } - } - } - return value; -} -function normalizePropsOptions(comp, appContext, asMixin = false) { - const cache = appContext.propsCache; - const cached = cache.get(comp); - if (cached) { - return cached; - } - const raw = comp.props; - const normalized = {}; - const needCastKeys = []; - let hasExtends = false; - if (!isFunction(comp)) { - const extendProps = (raw2) => { - hasExtends = true; - const [props, keys] = normalizePropsOptions(raw2, appContext, true); - extend(normalized, props); - if (keys) - needCastKeys.push(...keys); - }; - if (!asMixin && appContext.mixins.length) { - appContext.mixins.forEach(extendProps); - } - if (comp.extends) { - extendProps(comp.extends); - } - if (comp.mixins) { - comp.mixins.forEach(extendProps); - } - } - if (!raw && !hasExtends) { - cache.set(comp, EMPTY_ARR); - return EMPTY_ARR; - } - if (isArray(raw)) { - for (let i2 = 0; i2 < raw.length; i2++) { - const normalizedKey = camelize(raw[i2]); - if (validatePropName(normalizedKey)) { - normalized[normalizedKey] = EMPTY_OBJ; - } - } - } else if (raw) { - for (const key in raw) { - const normalizedKey = camelize(key); - if (validatePropName(normalizedKey)) { - const opt = raw[key]; - const prop = normalized[normalizedKey] = isArray(opt) || isFunction(opt) ? { type: opt } : opt; - if (prop) { - const booleanIndex = getTypeIndex(Boolean, prop.type); - const stringIndex = getTypeIndex(String, prop.type); - prop[0] = booleanIndex > -1; - prop[1] = stringIndex < 0 || booleanIndex < stringIndex; - if (booleanIndex > -1 || hasOwn(prop, "default")) { - needCastKeys.push(normalizedKey); - } - } - } - } - } - const res = [normalized, needCastKeys]; - cache.set(comp, res); - return res; -} -function validatePropName(key) { - if (key[0] !== "$") { - return true; - } - return false; -} -function getType(ctor) { - const match = ctor && ctor.toString().match(/^\s*function (\w+)/); - return match ? match[1] : ctor === null ? "null" : ""; -} -function isSameType(a2, b2) { - return getType(a2) === getType(b2); -} -function getTypeIndex(type, expectedTypes) { - if (isArray(expectedTypes)) { - return expectedTypes.findIndex((t2) => isSameType(t2, type)); - } else if (isFunction(expectedTypes)) { - return isSameType(expectedTypes, type) ? 0 : -1; - } - return -1; -} -const isInternalKey = (key) => key[0] === "_" || key === "$stable"; -const normalizeSlotValue = (value) => isArray(value) ? value.map(normalizeVNode) : [normalizeVNode(value)]; -const normalizeSlot$1 = (key, rawSlot, ctx) => { - const normalized = withCtx((...args) => { - return normalizeSlotValue(rawSlot(...args)); - }, ctx); - normalized._c = false; - return normalized; -}; -const normalizeObjectSlots = (rawSlots, slots, instance) => { - const ctx = rawSlots._ctx; - for (const key in rawSlots) { - if (isInternalKey(key)) - continue; - const value = rawSlots[key]; - if (isFunction(value)) { - slots[key] = normalizeSlot$1(key, value, ctx); - } else if (value != null) { - const normalized = normalizeSlotValue(value); - slots[key] = () => normalized; - } - } -}; -const normalizeVNodeSlots = (instance, children) => { - const normalized = normalizeSlotValue(children); - instance.slots.default = () => normalized; -}; -const initSlots = (instance, children) => { - if (instance.vnode.shapeFlag & 32) { - const type = children._; - if (type) { - instance.slots = toRaw(children); - def(children, "_", type); - } else { - normalizeObjectSlots(children, instance.slots = {}); - } - } else { - instance.slots = {}; - if (children) { - normalizeVNodeSlots(instance, children); - } - } - def(instance.slots, InternalObjectKey, 1); -}; -const updateSlots = (instance, children, optimized) => { - const { vnode, slots } = instance; - let needDeletionCheck = true; - let deletionComparisonTarget = EMPTY_OBJ; - if (vnode.shapeFlag & 32) { - const type = children._; - if (type) { - if (optimized && type === 1) { - needDeletionCheck = false; - } else { - extend(slots, children); - if (!optimized && type === 1) { - delete slots._; - } - } - } else { - needDeletionCheck = !children.$stable; - normalizeObjectSlots(children, slots); - } - deletionComparisonTarget = children; - } else if (children) { - normalizeVNodeSlots(instance, children); - deletionComparisonTarget = { default: 1 }; - } - if (needDeletionCheck) { - for (const key in slots) { - if (!isInternalKey(key) && !(key in deletionComparisonTarget)) { - delete slots[key]; - } - } - } -}; -function withDirectives(vnode, directives) { - const internalInstance = currentRenderingInstance; - if (internalInstance === null) { - return vnode; - } - const instance = internalInstance.proxy; - const bindings = vnode.dirs || (vnode.dirs = []); - for (let i2 = 0; i2 < directives.length; i2++) { - let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i2]; - if (isFunction(dir)) { - dir = { - mounted: dir, - updated: dir - }; - } - if (dir.deep) { - traverse(value); - } - bindings.push({ - dir, - instance, - value, - oldValue: void 0, - arg, - modifiers - }); - } - return vnode; -} -function invokeDirectiveHook(vnode, prevVNode, instance, name) { - const bindings = vnode.dirs; - const oldBindings = prevVNode && prevVNode.dirs; - for (let i2 = 0; i2 < bindings.length; i2++) { - const binding = bindings[i2]; - if (oldBindings) { - binding.oldValue = oldBindings[i2].value; - } - let hook = binding.dir[name]; - if (hook) { - pauseTracking(); - callWithAsyncErrorHandling(hook, instance, 8, [ - vnode.el, - binding, - vnode, - prevVNode - ]); - resetTracking(); - } - } -} -function createAppContext() { - return { - app: null, - config: { - isNativeTag: NO, - performance: false, - globalProperties: {}, - optionMergeStrategies: {}, - errorHandler: void 0, - warnHandler: void 0, - compilerOptions: {} - }, - mixins: [], - components: {}, - directives: {}, - provides: Object.create(null), - optionsCache: new WeakMap(), - propsCache: new WeakMap(), - emitsCache: new WeakMap() - }; -} -let uid = 0; -function createAppAPI(render, hydrate) { - return function createApp2(rootComponent, rootProps = null) { - if (rootProps != null && !isObject(rootProps)) { - rootProps = null; - } - const context = createAppContext(); - const installedPlugins = new Set(); - let isMounted = false; - const app = context.app = { - _uid: uid++, - _component: rootComponent, - _props: rootProps, - _container: null, - _context: context, - _instance: null, - version, - get config() { - return context.config; - }, - set config(v2) { - }, - use(plugin, ...options) { - if (installedPlugins.has(plugin)) - ; - else if (plugin && isFunction(plugin.install)) { - installedPlugins.add(plugin); - plugin.install(app, ...options); - } else if (isFunction(plugin)) { - installedPlugins.add(plugin); - plugin(app, ...options); - } else - ; - return app; - }, - mixin(mixin) { - { - if (!context.mixins.includes(mixin)) { - context.mixins.push(mixin); - } - } - return app; - }, - component(name, component) { - if (!component) { - return context.components[name]; - } - context.components[name] = component; - return app; - }, - directive(name, directive) { - if (!directive) { - return context.directives[name]; - } - context.directives[name] = directive; - return app; - }, - mount(rootContainer, isHydrate, isSVG) { - if (!isMounted) { - const vnode = createVNode(rootComponent, rootProps); - vnode.appContext = context; - if (isHydrate && hydrate) { - hydrate(vnode, rootContainer); - } else { - render(vnode, rootContainer, isSVG); - } - isMounted = true; - app._container = rootContainer; - rootContainer.__vue_app__ = app; - return getExposeProxy(vnode.component) || vnode.component.proxy; - } - }, - unmount() { - if (isMounted) { - render(null, app._container); - delete app._container.__vue_app__; - } - }, - provide(key, value) { - context.provides[key] = value; - return app; - } - }; - return app; - }; -} -const queuePostRenderEffect = queueEffectWithSuspense; -function createRenderer(options) { - return baseCreateRenderer(options); -} -function baseCreateRenderer(options, createHydrationFns) { - const target = getGlobalThis(); - target.__VUE__ = true; - const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options; - const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = !!n2.dynamicChildren) => { - if (n1 === n2) { - return; - } - if (n1 && !isSameVNodeType(n1, n2)) { - anchor = getNextHostNode(n1); - unmount(n1, parentComponent, parentSuspense, true); - n1 = null; - } - if (n2.patchFlag === -2) { - optimized = false; - n2.dynamicChildren = null; - } - const { type, ref: ref2, shapeFlag } = n2; - switch (type) { - case Text: - processText(n1, n2, container, anchor); - break; - case Comment: - processCommentNode(n1, n2, container, anchor); - break; - case Static: - if (n1 == null) { - mountStaticNode(n2, container, anchor, isSVG); - } - break; - case Fragment: - processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - break; - default: - if (shapeFlag & 1) { - processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else if (shapeFlag & 6) { - processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else if (shapeFlag & 64) { - type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals); - } else if (shapeFlag & 128) { - type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals); - } else - ; - } - if (ref2 != null && parentComponent) { - setRef(ref2, n1 && n1.ref, parentSuspense, n2 || n1, !n2); - } - }; - const processText = (n1, n2, container, anchor) => { - if (n1 == null) { - hostInsert(n2.el = hostCreateText(n2.children), container, anchor); - } else { - const el = n2.el = n1.el; - if (n2.children !== n1.children) { - hostSetText(el, n2.children); - } - } - }; - const processCommentNode = (n1, n2, container, anchor) => { - if (n1 == null) { - hostInsert(n2.el = hostCreateComment(n2.children || ""), container, anchor); - } else { - n2.el = n1.el; - } - }; - const mountStaticNode = (n2, container, anchor, isSVG) => { - [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG); - }; - const moveStaticNode = ({ el, anchor }, container, nextSibling) => { - let next; - while (el && el !== anchor) { - next = hostNextSibling(el); - hostInsert(el, container, nextSibling); - el = next; - } - hostInsert(anchor, container, nextSibling); - }; - const removeStaticNode = ({ el, anchor }) => { - let next; - while (el && el !== anchor) { - next = hostNextSibling(el); - hostRemove(el); - el = next; - } - hostRemove(anchor); - }; - const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { - isSVG = isSVG || n2.type === "svg"; - if (n1 == null) { - mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else { - patchElement(n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } - }; - const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { - let el; - let vnodeHook; - const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode; - if (vnode.el && hostCloneNode !== void 0 && patchFlag === -1) { - el = vnode.el = hostCloneNode(vnode.el); - } else { - el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is, props); - if (shapeFlag & 8) { - hostSetElementText(el, vnode.children); - } else if (shapeFlag & 16) { - mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== "foreignObject", slotScopeIds, optimized); - } - if (dirs) { - invokeDirectiveHook(vnode, null, parentComponent, "created"); - } - if (props) { - for (const key in props) { - if (key !== "value" && !isReservedProp(key)) { - hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren); - } - } - if ("value" in props) { - hostPatchProp(el, "value", null, props.value); - } - if (vnodeHook = props.onVnodeBeforeMount) { - invokeVNodeHook(vnodeHook, parentComponent, vnode); - } - } - setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent); - } - if (dirs) { - invokeDirectiveHook(vnode, null, parentComponent, "beforeMount"); - } - const needCallTransitionHooks = (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted; - if (needCallTransitionHooks) { - transition.beforeEnter(el); - } - hostInsert(el, container, anchor); - if ((vnodeHook = props && props.onVnodeMounted) || needCallTransitionHooks || dirs) { - queuePostRenderEffect(() => { - vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode); - needCallTransitionHooks && transition.enter(el); - dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted"); - }, parentSuspense); - } - }; - const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => { - if (scopeId) { - hostSetScopeId(el, scopeId); - } - if (slotScopeIds) { - for (let i2 = 0; i2 < slotScopeIds.length; i2++) { - hostSetScopeId(el, slotScopeIds[i2]); - } - } - if (parentComponent) { - let subTree = parentComponent.subTree; - if (vnode === subTree) { - const parentVNode = parentComponent.vnode; - setScopeId(el, parentVNode, parentVNode.scopeId, parentVNode.slotScopeIds, parentComponent.parent); - } - } - }; - const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, start = 0) => { - for (let i2 = start; i2 < children.length; i2++) { - const child = children[i2] = optimized ? cloneIfMounted(children[i2]) : normalizeVNode(children[i2]); - patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } - }; - const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { - const el = n2.el = n1.el; - let { patchFlag, dynamicChildren, dirs } = n2; - patchFlag |= n1.patchFlag & 16; - const oldProps = n1.props || EMPTY_OBJ; - const newProps = n2.props || EMPTY_OBJ; - let vnodeHook; - if (vnodeHook = newProps.onVnodeBeforeUpdate) { - invokeVNodeHook(vnodeHook, parentComponent, n2, n1); - } - if (dirs) { - invokeDirectiveHook(n2, n1, parentComponent, "beforeUpdate"); - } - const areChildrenSVG = isSVG && n2.type !== "foreignObject"; - if (dynamicChildren) { - patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds); - } else if (!optimized) { - patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds, false); - } - if (patchFlag > 0) { - if (patchFlag & 16) { - patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG); - } else { - if (patchFlag & 2) { - if (oldProps.class !== newProps.class) { - hostPatchProp(el, "class", null, newProps.class, isSVG); - } - } - if (patchFlag & 4) { - hostPatchProp(el, "style", oldProps.style, newProps.style, isSVG); - } - if (patchFlag & 8) { - const propsToUpdate = n2.dynamicProps; - for (let i2 = 0; i2 < propsToUpdate.length; i2++) { - const key = propsToUpdate[i2]; - const prev = oldProps[key]; - const next = newProps[key]; - if (next !== prev || key === "value") { - hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren); - } - } - } - } - if (patchFlag & 1) { - if (n1.children !== n2.children) { - hostSetElementText(el, n2.children); - } - } - } else if (!optimized && dynamicChildren == null) { - patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG); - } - if ((vnodeHook = newProps.onVnodeUpdated) || dirs) { - queuePostRenderEffect(() => { - vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1); - dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated"); - }, parentSuspense); - } - }; - const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => { - for (let i2 = 0; i2 < newChildren.length; i2++) { - const oldVNode = oldChildren[i2]; - const newVNode = newChildren[i2]; - const container = oldVNode.el && (oldVNode.type === Fragment || !isSameVNodeType(oldVNode, newVNode) || oldVNode.shapeFlag & (6 | 64)) ? hostParentNode(oldVNode.el) : fallbackContainer; - patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, true); - } - }; - const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => { - if (oldProps !== newProps) { - for (const key in newProps) { - if (isReservedProp(key)) - continue; - const next = newProps[key]; - const prev = oldProps[key]; - if (next !== prev && key !== "value") { - hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren); - } - } - if (oldProps !== EMPTY_OBJ) { - for (const key in oldProps) { - if (!isReservedProp(key) && !(key in newProps)) { - hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren); - } - } - } - if ("value" in newProps) { - hostPatchProp(el, "value", oldProps.value, newProps.value); - } - } - }; - const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { - const fragmentStartAnchor = n2.el = n1 ? n1.el : hostCreateText(""); - const fragmentEndAnchor = n2.anchor = n1 ? n1.anchor : hostCreateText(""); - let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2; - if (fragmentSlotScopeIds) { - slotScopeIds = slotScopeIds ? slotScopeIds.concat(fragmentSlotScopeIds) : fragmentSlotScopeIds; - } - if (n1 == null) { - hostInsert(fragmentStartAnchor, container, anchor); - hostInsert(fragmentEndAnchor, container, anchor); - mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else { - if (patchFlag > 0 && patchFlag & 64 && dynamicChildren && n1.dynamicChildren) { - patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG, slotScopeIds); - if (n2.key != null || parentComponent && n2 === parentComponent.subTree) { - traverseStaticChildren(n1, n2, true); - } - } else { - patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } - } - }; - const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { - n2.slotScopeIds = slotScopeIds; - if (n1 == null) { - if (n2.shapeFlag & 512) { - parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized); - } else { - mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); - } - } else { - updateComponent(n1, n2, optimized); - } - }; - const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => { - const instance = initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense); - if (isKeepAlive(initialVNode)) { - instance.ctx.renderer = internals; - } - { - setupComponent(instance); - } - if (instance.asyncDep) { - parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect); - if (!initialVNode.el) { - const placeholder = instance.subTree = createVNode(Comment); - processCommentNode(null, placeholder, container, anchor); - } - return; - } - setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized); - }; - const updateComponent = (n1, n2, optimized) => { - const instance = n2.component = n1.component; - if (shouldUpdateComponent(n1, n2, optimized)) { - if (instance.asyncDep && !instance.asyncResolved) { - updateComponentPreRender(instance, n2, optimized); - return; - } else { - instance.next = n2; - invalidateJob(instance.update); - instance.update(); - } - } else { - n2.component = n1.component; - n2.el = n1.el; - instance.vnode = n2; - } - }; - const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => { - const componentUpdateFn = () => { - if (!instance.isMounted) { - let vnodeHook; - const { el, props } = initialVNode; - const { bm, m: m2, parent } = instance; - const isAsyncWrapperVNode = isAsyncWrapper(initialVNode); - effect.allowRecurse = false; - if (bm) { - invokeArrayFns(bm); - } - if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeBeforeMount)) { - invokeVNodeHook(vnodeHook, parent, initialVNode); - } - effect.allowRecurse = true; - if (el && hydrateNode) { - const hydrateSubTree = () => { - instance.subTree = renderComponentRoot(instance); - hydrateNode(el, instance.subTree, instance, parentSuspense, null); - }; - if (isAsyncWrapperVNode) { - initialVNode.type.__asyncLoader().then(() => !instance.isUnmounted && hydrateSubTree()); - } else { - hydrateSubTree(); - } - } else { - const subTree = instance.subTree = renderComponentRoot(instance); - patch(null, subTree, container, anchor, instance, parentSuspense, isSVG); - initialVNode.el = subTree.el; - } - if (m2) { - queuePostRenderEffect(m2, parentSuspense); - } - if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeMounted)) { - const scopedInitialVNode = initialVNode; - queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode), parentSuspense); - } - if (initialVNode.shapeFlag & 256) { - instance.a && queuePostRenderEffect(instance.a, parentSuspense); - } - instance.isMounted = true; - initialVNode = container = anchor = null; - } else { - let { next, bu, u: u2, parent, vnode } = instance; - let originNext = next; - let vnodeHook; - effect.allowRecurse = false; - if (next) { - next.el = vnode.el; - updateComponentPreRender(instance, next, optimized); - } else { - next = vnode; - } - if (bu) { - invokeArrayFns(bu); - } - if (vnodeHook = next.props && next.props.onVnodeBeforeUpdate) { - invokeVNodeHook(vnodeHook, parent, next, vnode); - } - effect.allowRecurse = true; - const nextTree = renderComponentRoot(instance); - const prevTree = instance.subTree; - instance.subTree = nextTree; - patch(prevTree, nextTree, hostParentNode(prevTree.el), getNextHostNode(prevTree), instance, parentSuspense, isSVG); - next.el = nextTree.el; - if (originNext === null) { - updateHOCHostEl(instance, nextTree.el); - } - if (u2) { - queuePostRenderEffect(u2, parentSuspense); - } - if (vnodeHook = next.props && next.props.onVnodeUpdated) { - queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, next, vnode), parentSuspense); - } - } - }; - const effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update), instance.scope); - const update = instance.update = effect.run.bind(effect); - update.id = instance.uid; - effect.allowRecurse = update.allowRecurse = true; - update(); - }; - const updateComponentPreRender = (instance, nextVNode, optimized) => { - nextVNode.component = instance; - const prevProps = instance.vnode.props; - instance.vnode = nextVNode; - instance.next = null; - updateProps(instance, nextVNode.props, prevProps, optimized); - updateSlots(instance, nextVNode.children, optimized); - pauseTracking(); - flushPreFlushCbs(void 0, instance.update); - resetTracking(); - }; - const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => { - const c1 = n1 && n1.children; - const prevShapeFlag = n1 ? n1.shapeFlag : 0; - const c2 = n2.children; - const { patchFlag, shapeFlag } = n2; - if (patchFlag > 0) { - if (patchFlag & 128) { - patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - return; - } else if (patchFlag & 256) { - patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - return; - } - } - if (shapeFlag & 8) { - if (prevShapeFlag & 16) { - unmountChildren(c1, parentComponent, parentSuspense); - } - if (c2 !== c1) { - hostSetElementText(container, c2); - } - } else { - if (prevShapeFlag & 16) { - if (shapeFlag & 16) { - patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else { - unmountChildren(c1, parentComponent, parentSuspense, true); - } - } else { - if (prevShapeFlag & 8) { - hostSetElementText(container, ""); - } - if (shapeFlag & 16) { - mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } - } - } - }; - const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { - c1 = c1 || EMPTY_ARR; - c2 = c2 || EMPTY_ARR; - const oldLength = c1.length; - const newLength = c2.length; - const commonLength = Math.min(oldLength, newLength); - let i2; - for (i2 = 0; i2 < commonLength; i2++) { - const nextChild = c2[i2] = optimized ? cloneIfMounted(c2[i2]) : normalizeVNode(c2[i2]); - patch(c1[i2], nextChild, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } - if (oldLength > newLength) { - unmountChildren(c1, parentComponent, parentSuspense, true, false, commonLength); - } else { - mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, commonLength); - } - }; - const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => { - let i2 = 0; - const l2 = c2.length; - let e1 = c1.length - 1; - let e2 = l2 - 1; - while (i2 <= e1 && i2 <= e2) { - const n1 = c1[i2]; - const n2 = c2[i2] = optimized ? cloneIfMounted(c2[i2]) : normalizeVNode(c2[i2]); - if (isSameVNodeType(n1, n2)) { - patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else { - break; - } - i2++; - } - while (i2 <= e1 && i2 <= e2) { - const n1 = c1[e1]; - const n2 = c2[e2] = optimized ? cloneIfMounted(c2[e2]) : normalizeVNode(c2[e2]); - if (isSameVNodeType(n1, n2)) { - patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else { - break; - } - e1--; - e2--; - } - if (i2 > e1) { - if (i2 <= e2) { - const nextPos = e2 + 1; - const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor; - while (i2 <= e2) { - patch(null, c2[i2] = optimized ? cloneIfMounted(c2[i2]) : normalizeVNode(c2[i2]), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - i2++; - } - } - } else if (i2 > e2) { - while (i2 <= e1) { - unmount(c1[i2], parentComponent, parentSuspense, true); - i2++; - } - } else { - const s1 = i2; - const s2 = i2; - const keyToNewIndexMap = new Map(); - for (i2 = s2; i2 <= e2; i2++) { - const nextChild = c2[i2] = optimized ? cloneIfMounted(c2[i2]) : normalizeVNode(c2[i2]); - if (nextChild.key != null) { - keyToNewIndexMap.set(nextChild.key, i2); - } - } - let j2; - let patched = 0; - const toBePatched = e2 - s2 + 1; - let moved = false; - let maxNewIndexSoFar = 0; - const newIndexToOldIndexMap = new Array(toBePatched); - for (i2 = 0; i2 < toBePatched; i2++) - newIndexToOldIndexMap[i2] = 0; - for (i2 = s1; i2 <= e1; i2++) { - const prevChild = c1[i2]; - if (patched >= toBePatched) { - unmount(prevChild, parentComponent, parentSuspense, true); - continue; - } - let newIndex; - if (prevChild.key != null) { - newIndex = keyToNewIndexMap.get(prevChild.key); - } else { - for (j2 = s2; j2 <= e2; j2++) { - if (newIndexToOldIndexMap[j2 - s2] === 0 && isSameVNodeType(prevChild, c2[j2])) { - newIndex = j2; - break; - } - } - } - if (newIndex === void 0) { - unmount(prevChild, parentComponent, parentSuspense, true); - } else { - newIndexToOldIndexMap[newIndex - s2] = i2 + 1; - if (newIndex >= maxNewIndexSoFar) { - maxNewIndexSoFar = newIndex; - } else { - moved = true; - } - patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - patched++; - } - } - const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : EMPTY_ARR; - j2 = increasingNewIndexSequence.length - 1; - for (i2 = toBePatched - 1; i2 >= 0; i2--) { - const nextIndex = s2 + i2; - const nextChild = c2[nextIndex]; - const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor; - if (newIndexToOldIndexMap[i2] === 0) { - patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized); - } else if (moved) { - if (j2 < 0 || i2 !== increasingNewIndexSequence[j2]) { - move(nextChild, container, anchor, 2); - } else { - j2--; - } - } - } - } - }; - const move = (vnode, container, anchor, moveType, parentSuspense = null) => { - const { el, type, transition, children, shapeFlag } = vnode; - if (shapeFlag & 6) { - move(vnode.component.subTree, container, anchor, moveType); - return; - } - if (shapeFlag & 128) { - vnode.suspense.move(container, anchor, moveType); - return; - } - if (shapeFlag & 64) { - type.move(vnode, container, anchor, internals); - return; - } - if (type === Fragment) { - hostInsert(el, container, anchor); - for (let i2 = 0; i2 < children.length; i2++) { - move(children[i2], container, anchor, moveType); - } - hostInsert(vnode.anchor, container, anchor); - return; - } - if (type === Static) { - moveStaticNode(vnode, container, anchor); - return; - } - const needTransition = moveType !== 2 && shapeFlag & 1 && transition; - if (needTransition) { - if (moveType === 0) { - transition.beforeEnter(el); - hostInsert(el, container, anchor); - queuePostRenderEffect(() => transition.enter(el), parentSuspense); - } else { - const { leave, delayLeave, afterLeave } = transition; - const remove3 = () => hostInsert(el, container, anchor); - const performLeave = () => { - leave(el, () => { - remove3(); - afterLeave && afterLeave(); - }); - }; - if (delayLeave) { - delayLeave(el, remove3, performLeave); - } else { - performLeave(); - } - } - } else { - hostInsert(el, container, anchor); - } - }; - const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => { - const { type, props, ref: ref2, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode; - if (ref2 != null) { - setRef(ref2, null, parentSuspense, vnode, true); - } - if (shapeFlag & 256) { - parentComponent.ctx.deactivate(vnode); - return; - } - const shouldInvokeDirs = shapeFlag & 1 && dirs; - const shouldInvokeVnodeHook = !isAsyncWrapper(vnode); - let vnodeHook; - if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeBeforeUnmount)) { - invokeVNodeHook(vnodeHook, parentComponent, vnode); - } - if (shapeFlag & 6) { - unmountComponent(vnode.component, parentSuspense, doRemove); - } else { - if (shapeFlag & 128) { - vnode.suspense.unmount(parentSuspense, doRemove); - return; - } - if (shouldInvokeDirs) { - invokeDirectiveHook(vnode, null, parentComponent, "beforeUnmount"); - } - if (shapeFlag & 64) { - vnode.type.remove(vnode, parentComponent, parentSuspense, optimized, internals, doRemove); - } else if (dynamicChildren && (type !== Fragment || patchFlag > 0 && patchFlag & 64)) { - unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true); - } else if (type === Fragment && patchFlag & (128 | 256) || !optimized && shapeFlag & 16) { - unmountChildren(children, parentComponent, parentSuspense); - } - if (doRemove) { - remove2(vnode); - } - } - if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) { - queuePostRenderEffect(() => { - vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode); - shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted"); - }, parentSuspense); - } - }; - const remove2 = (vnode) => { - const { type, el, anchor, transition } = vnode; - if (type === Fragment) { - removeFragment(el, anchor); - return; - } - if (type === Static) { - removeStaticNode(vnode); - return; - } - const performRemove = () => { - hostRemove(el); - if (transition && !transition.persisted && transition.afterLeave) { - transition.afterLeave(); - } - }; - if (vnode.shapeFlag & 1 && transition && !transition.persisted) { - const { leave, delayLeave } = transition; - const performLeave = () => leave(el, performRemove); - if (delayLeave) { - delayLeave(vnode.el, performRemove, performLeave); - } else { - performLeave(); - } - } else { - performRemove(); - } - }; - const removeFragment = (cur, end) => { - let next; - while (cur !== end) { - next = hostNextSibling(cur); - hostRemove(cur); - cur = next; - } - hostRemove(end); - }; - const unmountComponent = (instance, parentSuspense, doRemove) => { - const { bum, scope, update, subTree, um } = instance; - if (bum) { - invokeArrayFns(bum); - } - scope.stop(); - if (update) { - update.active = false; - unmount(subTree, instance, parentSuspense, doRemove); - } - if (um) { - queuePostRenderEffect(um, parentSuspense); - } - queuePostRenderEffect(() => { - instance.isUnmounted = true; - }, parentSuspense); - if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) { - parentSuspense.deps--; - if (parentSuspense.deps === 0) { - parentSuspense.resolve(); - } - } - }; - const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => { - for (let i2 = start; i2 < children.length; i2++) { - unmount(children[i2], parentComponent, parentSuspense, doRemove, optimized); - } - }; - const getNextHostNode = (vnode) => { - if (vnode.shapeFlag & 6) { - return getNextHostNode(vnode.component.subTree); - } - if (vnode.shapeFlag & 128) { - return vnode.suspense.next(); - } - return hostNextSibling(vnode.anchor || vnode.el); - }; - const render = (vnode, container, isSVG) => { - if (vnode == null) { - if (container._vnode) { - unmount(container._vnode, null, null, true); - } - } else { - patch(container._vnode || null, vnode, container, null, null, null, isSVG); - } - flushPostFlushCbs(); - container._vnode = vnode; - }; - const internals = { - p: patch, - um: unmount, - m: move, - r: remove2, - mt: mountComponent, - mc: mountChildren, - pc: patchChildren, - pbc: patchBlockChildren, - n: getNextHostNode, - o: options - }; - let hydrate; - let hydrateNode; - if (createHydrationFns) { - [hydrate, hydrateNode] = createHydrationFns(internals); - } - return { - render, - hydrate, - createApp: createAppAPI(render, hydrate) - }; -} -function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) { - if (isArray(rawRef)) { - rawRef.forEach((r2, i2) => setRef(r2, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i2] : oldRawRef), parentSuspense, vnode, isUnmount)); - return; - } - if (isAsyncWrapper(vnode) && !isUnmount) { - return; - } - const refValue = vnode.shapeFlag & 4 ? getExposeProxy(vnode.component) || vnode.component.proxy : vnode.el; - const value = isUnmount ? null : refValue; - const { i: owner, r: ref2 } = rawRef; - const oldRef = oldRawRef && oldRawRef.r; - const refs = owner.refs === EMPTY_OBJ ? owner.refs = {} : owner.refs; - const setupState = owner.setupState; - if (oldRef != null && oldRef !== ref2) { - if (isString(oldRef)) { - refs[oldRef] = null; - if (hasOwn(setupState, oldRef)) { - setupState[oldRef] = null; - } - } else if (isRef(oldRef)) { - oldRef.value = null; - } - } - if (isString(ref2)) { - const doSet = () => { - { - refs[ref2] = value; - } - if (hasOwn(setupState, ref2)) { - setupState[ref2] = value; - } - }; - if (value) { - doSet.id = -1; - queuePostRenderEffect(doSet, parentSuspense); - } else { - doSet(); - } - } else if (isRef(ref2)) { - const doSet = () => { - ref2.value = value; - }; - if (value) { - doSet.id = -1; - queuePostRenderEffect(doSet, parentSuspense); - } else { - doSet(); - } - } else if (isFunction(ref2)) { - callWithErrorHandling(ref2, owner, 12, [value, refs]); - } else - ; -} -function invokeVNodeHook(hook, instance, vnode, prevVNode = null) { - callWithAsyncErrorHandling(hook, instance, 7, [ - vnode, - prevVNode - ]); -} -function traverseStaticChildren(n1, n2, shallow = false) { - const ch1 = n1.children; - const ch2 = n2.children; - if (isArray(ch1) && isArray(ch2)) { - for (let i2 = 0; i2 < ch1.length; i2++) { - const c1 = ch1[i2]; - let c2 = ch2[i2]; - if (c2.shapeFlag & 1 && !c2.dynamicChildren) { - if (c2.patchFlag <= 0 || c2.patchFlag === 32) { - c2 = ch2[i2] = cloneIfMounted(ch2[i2]); - c2.el = c1.el; - } - if (!shallow) - traverseStaticChildren(c1, c2); - } - } - } -} -function getSequence(arr) { - const p2 = arr.slice(); - const result = [0]; - let i2, j2, u2, v2, c2; - const len = arr.length; - for (i2 = 0; i2 < len; i2++) { - const arrI = arr[i2]; - if (arrI !== 0) { - j2 = result[result.length - 1]; - if (arr[j2] < arrI) { - p2[i2] = j2; - result.push(i2); - continue; - } - u2 = 0; - v2 = result.length - 1; - while (u2 < v2) { - c2 = u2 + v2 >> 1; - if (arr[result[c2]] < arrI) { - u2 = c2 + 1; - } else { - v2 = c2; - } - } - if (arrI < arr[result[u2]]) { - if (u2 > 0) { - p2[i2] = result[u2 - 1]; - } - result[u2] = i2; - } - } - } - u2 = result.length; - v2 = result[u2 - 1]; - while (u2-- > 0) { - result[u2] = v2; - v2 = p2[v2]; - } - return result; -} -const isTeleport = (type) => type.__isTeleport; -const COMPONENTS = "components"; -function resolveComponent(name, maybeSelfReference) { - return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name; -} -const NULL_DYNAMIC_COMPONENT = Symbol(); -function resolveDynamicComponent(component) { - if (isString(component)) { - return resolveAsset(COMPONENTS, component, false) || component; - } else { - return component || NULL_DYNAMIC_COMPONENT; - } -} -function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) { - const instance = currentRenderingInstance || currentInstance; - if (instance) { - const Component = instance.type; - if (type === COMPONENTS) { - const selfName = getComponentName(Component); - if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) { - return Component; - } - } - const res = resolve(instance[type] || Component[type], name) || resolve(instance.appContext[type], name); - if (!res && maybeSelfReference) { - return Component; - } - return res; - } -} -function resolve(registry, name) { - return registry && (registry[name] || registry[camelize(name)] || registry[capitalize(camelize(name))]); -} -const Fragment = Symbol(void 0); -const Text = Symbol(void 0); -const Comment = Symbol(void 0); -const Static = Symbol(void 0); -const blockStack = []; -let currentBlock = null; -function openBlock(disableTracking = false) { - blockStack.push(currentBlock = disableTracking ? null : []); -} -function closeBlock() { - blockStack.pop(); - currentBlock = blockStack[blockStack.length - 1] || null; -} -let isBlockTreeEnabled = 1; -function setBlockTracking(value) { - isBlockTreeEnabled += value; -} -function setupBlock(vnode) { - vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || EMPTY_ARR : null; - closeBlock(); - if (isBlockTreeEnabled > 0 && currentBlock) { - currentBlock.push(vnode); - } - return vnode; -} -function createElementBlock(type, props, children, patchFlag, dynamicProps, shapeFlag) { - return setupBlock(createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, true)); -} -function createBlock(type, props, children, patchFlag, dynamicProps) { - return setupBlock(createVNode(type, props, children, patchFlag, dynamicProps, true)); -} -function isVNode(value) { - return value ? value.__v_isVNode === true : false; -} -function isSameVNodeType(n1, n2) { - return n1.type === n2.type && n1.key === n2.key; -} -const InternalObjectKey = `__vInternal`; -const normalizeKey = ({ key }) => key != null ? key : null; -const normalizeRef = ({ ref: ref2 }) => { - return ref2 != null ? isString(ref2) || isRef(ref2) || isFunction(ref2) ? { i: currentRenderingInstance, r: ref2 } : ref2 : null; -}; -function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1, isBlockNode = false, needFullChildrenNormalization = false) { - const vnode = { - __v_isVNode: true, - __v_skip: true, - type, - props, - key: props && normalizeKey(props), - ref: props && normalizeRef(props), - scopeId: currentScopeId, - slotScopeIds: null, - children, - component: null, - suspense: null, - ssContent: null, - ssFallback: null, - dirs: null, - transition: null, - el: null, - anchor: null, - target: null, - targetAnchor: null, - staticCount: 0, - shapeFlag, - patchFlag, - dynamicProps, - dynamicChildren: null, - appContext: null - }; - if (needFullChildrenNormalization) { - normalizeChildren(vnode, children); - if (shapeFlag & 128) { - type.normalize(vnode); - } - } else if (children) { - vnode.shapeFlag |= isString(children) ? 8 : 16; - } - if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock && (vnode.patchFlag > 0 || shapeFlag & 6) && vnode.patchFlag !== 32) { - currentBlock.push(vnode); - } - return vnode; -} -const createVNode = _createVNode; -function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) { - if (!type || type === NULL_DYNAMIC_COMPONENT) { - type = Comment; - } - if (isVNode(type)) { - const cloned = cloneVNode(type, props, true); - if (children) { - normalizeChildren(cloned, children); - } - return cloned; - } - if (isClassComponent(type)) { - type = type.__vccOpts; - } - if (props) { - props = guardReactiveProps(props); - let { class: klass, style: style2 } = props; - if (klass && !isString(klass)) { - props.class = normalizeClass(klass); - } - if (isObject(style2)) { - if (isProxy(style2) && !isArray(style2)) { - style2 = extend({}, style2); - } - props.style = normalizeStyle(style2); - } - } - const shapeFlag = isString(type) ? 1 : isSuspense(type) ? 128 : isTeleport(type) ? 64 : isObject(type) ? 4 : isFunction(type) ? 2 : 0; - return createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, isBlockNode, true); -} -function guardReactiveProps(props) { - if (!props) - return null; - return isProxy(props) || InternalObjectKey in props ? extend({}, props) : props; -} -function cloneVNode(vnode, extraProps, mergeRef = false) { - const { props, ref: ref2, patchFlag, children } = vnode; - const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props; - const cloned = { - __v_isVNode: true, - __v_skip: true, - type: vnode.type, - props: mergedProps, - key: mergedProps && normalizeKey(mergedProps), - ref: extraProps && extraProps.ref ? mergeRef && ref2 ? isArray(ref2) ? ref2.concat(normalizeRef(extraProps)) : [ref2, normalizeRef(extraProps)] : normalizeRef(extraProps) : ref2, - scopeId: vnode.scopeId, - slotScopeIds: vnode.slotScopeIds, - children, - target: vnode.target, - targetAnchor: vnode.targetAnchor, - staticCount: vnode.staticCount, - shapeFlag: vnode.shapeFlag, - patchFlag: extraProps && vnode.type !== Fragment ? patchFlag === -1 ? 16 : patchFlag | 16 : patchFlag, - dynamicProps: vnode.dynamicProps, - dynamicChildren: vnode.dynamicChildren, - appContext: vnode.appContext, - dirs: vnode.dirs, - transition: vnode.transition, - component: vnode.component, - suspense: vnode.suspense, - ssContent: vnode.ssContent && cloneVNode(vnode.ssContent), - ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback), - el: vnode.el, - anchor: vnode.anchor - }; - return cloned; -} -function createTextVNode(text = " ", flag = 0) { - return createVNode(Text, null, text, flag); -} -function createStaticVNode(content, numberOfNodes) { - const vnode = createVNode(Static, null, content); - vnode.staticCount = numberOfNodes; - return vnode; -} -function createCommentVNode(text = "", asBlock = false) { - return asBlock ? (openBlock(), createBlock(Comment, null, text)) : createVNode(Comment, null, text); -} -function normalizeVNode(child) { - if (child == null || typeof child === "boolean") { - return createVNode(Comment); - } else if (isArray(child)) { - return createVNode(Fragment, null, child.slice()); - } else if (typeof child === "object") { - return cloneIfMounted(child); - } else { - return createVNode(Text, null, String(child)); - } -} -function cloneIfMounted(child) { - return child.el === null || child.memo ? child : cloneVNode(child); -} -function normalizeChildren(vnode, children) { - let type = 0; - const { shapeFlag } = vnode; - if (children == null) { - children = null; - } else if (isArray(children)) { - type = 16; - } else if (typeof children === "object") { - if (shapeFlag & (1 | 64)) { - const slot = children.default; - if (slot) { - slot._c && (slot._d = false); - normalizeChildren(vnode, slot()); - slot._c && (slot._d = true); - } - return; - } else { - type = 32; - const slotFlag = children._; - if (!slotFlag && !(InternalObjectKey in children)) { - children._ctx = currentRenderingInstance; - } else if (slotFlag === 3 && currentRenderingInstance) { - if (currentRenderingInstance.slots._ === 1) { - children._ = 1; - } else { - children._ = 2; - vnode.patchFlag |= 1024; - } - } - } - } else if (isFunction(children)) { - children = { default: children, _ctx: currentRenderingInstance }; - type = 32; - } else { - children = String(children); - if (shapeFlag & 64) { - type = 16; - children = [createTextVNode(children)]; - } else { - type = 8; - } - } - vnode.children = children; - vnode.shapeFlag |= type; -} -function mergeProps(...args) { - const ret = {}; - for (let i2 = 0; i2 < args.length; i2++) { - const toMerge = args[i2]; - for (const key in toMerge) { - if (key === "class") { - if (ret.class !== toMerge.class) { - ret.class = normalizeClass([ret.class, toMerge.class]); - } - } else if (key === "style") { - ret.style = normalizeStyle([ret.style, toMerge.style]); - } else if (isOn(key)) { - const existing = ret[key]; - const incoming = toMerge[key]; - if (existing !== incoming) { - ret[key] = existing ? [].concat(existing, incoming) : incoming; - } - } else if (key !== "") { - ret[key] = toMerge[key]; - } - } - } - return ret; -} -function renderList(source, renderItem, cache, index) { - let ret; - const cached = cache && cache[index]; - if (isArray(source) || isString(source)) { - ret = new Array(source.length); - for (let i2 = 0, l2 = source.length; i2 < l2; i2++) { - ret[i2] = renderItem(source[i2], i2, void 0, cached && cached[i2]); - } - } else if (typeof source === "number") { - ret = new Array(source); - for (let i2 = 0; i2 < source; i2++) { - ret[i2] = renderItem(i2 + 1, i2, void 0, cached && cached[i2]); - } - } else if (isObject(source)) { - if (source[Symbol.iterator]) { - ret = Array.from(source, (item, i2) => renderItem(item, i2, void 0, cached && cached[i2])); - } else { - const keys = Object.keys(source); - ret = new Array(keys.length); - for (let i2 = 0, l2 = keys.length; i2 < l2; i2++) { - const key = keys[i2]; - ret[i2] = renderItem(source[key], key, i2, cached && cached[i2]); - } - } - } else { - ret = []; - } - if (cache) { - cache[index] = ret; - } - return ret; -} -function renderSlot(slots, name, props = {}, fallback, noSlotted) { - if (currentRenderingInstance.isCE) { - return createVNode("slot", name === "default" ? null : { name }, fallback && fallback()); - } - let slot = slots[name]; - if (slot && slot._c) { - slot._d = false; - } - openBlock(); - const validSlotContent = slot && ensureValidVNode(slot(props)); - const rendered = createBlock(Fragment, { key: props.key || `_${name}` }, validSlotContent || (fallback ? fallback() : []), validSlotContent && slots._ === 1 ? 64 : -2); - if (!noSlotted && rendered.scopeId) { - rendered.slotScopeIds = [rendered.scopeId + "-s"]; - } - if (slot && slot._c) { - slot._d = true; - } - return rendered; -} -function ensureValidVNode(vnodes) { - return vnodes.some((child) => { - if (!isVNode(child)) - return true; - if (child.type === Comment) - return false; - if (child.type === Fragment && !ensureValidVNode(child.children)) - return false; - return true; - }) ? vnodes : null; -} -const getPublicInstance = (i2) => { - if (!i2) - return null; - if (isStatefulComponent(i2)) - return getExposeProxy(i2) || i2.proxy; - return getPublicInstance(i2.parent); -}; -const publicPropertiesMap = extend(Object.create(null), { - $: (i2) => i2, - $el: (i2) => i2.vnode.el, - $data: (i2) => i2.data, - $props: (i2) => i2.props, - $attrs: (i2) => i2.attrs, - $slots: (i2) => i2.slots, - $refs: (i2) => i2.refs, - $parent: (i2) => getPublicInstance(i2.parent), - $root: (i2) => getPublicInstance(i2.root), - $emit: (i2) => i2.emit, - $options: (i2) => resolveMergedOptions(i2), - $forceUpdate: (i2) => () => queueJob(i2.update), - $nextTick: (i2) => nextTick.bind(i2.proxy), - $watch: (i2) => instanceWatch.bind(i2) -}); -const PublicInstanceProxyHandlers = { - get({ _: instance }, key) { - const { ctx, setupState, data, props, accessCache, type, appContext } = instance; - let normalizedProps; - if (key[0] !== "$") { - const n2 = accessCache[key]; - if (n2 !== void 0) { - switch (n2) { - case 0: - return setupState[key]; - case 1: - return data[key]; - case 3: - return ctx[key]; - case 2: - return props[key]; - } - } else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) { - accessCache[key] = 0; - return setupState[key]; - } else if (data !== EMPTY_OBJ && hasOwn(data, key)) { - accessCache[key] = 1; - return data[key]; - } else if ((normalizedProps = instance.propsOptions[0]) && hasOwn(normalizedProps, key)) { - accessCache[key] = 2; - return props[key]; - } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) { - accessCache[key] = 3; - return ctx[key]; - } else if (shouldCacheAccess) { - accessCache[key] = 4; - } - } - const publicGetter = publicPropertiesMap[key]; - let cssModule, globalProperties; - if (publicGetter) { - if (key === "$attrs") { - track(instance, "get", key); - } - return publicGetter(instance); - } else if ((cssModule = type.__cssModules) && (cssModule = cssModule[key])) { - return cssModule; - } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) { - accessCache[key] = 3; - return ctx[key]; - } else if (globalProperties = appContext.config.globalProperties, hasOwn(globalProperties, key)) { - { - return globalProperties[key]; - } - } else - ; - }, - set({ _: instance }, key, value) { - const { data, setupState, ctx } = instance; - if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) { - setupState[key] = value; - } else if (data !== EMPTY_OBJ && hasOwn(data, key)) { - data[key] = value; - } else if (hasOwn(instance.props, key)) { - return false; - } - if (key[0] === "$" && key.slice(1) in instance) { - return false; - } else { - { - ctx[key] = value; - } - } - return true; - }, - has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) { - let normalizedProps; - return accessCache[key] !== void 0 || data !== EMPTY_OBJ && hasOwn(data, key) || setupState !== EMPTY_OBJ && hasOwn(setupState, key) || (normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key) || hasOwn(ctx, key) || hasOwn(publicPropertiesMap, key) || hasOwn(appContext.config.globalProperties, key); - } -}; -const emptyAppContext = createAppContext(); -let uid$1 = 0; -function createComponentInstance(vnode, parent, suspense) { - const type = vnode.type; - const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext; - const instance = { - uid: uid$1++, - vnode, - type, - parent, - appContext, - root: null, - next: null, - subTree: null, - update: null, - scope: new EffectScope(true), - render: null, - proxy: null, - exposed: null, - exposeProxy: null, - withProxy: null, - provides: parent ? parent.provides : Object.create(appContext.provides), - accessCache: null, - renderCache: [], - components: null, - directives: null, - propsOptions: normalizePropsOptions(type, appContext), - emitsOptions: normalizeEmitsOptions(type, appContext), - emit: null, - emitted: null, - propsDefaults: EMPTY_OBJ, - inheritAttrs: type.inheritAttrs, - ctx: EMPTY_OBJ, - data: EMPTY_OBJ, - props: EMPTY_OBJ, - attrs: EMPTY_OBJ, - slots: EMPTY_OBJ, - refs: EMPTY_OBJ, - setupState: EMPTY_OBJ, - setupContext: null, - suspense, - suspenseId: suspense ? suspense.pendingId : 0, - asyncDep: null, - asyncResolved: false, - isMounted: false, - isUnmounted: false, - isDeactivated: false, - bc: null, - c: null, - bm: null, - m: null, - bu: null, - u: null, - um: null, - bum: null, - da: null, - a: null, - rtg: null, - rtc: null, - ec: null, - sp: null - }; - { - instance.ctx = { _: instance }; - } - instance.root = parent ? parent.root : instance; - instance.emit = emit$1.bind(null, instance); - if (vnode.ce) { - vnode.ce(instance); - } - return instance; -} -let currentInstance = null; -const getCurrentInstance = () => currentInstance || currentRenderingInstance; -const setCurrentInstance = (instance) => { - currentInstance = instance; - instance.scope.on(); -}; -const unsetCurrentInstance = () => { - currentInstance && currentInstance.scope.off(); - currentInstance = null; -}; -function isStatefulComponent(instance) { - return instance.vnode.shapeFlag & 4; -} -let isInSSRComponentSetup = false; -function setupComponent(instance, isSSR = false) { - isInSSRComponentSetup = isSSR; - const { props, children } = instance.vnode; - const isStateful = isStatefulComponent(instance); - initProps(instance, props, isStateful, isSSR); - initSlots(instance, children); - const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0; - isInSSRComponentSetup = false; - return setupResult; -} -function setupStatefulComponent(instance, isSSR) { - const Component = instance.type; - instance.accessCache = Object.create(null); - instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers)); - const { setup } = Component; - if (setup) { - const setupContext = instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null; - setCurrentInstance(instance); - pauseTracking(); - const setupResult = callWithErrorHandling(setup, instance, 0, [instance.props, setupContext]); - resetTracking(); - unsetCurrentInstance(); - if (isPromise(setupResult)) { - setupResult.then(unsetCurrentInstance, unsetCurrentInstance); - if (isSSR) { - return setupResult.then((resolvedResult) => { - handleSetupResult(instance, resolvedResult, isSSR); - }).catch((e2) => { - handleError(e2, instance, 0); - }); - } else { - instance.asyncDep = setupResult; - } - } else { - handleSetupResult(instance, setupResult, isSSR); - } - } else { - finishComponentSetup(instance, isSSR); - } -} -function handleSetupResult(instance, setupResult, isSSR) { - if (isFunction(setupResult)) { - if (instance.type.__ssrInlineRender) { - instance.ssrRender = setupResult; - } else { - instance.render = setupResult; - } - } else if (isObject(setupResult)) { - instance.setupState = proxyRefs(setupResult); - } else - ; - finishComponentSetup(instance, isSSR); -} -let compile; -function finishComponentSetup(instance, isSSR, skipOptions) { - const Component = instance.type; - if (!instance.render) { - if (!isSSR && compile && !Component.render) { - const template = Component.template; - if (template) { - const { isCustomElement, compilerOptions } = instance.appContext.config; - const { delimiters, compilerOptions: componentCompilerOptions } = Component; - const finalCompilerOptions = extend(extend({ - isCustomElement, - delimiters - }, compilerOptions), componentCompilerOptions); - Component.render = compile(template, finalCompilerOptions); - } - } - instance.render = Component.render || NOOP; - } - { - setCurrentInstance(instance); - pauseTracking(); - applyOptions(instance); - resetTracking(); - unsetCurrentInstance(); - } -} -function createAttrsProxy(instance) { - return new Proxy(instance.attrs, { - get(target, key) { - track(instance, "get", "$attrs"); - return target[key]; - } - }); -} -function createSetupContext(instance) { - const expose = (exposed) => { - instance.exposed = exposed || {}; - }; - let attrs; - { - return { - get attrs() { - return attrs || (attrs = createAttrsProxy(instance)); - }, - slots: instance.slots, - emit: instance.emit, - expose - }; - } -} -function getExposeProxy(instance) { - if (instance.exposed) { - return instance.exposeProxy || (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), { - get(target, key) { - if (key in target) { - return target[key]; - } else if (key in publicPropertiesMap) { - return publicPropertiesMap[key](instance); - } - } - })); - } -} -function getComponentName(Component) { - return isFunction(Component) ? Component.displayName || Component.name : Component.name; -} -function isClassComponent(value) { - return isFunction(value) && "__vccOpts" in value; -} -function callWithErrorHandling(fn2, instance, type, args) { - let res; - try { - res = args ? fn2(...args) : fn2(); - } catch (err) { - handleError(err, instance, type); - } - return res; -} -function callWithAsyncErrorHandling(fn2, instance, type, args) { - if (isFunction(fn2)) { - const res = callWithErrorHandling(fn2, instance, type, args); - if (res && isPromise(res)) { - res.catch((err) => { - handleError(err, instance, type); - }); - } - return res; - } - const values = []; - for (let i2 = 0; i2 < fn2.length; i2++) { - values.push(callWithAsyncErrorHandling(fn2[i2], instance, type, args)); - } - return values; -} -function handleError(err, instance, type, throwInDev = true) { - const contextVNode = instance ? instance.vnode : null; - if (instance) { - let cur = instance.parent; - const exposedInstance = instance.proxy; - const errorInfo = type; - while (cur) { - const errorCapturedHooks = cur.ec; - if (errorCapturedHooks) { - for (let i2 = 0; i2 < errorCapturedHooks.length; i2++) { - if (errorCapturedHooks[i2](err, exposedInstance, errorInfo) === false) { - return; - } - } - } - cur = cur.parent; - } - const appErrorHandler = instance.appContext.config.errorHandler; - if (appErrorHandler) { - callWithErrorHandling(appErrorHandler, null, 10, [err, exposedInstance, errorInfo]); - return; - } - } - logError(err, type, contextVNode, throwInDev); -} -function logError(err, type, contextVNode, throwInDev = true) { - { - console.error(err); - } -} -let isFlushing = false; -let isFlushPending = false; -const queue$1 = []; -let flushIndex = 0; -const pendingPreFlushCbs = []; -let activePreFlushCbs = null; -let preFlushIndex = 0; -const pendingPostFlushCbs = []; -let activePostFlushCbs = null; -let postFlushIndex = 0; -const resolvedPromise = Promise.resolve(); -let currentFlushPromise = null; -let currentPreFlushParentJob = null; -function nextTick(fn2) { - const p2 = currentFlushPromise || resolvedPromise; - return fn2 ? p2.then(this ? fn2.bind(this) : fn2) : p2; -} -function findInsertionIndex(id) { - let start = flushIndex + 1; - let end = queue$1.length; - while (start < end) { - const middle = start + end >>> 1; - const middleJobId = getId(queue$1[middle]); - middleJobId < id ? start = middle + 1 : end = middle; - } - return start; -} -function queueJob(job) { - if ((!queue$1.length || !queue$1.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) && job !== currentPreFlushParentJob) { - if (job.id == null) { - queue$1.push(job); - } else { - queue$1.splice(findInsertionIndex(job.id), 0, job); - } - queueFlush(); - } -} -function queueFlush() { - if (!isFlushing && !isFlushPending) { - isFlushPending = true; - currentFlushPromise = resolvedPromise.then(flushJobs); - } -} -function invalidateJob(job) { - const i2 = queue$1.indexOf(job); - if (i2 > flushIndex) { - queue$1.splice(i2, 1); - } -} -function queueCb(cb, activeQueue, pendingQueue, index) { - if (!isArray(cb)) { - if (!activeQueue || !activeQueue.includes(cb, cb.allowRecurse ? index + 1 : index)) { - pendingQueue.push(cb); - } - } else { - pendingQueue.push(...cb); - } - queueFlush(); -} -function queuePreFlushCb(cb) { - queueCb(cb, activePreFlushCbs, pendingPreFlushCbs, preFlushIndex); -} -function queuePostFlushCb(cb) { - queueCb(cb, activePostFlushCbs, pendingPostFlushCbs, postFlushIndex); -} -function flushPreFlushCbs(seen, parentJob = null) { - if (pendingPreFlushCbs.length) { - currentPreFlushParentJob = parentJob; - activePreFlushCbs = [...new Set(pendingPreFlushCbs)]; - pendingPreFlushCbs.length = 0; - for (preFlushIndex = 0; preFlushIndex < activePreFlushCbs.length; preFlushIndex++) { - activePreFlushCbs[preFlushIndex](); - } - activePreFlushCbs = null; - preFlushIndex = 0; - currentPreFlushParentJob = null; - flushPreFlushCbs(seen, parentJob); - } -} -function flushPostFlushCbs(seen) { - if (pendingPostFlushCbs.length) { - const deduped = [...new Set(pendingPostFlushCbs)]; - pendingPostFlushCbs.length = 0; - if (activePostFlushCbs) { - activePostFlushCbs.push(...deduped); - return; - } - activePostFlushCbs = deduped; - activePostFlushCbs.sort((a2, b2) => getId(a2) - getId(b2)); - for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) { - activePostFlushCbs[postFlushIndex](); - } - activePostFlushCbs = null; - postFlushIndex = 0; - } -} -const getId = (job) => job.id == null ? Infinity : job.id; -function flushJobs(seen) { - isFlushPending = false; - isFlushing = true; - flushPreFlushCbs(seen); - queue$1.sort((a2, b2) => getId(a2) - getId(b2)); - const check = NOOP; - try { - for (flushIndex = 0; flushIndex < queue$1.length; flushIndex++) { - const job = queue$1[flushIndex]; - if (job && job.active !== false) { - if (false) - ; - callWithErrorHandling(job, null, 14); - } - } - } finally { - flushIndex = 0; - queue$1.length = 0; - flushPostFlushCbs(); - isFlushing = false; - currentFlushPromise = null; - if (queue$1.length || pendingPreFlushCbs.length || pendingPostFlushCbs.length) { - flushJobs(seen); - } - } -} -const INITIAL_WATCHER_VALUE = {}; -function watch(source, cb, options) { - return doWatch(source, cb, options); -} -function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) { - const instance = currentInstance; - let getter; - let forceTrigger = false; - let isMultiSource = false; - if (isRef(source)) { - getter = () => source.value; - forceTrigger = !!source._shallow; - } else if (isReactive(source)) { - getter = () => source; - deep = true; - } else if (isArray(source)) { - isMultiSource = true; - forceTrigger = source.some(isReactive); - getter = () => source.map((s2) => { - if (isRef(s2)) { - return s2.value; - } else if (isReactive(s2)) { - return traverse(s2); - } else if (isFunction(s2)) { - return callWithErrorHandling(s2, instance, 2); - } else - ; - }); - } else if (isFunction(source)) { - if (cb) { - getter = () => callWithErrorHandling(source, instance, 2); - } else { - getter = () => { - if (instance && instance.isUnmounted) { - return; - } - if (cleanup) { - cleanup(); - } - return callWithAsyncErrorHandling(source, instance, 3, [onInvalidate]); - }; - } - } else { - getter = NOOP; - } - if (cb && deep) { - const baseGetter = getter; - getter = () => traverse(baseGetter()); - } - let cleanup; - let onInvalidate = (fn2) => { - cleanup = effect.onStop = () => { - callWithErrorHandling(fn2, instance, 4); - }; - }; - if (isInSSRComponentSetup) { - onInvalidate = NOOP; - if (!cb) { - getter(); - } else if (immediate) { - callWithAsyncErrorHandling(cb, instance, 3, [ - getter(), - isMultiSource ? [] : void 0, - onInvalidate - ]); - } - return NOOP; - } - let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE; - const job = () => { - if (!effect.active) { - return; - } - if (cb) { - const newValue = effect.run(); - if (deep || forceTrigger || (isMultiSource ? newValue.some((v2, i2) => hasChanged(v2, oldValue[i2])) : hasChanged(newValue, oldValue)) || false) { - if (cleanup) { - cleanup(); - } - callWithAsyncErrorHandling(cb, instance, 3, [ - newValue, - oldValue === INITIAL_WATCHER_VALUE ? void 0 : oldValue, - onInvalidate - ]); - oldValue = newValue; - } - } else { - effect.run(); - } - }; - job.allowRecurse = !!cb; - let scheduler; - if (flush === "sync") { - scheduler = job; - } else if (flush === "post") { - scheduler = () => queuePostRenderEffect(job, instance && instance.suspense); - } else { - scheduler = () => { - if (!instance || instance.isMounted) { - queuePreFlushCb(job); - } else { - job(); - } - }; - } - const effect = new ReactiveEffect(getter, scheduler); - if (cb) { - if (immediate) { - job(); - } else { - oldValue = effect.run(); - } - } else if (flush === "post") { - queuePostRenderEffect(effect.run.bind(effect), instance && instance.suspense); - } else { - effect.run(); - } - return () => { - effect.stop(); - if (instance && instance.scope) { - remove(instance.scope.effects, effect); - } - }; -} -function instanceWatch(source, value, options) { - const publicThis = this.proxy; - const getter = isString(source) ? source.includes(".") ? createPathGetter(publicThis, source) : () => publicThis[source] : source.bind(publicThis, publicThis); - let cb; - if (isFunction(value)) { - cb = value; - } else { - cb = value.handler; - options = value; - } - const cur = currentInstance; - setCurrentInstance(this); - const res = doWatch(getter, cb.bind(publicThis), options); - if (cur) { - setCurrentInstance(cur); - } else { - unsetCurrentInstance(); - } - return res; -} -function createPathGetter(ctx, path) { - const segments = path.split("."); - return () => { - let cur = ctx; - for (let i2 = 0; i2 < segments.length && cur; i2++) { - cur = cur[segments[i2]]; - } - return cur; - }; -} -function traverse(value, seen) { - if (!isObject(value) || value["__v_skip"]) { - return value; - } - seen = seen || new Set(); - if (seen.has(value)) { - return value; - } - seen.add(value); - if (isRef(value)) { - traverse(value.value, seen); - } else if (isArray(value)) { - for (let i2 = 0; i2 < value.length; i2++) { - traverse(value[i2], seen); - } - } else if (isSet(value) || isMap(value)) { - value.forEach((v2) => { - traverse(v2, seen); - }); - } else if (isPlainObject(value)) { - for (const key in value) { - traverse(value[key], seen); - } - } - return value; -} -function h$1(type, propsOrChildren, children) { - const l2 = arguments.length; - if (l2 === 2) { - if (isObject(propsOrChildren) && !isArray(propsOrChildren)) { - if (isVNode(propsOrChildren)) { - return createVNode(type, null, [propsOrChildren]); - } - return createVNode(type, propsOrChildren); - } else { - return createVNode(type, null, propsOrChildren); - } - } else { - if (l2 > 3) { - children = Array.prototype.slice.call(arguments, 2); - } else if (l2 === 3 && isVNode(children)) { - children = [children]; - } - return createVNode(type, propsOrChildren, children); - } -} -const version = "3.2.19"; -const svgNS = "http://www.w3.org/2000/svg"; -const doc = typeof document !== "undefined" ? document : null; -const staticTemplateCache = new Map(); -const nodeOps = { - insert: (child, parent, anchor) => { - parent.insertBefore(child, anchor || null); - }, - remove: (child) => { - const parent = child.parentNode; - if (parent) { - parent.removeChild(child); - } - }, - createElement: (tag, isSVG, is, props) => { - const el = isSVG ? doc.createElementNS(svgNS, tag) : doc.createElement(tag, is ? { is } : void 0); - if (tag === "select" && props && props.multiple != null) { - el.setAttribute("multiple", props.multiple); - } - return el; - }, - createText: (text) => doc.createTextNode(text), - createComment: (text) => doc.createComment(text), - setText: (node, text) => { - node.nodeValue = text; - }, - setElementText: (el, text) => { - el.textContent = text; - }, - parentNode: (node) => node.parentNode, - nextSibling: (node) => node.nextSibling, - querySelector: (selector) => doc.querySelector(selector), - setScopeId(el, id) { - el.setAttribute(id, ""); - }, - cloneNode(el) { - const cloned = el.cloneNode(true); - if (`_value` in el) { - cloned._value = el._value; - } - return cloned; - }, - insertStaticContent(content, parent, anchor, isSVG) { - const before = anchor ? anchor.previousSibling : parent.lastChild; - let template = staticTemplateCache.get(content); - if (!template) { - const t2 = doc.createElement("template"); - t2.innerHTML = isSVG ? `${content}` : content; - template = t2.content; - if (isSVG) { - const wrapper = template.firstChild; - while (wrapper.firstChild) { - template.appendChild(wrapper.firstChild); - } - template.removeChild(wrapper); - } - staticTemplateCache.set(content, template); - } - parent.insertBefore(template.cloneNode(true), anchor); - return [ - before ? before.nextSibling : parent.firstChild, - anchor ? anchor.previousSibling : parent.lastChild - ]; - } -}; -function patchClass(el, value, isSVG) { - const transitionClasses = el._vtc; - if (transitionClasses) { - value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(" "); - } - if (value == null) { - el.removeAttribute("class"); - } else if (isSVG) { - el.setAttribute("class", value); - } else { - el.className = value; - } -} -function patchStyle(el, prev, next) { - const style2 = el.style; - const currentDisplay = style2.display; - if (!next) { - el.removeAttribute("style"); - } else if (isString(next)) { - if (prev !== next) { - style2.cssText = next; - } - } else { - for (const key in next) { - setStyle(style2, key, next[key]); - } - if (prev && !isString(prev)) { - for (const key in prev) { - if (next[key] == null) { - setStyle(style2, key, ""); - } - } - } - } - if ("_vod" in el) { - style2.display = currentDisplay; - } -} -const importantRE = /\s*!important$/; -function setStyle(style2, name, val) { - if (isArray(val)) { - val.forEach((v2) => setStyle(style2, name, v2)); - } else { - if (name.startsWith("--")) { - style2.setProperty(name, val); - } else { - const prefixed = autoPrefix(style2, name); - if (importantRE.test(val)) { - style2.setProperty(hyphenate(prefixed), val.replace(importantRE, ""), "important"); - } else { - style2[prefixed] = val; - } - } - } -} -const prefixes = ["Webkit", "Moz", "ms"]; -const prefixCache = {}; -function autoPrefix(style2, rawName) { - const cached = prefixCache[rawName]; - if (cached) { - return cached; - } - let name = camelize(rawName); - if (name !== "filter" && name in style2) { - return prefixCache[rawName] = name; - } - name = capitalize(name); - for (let i2 = 0; i2 < prefixes.length; i2++) { - const prefixed = prefixes[i2] + name; - if (prefixed in style2) { - return prefixCache[rawName] = prefixed; - } - } - return rawName; -} -const xlinkNS = "http://www.w3.org/1999/xlink"; -function patchAttr(el, key, value, isSVG, instance) { - if (isSVG && key.startsWith("xlink:")) { - if (value == null) { - el.removeAttributeNS(xlinkNS, key.slice(6, key.length)); - } else { - el.setAttributeNS(xlinkNS, key, value); - } - } else { - const isBoolean = isSpecialBooleanAttr(key); - if (value == null || isBoolean && !includeBooleanAttr(value)) { - el.removeAttribute(key); - } else { - el.setAttribute(key, isBoolean ? "" : value); - } - } -} -function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspense, unmountChildren) { - if (key === "innerHTML" || key === "textContent") { - if (prevChildren) { - unmountChildren(prevChildren, parentComponent, parentSuspense); - } - el[key] = value == null ? "" : value; - return; - } - if (key === "value" && el.tagName !== "PROGRESS") { - el._value = value; - const newValue = value == null ? "" : value; - if (el.value !== newValue) { - el.value = newValue; - } - if (value == null) { - el.removeAttribute(key); - } - return; - } - if (value === "" || value == null) { - const type = typeof el[key]; - if (type === "boolean") { - el[key] = includeBooleanAttr(value); - return; - } else if (value == null && type === "string") { - el[key] = ""; - el.removeAttribute(key); - return; - } else if (type === "number") { - try { - el[key] = 0; - } catch (_a2) { - } - el.removeAttribute(key); - return; - } - } - try { - el[key] = value; - } catch (e2) { - } -} -let _getNow = Date.now; -let skipTimestampCheck = false; -if (typeof window !== "undefined") { - if (_getNow() > document.createEvent("Event").timeStamp) { - _getNow = () => performance.now(); - } - const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i); - skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53); -} -let cachedNow = 0; -const p$1 = Promise.resolve(); -const reset = () => { - cachedNow = 0; -}; -const getNow = () => cachedNow || (p$1.then(reset), cachedNow = _getNow()); -function addEventListener(el, event, handler, options) { - el.addEventListener(event, handler, options); -} -function removeEventListener(el, event, handler, options) { - el.removeEventListener(event, handler, options); -} -function patchEvent(el, rawName, prevValue, nextValue, instance = null) { - const invokers = el._vei || (el._vei = {}); - const existingInvoker = invokers[rawName]; - if (nextValue && existingInvoker) { - existingInvoker.value = nextValue; - } else { - const [name, options] = parseName$1(rawName); - if (nextValue) { - const invoker = invokers[rawName] = createInvoker(nextValue, instance); - addEventListener(el, name, invoker, options); - } else if (existingInvoker) { - removeEventListener(el, name, existingInvoker, options); - invokers[rawName] = void 0; - } - } -} -const optionsModifierRE = /(?:Once|Passive|Capture)$/; -function parseName$1(name) { - let options; - if (optionsModifierRE.test(name)) { - options = {}; - let m2; - while (m2 = name.match(optionsModifierRE)) { - name = name.slice(0, name.length - m2[0].length); - options[m2[0].toLowerCase()] = true; - } - } - return [hyphenate(name.slice(2)), options]; -} -function createInvoker(initialValue, instance) { - const invoker = (e2) => { - const timeStamp = e2.timeStamp || _getNow(); - if (skipTimestampCheck || timeStamp >= invoker.attached - 1) { - callWithAsyncErrorHandling(patchStopImmediatePropagation(e2, invoker.value), instance, 5, [e2]); - } - }; - invoker.value = initialValue; - invoker.attached = getNow(); - return invoker; -} -function patchStopImmediatePropagation(e2, value) { - if (isArray(value)) { - const originalStop = e2.stopImmediatePropagation; - e2.stopImmediatePropagation = () => { - originalStop.call(e2); - e2._stopped = true; - }; - return value.map((fn2) => (e3) => !e3._stopped && fn2(e3)); - } else { - return value; - } -} -const nativeOnRE = /^on[a-z]/; -const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => { - if (key === "class") { - patchClass(el, nextValue, isSVG); - } else if (key === "style") { - patchStyle(el, prevValue, nextValue); - } else if (isOn(key)) { - if (!isModelListener(key)) { - patchEvent(el, key, prevValue, nextValue, parentComponent); - } - } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) { - patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren); - } else { - if (key === "true-value") { - el._trueValue = nextValue; - } else if (key === "false-value") { - el._falseValue = nextValue; - } - patchAttr(el, key, nextValue, isSVG); - } -}; -function shouldSetAsProp(el, key, value, isSVG) { - if (isSVG) { - if (key === "innerHTML" || key === "textContent") { - return true; - } - if (key in el && nativeOnRE.test(key) && isFunction(value)) { - return true; - } - return false; - } - if (key === "spellcheck" || key === "draggable") { - return false; - } - if (key === "form") { - return false; - } - if (key === "list" && el.tagName === "INPUT") { - return false; - } - if (key === "type" && el.tagName === "TEXTAREA") { - return false; - } - if (nativeOnRE.test(key) && isString(value)) { - return false; - } - return key in el; -} -const TRANSITION = "transition"; -const ANIMATION = "animation"; -const Transition = (props, { slots }) => h$1(BaseTransition, resolveTransitionProps(props), slots); -Transition.displayName = "Transition"; -const DOMTransitionPropsValidators = { - name: String, - type: String, - css: { - type: Boolean, - default: true - }, - duration: [String, Number, Object], - enterFromClass: String, - enterActiveClass: String, - enterToClass: String, - appearFromClass: String, - appearActiveClass: String, - appearToClass: String, - leaveFromClass: String, - leaveActiveClass: String, - leaveToClass: String -}; -Transition.props = /* @__PURE__ */ extend({}, BaseTransition.props, DOMTransitionPropsValidators); -const callHook = (hook, args = []) => { - if (isArray(hook)) { - hook.forEach((h2) => h2(...args)); - } else if (hook) { - hook(...args); - } -}; -const hasExplicitCallback = (hook) => { - return hook ? isArray(hook) ? hook.some((h2) => h2.length > 1) : hook.length > 1 : false; -}; -function resolveTransitionProps(rawProps) { - const baseProps = {}; - for (const key in rawProps) { - if (!(key in DOMTransitionPropsValidators)) { - baseProps[key] = rawProps[key]; - } - } - if (rawProps.css === false) { - return baseProps; - } - const { name = "v", type, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps; - const durations = normalizeDuration(duration); - const enterDuration = durations && durations[0]; - const leaveDuration = durations && durations[1]; - const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps; - const finishEnter = (el, isAppear, done) => { - removeTransitionClass(el, isAppear ? appearToClass : enterToClass); - removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass); - done && done(); - }; - const finishLeave = (el, done) => { - removeTransitionClass(el, leaveToClass); - removeTransitionClass(el, leaveActiveClass); - done && done(); - }; - const makeEnterHook = (isAppear) => { - return (el, done) => { - const hook = isAppear ? onAppear : onEnter; - const resolve2 = () => finishEnter(el, isAppear, done); - callHook(hook, [el, resolve2]); - nextFrame(() => { - removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass); - addTransitionClass(el, isAppear ? appearToClass : enterToClass); - if (!hasExplicitCallback(hook)) { - whenTransitionEnds(el, type, enterDuration, resolve2); - } - }); - }; - }; - return extend(baseProps, { - onBeforeEnter(el) { - callHook(onBeforeEnter, [el]); - addTransitionClass(el, enterFromClass); - addTransitionClass(el, enterActiveClass); - }, - onBeforeAppear(el) { - callHook(onBeforeAppear, [el]); - addTransitionClass(el, appearFromClass); - addTransitionClass(el, appearActiveClass); - }, - onEnter: makeEnterHook(false), - onAppear: makeEnterHook(true), - onLeave(el, done) { - const resolve2 = () => finishLeave(el, done); - addTransitionClass(el, leaveFromClass); - forceReflow(); - addTransitionClass(el, leaveActiveClass); - nextFrame(() => { - removeTransitionClass(el, leaveFromClass); - addTransitionClass(el, leaveToClass); - if (!hasExplicitCallback(onLeave)) { - whenTransitionEnds(el, type, leaveDuration, resolve2); - } - }); - callHook(onLeave, [el, resolve2]); - }, - onEnterCancelled(el) { - finishEnter(el, false); - callHook(onEnterCancelled, [el]); - }, - onAppearCancelled(el) { - finishEnter(el, true); - callHook(onAppearCancelled, [el]); - }, - onLeaveCancelled(el) { - finishLeave(el); - callHook(onLeaveCancelled, [el]); - } - }); -} -function normalizeDuration(duration) { - if (duration == null) { - return null; - } else if (isObject(duration)) { - return [NumberOf(duration.enter), NumberOf(duration.leave)]; - } else { - const n2 = NumberOf(duration); - return [n2, n2]; - } -} -function NumberOf(val) { - const res = toNumber(val); - return res; -} -function addTransitionClass(el, cls) { - cls.split(/\s+/).forEach((c2) => c2 && el.classList.add(c2)); - (el._vtc || (el._vtc = new Set())).add(cls); -} -function removeTransitionClass(el, cls) { - cls.split(/\s+/).forEach((c2) => c2 && el.classList.remove(c2)); - const { _vtc } = el; - if (_vtc) { - _vtc.delete(cls); - if (!_vtc.size) { - el._vtc = void 0; - } - } -} -function nextFrame(cb) { - requestAnimationFrame(() => { - requestAnimationFrame(cb); - }); -} -let endId = 0; -function whenTransitionEnds(el, expectedType, explicitTimeout, resolve2) { - const id = el._endId = ++endId; - const resolveIfNotStale = () => { - if (id === el._endId) { - resolve2(); - } - }; - if (explicitTimeout) { - return setTimeout(resolveIfNotStale, explicitTimeout); - } - const { type, timeout, propCount } = getTransitionInfo(el, expectedType); - if (!type) { - return resolve2(); - } - const endEvent = type + "end"; - let ended = 0; - const end = () => { - el.removeEventListener(endEvent, onEnd); - resolveIfNotStale(); - }; - const onEnd = (e2) => { - if (e2.target === el && ++ended >= propCount) { - end(); - } - }; - setTimeout(() => { - if (ended < propCount) { - end(); - } - }, timeout + 1); - el.addEventListener(endEvent, onEnd); -} -function getTransitionInfo(el, expectedType) { - const styles = window.getComputedStyle(el); - const getStyleProperties = (key) => (styles[key] || "").split(", "); - const transitionDelays = getStyleProperties(TRANSITION + "Delay"); - const transitionDurations = getStyleProperties(TRANSITION + "Duration"); - const transitionTimeout = getTimeout(transitionDelays, transitionDurations); - const animationDelays = getStyleProperties(ANIMATION + "Delay"); - const animationDurations = getStyleProperties(ANIMATION + "Duration"); - const animationTimeout = getTimeout(animationDelays, animationDurations); - let type = null; - let timeout = 0; - let propCount = 0; - if (expectedType === TRANSITION) { - if (transitionTimeout > 0) { - type = TRANSITION; - timeout = transitionTimeout; - propCount = transitionDurations.length; - } - } else if (expectedType === ANIMATION) { - if (animationTimeout > 0) { - type = ANIMATION; - timeout = animationTimeout; - propCount = animationDurations.length; - } - } else { - timeout = Math.max(transitionTimeout, animationTimeout); - type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null; - propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0; - } - const hasTransform = type === TRANSITION && /\b(transform|all)(,|$)/.test(styles[TRANSITION + "Property"]); - return { - type, - timeout, - propCount, - hasTransform - }; -} -function getTimeout(delays, durations) { - while (delays.length < durations.length) { - delays = delays.concat(delays); - } - return Math.max(...durations.map((d2, i2) => toMs(d2) + toMs(delays[i2]))); -} -function toMs(s2) { - return Number(s2.slice(0, -1).replace(",", ".")) * 1e3; -} -function forceReflow() { - return document.body.offsetHeight; -} -const vShow = { - beforeMount(el, { value }, { transition }) { - el._vod = el.style.display === "none" ? "" : el.style.display; - if (transition && value) { - transition.beforeEnter(el); - } else { - setDisplay(el, value); - } - }, - mounted(el, { value }, { transition }) { - if (transition && value) { - transition.enter(el); - } - }, - updated(el, { value, oldValue }, { transition }) { - if (!value === !oldValue) - return; - if (transition) { - if (value) { - transition.beforeEnter(el); - setDisplay(el, true); - transition.enter(el); - } else { - transition.leave(el, () => { - setDisplay(el, false); - }); - } - } else { - setDisplay(el, value); - } - }, - beforeUnmount(el, { value }) { - setDisplay(el, value); - } -}; -function setDisplay(el, value) { - el.style.display = value ? el._vod : "none"; -} -const rendererOptions = extend({ patchProp }, nodeOps); -let renderer; -function ensureRenderer() { - return renderer || (renderer = createRenderer(rendererOptions)); -} -const createApp = (...args) => { - const app = ensureRenderer().createApp(...args); - const { mount } = app; - app.mount = (containerOrSelector) => { - const container = normalizeContainer(containerOrSelector); - if (!container) - return; - const component = app._component; - if (!isFunction(component) && !component.render && !component.template) { - component.template = container.innerHTML; - } - container.innerHTML = ""; - const proxy = mount(container, false, container instanceof SVGElement); - if (container instanceof Element) { - container.removeAttribute("v-cloak"); - container.setAttribute("data-v-app", ""); - } - return proxy; - }; - return app; -}; -function normalizeContainer(container) { - if (isString(container)) { - const res = document.querySelector(container); - return res; - } - return container; -} -var _export_sfc = (sfc, props) => { - for (const [key, val] of props) { - sfc[key] = val; - } - return sfc; -}; -const _sfc_main$1a = { - name: "VanDocNavLink", - props: { - base: String, - item: Object - }, - computed: { - itemName() { - const name = (this.item.title || this.item.name).split(" "); - return `${name[0]} ${name.slice(1).join(" ")}`; - }, - path() { - return `${this.base}${this.item.path}`; - }, - active() { - if (this.$route.path === this.path) { - return true; - } - if (this.item.path === "home") { - return this.$route.path === this.base; - } - return false; - } - }, - watch: { - active() { - this.scrollIntoView(); - } - }, - mounted() { - this.scrollIntoView(); - }, - methods: { - scrollIntoView() { - if (this.active && this.$el && this.$el.scrollIntoViewIfNeeded) { - this.$el.scrollIntoViewIfNeeded(); - } - } - } -}; -const _hoisted_1$16 = ["href", "innerHTML"]; -const _hoisted_2$11 = ["innerHTML"]; -function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) { - const _component_router_link = resolveComponent("router-link"); - return $props.item.path ? (openBlock(), createBlock(_component_router_link, { - key: 0, - class: normalizeClass({ active: $options.active }), - to: $options.path, - innerHTML: $options.itemName - }, null, 8, ["class", "to", "innerHTML"])) : $props.item.link ? (openBlock(), createElementBlock("a", { - key: 1, - href: $props.item.link, - innerHTML: $options.itemName - }, null, 8, _hoisted_1$16)) : (openBlock(), createElementBlock("a", { - key: 2, - innerHTML: $options.itemName - }, null, 8, _hoisted_2$11)); -} -var NavLink = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$g]]); -var Nav_vue_vue_type_style_index_0_lang = ".van-doc-nav{background-color:#fff;box-shadow:0 8px 12px #ebedf0;left:0;max-width:220px;min-width:220px;overflow-y:scroll;padding:24px 0;position:fixed;z-index:1}@media (min-width:1680px){.van-doc-nav{left:50%;margin-left:-840px}}.van-doc-nav::-webkit-scrollbar{background-color:initial;height:6px;width:6px}.van-doc-nav::-webkit-scrollbar-thumb{background-color:initial;border-radius:6px}.van-doc-nav:hover::-webkit-scrollbar-thumb{background-color:rgba(69,90,100,.2)}.van-doc-nav__group{margin-bottom:16px;padding-left:6px}.van-doc-nav__title{color:#455a64;font-size:15px;font-weight:600;line-height:28px;padding:8px 0 8px 24px}.van-doc-nav__item a{color:#455a64;display:block;font-size:14px;line-height:20px;margin:8px 0;padding:8px 0 8px 24px;transition:color .2s}.van-doc-nav__item a.active,.van-doc-nav__item a:hover{color:#4fc08d}.van-doc-nav__item a.active{background-color:#ebfff0;border-radius:999px;font-weight:600}.van-doc-nav__item a span{font-size:13px}@media (max-width:1300px){.van-doc-nav__item a{font-size:13px}.van-doc-nav__item:active{font-size:14px}}"; -const _sfc_main$19 = { - name: "VanDocNav", - components: { - [NavLink.name]: NavLink - }, - 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: offset } = window; - this.top = Math.max(0, 64 - offset); - } - } -}; -const _hoisted_1$15 = { class: "van-doc-nav__title" }; -function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) { - const _component_van_doc_nav_link = resolveComponent("van-doc-nav-link"); - return openBlock(), createElementBlock("div", { - class: "van-doc-nav", - style: normalizeStyle($options.style) - }, [ - (openBlock(true), createElementBlock(Fragment, null, renderList($props.navConfig, (group, index) => { - return openBlock(), createElementBlock("div", { - class: "van-doc-nav__group", - key: index - }, [ - createBaseVNode("div", _hoisted_1$15, toDisplayString(group.title), 1), - group.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(group.items, (item, groupIndex) => { - return openBlock(), createElementBlock("div", { - key: groupIndex, - class: "van-doc-nav__item" - }, [ - createVNode(_component_van_doc_nav_link, { - item, - base: $options.base - }, null, 8, ["item", "base"]) - ]); - }), 128)) : createCommentVNode("v-if", true) - ]); - }), 128)) - ], 4); -} -var DocNav = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$f]]); -var style = '/*! @docsearch/css 3.0.0-alpha.40 | MIT License | \xA9 Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,0.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-webkit-input-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0}}.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:fade-in .1s ease-in forwards;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"\xBB "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:1px;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}'; -/*! @docsearch/js 3.0.0-alpha.40 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -function e(t2) { - return (e = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e2) { - return typeof e2; - } : function(e2) { - return e2 && typeof Symbol == "function" && e2.constructor === Symbol && e2 !== Symbol.prototype ? "symbol" : typeof e2; - })(t2); -} -function t(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function n() { - return (n = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function r(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function o(e2) { - for (var n2 = 1; n2 < arguments.length; n2++) { - var o2 = arguments[n2] != null ? arguments[n2] : {}; - n2 % 2 ? r(Object(o2), true).forEach(function(n3) { - t(e2, n3, o2[n3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(o2)) : r(Object(o2)).forEach(function(t2) { - Object.defineProperty(e2, t2, Object.getOwnPropertyDescriptor(o2, t2)); - }); - } - return e2; -} -function c(e2, t2) { - if (e2 == null) - return {}; - var n2, r2, o2 = function(e3, t3) { - if (e3 == null) - return {}; - var n3, r3, o3 = {}, c3 = Object.keys(e3); - for (r3 = 0; r3 < c3.length; r3++) - n3 = c3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]); - return o3; - }(e2, t2); - if (Object.getOwnPropertySymbols) { - var c2 = Object.getOwnPropertySymbols(e2); - for (r2 = 0; r2 < c2.length; r2++) - n2 = c2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]); - } - return o2; -} -function i(e2, t2) { - return function(e3) { - if (Array.isArray(e3)) - return e3; - }(e2) || function(e3, t3) { - if (typeof Symbol == "undefined" || !(Symbol.iterator in Object(e3))) - return; - var n2 = [], r2 = true, o2 = false, c2 = void 0; - try { - for (var i2, a2 = e3[Symbol.iterator](); !(r2 = (i2 = a2.next()).done) && (n2.push(i2.value), !t3 || n2.length !== t3); r2 = true) - ; - } catch (e4) { - o2 = true, c2 = e4; - } finally { - try { - r2 || a2.return == null || a2.return(); - } finally { - if (o2) - throw c2; - } - } - return n2; - }(e2, t2) || u(e2, t2) || function() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function a(e2) { - return function(e3) { - if (Array.isArray(e3)) - return l(e3); - }(e2) || function(e3) { - if (typeof Symbol != "undefined" && Symbol.iterator in Object(e3)) - return Array.from(e3); - }(e2) || u(e2) || function() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function u(e2, t2) { - if (e2) { - if (typeof e2 == "string") - return l(e2, t2); - var n2 = Object.prototype.toString.call(e2).slice(8, -1); - return n2 === "Object" && e2.constructor && (n2 = e2.constructor.name), n2 === "Map" || n2 === "Set" ? Array.from(e2) : n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2) ? l(e2, t2) : void 0; - } -} -function l(e2, t2) { - (t2 == null || t2 > e2.length) && (t2 = e2.length); - for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) - r2[n2] = e2[n2]; - return r2; -} -var s, f, p, m, h, d = {}, v = [], _ = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i; -function y(e2, t2) { - for (var n2 in t2) - e2[n2] = t2[n2]; - return e2; -} -function b(e2) { - var t2 = e2.parentNode; - t2 && t2.removeChild(e2); -} -function g(e2, t2, n2) { - var r2, o2, c2, i2 = arguments, a2 = {}; - for (c2 in t2) - c2 == "key" ? r2 = t2[c2] : c2 == "ref" ? o2 = t2[c2] : a2[c2] = t2[c2]; - if (arguments.length > 3) - for (n2 = [n2], c2 = 3; c2 < arguments.length; c2++) - n2.push(i2[c2]); - if (n2 != null && (a2.children = n2), typeof e2 == "function" && e2.defaultProps != null) - for (c2 in e2.defaultProps) - a2[c2] === void 0 && (a2[c2] = e2.defaultProps[c2]); - return O(e2, a2, r2, o2, null); -} -function O(e2, t2, n2, r2, o2) { - var c2 = { type: e2, props: t2, key: n2, ref: r2, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: o2 == null ? ++s.__v : o2 }; - return s.vnode != null && s.vnode(c2), c2; -} -function S(e2) { - return e2.children; -} -function E(e2, t2) { - this.props = e2, this.context = t2; -} -function w(e2, t2) { - if (t2 == null) - return e2.__ ? w(e2.__, e2.__.__k.indexOf(e2) + 1) : null; - for (var n2; t2 < e2.__k.length; t2++) - if ((n2 = e2.__k[t2]) != null && n2.__e != null) - return n2.__e; - return typeof e2.type == "function" ? w(e2) : null; -} -function j(e2) { - var t2, n2; - if ((e2 = e2.__) != null && e2.__c != null) { - for (e2.__e = e2.__c.base = null, t2 = 0; t2 < e2.__k.length; t2++) - if ((n2 = e2.__k[t2]) != null && n2.__e != null) { - e2.__e = e2.__c.base = n2.__e; - break; - } - return j(e2); - } -} -function P(e2) { - (!e2.__d && (e2.__d = true) && f.push(e2) && !I.__r++ || m !== s.debounceRendering) && ((m = s.debounceRendering) || p)(I); -} -function I() { - for (var e2; I.__r = f.length; ) - e2 = f.sort(function(e3, t2) { - return e3.__v.__b - t2.__v.__b; - }), f = [], e2.some(function(e3) { - var t2, n2, r2, o2, c2, i2; - e3.__d && (c2 = (o2 = (t2 = e3).__v).__e, (i2 = t2.__P) && (n2 = [], (r2 = y({}, o2)).__v = o2.__v + 1, H(i2, o2, r2, t2.__n, i2.ownerSVGElement !== void 0, o2.__h != null ? [c2] : null, n2, c2 == null ? w(o2) : c2, o2.__h), M(n2, o2), o2.__e != c2 && j(o2))); - }); -} -function D(e2, t2, n2, r2, o2, c2, i2, a2, u2, l2) { - var s2, f2, p2, m2, h2, _2, y2, b2 = r2 && r2.__k || v, g2 = b2.length; - for (n2.__k = [], s2 = 0; s2 < t2.length; s2++) - if ((m2 = n2.__k[s2] = (m2 = t2[s2]) == null || typeof m2 == "boolean" ? null : typeof m2 == "string" || typeof m2 == "number" ? O(null, m2, null, null, m2) : Array.isArray(m2) ? O(S, { children: m2 }, null, null, null) : m2.__b > 0 ? O(m2.type, m2.props, m2.key, null, m2.__v) : m2) != null) { - if (m2.__ = n2, m2.__b = n2.__b + 1, (p2 = b2[s2]) === null || p2 && m2.key == p2.key && m2.type === p2.type) - b2[s2] = void 0; - else - for (f2 = 0; f2 < g2; f2++) { - if ((p2 = b2[f2]) && m2.key == p2.key && m2.type === p2.type) { - b2[f2] = void 0; - break; - } - p2 = null; - } - H(e2, m2, p2 = p2 || d, o2, c2, i2, a2, u2, l2), h2 = m2.__e, (f2 = m2.ref) && p2.ref != f2 && (y2 || (y2 = []), p2.ref && y2.push(p2.ref, null, m2), y2.push(f2, m2.__c || h2, m2)), h2 != null ? (_2 == null && (_2 = h2), typeof m2.type == "function" && m2.__k != null && m2.__k === p2.__k ? m2.__d = u2 = k(m2, u2, e2) : u2 = N(e2, m2, p2, b2, h2, u2), l2 || n2.type !== "option" ? typeof n2.type == "function" && (n2.__d = u2) : e2.value = "") : u2 && p2.__e == u2 && u2.parentNode != e2 && (u2 = w(p2)); - } - for (n2.__e = _2, s2 = g2; s2--; ) - b2[s2] != null && (typeof n2.type == "function" && b2[s2].__e != null && b2[s2].__e == n2.__d && (n2.__d = w(r2, s2 + 1)), U(b2[s2], b2[s2])); - if (y2) - for (s2 = 0; s2 < y2.length; s2++) - L(y2[s2], y2[++s2], y2[++s2]); -} -function k(e2, t2, n2) { - var r2, o2; - for (r2 = 0; r2 < e2.__k.length; r2++) - (o2 = e2.__k[r2]) && (o2.__ = e2, t2 = typeof o2.type == "function" ? k(o2, t2, n2) : N(n2, o2, o2, e2.__k, o2.__e, t2)); - return t2; -} -function C(e2, t2) { - return t2 = t2 || [], e2 == null || typeof e2 == "boolean" || (Array.isArray(e2) ? e2.some(function(e3) { - C(e3, t2); - }) : t2.push(e2)), t2; -} -function N(e2, t2, n2, r2, o2, c2) { - var i2, a2, u2; - if (t2.__d !== void 0) - i2 = t2.__d, t2.__d = void 0; - else if (n2 == null || o2 != c2 || o2.parentNode == null) - e: - if (c2 == null || c2.parentNode !== e2) - e2.appendChild(o2), i2 = null; - else { - for (a2 = c2, u2 = 0; (a2 = a2.nextSibling) && u2 < r2.length; u2 += 2) - if (a2 == o2) - break e; - e2.insertBefore(o2, c2), i2 = c2; - } - return i2 !== void 0 ? i2 : o2.nextSibling; -} -function A(e2, t2, n2) { - t2[0] === "-" ? e2.setProperty(t2, n2) : e2[t2] = n2 == null ? "" : typeof n2 != "number" || _.test(t2) ? n2 : n2 + "px"; -} -function x(e2, t2, n2, r2, o2) { - var c2; - e: - if (t2 === "style") - if (typeof n2 == "string") - e2.style.cssText = n2; - else { - if (typeof r2 == "string" && (e2.style.cssText = r2 = ""), r2) - for (t2 in r2) - n2 && t2 in n2 || A(e2.style, t2, ""); - if (n2) - for (t2 in n2) - r2 && n2[t2] === r2[t2] || A(e2.style, t2, n2[t2]); - } - else if (t2[0] === "o" && t2[1] === "n") - c2 = t2 !== (t2 = t2.replace(/Capture$/, "")), t2 = t2.toLowerCase() in e2 ? t2.toLowerCase().slice(2) : t2.slice(2), e2.l || (e2.l = {}), e2.l[t2 + c2] = n2, n2 ? r2 || e2.addEventListener(t2, c2 ? T : R, c2) : e2.removeEventListener(t2, c2 ? T : R, c2); - else if (t2 !== "dangerouslySetInnerHTML") { - if (o2) - t2 = t2.replace(/xlink[H:h]/, "h").replace(/sName$/, "s"); - else if (t2 !== "href" && t2 !== "list" && t2 !== "form" && t2 !== "download" && t2 in e2) - try { - e2[t2] = n2 == null ? "" : n2; - break e; - } catch (e3) { - } - typeof n2 == "function" || (n2 != null && (n2 !== false || t2[0] === "a" && t2[1] === "r") ? e2.setAttribute(t2, n2) : e2.removeAttribute(t2)); - } -} -function R(e2) { - this.l[e2.type + false](s.event ? s.event(e2) : e2); -} -function T(e2) { - this.l[e2.type + true](s.event ? s.event(e2) : e2); -} -function H(e2, t2, n2, r2, o2, c2, i2, a2, u2) { - var l2, f2, p2, m2, h2, d2, v2, _2, b2, g2, O2, w2 = t2.type; - if (t2.constructor !== void 0) - return null; - n2.__h != null && (u2 = n2.__h, a2 = t2.__e = n2.__e, t2.__h = null, c2 = [a2]), (l2 = s.__b) && l2(t2); - try { - e: - if (typeof w2 == "function") { - if (_2 = t2.props, b2 = (l2 = w2.contextType) && r2[l2.__c], g2 = l2 ? b2 ? b2.props.value : l2.__ : r2, n2.__c ? v2 = (f2 = t2.__c = n2.__c).__ = f2.__E : ("prototype" in w2 && w2.prototype.render ? t2.__c = f2 = new w2(_2, g2) : (t2.__c = f2 = new E(_2, g2), f2.constructor = w2, f2.render = F), b2 && b2.sub(f2), f2.props = _2, f2.state || (f2.state = {}), f2.context = g2, f2.__n = r2, p2 = f2.__d = true, f2.__h = []), f2.__s == null && (f2.__s = f2.state), w2.getDerivedStateFromProps != null && (f2.__s == f2.state && (f2.__s = y({}, f2.__s)), y(f2.__s, w2.getDerivedStateFromProps(_2, f2.__s))), m2 = f2.props, h2 = f2.state, p2) - w2.getDerivedStateFromProps == null && f2.componentWillMount != null && f2.componentWillMount(), f2.componentDidMount != null && f2.__h.push(f2.componentDidMount); - else { - if (w2.getDerivedStateFromProps == null && _2 !== m2 && f2.componentWillReceiveProps != null && f2.componentWillReceiveProps(_2, g2), !f2.__e && f2.shouldComponentUpdate != null && f2.shouldComponentUpdate(_2, f2.__s, g2) === false || t2.__v === n2.__v) { - f2.props = _2, f2.state = f2.__s, t2.__v !== n2.__v && (f2.__d = false), f2.__v = t2, t2.__e = n2.__e, t2.__k = n2.__k, f2.__h.length && i2.push(f2); - break e; - } - f2.componentWillUpdate != null && f2.componentWillUpdate(_2, f2.__s, g2), f2.componentDidUpdate != null && f2.__h.push(function() { - f2.componentDidUpdate(m2, h2, d2); - }); - } - f2.context = g2, f2.props = _2, f2.state = f2.__s, (l2 = s.__r) && l2(t2), f2.__d = false, f2.__v = t2, f2.__P = e2, l2 = f2.render(f2.props, f2.state, f2.context), f2.state = f2.__s, f2.getChildContext != null && (r2 = y(y({}, r2), f2.getChildContext())), p2 || f2.getSnapshotBeforeUpdate == null || (d2 = f2.getSnapshotBeforeUpdate(m2, h2)), O2 = l2 != null && l2.type === S && l2.key == null ? l2.props.children : l2, D(e2, Array.isArray(O2) ? O2 : [O2], t2, n2, r2, o2, c2, i2, a2, u2), f2.base = t2.__e, t2.__h = null, f2.__h.length && i2.push(f2), v2 && (f2.__E = f2.__ = null), f2.__e = false; - } else - c2 == null && t2.__v === n2.__v ? (t2.__k = n2.__k, t2.__e = n2.__e) : t2.__e = q(n2.__e, t2, n2, r2, o2, c2, i2, u2); - (l2 = s.diffed) && l2(t2); - } catch (e3) { - t2.__v = null, (u2 || c2 != null) && (t2.__e = a2, t2.__h = !!u2, c2[c2.indexOf(a2)] = null), s.__e(e3, t2, n2); - } -} -function M(e2, t2) { - s.__c && s.__c(t2, e2), e2.some(function(t3) { - try { - e2 = t3.__h, t3.__h = [], e2.some(function(e3) { - e3.call(t3); - }); - } catch (e3) { - s.__e(e3, t3.__v); - } - }); -} -function q(e2, t2, n2, r2, o2, c2, i2, a2) { - var u2, l2, s2, f2, p2 = n2.props, m2 = t2.props, h2 = t2.type, _2 = 0; - if (h2 === "svg" && (o2 = true), c2 != null) { - for (; _2 < c2.length; _2++) - if ((u2 = c2[_2]) && (u2 === e2 || (h2 ? u2.localName == h2 : u2.nodeType == 3))) { - e2 = u2, c2[_2] = null; - break; - } - } - if (e2 == null) { - if (h2 === null) - return document.createTextNode(m2); - e2 = o2 ? document.createElementNS("http://www.w3.org/2000/svg", h2) : document.createElement(h2, m2.is && m2), c2 = null, a2 = false; - } - if (h2 === null) - p2 === m2 || a2 && e2.data === m2 || (e2.data = m2); - else { - if (c2 = c2 && v.slice.call(e2.childNodes), l2 = (p2 = n2.props || d).dangerouslySetInnerHTML, s2 = m2.dangerouslySetInnerHTML, !a2) { - if (c2 != null) - for (p2 = {}, f2 = 0; f2 < e2.attributes.length; f2++) - p2[e2.attributes[f2].name] = e2.attributes[f2].value; - (s2 || l2) && (s2 && (l2 && s2.__html == l2.__html || s2.__html === e2.innerHTML) || (e2.innerHTML = s2 && s2.__html || "")); - } - if (function(e3, t3, n3, r3, o3) { - var c3; - for (c3 in n3) - c3 === "children" || c3 === "key" || c3 in t3 || x(e3, c3, null, n3[c3], r3); - for (c3 in t3) - o3 && typeof t3[c3] != "function" || c3 === "children" || c3 === "key" || c3 === "value" || c3 === "checked" || n3[c3] === t3[c3] || x(e3, c3, t3[c3], n3[c3], r3); - }(e2, m2, p2, o2, a2), s2) - t2.__k = []; - else if (_2 = t2.props.children, D(e2, Array.isArray(_2) ? _2 : [_2], t2, n2, r2, o2 && h2 !== "foreignObject", c2, i2, e2.firstChild, a2), c2 != null) - for (_2 = c2.length; _2--; ) - c2[_2] != null && b(c2[_2]); - a2 || ("value" in m2 && (_2 = m2.value) !== void 0 && (_2 !== e2.value || h2 === "progress" && !_2) && x(e2, "value", _2, p2.value, false), "checked" in m2 && (_2 = m2.checked) !== void 0 && _2 !== e2.checked && x(e2, "checked", _2, p2.checked, false)); - } - return e2; -} -function L(e2, t2, n2) { - try { - typeof e2 == "function" ? e2(t2) : e2.current = t2; - } catch (e3) { - s.__e(e3, n2); - } -} -function U(e2, t2, n2) { - var r2, o2, c2; - if (s.unmount && s.unmount(e2), (r2 = e2.ref) && (r2.current && r2.current !== e2.__e || L(r2, null, t2)), n2 || typeof e2.type == "function" || (n2 = (o2 = e2.__e) != null), e2.__e = e2.__d = void 0, (r2 = e2.__c) != null) { - if (r2.componentWillUnmount) - try { - r2.componentWillUnmount(); - } catch (e3) { - s.__e(e3, t2); - } - r2.base = r2.__P = null; - } - if (r2 = e2.__k) - for (c2 = 0; c2 < r2.length; c2++) - r2[c2] && U(r2[c2], t2, n2); - o2 != null && b(o2); -} -function F(e2, t2, n2) { - return this.constructor(e2, n2); -} -function V(e2, t2, n2) { - var r2, o2, c2; - s.__ && s.__(e2, t2), o2 = (r2 = typeof n2 == "function") ? null : n2 && n2.__k || t2.__k, c2 = [], H(t2, e2 = (!r2 && n2 || t2).__k = g(S, null, [e2]), o2 || d, d, t2.ownerSVGElement !== void 0, !r2 && n2 ? [n2] : o2 ? null : t2.firstChild ? v.slice.call(t2.childNodes) : null, c2, !r2 && n2 ? n2 : o2 ? o2.__e : t2.firstChild, r2), M(c2, e2); -} -function B(e2, t2) { - V(e2, t2, B); -} -function z(e2, t2, n2) { - var r2, o2, c2, i2 = arguments, a2 = y({}, e2.props); - for (c2 in t2) - c2 == "key" ? r2 = t2[c2] : c2 == "ref" ? o2 = t2[c2] : a2[c2] = t2[c2]; - if (arguments.length > 3) - for (n2 = [n2], c2 = 3; c2 < arguments.length; c2++) - n2.push(i2[c2]); - return n2 != null && (a2.children = n2), O(e2.type, a2, r2 || e2.key, o2 || e2.ref, null); -} -s = { __e: function(e2, t2) { - for (var n2, r2, o2; t2 = t2.__; ) - if ((n2 = t2.__c) && !n2.__) - try { - if ((r2 = n2.constructor) && r2.getDerivedStateFromError != null && (n2.setState(r2.getDerivedStateFromError(e2)), o2 = n2.__d), n2.componentDidCatch != null && (n2.componentDidCatch(e2), o2 = n2.__d), o2) - return n2.__E = n2; - } catch (t3) { - e2 = t3; - } - throw e2; -}, __v: 0 }, E.prototype.setState = function(e2, t2) { - var n2; - n2 = this.__s != null && this.__s !== this.state ? this.__s : this.__s = y({}, this.state), typeof e2 == "function" && (e2 = e2(y({}, n2), this.props)), e2 && y(n2, e2), e2 != null && this.__v && (t2 && this.__h.push(t2), P(this)); -}, E.prototype.forceUpdate = function(e2) { - this.__v && (this.__e = true, e2 && this.__h.push(e2), P(this)); -}, E.prototype.render = S, f = [], p = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, I.__r = 0, h = 0; -var W, K, J, $ = 0, Q = [], Y = s.__b, G = s.__r, Z = s.diffed, X = s.__c, ee = s.unmount; -function te(e2, t2) { - s.__h && s.__h(K, e2, $ || t2), $ = 0; - var n2 = K.__H || (K.__H = { __: [], __h: [] }); - return e2 >= n2.__.length && n2.__.push({}), n2.__[e2]; -} -function ne(e2, t2, n2) { - var r2 = te(W++, 2); - return r2.t = e2, r2.__c || (r2.__ = [n2 ? n2(t2) : se(void 0, t2), function(e3) { - var t3 = r2.t(r2.__[0], e3); - r2.__[0] !== t3 && (r2.__ = [t3, r2.__[1]], r2.__c.setState({})); - }], r2.__c = K), r2.__; -} -function re(e2, t2) { - var n2 = te(W++, 4); - !s.__s && le(n2.__H, t2) && (n2.__ = e2, n2.__H = t2, K.__h.push(n2)); -} -function oe(e2, t2) { - var n2 = te(W++, 7); - return le(n2.__H, t2) && (n2.__ = e2(), n2.__H = t2, n2.__h = e2), n2.__; -} -function ce() { - Q.forEach(function(e2) { - if (e2.__P) - try { - e2.__H.__h.forEach(ae), e2.__H.__h.forEach(ue), e2.__H.__h = []; - } catch (t2) { - e2.__H.__h = [], s.__e(t2, e2.__v); - } - }), Q = []; -} -s.__b = function(e2) { - K = null, Y && Y(e2); -}, s.__r = function(e2) { - G && G(e2), W = 0; - var t2 = (K = e2.__c).__H; - t2 && (t2.__h.forEach(ae), t2.__h.forEach(ue), t2.__h = []); -}, s.diffed = function(e2) { - Z && Z(e2); - var t2 = e2.__c; - t2 && t2.__H && t2.__H.__h.length && (Q.push(t2) !== 1 && J === s.requestAnimationFrame || ((J = s.requestAnimationFrame) || function(e3) { - var t3, n2 = function() { - clearTimeout(r2), ie && cancelAnimationFrame(t3), setTimeout(e3); - }, r2 = setTimeout(n2, 100); - ie && (t3 = requestAnimationFrame(n2)); - })(ce)), K = void 0; -}, s.__c = function(e2, t2) { - t2.some(function(e3) { - try { - e3.__h.forEach(ae), e3.__h = e3.__h.filter(function(e4) { - return !e4.__ || ue(e4); - }); - } catch (n2) { - t2.some(function(e4) { - e4.__h && (e4.__h = []); - }), t2 = [], s.__e(n2, e3.__v); - } - }), X && X(e2, t2); -}, s.unmount = function(e2) { - ee && ee(e2); - var t2 = e2.__c; - if (t2 && t2.__H) - try { - t2.__H.__.forEach(ae); - } catch (e3) { - s.__e(e3, t2.__v); - } -}; -var ie = typeof requestAnimationFrame == "function"; -function ae(e2) { - var t2 = K; - typeof e2.__c == "function" && e2.__c(), K = t2; -} -function ue(e2) { - var t2 = K; - e2.__c = e2.__(), K = t2; -} -function le(e2, t2) { - return !e2 || e2.length !== t2.length || t2.some(function(t3, n2) { - return t3 !== e2[n2]; - }); -} -function se(e2, t2) { - return typeof t2 == "function" ? t2(e2) : t2; -} -function fe(e2, t2) { - for (var n2 in t2) - e2[n2] = t2[n2]; - return e2; -} -function pe(e2, t2) { - for (var n2 in e2) - if (n2 !== "__source" && !(n2 in t2)) - return true; - for (var r2 in t2) - if (r2 !== "__source" && e2[r2] !== t2[r2]) - return true; - return false; -} -function me(e2) { - this.props = e2; -} -(me.prototype = new E()).isPureReactComponent = true, me.prototype.shouldComponentUpdate = function(e2, t2) { - return pe(this.props, e2) || pe(this.state, t2); -}; -var he = s.__b; -s.__b = function(e2) { - e2.type && e2.type.__f && e2.ref && (e2.props.ref = e2.ref, e2.ref = null), he && he(e2); -}; -var de = typeof Symbol != "undefined" && Symbol.for && Symbol.for("react.forward_ref") || 3911; -var ve = function(e2, t2) { - return e2 == null ? null : C(C(e2).map(t2)); -}, _e = { map: ve, forEach: ve, count: function(e2) { - return e2 ? C(e2).length : 0; -}, only: function(e2) { - var t2 = C(e2); - if (t2.length !== 1) - throw "Children.only"; - return t2[0]; -}, toArray: C }, ye = s.__e; -function be() { - this.__u = 0, this.t = null, this.__b = null; -} -function ge(e2) { - var t2 = e2.__.__c; - return t2 && t2.__e && t2.__e(e2); -} -function Oe() { - this.u = null, this.o = null; -} -s.__e = function(e2, t2, n2) { - if (e2.then) { - for (var r2, o2 = t2; o2 = o2.__; ) - if ((r2 = o2.__c) && r2.__c) - return t2.__e == null && (t2.__e = n2.__e, t2.__k = n2.__k), r2.__c(e2, t2); - } - ye(e2, t2, n2); -}, (be.prototype = new E()).__c = function(e2, t2) { - var n2 = t2.__c, r2 = this; - r2.t == null && (r2.t = []), r2.t.push(n2); - var o2 = ge(r2.__v), c2 = false, i2 = function() { - c2 || (c2 = true, n2.componentWillUnmount = n2.__c, o2 ? o2(a2) : a2()); - }; - n2.__c = n2.componentWillUnmount, n2.componentWillUnmount = function() { - i2(), n2.__c && n2.__c(); - }; - var a2 = function() { - if (!--r2.__u) { - if (r2.state.__e) { - var e3 = r2.state.__e; - r2.__v.__k[0] = function e4(t4, n3, r3) { - return t4 && (t4.__v = null, t4.__k = t4.__k && t4.__k.map(function(t5) { - return e4(t5, n3, r3); - }), t4.__c && t4.__c.__P === n3 && (t4.__e && r3.insertBefore(t4.__e, t4.__d), t4.__c.__e = true, t4.__c.__P = r3)), t4; - }(e3, e3.__c.__P, e3.__c.__O); - } - var t3; - for (r2.setState({ __e: r2.__b = null }); t3 = r2.t.pop(); ) - t3.forceUpdate(); - } - }, u2 = t2.__h === true; - r2.__u++ || u2 || r2.setState({ __e: r2.__b = r2.__v.__k[0] }), e2.then(i2, i2); -}, be.prototype.componentWillUnmount = function() { - this.t = []; -}, be.prototype.render = function(e2, t2) { - if (this.__b) { - if (this.__v.__k) { - var n2 = document.createElement("div"), r2 = this.__v.__k[0].__c; - this.__v.__k[0] = function e3(t3, n3, r3) { - return t3 && (t3.__c && t3.__c.__H && (t3.__c.__H.__.forEach(function(e4) { - typeof e4.__c == "function" && e4.__c(); - }), t3.__c.__H = null), (t3 = fe({}, t3)).__c != null && (t3.__c.__P === r3 && (t3.__c.__P = n3), t3.__c = null), t3.__k = t3.__k && t3.__k.map(function(t4) { - return e3(t4, n3, r3); - })), t3; - }(this.__b, n2, r2.__O = r2.__P); - } - this.__b = null; - } - var o2 = t2.__e && g(S, null, e2.fallback); - return o2 && (o2.__h = null), [g(S, null, t2.__e ? null : e2.children), o2]; -}; -var Se = function(e2, t2, n2) { - if (++n2[1] === n2[0] && e2.o.delete(t2), e2.props.revealOrder && (e2.props.revealOrder[0] !== "t" || !e2.o.size)) - for (n2 = e2.u; n2; ) { - for (; n2.length > 3; ) - n2.pop()(); - if (n2[1] < n2[0]) - break; - e2.u = n2 = n2[2]; - } -}; -function Ee(e2) { - return this.getChildContext = function() { - return e2.context; - }, e2.children; -} -function we(e2) { - var t2 = this, n2 = e2.i; - t2.componentWillUnmount = function() { - V(null, t2.l), t2.l = null, t2.i = null; - }, t2.i && t2.i !== n2 && t2.componentWillUnmount(), e2.__v ? (t2.l || (t2.i = n2, t2.l = { nodeType: 1, parentNode: n2, childNodes: [], appendChild: function(e3) { - this.childNodes.push(e3), t2.i.appendChild(e3); - }, insertBefore: function(e3, n3) { - this.childNodes.push(e3), t2.i.appendChild(e3); - }, removeChild: function(e3) { - this.childNodes.splice(this.childNodes.indexOf(e3) >>> 1, 1), t2.i.removeChild(e3); - } }), V(g(Ee, { context: t2.context }, e2.__v), t2.l)) : t2.l && t2.componentWillUnmount(); -} -function je(e2, t2) { - return g(we, { __v: e2, i: t2 }); -} -(Oe.prototype = new E()).__e = function(e2) { - var t2 = this, n2 = ge(t2.__v), r2 = t2.o.get(e2); - return r2[0]++, function(o2) { - var c2 = function() { - t2.props.revealOrder ? (r2.push(o2), Se(t2, e2, r2)) : o2(); - }; - n2 ? n2(c2) : c2(); - }; -}, Oe.prototype.render = function(e2) { - this.u = null, this.o = new Map(); - var t2 = C(e2.children); - e2.revealOrder && e2.revealOrder[0] === "b" && t2.reverse(); - for (var n2 = t2.length; n2--; ) - this.o.set(t2[n2], this.u = [1, 0, this.u]); - return e2.children; -}, Oe.prototype.componentDidUpdate = Oe.prototype.componentDidMount = function() { - var e2 = this; - this.o.forEach(function(t2, n2) { - Se(e2, n2, t2); - }); -}; -var Pe = typeof Symbol != "undefined" && Symbol.for && Symbol.for("react.element") || 60103, Ie = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/, De = function(t2) { - return (typeof Symbol != "undefined" && e(Symbol()) == "symbol" ? /fil|che|rad/i : /fil|che|ra/i).test(t2); -}; -function ke(e2, t2, n2) { - return t2.__k == null && (t2.textContent = ""), V(e2, t2), typeof n2 == "function" && n2(), e2 ? e2.__c : null; -} -E.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function(e2) { - Object.defineProperty(E.prototype, e2, { configurable: true, get: function() { - return this["UNSAFE_" + e2]; - }, set: function(t2) { - Object.defineProperty(this, e2, { configurable: true, writable: true, value: t2 }); - } }); -}); -var Ce = s.event; -function Ne() { -} -function Ae() { - return this.cancelBubble; -} -function xe() { - return this.defaultPrevented; -} -s.event = function(e2) { - return Ce && (e2 = Ce(e2)), e2.persist = Ne, e2.isPropagationStopped = Ae, e2.isDefaultPrevented = xe, e2.nativeEvent = e2; -}; -var Re, Te = { configurable: true, get: function() { - return this.class; -} }, He = s.vnode; -s.vnode = function(e2) { - var t2 = e2.type, n2 = e2.props, r2 = n2; - if (typeof t2 == "string") { - for (var o2 in r2 = {}, n2) { - var c2 = n2[o2]; - o2 === "value" && "defaultValue" in n2 && c2 == null || (o2 === "defaultValue" && "value" in n2 && n2.value == null ? o2 = "value" : o2 === "download" && c2 === true ? c2 = "" : /ondoubleclick/i.test(o2) ? o2 = "ondblclick" : /^onchange(textarea|input)/i.test(o2 + t2) && !De(n2.type) ? o2 = "oninput" : /^on(Ani|Tra|Tou|BeforeInp)/.test(o2) ? o2 = o2.toLowerCase() : Ie.test(o2) ? o2 = o2.replace(/[A-Z0-9]/, "-$&").toLowerCase() : c2 === null && (c2 = void 0), r2[o2] = c2); - } - t2 == "select" && r2.multiple && Array.isArray(r2.value) && (r2.value = C(n2.children).forEach(function(e3) { - e3.props.selected = r2.value.indexOf(e3.props.value) != -1; - })), t2 == "select" && r2.defaultValue != null && (r2.value = C(n2.children).forEach(function(e3) { - e3.props.selected = r2.multiple ? r2.defaultValue.indexOf(e3.props.value) != -1 : r2.defaultValue == e3.props.value; - })), e2.props = r2; - } - t2 && n2.class != n2.className && (Te.enumerable = "className" in n2, n2.className != null && (r2.class = n2.className), Object.defineProperty(r2, "className", Te)), e2.$$typeof = Pe, He && He(e2); -}; -var Me = s.__r; -s.__r = function(e2) { - Me && Me(e2), Re = e2.__c; -}; -var qe = { ReactCurrentDispatcher: { current: { readContext: function(e2) { - return Re.__n[e2.__c].props.value; -} } } }; -(typeof performance == "undefined" ? "undefined" : e(performance)) == "object" && typeof performance.now == "function" && performance.now.bind(performance); -function Le(e2) { - return !!e2 && e2.$$typeof === Pe; -} -var Ue = { useState: function(e2) { - return $ = 1, ne(se, e2); -}, useReducer: ne, useEffect: function(e2, t2) { - var n2 = te(W++, 3); - !s.__s && le(n2.__H, t2) && (n2.__ = e2, n2.__H = t2, K.__H.__h.push(n2)); -}, useLayoutEffect: re, useRef: function(e2) { - return $ = 5, oe(function() { - return { current: e2 }; - }, []); -}, useImperativeHandle: function(e2, t2, n2) { - $ = 6, re(function() { - typeof e2 == "function" ? e2(t2()) : e2 && (e2.current = t2()); - }, n2 == null ? n2 : n2.concat(e2)); -}, useMemo: oe, useCallback: function(e2, t2) { - return $ = 8, oe(function() { - return e2; - }, t2); -}, useContext: function(e2) { - var t2 = K.context[e2.__c], n2 = te(W++, 9); - return n2.__c = e2, t2 ? (n2.__ == null && (n2.__ = true, t2.sub(K)), t2.props.value) : e2.__; -}, useDebugValue: function(e2, t2) { - s.useDebugValue && s.useDebugValue(t2 ? t2(e2) : e2); -}, version: "16.8.0", Children: _e, render: ke, hydrate: function(e2, t2, n2) { - return B(e2, t2), typeof n2 == "function" && n2(), e2 ? e2.__c : null; -}, unmountComponentAtNode: function(e2) { - return !!e2.__k && (V(null, e2), true); -}, createPortal: je, createElement: g, createContext: function(e2, t2) { - var n2 = { __c: t2 = "__cC" + h++, __: e2, Consumer: function(e3, t3) { - return e3.children(t3); - }, Provider: function(e3) { - var n3, r2; - return this.getChildContext || (n3 = [], (r2 = {})[t2] = this, this.getChildContext = function() { - return r2; - }, this.shouldComponentUpdate = function(e4) { - this.props.value !== e4.value && n3.some(P); - }, this.sub = function(e4) { - n3.push(e4); - var t3 = e4.componentWillUnmount; - e4.componentWillUnmount = function() { - n3.splice(n3.indexOf(e4), 1), t3 && t3.call(e4); - }; - }), e3.children; - } }; - return n2.Provider.__ = n2.Consumer.contextType = n2; -}, createFactory: function(e2) { - return g.bind(null, e2); -}, cloneElement: function(e2) { - return Le(e2) ? z.apply(null, arguments) : e2; -}, createRef: function() { - return { current: null }; -}, Fragment: S, isValidElement: Le, findDOMNode: function(e2) { - return e2 && (e2.base || e2.nodeType === 1 && e2) || null; -}, Component: E, PureComponent: me, memo: function(e2, t2) { - function n2(e3) { - var n3 = this.props.ref, r3 = n3 == e3.ref; - return !r3 && n3 && (n3.call ? n3(null) : n3.current = null), t2 ? !t2(this.props, e3) || !r3 : pe(this.props, e3); - } - function r2(t3) { - return this.shouldComponentUpdate = n2, g(e2, t3); - } - return r2.displayName = "Memo(" + (e2.displayName || e2.name) + ")", r2.prototype.isReactComponent = true, r2.__f = true, r2; -}, forwardRef: function(t2) { - function n2(n3, r2) { - var o2 = fe({}, n3); - return delete o2.ref, t2(o2, (r2 = n3.ref || r2) && (e(r2) != "object" || "current" in r2) ? r2 : null); - } - return n2.$$typeof = de, n2.render = n2, n2.prototype.isReactComponent = n2.__f = true, n2.displayName = "ForwardRef(" + (t2.displayName || t2.name) + ")", n2; -}, unstable_batchedUpdates: function(e2, t2) { - return e2(t2); -}, StrictMode: S, Suspense: be, SuspenseList: Oe, lazy: function(e2) { - var t2, n2, r2; - function o2(o3) { - if (t2 || (t2 = e2()).then(function(e3) { - n2 = e3.default || e3; - }, function(e3) { - r2 = e3; - }), r2) - throw r2; - if (!n2) - throw t2; - return g(n2, o3); - } - return o2.displayName = "Lazy", o2.__f = true, o2; -}, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: qe }; -function Fe() { - return Ue.createElement("svg", { width: "15", height: "15", className: "DocSearch-Control-Key-Icon" }, Ue.createElement("path", { d: "M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953", strokeWidth: "1.2", stroke: "currentColor", fill: "none", strokeLinecap: "square" })); -} -function Ve() { - return Ue.createElement("svg", { width: "20", height: "20", className: "DocSearch-Search-Icon", viewBox: "0 0 20 20" }, Ue.createElement("path", { d: "M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" })); -} -function Be() { - return (Be = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function ze(e2, t2) { - if (e2 == null) - return {}; - var n2, r2, o2 = function(e3, t3) { - if (e3 == null) - return {}; - var n3, r3, o3 = {}, c3 = Object.keys(e3); - for (r3 = 0; r3 < c3.length; r3++) - n3 = c3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]); - return o3; - }(e2, t2); - if (Object.getOwnPropertySymbols) { - var c2 = Object.getOwnPropertySymbols(e2); - for (r2 = 0; r2 < c2.length; r2++) - n2 = c2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]); - } - return o2; -} -var We = Ue.forwardRef(function(e2, t2) { - var n2 = e2.translations, r2 = n2 === void 0 ? {} : n2, o2 = ze(e2, ["translations"]), c2 = r2.buttonText, i2 = c2 === void 0 ? "Search" : c2, a2 = r2.buttonAriaLabel, u2 = a2 === void 0 ? "Search" : a2, l2 = oe(function() { - return typeof navigator != "undefined" ? /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "\u2318" : "Ctrl" : null; - }, []); - return Ue.createElement("button", Be({ type: "button", className: "DocSearch DocSearch-Button", "aria-label": u2 }, o2, { ref: t2 }), Ue.createElement("span", { className: "DocSearch-Button-Container" }, Ue.createElement(Ve, null), Ue.createElement("span", { className: "DocSearch-Button-Placeholder" }, i2)), Ue.createElement("span", { className: "DocSearch-Button-Keys" }, l2 !== null && Ue.createElement(Ue.Fragment, null, Ue.createElement("span", { className: "DocSearch-Button-Key" }, l2 === "Ctrl" ? Ue.createElement(Fe, null) : l2), Ue.createElement("span", { className: "DocSearch-Button-Key" }, "K")))); -}), Ke = 0; -function Je(e2) { - return e2.collections.length === 0 ? 0 : e2.collections.reduce(function(e3, t2) { - return e3 + t2.items.length; - }, 0); -} -function $e(e2, t2) { -} -function Ge(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function Ze(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function Xe(e2, t2, n2) { - var r2 = t2.initialState; - return { getState: function() { - return r2; - }, dispatch: function(o2, c2) { - var i2 = function(e3) { - for (var t3 = 1; t3 < arguments.length; t3++) { - var n3 = arguments[t3] != null ? arguments[t3] : {}; - t3 % 2 ? Ge(Object(n3), true).forEach(function(t4) { - Ze(e3, t4, n3[t4]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e3, Object.getOwnPropertyDescriptors(n3)) : Ge(Object(n3)).forEach(function(t4) { - Object.defineProperty(e3, t4, Object.getOwnPropertyDescriptor(n3, t4)); - }); - } - return e3; - }({}, r2); - r2 = e2(r2, { type: o2, props: t2, payload: c2 }), n2({ state: r2, prevState: i2 }); - } }; -} -function et(e2) { - return e2.reduce(function(e3, t2) { - return e3.concat(t2); - }, []); -} -function tt(e2, t2, n2, r2) { - if (!n2) - return null; - if (e2 < 0 && (t2 === null || r2 !== null && t2 === 0)) - return n2 + e2; - var o2 = (t2 === null ? -1 : t2) + e2; - return o2 <= -1 || o2 >= n2 ? r2 === null ? null : 0 : o2; -} -var nt = function() { -}; -function rt(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function ot(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function ct(e2) { - return (ct = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e3) { - return typeof e3; - } : function(e3) { - return e3 && typeof Symbol == "function" && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3; - })(e2); -} -function it(e2, t2) { - var n2 = []; - return Promise.resolve(e2(t2)).then(function(e3) { - return $e(Array.isArray(e3), "The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(ct(e3)), ":\n\n").concat(JSON.stringify(e3, null, 2))), Promise.all(e3.filter(function(e4) { - return Boolean(e4); - }).map(function(e4) { - if ($e(typeof e4.sourceId == "string"), n2.includes(e4.sourceId)) - throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e4.sourceId), " is not unique.")); - n2.push(e4.sourceId); - var t3 = function(e5) { - for (var t4 = 1; t4 < arguments.length; t4++) { - var n3 = arguments[t4] != null ? arguments[t4] : {}; - t4 % 2 ? rt(Object(n3), true).forEach(function(t5) { - ot(e5, t5, n3[t5]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e5, Object.getOwnPropertyDescriptors(n3)) : rt(Object(n3)).forEach(function(t5) { - Object.defineProperty(e5, t5, Object.getOwnPropertyDescriptor(n3, t5)); - }); - } - return e5; - }({ getItemInputValue: function(e5) { - return e5.state.query; - }, getItemUrl: function() { - }, onSelect: function(e5) { - (0, e5.setIsOpen)(false); - }, onActive: nt }, e4); - return Promise.resolve(t3); - })); - }); -} -function at(e2) { - var t2 = function(e3) { - var t3 = e3.collections.map(function(e4) { - return e4.items.length; - }).reduce(function(e4, t4, n3) { - var r3 = (e4[n3 - 1] || 0) + t4; - return e4.push(r3), e4; - }, []).reduce(function(t4, n3) { - return n3 <= e3.activeItemId ? t4 + 1 : t4; - }, 0); - return e3.collections[t3]; - }(e2); - if (!t2) - return null; - var n2 = t2.items[function(e3) { - for (var t3 = e3.state, n3 = e3.collection, r3 = false, o2 = 0, c2 = 0; r3 === false; ) { - var i2 = t3.collections[o2]; - if (i2 === n3) { - r3 = true; - break; - } - c2 += i2.items.length, o2++; - } - return t3.activeItemId - c2; - }({ state: e2, collection: t2 })], r2 = t2.source; - return { item: n2, itemInputValue: r2.getItemInputValue({ item: n2, state: e2 }), itemUrl: r2.getItemUrl({ item: n2, state: e2 }), source: r2 }; -} -function ut(e2, t2) { - return e2 === t2 || e2.contains(t2); -} -function lt(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function st(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? lt(Object(n2), true).forEach(function(t3) { - ft(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : lt(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function ft(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function pt(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function mt(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? pt(Object(n2), true).forEach(function(t3) { - ht(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : pt(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function ht(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function dt(e2) { - return function(e3) { - if (Array.isArray(e3)) - return vt(e3); - }(e2) || function(e3) { - if (typeof Symbol != "undefined" && Symbol.iterator in Object(e3)) - return Array.from(e3); - }(e2) || function(e3, t2) { - if (!e3) - return; - if (typeof e3 == "string") - return vt(e3, t2); - var n2 = Object.prototype.toString.call(e3).slice(8, -1); - n2 === "Object" && e3.constructor && (n2 = e3.constructor.name); - if (n2 === "Map" || n2 === "Set") - return Array.from(e3); - if (n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2)) - return vt(e3, t2); - }(e2) || function() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function vt(e2, t2) { - (t2 == null || t2 > e2.length) && (t2 = e2.length); - for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) - r2[n2] = e2[n2]; - return r2; -} -function _t(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function yt(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? _t(Object(n2), true).forEach(function(t3) { - bt(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : _t(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function bt(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function gt(e2) { - return (gt = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e3) { - return typeof e3; - } : function(e3) { - return e3 && typeof Symbol == "function" && e3.constructor === Symbol && e3 !== Symbol.prototype ? "symbol" : typeof e3; - })(e2); -} -function Ot(e2) { - return function(e3) { - if (Array.isArray(e3)) - return St(e3); - }(e2) || function(e3) { - if (typeof Symbol != "undefined" && Symbol.iterator in Object(e3)) - return Array.from(e3); - }(e2) || function(e3, t2) { - if (!e3) - return; - if (typeof e3 == "string") - return St(e3, t2); - var n2 = Object.prototype.toString.call(e3).slice(8, -1); - n2 === "Object" && e3.constructor && (n2 = e3.constructor.name); - if (n2 === "Map" || n2 === "Set") - return Array.from(e3); - if (n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2)) - return St(e3, t2); - }(e2) || function() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function St(e2, t2) { - (t2 == null || t2 > e2.length) && (t2 = e2.length); - for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) - r2[n2] = e2[n2]; - return r2; -} -function Et(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function wt(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? Et(Object(n2), true).forEach(function(t3) { - jt(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Et(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function jt(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function Pt(e2) { - return Boolean(e2.execute); -} -function It(e2, t2) { - return n2 = e2, Boolean(n2 == null ? void 0 : n2.execute) ? wt(wt({}, e2), {}, { requests: e2.queries.map(function(n3) { - return { query: n3, sourceId: t2, transformResponse: e2.transformResponse }; - }) }) : { items: e2, sourceId: t2 }; - var n2; -} -function Dt(e2) { - var t2 = e2.reduce(function(e3, t3) { - if (!Pt(t3)) - return e3.push(t3), e3; - var n2 = t3.searchClient, r2 = t3.execute, o2 = t3.requests, c2 = e3.find(function(e4) { - return Pt(t3) && Pt(e4) && e4.searchClient === n2 && e4.execute === r2; - }); - if (c2) { - var i2; - (i2 = c2.items).push.apply(i2, Ot(o2)); - } else { - var a2 = { execute: r2, items: o2, searchClient: n2 }; - e3.push(a2); - } - return e3; - }, []).map(function(e3) { - if (!Pt(e3)) - return Promise.resolve(e3); - var t3 = e3, n2 = t3.execute, r2 = t3.items; - return n2({ searchClient: t3.searchClient, requests: r2 }); - }); - return Promise.all(t2).then(function(e3) { - return et(e3); - }); -} -function kt(e2, t2) { - return t2.map(function(t3) { - var n2 = e2.filter(function(e3) { - return e3.sourceId === t3.sourceId; - }), r2 = n2.map(function(e3) { - return e3.items; - }), o2 = n2[0].transformResponse, c2 = o2 ? o2(function(e3) { - var t4 = e3.map(function(e4) { - var t5; - return st(st({}, e4), {}, { hits: (t5 = e4.hits) === null || t5 === void 0 ? void 0 : t5.map(function(t6) { - return st(st({}, t6), {}, { __autocomplete_indexName: e4.index, __autocomplete_queryID: e4.queryID }); - }) }); - }); - return { results: t4, hits: t4.map(function(e4) { - return e4.hits; - }).filter(Boolean), facetHits: t4.map(function(e4) { - var t5; - return (t5 = e4.facetHits) === null || t5 === void 0 ? void 0 : t5.map(function(e5) { - return { label: e5.value, count: e5.count, _highlightResult: { label: { value: e5.highlighted } } }; - }); - }).filter(Boolean) }; - }(r2)) : r2; - return $e(Array.isArray(c2), 'The `getItems` function from source "'.concat(t3.sourceId, '" must return an array of items but returned type ').concat(JSON.stringify(gt(c2)), ":\n\n").concat(JSON.stringify(c2, null, 2), ".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems")), $e(c2.every(Boolean), 'The `getItems` function from source "'.concat(t3.sourceId, '" must return an array of items but returned ').concat(JSON.stringify(void 0), ".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems")), { source: t3, items: c2 }; - }); -} -function Ct(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function Nt(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? Ct(Object(n2), true).forEach(function(t3) { - At(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Ct(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function At(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function xt(e2, t2) { - if (e2 == null) - return {}; - var n2, r2, o2 = function(e3, t3) { - if (e3 == null) - return {}; - var n3, r3, o3 = {}, c3 = Object.keys(e3); - for (r3 = 0; r3 < c3.length; r3++) - n3 = c3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]); - return o3; - }(e2, t2); - if (Object.getOwnPropertySymbols) { - var c2 = Object.getOwnPropertySymbols(e2); - for (r2 = 0; r2 < c2.length; r2++) - n2 = c2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]); - } - return o2; -} -var Rt = null; -function Tt(e2) { - var t2 = e2.event, n2 = e2.nextState, r2 = n2 === void 0 ? {} : n2, o2 = e2.props, c2 = e2.query, i2 = e2.refresh, a2 = e2.store, u2 = xt(e2, ["event", "nextState", "props", "query", "refresh", "store"]); - Rt && o2.environment.clearTimeout(Rt); - var l2, s2 = u2.setCollections, f2 = u2.setIsOpen, p2 = u2.setQuery, m2 = u2.setActiveItemId, h2 = u2.setStatus; - return p2(c2), m2(o2.defaultActiveItemId), c2 || o2.openOnFocus !== false ? (h2("loading"), Rt = o2.environment.setTimeout(function() { - h2("stalled"); - }, o2.stallThreshold), o2.getSources(Nt({ query: c2, refresh: i2, state: a2.getState() }, u2)).then(function(e3) { - return h2("loading"), Promise.all(e3.map(function(e4) { - return Promise.resolve(e4.getItems(Nt({ query: c2, refresh: i2, state: a2.getState() }, u2))).then(function(t3) { - return It(t3, e4.sourceId); - }); - })).then(Dt).then(function(t3) { - return kt(t3, e3); - }).then(function(e4) { - var n3; - h2("idle"), s2(e4); - var l3 = o2.shouldPanelOpen({ state: a2.getState() }); - f2((n3 = r2.isOpen) !== null && n3 !== void 0 ? n3 : o2.openOnFocus && !c2 && l3 || l3); - var p3 = at(a2.getState()); - if (a2.getState().activeItemId !== null && p3) { - var m3 = p3.item, d2 = p3.itemInputValue, v2 = p3.itemUrl, _2 = p3.source; - _2.onActive(Nt({ event: t2, item: m3, itemInputValue: d2, itemUrl: v2, refresh: i2, source: _2, state: a2.getState() }, u2)); - } - }).finally(function() { - Rt && o2.environment.clearTimeout(Rt); - }); - })) : (h2("idle"), s2(a2.getState().collections.map(function(e3) { - return Nt(Nt({}, e3), {}, { items: [] }); - })), f2((l2 = r2.isOpen) !== null && l2 !== void 0 ? l2 : o2.shouldPanelOpen({ state: a2.getState() })), Promise.resolve()); -} -function Ht(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function Mt(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? Ht(Object(n2), true).forEach(function(t3) { - qt(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Ht(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function qt(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function Lt(e2, t2) { - if (e2 == null) - return {}; - var n2, r2, o2 = function(e3, t3) { - if (e3 == null) - return {}; - var n3, r3, o3 = {}, c3 = Object.keys(e3); - for (r3 = 0; r3 < c3.length; r3++) - n3 = c3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]); - return o3; - }(e2, t2); - if (Object.getOwnPropertySymbols) { - var c2 = Object.getOwnPropertySymbols(e2); - for (r2 = 0; r2 < c2.length; r2++) - n2 = c2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]); - } - return o2; -} -function Ut(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function Ft(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? Ut(Object(n2), true).forEach(function(t3) { - Vt(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Ut(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function Vt(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function Bt(e2, t2) { - if (e2 == null) - return {}; - var n2, r2, o2 = function(e3, t3) { - if (e3 == null) - return {}; - var n3, r3, o3 = {}, c3 = Object.keys(e3); - for (r3 = 0; r3 < c3.length; r3++) - n3 = c3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]); - return o3; - }(e2, t2); - if (Object.getOwnPropertySymbols) { - var c2 = Object.getOwnPropertySymbols(e2); - for (r2 = 0; r2 < c2.length; r2++) - n2 = c2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]); - } - return o2; -} -function zt(e2) { - var t2 = e2.props, n2 = e2.refresh, r2 = e2.store, o2 = Bt(e2, ["props", "refresh", "store"]); - return { getEnvironmentProps: function(e3) { - var n3 = e3.inputElement, o3 = e3.formElement, c2 = e3.panelElement; - return Ft({ onTouchStart: function(e4) { - r2.getState().isOpen !== false && e4.target !== n3 && ([o3, c2].some(function(n4) { - return ut(n4, e4.target) || ut(n4, t2.environment.document.activeElement); - }) === false && r2.dispatch("blur", null)); - }, onTouchMove: function(e4) { - r2.getState().isOpen !== false && n3 === t2.environment.document.activeElement && e4.target !== n3 && n3.blur(); - } }, Bt(e3, ["inputElement", "formElement", "panelElement"])); - }, getRootProps: function(e3) { - return Ft({ role: "combobox", "aria-expanded": r2.getState().isOpen, "aria-haspopup": "listbox", "aria-owns": r2.getState().isOpen ? "".concat(t2.id, "-list") : void 0, "aria-labelledby": "".concat(t2.id, "-label") }, e3); - }, getFormProps: function(e3) { - e3.inputElement; - return Ft({ action: "", noValidate: true, role: "search", onSubmit: function(c2) { - var i2; - c2.preventDefault(), t2.onSubmit(Ft({ event: c2, refresh: n2, state: r2.getState() }, o2)), r2.dispatch("submit", null), (i2 = e3.inputElement) === null || i2 === void 0 || i2.blur(); - }, onReset: function(c2) { - var i2; - c2.preventDefault(), t2.onReset(Ft({ event: c2, refresh: n2, state: r2.getState() }, o2)), r2.dispatch("reset", null), (i2 = e3.inputElement) === null || i2 === void 0 || i2.focus(); - } }, Bt(e3, ["inputElement"])); - }, getLabelProps: function(e3) { - return Ft({ htmlFor: "".concat(t2.id, "-input"), id: "".concat(t2.id, "-label") }, e3); - }, getInputProps: function(e3) { - function c2(e4) { - (t2.openOnFocus || Boolean(r2.getState().query)) && Tt(Ft({ event: e4, props: t2, query: r2.getState().completion || r2.getState().query, refresh: n2, store: r2 }, o2)), r2.dispatch("focus", null); - } - var i2 = "ontouchstart" in t2.environment, a2 = e3 || {}, u2 = (a2.inputElement, a2.maxLength), l2 = u2 === void 0 ? 512 : u2, s2 = Bt(a2, ["inputElement", "maxLength"]), f2 = at(r2.getState()); - return Ft({ "aria-autocomplete": "both", "aria-activedescendant": r2.getState().isOpen && r2.getState().activeItemId !== null ? "".concat(t2.id, "-item-").concat(r2.getState().activeItemId) : void 0, "aria-controls": r2.getState().isOpen ? "".concat(t2.id, "-list") : void 0, "aria-labelledby": "".concat(t2.id, "-label"), value: r2.getState().completion || r2.getState().query, id: "".concat(t2.id, "-input"), autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", enterKeyHint: f2 != null && f2.itemUrl ? "go" : "search", spellCheck: "false", autoFocus: t2.autoFocus, placeholder: t2.placeholder, maxLength: l2, type: "search", onChange: function(e4) { - Tt(Ft({ event: e4, props: t2, query: e4.currentTarget.value.slice(0, l2), refresh: n2, store: r2 }, o2)); - }, onKeyDown: function(e4) { - !function(e5) { - var t3 = e5.event, n3 = e5.props, r3 = e5.refresh, o3 = e5.store, c3 = Lt(e5, ["event", "props", "refresh", "store"]); - if (t3.key === "ArrowUp" || t3.key === "ArrowDown") { - var i3 = function() { - var e6 = n3.environment.document.getElementById("".concat(n3.id, "-item-").concat(o3.getState().activeItemId)); - e6 && (e6.scrollIntoViewIfNeeded ? e6.scrollIntoViewIfNeeded(false) : e6.scrollIntoView(false)); - }, a3 = function() { - var e6 = at(o3.getState()); - if (o3.getState().activeItemId !== null && e6) { - var n4 = e6.item, i4 = e6.itemInputValue, a4 = e6.itemUrl, u4 = e6.source; - u4.onActive(Mt({ event: t3, item: n4, itemInputValue: i4, itemUrl: a4, refresh: r3, source: u4, state: o3.getState() }, c3)); - } - }; - t3.preventDefault(), o3.getState().isOpen === false && (n3.openOnFocus || Boolean(o3.getState().query)) ? Tt(Mt({ event: t3, props: n3, query: o3.getState().query, refresh: r3, store: o3 }, c3)).then(function() { - o3.dispatch(t3.key, { nextActiveItemId: n3.defaultActiveItemId }), a3(), setTimeout(i3, 0); - }) : (o3.dispatch(t3.key, {}), a3(), i3()); - } else if (t3.key === "Escape") - t3.preventDefault(), o3.dispatch(t3.key, null); - else if (t3.key === "Enter") { - if (o3.getState().activeItemId === null || o3.getState().collections.every(function(e6) { - return e6.items.length === 0; - })) - return; - t3.preventDefault(); - var u3 = at(o3.getState()), l3 = u3.item, s3 = u3.itemInputValue, f3 = u3.itemUrl, p2 = u3.source; - if (t3.metaKey || t3.ctrlKey) - f3 !== void 0 && (p2.onSelect(Mt({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p2, state: o3.getState() }, c3)), n3.navigator.navigateNewTab({ itemUrl: f3, item: l3, state: o3.getState() })); - else if (t3.shiftKey) - f3 !== void 0 && (p2.onSelect(Mt({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p2, state: o3.getState() }, c3)), n3.navigator.navigateNewWindow({ itemUrl: f3, item: l3, state: o3.getState() })); - else if (t3.altKey) - ; - else { - if (f3 !== void 0) - return p2.onSelect(Mt({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p2, state: o3.getState() }, c3)), void n3.navigator.navigate({ itemUrl: f3, item: l3, state: o3.getState() }); - Tt(Mt({ event: t3, nextState: { isOpen: false }, props: n3, query: s3, refresh: r3, store: o3 }, c3)).then(function() { - p2.onSelect(Mt({ event: t3, item: l3, itemInputValue: s3, itemUrl: f3, refresh: r3, source: p2, state: o3.getState() }, c3)); - }); - } - } - }(Ft({ event: e4, props: t2, refresh: n2, store: r2 }, o2)); - }, onFocus: c2, onBlur: function() { - i2 || r2.dispatch("blur", null); - }, onClick: function(n3) { - e3.inputElement !== t2.environment.document.activeElement || r2.getState().isOpen || c2(n3); - } }, s2); - }, getPanelProps: function(e3) { - return Ft({ onMouseDown: function(e4) { - e4.preventDefault(); - }, onMouseLeave: function() { - r2.dispatch("mouseleave", null); - } }, e3); - }, getListProps: function(e3) { - return Ft({ role: "listbox", "aria-labelledby": "".concat(t2.id, "-label"), id: "".concat(t2.id, "-list") }, e3); - }, getItemProps: function(e3) { - var c2 = e3.item, i2 = e3.source, a2 = Bt(e3, ["item", "source"]); - return Ft({ id: "".concat(t2.id, "-item-").concat(c2.__autocomplete_id), role: "option", "aria-selected": r2.getState().activeItemId === c2.__autocomplete_id, onMouseMove: function(e4) { - if (c2.__autocomplete_id !== r2.getState().activeItemId) { - r2.dispatch("mousemove", c2.__autocomplete_id); - var t3 = at(r2.getState()); - if (r2.getState().activeItemId !== null && t3) { - var i3 = t3.item, a3 = t3.itemInputValue, u2 = t3.itemUrl, l2 = t3.source; - l2.onActive(Ft({ event: e4, item: i3, itemInputValue: a3, itemUrl: u2, refresh: n2, source: l2, state: r2.getState() }, o2)); - } - } - }, onMouseDown: function(e4) { - e4.preventDefault(); - }, onClick: function(e4) { - var a3 = i2.getItemInputValue({ item: c2, state: r2.getState() }), u2 = i2.getItemUrl({ item: c2, state: r2.getState() }); - (u2 ? Promise.resolve() : Tt(Ft({ event: e4, nextState: { isOpen: false }, props: t2, query: a3, refresh: n2, store: r2 }, o2))).then(function() { - i2.onSelect(Ft({ event: e4, item: c2, itemInputValue: a3, itemUrl: u2, refresh: n2, source: i2, state: r2.getState() }, o2)); - }); - } }, a2); - } }; -} -function Wt(e2) { - var t2, n2 = e2.state; - return n2.isOpen === false || n2.activeItemId === null ? null : ((t2 = at(n2)) === null || t2 === void 0 ? void 0 : t2.itemInputValue) || null; -} -function Kt(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function Jt(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? Kt(Object(n2), true).forEach(function(t3) { - $t(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Kt(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function $t(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -var Qt = function(e2, t2) { - switch (t2.type) { - case "setActiveItemId": - return Jt(Jt({}, e2), {}, { activeItemId: t2.payload }); - case "setQuery": - return Jt(Jt({}, e2), {}, { query: t2.payload, completion: null }); - case "setCollections": - return Jt(Jt({}, e2), {}, { collections: t2.payload }); - case "setIsOpen": - return Jt(Jt({}, e2), {}, { isOpen: t2.payload }); - case "setStatus": - return Jt(Jt({}, e2), {}, { status: t2.payload }); - case "setContext": - return Jt(Jt({}, e2), {}, { context: Jt(Jt({}, e2.context), t2.payload) }); - case "ArrowDown": - var n2 = Jt(Jt({}, e2), {}, { activeItemId: t2.payload.hasOwnProperty("nextActiveItemId") ? t2.payload.nextActiveItemId : tt(1, e2.activeItemId, Je(e2), t2.props.defaultActiveItemId) }); - return Jt(Jt({}, n2), {}, { completion: Wt({ state: n2 }) }); - case "ArrowUp": - var r2 = Jt(Jt({}, e2), {}, { activeItemId: tt(-1, e2.activeItemId, Je(e2), t2.props.defaultActiveItemId) }); - return Jt(Jt({}, r2), {}, { completion: Wt({ state: r2 }) }); - case "Escape": - return e2.isOpen ? Jt(Jt({}, e2), {}, { activeItemId: null, isOpen: false, completion: null }) : Jt(Jt({}, e2), {}, { activeItemId: null, query: "", status: "idle", collections: [] }); - case "submit": - return Jt(Jt({}, e2), {}, { activeItemId: null, isOpen: false, status: "idle" }); - case "reset": - return Jt(Jt({}, e2), {}, { activeItemId: t2.props.openOnFocus === true ? t2.props.defaultActiveItemId : null, status: "idle", query: "" }); - case "focus": - return Jt(Jt({}, e2), {}, { activeItemId: t2.props.defaultActiveItemId, isOpen: (t2.props.openOnFocus || Boolean(e2.query)) && t2.props.shouldPanelOpen({ state: e2 }) }); - case "blur": - return t2.props.debug ? e2 : Jt(Jt({}, e2), {}, { isOpen: false, activeItemId: null }); - case "mousemove": - return Jt(Jt({}, e2), {}, { activeItemId: t2.payload }); - case "mouseleave": - return Jt(Jt({}, e2), {}, { activeItemId: t2.props.defaultActiveItemId }); - default: - return $e(false, "The reducer action ".concat(JSON.stringify(t2.type), " is not supported.")), e2; - } -}; -function Yt(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function Gt(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? Yt(Object(n2), true).forEach(function(t3) { - Zt(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : Yt(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function Zt(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function Xt(e2) { - var t2 = [], n2 = function(e3, t3) { - var n3, r3 = typeof window != "undefined" ? window : {}, o3 = e3.plugins || []; - return yt(yt({ debug: false, openOnFocus: false, placeholder: "", autoFocus: false, defaultActiveItemId: null, stallThreshold: 300, environment: r3, shouldPanelOpen: function(e4) { - return Je(e4.state) > 0; - } }, e3), {}, { id: (n3 = e3.id) !== null && n3 !== void 0 ? n3 : "autocomplete-".concat(Ke++), plugins: o3, initialState: yt({ activeItemId: null, query: "", completion: null, collections: [], isOpen: false, status: "idle", context: {} }, e3.initialState), onStateChange: function(t4) { - var n4; - (n4 = e3.onStateChange) === null || n4 === void 0 || n4.call(e3, t4), o3.forEach(function(e4) { - var n5; - return (n5 = e4.onStateChange) === null || n5 === void 0 ? void 0 : n5.call(e4, t4); - }); - }, onSubmit: function(t4) { - var n4; - (n4 = e3.onSubmit) === null || n4 === void 0 || n4.call(e3, t4), o3.forEach(function(e4) { - var n5; - return (n5 = e4.onSubmit) === null || n5 === void 0 ? void 0 : n5.call(e4, t4); - }); - }, onReset: function(t4) { - var n4; - (n4 = e3.onReset) === null || n4 === void 0 || n4.call(e3, t4), o3.forEach(function(e4) { - var n5; - return (n5 = e4.onReset) === null || n5 === void 0 ? void 0 : n5.call(e4, t4); - }); - }, getSources: function(n4) { - return Promise.all([].concat(dt(o3.map(function(e4) { - return e4.getSources; - })), [e3.getSources]).filter(Boolean).map(function(e4) { - return it(e4, n4); - })).then(function(e4) { - return et(e4); - }).then(function(e4) { - return e4.map(function(e5) { - return yt(yt({}, e5), {}, { onSelect: function(n5) { - e5.onSelect(n5), t3.forEach(function(e6) { - var t4; - return (t4 = e6.onSelect) === null || t4 === void 0 ? void 0 : t4.call(e6, n5); - }); - }, onActive: function(n5) { - e5.onActive(n5), t3.forEach(function(e6) { - var t4; - return (t4 = e6.onActive) === null || t4 === void 0 ? void 0 : t4.call(e6, n5); - }); - } }); - }); - }); - }, navigator: yt({ navigate: function(e4) { - var t4 = e4.itemUrl; - r3.location.assign(t4); - }, navigateNewTab: function(e4) { - var t4 = e4.itemUrl, n4 = r3.open(t4, "_blank", "noopener"); - n4 == null || n4.focus(); - }, navigateNewWindow: function(e4) { - var t4 = e4.itemUrl; - r3.open(t4, "_blank", "noopener"); - } }, e3.navigator) }); - }(e2, t2), r2 = Xe(Qt, n2, function(e3) { - var t3 = e3.prevState, r3 = e3.state; - n2.onStateChange(Gt({ prevState: t3, state: r3, refresh: i2 }, o2)); - }), o2 = function(e3) { - var t3 = e3.store; - return { setActiveItemId: function(e4) { - t3.dispatch("setActiveItemId", e4); - }, setQuery: function(e4) { - t3.dispatch("setQuery", e4); - }, setCollections: function(e4) { - var n3 = 0, r3 = e4.map(function(e5) { - return mt(mt({}, e5), {}, { items: et(e5.items).map(function(e6) { - return mt(mt({}, e6), {}, { __autocomplete_id: n3++ }); - }) }); - }); - t3.dispatch("setCollections", r3); - }, setIsOpen: function(e4) { - t3.dispatch("setIsOpen", e4); - }, setStatus: function(e4) { - t3.dispatch("setStatus", e4); - }, setContext: function(e4) { - t3.dispatch("setContext", e4); - } }; - }({ store: r2 }), c2 = zt(Gt({ props: n2, refresh: i2, store: r2 }, o2)); - function i2() { - return Tt(Gt({ event: new Event("input"), nextState: { isOpen: r2.getState().isOpen }, props: n2, query: r2.getState().query, refresh: i2, store: r2 }, o2)); - } - return n2.plugins.forEach(function(e3) { - var n3; - return (n3 = e3.subscribe) === null || n3 === void 0 ? void 0 : n3.call(e3, Gt(Gt({}, o2), {}, { refresh: i2, onSelect: function(e4) { - t2.push({ onSelect: e4 }); - }, onActive: function(e4) { - t2.push({ onActive: e4 }); - } })); - }), Gt(Gt({ refresh: i2 }, c2), o2); -} -function en() { - return Ue.createElement("a", { href: "https://www.algolia.com/docsearch", target: "_blank", rel: "noopener noreferrer" }, Ue.createElement("span", { className: "DocSearch-Label" }, "Search by"), Ue.createElement("svg", { width: "77", height: "19" }, Ue.createElement("path", { d: "M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z", fill: "currentColor", fillRule: "evenodd" }))); -} -function tn() { - return Ue.createElement(Ue.Fragment, null, Ue.createElement("div", { className: "DocSearch-Logo" }, Ue.createElement(en, null)), Ue.createElement("ul", { className: "DocSearch-Commands" }, Ue.createElement("li", null, Ue.createElement("span", { className: "DocSearch-Commands-Key" }, Ue.createElement(nn, null, Ue.createElement("path", { d: "M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" }))), Ue.createElement("span", { className: "DocSearch-Label" }, "to select")), Ue.createElement("li", null, Ue.createElement("span", { className: "DocSearch-Commands-Key" }, Ue.createElement(nn, null, Ue.createElement("path", { d: "M7.5 3.5v8M10.5 8.5l-3 3-3-3" }))), Ue.createElement("span", { className: "DocSearch-Commands-Key" }, Ue.createElement(nn, null, Ue.createElement("path", { d: "M7.5 11.5v-8M10.5 6.5l-3-3-3 3" }))), Ue.createElement("span", { className: "DocSearch-Label" }, "to navigate")), Ue.createElement("li", null, Ue.createElement("span", { className: "DocSearch-Commands-Key" }, Ue.createElement(nn, null, Ue.createElement("path", { d: "M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" }))), Ue.createElement("span", { className: "DocSearch-Label" }, "to close")))); -} -function nn(e2) { - return Ue.createElement("svg", { width: "15", height: "15" }, Ue.createElement("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.2" }, e2.children)); -} -function rn(e2) { - var t2 = e2.hit, n2 = e2.children; - return Ue.createElement("a", { href: t2.url }, n2); -} -function on() { - return Ue.createElement("svg", { viewBox: "0 0 38 38", stroke: "currentColor", strokeOpacity: ".5" }, Ue.createElement("g", { fill: "none", fillRule: "evenodd" }, Ue.createElement("g", { transform: "translate(1 1)", strokeWidth: "2" }, Ue.createElement("circle", { strokeOpacity: ".3", cx: "18", cy: "18", r: "18" }), Ue.createElement("path", { d: "M36 18c0-9.94-8.06-18-18-18" }, Ue.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "1s", repeatCount: "indefinite" }))))); -} -function cn() { - return Ue.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Ue.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, Ue.createElement("path", { d: "M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0" }), Ue.createElement("path", { d: "M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13" }))); -} -function an() { - return Ue.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Ue.createElement("path", { d: "M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" })); -} -function un() { - return Ue.createElement("svg", { className: "DocSearch-Hit-Select-Icon", width: "20", height: "20", viewBox: "0 0 20 20" }, Ue.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, Ue.createElement("path", { d: "M18 3v4c0 2-2 4-4 4H2" }), Ue.createElement("path", { d: "M8 17l-6-6 6-6" }))); -} -function ln(e2) { - switch (e2.type) { - case "lvl1": - return Ue.createElement(sn, null); - case "content": - return Ue.createElement(pn, null); - default: - return Ue.createElement(fn, null); - } -} -function sn() { - return Ue.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Ue.createElement("path", { d: "M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" })); -} -function fn() { - return Ue.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Ue.createElement("path", { d: "M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" })); -} -function pn() { - return Ue.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Ue.createElement("path", { d: "M17 5H3h14zm0 5H3h14zm0 5H3h14z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" })); -} -function mn() { - return Ue.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" }, Ue.createElement("path", { d: "M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z", stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinejoin: "round" })); -} -function hn() { - return Ue.createElement("svg", { width: "40", height: "40", viewBox: "0 0 20 20", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }, Ue.createElement("path", { d: "M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0" })); -} -function dn() { - return Ue.createElement("svg", { width: "40", height: "40", viewBox: "0 0 20 20", fill: "none", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }, Ue.createElement("path", { d: "M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2" })); -} -function vn() { - return Ue.createElement("div", { className: "DocSearch-ErrorScreen" }, Ue.createElement("div", { className: "DocSearch-Screen-Icon" }, Ue.createElement(hn, null)), Ue.createElement("p", { className: "DocSearch-Title" }, "Unable to fetch results"), Ue.createElement("p", { className: "DocSearch-Help" }, "You might want to check your network connection.")); -} -function _n(e2) { - return function(e3) { - if (Array.isArray(e3)) - return yn(e3); - }(e2) || function(e3) { - if (typeof Symbol != "undefined" && Symbol.iterator in Object(e3)) - return Array.from(e3); - }(e2) || function(e3, t2) { - if (!e3) - return; - if (typeof e3 == "string") - return yn(e3, t2); - var n2 = Object.prototype.toString.call(e3).slice(8, -1); - n2 === "Object" && e3.constructor && (n2 = e3.constructor.name); - if (n2 === "Map" || n2 === "Set") - return Array.from(e3); - if (n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2)) - return yn(e3, t2); - }(e2) || function() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function yn(e2, t2) { - (t2 == null || t2 > e2.length) && (t2 = e2.length); - for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) - r2[n2] = e2[n2]; - return r2; -} -function bn(e2) { - var t2 = e2.state.context.searchSuggestions; - return Ue.createElement("div", { className: "DocSearch-NoResults" }, Ue.createElement("div", { className: "DocSearch-Screen-Icon" }, Ue.createElement(dn, null)), Ue.createElement("p", { className: "DocSearch-Title" }, 'No results for "', Ue.createElement("strong", null, e2.state.query), '"'), t2 && t2.length > 0 && Ue.createElement("div", { className: "DocSearch-NoResults-Prefill-List" }, Ue.createElement("p", { className: "DocSearch-Help" }, "Try searching for:"), Ue.createElement("ul", null, t2.slice(0, 3).reduce(function(t3, n2) { - return [].concat(_n(t3), [Ue.createElement("li", { key: n2 }, Ue.createElement("button", { className: "DocSearch-Prefill", key: n2, onClick: function() { - e2.setQuery(n2.toLowerCase() + " "), e2.refresh(), e2.inputRef.current.focus(); - } }, n2))]); - }, []))), Ue.createElement("p", { className: "DocSearch-Help" }, "Believe this query should return results?", " ", Ue.createElement("a", { href: "https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(e2.indexName, ']+Missing+results+for+query+"').concat(e2.state.query, '"'), target: "_blank", rel: "noopener noreferrer" }, "Let us know"), ".")); -} -function gn(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function On(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? gn(Object(n2), true).forEach(function(t3) { - Sn(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : gn(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function Sn(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function En(e2, t2) { - if (e2 == null) - return {}; - var n2, r2, o2 = function(e3, t3) { - if (e3 == null) - return {}; - var n3, r3, o3 = {}, c3 = Object.keys(e3); - for (r3 = 0; r3 < c3.length; r3++) - n3 = c3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]); - return o3; - }(e2, t2); - if (Object.getOwnPropertySymbols) { - var c2 = Object.getOwnPropertySymbols(e2); - for (r2 = 0; r2 < c2.length; r2++) - n2 = c2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]); - } - return o2; -} -function wn(e2, t2) { - return t2.split(".").reduce(function(e3, t3) { - return e3 && e3[t3]; - }, e2); -} -function jn(e2) { - var t2 = e2.hit, n2 = e2.attribute, r2 = e2.tagName; - return g(r2 === void 0 ? "span" : r2, On(On({}, En(e2, ["hit", "attribute", "tagName"])), {}, { dangerouslySetInnerHTML: { __html: wn(t2, "_snippetResult.".concat(n2, ".value")) || wn(t2, n2) } })); -} -function Pn(e2, t2) { - return function(e3) { - if (Array.isArray(e3)) - return e3; - }(e2) || function(e3, t3) { - if (typeof Symbol == "undefined" || !(Symbol.iterator in Object(e3))) - return; - var n2 = [], r2 = true, o2 = false, c2 = void 0; - try { - for (var i2, a2 = e3[Symbol.iterator](); !(r2 = (i2 = a2.next()).done) && (n2.push(i2.value), !t3 || n2.length !== t3); r2 = true) - ; - } catch (e4) { - o2 = true, c2 = e4; - } finally { - try { - r2 || a2.return == null || a2.return(); - } finally { - if (o2) - throw c2; - } - } - return n2; - }(e2, t2) || function(e3, t3) { - if (!e3) - return; - if (typeof e3 == "string") - return In(e3, t3); - var n2 = Object.prototype.toString.call(e3).slice(8, -1); - n2 === "Object" && e3.constructor && (n2 = e3.constructor.name); - if (n2 === "Map" || n2 === "Set") - return Array.from(e3); - if (n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2)) - return In(e3, t3); - }(e2, t2) || function() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function In(e2, t2) { - (t2 == null || t2 > e2.length) && (t2 = e2.length); - for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) - r2[n2] = e2[n2]; - return r2; -} -function Dn() { - return (Dn = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function kn(e2) { - return e2.collection && e2.collection.items.length !== 0 ? Ue.createElement("section", { className: "DocSearch-Hits" }, Ue.createElement("div", { className: "DocSearch-Hit-source" }, e2.title), Ue.createElement("ul", e2.getListProps(), e2.collection.items.map(function(t2, n2) { - return Ue.createElement(Cn, Dn({ key: [e2.title, t2.objectID].join(":"), item: t2, index: n2 }, e2)); - }))) : null; -} -function Cn(e2) { - var t2 = e2.item, n2 = e2.index, r2 = e2.renderIcon, o2 = e2.renderAction, c2 = e2.getItemProps, i2 = e2.onItemClick, a2 = e2.collection, u2 = e2.hitComponent, l2 = Pn(Ue.useState(false), 2), s2 = l2[0], f2 = l2[1], p2 = Pn(Ue.useState(false), 2), m2 = p2[0], h2 = p2[1], d2 = Ue.useRef(null), v2 = u2; - return Ue.createElement("li", Dn({ className: ["DocSearch-Hit", t2.__docsearch_parent && "DocSearch-Hit--Child", s2 && "DocSearch-Hit--deleting", m2 && "DocSearch-Hit--favoriting"].filter(Boolean).join(" "), onTransitionEnd: function() { - d2.current && d2.current(); - } }, c2({ item: t2, source: a2.source, onClick: function() { - i2(t2); - } })), Ue.createElement(v2, { hit: t2 }, Ue.createElement("div", { className: "DocSearch-Hit-Container" }, r2({ item: t2, index: n2 }), t2.hierarchy[t2.type] && t2.type === "lvl1" && Ue.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Ue.createElement(jn, { className: "DocSearch-Hit-title", hit: t2, attribute: "hierarchy.lvl1" }), t2.content && Ue.createElement(jn, { className: "DocSearch-Hit-path", hit: t2, attribute: "content" })), t2.hierarchy[t2.type] && (t2.type === "lvl2" || t2.type === "lvl3" || t2.type === "lvl4" || t2.type === "lvl5" || t2.type === "lvl6") && Ue.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Ue.createElement(jn, { className: "DocSearch-Hit-title", hit: t2, attribute: "hierarchy.".concat(t2.type) }), Ue.createElement(jn, { className: "DocSearch-Hit-path", hit: t2, attribute: "hierarchy.lvl1" })), t2.type === "content" && Ue.createElement("div", { className: "DocSearch-Hit-content-wrapper" }, Ue.createElement(jn, { className: "DocSearch-Hit-title", hit: t2, attribute: "content" }), Ue.createElement(jn, { className: "DocSearch-Hit-path", hit: t2, attribute: "hierarchy.lvl1" })), o2({ item: t2, runDeleteTransition: function(e3) { - f2(true), d2.current = e3; - }, runFavoriteTransition: function(e3) { - h2(true), d2.current = e3; - } })))); -} -function Nn(e2, t2) { - return e2.reduce(function(e3, n2) { - var r2 = t2(n2); - return e3.hasOwnProperty(r2) || (e3[r2] = []), e3[r2].length < 5 && e3[r2].push(n2), e3; - }, {}); -} -function An(e2) { - return e2; -} -function xn() { -} -var Rn = /(|<\/mark>)/g, Tn = RegExp(Rn.source); -function Hn(e2) { - var t2, n2, r2, o2, c2, i2 = e2; - if (!i2.__docsearch_parent && !e2._highlightResult) - return e2.hierarchy.lvl0; - var a2 = ((i2.__docsearch_parent ? (t2 = i2.__docsearch_parent) === null || t2 === void 0 || (n2 = t2._highlightResult) === null || n2 === void 0 || (r2 = n2.hierarchy) === null || r2 === void 0 ? void 0 : r2.lvl0 : (o2 = e2._highlightResult) === null || o2 === void 0 || (c2 = o2.hierarchy) === null || c2 === void 0 ? void 0 : c2.lvl0) || {}).value; - return a2 && Tn.test(a2) ? a2.replace(Rn, "") : a2; -} -function Mn() { - return (Mn = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function qn(e2) { - return Ue.createElement("div", { className: "DocSearch-Dropdown-Container" }, e2.state.collections.map(function(t2, n2) { - if (t2.items.length === 0) - return null; - var r2 = Hn(t2.items[0]); - return Ue.createElement(kn, Mn({}, e2, { key: n2, title: r2, collection: t2, renderIcon: function(e3) { - var n3, r3 = e3.item, o2 = e3.index; - return Ue.createElement(Ue.Fragment, null, r3.__docsearch_parent && Ue.createElement("svg", { className: "DocSearch-Hit-Tree", viewBox: "0 0 24 54" }, Ue.createElement("g", { stroke: "currentColor", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, r3.__docsearch_parent !== ((n3 = t2.items[o2 + 1]) === null || n3 === void 0 ? void 0 : n3.__docsearch_parent) ? Ue.createElement("path", { d: "M8 6v21M20 27H8.3" }) : Ue.createElement("path", { d: "M8 6v42M20 27H8.3" }))), Ue.createElement("div", { className: "DocSearch-Hit-icon" }, Ue.createElement(ln, { type: r3.type }))); - }, renderAction: function() { - return Ue.createElement("div", { className: "DocSearch-Hit-action" }, Ue.createElement(un, null)); - } })); - }), e2.resultsFooterComponent && Ue.createElement("section", { className: "DocSearch-HitsFooter" }, Ue.createElement(e2.resultsFooterComponent, { state: e2.state }))); -} -function Ln() { - return (Ln = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function Un(e2) { - return e2.state.status === "idle" && e2.hasCollections === false ? e2.disableUserPersonalization ? null : Ue.createElement("div", { className: "DocSearch-StartScreen" }, Ue.createElement("p", { className: "DocSearch-Help" }, "No recent searches")) : e2.hasCollections === false ? null : Ue.createElement("div", { className: "DocSearch-Dropdown-Container" }, Ue.createElement(kn, Ln({}, e2, { title: "Recent", collection: e2.state.collections[0], renderIcon: function() { - return Ue.createElement("div", { className: "DocSearch-Hit-icon" }, Ue.createElement(cn, null)); - }, renderAction: function(t2) { - var n2 = t2.item, r2 = t2.runFavoriteTransition, o2 = t2.runDeleteTransition; - return Ue.createElement(Ue.Fragment, null, Ue.createElement("div", { className: "DocSearch-Hit-action" }, Ue.createElement("button", { className: "DocSearch-Hit-action-button", title: "Save this search", onClick: function(t3) { - t3.preventDefault(), t3.stopPropagation(), r2(function() { - e2.favoriteSearches.add(n2), e2.recentSearches.remove(n2), e2.refresh(); - }); - } }, Ue.createElement(mn, null))), Ue.createElement("div", { className: "DocSearch-Hit-action" }, Ue.createElement("button", { className: "DocSearch-Hit-action-button", title: "Remove this search from history", onClick: function(t3) { - t3.preventDefault(), t3.stopPropagation(), o2(function() { - e2.recentSearches.remove(n2), e2.refresh(); - }); - } }, Ue.createElement(an, null)))); - } })), Ue.createElement(kn, Ln({}, e2, { title: "Favorites", collection: e2.state.collections[1], renderIcon: function() { - return Ue.createElement("div", { className: "DocSearch-Hit-icon" }, Ue.createElement(mn, null)); - }, renderAction: function(t2) { - var n2 = t2.item, r2 = t2.runDeleteTransition; - return Ue.createElement("div", { className: "DocSearch-Hit-action" }, Ue.createElement("button", { className: "DocSearch-Hit-action-button", title: "Remove this search from favorites", onClick: function(t3) { - t3.preventDefault(), t3.stopPropagation(), r2(function() { - e2.favoriteSearches.remove(n2), e2.refresh(); - }); - } }, Ue.createElement(an, null))); - } }))); -} -function Fn() { - return (Fn = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -var Vn = Ue.memo(function(e2) { - if (e2.state.status === "error") - return Ue.createElement(vn, null); - var t2 = e2.state.collections.some(function(e3) { - return e3.items.length > 0; - }); - return e2.state.query ? t2 === false ? Ue.createElement(bn, e2) : Ue.createElement(qn, e2) : Ue.createElement(Un, Fn({}, e2, { hasCollections: t2 })); -}, function(e2, t2) { - return t2.state.status === "loading" || t2.state.status === "stalled"; -}); -function Bn() { - return (Bn = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function zn(e2) { - var t2 = e2.getFormProps({ inputElement: e2.inputRef.current }).onReset; - return Ue.useEffect(function() { - e2.autoFocus && e2.inputRef.current && e2.inputRef.current.focus(); - }, [e2.autoFocus, e2.inputRef]), Ue.useEffect(function() { - e2.isFromSelection && e2.inputRef.current && e2.inputRef.current.select(); - }, [e2.isFromSelection, e2.inputRef]), Ue.createElement(Ue.Fragment, null, Ue.createElement("form", { className: "DocSearch-Form", onSubmit: function(e3) { - e3.preventDefault(); - }, onReset: t2 }, Ue.createElement("label", Bn({ className: "DocSearch-MagnifierLabel" }, e2.getLabelProps()), Ue.createElement(Ve, null)), Ue.createElement("div", { className: "DocSearch-LoadingIndicator" }, Ue.createElement(on, null)), Ue.createElement("input", Bn({ className: "DocSearch-Input", ref: e2.inputRef }, e2.getInputProps({ inputElement: e2.inputRef.current, autoFocus: e2.autoFocus, maxLength: 64 }))), Ue.createElement("button", { type: "reset", title: "Clear the query", className: "DocSearch-Reset", hidden: !e2.state.query }, Ue.createElement(an, null))), Ue.createElement("button", { className: "DocSearch-Cancel", onClick: e2.onClose }, "Cancel")); -} -function Wn(e2, t2) { - if (e2 == null) - return {}; - var n2, r2, o2 = function(e3, t3) { - if (e3 == null) - return {}; - var n3, r3, o3 = {}, c3 = Object.keys(e3); - for (r3 = 0; r3 < c3.length; r3++) - n3 = c3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]); - return o3; - }(e2, t2); - if (Object.getOwnPropertySymbols) { - var c2 = Object.getOwnPropertySymbols(e2); - for (r2 = 0; r2 < c2.length; r2++) - n2 = c2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]); - } - return o2; -} -function Kn(e2) { - return function() { - var e3 = "__TEST_KEY__"; - try { - return localStorage.setItem(e3, ""), localStorage.removeItem(e3), true; - } catch (e4) { - return false; - } - }() === false ? { setItem: function() { - }, getItem: function() { - return []; - } } : { setItem: function(t2) { - return window.localStorage.setItem(e2, JSON.stringify(t2)); - }, getItem: function() { - var t2 = window.localStorage.getItem(e2); - return t2 ? JSON.parse(t2) : []; - } }; -} -function Jn(e2) { - var t2 = e2.key, n2 = e2.limit, r2 = n2 === void 0 ? 5 : n2, o2 = Kn(t2), c2 = o2.getItem().slice(0, r2); - return { add: function(e3) { - var t3 = e3, n3 = (t3._highlightResult, t3._snippetResult, Wn(t3, ["_highlightResult", "_snippetResult"])), i2 = c2.findIndex(function(e4) { - return e4.objectID === n3.objectID; - }); - i2 > -1 && c2.splice(i2, 1), c2.unshift(n3), c2 = c2.slice(0, r2), o2.setItem(c2); - }, remove: function(e3) { - c2 = c2.filter(function(t3) { - return t3.objectID !== e3.objectID; - }), o2.setItem(c2); - }, getAll: function() { - return c2; - } }; -} -function $n(e2) { - var t2, n2 = "algoliasearch-client-js-".concat(e2.key), r2 = function() { - return t2 === void 0 && (t2 = e2.localStorage || window.localStorage), t2; - }, o2 = function() { - return JSON.parse(r2().getItem(n2) || "{}"); - }; - return { get: function(e3, t3) { - var n3 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : { miss: function() { - return Promise.resolve(); - } }; - return Promise.resolve().then(function() { - var n4 = JSON.stringify(e3), r3 = o2()[n4]; - return Promise.all([r3 || t3(), r3 !== void 0]); - }).then(function(e4) { - var t4 = i(e4, 2), r3 = t4[0], o3 = t4[1]; - return Promise.all([r3, o3 || n3.miss(r3)]); - }).then(function(e4) { - return i(e4, 1)[0]; - }); - }, set: function(e3, t3) { - return Promise.resolve().then(function() { - var c2 = o2(); - return c2[JSON.stringify(e3)] = t3, r2().setItem(n2, JSON.stringify(c2)), t3; - }); - }, delete: function(e3) { - return Promise.resolve().then(function() { - var t3 = o2(); - delete t3[JSON.stringify(e3)], r2().setItem(n2, JSON.stringify(t3)); - }); - }, clear: function() { - return Promise.resolve().then(function() { - r2().removeItem(n2); - }); - } }; -} -function Qn(e2) { - var t2 = a(e2.caches), n2 = t2.shift(); - return n2 === void 0 ? { get: function(e3, t3) { - var n3 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : { miss: function() { - return Promise.resolve(); - } }, r2 = t3(); - return r2.then(function(e4) { - return Promise.all([e4, n3.miss(e4)]); - }).then(function(e4) { - return i(e4, 1)[0]; - }); - }, set: function(e3, t3) { - return Promise.resolve(t3); - }, delete: function(e3) { - return Promise.resolve(); - }, clear: function() { - return Promise.resolve(); - } } : { get: function(e3, r2) { - var o2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : { miss: function() { - return Promise.resolve(); - } }; - return n2.get(e3, r2, o2).catch(function() { - return Qn({ caches: t2 }).get(e3, r2, o2); - }); - }, set: function(e3, r2) { - return n2.set(e3, r2).catch(function() { - return Qn({ caches: t2 }).set(e3, r2); - }); - }, delete: function(e3) { - return n2.delete(e3).catch(function() { - return Qn({ caches: t2 }).delete(e3); - }); - }, clear: function() { - return n2.clear().catch(function() { - return Qn({ caches: t2 }).clear(); - }); - } }; -} -function Yn() { - var e2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : { serializable: true }, t2 = {}; - return { get: function(n2, r2) { - var o2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : { miss: function() { - return Promise.resolve(); - } }, c2 = JSON.stringify(n2); - if (c2 in t2) - return Promise.resolve(e2.serializable ? JSON.parse(t2[c2]) : t2[c2]); - var i2 = r2(), a2 = o2 && o2.miss || function() { - return Promise.resolve(); - }; - return i2.then(function(e3) { - return a2(e3); - }).then(function() { - return i2; - }); - }, set: function(n2, r2) { - return t2[JSON.stringify(n2)] = e2.serializable ? JSON.stringify(r2) : r2, Promise.resolve(r2); - }, delete: function(e3) { - return delete t2[JSON.stringify(e3)], Promise.resolve(); - }, clear: function() { - return t2 = {}, Promise.resolve(); - } }; -} -function Gn(e2) { - for (var t2 = e2.length - 1; t2 > 0; t2--) { - var n2 = Math.floor(Math.random() * (t2 + 1)), r2 = e2[t2]; - e2[t2] = e2[n2], e2[n2] = r2; - } - return e2; -} -function Zn(e2, t2) { - return t2 ? (Object.keys(t2).forEach(function(n2) { - e2[n2] = t2[n2](e2); - }), e2) : e2; -} -function Xn(e2) { - for (var t2 = arguments.length, n2 = new Array(t2 > 1 ? t2 - 1 : 0), r2 = 1; r2 < t2; r2++) - n2[r2 - 1] = arguments[r2]; - var o2 = 0; - return e2.replace(/%s/g, function() { - return encodeURIComponent(n2[o2++]); - }); -} -var er = { WithinQueryParameters: 0, WithinHeaders: 1 }; -function tr(e2, t2) { - var n2 = e2 || {}, r2 = n2.data || {}; - return Object.keys(n2).forEach(function(e3) { - ["timeout", "headers", "queryParameters", "data", "cacheable"].indexOf(e3) === -1 && (r2[e3] = n2[e3]); - }), { data: Object.entries(r2).length > 0 ? r2 : void 0, timeout: n2.timeout || t2, headers: n2.headers || {}, queryParameters: n2.queryParameters || {}, cacheable: n2.cacheable }; -} -var nr = { Read: 1, Write: 2, Any: 3 }, rr = 1, or = 2, cr = 3; -function ir(e2) { - var t2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : rr; - return o(o({}, e2), {}, { status: t2, lastUpdate: Date.now() }); -} -function ar(e2) { - return typeof e2 == "string" ? { protocol: "https", url: e2, accept: nr.Any } : { protocol: e2.protocol || "https", url: e2.url, accept: e2.accept || nr.Any }; -} -var ur = "GET", lr = "POST"; -function sr(e2, t2) { - return Promise.all(t2.map(function(t3) { - return e2.get(t3, function() { - return Promise.resolve(ir(t3)); - }); - })).then(function(e3) { - var n2 = e3.filter(function(e4) { - return function(e5) { - return e5.status === rr || Date.now() - e5.lastUpdate > 12e4; - }(e4); - }), r2 = e3.filter(function(e4) { - return function(e5) { - return e5.status === cr && Date.now() - e5.lastUpdate <= 12e4; - }(e4); - }), o2 = [].concat(a(n2), a(r2)); - return { getTimeout: function(e4, t3) { - return (r2.length === 0 && e4 === 0 ? 1 : r2.length + 3 + e4) * t3; - }, statelessHosts: o2.length > 0 ? o2.map(function(e4) { - return ar(e4); - }) : t2 }; - }); -} -function fr(e2, t2, n2, r2) { - var c2 = [], i2 = function(e3, t3) { - if (e3.method === ur || e3.data === void 0 && t3.data === void 0) - return; - var n3 = Array.isArray(e3.data) ? e3.data : o(o({}, e3.data), t3.data); - return JSON.stringify(n3); - }(n2, r2), u2 = function(e3, t3) { - var n3 = o(o({}, e3.headers), t3.headers), r3 = {}; - return Object.keys(n3).forEach(function(e4) { - var t4 = n3[e4]; - r3[e4.toLowerCase()] = t4; - }), r3; - }(e2, r2), l2 = n2.method, s2 = n2.method !== ur ? {} : o(o({}, n2.data), r2.data), f2 = o(o(o({ "x-algolia-agent": e2.userAgent.value }, e2.queryParameters), s2), r2.queryParameters), p2 = 0, m2 = function t3(o2, a2) { - var s3 = o2.pop(); - if (s3 === void 0) - throw { name: "RetryError", message: "Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.", transporterStackTrace: dr(c2) }; - var m3 = { data: i2, headers: u2, method: l2, url: mr(s3, n2.path, f2), connectTimeout: a2(p2, e2.timeouts.connect), responseTimeout: a2(p2, r2.timeout) }, h2 = function(e3) { - var t4 = { request: m3, response: e3, host: s3, triesLeft: o2.length }; - return c2.push(t4), t4; - }, d2 = { onSucess: function(e3) { - return function(e4) { - try { - return JSON.parse(e4.content); - } catch (t4) { - throw function(e5, t5) { - return { name: "DeserializationError", message: e5, response: t5 }; - }(t4.message, e4); - } - }(e3); - }, onRetry: function(n3) { - var r3 = h2(n3); - return n3.isTimedOut && p2++, Promise.all([e2.logger.info("Retryable failure", vr(r3)), e2.hostsCache.set(s3, ir(s3, n3.isTimedOut ? cr : or))]).then(function() { - return t3(o2, a2); - }); - }, onFail: function(e3) { - throw h2(e3), function(e4, t4) { - var n3 = e4.content, r3 = e4.status, o3 = n3; - try { - o3 = JSON.parse(n3).message; - } catch (e5) { - } - return function(e5, t5, n4) { - return { name: "ApiError", message: e5, status: t5, transporterStackTrace: n4 }; - }(o3, r3, t4); - }(e3, dr(c2)); - } }; - return e2.requester.send(m3).then(function(e3) { - return function(e4, t4) { - return function(e5) { - var t5 = e5.status; - return e5.isTimedOut || function(e6) { - var t6 = e6.isTimedOut, n3 = e6.status; - return !t6 && ~~n3 == 0; - }(e5) || ~~(t5 / 100) != 2 && ~~(t5 / 100) != 4; - }(e4) ? t4.onRetry(e4) : ~~(e4.status / 100) == 2 ? t4.onSucess(e4) : t4.onFail(e4); - }(e3, d2); - }); - }; - return sr(e2.hostsCache, t2).then(function(e3) { - return m2(a(e3.statelessHosts).reverse(), e3.getTimeout); - }); -} -function pr(e2) { - var t2 = { value: "Algolia for JavaScript (".concat(e2, ")"), add: function(e3) { - var n2 = "; ".concat(e3.segment).concat(e3.version !== void 0 ? " (".concat(e3.version, ")") : ""); - return t2.value.indexOf(n2) === -1 && (t2.value = "".concat(t2.value).concat(n2)), t2; - } }; - return t2; -} -function mr(e2, t2, n2) { - var r2 = hr(n2), o2 = "".concat(e2.protocol, "://").concat(e2.url, "/").concat(t2.charAt(0) === "/" ? t2.substr(1) : t2); - return r2.length && (o2 += "?".concat(r2)), o2; -} -function hr(e2) { - return Object.keys(e2).map(function(t2) { - return Xn("%s=%s", t2, (n2 = e2[t2], Object.prototype.toString.call(n2) === "[object Object]" || Object.prototype.toString.call(n2) === "[object Array]" ? JSON.stringify(e2[t2]) : e2[t2])); - var n2; - }).join("&"); -} -function dr(e2) { - return e2.map(function(e3) { - return vr(e3); - }); -} -function vr(e2) { - var t2 = e2.request.headers["x-algolia-api-key"] ? { "x-algolia-api-key": "*****" } : {}; - return o(o({}, e2), {}, { request: o(o({}, e2.request), {}, { headers: o(o({}, e2.request.headers), t2) }) }); -} -var _r = function(e2) { - var t2 = e2.appId, n2 = function(e3, t3, n3) { - var r3 = { "x-algolia-api-key": n3, "x-algolia-application-id": t3 }; - return { headers: function() { - return e3 === er.WithinHeaders ? r3 : {}; - }, queryParameters: function() { - return e3 === er.WithinQueryParameters ? r3 : {}; - } }; - }(e2.authMode !== void 0 ? e2.authMode : er.WithinHeaders, t2, e2.apiKey), r2 = function(e3) { - var t3 = e3.hostsCache, n3 = e3.logger, r3 = e3.requester, o2 = e3.requestsCache, c2 = e3.responsesCache, a2 = e3.timeouts, u2 = e3.userAgent, l2 = e3.hosts, s2 = e3.queryParameters, f2 = { hostsCache: t3, logger: n3, requester: r3, requestsCache: o2, responsesCache: c2, timeouts: a2, userAgent: u2, headers: e3.headers, queryParameters: s2, hosts: l2.map(function(e4) { - return ar(e4); - }), read: function(e4, t4) { - var n4 = tr(t4, f2.timeouts.read), r4 = function() { - return fr(f2, f2.hosts.filter(function(e5) { - return (e5.accept & nr.Read) != 0; - }), e4, n4); - }; - if ((n4.cacheable !== void 0 ? n4.cacheable : e4.cacheable) !== true) - return r4(); - var o3 = { request: e4, mappedRequestOptions: n4, transporter: { queryParameters: f2.queryParameters, headers: f2.headers } }; - return f2.responsesCache.get(o3, function() { - return f2.requestsCache.get(o3, function() { - return f2.requestsCache.set(o3, r4()).then(function(e5) { - return Promise.all([f2.requestsCache.delete(o3), e5]); - }, function(e5) { - return Promise.all([f2.requestsCache.delete(o3), Promise.reject(e5)]); - }).then(function(e5) { - var t5 = i(e5, 2); - t5[0]; - return t5[1]; - }); - }); - }, { miss: function(e5) { - return f2.responsesCache.set(o3, e5); - } }); - }, write: function(e4, t4) { - return fr(f2, f2.hosts.filter(function(e5) { - return (e5.accept & nr.Write) != 0; - }), e4, tr(t4, f2.timeouts.write)); - } }; - return f2; - }(o(o({ hosts: [{ url: "".concat(t2, "-dsn.algolia.net"), accept: nr.Read }, { url: "".concat(t2, ".algolia.net"), accept: nr.Write }].concat(Gn([{ url: "".concat(t2, "-1.algolianet.com") }, { url: "".concat(t2, "-2.algolianet.com") }, { url: "".concat(t2, "-3.algolianet.com") }])) }, e2), {}, { headers: o(o(o({}, n2.headers()), { "content-type": "application/x-www-form-urlencoded" }), e2.headers), queryParameters: o(o({}, n2.queryParameters()), e2.queryParameters) })); - return Zn({ transporter: r2, appId: t2, addAlgoliaAgent: function(e3, t3) { - r2.userAgent.add({ segment: e3, version: t3 }); - }, clearCache: function() { - return Promise.all([r2.requestsCache.clear(), r2.responsesCache.clear()]).then(function() { - }); - } }, e2.methods); -}, yr = function(e2) { - return function(t2) { - var n2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, r2 = { transporter: e2.transporter, appId: e2.appId, indexName: t2 }; - return Zn(r2, n2.methods); - }; -}, br = function(e2) { - return function(t2, n2) { - var r2 = t2.map(function(e3) { - return o(o({}, e3), {}, { params: hr(e3.params || {}) }); - }); - return e2.transporter.read({ method: lr, path: "1/indexes/*/queries", data: { requests: r2 }, cacheable: true }, n2); - }; -}, gr = function(e2) { - return function(t2, n2) { - return Promise.all(t2.map(function(t3) { - var r2 = t3.params, i2 = r2.facetName, a2 = r2.facetQuery, u2 = c(r2, ["facetName", "facetQuery"]); - return yr(e2)(t3.indexName, { methods: { searchForFacetValues: Er } }).searchForFacetValues(i2, a2, o(o({}, n2), u2)); - })); - }; -}, Or = function(e2) { - return function(t2, n2, r2) { - return e2.transporter.read({ method: lr, path: Xn("1/answers/%s/prediction", e2.indexName), data: { query: t2, queryLanguages: n2 }, cacheable: true }, r2); - }; -}, Sr = function(e2) { - return function(t2, n2) { - return e2.transporter.read({ method: lr, path: Xn("1/indexes/%s/query", e2.indexName), data: { query: t2 }, cacheable: true }, n2); - }; -}, Er = function(e2) { - return function(t2, n2, r2) { - return e2.transporter.read({ method: lr, path: Xn("1/indexes/%s/facets/%s/query", e2.indexName, t2), data: { facetQuery: n2 }, cacheable: true }, r2); - }; -}, wr = 1, jr = 2, Pr = 3; -function Ir(e2, t2, n2) { - var r2, c2 = { appId: e2, apiKey: t2, timeouts: { connect: 1, read: 2, write: 30 }, requester: { send: function(e3) { - return new Promise(function(t3) { - var n3 = new XMLHttpRequest(); - n3.open(e3.method, e3.url, true), Object.keys(e3.headers).forEach(function(t4) { - return n3.setRequestHeader(t4, e3.headers[t4]); - }); - var r3, o2 = function(e4, r4) { - return setTimeout(function() { - n3.abort(), t3({ status: 0, content: r4, isTimedOut: true }); - }, 1e3 * e4); - }, c3 = o2(e3.connectTimeout, "Connection timeout"); - n3.onreadystatechange = function() { - n3.readyState > n3.OPENED && r3 === void 0 && (clearTimeout(c3), r3 = o2(e3.responseTimeout, "Socket timeout")); - }, n3.onerror = function() { - n3.status === 0 && (clearTimeout(c3), clearTimeout(r3), t3({ content: n3.responseText || "Network request failed", status: n3.status, isTimedOut: false })); - }, n3.onload = function() { - clearTimeout(c3), clearTimeout(r3), t3({ content: n3.responseText, status: n3.status, isTimedOut: false }); - }, n3.send(e3.data); - }); - } }, logger: (r2 = Pr, { debug: function(e3, t3) { - return wr >= r2 && console.debug(e3, t3), Promise.resolve(); - }, info: function(e3, t3) { - return jr >= r2 && console.info(e3, t3), Promise.resolve(); - }, error: function(e3, t3) { - return console.error(e3, t3), Promise.resolve(); - } }), responsesCache: Yn(), requestsCache: Yn({ serializable: false }), hostsCache: Qn({ caches: [$n({ key: "".concat("4.8.5", "-").concat(e2) }), Yn()] }), userAgent: pr("4.8.5").add({ segment: "Browser", version: "lite" }), authMode: er.WithinQueryParameters }; - return _r(o(o(o({}, c2), n2), {}, { methods: { search: br, searchForFacetValues: gr, multipleQueries: br, multipleSearchForFacetValues: gr, initIndex: function(e3) { - return function(t3) { - return yr(e3)(t3, { methods: { search: Sr, searchForFacetValues: Er, findAnswers: Or } }); - }; - } } })); -} -Ir.version = "4.8.5"; -function Dr() { - return (Dr = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function kr(e2, t2) { - var n2 = Object.keys(e2); - if (Object.getOwnPropertySymbols) { - var r2 = Object.getOwnPropertySymbols(e2); - t2 && (r2 = r2.filter(function(t3) { - return Object.getOwnPropertyDescriptor(e2, t3).enumerable; - })), n2.push.apply(n2, r2); - } - return n2; -} -function Cr(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2] != null ? arguments[t2] : {}; - t2 % 2 ? kr(Object(n2), true).forEach(function(t3) { - Nr(e2, t3, n2[t3]); - }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(n2)) : kr(Object(n2)).forEach(function(t3) { - Object.defineProperty(e2, t3, Object.getOwnPropertyDescriptor(n2, t3)); - }); - } - return e2; -} -function Nr(e2, t2, n2) { - return t2 in e2 ? Object.defineProperty(e2, t2, { value: n2, enumerable: true, configurable: true, writable: true }) : e2[t2] = n2, e2; -} -function Ar(e2, t2) { - return function(e3) { - if (Array.isArray(e3)) - return e3; - }(e2) || function(e3, t3) { - if (typeof Symbol == "undefined" || !(Symbol.iterator in Object(e3))) - return; - var n2 = [], r2 = true, o2 = false, c2 = void 0; - try { - for (var i2, a2 = e3[Symbol.iterator](); !(r2 = (i2 = a2.next()).done) && (n2.push(i2.value), !t3 || n2.length !== t3); r2 = true) - ; - } catch (e4) { - o2 = true, c2 = e4; - } finally { - try { - r2 || a2.return == null || a2.return(); - } finally { - if (o2) - throw c2; - } - } - return n2; - }(e2, t2) || function(e3, t3) { - if (!e3) - return; - if (typeof e3 == "string") - return xr(e3, t3); - var n2 = Object.prototype.toString.call(e3).slice(8, -1); - n2 === "Object" && e3.constructor && (n2 = e3.constructor.name); - if (n2 === "Map" || n2 === "Set") - return Array.from(e3); - if (n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2)) - return xr(e3, t3); - }(e2, t2) || function() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function xr(e2, t2) { - (t2 == null || t2 > e2.length) && (t2 = e2.length); - for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) - r2[n2] = e2[n2]; - return r2; -} -function Rr(e2) { - var t2 = e2.appId, n2 = t2 === void 0 ? "BH4D9OD16A" : t2, r2 = e2.apiKey, o2 = e2.indexName, c2 = e2.placeholder, i2 = c2 === void 0 ? "Search docs" : c2, a2 = e2.searchParameters, u2 = e2.onClose, l2 = u2 === void 0 ? xn : u2, s2 = e2.transformItems, f2 = s2 === void 0 ? An : s2, p2 = e2.hitComponent, m2 = p2 === void 0 ? rn : p2, h2 = e2.resultsFooterComponent, d2 = h2 === void 0 ? function() { - return null; - } : h2, v2 = e2.navigator, _2 = e2.initialScrollY, y2 = _2 === void 0 ? 0 : _2, b2 = e2.transformSearchClient, g2 = b2 === void 0 ? An : b2, O2 = e2.disableUserPersonalization, S2 = O2 !== void 0 && O2, E2 = e2.initialQuery, w2 = E2 === void 0 ? "" : E2, j2 = Ar(Ue.useState({ query: "", collections: [], completion: null, context: {}, isOpen: false, activeItemId: null, status: "idle" }), 2), P2 = j2[0], I2 = j2[1], D2 = Ue.useRef(null), k2 = Ue.useRef(null), C2 = Ue.useRef(null), N2 = Ue.useRef(null), A2 = Ue.useRef(null), x2 = Ue.useRef(10), R2 = Ue.useRef(typeof window != "undefined" ? window.getSelection().toString().slice(0, 64) : "").current, T2 = Ue.useRef(w2 || R2).current, H2 = function(e3, t3, n3) { - return Ue.useMemo(function() { - var r3 = Ir(e3, t3); - return r3.addAlgoliaAgent("docsearch", "3.0.0-alpha.40"), /docsearch.js \(.*\)/.test(r3.transporter.userAgent.value) === false && r3.addAlgoliaAgent("docsearch-react", "3.0.0-alpha.40"), n3(r3); - }, [e3, t3, n3]); - }(n2, r2, g2), M2 = Ue.useRef(Jn({ key: "__DOCSEARCH_FAVORITE_SEARCHES__".concat(o2), limit: 10 })).current, q2 = Ue.useRef(Jn({ key: "__DOCSEARCH_RECENT_SEARCHES__".concat(o2), limit: M2.getAll().length === 0 ? 7 : 4 })).current, L2 = Ue.useCallback(function(e3) { - if (!S2) { - var t3 = e3.type === "content" ? e3.__docsearch_parent : e3; - t3 && M2.getAll().findIndex(function(e4) { - return e4.objectID === t3.objectID; - }) === -1 && q2.add(t3); - } - }, [M2, q2, S2]), U2 = Ue.useMemo(function() { - return Xt({ id: "docsearch", defaultActiveItemId: 0, placeholder: i2, openOnFocus: true, initialState: { query: T2, context: { searchSuggestions: [] } }, navigator: v2, onStateChange: function(e3) { - var t3 = e3.state; - I2(t3); - }, getSources: function(e3) { - var t3 = e3.query, n3 = e3.state, r3 = e3.setContext, c3 = e3.setStatus; - return t3 ? H2.search([{ query: t3, indexName: o2, params: Cr({ attributesToRetrieve: ["hierarchy.lvl0", "hierarchy.lvl1", "hierarchy.lvl2", "hierarchy.lvl3", "hierarchy.lvl4", "hierarchy.lvl5", "hierarchy.lvl6", "content", "type", "url"], attributesToSnippet: ["hierarchy.lvl1:".concat(x2.current), "hierarchy.lvl2:".concat(x2.current), "hierarchy.lvl3:".concat(x2.current), "hierarchy.lvl4:".concat(x2.current), "hierarchy.lvl5:".concat(x2.current), "hierarchy.lvl6:".concat(x2.current), "content:".concat(x2.current)], snippetEllipsisText: "\u2026", highlightPreTag: "", highlightPostTag: "", hitsPerPage: 20 }, a2) }]).catch(function(e4) { - throw e4.name === "RetryError" && c3("error"), e4; - }).then(function(e4) { - var t4 = e4.results[0], o3 = t4.hits, c4 = t4.nbHits, i3 = Nn(o3, function(e5) { - return Hn(e5); - }); - return n3.context.searchSuggestions.length < Object.keys(i3).length && r3({ searchSuggestions: Object.keys(i3) }), r3({ nbHits: c4 }), Object.values(i3).map(function(e5, t5) { - return { sourceId: "hits".concat(t5), onSelect: function(e6) { - var t6 = e6.item, n4 = e6.event; - L2(t6), n4.shiftKey || n4.ctrlKey || n4.metaKey || l2(); - }, getItemUrl: function(e6) { - return e6.item.url; - }, getItems: function() { - return Object.values(Nn(e5, function(e6) { - return e6.hierarchy.lvl1; - })).map(f2).map(function(e6) { - return e6.map(function(t6) { - return Cr(Cr({}, t6), {}, { __docsearch_parent: t6.type !== "lvl1" && e6.find(function(e7) { - return e7.type === "lvl1" && e7.hierarchy.lvl1 === t6.hierarchy.lvl1; - }) }); - }); - }).flat(); - } }; - }); - }) : S2 ? [] : [{ sourceId: "recentSearches", onSelect: function(e4) { - var t4 = e4.item, n4 = e4.event; - L2(t4), n4.shiftKey || n4.ctrlKey || n4.metaKey || l2(); - }, getItemUrl: function(e4) { - return e4.item.url; - }, getItems: function() { - return q2.getAll(); - } }, { sourceId: "favoriteSearches", onSelect: function(e4) { - var t4 = e4.item, n4 = e4.event; - L2(t4), n4.shiftKey || n4.ctrlKey || n4.metaKey || l2(); - }, getItemUrl: function(e4) { - return e4.item.url; - }, getItems: function() { - return M2.getAll(); - } }]; - } }); - }, [o2, a2, H2, l2, q2, M2, L2, T2, i2, v2, f2, S2]), F2 = U2.getEnvironmentProps, V2 = U2.getRootProps, B2 = U2.refresh; - return function(e3) { - var t3 = e3.getEnvironmentProps, n3 = e3.panelElement, r3 = e3.formElement, o3 = e3.inputElement; - Ue.useEffect(function() { - if (n3 && r3 && o3) { - var e4 = t3({ panelElement: n3, formElement: r3, inputElement: o3 }), c3 = e4.onTouchStart, i3 = e4.onTouchMove; - return window.addEventListener("touchstart", c3), window.addEventListener("touchmove", i3), function() { - window.removeEventListener("touchstart", c3), window.removeEventListener("touchmove", i3); - }; - } - }, [t3, n3, r3, o3]); - }({ getEnvironmentProps: F2, panelElement: N2.current, formElement: C2.current, inputElement: A2.current }), function(e3) { - var t3 = e3.container; - Ue.useEffect(function() { - if (t3) { - var e4 = t3.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), input:not([disabled])"), n3 = e4[0], r3 = e4[e4.length - 1]; - return t3.addEventListener("keydown", o3), function() { - t3.removeEventListener("keydown", o3); - }; - } - function o3(e5) { - e5.key === "Tab" && (e5.shiftKey ? document.activeElement === n3 && (e5.preventDefault(), r3.focus()) : document.activeElement === r3 && (e5.preventDefault(), n3.focus())); - } - }, [t3]); - }({ container: D2.current }), Ue.useEffect(function() { - return document.body.classList.add("DocSearch--active"), function() { - var e3, t3; - document.body.classList.remove("DocSearch--active"), (e3 = (t3 = window).scrollTo) === null || e3 === void 0 || e3.call(t3, 0, y2); - }; - }, []), Ue.useEffect(function() { - window.matchMedia("(max-width: 750px)").matches && (x2.current = 5); - }, []), Ue.useEffect(function() { - N2.current && (N2.current.scrollTop = 0); - }, [P2.query]), Ue.useEffect(function() { - T2.length > 0 && (B2(), A2.current && A2.current.focus()); - }, [T2, B2]), Ue.useEffect(function() { - function e3() { - if (k2.current) { - var e4 = 0.01 * window.innerHeight; - k2.current.style.setProperty("--docsearch-vh", "".concat(e4, "px")); - } - } - return e3(), window.addEventListener("resize", e3), function() { - window.removeEventListener("resize", e3); - }; - }, []), Ue.createElement("div", Dr({ ref: D2 }, V2({ "aria-expanded": true }), { className: ["DocSearch", "DocSearch-Container", P2.status === "stalled" && "DocSearch-Container--Stalled", P2.status === "error" && "DocSearch-Container--Errored"].filter(Boolean).join(" "), onMouseDown: function(e3) { - e3.target === e3.currentTarget && l2(); - } }), Ue.createElement("div", { className: "DocSearch-Modal", ref: k2 }, Ue.createElement("header", { className: "DocSearch-SearchBar", ref: C2 }, Ue.createElement(zn, Dr({}, U2, { state: P2, autoFocus: T2.length === 0, onClose: l2, inputRef: A2, isFromSelection: Boolean(T2) && T2 === R2 }))), Ue.createElement("div", { className: "DocSearch-Dropdown", ref: N2 }, Ue.createElement(Vn, Dr({}, U2, { indexName: o2, state: P2, hitComponent: m2, resultsFooterComponent: d2, disableUserPersonalization: S2, recentSearches: q2, favoriteSearches: M2, onItemClick: function(e3) { - L2(e3), l2(); - }, inputRef: A2 }))), Ue.createElement("footer", { className: "DocSearch-Footer" }, Ue.createElement(tn, null)))); -} -function Tr() { - return (Tr = Object.assign || function(e2) { - for (var t2 = 1; t2 < arguments.length; t2++) { - var n2 = arguments[t2]; - for (var r2 in n2) - Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]); - } - return e2; - }).apply(this, arguments); -} -function Hr(e2, t2) { - return function(e3) { - if (Array.isArray(e3)) - return e3; - }(e2) || function(e3, t3) { - if (typeof Symbol == "undefined" || !(Symbol.iterator in Object(e3))) - return; - var n2 = [], r2 = true, o2 = false, c2 = void 0; - try { - for (var i2, a2 = e3[Symbol.iterator](); !(r2 = (i2 = a2.next()).done) && (n2.push(i2.value), !t3 || n2.length !== t3); r2 = true) - ; - } catch (e4) { - o2 = true, c2 = e4; - } finally { - try { - r2 || a2.return == null || a2.return(); - } finally { - if (o2) - throw c2; - } - } - return n2; - }(e2, t2) || function(e3, t3) { - if (!e3) - return; - if (typeof e3 == "string") - return Mr(e3, t3); - var n2 = Object.prototype.toString.call(e3).slice(8, -1); - n2 === "Object" && e3.constructor && (n2 = e3.constructor.name); - if (n2 === "Map" || n2 === "Set") - return Array.from(e3); - if (n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2)) - return Mr(e3, t3); - }(e2, t2) || function() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - }(); -} -function Mr(e2, t2) { - (t2 == null || t2 > e2.length) && (t2 = e2.length); - for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++) - r2[n2] = e2[n2]; - return r2; -} -function qr(e2) { - var t2 = Ue.useRef(null), n2 = Hr(Ue.useState(false), 2), r2 = n2[0], o2 = n2[1], c2 = Hr(Ue.useState(void 0), 2), i2 = c2[0], a2 = c2[1], u2 = Ue.useCallback(function() { - o2(true); - }, [o2]), l2 = Ue.useCallback(function() { - o2(false); - }, [o2]); - return function(e3) { - var t3 = e3.isOpen, n3 = e3.onOpen, r3 = e3.onClose, o3 = e3.onInput, c3 = e3.searchButtonRef; - Ue.useEffect(function() { - function e4(e5) { - (e5.keyCode === 27 && t3 || e5.key === "k" && (e5.metaKey || e5.ctrlKey) || !function(e6) { - var t4 = e6.target, n4 = t4.tagName; - return t4.isContentEditable || n4 === "INPUT" || n4 === "SELECT" || n4 === "TEXTAREA"; - }(e5) && e5.key === "/" && !t3) && (e5.preventDefault(), t3 ? r3() : document.body.classList.contains("DocSearch--active") || document.body.classList.contains("DocSearch--active") || n3()), c3 && c3.current === document.activeElement && o3 && /[a-zA-Z0-9]/.test(String.fromCharCode(e5.keyCode)) && o3(e5); - } - return window.addEventListener("keydown", e4), function() { - window.removeEventListener("keydown", e4); - }; - }, [t3, n3, r3, o3, c3]); - }({ isOpen: r2, onOpen: u2, onClose: l2, onInput: Ue.useCallback(function(e3) { - o2(true), a2(e3.key); - }, [o2, a2]), searchButtonRef: t2 }), Ue.createElement(Ue.Fragment, null, Ue.createElement(We, { onClick: u2, ref: t2 }), r2 && je(Ue.createElement(Rr, Tr({}, e2, { initialScrollY: window.scrollY, initialQuery: i2, onClose: l2 })), document.body)); -} -function docsearch(e2) { - ke(Ue.createElement(qr, n({}, e2, { transformSearchClient: function(t2) { - return t2.addAlgoliaAgent("docsearch.js", "3.0.0-alpha.40"), e2.transformSearchClient ? e2.transformSearchClient(t2) : t2; - } })), function(e3) { - var t2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : window; - return typeof e3 == "string" ? t2.document.querySelector(e3) : e3; - }(e2.container, e2.environment)); -} -var SearchInput_vue_vue_type_style_index_0_lang = "#docsearch{display:inline-block;vertical-align:middle}.DocSearch-Button{background:#f7f8fa;height:32px}.DocSearch-Button:hover{box-shadow:none}.DocSearch-Search-Icon{height:18px;width:18px}.DocSearch-Button-Key{font-size:12px}"; -const _sfc_main$18 = { - name: "VanDocSearch", - props: { - lang: String, - searchConfig: Object - }, - watch: { - lang() { - this.initDocsearch(); - } - }, - mounted() { - this.initDocsearch(); - }, - methods: { - initDocsearch() { - if (this.searchConfig) { - docsearch(__spreadProps(__spreadValues({}, this.searchConfig), { - container: "#docsearch" - })); - } - } - } -}; -const _hoisted_1$14 = { id: "docsearch" }; -function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) { - return openBlock(), createElementBlock("div", _hoisted_1$14); -} -var SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$e]]); -const _hoisted_1$13 = { class: "van-doc-markdown-body" }; -const _hoisted_2$10 = /* @__PURE__ */ createStaticVNode('

\u66F4\u65B0\u65E5\u5FD7

v1.9.0

2021-09-27

Bug Fixes

  • Slider: \u79FB\u9664 theme mixin #4520
  • Tab: \u4FEE\u590D\u521D\u59CB\u4F4D\u7F6E\u4E0D\u6B63\u786E\u95EE\u9898 #4521

Document

  • ActionSheet: \u6DFB\u52A0 show \u5C5E\u6027\u8BF4\u660E #4518

Feature

  • Slider: \u6DFB\u52A0 vertical \u5C5E\u6027 #4486

Performance

  • \u79FB\u9664 CSS variables \u517C\u5BB9\u4EE3\u7801 #4487

v1.8.7

2021-09-22

Features

  • Icons: \u65B0\u589E guide-o \u56FE\u6807 #4507

1.8.6

2021-09-20

Features

  • Calendar: \u65B0\u589E confirmDisabledText \u9ED8\u8BA4\u6587\u6848 #4490) (8629da1

Bug Fixes

  • \u79FB\u9664 optionalTypes #4501) (3afe10c
  • Docs: \u4FEE\u590D\u6587\u6863\u9519\u8BEF #4489

1.8.5

2021-09-15

Bug Fixes

  • Calendar: \u4FEE\u590D\u8D85\u51FA\u9009\u62E9\u8303\u56F4 toast \u63D0\u793A\u4E00\u76F4\u5B58\u5728\u95EE\u9898 #4474
  • page-scroll: \u4FEE\u590D isDef \u53D6\u53CD\u95EE\u9898 #4488

1.8.4

2021-09-07

Bug Fixes

  • page-scroll: \u4FEE\u590D getCurrentPage \u4E3A\u7A7A\u65F6\u62A5\u9519 #4458

Features

  • Field: \u65B0\u589E clear-trigger \u5C5E\u6027 #4461
  • Search: \u65B0\u589E clear-icon \u5C5E\u6027 #4463
  • Search: \u65B0\u589E clear-trigger \u5C5E\u6027 9e17b13
  • Slider: \u65B0\u589E range \u5C5E\u6027 #4442

v1.8.3

2021-08-30

Bug Fixes

  • Calendar: \u4FEE\u590D default-date \u5C5E\u6027\u5931\u6548\u95EE\u9898 #4430
  • ShareSheet: \u8C03\u6574 overlayStyle \u5C5E\u6027\u7C7B\u578B\u4E3A string 8c408e2
  • Stepper: \u8C03\u6574 minus/plus slots \u4F4D\u7F6E #4427
  • Sticky: \u4FEE\u590D root \u4E3A null \u65F6\uFF0C\u8BFB\u53D6 root.top \u62A5\u9519\u95EE\u9898 #4433
  • Calendar: \u8C03\u6574 minDate \u548C maxDate \u4F20\u503C\u7C7B\u578B\u4E3A Number 37d8e69

Features

  • Popup: \u65B0\u589E lock-scroll \u5C5E\u6027 #4384

Performance Improvements

  • Radio: label \u7684 margin-left \u6539\u4E3A padding-left\uFF0C\u589E\u5927\u53EF\u70B9\u51FB\u533A\u57DF\uFF0C\u589E\u5F3A\u7528\u6237\u4F53\u9A8C #4165

v1.8.2

2021-08-18

Bug Fixes

  • Calendar: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 7f7cf6
  • Field: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 6dd42a

v1.8.1

2021-08-18

Feature

  • Calendar: \u65B0\u589E click-subtitle \u4E8B\u4EF6 #4385
  • Circle: \u4F7F\u7528 setTimeout \u4EE3\u66FF setInterval #4401

Bug Fixes

  • Picker: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 #4408

v1.8.0

2021-08-11

Feature

  • Overlay: \u65B0\u589E lock-scroll \u5C5E\u6027 #4383
  • search: \u65B0\u589E click-input \u4E8B\u4EF6 #4357

Performance

  • \u79FB\u9664\u4E86 iOS8 \u76F8\u5173\u7684 polyfill\uFF0C\u51CF\u5C11\u5305\u4F53\u79EF #4395

v1.7.2

2021-07-19

Bug Fixes

  • Calendar: \u521D\u59CB\u65E5\u671F\u8BBE\u7F6E\u4E3A\u5F53\u524D\u65E5\u671F #4339

Features

  • Cell: CellGroup \u65B0\u589E inset \u5C5E\u6027 #4341
  • Search: \u65B0\u589E click-input \u4E8B\u4EF6 #4337

1.7.1

2021-07-06

Bug Fixes

  • Col: \u4FEE\u590D\u6837\u5F0F\u95EE\u9898 #4322
  • Grid: \u589E\u52A0 icon-prefix \u5C5E\u6027\u9ED8\u8BA4\u503C #4318
  • IndexBar: \u4FEE\u590D\u5F53\u7D22\u5F15\u5217\u8868\u4E3A\u7A7A\u65F6\u62A5\u9519 #4310

1.7.0

2021-07-04

Bug Fixes

  • Button: \u4FEE\u590D type \u4E3A getUserInfo & wx.getUserProfile \u53EF\u7528\u65F6 lang \u53C2\u6570\u5931\u6548 #4250
  • ShareSheet: \u65B0\u589E\u5185\u7F6E icon weapp-qrcode wechat-moments #4256

Features

  • Checkbox: \u589E\u52A0 direction \u5C5E\u6027\uFF0C\u8BBE\u7F6E\u6392\u5217\u65B9\u5411 #4265
  • ConfigProvider: \u589E\u52A0\u5168\u5C40\u914D\u7F6E\u7EC4\u4EF6 #4279
  • Grid: \u589E\u52A0 reverse \u5C5E\u6027\uFF0C\u652F\u6301\u6587\u672C&\u56FE\u7247\u4F4D\u7F6E\u4E92\u6362 #4280
  • GridItem: \u589E\u52A0 icon-prefix \u5C5E\u6027\uFF0C\u652F\u6301\u7B2C\u4E09\u65B9\u5B57\u4F53 #4276
  • Rate: \u589E\u52A0\u66F4\u591A css \u53D8\u91CF #4297
  • Slider: \u589E\u52A0\u66F4\u591A css \u53D8\u91CF #4305

Improvements

  • wxs style \u65B9\u6CD5\u652F\u6301\u9A7C\u5CF0\u53D8\u91CF\u547D\u540D\uFF0C\u4EE5\u4FBF\u80FD\u66F4\u597D\u7684\u5728 wxml \u4E2D\u4F7F\u7528 #4281

1.6.9

2021-06-06

Bug Fixes

  • DatetimePicker: \u4FEE\u590D \u52A8\u6001\u8BBE\u7F6E min-hour min-date \u663E\u793A\u4E0D\u6B63\u786E #4245
  • Tabs: \u4FEE\u590D tab \u6570\u91CF\u8F83\u591A\u65F6\u6EDA\u52A8\u8DDD\u79BB\u4E0D\u6B63\u786E #4202
  • Uploader: \u4FEE\u590D demo \u4E2D beforeRead \u62A5\u9519 #4235

1.6.9-beta.2

2021-05-22

Bug Fixes

  • Button: \u4FEE\u590D open-type \u4E0D\u751F\u6548 #4222
  • Calendar: \u4FEE\u590D allow-same-day \u5F00\u542F\u65F6 custom-color \u5C5E\u6027\u65E0\u6548 #4200
  • Circle: \u4FEE\u590D value \u662F\u5C0F\u6570\u65F6\u6296\u52A8\u7684\u60C5\u51B5 #4152
  • NoticeBar: \u8C03\u6574\u6EDA\u52A8\u884C\u4E3A #4201
  • NoticeBar: \u4FEE\u590D\u4E0D\u6B63\u786E\u7684\u6EDA\u52A8\u901F\u5EA6 cde3876
  • Radio: \u652F\u6301\u52A8\u6001\u8BBE\u7F6E disabled #4191
  • Rate: \u652F\u6301\u6ED1\u52A8\u9009\u62E9\u534A\u661F #4195

Features

  • Calendar: \u589E\u52A0 first-day-of-week \u5C5E\u6027\uFF0C\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5 #4211
  • Calendar: \u589E\u52A0 show-range-prompt \u5C5E\u6027\u548C over-range \u4E8B\u4EF6\uFF0C\u8BBE\u7F6E\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848 #4212
  • Icons: \u56FE\u6807\u5E93\u8FC1\u79FB\u81F3 iconfont.cn #4219
  • OpenType: \u652F\u6301 getUserProfile #4203
  • Panel: \u79FB\u9664 useFooterSlot #4205

1.6.8

2021-02-26

Features

  • NoticeBar: \u65B0\u589E\u9ED8\u8BA4\u63D2\u69FD (#4048)
  • Stepper: \u65B0\u589E theme \u5C5E\u6027\uFF0C\u652F\u6301\u5706\u5F62\u98CE\u683C (#4049)
  • Stepper: \u65B0\u589E plus & minus \u63D2\u69FD (#4049)

Bug Fixes

  • Checkbox: \u4FEE\u590D label-position \u5C5E\u6027\u65E0\u6548 (#4036)
  • Dialog: \u4FEE\u590D beforeClose \u65B9\u6CD5\u7C7B\u578B\u5B9A\u4E49 (#4019)

Improvements

  • Circle: \u5F53\u5185\u7F6E canvas \u4E0D\u652F\u6301\u540C\u5C42\u6E32\u67D3\u65F6\u964D\u7EA7\u81F3\u9ED8\u8BA4 type (#4050)

1.6.7

2021-01-27

Features

  • Radio: \u65B0\u589E direction \u5C5E\u6027 (#4007)

Bug Fixes

  • Icons: \u4FEE\u590D\u90E8\u5206\u5730\u533A\u56FE\u6807\u4E0D\u663E\u793A (#4012)
  • Transition: \u4FEE\u590D\u9ED8\u8BA4\u8BBE\u7F6E show \u5C5E\u6027\u4E3A true \u65F6\u4E0D\u751F\u6548 (#4005)

1.6.6

2021-01-21

Features

  • Uploader: \u652F\u6301\u6587\u4EF6\u9884\u89C8 (#3975)

Bug Fixes

  • Picker: \u4FEE\u590D\u6807\u9898\u680F\u65E0\u6CD5\u663E\u793A (#3973)

Improvements

  • Calendar: \u4F18\u5316\u6A21\u677F\u4EE3\u7801 (#3972)

1.6.5

2021-01-19

Features

  • Field: \u65B0\u589E input \u63D2\u69FD (#3932)
  • Field: \u65B0\u589E click-input \u4E8B\u4EF6 (#3932)
  • Icon: \u65B0\u589E delete-o\u3001sort\u3001font\u3001font-o\u3001revoke \u56FE\u6807 (#3881)

Bug Fixes

  • Button: \u4FEE\u590D custom-style \u5C5E\u6027\u4E0D\u751F\u6548 (#3903)
  • Dialog: \u4FEE\u590D close-on-click-overlay \u5C5E\u6027\u4E0D\u751F\u6548 (#3913)

Improvements

  • Cell: \u4F18\u5316\u6027\u80FD (#3888)
  • Col: \u4F18\u5316\u6027\u80FD (#3886)
  • Divider: \u4F18\u5316\u6027\u80FD (#3887)
  • Empty: \u4F18\u5316\u6027\u80FD (#3933)
  • Loading: \u4F18\u5316\u6027\u80FD (#3892)
  • Notice-bar: \u4F18\u5316\u6027\u80FD (#3891)
  • Notify: \u4F18\u5316\u6027\u80FD (#3893)
  • Picker: \u4F18\u5316\u6027\u80FD (#3949)
  • Stepper: \u4F18\u5316\u6027\u80FD (#3890)
  • Sticky: \u4F18\u5316\u6027\u80FD (#3879)
  • SwipeCell: \u4F18\u5316\u6027\u80FD (#3928)
  • Switch: \u4F18\u5316\u6027\u80FD (#3889)
  • Tag: \u4F18\u5316\u6027\u80FD (#3894)
  • Transition: \u4F18\u5316\u6027\u80FD (#3895)
  • Uploader: \u4F18\u5316\u6027\u80FD (#3897)

1.6.4

2020-12-18

Improvements

  • Tab: \u4F18\u5316\u7C98\u6027\u5E03\u5C40\u65F6\u7684\u6E32\u67D3\u6027\u80FD (#3875)
  • Grid: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (#3839)
  • Image: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (#3839)
  • Button: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (#3839)
  • Icon: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (#3839)
  • Checkbox: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (#3839)
  • Slider: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (#3839)

Bug Fixes

  • Calendar: \u4FEE\u590D\u5728 phone \u8BBE\u5907\u4E0A\u9009\u62E9\u65E5\u671F\u540E\u663E\u793A\u9519\u8BEF (#3833)
  • GoodsAction: \u4FEE\u590D\u90E8\u5206\u8BBE\u5907\u4E0A\u9AD8\u5EA6\u5F02\u5E38 (#3865)
  • Slider: \u4FEE\u590D\u8BBE\u7F6E max min \u65F6\u6ED1\u52A8\u4E0D\u5747\u5300 (#3876)
  • Tab: \u4FEE\u590D\u5207\u6362\u65F6\u5185\u5BB9\u533A\u95EA\u70C1\u7684\u95EE\u9898 (#3866)

1.6.3

2020-12-09

Features

  • Dialog: \u65B0\u589E beforeClose \u5C5E\u6027 (#3815)
  • uploader: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF (#3797)
  • Aarea: \u652F\u6301\u4E0D\u4F20\u5165 county_list \u6570\u636E (#3824)
  • Tab: \u65B0\u589E resize \u65B9\u6CD5 (#3827)

Improvements

  • Collapse: \u4F7F\u7528 animate \u63D0\u5347\u52A8\u753B\u6027\u80FD (#3826)
  • Tab: \u4F18\u5316\u6837\u5F0F\u62FC\u88C5\u6027\u80FD (#3827)

Bug Fixes

  • Field: \u4FEE\u590D\u8F93\u5165\u4E2D\u6587\u65F6\u663E\u793A\u5B57\u6570\u6682\u65F6\u8D85\u51FA maxlength (#3802)
  • Info: \u4FEE\u590D\u6837\u5F0F\u9519\u8BEF (#3823)
  • NavBar: \u4FEE\u590D\u52A8\u6001\u6E32\u67D3\u65F6\u7EC4\u4EF6\u62A5\u9519 (#3822)
  • Progress: \u4FEE\u590D percentage \u4E3A 0 \u65F6\u6837\u5F0F\u5F02\u5E38 (#3808)

1.6.2

2020-11-29

Features

  • Tabbar: \u65B0\u589E placeholder icon-prefix \u5C5E\u6027 (#3792)

Bug Fixes

  • DatetimePicker: \u4FEE\u590D type=year-month \u65F6\u9009\u62E9\u51FA\u73B0\u62A5\u9519 (#3783)
  • Info: \u4FEE\u590D\u90E8\u5206\u5B89\u5353\u8BBE\u5907\u4E2D\u6587\u6848\u4E0D\u5B8C\u5168\u5C45\u4E2D (#3778)
  • Tab: \u4FEE\u590D ellipsis \u4E3A false \u65F6\u4E0B\u5212\u7EBF\u4F4D\u7F6E\u4E0D\u6B63\u786E (#3777)
  • Notify: \u4FEE\u590D\u7EC4\u4EF6\u672A\u5168\u5C40\u5C45\u4E2D (#3751)

Improvements

  • Icon: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (#3791)

1.6.1

2020-11-12

Bug Fixes

  • Field: \u4FEE\u590D\u672A\u4F20\u5165 label \u5C5E\u6027\u65F6\u4ECD\u6E32\u67D3 label #3756
  • Picker: \u4FEE\u590D confirm\u3001cancel \u4E8B\u4EF6\u62A5\u9519 #3755

1.6.0

2020-11-11

Features

  • SwipeCell: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B custom-class #3678
  • ActionSheet: \u8C03\u6574\u53D6\u6D88\u6587\u5B57\u989C\u8272\u81F3 @gray-7 #3719
  • ActionSheet: \u8C03\u6574\u9876\u90E8\u680F\u6837\u5F0F #3720
  • ActionSheet: \u8C03\u6574\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\u81F3 22px #3718
  • ActionSheet: \u8C03\u6574\u63CF\u8FF0\u6587\u5B57\u6837\u5F0F #3726
  • Cell: \u8C03\u6574\u56FE\u6807\u5916\u8FB9\u8DDD\u81F3 4px #3721
  • DropdownMenu: \u589E\u52A0\u9ED8\u8BA4\u9634\u5F71 #3723
  • DropdownMenu: \u8C03\u6574\u9009\u4E2D\u6001\u9ED8\u8BA4\u989C\u8272\u81F3 #ee0a24 #3725
  • Image: \u8C03\u6574\u56FE\u6807\u5927\u5C0F\u81F3 36px #3724
  • Popup: \u8C03\u6574\u5706\u89D2\u81F3 16px #3713
  • Search: \u8C03\u6574\u5DE6\u4FA7\u5185\u8FB9\u8DDD\u81F3 12px #3716
  • Sidebar: \u8C03\u6574\u5BBD\u5EA6\u81F3 85px #3722
  • TabbarItem: \u8C03\u6574\u56FE\u6807\u5927\u5C0F\u81F3 22px #3717

Bug Fixes

  • Field: \u4FEE\u590D\u4F7F\u7528 label \u5C5E\u6027\u65F6 label-class \u6837\u5F0F\u7C7B\u4E0D\u751F\u6548 #3729
  • NoticeBar: \u4FEE\u590D\u5185\u5BB9\u8F83\u77ED\u65F6\u5F00\u542F scrollable \u4E0D\u751F\u6548 #3727
  • SidebarItem: \u4FEE\u590D\u957F\u6570\u5B57\u4E0D\u6362\u884C\u7684\u95EE\u9898 #3714
  • Tag: \u9ED8\u8BA4\u5B57\u4F53\u52A0\u5165 miui #3715

1.5.2

2020-10-15

Features

  • Uploader: \u6807\u51C6\u5316 file-list \u4E0E\u4E8B\u4EF6\u53C2\u6570 #3673
  • Uploader: \u65B0\u589E thumb\uFF0C\u652F\u6301\u7F29\u7565\u56FE\u5C55\u793A #3673
  • GoodsAction: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF #3654
  • \u79FB\u52A8 @types/wechat-miniprogram \u81F3 dependencies #3654

Bug Fixes

  • Button: \u4FEE\u590D\u7EC6\u8FB9\u6846\u6837\u5F0F\u95EE\u9898 #3653
  • Tab: \u91CD\u6784\u52A8\u753B\u5B9E\u73B0\uFF0C\u4E0D\u518D\u4F7F\u7528 transform #3668

1.5.1

2020-09-29

Features

  • Card: \u65B0\u589E origin-price tag \u63D2\u69FD #3645
  • ShareSheet: \u8C03\u6574\u9ED8\u8BA4 z-index \u81F3 100 #3575
  • ShareSheet: \u65B0\u589E item \u5C5E\u6027 openType #3575
  • Uploader: \u6269\u5927\u5220\u9664\u6309\u94AE\u70B9\u51FB\u533A\u57DF #3631

Bug Fixes

  • Uploader: \u652F\u6301\u9884\u89C8\u89C6\u9891 #3594
  • Dialog: \u8C03\u6574\u7C7B\u578B\u5B9A\u4E49 #3630
  • NavBar: \u4FEE\u590D CSS \u53D8\u91CF --nav-bar-icon-color \u4E0D\u751F\u6548 #3643
  • NavBar: \u4FEE\u590D\u672A\u8BBE\u7F6E title \u65F6\u6837\u5F0F\u5F02\u5E38 #3643
  • Tab: \u4FEE\u590D line-width \u5C5E\u6027\u4E0D\u652F\u6301 string #3628

1.5.0

2020-08-27

Features

  • ShareSheet: \u65B0\u589E\u7EC4\u4EF6 #3559
  • Icons: \u5347\u7EA7 @vant/icons \u81F3 v1.2.5 #3539
  • sidebar: \u65B0\u589E badge \u5C5E\u6027 #3564
  • Tabs: \u8C03\u6574\u9ED8\u8BA4 line-width \u81F3 40px #3518
  • Tabs: \u53BB\u9664\u9ED8\u8BA4\u8FB9\u6846 #3519
  • TreeSelect: \u65B0\u589E selected-icon \u5C5E\u6027 #3565
  • TreeSelect: \u652F\u6301 badge\u3001dot \u663E\u793A #3565

Bug Fixes

  • collapse: \u4FEE\u590D\u5D4C\u5957\u5728 popup \u7B49\u7EC4\u4EF6\u4E2D\u65F6\u9ED8\u8BA4\u5C55\u5F00\u65E0\u6548 #3562
  • empty: \u4FEE\u590D image\u3001description \u63D2\u69FD\u4E0D\u751F\u6548 #3563

1.4.4

2020-08-12

Bug Fixes

  • Transition: \u91CD\u6784\u7EC4\u4EF6\u4EE5\u4FEE\u590D\u5361\u987F\u95EE\u9898 #3498
  • Icon: \u4FEE\u590D\u6570\u5B57\u672A\u5BF9\u9F50 #3501
  • Tab: \u4FEE\u590D\u53EF\u6EDA\u52A8\u65F6\u4E0B\u5212\u7EBF\u4F4D\u7F6E\u9519\u8BEF #3511

v1.4.3

2020-08-07

Features

  • Dialog: \u589E\u52A0\u5706\u89D2\u6309\u94AE\u6837\u5F0F #3476
  • Cell: \u8C03\u6574\u4E0B\u5212\u7EBF\u4F4D\u7F6E #3487
  • Tab: \u8C03\u6574\u9ED8\u8BA4\u6EDA\u52A8\u9608\u503C\u81F3 5 \u4E2A\u3001\u4F18\u5316\u6837\u5F0F #3459

v1.4.2

2020-08-03

Features

  • Toast: \u4F18\u5316\u6837\u5F0F #3451
  • Tag: \u4F18\u5316\u6837\u5F0F #3465

Bug Fixes

  • Calendar: \u4FEE\u590D\u8D85\u51FA max-range \u65F6\u672A\u663E\u793A Toast #3466
  • Tab: \u4FEE\u590D\u624B\u52BF\u6EDA\u52A8\u53EF\u5207\u6362\u81F3\u7981\u7528\u9879 #3467

v1.4.1

2020-07-28

Features

  • Picker: \u8C03\u6574\u9ED8\u8BA4\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570\u4E3A 6 \u4E2A #3418
  • Toast: \u8C03\u6574\u5706\u89D2\u4E3A 8px #3419

Bug Fixes

  • Slider: \u4FEE\u590D\u70B9\u51FB\u4F1A\u89E6\u53D1 drag \u4E8B\u4EF6 #3415
  • Area: \u4FEE\u590D\u4E2D\u95F4\u5217\u65E0\u6CD5\u6EDA\u52A8 #3443

v1.4.0

2020-07-17

Features

  • Empty: \u65B0\u589E Empty \u7EC4\u4EF6 #3327
  • NoticeBar: \u65B0\u589E background \u5C5E\u6027 #3388
  • NoticeBar: \u65B0\u589E close \u4E8B\u4EF6 #3388
  • GridItem: \u65B0\u589E icon-color \u5C5E\u6027 #3386
  • NavBar: \u73B0\u5728 custom-style \u5C06\u5F71\u54CD\u6839\u8282\u70B9#3371
  • Cell: \u65B0\u589E title-style \u5C5E\u6027, fix Field label width #3370
  • Uploader: \u66F4\u65B0 failed \u56FE\u6807 #3359
  • Uploader: \u66F4\u65B0\u5220\u9664\u56FE\u6807\u6837\u5F0F #3385
  • Uploader: \u79FB\u9664\u5706\u89D2\u6837\u5F0F #3384
  • Field: \u66F4\u65B0\u7981\u7528\u6001\u6837\u5F0F #3358
  • Field: \u66F4\u65B0 label \u6837\u5F0F #3357
  • Picker: \u8C03\u6574 action button \u6837\u5F0F #3316

Bug Fixes

  • Collapse: \u4F7F\u7528 animation \u91CD\u6784\u52A8\u753B\u90E8\u5206\u903B\u8F91\u4EE5\u4FEE\u590D\u52A8\u753B\u5361\u987F #3401
  • Uploader: \u4FEE\u590D loading \u6837\u5F0F\u9519\u8BEF\u3001\u8C03\u6574 previewSize \u5C5E\u6027\u9ED8\u8BA4\u503C #3317
  • Area: \u4FEE\u590D\u4F4E\u7248\u672C\u57FA\u7840\u5E93\u4E0B columns-num \u8BBE\u7F6E\u4E3A 1 \u6216 2 \u65F6\u771F\u673A\u73AF\u5883\u62A5\u9519 #3318
  • DatetimePicker: \u4FEE\u590D\u4F7F\u7528 formatter \u65F6\uFF0C\u4E8B\u4EF6\u8FD4\u56DE\u503C\u53EF\u80FD\u4E0D\u6B63\u786E #3352
  • Field: \u4FEE\u590D textarea \u6A21\u5F0F\u4E0B label \u4E0E value \u4E0D\u5728\u540C\u4E00\u6C34\u5E73\u7EBF\u4E0A #3383
  • Dialog: show dialog after class ready #3374
  • Calendar: confirm-disabled-text \u5C5E\u6027\u589E\u52A0\u9ED8\u8BA4\u503C #3394

v1.3.3

2020-06-24

Features

  • steps: \u4E3A\u6BCF\u4E00\u9879\u589E\u52A0 inactiveIcon\u3001activeIcon \u5C5E\u6027 #3315
  • field: \u589E\u52A0\u5916\u90E8\u6837\u5F0F\u7C7B label-class #3311
  • field: \u73B0\u5728\u603B\u4F1A\u4ECE\u5185\u90E8 set value \u503C #3313
  • uploader: \u4E3A\u6BCF\u4E00\u9879\u589E\u52A0 deletable \u5C5E\u6027 #3270
  • uploader: \u6269\u5927\u5220\u9664\u56FE\u6807\u7684\u53EF\u70B9\u51FB\u533A\u57DF #3265

Bug Fixes

  • tabbar: \u4FEE\u590D iphone-se \u4E0A\u9AD8\u5EA6\u5F02\u5E38 #3314
  • grid: \u4FEE\u590D text \u4E0E icon \u540C\u65F6\u8BBE\u7F6E\u65F6\u6837\u5F0F\u5F02\u5E38 #3310
  • calendar: \u4FEE\u590D\u591A\u9009\u6A21\u5F0F\u4E0B default-date \u5C5E\u6027\u4E0D\u751F\u6548 #3284
  • circle: \u4FEE\u590D type=\u201C2d\u201D \u65F6\u65E0\u6CD5\u52A8\u6001\u53D8\u66F4 value #3264
  • nav-bar: \u4FEE\u590D\u672A\u8BBE\u7F6E left-text \u65F6\u5DE6\u4FA7\u56FE\u6807\u6837\u5F0F\u5F02\u5E38 #3263

v1.3.2

2020-06-04

Features

  • button: \u65B0\u589E form-type \u5C5E\u6027 #3208
  • grid: \u65B0\u589E icon-size\u3001badge \u5C5E\u6027 #3236
  • grid: \u65B0\u589E direction \u5C5E\u6027 #3192

Bug Fixes

  • Grid: \u4FEE\u590D\u5F00\u542F square \u65F6\u6A2A\u3001\u7EB5\u5411\u95F4\u8DDD\u4E0D\u540C #3231
  • uploader: \u4FEE\u590D\u70B9\u51FB\u5220\u9664\u56FE\u6807\u65F6\u89E6\u53D1 click-preview \u4E8B\u4EF6 #3230
  • circle: \u4FEE\u590D type="2d" \u4E0D\u751F\u6548 #3228
  • calendar: \u4FEE\u590D\u5728\u9009\u62E9\u533A\u95F4\u65F6\uFF0C\u70B9\u51FB\u786E\u5B9A\u62A5\u9519 #3195
  • tag: \u4FEE\u590D css \u53D8\u91CF\u540D\u62FC\u5199\u9519\u8BEF #3191

v1.3.1

2020-05-24

Features

  • Button: \u65B0\u589E class-prefix \u5C5E\u6027 #3159
  • Collapse: \u65B0\u589E open\u3001close \u4E8B\u4EF6 #3176

Bug Fixes

  • \u4FEE\u590D\u63A7\u5236\u53F0\u63D0\u793A\u9009\u62E9\u5668\u9519\u8BEF\u7684\u95EE\u9898 #3137
  • \u4FEE\u590D GoodsActionButton \u5728\u67D0\u4E9B\u60C5\u51B5\u4E0B\u62A5\u9519\u7684\u95EE\u9898 #3145

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

  • sticky: \u65B0\u589E scroll-top \u5C5E\u6027 #3115
  • button: \u65B0\u589E dataset \u5C5E\u6027 #3075
  • uploader: \u6240\u6709\u7C7B\u578B\u90FD\u4F1A\u89E6\u53D1 click-preview \u4E8B\u4EF6 #3071
  • Uploader: \u5C5E\u6027 accept \u65B0\u589E\u503C media #3047
  • feat: \u65B0\u589E\u57FA\u7840 font-family #3061
  • submit-bar: \u4F7F\u7528\u53E6\u4E00\u4E2A view \u5B9E\u73B0 safe-area-inset-bottom \u4EE5\u907F\u514D\u6837\u5F0F\u51B2\u7A81 #3104

Bug Fixes

  • dialog: \u4FEE\u590D title \u591A\u4F59\u7A7A\u683C\u7684\u95EE\u9898 #3069
  • tab: \u4FEE\u590D tab \u4E2A\u6570\u591A\u65F6\u663E\u793A\u6EDA\u52A8\u6761 #3072
  • Sticky: \u4FEE\u590D\u4F7F\u7528\u7EC4\u4EF6\u65F6\u9875\u9762 onPageScroll \u5931\u6548 #3092
  • button: \u4FEE\u590D disabled \u5C5E\u6027\u5BF9 open-type \u7C7B\u578B\u7684\u6309\u94AE\u65E0\u6548 #3076

v1.2.2

2020-04-21

Features

  • GoodsActionButton: \u65B0\u589E CSS \u53D8\u91CF goods-action-line-height #3037
  • Calendar: \u9009\u62E9\u533A\u95F4\u5927\u4E8E range \u65F6\u81EA\u52A8\u9009\u4E2D\u6700\u5927\u8303\u56F4 #3026
  • Notify: \u65B0\u589E top \u5C5E\u6027 #3018

Bug Fixes

  • Field: \u4FEE\u590D\u672A\u8BBE\u7F6E autosize \u65F6 wxs \u62A5\u9519 #3038
  • Field: \u907F\u514D\u8BBE\u7F6E showClear \u4E3A undefined #3012

v1.2.1

2020-04-12

Features

  • Field: \u652F\u6301\u5C0F\u7A0B\u5E8F\u53CC\u5411\u7ED1\u5B9A #2986
  • Calendar: \u591A\u9009\u6A21\u5F0F\u4E0B\u65B0\u589E unselect \u4E8B\u4EF6 #2990

Bug Fixes

  • IndexBar: \u79FB\u9664 scroll-top \u5C5E\u6027 #2999
  • Uploader: \u4FEE\u590D\u56FE\u7247\u540E\u7F00\u540D\u4E3A\u5927\u5199\u65F6\u672A\u6B63\u5E38\u8BC6\u522B #2987
  • Field: \u4FEE\u590D autosize \u5C5E\u6027 \u8BBE\u7F6E max-height \u4E0D\u751F\u6548 #3007

v1.2.0

2020-04-04

Features

  • TreeSelect: \u66F4\u65B0 nav \u80CC\u666F\u8272 #2952
  • Sticky: \u4F7F\u7528 page scroll \u91CD\u6784\u7EC4\u4EF6 #2950
  • Field: \u65B0\u589E auto-focus\u3001disable-default-padding\u3001cursor \u5C5E\u6027 #2936
  • Field: \u65B0\u589E linechange\u3001keyboardheightchange \u4E8B\u4EF6 #2936
  • Uploader: \u652F\u6301\u663E\u793A\u4E0A\u4F20\u72B6\u6001 #2929
  • Image: mode \u5C5E\u6027\u65B0\u589E widthFix\u3001heightFix #2908
  • Canvas: \u65B0\u589E type \u5C5E\u6027 #2906
  • NavBar: \u65B0\u589E placeholder \u5C5E\u6027 #2896

Bug Fixes

  • Field: \u4FEE\u590D\u8F93\u5165\u8FC7\u5FEB\u65F6\u8F93\u5165\u6846\u5185\u5BB9\u4E0D\u65AD\u56DE\u9000 #2936
  • Calendar: \u4FEE\u590D show-confirm \u4E3A true \u65F6\u7EC4\u4EF6\u521D\u59CB\u5316\u62A5\u9519 #2951
  • Tab: \u4FEE\u590D type \u4E3A card \u65F6 color \u5BF9\u8FB9\u6846\u65E0\u6548 #2941

v1.1.0

2020-03-21

Features

  • \u65B0\u589E Calendar \u65E5\u5386\u7EC4\u4EF6 #2894
  • Grid: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B custom-class\u3001content-class\u3001icon-class\u3001text-class #2882
  • Steps: \u65B0\u589E click \u4E8B\u4EF6 #2874
  • SideBar: \u65B0\u589E title \u63D2\u69FD #2873
  • Uploader: \u65B0\u589E upload-icon \u5C5E\u6027 #2869
  • Uploader: \u65B0\u589E show-upload \u5C5E\u6027 #2868
  • Uploader: \u66F4\u65B0\u6837\u5F0F\u3001\u8C03\u6574\u4E8B\u4EF6\u89E6\u53D1\u987A\u5E8F\u4E0E vant \u4E00\u81F4 #2886
  • Field: \u65B0\u589E show-word-limit \u5C5E\u6027 #2856
  • Field: autosize \u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\uFF0C\u6307\u5B9A maxHeight \u4E0E minHeight #2856
  • Field: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF #2856

Bug Fixes

  • Button: \u79FB\u9664 lang \u5C5E\u6027\u9ED8\u8BA4\u503C #2883
  • Button: \u4FEE\u590D disabled \u5C5E\u6027\u5BF9\u539F\u751F\u4E8B\u4EF6\u65E0\u6548 #2878

v1.0.7

2020-03-04

Features

  • DropdownItem: \u65B0\u589E popupStyle \u5C5E\u6027 #2804
  • DropdownItem: \u65B0\u589E open close opened closed \u4E8B\u4EF6 #2804
  • Card: \u65B0\u589E price num \u63D2\u69FD #2787
  • Card: \u65B0\u589E origin-price-class \u5916\u90E8\u6837\u5F0F\u7C7B #2787

Bug Fixes

  • Tab: \u4FEE\u590D\u5185\u5BB9\u9879\u9AD8\u5EA6\u4E0D\u540C\u65F6\u7C98\u6027\u5E03\u5C40\u5F02\u5E38 #2817
  • Picker: \u4FEE\u590D\u672A\u9009\u4E2D\u9879\u6837\u5F0F\u672A\u7F6E\u7070 #2816
  • GoodsActionButton: \u4FEE\u590D\u4EC5\u4F7F\u7528\u4E00\u4E2A button \u65F6\u6837\u5F0F\u5F02\u5E38 #2808
  • Radio: name\u7C7B\u578B\u4E0Evalue\u7EDF\u4E00 #2801
  • Uploader: \u4FEE\u590D\u6587\u6863\u9519\u8BEF #2777

v1.0.6

2020-02-24

Features

  • GoodsActionButton: \u65B0\u589E\u9ED8\u8BA4 slot #2779
  • SubmitBar: \u66F4\u65B0\u5706\u89D2\u6837\u5F0F #2755
  • Card: \u66F4\u65B0\u6837\u5F0F #2754
  • \u4F18\u5316 relation \u90E8\u5206\u4EE3\u7801 #2760

Bug Fixes

  • DropdownItem: \u4FEE\u590D\u70B9\u51FB\u9009\u9879\u65F6\u4E0D\u89E6\u53D1close\u4E8B\u4EF6 #2766
  • GoodsActionButton: \u4FEE\u590D\u4F4E\u7248\u672C\u57FA\u7840\u5E93\u4E0B\u7684\u6837\u5F0F\u95EE\u9898 #2762
  • Tabs: \u4FEE\u590D\u70B9\u51FB\u7981\u7528\u9879\u65F6\u4E8B\u4EF6\u53C2\u6570\u9519\u8BEF #2758
  • Checkbox: \u4FEE\u590D\u52A8\u6001\u8BBE\u7F6Edisabled\u5C5E\u6027\u65E0\u6548 #2748
  • Button: add loading color when plain is true #2746
  • Radio: \u4FEE\u590Dlabel-disabled\u6587\u6863\u9519\u8BEF #2763

v1.0.5

2020-02-07

Features

  • ActionSheet: actions \u652F\u6301\u66F4\u591A openType #2715
  • Uploader: \u65B0\u589E\u5F00\u59CBdisabled\u65F6\u7684\u7EC4\u4EF6\u6837\u5F0F #2720
  • Icon: \u8C03\u6574\u793A\u4F8B\u5C0F\u7A0B\u5E8F\u9875\u9762\u4E0E vant \u5BF9\u9F50 #2728
  • \u793A\u4F8B\u5C0F\u7A0B\u5E8F\u9996\u9875\u4E0E vant \u5BF9\u9F50 #2729
  • \u5B8C\u5584\u5FEB\u901F\u4E0A\u624B\u6587\u6863\uFF0C\u589E\u52A0 npm \u6784\u5EFA\u8BF4\u660E #2726

Bug Fixes

  • Radio: \u4FEE\u590Ddisabled\u5C5E\u6027\u4E0D\u751F\u6548 #2711
  • Tab: \u4FEE\u590Danimated\u5C5E\u6027\u65E0\u6CD5\u52A8\u6001\u5207\u6362 #2712
  • Circle: \u4FEE\u6B63\u6587\u6863\u9519\u8BEF\uFF0Csize\u5C5E\u6027\u4E0D\u652F\u6301string\u7C7B\u578B #2694
  • \u4FEE\u6B63\u6587\u6863\u9ED8\u8BA4 slot \u540D\u79F0\u4E3A default \u7684\u9519\u8BEF #2726
  • TreeSelect: \u4FEE\u6B63\u6587\u6863\u793A\u4F8B\u4EE3\u7801\u6807\u7B7E\u95ED\u5408\u9519\u8BEF #2710

v1.0.4

2020-01-21

Features

  • Stepper: \u65B0\u589E disable-long-press \u5C5E\u6027 #2691
  • quickstart: \u5FEB\u901F\u4E0A\u624B\u65B0\u589E\u5173\u95ED style v2 \u8BF4\u660E #2704
  • Search: \u65B0\u589E background\u3001disabled\u3001input-align \u6587\u6863\u793A\u4F8B #2698
  • Icon: \u6587\u6863\u65B0\u589E\u56FE\u6807\u6587\u5B57\u52A0\u8F7D\u5931\u8D25\u8BF4\u660E #2681

Bug Fixes

  • Sticky: \u4FEE\u590D\u771F\u673A\u4E0A\u9875\u9762\u6EDA\u52A8\u7F13\u6162\u65F6\u65E0\u6CD5\u5438\u9876/\u53D6\u6D88\u5438\u9876 #2703
  • DropdownItem: \u4FEE\u590D wx:key \u8B66\u544A #2670
  • IndexBar: \u6587\u6863\u4FEE\u590D\u7EC4\u4EF6\u5F15\u5165\u8DEF\u5F84\u9519\u8BEF #2689
  • \u5347\u7EA7\u4F9D\u8D56\u7248\u672C\u4EE5\u907F\u514D\u5B89\u5168\u8B66\u544A #2680

v1.0.3

2020-01-09

Features

  • npm \u5305\u9ED8\u8BA4\u8F93\u51FA es5 \u7248\u672C\u4EE3\u7801 #2639
  • Steps: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B desc-class #2630

Bug Fixes

  • Tab: \u89E3\u51B3\u52A8\u6001\u6DFB\u52A0\u9009\u9879\u65F6\uFF0C\u987A\u5E8F\u9519\u4E71\u548C\u4E0B\u5212\u7EBF\u957F\u5EA6\u4E0D\u53D8\u7684\u95EE\u9898 #2663
  • NavBar: \u4FEE\u590D\u8FD4\u56DE\u56FE\u6807\u672A\u5C45\u4E2D\u7684\u95EE\u9898 #2633

v1.0.2

2019-12-31

Features

  • Skeleton: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7Brow-class``avatar-class``title-class #2612
  • SwipeCell: \u652F\u6301\u52A8\u6001\u4FEE\u6539width\u5C5E\u6027 #2607
  • Uploader: \u65B0\u589Ecamera``compressed``maxDuration\u5C5E\u6027 #2584

Improvements

  • Tab: \u4F18\u5316\u5F39\u6027\u6EDA\u52A8\u6548\u679C #2606

Bug Fixes

  • IndexBar: \u4FEE\u590D\u5B57\u6BCD\u672A\u5168\u90E8\u5B9A\u4E49\u65F6 click \u4E8B\u4EF6\u62A5\u9519 #2605
  • Field: \u4FEE\u590D\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4E0B\u4E00\u6B21\u70B9\u51FB\u65E0\u6548 #2602

v1.0.1

2019-12-23

Features

  • Uploader: \u65B0\u589E sizeType \u5C5E\u6027 #2563
  • GoodsActionButton: \u65B0\u589E plain \u5C5E\u6027 #2559
  • Uploader: \u53BB\u9664 use-slot \u5C5E\u6027 #2551
  • \u65B0\u589E\u6837\u5F0F\u8986\u76D6\u8BF4\u660E\u6587\u6863 #2566

Improvements

  • \u4F7F\u7528 nextTick \u4F18\u5316\u90E8\u5206\u5F02\u6B65\u903B\u8F91 #2561
  • wxs \u65B0\u589E addUnit \u65B9\u6CD5\u4EE5\u51CF\u5C11 setData \u8C03\u7528\u6B21\u6570 #2550

Bug Fixes

  • Tag: \u4FEE\u590D\u672A\u4F9D\u8D56 van-icon \u7EC4\u4EF6 #2579
  • Notify: \u4FEE\u590D safeAreaInsetTop \u4E0D\u751F\u6548 #2558
  • Uploader: \u4FEE\u590D capture \u5C5E\u6027\u4E0D\u751F\u6548 #2551

v1.0.0

2019-12-11

\u4E3B\u8981\u53D8\u52A8

  • npm \u5305\u540D\u7531 vant-weapp \u91CD\u547D\u540D\u4E3A @vant/weapp
  • \u589E\u52A0\u5341\u4E00\u4E2A\u65B0\u7EC4\u4EF6
  • \u589E\u52A0\u6570\u5341\u4E2A API
  • \u6240\u6709\u7EC4\u4EF6\u652F\u6301\u901A\u8FC7CSS\u81EA\u5B9A\u4E49\u5C5E\u6027\u81EA\u5B9A\u4E49\u6837\u5F0F
  • \u4F7F\u7528env()\u91CD\u6784 iOS \u5B89\u5168\u533A\u57DF\u9002\u914D
  • \u8C03\u6574\u90E8\u5206 API \u547D\u540D\uFF0C\u5E9F\u9664\u5C11\u91CF API

\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

  • Grid \u5BAB\u683C\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A
  • Image \u56FE\u7247\uFF0C\u589E\u5F3A\u7248\u7684 Image \u6807\u7B7E\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u4E0E\u52A0\u8F7D\u5931\u8D25\u63D0\u793A
  • Circle \u73AF\u5F62\u8FDB\u5EA6\u6761\uFF0C\u544A\u77E5\u7528\u6237\u5F53\u524D\u7684\u72B6\u6001\u548C\u8FDB\u5EA6
  • Overaly \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
  • Divider \u5206\u5272\u7EBF\uFF0C\u533A\u9694\u5185\u5BB9\u7684\u5206\u5272\u7EBF
  • Sticky \u7C98\u6027\u5E03\u5C40\uFF0C\u4E0E CSS \u4E2Dposition: sticky\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u7C7B\u4F3C
  • Skeleton \u9AA8\u67B6\u5C4F\uFF0C\u5728\u5F85\u52A0\u8F7D\u533A\u57DF\u5C55\u793A\u7684\u5360\u4F4D\u533A\u5757\uFF0C\u63D0\u4F9B\u754C\u9762\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u7684\u8FC7\u6E21\u6548\u679C
  • IndexBar \u7D22\u5F15\u680F\uFF0C\u901A\u8BAF\u5F55\u4E2D\u7684\u5B57\u6BCD\u7D22\u5F15\u680F\uFF0C\u7528\u4E8E\u957F\u5217\u8868\u5FEB\u901F\u7D22\u5F15
  • Uploader \u6587\u4EF6\u4E0A\u4F20\uFF0C\u4E0A\u4F20\u4E00\u4E2A\u6216\u591A\u4E2A\u6587\u4EF6
  • CountDown \u5012\u8BA1\u65F6\uFF0C\u7528\u4E8E\u663E\u793A\u6D3B\u52A8\u5012\u8BA1\u65F6\u3001\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49
  • DropdownMenu \u4E0B\u62C9\u83DC\u5355\uFF0C\u7528\u4E8E\u5217\u8868\u7684\u5206\u7C7B\u9009\u62E9\u3001\u7B5B\u9009\u53CA\u6392\u5E8F

\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 \u2013 \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
  • BadgeGroup\u91CD\u547D\u540D\u4E3ASidebar
  • Badge\u91CD\u547D\u540D\u4E3ASlidebarItem
  • active\u5C5E\u6027\u91CD\u547D\u540D\u4E3AactiveKey
Notify
  • text\u9009\u9879\u91CD\u547D\u540D\u4E3Amessage
  • backgroundColor\u9009\u9879\u91CD\u547D\u540D\u4E3Abackground
  • \u53BB\u9664transitionend\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6
SwitchCell
  • \u79FB\u9664\u4E86SwitchCell\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u4F7F\u7528Cell\u548CSwitch\u7EC4\u4EF6\u4EE3\u66FF
Transition
  • \u53BB\u9664transitionend\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6

\u65B0\u7279\u6027

ActionSheet
  • \u65B0\u589Eclick-overlay\u4E8B\u4EF6
  • \u65B0\u589Eclose-on-click-action\u5C5E\u6027
  • \u65B0\u589Ecolor\u5C5E\u6027
  • \u65B0\u589Edescription\u5C5E\u6027
  • \u65B0\u589Eround\u5C5E\u6027
Area
  • \u65B0\u589Ecolumns-placeholder\u5C5E\u6027
  • reset\u65B9\u6CD5\u652F\u6301\u4F20\u5165code\u53C2\u6570
Button
  • \u65B0\u589Eloading-type\u5C5E\u6027
  • color\u5C5E\u6027\u652F\u6301\u6E10\u53D8\u8272
  • \u5207\u6362disabled\u65F6\u589E\u52A0\u8FC7\u6E21\u6548\u679C
Checkbox
  • \u65B0\u589Eicon-size\u5C5E\u6027
Color
  • \u57FA\u7840\u7EA2\u8272\u66F4\u65B0\u4E3A#ee0a24
DatetimePicker
  • \u65B0\u589Efilter\u5C5E\u6027
Dialog
  • \u4F18\u5316\u6587\u5B57\u6362\u884C
  • \u65B0\u589Etitle\u63D2\u69FD
  • \u65B0\u589Econfirm-button-color\u5C5E\u6027
  • \u65B0\u589Ecancel-button-color\u5C5E\u6027
  • \u65B0\u589Ewidth\u5C5E\u6027
  • \u65B0\u589Eoverlay-style\u5C5E\u6027
Field
  • \u65B0\u589Eclickable\u5C5E\u6027
  • \u65B0\u589Earrow-direction\u5C5E\u6027
  • \u65B0\u589Ehold-keyboard\u5C5E\u6027
GoodsActionButton
  • \u65B0\u589Ecolor\u5C5E\u6027
  • \u6837\u5F0F\u5347\u7EA7\u4E3A\u5706\u89D2\u98CE\u683C
GoodsActionIcon
  • \u65B0\u589Eicon\u63D2\u69FD
  • \u65B0\u589Edot\u5C5E\u6027
GridItem
  • \u65B0\u589Einfo\u5C5E\u6027
  • \u65B0\u589Edot\u5C5E\u6027
Icon
  • \u65B0\u589Edot\u5C5E\u6027
  • \u65B0\u589Edown\u56FE\u6807
  • \u65B0\u589Ewap-hone\u5B9E\u5E95\u98CE\u683C\u56FE\u6807
  • \u652F\u6301number\u7C7B\u578B\u7684size\u5C5E\u6027
Loading
  • \u652F\u6301number\u7C7B\u578B\u7684size\u5C5E\u6027
NoticeBar
  • \u963B\u6B62\u5173\u95ED\u56FE\u6807\u70B9\u51FB\u4E8B\u4EF6\u5192\u6CE1
Notify
  • \u65B0\u589Eclear\u65B9\u6CD5
  • \u65B0\u589Eround\u5C5E\u6027
  • \u65B0\u589Ecloseable\u5C5E\u6027
  • \u65B0\u589Eclose-icon\u5C5E\u6027
  • \u65B0\u589Eclose-icon-position\u5C5E\u6027
Progress
  • \u65B0\u589Estroke-width\u5C5E\u6027
Radio
  • \u65B0\u589Eicon-size\u5C5E\u6027
Rate
  • \u4F18\u5316\u624B\u52BF\u5224\u65AD
  • \u65B0\u589Egutter\u5C5E\u6027
  • \u65B0\u589Etouchable\u5C5E\u6027
  • \u652F\u6301string\u7C7B\u578B\u7684size\u5C5E\u6027
  • \u65B0\u589Eaction-text\u5C5E\u6027
  • \u65B0\u589Eleft-icon\u63D2\u69FD
  • \u65B0\u589Eright-icon\u63D2\u69FD
SlidebarItem
  • \u65B0\u589Edot\u5C5E\u6027
Slider
  • \u65B0\u589Edrag-start\u4E8B\u4EF6
  • \u65B0\u589Edrag-end\u4E8B\u4EF6
  • \u652F\u6301\u4F20\u5165\u4EFB\u610F\u8303\u56F4\u7684max\u548Cmin\u5C5E\u6027
  • \u652F\u6301number\u7C7B\u578B\u7684bar-height\u5C5E\u6027
  • \u589E\u52A0\u6ED1\u52A8\u52A8\u753B
  • \u589E\u5927\u70B9\u51FB\u533A\u57DF
SwipeCell
  • \u65B0\u589Ename\u5C5E\u6027
  • \u65B0\u589Eopen\u4E8B\u4EF6
  • \u652F\u6301\u6253\u5F00\u72B6\u6001\u4E92\u65A5
Switch
  • \u52A0\u8F7D\u56FE\u6807\u7684\u989C\u8272\u4F1A\u8DDF\u968F\u5F00\u5173\u72B6\u6001\u53D8\u5316
Stepper
  • \u652F\u6301\u957F\u6309\u624B\u52BF
  • \u65B0\u589Einput-width\u5C5E\u6027
  • \u65B0\u589Ebutton-size\u5C5E\u6027
  • \u65B0\u589EdecimalLength\u5C5E\u6027
  • \u65B0\u589E disablePlus\u3001disableMinus \u5C5E\u6027
Steps
  • \u65B0\u589Eactive-icon\u5C5E\u6027
  • \u65B0\u589Einactive-icon\u5C5E\u6027
Tabs
  • \u4F7F\u7528 Sticky \u7EC4\u4EF6\u91CD\u6784\u5438\u9876\u5B9E\u73B0
  • \u65B0\u589Ename\u5C5E\u6027
  • \u65B0\u589Eline-height\u5C5E\u6027
  • \u65B0\u589Eellipsis\u5C5E\u6027
  • \u65B0\u589Elazy-render\u5C5E\u6027
  • line-width\u5C5E\u6027\u652F\u6301String\u7C7B\u578B
  • \u589E\u52A0\u4E91\u5F00\u53D1\u7ED3\u5408\u793A\u4F8B
TreeSelect
  • \u65B0\u589Emax\u5C5E\u6027
  • \u65B0\u589Econtent\u63D2\u69FD
', 48); -const _hoisted_50 = [ - _hoisted_2$10 -]; -const _sfc_main$17 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$13, _hoisted_50); - }; - } -}; -const _hoisted_1$12 = { class: "van-doc-markdown-body" }; -const _hoisted_2$$ = /* @__PURE__ */ createStaticVNode('

\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>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

\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>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

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

\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); -const _hoisted_7$1 = [ - _hoisted_2$$ -]; -const _sfc_main$16 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$12, _hoisted_7$1); - }; - } -}; -const _hoisted_1$11 = { class: "van-doc-markdown-body" }; -const _hoisted_2$_ = /* @__PURE__ */ createStaticVNode('

Vant Weapp

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

\u4ECB\u7ECD

Vant \u662F\u6709\u8D5E\u524D\u7AEF\u56E2\u961F\u5F00\u6E90\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93\uFF0C\u4E8E 2017 \u5E74\u5F00\u6E90\uFF0C\u5DF2\u6301\u7EED\u7EF4\u62A4 4 \u5E74\u65F6\u95F4\u3002Vant \u5BF9\u5185\u627F\u8F7D\u4E86\u6709\u8D5E\u6240\u6709\u6838\u5FC3\u4E1A\u52A1\uFF0C\u5BF9\u5916\u670D\u52A1\u5341\u591A\u4E07\u5F00\u53D1\u8005\uFF0C\u662F\u4E1A\u754C\u4E3B\u6D41\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93\u4E4B\u4E00\u3002

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

\u9884\u89C8

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

\u5FEB\u901F\u4E0A\u624B

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

\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

\u52A0\u5165\u6211\u4EEC

\u6709\u8D5E\u524D\u7AEF\u56E2\u961F\u662F\u7531\u4E00\u7FA4\u5E74\u8F7B\u3001\u76AE\u5B9E\u3001\u5BF9\u6280\u672F\u9971\u542B\u70ED\u60C5\u7684\u5C0F\u4F19\u4F34\u7EC4\u6210\u7684\uFF0C\u76EE\u524D\u5171\u6709 100 \u591A\u540D\u524D\u7AEF\u5DE5\u7A0B\u5E08\uFF0C\u5206\u5E03\u5728\u4E1A\u52A1\u4E2D\u53F0\u3001\u7535\u5546\u3001\u96F6\u552E\u3001\u7F8E\u4E1A\u3001\u8D44\u4EA7\u3001\u6709\u8D5E\u4E91\u3001\u8D4B\u80FD\u5E73\u53F0\u3001\u589E\u957F\u4E2D\u5FC3\u7B49\u4E1A\u52A1\u7EBF\u3002

\u6211\u4EEC\u70ED\u7231\u5206\u4EAB\u548C\u5F00\u6E90\uFF0C\u5D07\u5C1A\u7528\u5DE5\u7A0B\u5E08\u7684\u65B9\u5F0F\u89E3\u51B3\u95EE\u9898\uFF0C\u56E0\u6B64\u9020\u4E86\u5F88\u591A\u5DE5\u5177\u6765\u89E3\u51B3\u6211\u4EEC\u9047\u5230\u7684\u95EE\u9898\uFF0C\u76EE\u524D\u6211\u4EEC\u7EF4\u62A4\u7684\u5F00\u6E90\u4EA7\u54C1\u6709\uFF1A

\u6211\u4EEC\u6B63\u5728\u5BFB\u627E\u66F4\u591A\u4F18\u79C0\u7684\u5C0F\u4F19\u4F34\uFF0C\u4E00\u8D77\u62D3\u5C55\u524D\u7AEF\u6280\u672F\u7684\u8FB9\u754C\uFF0C\u671F\u5F85\u4F60\u7684\u52A0\u5165\uFF01

\u94FE\u63A5

\u5F00\u6E90\u534F\u8BAE

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

', 8); -const _hoisted_10$2 = [ - _hoisted_2$_ -]; -const _sfc_main$15 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$11, _hoisted_10$2); - }; - } -}; -const _hoisted_1$10 = { class: "van-doc-markdown-body" }; -const _hoisted_2$Z = /* @__PURE__ */ createStaticVNode('

\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\nnpm i @vant/weapp -S --production\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add @vant/weapp --production\n\n# \u5B89\u88C5 0.x \u7248\u672C\nnpm i vant-weapp -S --production\n

\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

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

\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\u2019./'\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\nnpm i -D miniprogram-api-typings\n\n# \u901A\u8FC7 yarn \u5B89\u88C5\nyarn add -D miniprogram-api-typings\n

\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

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

\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

  • \u57FA\u4E8E Vant Weapp \u642D\u5EFA\u5C0F\u7A0B\u5E8F\u5E94\u7528
  • \u6837\u5F0F\u8986\u76D6\u65B9\u6848

\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\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es6\u7248\u672C\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es5\u7248\u672C\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

\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>\n

\u5176\u4ED6

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

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

\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

', 14); -const _hoisted_16$4 = [ - _hoisted_2$Z -]; -const _sfc_main$14 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$10, _hoisted_16$4); - }; - } -}; -const _hoisted_1$$ = { class: "van-doc-markdown-body" }; -const _hoisted_2$Y = /* @__PURE__ */ createStaticVNode('

\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\n@text-color: #323233;\n@border-color: #ebedf0;\n@active-color: #f2f3f5;\n@background-color: #f8f8f8;\n@background-color-light: #fafafa;\n

\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">\n  \u9ED8\u8BA4\u6309\u94AE\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

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

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

\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 {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
', 7); -const _hoisted_9$2 = [ - _hoisted_2$Y -]; -const _sfc_main$13 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$$, _hoisted_9$2); - }; - } -}; -const _hoisted_1$_ = { class: "van-doc-markdown-body" }; -const _hoisted_2$X = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-action-sheet": "@vant/weapp/action-sheet/index"\n}\n

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

\u9009\u9879\u72B6\u6001

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

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

\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\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="\u53D6\u6D88"\n/>\n

\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\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F"\n/>\n

\u5C55\u793A\u6807\u9898\u680F

\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">\n  <view>\u5185\u5BB9</view>\n</van-action-sheet>\n

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

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\u5355boolean-
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: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-
', 14); -const _hoisted_16$3 = [ - _hoisted_2$X -]; -const _sfc_main$12 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$_, _hoisted_16$3); - }; - } -}; -const _hoisted_1$Z = { class: "van-doc-markdown-body" }; -const _hoisted_2$W = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-area": "@vant/weapp/area/index"\n}\n

\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 }}" />\n

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 = {\n  province_list: {\n    110000: '\u5317\u4EAC\u5E02',\n    120000: '\u5929\u6D25\u5E02',\n  },\n  city_list: {\n    110100: '\u5317\u4EAC\u5E02',\n    120100: '\u5929\u6D25\u5E02',\n  },\n  county_list: {\n    110101: '\u4E1C\u57CE\u533A',\n    110102: '\u897F\u57CE\u533A',\n    // ....\n  },\n};\n

@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\n
import { areaList } from '@vant/area-data';\n\nPage({\n  data: {\n    areaList,\n  },\n});\n

\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" />\n

\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" />\n

\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\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9'] }}"\n  title="\u6807\u9898"\n/>\n

\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();\n\ndb.collection('region')\n  .limit(1)\n  .get()\n  .then((res) => {\n    if (res.data && res.data.length > 0) {\n      this.setData({\n        areaList: res.data[0],\n      });\n    }\n  })\n  .catch((err) => {\n    console.log(err);\n  });\n

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

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, indexs \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

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

indexs \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); -const _hoisted_19$3 = [ - _hoisted_2$W -]; -const _sfc_main$11 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$Z, _hoisted_19$3); - }; - } -}; -const _hoisted_1$Y = { class: "van-doc-markdown-body" }; -const _hoisted_2$V = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-button": "@vant/weapp/button/index"\n}\n

\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>\n<van-button type="primary">\u4E3B\u8981\u6309\u94AE</van-button>\n<van-button type="info">\u4FE1\u606F\u6309\u94AE</van-button>\n<van-button type="warning">\u8B66\u544A\u6309\u94AE</van-button>\n<van-button type="danger">\u5371\u9669\u6309\u94AE</van-button>\n

\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>\n<van-button plain type="info">\u6734\u7D20\u6309\u94AE</van-button>\n

\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>\n<van-button plain hairline type="info">\u7EC6\u8FB9\u6846\u6309\u94AE</van-button>\n

\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>\n<van-button disabled type="info">\u7981\u7528\u72B6\u6001</van-button>\n

\u52A0\u8F7D\u72B6\u6001

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

\u6309\u94AE\u5F62\u72B6

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

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

\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>\n<van-button type="primary" size="normal">\u666E\u901A\u6309\u94AE</van-button>\n<van-button type="primary" size="small">\u5C0F\u578B\u6309\u94AE</van-button>\n<van-button type="primary" size="mini">\u8FF7\u4F60\u6309\u94AE</van-button>\n

\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>\n

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

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: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-

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); -const _hoisted_20$2 = [ - _hoisted_2$V -]; -const _sfc_main$10 = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$Y, _hoisted_20$2); - }; - } -}; -const _hoisted_1$X = { class: "van-doc-markdown-body" }; -const _hoisted_2$U = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-calendar": "@vant/weapp/calendar/index"\n}\n

\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" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

\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" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `\u9009\u62E9\u4E86 ${event.detail.length} \u4E2A\u65E5\u671F`,\n    });\n  },\n});\n

\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" />\n<van-calendar\n  show="{{ show }}"\n  type="range"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    const [start, end] = event.detail;\n    this.setData({\n      show: false,\n      date: `${this.formatDate(start)} - ${this.formatDate(end)}`,\n    });\n  },\n});\n

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 }}" />\n

\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" />\n

\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\n  show="{{ show }}"\n  min-date="{{ minDate }}"\n  max-date="{{ maxDate }}"\n/>\n
Page({\n  data: {\n    show: false,\n    minDate: new Date(2010, 0, 1).getTime(),\n    maxDate: new Date(2010, 0, 31).getTime(),\n  },\n});\n

\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\n  show="{{ show }}"\n  type="range"\n  confirm-text="\u5B8C\u6210"\n  confirm-disabled-text="\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4"\n/>\n

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

\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" />\n

\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 }}" />\n

\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 }}" />\n

\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\n  title="\u65E5\u5386"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

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\u9ED8\u8BA4\u9009\u4E2D\u7684\u65E5\u671F\uFF0Ctype\u4E3Amultiple\u6216range\u65F6\u4E3A\u6570\u7EC4timestamp | timestamp[]\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

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

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
select\u70B9\u51FB\u4EFB\u610F\u65E5\u671F\u65F6\u89E6\u53D1value: Date | Date[]
unselect\u5F53 Calendar \u7684 type \u4E3A multiple \u65F6,\u70B9\u51FB\u5DF2\u9009\u4E2D\u7684\u65E5\u671F\u65F6\u89E6\u53D1value: Date
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[]
open\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1-
close\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1-
opened\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1-
closed\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1-
over-range\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u89E6\u53D1-
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--
', 24); -const _hoisted_26$1 = [ - _hoisted_2$U -]; -const _sfc_main$$ = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$X, _hoisted_26$1); - }; - } -}; -const _hoisted_1$W = { class: "van-doc-markdown-body" }; -const _hoisted_2$T = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-card": "@vant/weapp/card/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

\u9AD8\u7EA7\u7528\u6CD5

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

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

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); -const _hoisted_12$2 = [ - _hoisted_2$T -]; -const _sfc_main$_ = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$W, _hoisted_12$2); - }; - } -}; -const _hoisted_1$V = { class: "van-doc-markdown-body" }; -const _hoisted_2$S = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-cell": "@vant/weapp/cell/index",\n  "van-cell-group": "@vant/weapp/cell-group/index"\n}\n

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

\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>\n  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n  <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" label="\u63CF\u8FF0\u4FE1\u606F" />\n</van-cell-group>\n

\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" />\n<van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" size="large" label="\u63CF\u8FF0\u4FE1\u606F" />\n

\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" />\n

\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 />\n<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" />\n<van-cell title="\u5355\u5143\u683C" is-link value="\u5185\u5BB9" arrow-direction="down" />\n

\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\n  is-link\n  title="\u5355\u5143\u683C"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

\u5206\u7EC4\u6807\u9898

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

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

\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>\n  <view slot="title">\n    <view class="van-cell-text">\u5355\u5143\u683C</view>\n    <van-tag type="danger">\u6807\u7B7E</van-tag>\n  </view>\n</van-cell>\n<van-cell title="\u5355\u5143\u683C">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

\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" />\n

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); -const _hoisted_22 = [ - _hoisted_2$S -]; -const _sfc_main$Z = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$V, _hoisted_22); - }; - } -}; -const _hoisted_1$U = { class: "van-doc-markdown-body" }; -const _hoisted_2$R = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-checkbox": "@vant/weapp/checkbox/index",\n  "van-checkbox-group": "@vant/weapp/checkbox-group/index"\n}\n

\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>\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange(event) {\n    this.setData({\n      checked: event.detail,\n    });\n  },\n});\n

\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">\n  \u590D\u9009\u6846\n</van-checkbox>\n

\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">\n  \u590D\u9009\u6846\n</van-checkbox>\n

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

\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>\n

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

\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>\n

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

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

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

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

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); -const _hoisted_24$1 = [ - _hoisted_2$R -]; -const _sfc_main$Y = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$U, _hoisted_24$1); - }; - } -}; -const _hoisted_1$T = { class: "van-doc-markdown-body" }; -const _hoisted_2$Q = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-circle": "@vant/weapp/circle/index"\n}\n

\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" />\n

\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" />\n

\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\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="\u989C\u8272\u5B9A\u5236"\n/>\n

\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" />\n
Page({\n  data: {\n    value: 25,\n    gradientColor: {\n      '0%': '#ffd01e',\n      '100%': '#ee0a24',\n    },\n  },\n});\n

\u9006\u65F6\u9488\u65B9\u5411

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

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

\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" />\n

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); -const _hoisted_15$8 = [ - _hoisted_2$Q -]; -const _sfc_main$X = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$T, _hoisted_15$8); - }; - } -}; -const _hoisted_1$S = { class: "van-doc-markdown-body" }; -const _hoisted_2$P = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-row": "@vant/weapp/row/index",\n  "van-col": "@vant/weapp/col/index"\n}\n

\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>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n  <van-col span="4">span: 4</van-col>\n  <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n</van-row>\n\n<van-row>\n  <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n

\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">\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n

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); -const _hoisted_12$1 = [ - _hoisted_2$P -]; -const _sfc_main$W = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$S, _hoisted_12$1); - }; - } -}; -const _hoisted_1$R = { class: "van-doc-markdown-body" }; -const _hoisted_2$O = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-collapse": "@vant/weapp/collapse/index",\n  "van-collapse-item": "@vant/weapp/collapse-item/index"\n}\n

\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">\n  <van-collapse-item title="\u6709\u8D5E\u5FAE\u5546\u57CE" name="1">\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  </van-collapse-item>\n  <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2">\n    \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931\n  </van-collapse-item>\n  <van-collapse-item title="\u6709\u8D5E\u7F8E\u4E1A" name="3" disabled>\n    \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

\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">\n  <van-collapse-item title="\u6709\u8D5E\u5FAE\u5546\u57CE" name="1">\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  </van-collapse-item>\n  <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2">\n    \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931\n  </van-collapse-item>\n  <van-collapse-item title="\u6709\u8D5E\u7F8E\u4E1A" name="3">\n    \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

\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\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="\u6709\u8D5E\u5FAE\u5546\u57CE" name="1">\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  </van-collapse-item>\n  <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2">\n    \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931\n  </van-collapse-item>\n  <van-collapse-item title="\u6709\u8D5E\u7F8E\u4E1A" name="3">\n    \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`\u5C55\u5F00: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`\u5173\u95ED: ${event.detail}`);\n  },\n});\n

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

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">\u6709\u8D5E\u5FAE\u5546\u57CE<van-icon name="question-o" /></view>\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  </van-collapse-item>\n  <van-collapse-item title="\u6709\u8D5E\u96F6\u552E" name="2" icon="shop-o">\n    \u7F51\u5E97\u5438\u7C89\u83B7\u5BA2\u3001\u4F1A\u5458\u5206\u5C42\u8425\u9500\u3001\u4E00\u673A\u591A\u79CD\u6536\u6B3E\uFF0C\u544A\u522B\u7ECF\u8425\u4F4E\u6548\u548C\u5BA2\u6237\u6D41\u5931\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

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-
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

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); -const _hoisted_17$4 = [ - _hoisted_2$O -]; -const _sfc_main$V = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$R, _hoisted_17$4); - }; - } -}; -const _hoisted_1$Q = { class: "van-doc-markdown-body" }; -const _hoisted_2$N = /* @__PURE__ */ createStaticVNode('

\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';\n

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

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

\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 {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
', 7); -const _hoisted_9$1 = [ - _hoisted_2$N -]; -const _sfc_main$U = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$Q, _hoisted_9$1); - }; - } -}; -const _hoisted_1$P = { class: "van-doc-markdown-body" }; -const _hoisted_2$M = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-config-provider": "@vant/weapp/config-provider/index"\n}\n

\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 {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

\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 */\npage {\n  --button-primary-background-color: red;\n}\n

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

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
theme-vars\u81EA\u5B9A\u4E49\u4E3B\u9898\u53D8\u91CFobject-
', 8); -const _hoisted_10$1 = [ - _hoisted_2$M -]; -const _sfc_main$T = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$P, _hoisted_10$1); - }; - } -}; -const _hoisted_1$O = { class: "van-doc-markdown-body" }; -const _hoisted_2$L = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-count-down": "@vant/weapp/count-down/index"\n}\n

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 }}" />\n
Page({\n  data: {\n    time: 30 * 60 * 60 * 1000,\n  },\n});\n

\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" />\n

\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" />\n

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

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

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
finish\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1-
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); -const _hoisted_16$2 = [ - _hoisted_2$L -]; -const _sfc_main$S = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$O, _hoisted_16$2); - }; - } -}; -const _hoisted_1$N = { class: "van-doc-markdown-body" }; -const _hoisted_2$K = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-datetime-picker": "@vant/weapp/datetime-picker/index"\n}\n

\u4EE3\u7801\u6F14\u793A

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

value \u4E3A\u65F6\u95F4\u6233\u3002

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

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

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

value \u4E3A\u65F6\u95F4\u6233\u3002

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

\u9009\u62E9\u65F6\u95F4

value \u4E3A\u5B57\u7B26\u4E32\u3002

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

\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\n  type="time"\n  value="{{ currentDate }}"\n  filter="{{ filter }}"\n/>\n
Page({\n  data: {\n    currentDate: '12:00',\n    filter(type, options) {\n      if (type === 'minute') {\n        return options.filter((option) => option % 5 === 0);\n      }\n\n      return options;\n    },\n  },\n});\n

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, values) => values-
formatter\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570(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
input\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D value
change\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u7EC4\u4EF6\u5B9E\u4F8B
confirm\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6\u5F53\u524D value
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); -const _hoisted_16$1 = [ - _hoisted_2$K -]; -const _sfc_main$R = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$N, _hoisted_16$1); - }; - } -}; -const _hoisted_1$M = { class: "van-doc-markdown-body" }; -const _hoisted_2$J = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-dialog": "@vant/weapp/dialog/index"\n}\n

\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" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '\u6807\u9898',\n  message: '\u5F39\u7A97\u5185\u5BB9',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '\u5F39\u7A97\u5185\u5BB9',\n}).then(() => {\n  // on close\n});\n

\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" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '\u6807\u9898',\n  message: '\u5F39\u7A97\u5185\u5BB9',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

\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" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '\u6807\u9898',\n  message: '\u5F39\u7A97\u5185\u5BB9',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '\u5F39\u7A97\u5185\u5BB9',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

\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" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // \u62E6\u622A\u53D6\u6D88\u64CD\u4F5C\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '\u6807\u9898',\n  message: '\u5F39\u7A97\u5185\u5BB9'\n  beforeClose\n});\n

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

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\u6548string\u2018\u2019
customStyle\u81EA\u5B9A\u4E49\u6837\u5F0Fstring\u2018\u2019
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\u6548string\u2018\u2019
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fstring\u2018\u2019
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
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: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
', 17); -const _hoisted_19$2 = [ - _hoisted_2$J -]; -const _sfc_main$Q = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$M, _hoisted_19$2); - }; - } -}; -const _hoisted_1$L = { class: "van-doc-markdown-body" }; -const _hoisted_2$I = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-divider": "@vant/weapp/divider/index"\n}\n

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 />\n

\u4F7F\u7528 hairline

<van-divider hairline />\n

\u865A\u7EBF

<van-divider dashed />\n

\u6587\u672C\u4F4D\u7F6E

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

\u81EA\u5B9A\u4E49\u5C5E\u6027

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

\u81EA\u5B9A\u4E49\u6837\u5F0F

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

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); -const _hoisted_15$7 = [ - _hoisted_2$I -]; -const _sfc_main$P = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$L, _hoisted_15$7); - }; - } -}; -const _hoisted_1$K = { class: "van-doc-markdown-body" }; -const _hoisted_2$H = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",\n  "van-dropdown-item": "@vant/weapp/dropdown-item/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

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

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

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

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

\u5411\u4E0A\u5C55\u5F00

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

\u7981\u7528\u83DC\u5355

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

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
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\u540Dstring-
popup-style\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0Fstring-
\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-

\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
', 15); -const _hoisted_17$3 = [ - _hoisted_2$H -]; -const _sfc_main$O = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$K, _hoisted_17$3); - }; - } -}; -const _hoisted_1$J = { class: "van-doc-markdown-body" }; -const _hoisted_2$G = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-empty": "@vant/weapp/empty/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

\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 -->\n<van-empty image="error" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u7F51\u7EDC\u9519\u8BEF -->\n<van-empty image="network" description="\u63CF\u8FF0\u6587\u5B57" />\n<!-- \u641C\u7D22\u63D0\u793A -->\n<van-empty image="search" description="\u63CF\u8FF0\u6587\u5B57" />\n

\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\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="\u63CF\u8FF0\u6587\u5B57"\n/>\n

\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">\n  <van-button round type="danger" class="bottom-button">\u6309\u94AE</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

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); -const _hoisted_13$5 = [ - _hoisted_2$G -]; -const _sfc_main$N = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$J, _hoisted_13$5); - }; - } -}; -const _hoisted_1$I = { class: "van-doc-markdown-body" }; -const _hoisted_2$F = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-field": "@vant/weapp/field/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

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

\u81EA\u5B9A\u4E49\u7C7B\u578B

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

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

\u7981\u7528\u8F93\u5165\u6846

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

\u9519\u8BEF\u63D0\u793A

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

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

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

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

\u63D2\u5165\u6309\u94AE

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

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

\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

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26string-
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=\u2018text\u2019 \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=\u2018textarea\u2019 \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

Events

\u4E8B\u4EF6\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
bind:input\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u8F93\u5165\u503C
bind:change\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1event.detail: \u5F53\u524D\u8F93\u5165\u503C
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 }

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
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
', 22); -const _hoisted_24 = [ - _hoisted_2$F -]; -const _sfc_main$M = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$I, _hoisted_24); - }; - } -}; -const _hoisted_1$H = { class: "van-doc-markdown-body" }; -const _hoisted_2$E = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-goods-action": "@vant/weapp/goods-action/index",\n  "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",\n  "van-goods-action-button": "@vant/weapp/goods-action-button/index"\n}\n

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

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

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

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

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-
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

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
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

GoodsActionButton \u5916\u90E8\u6837\u5F0F\u7C7B

\u7C7B\u540D\u8BF4\u660E
custom-class\u6839\u8282\u70B9\u6837\u5F0F\u7C7B
', 17); -const _hoisted_19$1 = [ - _hoisted_2$E -]; -const _sfc_main$L = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$H, _hoisted_19$1); - }; - } -}; -const _hoisted_1$G = { class: "van-doc-markdown-body" }; -const _hoisted_2$D = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-grid": "@vant/weapp/grid/index",\n  "van-grid-item": "@vant/weapp/grid-item/index"\n}\n

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>\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n

\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">\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 6 }}" />\n</van-grid>\n

\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 }}">\n  <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">\n    <image\n      style="width: 100%; height: 90px;"\n      src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg"\n    />\n  </van-grid-item>\n</van-grid>\n

\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>\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" wx:for="{{ 8 }}" />\n</van-grid>\n

\u683C\u5B50\u95F4\u8DDD

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

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

\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">\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n  <van-grid-item icon="photo-o" text="\u6587\u5B57" />\n</van-grid>\n

\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">\n  <van-grid-item\n    icon="home-o"\n    link-type="navigateTo"\n    url="/pages/dashboard/index"\n    text="Navigate \u8DF3\u8F6C"\n  />\n  <van-grid-item\n    icon="search"\n    link-type="reLaunch"\n    url="/pages/dashboard/index"\n    text="ReLaunch \u8DF3\u8F6C"\n  />\n</van-grid>\n

\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">\n  <van-grid-item icon="home-o" text="\u6587\u5B57" dot />\n  <van-grid-item icon="search" text="\u6587\u5B57" badge="99+" />\n</van-grid>\n

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); -const _hoisted_21$1 = [ - _hoisted_2$D -]; -const _sfc_main$K = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$G, _hoisted_21$1); - }; - } -}; -const _hoisted_1$F = { class: "van-doc-markdown-body" }; -const _hoisted_2$C = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-icon": "@vant/weapp/icon/index"\n}\n

\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" />\n<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />\n

\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 />\n<van-icon name="chat" info="9" />\n<van-icon name="chat" info="99+" />\n

\u56FE\u6807\u989C\u8272

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

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

\u56FE\u6807\u5927\u5C0F

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

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

\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 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

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\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

\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); -const _hoisted_17$2 = [ - _hoisted_2$C -]; -const _sfc_main$J = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$F, _hoisted_17$2); - }; - } -}; -const _hoisted_1$E = { class: "van-doc-markdown-body" }; -const _hoisted_2$B = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-image": "@vant/weapp/image/index"\n}\n

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" />\n

\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\n  width="10rem"\n  height="10rem"\n  fit="contain"\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

\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\n  round\n  width="10rem"\n  height="10rem"\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

\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\n  width="100"\n  height="100"\n  lazy-load\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

\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>\n  <van-loading slot="loading" type="spinner" size="20" vertical />\n</van-image>\n

\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>\n  <text slot="error">\u52A0\u8F7D\u5931\u8D25</text>\n</van-image>\n

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
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
click\u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1event: Event
load\u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1event: Event
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); -const _hoisted_18$5 = [ - _hoisted_2$B -]; -const _sfc_main$I = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$E, _hoisted_18$5); - }; - } -}; -const _hoisted_1$D = { class: "van-doc-markdown-body" }; -const _hoisted_2$A = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-index-bar": "@vant/weapp/index-bar/index",\n  "van-index-anchor": "@vant/weapp/index-anchor/index"\n}\n

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>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="\u6587\u672C" />\n    <van-cell title="\u6587\u672C" />\n    <van-cell title="\u6587\u672C" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="\u6587\u672C" />\n    <van-cell title="\u6587\u672C" />\n    <van-cell title="\u6587\u672C" />\n  </view>\n\n  ...\n</van-index-bar>\n

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

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); -const _hoisted_15$6 = [ - _hoisted_2$A -]; -const _sfc_main$H = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$D, _hoisted_15$6); - }; - } -}; -const _hoisted_1$C = { class: "van-doc-markdown-body" }; -const _hoisted_2$z = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-loading": "@vant/weapp/loading/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u52A0\u8F7D\u7C7B\u578B

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

\u81EA\u5B9A\u4E49\u989C\u8272

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

\u52A0\u8F7D\u6587\u6848

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

\u5782\u76F4\u6392\u5217

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

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); -const _hoisted_14$3 = [ - _hoisted_2$z -]; -const _sfc_main$G = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$C, _hoisted_14$3); - }; - } -}; -const _hoisted_1$B = { class: "van-doc-markdown-body" }; -const _hoisted_2$y = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-nav-bar": "@vant/weapp/nav-bar/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

\u9AD8\u7EA7\u7528\u6CD5

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

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

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); -const _hoisted_13$4 = [ - _hoisted_2$y -]; -const _sfc_main$F = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$B, _hoisted_13$4); - }; - } -}; -const _hoisted_1$A = { class: "van-doc-markdown-body" }; -const _hoisted_2$x = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-notice-bar": "@vant/weapp/notice-bar/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-notice-bar\n  left-icon="volume-o"\n  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"\n/>\n

\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 -->\n<van-notice-bar scrollable text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002" />\n\n<!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  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"\n/>\n

\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\n  wrapable\n  scrollable="{{ false }}"\n  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"\n/>\n

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

\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\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002"\n/>\n

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

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

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

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 (s)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
click\u70B9\u51FB\u901A\u77E5\u680F\u65F6\u89E6\u53D1event: Event
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
', 15); -const _hoisted_17$1 = [ - _hoisted_2$x -]; -const _sfc_main$E = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$A, _hoisted_17$1); - }; - } -}; -const _hoisted_1$z = { class: "van-doc-markdown-body" }; -const _hoisted_2$w = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-notify": "@vant/weapp/notify/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

\u901A\u77E5\u7C7B\u578B

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

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

\u81EA\u5B9A\u4E49\u901A\u77E5

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

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

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

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

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); -const _hoisted_13$3 = [ - _hoisted_2$w -]; -const _sfc_main$D = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$z, _hoisted_13$3); - }; - } -}; -const _hoisted_1$y = { class: "van-doc-markdown-body" }; -const _hoisted_2$v = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-overlay": "@vant/weapp/overlay/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

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

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

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
', 9); -const _hoisted_11$3 = [ - _hoisted_2$v -]; -const _sfc_main$C = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$y, _hoisted_11$3); - }; - } -}; -const _hoisted_1$x = { class: "van-doc-markdown-body" }; -const _hoisted_2$u = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-panel": "@vant/weapp/panel/index"\n}\n

\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">\n  <view>\u5185\u5BB9</view>\n</van-panel>\n

\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">\n  <view>\u5185\u5BB9</view>\n  <view slot="footer">\n    <van-button size="small">\u6309\u94AE</van-button>\n    <van-button size="small" type="danger">\u6309\u94AE</van-button>\n  </view>\n</van-panel>\n

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); -const _hoisted_11$2 = [ - _hoisted_2$u -]; -const _sfc_main$B = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$x, _hoisted_11$2); - }; - } -}; -const _hoisted_1$w = { class: "van-doc-markdown-body" }; -const _hoisted_2$t = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-picker": "@vant/weapp/picker/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

\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\n  columns="{{ columns }}"\n  default-index="{{ 2 }}"\n  bind:change="onChange"\n/>\n

\u5C55\u793A\u9876\u90E8\u680F

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

\u591A\u5217\u8054\u52A8

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

\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 }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '\u676D\u5DDE', disabled: true },\n      { text: '\u5B81\u6CE2' },\n      { text: '\u6E29\u5DDE' },\n    ],\n  },\n});\n

\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 />\n

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
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
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
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); -const _hoisted_18$4 = [ - _hoisted_2$t -]; -const _sfc_main$A = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$w, _hoisted_18$4); - }; - } -}; -const _hoisted_1$v = { class: "van-doc-markdown-body" }; -const _hoisted_2$s = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-popup": "@vant/weapp/popup/index"\n}\n

\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" />\n\n<van-popup show="{{ show }}" bind:close="onClose">\u5185\u5BB9</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

\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\n  show="{{ show }}"\n  position="top"\n  custom-style="height: 20%;"\n  bind:close="onClose"\n/>\n

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

\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\n  show="{{ show }}"\n  round\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

\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 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

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
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
lock-scroll v1.7.3\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8booleantrue

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); -const _hoisted_15$5 = [ - _hoisted_2$s -]; -const _sfc_main$z = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$v, _hoisted_15$5); - }; - } -}; -const _hoisted_1$u = { class: "van-doc-markdown-body" }; -const _hoisted_2$r = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-progress": "@vant/weapp/progress/index"\n}\n

\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" />\n

\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" />\n

\u7F6E\u7070

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

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

\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" />\n\n<van-progress pivot-text="\u7EA2\u8272" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="\u7D2B\u8272"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

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); -const _hoisted_13$2 = [ - _hoisted_2$r -]; -const _sfc_main$y = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$u, _hoisted_13$2); - }; - } -}; -const _hoisted_1$t = { class: "van-doc-markdown-body" }; -const _hoisted_2$q = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-radio": "@vant/weapp/radio/index",\n  "van-radio-group": "@vant/weapp/radio-group/index"\n}\n

\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">\n  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n
Page({\n  data: {\n    radio: '1',\n  },\n\n  onChange(event) {\n    this.setData({\n      radio: event.detail,\n    });\n  },\n});\n

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

\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">\n  <van-radio name="1">\u5355\u9009\u6846 1</van-radio>\n  <van-radio name="2">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n

\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">\n  <van-radio name="1" shape="square">\u5355\u9009\u6846 1</van-radio>\n  <van-radio name="2" shape="square">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n

\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">\n  <van-radio name="1" checked-color="#07c160">\u5355\u9009\u6846 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n

\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">\n  <van-radio name="1" icon-size="24px">\u5355\u9009\u6846 1</van-radio>\n  <van-radio name="2" icon-size="24px">\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n

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

\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">\n  <van-radio name="1" label-disabled>\u5355\u9009\u6846 1</van-radio>\n  <van-radio name="2" label-disabled>\u5355\u9009\u6846 2</van-radio>\n</van-radio-group>\n

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

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); -const _hoisted_21 = [ - _hoisted_2$q -]; -const _sfc_main$x = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$t, _hoisted_21); - }; - } -}; -const _hoisted_1$s = { class: "van-doc-markdown-body" }; -const _hoisted_2$p = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-rate": "@vant/weapp/rate/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

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

\u81EA\u5B9A\u4E49\u56FE\u6807

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

\u81EA\u5B9A\u4E49\u6837\u5F0F

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

\u534A\u661F

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

\u81EA\u5B9A\u4E49\u6570\u91CF

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

\u7981\u7528\u72B6\u6001

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

\u53EA\u8BFB\u72B6\u6001

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

\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" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('\u5F53\u524D\u503C\uFF1A' + event.detail);\n  },\n});\n

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\u6001 \bbooleanfalse
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
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); -const _hoisted_18$3 = [ - _hoisted_2$p -]; -const _sfc_main$w = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$s, _hoisted_18$3); - }; - } -}; -const _hoisted_1$r = { class: "van-doc-markdown-body" }; -const _hoisted_2$o = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-search": "@vant/weapp/search/index"\n}\n

\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" />\n

\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\n  value="{{ value }}"\n  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

\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\n  value="{{ value }}"\n  input-align="center"\n  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n/>\n

\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" />\n

\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\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n/>\n

\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\n  value="{{ value }}"\n  label="\u5730\u5740"\n  placeholder="\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">\u641C\u7D22</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('\u641C\u7D22' + this.data.value);\n  },\n  onClick() {\n    Toast('\u641C\u7D22' + this.data.value);\n  },\n});\n

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-

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); -const _hoisted_17 = [ - _hoisted_2$o -]; -const _sfc_main$v = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$r, _hoisted_17); - }; - } -}; -const _hoisted_1$q = { class: "van-doc-markdown-body" }; -const _hoisted_2$n = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

\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" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '\u5FAE\u4FE1', icon: 'wechat', openType: 'share' },\n      { name: '\u5FAE\u535A', icon: 'weibo' },\n      { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },\n      { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n      { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

\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\n  show="{{ showShare }}"\n  title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '\u5FAE\u4FE1', icon: 'wechat' },\n        { name: '\u5FAE\u535A', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '\u590D\u5236\u94FE\u63A5', icon: 'link' },\n        { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n        { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

\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 }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '\u540D\u79F0',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '\u540D\u79F0',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '\u540D\u79F0',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

\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\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"\n  description="\u63CF\u8FF0\u4FE1\u606F"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '\u5FAE\u4FE1', icon: 'wechat' },\n      { name: '\u5FAE\u535A', icon: 'weibo' },\n      {\n        name: '\u590D\u5236\u94FE\u63A5',\n        icon: 'link',\n        description: '\u63CF\u8FF0\u4FE1\u606F',\n      },\n      { name: '\u5206\u4EAB\u6D77\u62A5', icon: 'poster' },\n      { name: '\u4E8C\u7EF4\u7801', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
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
select\u70B9\u51FB\u5206\u4EAB\u9009\u9879\u65F6\u89E6\u53D1option: Option, index: number
close\u5173\u95ED\u65F6\u89E6\u53D1-
cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1-
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); -const _hoisted_15$4 = [ - _hoisted_2$n -]; -const _sfc_main$u = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_15$4); - }; - } -}; -const _hoisted_1$p = { class: "van-doc-markdown-body" }; -const _hoisted_2$m = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

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 }}">\n  <van-sidebar-item title="\u6807\u7B7E\u540D" />\n  <van-sidebar-item title="\u6807\u7B7E\u540D" />\n  <van-sidebar-item title="\u6807\u7B7E\u540D" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

\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 }}">\n  <van-sidebar-item title="\u6807\u7B7E\u540D" dot />\n  <van-sidebar-item title="\u6807\u7B7E\u540D" badge="5" />\n  <van-sidebar-item title="\u6807\u7B7E\u540D" badge="99+" />\n</van-sidebar>\n

\u7981\u7528\u9009\u9879

\u901A\u8FC7disabled\u5C5E\u6027\u7981\u7528\u9009\u9879\u3002

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="\u6807\u7B7E\u540D" />\n  <van-sidebar-item title="\u6807\u7B7E\u540D" disabled />\n  <van-sidebar-item title="\u6807\u7B7E\u540D" />\n</van-sidebar>\n

\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">\n  <van-sidebar-item title="\u6807\u7B7E\u540D 1" />\n  <van-sidebar-item title="\u6807\u7B7E\u540D 2" />\n  <van-sidebar-item title="\u6807\u7B7E\u540D 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

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); -const _hoisted_18$2 = [ - _hoisted_2$m -]; -const _sfc_main$t = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$p, _hoisted_18$2); - }; - } -}; -const _hoisted_1$o = { class: "van-doc-markdown-body" }; -const _hoisted_2$l = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

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" />\n

\u663E\u793A\u5934\u50CF

\u901A\u8FC7avatar\u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002

<van-skeleton title avatar row="3" />\n

\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 }}">\n  <view>\u5B9E\u9645\u5185\u5BB9</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

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); -const _hoisted_11$1 = [ - _hoisted_2$l -]; -const _sfc_main$s = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$o, _hoisted_11$1); - }; - } -}; -const _hoisted_1$n = { class: "van-doc-markdown-body" }; -const _hoisted_2$k = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `\u5F53\u524D\u503C\uFF1A${event.detail}`,\n    });\n  },\n});\n

\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" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `\u5F53\u524D\u503C\uFF1A${event.detail}`,\n    });\n  },\n});\n

\u6307\u5B9A\u9009\u62E9\u8303\u56F4

<van-slider min="-50" max="50" />\n

\u7981\u7528

<van-slider value="50" disabled />\n

\u6307\u5B9A\u6B65\u957F

<van-slider value="50" step="10" />\n

\u81EA\u5B9A\u4E49\u6837\u5F0F

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

\u81EA\u5B9A\u4E49\u6309\u94AE

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

\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;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `\u5F53\u524D\u503C\uFF1A${event.detail}`,\n    });\n  },\n});\n

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); -const _hoisted_19 = [ - _hoisted_2$k -]; -const _sfc_main$r = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$n, _hoisted_19); - }; - } -}; -const _hoisted_1$m = { class: "van-doc-markdown-body" }; -const _hoisted_2$j = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

\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" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

\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" />\n

\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" />\n

\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 />\n

\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 />\n

\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 }}" />\n

\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 }}" />\n

\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" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

\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" />\n

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

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); -const _hoisted_20$1 = [ - _hoisted_2$j -]; -const _sfc_main$q = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$m, _hoisted_20$1); - }; - } -}; -const _hoisted_1$l = { class: "van-doc-markdown-body" }; -const _hoisted_2$i = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '\u6B65\u9AA4\u4E00',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n      },\n      {\n        text: '\u6B65\u9AA4\u4E8C',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n      },\n      {\n        text: '\u6B65\u9AA4\u4E09',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n      },\n      {\n        text: '\u6B65\u9AA4\u56DB',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n      },\n    ],\n  },\n});\n

\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\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

\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 }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '\u6B65\u9AA4\u4E00',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '\u6B65\u9AA4\u4E8C',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '\u6B65\u9AA4\u4E09',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '\u6B65\u9AA4\u56DB',\n        desc: '\u63CF\u8FF0\u4FE1\u606F',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

\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\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
active\u5F53\u524D\u6B65\u9AA4number0
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
', 12); -const _hoisted_14$2 = [ - _hoisted_2$i -]; -const _sfc_main$p = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$l, _hoisted_14$2); - }; - } -}; -const _hoisted_1$k = { class: "van-doc-markdown-body" }; -const _hoisted_2$h = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

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>\n  <van-button type="primary">\u57FA\u7840\u7528\u6CD5</van-button>\n</van-sticky>\n

\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 }}">\n  <van-button type="info">\u5438\u9876\u8DDD\u79BB</van-button>\n</van-sticky>\n

\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;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">\u6307\u5B9A\u5BB9\u5668</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

\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\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">\u5D4C\u5957\u5728 scroll-view \u5185</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

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
scroll\u6EDA\u52A8\u65F6\u89E6\u53D1{ scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 }
', 11); -const _hoisted_13$1 = [ - _hoisted_2$h -]; -const _sfc_main$o = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$k, _hoisted_13$1); - }; - } -}; -const _hoisted_1$j = { class: "van-doc-markdown-body" }; -const _hoisted_2$g = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="\u63D0\u4EA4\u8BA2\u5355"\n  bind:submit="onSubmit"\n/>\n

\u7981\u7528\u72B6\u6001

\u7981\u7528\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1submit\u4E8B\u4EF6\u3002

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="\u63D0\u4EA4\u8BA2\u5355"\n  tip="\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, \u6211\u4EEC\u5DF2\u4E3A\u60A8\u63A8\u8350\u5FEB\u9012"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

\u52A0\u8F7D\u72B6\u6001

\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1submit\u4E8B\u4EF6\u3002

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="\u63D0\u4EA4\u8BA2\u5355"\n  bind:submit="onSubmit"\n/>\n

\u9AD8\u7EA7\u7528\u6CD5

\u901A\u8FC7\u63D2\u69FD\u63D2\u5165\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="\u63D0\u4EA4\u8BA2\u5355"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">\u6807\u7B7E</van-tag>\n  <view slot="tip">\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, <text>\u4FEE\u6539\u5730\u5740</text></view>\n</van-submit-bar>\n

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
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); -const _hoisted_15$3 = [ - _hoisted_2$g -]; -const _sfc_main$n = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$j, _hoisted_15$3); - }; - } -}; -const _hoisted_1$i = { class: "van-doc-markdown-body" }; -const _hoisted_2$f = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">\u9009\u62E9</view>\n  <van-cell-group>\n    <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n  </van-cell-group>\n  <view slot="right">\u5220\u9664</view>\n</van-swipe-cell>\n

\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\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">\u9009\u62E9</view>\n  <van-cell-group>\n    <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n  </van-cell-group>\n  <view slot="right">\u5220\u9664</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '\u786E\u5B9A\u5220\u9664\u5417\uFF1F',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

\u4E3B\u52A8\u6253\u5F00

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="\u793A\u4F8B"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">\u9009\u62E9</view>\n  <van-cell-group>\n    <van-cell title="\u5355\u5143\u683C" value="\u5185\u5BB9" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">\u5220\u9664</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1`,\n        });\n        break;\n    }\n  },\n});\n

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
click\u70B9\u51FB\u65F6\u89E6\u53D1\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (left right cell outside)
close\u5173\u95ED\u65F6\u89E6\u53D1{ position: \u2018left\u2019 | \u2018right\u2019 , instance , name: string }
open\u6253\u5F00\u65F6\u89E6\u53D1{ position: \u2018left\u2019 | \u2018right\u2019 , 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); -const _hoisted_15$2 = [ - _hoisted_2$f -]; -const _sfc_main$m = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$i, _hoisted_15$2); - }; - } -}; -const _hoisted_1$h = { class: "van-doc-markdown-body" }; -const _hoisted_2$e = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // \u9700\u8981\u624B\u52A8\u5BF9 checked \u72B6\u6001\u8FDB\u884C\u66F4\u65B0\n    this.setData({ checked: detail });\n  },\n});\n

\u7981\u7528\u72B6\u6001

<van-switch checked="{{ checked }}" disabled />\n

\u52A0\u8F7D\u72B6\u6001

<van-switch checked="{{ checked }}" loading />\n

\u81EA\u5B9A\u4E49\u5927\u5C0F

<van-switch checked="{{ checked }}" size="24px" />\n

\u81EA\u5B9A\u4E49\u989C\u8272

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

\u5F02\u6B65\u63A7\u5236

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '\u63D0\u793A',\n      content: '\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

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); -const _hoisted_16 = [ - _hoisted_2$e -]; -const _sfc_main$l = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$h, _hoisted_16); - }; - } -}; -const _hoisted_1$g = { class: "van-doc-markdown-body" }; -const _hoisted_2$d = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

\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">\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `\u5207\u6362\u5230\u6807\u7B7E ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

\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">\n  <van-tab title="\u6807\u7B7E 1" name="a">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2" name="b">\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3" name="c">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n

\u6A2A\u5411\u6EDA\u52A8

\u591A\u4E8E 5 \u4E2A\u6807\u7B7E\u65F6\uFF0CTab \u53EF\u4EE5\u6A2A\u5411\u6EDA\u52A8\u3002

<van-tabs active="{{ active }}">\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n  <van-tab title="\u6807\u7B7E 5">\u5185\u5BB9 5</van-tab>\n  <van-tab title="\u6807\u7B7E 6">\u5185\u5BB9 6</van-tab>\n</van-tabs>\n

\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">\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2" disabled>\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `\u6807\u7B7E ${event.detail.name} \u5DF2\u88AB\u7981\u7528`,\n      icon: 'none',\n    });\n  },\n});\n

\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">\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n</van-tabs>\n

\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">\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `\u70B9\u51FB\u6807\u7B7E ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

\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>\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n</van-tabs>\n

\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>\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n</van-tabs>\n

\u6ED1\u52A8\u5207\u6362

\u901A\u8FC7swipeable\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6ED1\u52A8\u5207\u6362\u6807\u7B7E\u9875\u3002

<van-tabs swipeable>\n  <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n  <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n  <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n  <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n</van-tabs>\n

\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 }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="\u6807\u7B7E 1">\u5185\u5BB9 1</van-tab>\n    <van-tab title="\u6807\u7B7E 2">\u5185\u5BB9 2</van-tab>\n    <van-tab title="\u6807\u7B7E 3">\u5185\u5BB9 3</van-tab>\n    <van-tab title="\u6807\u7B7E 4">\u5185\u5BB9 4</van-tab>\n  </van-tabs>\n</van-popup>\n

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

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: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

\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" />\n

\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\u3002

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
', 24); -const _hoisted_26 = [ - _hoisted_2$d -]; -const _sfc_main$k = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$g, _hoisted_26); - }; - } -}; -const _hoisted_1$f = { class: "van-doc-markdown-body" }; -const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail \u7684\u503C\u4E3A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u7D22\u5F15\n    this.setData({ active: event.detail });\n  },\n});\n

\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">\n  <van-tabbar-item name="home" icon="home-o">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

\u663E\u793A\u5FBD\u6807

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n

\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">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    \u81EA\u5B9A\u4E49\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

\u81EA\u5B9A\u4E49\u989C\u8272

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="search">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">\u6807\u7B7E</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">\u6807\u7B7E</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

\u5207\u6362\u6807\u7B7E\u4E8B\u4EF6

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">\u6807\u7B7E1</van-tabbar-item>\n  <van-tabbar-item icon="search">\u6807\u7B7E2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">\u6807\u7B7E3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">\u6807\u7B7E4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `\u70B9\u51FB\u6807\u7B7E ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

\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-

TabbarItem Slot

\u540D\u79F0\u8BF4\u660E
icon\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807
icon-active\u9009\u4E2D\u65F6\u7684\u56FE\u6807
', 16); -const _hoisted_18$1 = [ - _hoisted_2$c -]; -const _sfc_main$j = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$f, _hoisted_18$1); - }; - } -}; -const _hoisted_1$e = { class: "van-doc-markdown-body" }; -const _hoisted_2$b = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

\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>\n<van-tag type="success">\u6807\u7B7E</van-tag>\n<van-tag type="danger">\u6807\u7B7E</van-tag>\n<van-tag type="warning">\u6807\u7B7E</van-tag>\n

\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>\n<van-tag plain type="success">\u6807\u7B7E</van-tag>\n<van-tag plain type="danger">\u6807\u7B7E</van-tag>\n<van-tag plain type="warning">\u6807\u7B7E</van-tag>\n

\u5706\u89D2\u6837\u5F0F

\u901A\u8FC7 round \u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002

<van-tag round type="primary">\u6807\u7B7E</van-tag>\n<van-tag round type="success">\u6807\u7B7E</van-tag>\n<van-tag round type="danger">\u6807\u7B7E</van-tag>\n<van-tag round type="warning">\u6807\u7B7E</van-tag>\n

\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>\n<van-tag mark type="success">\u6807\u7B7E</van-tag>\n<van-tag mark type="danger">\u6807\u7B7E</van-tag>\n<van-tag mark type="warning">\u6807\u7B7E</van-tag>\n

\u81EA\u5B9A\u4E49\u989C\u8272

<van-tag color="#f2826a">\u6807\u7B7E</van-tag>\n<van-tag color="#7232dd">\u6807\u7B7E</van-tag>\n<van-tag color="#7232dd" plain>\u6807\u7B7E</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">\u6807\u7B7E</van-tag>\n

\u6807\u7B7E\u5927\u5C0F

<van-tag type="danger">\u6807\u7B7E</van-tag>\n<van-tag type="danger" size="medium">\u6807\u7B7E</van-tag>\n<van-tag type="danger" size="large">\u6807\u7B7E</van-tag>\n

\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\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  \u6807\u7B7E\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  \u6807\u7B7E\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

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
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); -const _hoisted_18 = [ - _hoisted_2$b -]; -const _sfc_main$i = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$e, _hoisted_18); - }; - } -}; -const _hoisted_1$d = { class: "van-doc-markdown-body" }; -const _hoisted_2$a = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

\u4EE3\u7801\u6F14\u793A

\u6587\u5B57\u63D0\u793A

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~');\n
<van-toast id="van-toast" />\n

\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({\n  message: '\u52A0\u8F7D\u4E2D...',\n  forbidClick: true,\n});\n\n// \u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\nToast.loading({\n  message: '\u52A0\u8F7D\u4E2D...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

\u6210\u529F/\u5931\u8D25\u63D0\u793A

Toast.success('\u6210\u529F\u6587\u6848');\nToast.fail('\u5931\u8D25\u6587\u6848');\n

\u52A8\u6001\u66F4\u65B0\u63D0\u793A

const toast = Toast.loading({\n  duration: 0, // \u6301\u7EED\u5C55\u793A toast\n  forbidClick: true,\n  message: '\u5012\u8BA1\u65F6 3 \u79D2',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `\u5012\u8BA1\u65F6 ${second} \u79D2`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose \u56DE\u8C03\u51FD\u6570

Toast({\n  type: 'success',\n  message: '\u63D0\u4EA4\u6210\u529F',\n  onClose: () => {\n    console.log('\u6267\u884COnClose\u51FD\u6570');\n  },\n});\n

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); -const _hoisted_15$1 = [ - _hoisted_2$a -]; -const _sfc_main$h = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$d, _hoisted_15$1); - }; - } -}; -const _hoisted_1$c = { class: "van-doc-markdown-body" }; -const _hoisted_2$9 = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

\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>\n

\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" />\n

\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\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

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); -const _hoisted_14$1 = [ - _hoisted_2$9 -]; -const _sfc_main$g = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$c, _hoisted_14$1); - }; - } -}; -const _hoisted_1$b = { class: "van-doc-markdown-body" }; -const _hoisted_2$8 = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

\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\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

\u591A\u9009\u6A21\u5F0F

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

\u81EA\u5B9A\u4E49\u5185\u5BB9

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

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

[\n  {\n    // \u5BFC\u822A\u540D\u79F0\n    text: '\u6240\u6709\u57CE\u5E02',\n    // \u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u5FBD\u6807\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\n    badge: 3,\n    // \u662F\u5426\u5728\u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\n    dot: true,\n    // \u7981\u7528\u9009\u9879\n    disabled: false,\n    // \u8BE5\u5BFC\u822A\u4E0B\u6240\u6709\u7684\u53EF\u9009\u9879\n    children: [\n      {\n        // \u540D\u79F0\n        text: '\u6E29\u5DDE',\n        // id\uFF0C\u4F5C\u4E3A\u5339\u914D\u9009\u4E2D\u72B6\u6001\u7684\u6807\u8BC6\n        id: 1,\n        // \u7981\u7528\u9009\u9879\n        disabled: true,\n      },\n      {\n        text: '\u676D\u5DDE',\n        id: 2,\n      },\n    ],\n  },\n];\n

\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); -const _hoisted_15 = [ - _hoisted_2$8 -]; -const _sfc_main$f = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$b, _hoisted_15); - }; - } -}; -const _hoisted_1$a = { class: "van-doc-markdown-body" }; -const _hoisted_2$7 = /* @__PURE__ */ createStaticVNode('

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": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

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" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // \u5F53\u8BBE\u7F6E mutiple \u4E3A true \u65F6, file \u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u5426\u5219\u4E3A\u5BF9\u8C61\u683C\u5F0F\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // \u4EC5\u4E3A\u793A\u4F8B\uFF0C\u975E\u771F\u5B9E\u7684\u63A5\u53E3\u5730\u5740\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // \u4E0A\u4F20\u5B8C\u6210\u9700\u8981\u66F4\u65B0 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

\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 }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '\u56FE\u72471',\n      },\n      // Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6\n      // \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '\u56FE\u72472',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

\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 }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

\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 }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '\u4E0A\u4F20\u4E2D',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '\u4E0A\u4F20\u5931\u8D25',\n      },\n    ],\n  },\n});\n

\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\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

\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>\n  <van-button icon="photo" type="primary">\u4E0A\u4F20\u56FE\u7247</van-button>\n</van-uploader>\n

\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\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

\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\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '\u8BF7\u9009\u62E9\u56FE\u7247', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '\u4E0A\u4F20\u6210\u529F', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '\u4E0A\u4F20\u5931\u8D25', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

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\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\u7C7B\u578B\u65F6\u8BBE\u7F6Ecapture\u53EF\u9009\u503C\u4E3Acamera\u53EF\u4EE5\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934string | string[]['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-
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 \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 \u65F6\u751F\u6548\uFF0C\u62CD\u6444\u89C6\u9891\u6700\u957F\u62CD\u6444\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2number-
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
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

Event

\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); -const _hoisted_20 = [ - _hoisted_2$7 -]; -const _sfc_main$e = { - setup(__props, { expose }) { - const frontmatter = {}; - expose({ frontmatter }); - return (_ctx, _cache) => { - return openBlock(), createElementBlock("div", _hoisted_1$a, _hoisted_20); - }; - } -}; -const config$1 = { - name: "vant-weapp", - build: { - srcDir: "packages", - site: { - publicPath: "/vant-weapp/vite/" - } - }, - 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/mobile.html?weapp=1", - routeMapper: (path) => { - const map = { - "/common": "/style", - "/transition": "/style" - }; - return `/zh-CN${map[path] || path}`; - }, - syncPathFromSimulator: false - }, - 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: "ad6b5732c36321f2dafed737ac2da92f" - }, - 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: "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" - } - ] - } - ] - } -}; -const documents = { - Changelog: _sfc_main$17, - CustomStyle: _sfc_main$16, - Home: _sfc_main$15, - Quickstart: _sfc_main$14, - Theme: _sfc_main$13, - ActionSheet: _sfc_main$12, - Area: _sfc_main$11, - Button: _sfc_main$10, - Calendar: _sfc_main$$, - Card: _sfc_main$_, - Cell: _sfc_main$Z, - Checkbox: _sfc_main$Y, - Circle: _sfc_main$X, - Col: _sfc_main$W, - Collapse: _sfc_main$V, - Common: _sfc_main$U, - ConfigProvider: _sfc_main$T, - CountDown: _sfc_main$S, - DatetimePicker: _sfc_main$R, - Dialog: _sfc_main$Q, - Divider: _sfc_main$P, - DropdownMenu: _sfc_main$O, - Empty: _sfc_main$N, - Field: _sfc_main$M, - GoodsAction: _sfc_main$L, - Grid: _sfc_main$K, - Icon: _sfc_main$J, - Image: _sfc_main$I, - IndexBar: _sfc_main$H, - Loading: _sfc_main$G, - NavBar: _sfc_main$F, - NoticeBar: _sfc_main$E, - Notify: _sfc_main$D, - Overlay: _sfc_main$C, - Panel: _sfc_main$B, - Picker: _sfc_main$A, - Popup: _sfc_main$z, - Progress: _sfc_main$y, - Radio: _sfc_main$x, - Rate: _sfc_main$w, - Search: _sfc_main$v, - ShareSheet: _sfc_main$u, - Sidebar: _sfc_main$t, - Skeleton: _sfc_main$s, - Slider: _sfc_main$r, - Stepper: _sfc_main$q, - Steps: _sfc_main$p, - Sticky: _sfc_main$o, - SubmitBar: _sfc_main$n, - SwipeCell: _sfc_main$m, - Switch: _sfc_main$l, - Tab: _sfc_main$k, - Tabbar: _sfc_main$j, - Tag: _sfc_main$i, - Toast: _sfc_main$h, - Transition: _sfc_main$g, - TreeSelect: _sfc_main$f, - Uploader: _sfc_main$e -}; -const packageVersion = "1.9.0"; -var Header_vue_vue_type_style_index_0_lang = '.van-doc-header{background-color:#001938;-webkit-user-select:none;user-select:none;width:100%}.van-doc-header__top{align-items:center;display:flex;height:64px;padding:0 24px}.van-doc-header__top-nav{flex:1;font-size:0;text-align:right}.van-doc-header__top-nav>li{display:inline-block;position:relative;vertical-align:middle}.van-doc-header__top-nav-item{margin-left:16px}.van-doc-header__top-nav-title{display:block;font-size:15px}.van-doc-header__cube{background:#f7f8fa;border:1px solid hsla(0,0%,100%,.7);border-radius:20px;color:#001938;cursor:pointer;display:block;font-size:14px;line-height:30px;padding:0 12px;position:relative;text-align:center;transition:.3s ease-in-out}.van-doc-header__version{padding-right:20px}.van-doc-header__version:after{border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:1px;color:#001938;content:"";height:5px;position:absolute;right:9px;top:10px;transform:rotate(-45deg);width:5px}.van-doc-header__version-pop{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #ebedf0;color:#333;left:0;line-height:36px;overflow:hidden;position:absolute;text-align:left;top:34px;transform-origin:top;transition:.2s cubic-bezier(.215,.61,.355,1);width:100%;z-index:99}.van-doc-header__version-pop-item{padding-left:12px;transition:.2s}.van-doc-header__version-pop-item:hover{background-color:#f7f8fa;color:#1989fa}.van-doc-header__logo{display:block}.van-doc-header__logo img,.van-doc-header__logo span{display:inline-block;vertical-align:middle}.van-doc-header__logo img{margin-right:12px;width:28px}.van-doc-header__logo span{color:#fff;font-size:22px}.van-doc-header__link span{color:#fff;font-size:16px}.van-doc-header__link img{display:block;height:30px;transition:.3s cubic-bezier(.175,.885,.32,1.275);width:30px}.van-doc-header__link img:hover{transform:scale(1.2)}.van-doc-dropdown-enter,.van-doc-dropdown-leave-active{opacity:0;transform:scaleY(0)}'; -const _sfc_main$d = { - name: "VanDocHeader", - components: { - SearchInput - }, - props: { - lang: String, - config: Object, - versions: Array, - langConfigs: Array - }, - data() { - return { - packageVersion, - showVersionPop: false - }; - }, - computed: { - langLink() { - return `#${this.$route.path.replace(this.lang, this.anotherLang.lang)}`; - }, - langLabel() { - return this.anotherLang.label; - }, - anotherLang() { - const items = this.langConfigs.filter((item) => item.lang !== this.lang); - if (items.length) { - return items[0]; - } - return {}; - }, - searchConfig() { - return this.config.searchConfig; - } - }, - methods: { - toggleVersionPop() { - const val = !this.showVersionPop; - const action = val ? "add" : "remove"; - document.body[`${action}EventListener`]("click", this.checkHideVersionPop); - this.showVersionPop = val; - }, - checkHideVersionPop(event) { - if (!this.$refs.version.contains(event.target)) { - this.showVersionPop = false; - } - }, - onSwitchLang(lang) { - this.$router.push(this.$route.path.replace(lang.from, lang.to)); - }, - onSwitchVersion(version2) { - if (version2.link) { - location.href = version2.link; - } - } - } -}; -const _hoisted_1$9 = { class: "van-doc-header" }; -const _hoisted_2$6 = { class: "van-doc-row" }; -const _hoisted_3$6 = { class: "van-doc-header__top" }; -const _hoisted_4$2 = { class: "van-doc-header__logo" }; -const _hoisted_5$1 = ["src"]; -const _hoisted_6 = { class: "van-doc-header__top-nav" }; -const _hoisted_7 = ["href"]; -const _hoisted_8 = ["src"]; -const _hoisted_9 = { key: 1 }; -const _hoisted_10 = { - key: 0, - ref: "version", - class: "van-doc-header__top-nav-item" -}; -const _hoisted_11 = { - key: 0, - class: "van-doc-header__version-pop" -}; -const _hoisted_12 = ["onClick"]; -const _hoisted_13 = { - key: 1, - class: "van-doc-header__top-nav-item" -}; -const _hoisted_14 = ["href"]; -function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) { - const _component_search_input = resolveComponent("search-input"); - return openBlock(), createElementBlock("div", _hoisted_1$9, [ - createBaseVNode("div", _hoisted_2$6, [ - createBaseVNode("div", _hoisted_3$6, [ - createBaseVNode("a", _hoisted_4$2, [ - createBaseVNode("img", { - src: $props.config.logo - }, null, 8, _hoisted_5$1), - createBaseVNode("span", null, toDisplayString($props.config.title), 1) - ]), - createBaseVNode("ul", _hoisted_6, [ - (openBlock(true), createElementBlock(Fragment, null, renderList($props.config.links, (item, index) => { - return openBlock(), createElementBlock("li", { - key: index, - class: "van-doc-header__top-nav-item" - }, [ - createBaseVNode("a", { - class: "van-doc-header__link", - target: "_blank", - href: item.url - }, [ - item.logo ? (openBlock(), createElementBlock("img", { - key: 0, - src: item.logo - }, null, 8, _hoisted_8)) : item.text ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(item.text), 1)) : createCommentVNode("v-if", true) - ], 8, _hoisted_7) - ]); - }), 128)), - $props.versions ? (openBlock(), createElementBlock("li", _hoisted_10, [ - createBaseVNode("span", { - class: "van-doc-header__cube van-doc-header__version", - onClick: _cache[0] || (_cache[0] = (...args) => $options.toggleVersionPop && $options.toggleVersionPop(...args)) - }, [ - createTextVNode(toDisplayString($data.packageVersion) + " ", 1), - createVNode(Transition, { name: "van-doc-dropdown" }, { - default: withCtx(() => [ - $data.showVersionPop ? (openBlock(), createElementBlock("div", _hoisted_11, [ - (openBlock(true), createElementBlock(Fragment, null, renderList($props.versions, (item, index) => { - return openBlock(), createElementBlock("div", { - key: index, - class: "van-doc-header__version-pop-item", - onClick: ($event) => $options.onSwitchVersion(item) - }, toDisplayString(item.label), 9, _hoisted_12); - }), 128)) - ])) : createCommentVNode("v-if", true) - ]), - _: 1 - }) - ]) - ], 512)) : createCommentVNode("v-if", true), - $options.langLabel && $options.langLink ? (openBlock(), createElementBlock("li", _hoisted_13, [ - createBaseVNode("a", { - class: "van-doc-header__cube", - href: $options.langLink - }, toDisplayString($options.langLabel), 9, _hoisted_14) - ])) : createCommentVNode("v-if", true), - $options.searchConfig ? (openBlock(), createBlock(_component_search_input, { - key: 2, - lang: $props.lang, - "search-config": $options.searchConfig - }, null, 8, ["lang", "search-config"])) : createCommentVNode("v-if", true) - ]) - ]) - ]) - ]); -} -var DocHeader = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]); -var Content_vue_vue_type_style_index_0_lang = '.van-doc-card{background-color:#fff;border-radius:20px;box-shadow:0 8px 12px #ebedf0;margin-bottom:24px;padding:24px}.van-doc-card>blockquote a,.van-doc-card>p a,.van-doc-card>table a,.van-doc-card>ul a{-webkit-font-smoothing:auto;color:#1989fa;margin:0 1px}.van-doc-card>blockquote a:hover,.van-doc-card>p a:hover,.van-doc-card>table a:hover,.van-doc-card>ul a:hover{color:#0570db}.van-doc-card>blockquote a:active,.van-doc-card>p a:active,.van-doc-card>table a:active,.van-doc-card>ul a:active{color:#0456a9}.van-doc-card>h3,.van-doc-card>h4,.van-doc-card>h5,.van-doc-card>h6{color:#323233;font-weight:400;line-height:1.5}.van-doc-card>h3[id],.van-doc-card>h4[id],.van-doc-card>h5[id],.van-doc-card>h6[id]{cursor:pointer}.van-doc-card>h3{font-size:19px;font-weight:600;margin-bottom:16px}.van-doc-card>h4{font-size:16px}.van-doc-card>h4,.van-doc-card>h5{font-weight:600;margin:24px 0 12px}.van-doc-card>h5{font-size:15px}.van-doc-card>blockquote p,.van-doc-card>p{color:#34495e;font-size:15px;line-height:26px}.van-doc-card>blockquote p strong,.van-doc-card>p strong{color:#000}.van-doc-card>table{border-collapse:collapse;color:#34495e;font-size:14px;line-height:1.5;margin-top:12px;width:100%}.van-doc-card>table th{font-weight:600;padding:8px 10px;text-align:left}.van-doc-card>table th:first-child{padding-left:0}.van-doc-card>table th:last-child{padding-right:0}.van-doc-card>table td{border-top:1px solid #f1f4f8;padding:8px}.van-doc-card>table td:first-child{padding-left:0}.van-doc-card>table td:first-child code{background-color:rgba(25,137,250,.1);border-radius:20px;color:#1989fa;font-size:11px;font-weight:600;margin:0;padding:2px 6px}.van-doc-card>table td:last-child{padding-right:0}.van-doc-card>table em{-webkit-font-smoothing:auto;color:#4fc08d;display:inline-block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-style:normal;max-width:300px}.van-doc-card>ol li,.van-doc-card>ul li{color:#34495e;font-size:15px;line-height:26px;margin:5px 0 5px 10px;padding-left:15px;position:relative}.van-doc-card>ol li:before,.van-doc-card>ul li:before{border:1px solid #666;border-radius:50%;box-sizing:border-box;content:"";height:6px;left:0;margin-top:10px;position:absolute;top:0;width:6px}.van-doc-card>hr{border:0;border-top:1px solid #eee;margin:30px 0}.van-doc-card>ol code,.van-doc-card>p code,.van-doc-card>table code,.van-doc-card>ul code{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;border-radius:4px;display:inline;font-family:inherit;font-size:14px;font-weight:600;margin:0 2px;padding:2px 5px;word-break:keep-all}.van-doc-card>blockquote{background-color:#ecf9ff;border-radius:20px;margin:16px 0 0;padding:16px}.van-doc-card>img,.van-doc-card>p img{border-radius:20px;margin:16px 0;width:100%}.van-doc-content{flex:1;padding:0 0 75px;position:relative}.van-doc-content .van-doc-markdown-body{overflow:hidden;padding:24px}.van-doc-content .van-doc-markdown-body h1,.van-doc-content .van-doc-markdown-body h2{color:#323233;font-weight:400;line-height:1.5}.van-doc-content .van-doc-markdown-body h1[id],.van-doc-content .van-doc-markdown-body h2[id]{cursor:pointer}.van-doc-content .van-doc-markdown-body h1{cursor:default;font-size:30px;margin:0 0 30px}.van-doc-content .van-doc-markdown-body h2{font-size:25px;margin:45px 0 20px}.van-doc-content--changelog strong{display:block;font-size:15px;font-weight:600;margin:24px 0 12px}.van-doc-content--changelog h3+p code{margin:0}.van-doc-content--changelog h3 a{color:inherit;font-size:20px}'; -const _sfc_main$c = { - name: "VanDocContent", - computed: { - currentPage() { - const { path } = this.$route; - if (path) { - return path.split("/").slice(-1)[0]; - } - return this.$route.name; - } - }, - mounted() { - const anchors = [].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")); - anchors.forEach((anchor) => { - anchor.addEventListener("click", this.scrollToAnchor); - }); - }, - methods: { - scrollToAnchor(event) { - if (event.target.id) { - this.$router.push({ - name: this.$route.name, - hash: "#" + event.target.id - }); - } - } - } -}; -function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) { - return openBlock(), createElementBlock("div", { - class: normalizeClass(["van-doc-content", `van-doc-content--${$options.currentPage}`]) - }, [ - renderSlot(_ctx.$slots, "default") - ], 2); -} -var DocContent = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]); -var Container_vue_vue_type_style_index_0_lang = ".van-doc-container{box-sizing:border-box;overflow:hidden;padding-left:220px}.van-doc-container--with-simulator{padding-right:384px}"; -const _sfc_main$b = { - name: "VanDocContainer", - props: { - hasSimulator: Boolean - } -}; -function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) { - return openBlock(), createElementBlock("div", { - class: normalizeClass(["van-doc-container van-doc-row", { "van-doc-container--with-simulator": $props.hasSimulator }]) - }, [ - renderSlot(_ctx.$slots, "default") - ], 2); -} -var DocContainer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]); -var Simulator_vue_vue_type_style_index_0_lang = ".van-doc-simulator{background:#fafafa;border-radius:20px;box-shadow:0 8px 12px #ebedf0;box-sizing:border-box;min-width:360px;overflow:hidden;position:absolute;right:24px;top:88px;width:360px;z-index:1}@media (max-width:1100px){.van-doc-simulator{left:750px;right:auto}}@media (min-width:1680px){.van-doc-simulator{margin-right:-816px;right:50%}}.van-doc-simulator-fixed{position:fixed;top:24px}.van-doc-simulator iframe{display:block;width:100%}"; -const _sfc_main$a = { - name: "VanDocSimulator", - props: { - src: String - }, - data() { - return { - scrollTop: window.scrollY, - windowHeight: window.innerHeight - }; - }, - computed: { - isFixed() { - return this.scrollTop > 60; - }, - simulatorStyle() { - const height = Math.min(640, this.windowHeight - 90); - return { - height: height + "px" - }; - } - }, - mounted() { - window.addEventListener("scroll", () => { - this.scrollTop = window.scrollY; - }); - window.addEventListener("resize", () => { - this.windowHeight = window.innerHeight; - }); - } -}; -const _hoisted_1$8 = ["src"]; -function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) { - return openBlock(), createElementBlock("div", { - class: normalizeClass(["van-doc-simulator", { "van-doc-simulator-fixed": $options.isFixed }]) - }, [ - createBaseVNode("iframe", { - ref: "iframe", - src: $props.src, - style: normalizeStyle($options.simulatorStyle), - frameborder: "0" - }, null, 12, _hoisted_1$8) - ], 2); -} -var DocSimulator = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]); -var index_vue_vue_type_style_index_0_lang = ""; -const _sfc_main$9 = { - name: "VanDoc", - components: { - DocNav, - DocHeader, - DocContent, - DocContainer, - DocSimulator - }, - props: { - lang: String, - versions: Array, - simulator: String, - hasSimulator: Boolean, - langConfigs: Array, - config: { - type: Object, - required: true - }, - base: { - type: String, - default: "" - } - }, - emits: ["switch-version"], - watch: { - $route() { - this.setNav(); - } - }, - created() { - this.setNav(); - this.keyboardHandler(); - }, - methods: { - setNav() { - const { nav } = this.config; - const items = nav.reduce((list, item) => list.concat(item.items), []); - const currentPath = this.$route.path.split("/").pop(); - let currentIndex; - for (let i2 = 0, len = items.length; i2 < len; i2++) { - if (items[i2].path === currentPath) { - currentIndex = i2; - break; - } - } - this.leftNav = items[currentIndex - 1]; - this.rightNav = items[currentIndex + 1]; - }, - keyboardNav(direction) { - if (/win(32|64)/.test(navigator.userAgent.toLocaleLowerCase())) { - return; - } - const nav = direction === "prev" ? this.leftNav : this.rightNav; - if (nav.path) { - this.$router.push(this.base + nav.path); - } - }, - keyboardHandler() { - window.addEventListener("keyup", (event) => { - switch (event.keyCode) { - case 37: - this.keyboardNav("prev"); - break; - case 39: - this.keyboardNav("next"); - break; - } - }); - } - } -}; -const _hoisted_1$7 = { class: "van-doc" }; -function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) { - const _component_doc_header = resolveComponent("doc-header"); - const _component_doc_nav = resolveComponent("doc-nav"); - const _component_doc_content = resolveComponent("doc-content"); - const _component_doc_container = resolveComponent("doc-container"); - const _component_doc_simulator = resolveComponent("doc-simulator"); - return openBlock(), createElementBlock("div", _hoisted_1$7, [ - createVNode(_component_doc_header, { - lang: $props.lang, - config: $props.config, - versions: $props.versions, - "lang-configs": $props.langConfigs, - onSwitchVersion: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("switch-version", $event)) - }, null, 8, ["lang", "config", "versions", "lang-configs"]), - createVNode(_component_doc_nav, { - lang: $props.lang, - "nav-config": $props.config.nav - }, null, 8, ["lang", "nav-config"]), - createVNode(_component_doc_container, { "has-simulator": $props.hasSimulator }, { - default: withCtx(() => [ - createVNode(_component_doc_content, null, { - default: withCtx(() => [ - renderSlot(_ctx.$slots, "default") - ]), - _: 3 - }) - ]), - _: 3 - }, 8, ["has-simulator"]), - $props.hasSimulator ? (openBlock(), createBlock(_component_doc_simulator, { - key: 0, - src: $props.simulator - }, null, 8, ["src"])) : createCommentVNode("v-if", true) - ]); -} -var VanDoc = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]); -const ZH_CN = "zh-CN"; -const EN_US = "en-US"; -const CACHE_KEY = "vant-cli-lang"; -let currentLang = ZH_CN; -function getLang() { - return currentLang; -} -function setLang(lang) { - currentLang = lang; - localStorage.setItem(CACHE_KEY, lang); -} -function setDefaultLang(langFromConfig) { - const cached = localStorage.getItem(CACHE_KEY); - if (cached) { - currentLang = cached; - return; - } - if (navigator.language && navigator.language.indexOf("zh-") !== -1) { - currentLang = ZH_CN; - return; - } - currentLang = langFromConfig || EN_US; -} -var App_vue_vue_type_style_index_0_lang$1 = '@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;color:#323233;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;font-size:16px;min-width:1100px;overflow-x:auto}body,p{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{margin:0 auto;width:1680px}}code{word-wrap:break-word;-webkit-font-smoothing:auto;background-color:#f8f8f8;border-radius:20px;color:#58727e;display:block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-weight:400;line-height:26px;overflow-x:auto;padding:16px 20px;position:relative;white-space:pre-wrap}pre{margin:20px 0 0}pre+p{margin-top:20px}.hljs{background:#fff;display:block;overflow-x:auto;padding:.5em}.hljs-subst{color:#58727e}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#4fc08d}.hljs-comment,.hljs-quote{color:#999}.hljs-attribute,.hljs-keyword,.hljs-params{color:#8080ff}.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp,.hljs-variable{color:#eb6f6f}.hljs-attr,.hljs-built_in,.hljs-doctag,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{color:#4994df}.hljs-emphasis{font-style:italic}.van-doc-intro{padding-top:20px;text-align:center}.van-doc-intro p{margin-bottom:20px}'; -const _sfc_main$8 = { - components: { - VanDoc - }, - data() { - return { - hasSimulator: true - }; - }, - computed: { - simulator() { - var _a2, _b; - if ((_a2 = config$1.site.simulator) == null ? void 0 : _a2.url) { - return (_b = config$1.site.simulator) == null ? void 0 : _b.url; - } - const path = location.pathname.replace(/\/index(\.html)?/, "/"); - return `${path}mobile.html${location.hash}`; - }, - lang() { - const { lang } = this.$route.meta; - return lang || ""; - }, - langConfigs() { - const { locales: locales2 = {} } = config$1.site; - return Object.keys(locales2).map((key) => ({ - lang: key, - label: locales2[key].langLabel || "" - })); - }, - config() { - const { locales: locales2 } = config$1.site; - if (locales2) { - return locales2[this.lang]; - } - return config$1.site; - }, - versions() { - return config$1.site.versions || null; - } - }, - watch: { - "$route.path"() { - this.setTitleAndToogleSimulator(); - }, - lang(val) { - setLang(val); - this.setTitleAndToogleSimulator(); - }, - config: { - handler(val) { - if (val) { - this.setTitleAndToogleSimulator(); - } - }, - immediate: true - } - }, - mounted() { - if (this.$route.hash) { - this.$nextTick(() => { - const el = document.querySelector(this.$route.hash); - if (el) { - el.scrollIntoView(); - } - }); - } - }, - methods: { - setTitleAndToogleSimulator() { - let { title } = this.config; - const navItems = this.config.nav.reduce((result, nav) => [...result, ...nav.items], []); - const current = navItems.find((item) => item.path === this.$route.meta.name); - if (current && current.title) { - title = current.title + " - " + title; - } else if (this.config.description) { - title += ` - ${this.config.description}`; - } - document.title = title; - this.hasSimulator = !(config$1.site.hideSimulator || this.config.hideSimulator || current && current.hideSimulator); - } - } -}; -const _hoisted_1$6 = { class: "app" }; -function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) { - const _component_router_view = resolveComponent("router-view"); - const _component_van_doc = resolveComponent("van-doc"); - return openBlock(), createElementBlock("div", _hoisted_1$6, [ - $options.config ? (openBlock(), createBlock(_component_van_doc, { - key: 0, - lang: $options.lang, - config: $options.config, - versions: $options.versions, - simulator: $options.simulator, - "has-simulator": $data.hasSimulator, - "lang-configs": $options.langConfigs - }, { - default: withCtx(() => [ - createVNode(_component_router_view) - ]), - _: 1 - }, 8, ["lang", "config", "versions", "simulator", "has-simulator", "lang-configs"])) : createCommentVNode("v-if", true) - ]); -} -var App$1 = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]); -var DemoPlayground_vue_vue_type_style_index_0_scoped_true_lang = '.demo-playground[data-v-9efa7fdc]{background-color:#fff;border:1px solid #ebedf1;border-radius:1px;margin:24px 0}.demo-playground.transform[data-v-9efa7fdc]{transform:translate(0)}.demo-playground--previewer[data-v-9efa7fdc]{border-bottom:1px solid #ebedf1;padding:40px 24px}.demo-playground--previewer.compact[data-v-9efa7fdc]{padding:0}.demo-playground--code--actions[data-v-9efa7fdc]{align-items:center;display:flex;height:40px;padding:0 1em}.demo-playground--code--actions>a[data-v-9efa7fdc]:not(:last-child),.demo-playground--code--actions>button[data-v-9efa7fdc]:not(:last-child){margin-right:8px}.demo-playground--code--actions>a[data-v-9efa7fdc]{display:flex}.demo-playground--code--actions button[data-v-9efa7fdc]{border:0;box-sizing:border-box;cursor:pointer;display:inline-block;height:16px;opacity:.6;outline:none;padding:0;position:relative;transition:opacity .2s,background .2s;width:16px}.demo-playground--code--actions button[data-v-9efa7fdc]:after{bottom:-8px;content:"";left:-8px;position:absolute;right:-8px;top:-8px}.demo-playground--code--actions button[data-v-9efa7fdc]:hover{opacity:.8}.demo-playground--code--actions button[data-v-9efa7fdc]:active{opacity:.9}.demo-playground--code--actions button[data-v-9efa7fdc]:disabled{cursor:not-allowed;opacity:.2}.demo-playground--code--actions button[role=codesandbox][data-v-9efa7fdc]{background-position:-18px 0}.demo-playground--code--actions button[role=codepen][data-v-9efa7fdc]{background-position:-36px 0}.demo-playground--code--actions button[role=source][data-v-9efa7fdc]{background-position:-72px 0}.demo-playground--code--actions button[role=change-jsx][data-v-9efa7fdc]{background-position:-90px 0}.demo-playground--code--actions button[role=change-tsx][data-v-9efa7fdc]{background-position:-108px 0}.demo-playground--code--actions button[role=open-demo][data-v-9efa7fdc]{background-position:-126px 0}.demo-playground--code--actions button[role=motions][data-v-9efa7fdc]{background-position:-162px 0}.demo-playground--code--actions button[role=sketch-component][data-v-9efa7fdc]{background-position:-182px 0}.demo-playground--code--actions button[role=sketch-group][data-v-9efa7fdc]{background-position:-200px 0}.demo-playground--code--actions button[role=copy][data-status=ready][data-v-9efa7fdc]{background-position:-54px 0}.demo-playground--code--actions button[role=copy][data-status=copied][data-v-9efa7fdc]{background-position:-54px -16px;pointer-events:none}.demo-playground--code--actions button[role=refresh][data-v-9efa7fdc]{background-position-x:-144px}.demo-playground--code--actions>span[data-v-9efa7fdc]{display:inline-block;flex:1}.demo-playground--code--content[data-v-9efa7fdc]{border-top:1px dashed #ebedf1}.demo-playground--code--content[data-v-9efa7fdc] pre{margin:0}.demo-playground--code--content[data-v-9efa7fdc] .language-html{border-radius:0}.action-icon[data-v-9efa7fdc]{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAA8CAMAAADc4HoZAAABFFBMVEUAAABGT2VGTmZaYXpCvGtIUGg3tGBGTmU3s2A/tmFKUGxFTmRFTWVQWmxFTWRJUGZFTWRGTmRLWWpFTWRGTmVGTmVLVG1FTmRGTWVHTmVFTWRHUGdFTWRGT2ZFTWVGTmU6t2I7xHA3tF9GTWRIT2dFTmRGTmVFTWQ3s2BFTWRGTmVGTmZKUmVFTWRFTWRGTWRGTmVcXHxFTmVFTmVGTmVFTWRIUGdGTWVNU3FGT2ZGTmVHTmVFTWRFTWVFTmVITWRHUGZFTWVFTmRGTmZGTmVFTWVLU2g4tF83tGBFTWQ3s1/LzdT09faoq7Zwdoieoq58gpLj5OeCh5fq6+2/wsmTmKWQlKJfZnpIUGfU1tu0t8BOVWynlyFSAAAASXRSTlMAkoAHEkDQ/dgYFuf0C8gj+KQQmm1oEuyNWNg53kSXfCYI5tEtzq7ivbOgTBy924R1BfHUibcpYw1JcU7v+7E3Nav6XVPDGraPqQuKawAACh1JREFUeNrsm2lT6kgUhg9QFFUkgWDYZfnAVsi+KQJeQdGqt1xm7jZ3lv//PyYdhe7QWQw1zP0w83xQsY9Um4fTp7vToeBczmaX5MN5rXZO/+NGJzGuLejnkw3dADehLHkQyceAWD5C/0my9XqWPLlCK9WHQScirUMk18g7J9ZosYLFajFyT8siLIpuyQkHKBDw4NgYsnDr0Xybaii60rjYzsmdbrqnw0TvpbvkhjYuzinygDXJXLewR2/O/f73w1cWCUj0LkmiU8SeYsc9LXMZIJNjyXkqmbWQCzV8ICawzLO8jh3q4IyciYfugMnMMGYT4C4UJ2fOEbbSc0EyrVp4T/7u4kiZs6jANjwBxkupWMLG7NIlLZvxM+As3nRLTsD/N5xtekmHIEQuhBAoBuREtmaXWVgB41Smc97JbMZA7pqcKKgopbu7FC1BLUgD22MyeVnPWD0bonLLeCQRhIkzQNnz6gHiK0HmxeF4qkKPSsVygh2x2q50SmlZIGIyiQo8OY+XGVExOLVM2WVRbAkDSma0609aQaxKMgOo6YjQ77Tc8d3laxPRxS7R564yI8WSFkymgUNuJqlbomQLisblpnNAf0nrB1j06rTsA7n0SE5L2skkh+Qcm2CP3vGV2QHWp5Ypu4wDosumRpyzNrBwcFmqk4166dBmrFgJ5aeDKhvSklWLBLokgBhcaF3bFL59lV45EQsR3QLVfV0uAuNFhEy2JaC/fcveMVC8ltKSy3RITtjRl34yDSj0r8rMNkyXQksByJOdCmIdslNAKS7V0BIKdpmGQ1+S9slA2IVa60My89HoRKyZ5XTD8rhBX1DwEN85Gw53drIsT6W0FGTKyYmYtgcI427rI1NB5bQyZZeTuNCSXaEpBX2Cotm9qWqdJOqqajN85y8zTC6E8SGZGalmjja4uaQC0OUy0UzSAckNTKS0FGTKyYmYbfQP42brcFGr/X5+N/XDNVG+36+eXCZ3Kbbkbd644cHBW6bpnTlx0vZO6PL0NI/LE8uksxtUqQ7sUgpoAfp0TgLzqQ4oAFkkeFqadCwFxJMz4SKTwogVpIsaBtrv+qdQzZ8ibSB8cpncJW+Z68iQTBq5EXG6N6UIvTHVr2hPpHTX9ZY5Rf0ImfIEyEMmFWHQmk89gHKhBShCP68UoHVfFtZnqV0yahWYVLTdJyMFwE0ms8l+cnFJfWyIuM2TyuQuecsW4xFJMMcd0S1PzBRQGdkaOKosc4DKYn1amSM2rb4H5lwmaVUVqEXJItoA1LBGokwoHWKUS0AqBZTKxOgocJXJl74uLi+Be+I2TyuTu+SkkCInmrZS3kNXkMnnF9RFT5Qpv1cVJkYwmRzxlavMIRClmTgBYmIeU1bpfC+WqS6RKPOKOTxjaWlZXSpWcp4xq1dBZIaBTxH+v95kySLyCQifSCZ3WYuTnYbDKNvpnVMVPUpulvSGPiFRJlq39M5E95bZNYZXD1icTOaoHophQ1EgLcpkrBOsdLJimbglsstMzpnGxZtSE0vjwlKalGVyuEzZJSXQIxJs2kVVDJOLC6NKVK/0jLWrzEzPYB/G6SxV9pJZq2XlyXSHDqlAjW5XjaSCzfsfom2XiX3hbEN4y3G/r64agy7ZifRrXOa6wmMkmT7YZfbwTuPsUoGi2WUyWOlkxZJIkskGWD7YkpWcb4NtAJlVm8tHYEF2m6KofW/pXLe2INxkTs0QeszB5N5rmJVckg55RzI+gTpEToFySRZ1GAcy94lg8AmOtmtSh2QnNebrTCnmWJlzHRatYeRegbomWSZpU2Cq0UdkdgLKlBMzA2EZNpJkmnmZQ9EwqtSDMijqGU+ZeeSqD/pCkikhZ6ZsU8cNc+kuc3EoU0tgT4hE5q3ELgZCTIBh1nECVAWm0fMs3daA8bV4wUN7f0nhAkdCgkztnx9mZ5iQ+zDLSLxdx5bZFK+Tp8wZDNLqFEAmr5myzRh36TfM8obXX01eAeyaqT4LhYvouMccLzNSRIlZmwGzLnGskVWWWWhBmgBZlXPpOwHieEyA5joGsktZJvumXBN5yzSQW/puGhy2XGBDTjZbWDGXLhMgRZ4ArQF8f375+vnP5y/gFawKYHzlEuOzNPGRSVFgSkT37LcCYDSidpnnCUCQaTmUlyaW1QAyxaVJAVjLLmWZViQSUW+Z9RsWE1DmFuMIOZAddIMtTSrA69PTy/dfXr798QMo7GVmzjXyijleJqVwV7d6t4rL2+NlUeY5GE6bBnNp0yCQTG4zBYVIWGa6y6SMCmDoKZOuFQDVYDI1FWlyJtimQR8/vv76/O319enrl89/wdjLZEnsFeO/nee6NImv8MAW6zpSssylKLMMxrHbebJM2eZohYrkUpL5HhKfqohdesokbZED1oFk0gC5M/Kje+e7nafi9fnl8y8mn1+ef6AtyXSNOV4mZd4q7wAo+8s8fqOdA7httJd3Hwlpo12WeUZUv0PaVWaCuTSVqxgGkznPYTYiP/w32lfAr0+/fAF+++2PV6ApyvSK8ZcpL034LbAWclm2kEU/4i8z8C0wf5mcENQIcTxkJnuTOMV1ZBxkniceqYkmnRmtR4ooQWVSJwbD16b/LbAGTEffnvD705NpC3lZphxzrEwbYVZg2Dd+c9pZZpCb08FltrChj8nsAGpiDD0py9RWUIvAkFWOuwcFuA0ok4bALCuKswQFvTk9gMnL85fvz99h0ttsmp8+tdt9LlOKuXC5OS1fOa42c3jUUrW6sIGetB8bwVCUuUCgYyPBZa6B+w/KpHsVgOq4adBhTQ8RonIOwE3ACRBjGMNquJ/ODcc9YgQ8NtJVYfLn568vMImtVrmcoiitVmLuFON6bMRfpiOPY/QOD3T16juZ9V6AA10+MhkkE0Ys6yuzXFgTY35fzTw6L03iV8MOMbTt8CpJwWVa02C9PSyUt8NPKtBK0hEHuoYAzAH0G0z0c+IEjIGALDMfdeYCuD88ahmrxJnMuBE77qilLHPkKnOZlhLz9CcNnFu06hg7lLBGRx21DMHkr9+ZJ6HFKya4TC9atIOf6woBIX6SK8AhaM8D0D//ELR3ryLXlV4xV0qElhEiz0PQbcNoOx+CvlJgIT6H4xUTHCMGd1LE4aVTKpa+jyf4y/z5jycE7lXwxxO0gtFu5svECRrz/4NDf7dvxjYQwzAMdGEE8RaWq2ySh/cf6OGoyQCRANLkBHenWqnzxyGU6aVP0zRN0zTtmzUru64ZWZ923kC0n6tT9WnnnL+y5R51pj6L9ahlx7k6UR8kVt2Sh1W35GHVLXlYdUseVt2Sh1W3fK8aDmuSOmyfelyGwpqkjtvnnvMyENYcdeA+fSxaDNYUdeg+TovBmqAO3sdpMVjD1eH7OC0Ga7A6QR+nxWANVafo47QYrIHqJH0eWhDWMHWaPosWhTVInahPHzisIepUffrAYQ1QJ+vTgVgD1IP6/AHM0QJdY511NAAAAABJRU5ErkJggg==") no-repeat 0 0/230px auto}'; -function copyToClipboard(str) { - const el = document.createElement("textarea"); - el.value = str; - el.setAttribute("readonly", ""); - el.style.position = "absolute"; - el.style.left = "-9999px"; - document.body.appendChild(el); - const selection = document.getSelection(); - if (!selection) { - return; - } - const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; - el.select(); - document.execCommand("copy"); - document.body.removeChild(el); - if (selected) { - selection.removeAllRanges(); - selection.addRange(selected); - } -} -const _sfc_main$7 = { - name: "DemoPlayground", - props: { - originCode: String, - codeSnippet: String, - transform: Boolean, - compact: Boolean, - inline: Boolean - }, - data() { - return { - showSource: false, - copyStatus: "ready" - }; - }, - methods: { - unescape, - toogleSource() { - this.showSource = !this.showSource; - }, - copySourceCode() { - copyToClipboard(unescape(this.originCode)); - this.copyStatus = "copied"; - setTimeout(() => { - this.copyStatus = "ready"; - }, 2e3); - } - } -}; -const _withScopeId = (n2) => (pushScopeId("data-v-9efa7fdc"), n2 = n2(), popScopeId(), n2); -const _hoisted_1$5 = { class: "demo-playground--code" }; -const _hoisted_2$5 = { class: "demo-playground--code--actions" }; -const _hoisted_3$5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("span", null, null, -1)); -const _hoisted_4$1 = ["data-status"]; -const _hoisted_5 = ["innerHTML"]; -function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) { - return openBlock(), createElementBlock("div", { - class: normalizeClass({ "demo-playground": !$props.inline, transform: $props.transform }) - }, [ - $props.inline ? renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [ - createBaseVNode("div", { - class: normalizeClass(["demo-playground--previewer", { compact: $props.compact }]) - }, [ - renderSlot(_ctx.$slots, "default", {}, void 0, true) - ], 2), - createBaseVNode("div", _hoisted_1$5, [ - createBaseVNode("div", _hoisted_2$5, [ - _hoisted_3$5, - createBaseVNode("button", { - title: "Copy source code", - class: "action-icon", - role: "copy", - "data-status": $data.copyStatus, - onClick: _cache[0] || (_cache[0] = (...args) => $options.copySourceCode && $options.copySourceCode(...args)) - }, null, 8, _hoisted_4$1), - createBaseVNode("button", { - title: "Toggle source code panel", - class: "action-icon", - role: "source", - onClick: _cache[1] || (_cache[1] = (...args) => $options.toogleSource && $options.toogleSource(...args)) - }) - ]), - withDirectives(createBaseVNode("div", { - innerHTML: $options.unescape($props.codeSnippet), - class: "demo-playground--code--content" - }, null, 8, _hoisted_5), [ - [vShow, $data.showSource] - ]) - ]) - ], 64)) - ], 2); -} -var DemoPlayground = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-9efa7fdc"]]); -/*! - * vue-router v4.0.6 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */ -const hasSymbol = typeof Symbol === "function" && typeof Symbol.toStringTag === "symbol"; -const PolySymbol = (name) => hasSymbol ? Symbol(name) : "_vr_" + name; -const matchedRouteKey = /* @__PURE__ */ PolySymbol("rvlm"); -const viewDepthKey = /* @__PURE__ */ PolySymbol("rvd"); -const routerKey = /* @__PURE__ */ PolySymbol("r"); -const routeLocationKey = /* @__PURE__ */ PolySymbol("rl"); -const routerViewLocationKey = /* @__PURE__ */ PolySymbol("rvl"); -const isBrowser = typeof window !== "undefined"; -function isESModule(obj) { - return obj.__esModule || hasSymbol && obj[Symbol.toStringTag] === "Module"; -} -const assign = Object.assign; -function applyToParams(fn2, params) { - const newParams = {}; - for (const key in params) { - const value = params[key]; - newParams[key] = Array.isArray(value) ? value.map(fn2) : fn2(value); - } - return newParams; -} -let noop = () => { -}; -const TRAILING_SLASH_RE = /\/$/; -const removeTrailingSlash = (path) => path.replace(TRAILING_SLASH_RE, ""); -function parseURL(parseQuery2, location2, currentLocation = "/") { - let path, query = {}, searchString = "", hash = ""; - const searchPos = location2.indexOf("?"); - const hashPos = location2.indexOf("#", searchPos > -1 ? searchPos : 0); - if (searchPos > -1) { - path = location2.slice(0, searchPos); - searchString = location2.slice(searchPos + 1, hashPos > -1 ? hashPos : location2.length); - query = parseQuery2(searchString); - } - if (hashPos > -1) { - path = path || location2.slice(0, hashPos); - hash = location2.slice(hashPos, location2.length); - } - path = resolveRelativePath(path != null ? path : location2, currentLocation); - return { - fullPath: path + (searchString && "?") + searchString + hash, - path, - query, - hash - }; -} -function stringifyURL(stringifyQuery2, location2) { - let query = location2.query ? stringifyQuery2(location2.query) : ""; - return location2.path + (query && "?") + query + (location2.hash || ""); -} -function stripBase(pathname, base) { - if (!base || pathname.toLowerCase().indexOf(base.toLowerCase())) - return pathname; - return pathname.slice(base.length) || "/"; -} -function isSameRouteLocation(stringifyQuery2, a2, b2) { - let aLastIndex = a2.matched.length - 1; - let bLastIndex = b2.matched.length - 1; - return aLastIndex > -1 && aLastIndex === bLastIndex && isSameRouteRecord(a2.matched[aLastIndex], b2.matched[bLastIndex]) && isSameRouteLocationParams(a2.params, b2.params) && stringifyQuery2(a2.query) === stringifyQuery2(b2.query) && a2.hash === b2.hash; -} -function isSameRouteRecord(a2, b2) { - return (a2.aliasOf || a2) === (b2.aliasOf || b2); -} -function isSameRouteLocationParams(a2, b2) { - if (Object.keys(a2).length !== Object.keys(b2).length) - return false; - for (let key in a2) { - if (!isSameRouteLocationParamsValue(a2[key], b2[key])) - return false; - } - return true; -} -function isSameRouteLocationParamsValue(a2, b2) { - return Array.isArray(a2) ? isEquivalentArray(a2, b2) : Array.isArray(b2) ? isEquivalentArray(b2, a2) : a2 === b2; -} -function isEquivalentArray(a2, b2) { - return Array.isArray(b2) ? a2.length === b2.length && a2.every((value, i2) => value === b2[i2]) : a2.length === 1 && a2[0] === b2; -} -function resolveRelativePath(to, from) { - if (to.startsWith("/")) - return to; - if (!to) - return from; - const fromSegments = from.split("/"); - const toSegments = to.split("/"); - let position = fromSegments.length - 1; - let toPosition; - let segment; - for (toPosition = 0; toPosition < toSegments.length; toPosition++) { - segment = toSegments[toPosition]; - if (position === 1 || segment === ".") - continue; - if (segment === "..") - position--; - else - break; - } - return fromSegments.slice(0, position).join("/") + "/" + toSegments.slice(toPosition - (toPosition === toSegments.length ? 1 : 0)).join("/"); -} -var NavigationType; -(function(NavigationType2) { - NavigationType2["pop"] = "pop"; - NavigationType2["push"] = "push"; -})(NavigationType || (NavigationType = {})); -var NavigationDirection; -(function(NavigationDirection2) { - NavigationDirection2["back"] = "back"; - NavigationDirection2["forward"] = "forward"; - NavigationDirection2["unknown"] = ""; -})(NavigationDirection || (NavigationDirection = {})); -function normalizeBase(base) { - if (!base) { - if (isBrowser) { - const baseEl = document.querySelector("base"); - base = baseEl && baseEl.getAttribute("href") || "/"; - base = base.replace(/^\w+:\/\/[^\/]+/, ""); - } else { - base = "/"; - } - } - if (base[0] !== "/" && base[0] !== "#") - base = "/" + base; - return removeTrailingSlash(base); -} -const BEFORE_HASH_RE = /^[^#]+#/; -function createHref(base, location2) { - return base.replace(BEFORE_HASH_RE, "#") + location2; -} -function getElementPosition(el, offset) { - const docRect = document.documentElement.getBoundingClientRect(); - const elRect = el.getBoundingClientRect(); - return { - behavior: offset.behavior, - left: elRect.left - docRect.left - (offset.left || 0), - top: elRect.top - docRect.top - (offset.top || 0) - }; -} -const computeScrollPosition = () => ({ - left: window.pageXOffset, - top: window.pageYOffset -}); -function scrollToPosition(position) { - let scrollToOptions; - if ("el" in position) { - let positionEl = position.el; - const isIdSelector = typeof positionEl === "string" && positionEl.startsWith("#"); - const el = typeof positionEl === "string" ? isIdSelector ? document.getElementById(positionEl.slice(1)) : document.querySelector(positionEl) : positionEl; - if (!el) { - return; - } - scrollToOptions = getElementPosition(el, position); - } else { - scrollToOptions = position; - } - if ("scrollBehavior" in document.documentElement.style) - window.scrollTo(scrollToOptions); - else { - window.scrollTo(scrollToOptions.left != null ? scrollToOptions.left : window.pageXOffset, scrollToOptions.top != null ? scrollToOptions.top : window.pageYOffset); - } -} -function getScrollKey(path, delta) { - const position = history.state ? history.state.position - delta : -1; - return position + path; -} -const scrollPositions = new Map(); -function saveScrollPosition(key, scrollPosition) { - scrollPositions.set(key, scrollPosition); -} -function getSavedScrollPosition(key) { - const scroll = scrollPositions.get(key); - scrollPositions.delete(key); - return scroll; -} -let createBaseLocation = () => location.protocol + "//" + location.host; -function createCurrentLocation(base, location2) { - const { pathname, search, hash } = location2; - const hashPos = base.indexOf("#"); - if (hashPos > -1) { - let pathFromHash = hash.slice(1); - if (pathFromHash[0] !== "/") - pathFromHash = "/" + pathFromHash; - return stripBase(pathFromHash, ""); - } - const path = stripBase(pathname, base); - return path + search + hash; -} -function useHistoryListeners(base, historyState, currentLocation, replace) { - let listeners = []; - let teardowns = []; - let pauseState = null; - const popStateHandler = ({ state }) => { - const to = createCurrentLocation(base, location); - const from = currentLocation.value; - const fromState = historyState.value; - let delta = 0; - if (state) { - currentLocation.value = to; - historyState.value = state; - if (pauseState && pauseState === from) { - pauseState = null; - return; - } - delta = fromState ? state.position - fromState.position : 0; - } else { - replace(to); - } - listeners.forEach((listener) => { - listener(currentLocation.value, from, { - delta, - type: NavigationType.pop, - direction: delta ? delta > 0 ? NavigationDirection.forward : NavigationDirection.back : NavigationDirection.unknown - }); - }); - }; - function pauseListeners() { - pauseState = currentLocation.value; - } - function listen(callback) { - listeners.push(callback); - const teardown = () => { - const index = listeners.indexOf(callback); - if (index > -1) - listeners.splice(index, 1); - }; - teardowns.push(teardown); - return teardown; - } - function beforeUnloadListener() { - const { history: history2 } = window; - if (!history2.state) - return; - history2.replaceState(assign({}, history2.state, { scroll: computeScrollPosition() }), ""); - } - function destroy() { - for (const teardown of teardowns) - teardown(); - teardowns = []; - window.removeEventListener("popstate", popStateHandler); - window.removeEventListener("beforeunload", beforeUnloadListener); - } - window.addEventListener("popstate", popStateHandler); - window.addEventListener("beforeunload", beforeUnloadListener); - return { - pauseListeners, - listen, - destroy - }; -} -function buildState(back, current, forward, replaced = false, computeScroll = false) { - return { - back, - current, - forward, - replaced, - position: window.history.length, - scroll: computeScroll ? computeScrollPosition() : null - }; -} -function useHistoryStateNavigation(base) { - const { history: history2, location: location2 } = window; - let currentLocation = { - value: createCurrentLocation(base, location2) - }; - let historyState = { value: history2.state }; - if (!historyState.value) { - changeLocation(currentLocation.value, { - back: null, - current: currentLocation.value, - forward: null, - position: history2.length - 1, - replaced: true, - scroll: null - }, true); - } - function changeLocation(to, state, replace2) { - const hashIndex = base.indexOf("#"); - const url = hashIndex > -1 ? (location2.host && document.querySelector("base") ? base : base.slice(hashIndex)) + to : createBaseLocation() + base + to; - try { - history2[replace2 ? "replaceState" : "pushState"](state, "", url); - historyState.value = state; - } catch (err) { - { - console.error(err); - } - location2[replace2 ? "replace" : "assign"](url); - } - } - function replace(to, data) { - const state = assign({}, history2.state, buildState(historyState.value.back, to, historyState.value.forward, true), data, { position: historyState.value.position }); - changeLocation(to, state, true); - currentLocation.value = to; - } - function push(to, data) { - const currentState = assign({}, historyState.value, history2.state, { - forward: to, - scroll: computeScrollPosition() - }); - changeLocation(currentState.current, currentState, true); - const state = assign({}, buildState(currentLocation.value, to, null), { position: currentState.position + 1 }, data); - changeLocation(to, state, false); - currentLocation.value = to; - } - return { - location: currentLocation, - state: historyState, - push, - replace - }; -} -function createWebHistory(base) { - base = normalizeBase(base); - const historyNavigation = useHistoryStateNavigation(base); - const historyListeners = useHistoryListeners(base, historyNavigation.state, historyNavigation.location, historyNavigation.replace); - function go(delta, triggerListeners = true) { - if (!triggerListeners) - historyListeners.pauseListeners(); - history.go(delta); - } - const routerHistory = assign({ - location: "", - base, - go, - createHref: createHref.bind(null, base) - }, historyNavigation, historyListeners); - Object.defineProperty(routerHistory, "location", { - get: () => historyNavigation.location.value - }); - Object.defineProperty(routerHistory, "state", { - get: () => historyNavigation.state.value - }); - return routerHistory; -} -function createWebHashHistory(base) { - base = location.host ? base || location.pathname + location.search : ""; - if (base.indexOf("#") < 0) - base += "#"; - return createWebHistory(base); -} -function isRouteLocation(route) { - return typeof route === "string" || route && typeof route === "object"; -} -function isRouteName(name) { - return typeof name === "string" || typeof name === "symbol"; -} -const START_LOCATION_NORMALIZED = { - path: "/", - name: void 0, - params: {}, - query: {}, - hash: "", - fullPath: "/", - matched: [], - meta: {}, - redirectedFrom: void 0 -}; -const NavigationFailureSymbol = /* @__PURE__ */ PolySymbol("nf"); -var NavigationFailureType; -(function(NavigationFailureType2) { - NavigationFailureType2[NavigationFailureType2["aborted"] = 4] = "aborted"; - NavigationFailureType2[NavigationFailureType2["cancelled"] = 8] = "cancelled"; - NavigationFailureType2[NavigationFailureType2["duplicated"] = 16] = "duplicated"; -})(NavigationFailureType || (NavigationFailureType = {})); -function createRouterError(type, params) { - { - return assign(new Error(), { - type, - [NavigationFailureSymbol]: true - }, params); - } -} -function isNavigationFailure(error, type) { - return error instanceof Error && NavigationFailureSymbol in error && (type == null || !!(error.type & type)); -} -const BASE_PARAM_PATTERN = "[^/]+?"; -const BASE_PATH_PARSER_OPTIONS = { - sensitive: false, - strict: false, - start: true, - end: true -}; -const REGEX_CHARS_RE = /[.+*?^${}()[\]/\\]/g; -function tokensToParser(segments, extraOptions) { - const options = assign({}, BASE_PATH_PARSER_OPTIONS, extraOptions); - let score = []; - let pattern = options.start ? "^" : ""; - const keys = []; - for (const segment of segments) { - const segmentScores = segment.length ? [] : [90]; - if (options.strict && !segment.length) - pattern += "/"; - for (let tokenIndex = 0; tokenIndex < segment.length; tokenIndex++) { - const token = segment[tokenIndex]; - let subSegmentScore = 40 + (options.sensitive ? 0.25 : 0); - if (token.type === 0) { - if (!tokenIndex) - pattern += "/"; - pattern += token.value.replace(REGEX_CHARS_RE, "\\$&"); - subSegmentScore += 40; - } else if (token.type === 1) { - const { value, repeatable, optional, regexp } = token; - keys.push({ - name: value, - repeatable, - optional - }); - const re3 = regexp ? regexp : BASE_PARAM_PATTERN; - if (re3 !== BASE_PARAM_PATTERN) { - subSegmentScore += 10; - try { - new RegExp(`(${re3})`); - } catch (err) { - throw new Error(`Invalid custom RegExp for param "${value}" (${re3}): ` + err.message); - } - } - let subPattern = repeatable ? `((?:${re3})(?:/(?:${re3}))*)` : `(${re3})`; - if (!tokenIndex) - subPattern = optional && segment.length < 2 ? `(?:/${subPattern})` : "/" + subPattern; - if (optional) - subPattern += "?"; - pattern += subPattern; - subSegmentScore += 20; - if (optional) - subSegmentScore += -8; - if (repeatable) - subSegmentScore += -20; - if (re3 === ".*") - subSegmentScore += -50; - } - segmentScores.push(subSegmentScore); - } - score.push(segmentScores); - } - if (options.strict && options.end) { - const i2 = score.length - 1; - score[i2][score[i2].length - 1] += 0.7000000000000001; - } - if (!options.strict) - pattern += "/?"; - if (options.end) - pattern += "$"; - else if (options.strict) - pattern += "(?:/|$)"; - const re2 = new RegExp(pattern, options.sensitive ? "" : "i"); - function parse(path) { - const match = path.match(re2); - const params = {}; - if (!match) - return null; - for (let i2 = 1; i2 < match.length; i2++) { - const value = match[i2] || ""; - const key = keys[i2 - 1]; - params[key.name] = value && key.repeatable ? value.split("/") : value; - } - return params; - } - function stringify(params) { - let path = ""; - let avoidDuplicatedSlash = false; - for (const segment of segments) { - if (!avoidDuplicatedSlash || !path.endsWith("/")) - path += "/"; - avoidDuplicatedSlash = false; - for (const token of segment) { - if (token.type === 0) { - path += token.value; - } else if (token.type === 1) { - const { value, repeatable, optional } = token; - const param = value in params ? params[value] : ""; - if (Array.isArray(param) && !repeatable) - throw new Error(`Provided param "${value}" is an array but it is not repeatable (* or + modifiers)`); - const text = Array.isArray(param) ? param.join("/") : param; - if (!text) { - if (optional) { - if (segment.length < 2) { - if (path.endsWith("/")) - path = path.slice(0, -1); - else - avoidDuplicatedSlash = true; - } - } else - throw new Error(`Missing required param "${value}"`); - } - path += text; - } - } - } - return path; - } - return { - re: re2, - score, - keys, - parse, - stringify - }; -} -function compareScoreArray(a2, b2) { - let i2 = 0; - while (i2 < a2.length && i2 < b2.length) { - const diff = b2[i2] - a2[i2]; - if (diff) - return diff; - i2++; - } - if (a2.length < b2.length) { - return a2.length === 1 && a2[0] === 40 + 40 ? -1 : 1; - } else if (a2.length > b2.length) { - return b2.length === 1 && b2[0] === 40 + 40 ? 1 : -1; - } - return 0; -} -function comparePathParserScore(a2, b2) { - let i2 = 0; - const aScore = a2.score; - const bScore = b2.score; - while (i2 < aScore.length && i2 < bScore.length) { - const comp = compareScoreArray(aScore[i2], bScore[i2]); - if (comp) - return comp; - i2++; - } - return bScore.length - aScore.length; -} -const ROOT_TOKEN = { - type: 0, - value: "" -}; -const VALID_PARAM_RE = /[a-zA-Z0-9_]/; -function tokenizePath(path) { - if (!path) - return [[]]; - if (path === "/") - return [[ROOT_TOKEN]]; - if (!path.startsWith("/")) { - throw new Error(`Invalid path "${path}"`); - } - function crash(message) { - throw new Error(`ERR (${state})/"${buffer}": ${message}`); - } - let state = 0; - let previousState = state; - const tokens = []; - let segment; - function finalizeSegment() { - if (segment) - tokens.push(segment); - segment = []; - } - let i2 = 0; - let char; - let buffer = ""; - let customRe = ""; - function consumeBuffer() { - if (!buffer) - return; - if (state === 0) { - segment.push({ - type: 0, - value: buffer - }); - } else if (state === 1 || state === 2 || state === 3) { - if (segment.length > 1 && (char === "*" || char === "+")) - crash(`A repeatable param (${buffer}) must be alone in its segment. eg: '/:ids+.`); - segment.push({ - type: 1, - value: buffer, - regexp: customRe, - repeatable: char === "*" || char === "+", - optional: char === "*" || char === "?" - }); - } else { - crash("Invalid state to consume buffer"); - } - buffer = ""; - } - function addCharToBuffer() { - buffer += char; - } - while (i2 < path.length) { - char = path[i2++]; - if (char === "\\" && state !== 2) { - previousState = state; - state = 4; - continue; - } - switch (state) { - case 0: - if (char === "/") { - if (buffer) { - consumeBuffer(); - } - finalizeSegment(); - } else if (char === ":") { - consumeBuffer(); - state = 1; - } else { - addCharToBuffer(); - } - break; - case 4: - addCharToBuffer(); - state = previousState; - break; - case 1: - if (char === "(") { - state = 2; - } else if (VALID_PARAM_RE.test(char)) { - addCharToBuffer(); - } else { - consumeBuffer(); - state = 0; - if (char !== "*" && char !== "?" && char !== "+") - i2--; - } - break; - case 2: - if (char === ")") { - if (customRe[customRe.length - 1] == "\\") - customRe = customRe.slice(0, -1) + char; - else - state = 3; - } else { - customRe += char; - } - break; - case 3: - consumeBuffer(); - state = 0; - if (char !== "*" && char !== "?" && char !== "+") - i2--; - customRe = ""; - break; - default: - crash("Unknown state"); - break; - } - } - if (state === 2) - crash(`Unfinished custom RegExp for param "${buffer}"`); - consumeBuffer(); - finalizeSegment(); - return tokens; -} -function createRouteRecordMatcher(record, parent, options) { - const parser = tokensToParser(tokenizePath(record.path), options); - const matcher = assign(parser, { - record, - parent, - children: [], - alias: [] - }); - if (parent) { - if (!matcher.record.aliasOf === !parent.record.aliasOf) - parent.children.push(matcher); - } - return matcher; -} -function createRouterMatcher(routes, globalOptions) { - const matchers = []; - const matcherMap = new Map(); - globalOptions = mergeOptions({ strict: false, end: true, sensitive: false }, globalOptions); - function getRecordMatcher(name) { - return matcherMap.get(name); - } - function addRoute(record, parent, originalRecord) { - let isRootAdd = !originalRecord; - let mainNormalizedRecord = normalizeRouteRecord(record); - mainNormalizedRecord.aliasOf = originalRecord && originalRecord.record; - const options = mergeOptions(globalOptions, record); - const normalizedRecords = [ - mainNormalizedRecord - ]; - if ("alias" in record) { - const aliases = typeof record.alias === "string" ? [record.alias] : record.alias; - for (const alias of aliases) { - normalizedRecords.push(assign({}, mainNormalizedRecord, { - components: originalRecord ? originalRecord.record.components : mainNormalizedRecord.components, - path: alias, - aliasOf: originalRecord ? originalRecord.record : mainNormalizedRecord - })); - } - } - let matcher; - let originalMatcher; - for (const normalizedRecord of normalizedRecords) { - let { path } = normalizedRecord; - if (parent && path[0] !== "/") { - let parentPath = parent.record.path; - let connectingSlash = parentPath[parentPath.length - 1] === "/" ? "" : "/"; - normalizedRecord.path = parent.record.path + (path && connectingSlash + path); - } - matcher = createRouteRecordMatcher(normalizedRecord, parent, options); - if (originalRecord) { - originalRecord.alias.push(matcher); - } else { - originalMatcher = originalMatcher || matcher; - if (originalMatcher !== matcher) - originalMatcher.alias.push(matcher); - if (isRootAdd && record.name && !isAliasRecord(matcher)) - removeRoute(record.name); - } - if ("children" in mainNormalizedRecord) { - let children = mainNormalizedRecord.children; - for (let i2 = 0; i2 < children.length; i2++) { - addRoute(children[i2], matcher, originalRecord && originalRecord.children[i2]); - } - } - originalRecord = originalRecord || matcher; - insertMatcher(matcher); - } - return originalMatcher ? () => { - removeRoute(originalMatcher); - } : noop; - } - function removeRoute(matcherRef) { - if (isRouteName(matcherRef)) { - const matcher = matcherMap.get(matcherRef); - if (matcher) { - matcherMap.delete(matcherRef); - matchers.splice(matchers.indexOf(matcher), 1); - matcher.children.forEach(removeRoute); - matcher.alias.forEach(removeRoute); - } - } else { - let index = matchers.indexOf(matcherRef); - if (index > -1) { - matchers.splice(index, 1); - if (matcherRef.record.name) - matcherMap.delete(matcherRef.record.name); - matcherRef.children.forEach(removeRoute); - matcherRef.alias.forEach(removeRoute); - } - } - } - function getRoutes2() { - return matchers; - } - function insertMatcher(matcher) { - let i2 = 0; - while (i2 < matchers.length && comparePathParserScore(matcher, matchers[i2]) >= 0) - i2++; - matchers.splice(i2, 0, matcher); - if (matcher.record.name && !isAliasRecord(matcher)) - matcherMap.set(matcher.record.name, matcher); - } - function resolve2(location2, currentLocation) { - let matcher; - let params = {}; - let path; - let name; - if ("name" in location2 && location2.name) { - matcher = matcherMap.get(location2.name); - if (!matcher) - throw createRouterError(1, { - location: location2 - }); - name = matcher.record.name; - params = assign(paramsFromLocation(currentLocation.params, matcher.keys.filter((k2) => !k2.optional).map((k2) => k2.name)), location2.params); - path = matcher.stringify(params); - } else if ("path" in location2) { - path = location2.path; - matcher = matchers.find((m2) => m2.re.test(path)); - if (matcher) { - params = matcher.parse(path); - name = matcher.record.name; - } - } else { - matcher = currentLocation.name ? matcherMap.get(currentLocation.name) : matchers.find((m2) => m2.re.test(currentLocation.path)); - if (!matcher) - throw createRouterError(1, { - location: location2, - currentLocation - }); - name = matcher.record.name; - params = assign({}, currentLocation.params, location2.params); - path = matcher.stringify(params); - } - const matched = []; - let parentMatcher = matcher; - while (parentMatcher) { - matched.unshift(parentMatcher.record); - parentMatcher = parentMatcher.parent; - } - return { - name, - path, - params, - matched, - meta: mergeMetaFields(matched) - }; - } - routes.forEach((route) => addRoute(route)); - return { addRoute, resolve: resolve2, removeRoute, getRoutes: getRoutes2, getRecordMatcher }; -} -function paramsFromLocation(params, keys) { - let newParams = {}; - for (let key of keys) { - if (key in params) - newParams[key] = params[key]; - } - return newParams; -} -function normalizeRouteRecord(record) { - return { - path: record.path, - redirect: record.redirect, - name: record.name, - meta: record.meta || {}, - aliasOf: void 0, - beforeEnter: record.beforeEnter, - props: normalizeRecordProps(record), - children: record.children || [], - instances: {}, - leaveGuards: new Set(), - updateGuards: new Set(), - enterCallbacks: {}, - components: "components" in record ? record.components || {} : { default: record.component } - }; -} -function normalizeRecordProps(record) { - const propsObject = {}; - const props = record.props || false; - if ("component" in record) { - propsObject.default = props; - } else { - for (let name in record.components) - propsObject[name] = typeof props === "boolean" ? props : props[name]; - } - return propsObject; -} -function isAliasRecord(record) { - while (record) { - if (record.record.aliasOf) - return true; - record = record.parent; - } - return false; -} -function mergeMetaFields(matched) { - return matched.reduce((meta, record) => assign(meta, record.meta), {}); -} -function mergeOptions(defaults, partialOptions) { - let options = {}; - for (let key in defaults) { - options[key] = key in partialOptions ? partialOptions[key] : defaults[key]; - } - return options; -} -const HASH_RE = /#/g; -const AMPERSAND_RE = /&/g; -const SLASH_RE = /\//g; -const EQUAL_RE = /=/g; -const IM_RE = /\?/g; -const PLUS_RE = /\+/g; -const ENC_BRACKET_OPEN_RE = /%5B/g; -const ENC_BRACKET_CLOSE_RE = /%5D/g; -const ENC_CARET_RE = /%5E/g; -const ENC_BACKTICK_RE = /%60/g; -const ENC_CURLY_OPEN_RE = /%7B/g; -const ENC_PIPE_RE = /%7C/g; -const ENC_CURLY_CLOSE_RE = /%7D/g; -const ENC_SPACE_RE = /%20/g; -function commonEncode(text) { - return encodeURI("" + text).replace(ENC_PIPE_RE, "|").replace(ENC_BRACKET_OPEN_RE, "[").replace(ENC_BRACKET_CLOSE_RE, "]"); -} -function encodeHash(text) { - return commonEncode(text).replace(ENC_CURLY_OPEN_RE, "{").replace(ENC_CURLY_CLOSE_RE, "}").replace(ENC_CARET_RE, "^"); -} -function encodeQueryValue(text) { - return commonEncode(text).replace(PLUS_RE, "%2B").replace(ENC_SPACE_RE, "+").replace(HASH_RE, "%23").replace(AMPERSAND_RE, "%26").replace(ENC_BACKTICK_RE, "`").replace(ENC_CURLY_OPEN_RE, "{").replace(ENC_CURLY_CLOSE_RE, "}").replace(ENC_CARET_RE, "^"); -} -function encodeQueryKey(text) { - return encodeQueryValue(text).replace(EQUAL_RE, "%3D"); -} -function encodePath(text) { - return commonEncode(text).replace(HASH_RE, "%23").replace(IM_RE, "%3F"); -} -function encodeParam(text) { - return encodePath(text).replace(SLASH_RE, "%2F"); -} -function decode(text) { - try { - return decodeURIComponent("" + text); - } catch (err) { - } - return "" + text; -} -function parseQuery(search) { - const query = {}; - if (search === "" || search === "?") - return query; - const hasLeadingIM = search[0] === "?"; - const searchParams = (hasLeadingIM ? search.slice(1) : search).split("&"); - for (let i2 = 0; i2 < searchParams.length; ++i2) { - const searchParam = searchParams[i2].replace(PLUS_RE, " "); - let eqPos = searchParam.indexOf("="); - let key = decode(eqPos < 0 ? searchParam : searchParam.slice(0, eqPos)); - let value = eqPos < 0 ? null : decode(searchParam.slice(eqPos + 1)); - if (key in query) { - let currentValue = query[key]; - if (!Array.isArray(currentValue)) { - currentValue = query[key] = [currentValue]; - } - currentValue.push(value); - } else { - query[key] = value; - } - } - return query; -} -function stringifyQuery(query) { - let search = ""; - for (let key in query) { - if (search.length) - search += "&"; - const value = query[key]; - key = encodeQueryKey(key); - if (value == null) { - if (value !== void 0) - search += key; - continue; - } - let values = Array.isArray(value) ? value.map((v2) => v2 && encodeQueryValue(v2)) : [value && encodeQueryValue(value)]; - for (let i2 = 0; i2 < values.length; i2++) { - search += (i2 ? "&" : "") + key; - if (values[i2] != null) - search += "=" + values[i2]; - } - } - return search; -} -function normalizeQuery(query) { - const normalizedQuery = {}; - for (let key in query) { - let value = query[key]; - if (value !== void 0) { - normalizedQuery[key] = Array.isArray(value) ? value.map((v2) => v2 == null ? null : "" + v2) : value == null ? value : "" + value; - } - } - return normalizedQuery; -} -function useCallbacks() { - let handlers = []; - function add2(handler) { - handlers.push(handler); - return () => { - const i2 = handlers.indexOf(handler); - if (i2 > -1) - handlers.splice(i2, 1); - }; - } - function reset2() { - handlers = []; - } - return { - add: add2, - list: () => handlers, - reset: reset2 - }; -} -function guardToPromiseFn(guard, to, from, record, name) { - const enterCallbackArray = record && (record.enterCallbacks[name] = record.enterCallbacks[name] || []); - return () => new Promise((resolve2, reject) => { - const next = (valid) => { - if (valid === false) - reject(createRouterError(4, { - from, - to - })); - else if (valid instanceof Error) { - reject(valid); - } else if (isRouteLocation(valid)) { - reject(createRouterError(2, { - from: to, - to: valid - })); - } else { - if (enterCallbackArray && record.enterCallbacks[name] === enterCallbackArray && typeof valid === "function") - enterCallbackArray.push(valid); - resolve2(); - } - }; - const guardReturn = guard.call(record && record.instances[name], to, from, next); - let guardCall = Promise.resolve(guardReturn); - if (guard.length < 3) - guardCall = guardCall.then(next); - guardCall.catch((err) => reject(err)); - }); -} -function extractComponentsGuards(matched, guardType, to, from) { - const guards = []; - for (const record of matched) { - for (const name in record.components) { - let rawComponent = record.components[name]; - if (guardType !== "beforeRouteEnter" && !record.instances[name]) - continue; - if (isRouteComponent(rawComponent)) { - let options = rawComponent.__vccOpts || rawComponent; - const guard = options[guardType]; - guard && guards.push(guardToPromiseFn(guard, to, from, record, name)); - } else { - let componentPromise = rawComponent(); - { - componentPromise = componentPromise.catch(console.error); - } - guards.push(() => componentPromise.then((resolved) => { - if (!resolved) - return Promise.reject(new Error(`Couldn't resolve component "${name}" at "${record.path}"`)); - const resolvedComponent = isESModule(resolved) ? resolved.default : resolved; - record.components[name] = resolvedComponent; - let options = resolvedComponent.__vccOpts || resolvedComponent; - const guard = options[guardType]; - return guard && guardToPromiseFn(guard, to, from, record, name)(); - })); - } - } - } - return guards; -} -function isRouteComponent(component) { - return typeof component === "object" || "displayName" in component || "props" in component || "__vccOpts" in component; -} -function useLink(props) { - const router2 = inject(routerKey); - const currentRoute = inject(routeLocationKey); - const route = computed(() => router2.resolve(unref(props.to))); - const activeRecordIndex = computed(() => { - let { matched } = route.value; - let { length } = matched; - const routeMatched = matched[length - 1]; - let currentMatched = currentRoute.matched; - if (!routeMatched || !currentMatched.length) - return -1; - let index = currentMatched.findIndex(isSameRouteRecord.bind(null, routeMatched)); - if (index > -1) - return index; - let parentRecordPath = getOriginalPath(matched[length - 2]); - return length > 1 && getOriginalPath(routeMatched) === parentRecordPath && currentMatched[currentMatched.length - 1].path !== parentRecordPath ? currentMatched.findIndex(isSameRouteRecord.bind(null, matched[length - 2])) : index; - }); - const isActive = computed(() => activeRecordIndex.value > -1 && includesParams(currentRoute.params, route.value.params)); - const isExactActive = computed(() => activeRecordIndex.value > -1 && activeRecordIndex.value === currentRoute.matched.length - 1 && isSameRouteLocationParams(currentRoute.params, route.value.params)); - function navigate(e2 = {}) { - if (guardEvent(e2)) - return router2[unref(props.replace) ? "replace" : "push"](unref(props.to)); - return Promise.resolve(); - } - return { - route, - href: computed(() => route.value.href), - isActive, - isExactActive, - navigate - }; -} -const RouterLinkImpl = /* @__PURE__ */ defineComponent({ - name: "RouterLink", - props: { - to: { - type: [String, Object], - required: true - }, - replace: Boolean, - activeClass: String, - exactActiveClass: String, - custom: Boolean, - ariaCurrentValue: { - type: String, - default: "page" - } - }, - setup(props, { slots }) { - const link = reactive(useLink(props)); - const { options } = inject(routerKey); - const elClass = computed(() => ({ - [getLinkClass(props.activeClass, options.linkActiveClass, "router-link-active")]: link.isActive, - [getLinkClass(props.exactActiveClass, options.linkExactActiveClass, "router-link-exact-active")]: link.isExactActive - })); - return () => { - const children = slots.default && slots.default(link); - return props.custom ? children : h$1("a", { - "aria-current": link.isExactActive ? props.ariaCurrentValue : null, - href: link.href, - onClick: link.navigate, - class: elClass.value - }, children); - }; - } -}); -const RouterLink = RouterLinkImpl; -function guardEvent(e2) { - if (e2.metaKey || e2.altKey || e2.ctrlKey || e2.shiftKey) - return; - if (e2.defaultPrevented) - return; - if (e2.button !== void 0 && e2.button !== 0) - return; - if (e2.currentTarget && e2.currentTarget.getAttribute) { - const target = e2.currentTarget.getAttribute("target"); - if (/\b_blank\b/i.test(target)) - return; - } - if (e2.preventDefault) - e2.preventDefault(); - return true; -} -function includesParams(outer, inner) { - for (let key in inner) { - let innerValue = inner[key]; - let outerValue = outer[key]; - if (typeof innerValue === "string") { - if (innerValue !== outerValue) - return false; - } else { - if (!Array.isArray(outerValue) || outerValue.length !== innerValue.length || innerValue.some((value, i2) => value !== outerValue[i2])) - return false; - } - } - return true; -} -function getOriginalPath(record) { - return record ? record.aliasOf ? record.aliasOf.path : record.path : ""; -} -const getLinkClass = (propClass, globalClass, defaultClass) => propClass != null ? propClass : globalClass != null ? globalClass : defaultClass; -const RouterViewImpl = /* @__PURE__ */ defineComponent({ - name: "RouterView", - inheritAttrs: false, - props: { - name: { - type: String, - default: "default" - }, - route: Object - }, - setup(props, { attrs, slots }) { - const injectedRoute = inject(routerViewLocationKey); - const routeToDisplay = computed(() => props.route || injectedRoute.value); - const depth = inject(viewDepthKey, 0); - const matchedRouteRef = computed(() => routeToDisplay.value.matched[depth]); - provide(viewDepthKey, depth + 1); - provide(matchedRouteKey, matchedRouteRef); - provide(routerViewLocationKey, routeToDisplay); - const viewRef = ref(); - watch(() => [viewRef.value, matchedRouteRef.value, props.name], ([instance, to, name], [oldInstance, from, oldName]) => { - if (to) { - to.instances[name] = instance; - if (from && from !== to && instance && instance === oldInstance) { - if (!to.leaveGuards.size) { - to.leaveGuards = from.leaveGuards; - } - if (!to.updateGuards.size) { - to.updateGuards = from.updateGuards; - } - } - } - if (instance && to && (!from || !isSameRouteRecord(to, from) || !oldInstance)) { - (to.enterCallbacks[name] || []).forEach((callback) => callback(instance)); - } - }, { flush: "post" }); - return () => { - const route = routeToDisplay.value; - const matchedRoute = matchedRouteRef.value; - const ViewComponent = matchedRoute && matchedRoute.components[props.name]; - const currentName = props.name; - if (!ViewComponent) { - return normalizeSlot(slots.default, { Component: ViewComponent, route }); - } - const routePropsOption = matchedRoute.props[props.name]; - const routeProps = routePropsOption ? routePropsOption === true ? route.params : typeof routePropsOption === "function" ? routePropsOption(route) : routePropsOption : null; - const onVnodeUnmounted = (vnode) => { - if (vnode.component.isUnmounted) { - matchedRoute.instances[currentName] = null; - } - }; - const component = h$1(ViewComponent, assign({}, routeProps, attrs, { - onVnodeUnmounted, - ref: viewRef - })); - return normalizeSlot(slots.default, { Component: component, route }) || component; - }; - } -}); -function normalizeSlot(slot, data) { - if (!slot) - return null; - const slotContent = slot(data); - return slotContent.length === 1 ? slotContent[0] : slotContent; -} -const RouterView = RouterViewImpl; -function createRouter(options) { - const matcher = createRouterMatcher(options.routes, options); - let parseQuery$1 = options.parseQuery || parseQuery; - let stringifyQuery$1 = options.stringifyQuery || stringifyQuery; - let routerHistory = options.history; - const beforeGuards = useCallbacks(); - const beforeResolveGuards = useCallbacks(); - const afterGuards = useCallbacks(); - const currentRoute = shallowRef(START_LOCATION_NORMALIZED); - let pendingLocation = START_LOCATION_NORMALIZED; - if (isBrowser && options.scrollBehavior && "scrollRestoration" in history) { - history.scrollRestoration = "manual"; - } - const normalizeParams = applyToParams.bind(null, (paramValue) => "" + paramValue); - const encodeParams = applyToParams.bind(null, encodeParam); - const decodeParams = applyToParams.bind(null, decode); - function addRoute(parentOrRoute, route) { - let parent; - let record; - if (isRouteName(parentOrRoute)) { - parent = matcher.getRecordMatcher(parentOrRoute); - record = route; - } else { - record = parentOrRoute; - } - return matcher.addRoute(record, parent); - } - function removeRoute(name) { - let recordMatcher = matcher.getRecordMatcher(name); - if (recordMatcher) { - matcher.removeRoute(recordMatcher); - } - } - function getRoutes2() { - return matcher.getRoutes().map((routeMatcher) => routeMatcher.record); - } - function hasRoute(name) { - return !!matcher.getRecordMatcher(name); - } - function resolve2(rawLocation, currentLocation) { - currentLocation = assign({}, currentLocation || currentRoute.value); - if (typeof rawLocation === "string") { - let locationNormalized = parseURL(parseQuery$1, rawLocation, currentLocation.path); - let matchedRoute2 = matcher.resolve({ path: locationNormalized.path }, currentLocation); - let href2 = routerHistory.createHref(locationNormalized.fullPath); - return assign(locationNormalized, matchedRoute2, { - params: decodeParams(matchedRoute2.params), - hash: decode(locationNormalized.hash), - redirectedFrom: void 0, - href: href2 - }); - } - let matcherLocation; - if ("path" in rawLocation) { - matcherLocation = assign({}, rawLocation, { - path: parseURL(parseQuery$1, rawLocation.path, currentLocation.path).path - }); - } else { - matcherLocation = assign({}, rawLocation, { - params: encodeParams(rawLocation.params) - }); - currentLocation.params = encodeParams(currentLocation.params); - } - let matchedRoute = matcher.resolve(matcherLocation, currentLocation); - const hash = rawLocation.hash || ""; - matchedRoute.params = normalizeParams(decodeParams(matchedRoute.params)); - const fullPath = stringifyURL(stringifyQuery$1, assign({}, rawLocation, { - hash: encodeHash(hash), - path: matchedRoute.path - })); - let href = routerHistory.createHref(fullPath); - return assign({ - fullPath, - hash, - query: stringifyQuery$1 === stringifyQuery ? normalizeQuery(rawLocation.query) : rawLocation.query - }, matchedRoute, { - redirectedFrom: void 0, - href - }); - } - function locationAsObject(to) { - return typeof to === "string" ? parseURL(parseQuery$1, to, currentRoute.value.path) : assign({}, to); - } - function checkCanceledNavigation(to, from) { - if (pendingLocation !== to) { - return createRouterError(8, { - from, - to - }); - } - } - function push(to) { - return pushWithRedirect(to); - } - function replace(to) { - return push(assign(locationAsObject(to), { replace: true })); - } - function handleRedirectRecord(to) { - const lastMatched = to.matched[to.matched.length - 1]; - if (lastMatched && lastMatched.redirect) { - const { redirect } = lastMatched; - let newTargetLocation = typeof redirect === "function" ? redirect(to) : redirect; - if (typeof newTargetLocation === "string") { - newTargetLocation = newTargetLocation.indexOf("?") > -1 || newTargetLocation.indexOf("#") > -1 ? newTargetLocation = locationAsObject(newTargetLocation) : { path: newTargetLocation }; - } - return assign({ - query: to.query, - hash: to.hash, - params: to.params - }, newTargetLocation); - } - } - function pushWithRedirect(to, redirectedFrom) { - const targetLocation = pendingLocation = resolve2(to); - const from = currentRoute.value; - const data = to.state; - const force = to.force; - const replace2 = to.replace === true; - const shouldRedirect = handleRedirectRecord(targetLocation); - if (shouldRedirect) - return pushWithRedirect(assign(locationAsObject(shouldRedirect), { - state: data, - force, - replace: replace2 - }), redirectedFrom || targetLocation); - const toLocation = targetLocation; - toLocation.redirectedFrom = redirectedFrom; - let failure; - if (!force && isSameRouteLocation(stringifyQuery$1, from, targetLocation)) { - failure = createRouterError(16, { to: toLocation, from }); - handleScroll(from, from, true, false); - } - return (failure ? Promise.resolve(failure) : navigate(toLocation, from)).catch((error) => isNavigationFailure(error) ? error : triggerError(error)).then((failure2) => { - if (failure2) { - if (isNavigationFailure(failure2, 2)) { - return pushWithRedirect(assign(locationAsObject(failure2.to), { - state: data, - force, - replace: replace2 - }), redirectedFrom || toLocation); - } - } else { - failure2 = finalizeNavigation(toLocation, from, true, replace2, data); - } - triggerAfterEach(toLocation, from, failure2); - return failure2; - }); - } - function checkCanceledNavigationAndReject(to, from) { - const error = checkCanceledNavigation(to, from); - return error ? Promise.reject(error) : Promise.resolve(); - } - function navigate(to, from) { - let guards; - const [leavingRecords, updatingRecords, enteringRecords] = extractChangingRecords(to, from); - guards = extractComponentsGuards(leavingRecords.reverse(), "beforeRouteLeave", to, from); - for (const record of leavingRecords) { - record.leaveGuards.forEach((guard) => { - guards.push(guardToPromiseFn(guard, to, from)); - }); - } - const canceledNavigationCheck = checkCanceledNavigationAndReject.bind(null, to, from); - guards.push(canceledNavigationCheck); - return runGuardQueue(guards).then(() => { - guards = []; - for (const guard of beforeGuards.list()) { - guards.push(guardToPromiseFn(guard, to, from)); - } - guards.push(canceledNavigationCheck); - return runGuardQueue(guards); - }).then(() => { - guards = extractComponentsGuards(updatingRecords, "beforeRouteUpdate", to, from); - for (const record of updatingRecords) { - record.updateGuards.forEach((guard) => { - guards.push(guardToPromiseFn(guard, to, from)); - }); - } - guards.push(canceledNavigationCheck); - return runGuardQueue(guards); - }).then(() => { - guards = []; - for (const record of to.matched) { - if (record.beforeEnter && from.matched.indexOf(record) < 0) { - if (Array.isArray(record.beforeEnter)) { - for (const beforeEnter of record.beforeEnter) - guards.push(guardToPromiseFn(beforeEnter, to, from)); - } else { - guards.push(guardToPromiseFn(record.beforeEnter, to, from)); - } - } - } - guards.push(canceledNavigationCheck); - return runGuardQueue(guards); - }).then(() => { - to.matched.forEach((record) => record.enterCallbacks = {}); - guards = extractComponentsGuards(enteringRecords, "beforeRouteEnter", to, from); - guards.push(canceledNavigationCheck); - return runGuardQueue(guards); - }).then(() => { - guards = []; - for (const guard of beforeResolveGuards.list()) { - guards.push(guardToPromiseFn(guard, to, from)); - } - guards.push(canceledNavigationCheck); - return runGuardQueue(guards); - }).catch((err) => isNavigationFailure(err, 8) ? err : Promise.reject(err)); - } - function triggerAfterEach(to, from, failure) { - for (const guard of afterGuards.list()) - guard(to, from, failure); - } - function finalizeNavigation(toLocation, from, isPush, replace2, data) { - const error = checkCanceledNavigation(toLocation, from); - if (error) - return error; - const isFirstNavigation = from === START_LOCATION_NORMALIZED; - const state = !isBrowser ? {} : history.state; - if (isPush) { - if (replace2 || isFirstNavigation) - routerHistory.replace(toLocation.fullPath, assign({ - scroll: isFirstNavigation && state && state.scroll - }, data)); - else - routerHistory.push(toLocation.fullPath, data); - } - currentRoute.value = toLocation; - handleScroll(toLocation, from, isPush, isFirstNavigation); - markAsReady(); - } - let removeHistoryListener; - function setupListeners() { - removeHistoryListener = routerHistory.listen((to, _from, info) => { - let toLocation = resolve2(to); - const shouldRedirect = handleRedirectRecord(toLocation); - if (shouldRedirect) { - pushWithRedirect(assign(shouldRedirect, { replace: true }), toLocation).catch(noop); - return; - } - pendingLocation = toLocation; - const from = currentRoute.value; - if (isBrowser) { - saveScrollPosition(getScrollKey(from.fullPath, info.delta), computeScrollPosition()); - } - navigate(toLocation, from).catch((error) => { - if (isNavigationFailure(error, 4 | 8)) { - return error; - } - if (isNavigationFailure(error, 2)) { - pushWithRedirect(error.to, toLocation).catch(noop); - return Promise.reject(); - } - if (info.delta) - routerHistory.go(-info.delta, false); - return triggerError(error); - }).then((failure) => { - failure = failure || finalizeNavigation(toLocation, from, false); - if (failure && info.delta) - routerHistory.go(-info.delta, false); - triggerAfterEach(toLocation, from, failure); - }).catch(noop); - }); - } - let readyHandlers = useCallbacks(); - let errorHandlers = useCallbacks(); - let ready; - function triggerError(error) { - markAsReady(error); - errorHandlers.list().forEach((handler) => handler(error)); - return Promise.reject(error); - } - function isReady() { - if (ready && currentRoute.value !== START_LOCATION_NORMALIZED) - return Promise.resolve(); - return new Promise((resolve3, reject) => { - readyHandlers.add([resolve3, reject]); - }); - } - function markAsReady(err) { - if (ready) - return; - ready = true; - setupListeners(); - readyHandlers.list().forEach(([resolve3, reject]) => err ? reject(err) : resolve3()); - readyHandlers.reset(); - } - function handleScroll(to, from, isPush, isFirstNavigation) { - const { scrollBehavior } = options; - if (!isBrowser || !scrollBehavior) - return Promise.resolve(); - let scrollPosition = !isPush && getSavedScrollPosition(getScrollKey(to.fullPath, 0)) || (isFirstNavigation || !isPush) && history.state && history.state.scroll || null; - return nextTick().then(() => scrollBehavior(to, from, scrollPosition)).then((position) => position && scrollToPosition(position)).catch(triggerError); - } - const go = (delta) => routerHistory.go(delta); - let started; - const installedApps = new Set(); - const router2 = { - currentRoute, - addRoute, - removeRoute, - hasRoute, - getRoutes: getRoutes2, - resolve: resolve2, - options, - push, - replace, - go, - back: () => go(-1), - forward: () => go(1), - beforeEach: beforeGuards.add, - beforeResolve: beforeResolveGuards.add, - afterEach: afterGuards.add, - onError: errorHandlers.add, - isReady, - install(app) { - const router3 = this; - app.component("RouterLink", RouterLink); - app.component("RouterView", RouterView); - app.config.globalProperties.$router = router3; - Object.defineProperty(app.config.globalProperties, "$route", { - get: () => unref(currentRoute) - }); - if (isBrowser && !started && currentRoute.value === START_LOCATION_NORMALIZED) { - started = true; - push(routerHistory.location).catch((err) => { - }); - } - const reactiveRoute = {}; - for (let key in START_LOCATION_NORMALIZED) { - reactiveRoute[key] = computed(() => currentRoute.value[key]); - } - app.provide(routerKey, router3); - app.provide(routeLocationKey, reactive(reactiveRoute)); - app.provide(routerViewLocationKey, currentRoute); - let unmountApp = app.unmount; - installedApps.add(app); - app.unmount = function() { - installedApps.delete(app); - if (installedApps.size < 1) { - removeHistoryListener(); - currentRoute.value = START_LOCATION_NORMALIZED; - started = false; - ready = false; - } - unmountApp(); - }; - } - }; - return router2; -} -function runGuardQueue(guards) { - return guards.reduce((promise, guard) => promise.then(() => guard()), Promise.resolve()); -} -function extractChangingRecords(to, from) { - const leavingRecords = []; - const updatingRecords = []; - const enteringRecords = []; - const len = Math.max(from.matched.length, to.matched.length); - for (let i2 = 0; i2 < len; i2++) { - const recordFrom = from.matched[i2]; - if (recordFrom) { - if (to.matched.find((record) => isSameRouteRecord(record, recordFrom))) - updatingRecords.push(recordFrom); - else - leavingRecords.push(recordFrom); - } - const recordTo = to.matched[i2]; - if (recordTo) { - if (!from.matched.find((record) => isSameRouteRecord(record, recordTo))) { - enteringRecords.push(recordTo); - } - } - } - return [leavingRecords, updatingRecords, enteringRecords]; -} -const ua = navigator.userAgent.toLowerCase(); -const isMobile = /ios|iphone|ipod|ipad|android/.test(ua); -function decamelize(str, sep = "-") { - return str.replace(/([a-z\d])([A-Z])/g, "$1" + sep + "$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g, "$1" + sep + "$2").toLowerCase(); -} -let queue = []; -let isIframeReady = false; -function iframeReady(callback) { - if (isIframeReady) { - callback(); - } else { - queue.push(callback); - } -} -if (window.top === window) { - window.addEventListener("message", (event) => { - if (event.data.type === "iframeReady") { - isIframeReady = true; - queue.forEach((callback) => callback()); - queue = []; - } - }); -} else { - window.top.postMessage({ type: "iframeReady" }, "*"); -} -function getCurrentDir() { - var _a2, _b; - const router2 = window.vueRouter; - const { path } = router2.currentRoute.value; - if ((_a2 = config$1.site.simulator) == null ? void 0 : _a2.routeMapper) { - return (_b = config$1.site.simulator) == null ? void 0 : _b.routeMapper(path); - } - return path; -} -function syncPathToParent() { - window.top.postMessage({ - type: "replacePath", - value: getCurrentDir() - }, "*"); -} -function syncPathToChild() { - const iframe = document.querySelector("iframe"); - if (iframe) { - iframeReady(() => { - iframe.contentWindow.postMessage({ - type: "replacePath", - value: getCurrentDir() - }, "*"); - }); - } -} -function listenToSyncPath(router2) { - window.addEventListener("message", (event) => { - var _a2, _b; - if (((_a2 = event.data) == null ? void 0 : _a2.type) !== "replacePath") { - return; - } - const path = ((_b = event.data) == null ? void 0 : _b.value) || ""; - if (router2.currentRoute.value.path !== path) { - router2.replace(path).catch(() => { - }); - } - }); -} -if (isMobile) { - location.replace("mobile.html" + location.hash); -} -const { locales: locales$1, defaultLang: defaultLang$1 } = config$1.site; -setDefaultLang(defaultLang$1); -function parseName(name) { - if (name.indexOf("_") !== -1) { - const pairs = name.split("_"); - const component = pairs.shift(); - return { - component: `${decamelize(component)}`, - lang: pairs.join("-") - }; - } - return { - component: `${decamelize(name)}`, - lang: "" - }; -} -function getLangFromRoute$1(route) { - const lang = route.path.split("/")[1]; - const langs = Object.keys(locales$1); - if (langs.indexOf(lang) !== -1) { - return lang; - } - return getLang(); -} -function getRoutes$1() { - const routes = []; - const names = Object.keys(documents); - if (locales$1) { - routes.push({ - name: "notFound", - path: "/:path(.*)+", - redirect: (route) => ({ - name: getLangFromRoute$1(route) - }) - }); - } else { - routes.push({ - name: "notFound", - path: "/:path(.*)+", - redirect: { - name: "home" - } - }); - } - function addHomeRoute(Home, lang) { - routes.push({ - name: lang || "home", - path: `/${lang || ""}`, - component: Home, - meta: { lang } - }); - } - names.forEach((name) => { - const { component, lang } = parseName(name); - if (component === "home") { - addHomeRoute(documents[name], lang); - } - if (lang) { - routes.push({ - name: `${lang}/${component}`, - path: `/${lang}/${component}`, - component: documents[name], - meta: { - lang, - name: component - } - }); - } else { - routes.push({ - name: `${component}`, - path: `/${component}`, - component: documents[name], - meta: { - name: component - } - }); - } - }); - return routes; -} -const router$1 = createRouter({ - history: createWebHashHistory(), - routes: getRoutes$1(), - scrollBehavior(to) { - if (to.hash) { - return { el: to.hash }; - } - return { top: 0 }; - } -}); -router$1.afterEach(() => { - nextTick(syncPathToChild); -}); -if (((_a = config$1.site.simulator) == null ? void 0 : _a.syncPathFromSimulator) !== false) { - listenToSyncPath(router$1); -} -window.vueRouter = router$1; -window.app = createApp(App$1).use(router$1).component(DemoPlayground.name, DemoPlayground); -setTimeout(() => { - window.app.mount("#app"); -}, 0); -var DemoBlock_vue_vue_type_style_index_0_lang = ".van-doc-demo-block__title{color:rgba(69,90,100,.6);font-size:14px;font-weight:400;line-height:16px;margin:0;padding:32px 16px 16px}.van-doc-demo-block__card{border-radius:8px;margin:12px 12px 0;overflow:hidden}.van-doc-demo-block__title+.van-doc-demo-block__card{margin-top:0}.van-doc-demo-block:first-of-type .van-doc-demo-block__title{padding-top:20px}"; -const _sfc_main$6 = { - name: "DemoBlock", - props: { - card: Boolean, - title: String - } -}; -const _hoisted_1$4 = { class: "van-doc-demo-block" }; -const _hoisted_2$4 = { - key: 0, - class: "van-doc-demo-block__title" -}; -const _hoisted_3$4 = { - key: 1, - class: "van-doc-demo-block__card" -}; -function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) { - return openBlock(), createElementBlock("div", _hoisted_1$4, [ - $props.title ? (openBlock(), createElementBlock("h2", _hoisted_2$4, toDisplayString($props.title), 1)) : createCommentVNode("v-if", true), - $props.card ? (openBlock(), createElementBlock("div", _hoisted_3$4, [ - renderSlot(_ctx.$slots, "default") - ])) : renderSlot(_ctx.$slots, "default", { key: 2 }) - ]); -} -var DemoBlock = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]); -var DemoSection_vue_vue_type_style_index_0_lang = ".van-doc-demo-section{box-sizing:border-box;min-height:calc(100vh - 56px);padding-bottom:20px}"; -const _sfc_main$5 = { - name: "DemoSection", - computed: { - demoName() { - const { meta } = this.$route || {}; - if (meta && meta.name) { - return `demo-${decamelize(meta.name)}`; - } - return ""; - } - } -}; -function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) { - return openBlock(), createElementBlock("section", { - class: normalizeClass(["van-doc-demo-section", $options.demoName]) - }, [ - renderSlot(_ctx.$slots, "default") - ], 2); -} -var DemoSection = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]); -var packageStyle = ""; -const demos = {}; -const config = { - "name": "vant-weapp", - "build": { - "srcDir": "packages", - "site": { - "publicPath": "/vant-weapp/vite/" - } - }, - "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/mobile.html?weapp=1", - "syncPathFromSimulator": false - }, - "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": "ad6b5732c36321f2dafed737ac2da92f" - }, - "nav": [] - } -}; -const _sfc_main$4 = {}; -const _hoisted_1$3 = { viewBox: "0 0 1024 1024" }; -const _hoisted_2$3 = /* @__PURE__ */ createBaseVNode("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); -const _hoisted_3$3 = /* @__PURE__ */ createBaseVNode("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); -const _hoisted_4 = [ - _hoisted_2$3, - _hoisted_3$3 -]; -function _sfc_render$4(_ctx, _cache) { - return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_4); -} -var ArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]); -var DemoHomeNav_vue_vue_type_style_index_0_lang = ".demo-home-nav__title{color:rgba(69,90,100,.6);font-size:14px;margin:24px 0 8px 16px}.demo-home-nav__block{background:#f7f8fa;border-radius:99px;color:#323233;display:flex;font-size:14px;font-weight:600;line-height:40px;margin:0 0 12px;padding-left:20px;position:relative;transition:background .3s}.demo-home-nav__block:hover{background:#eef0f4}.demo-home-nav__block:active{background:#e4e8ee}.demo-home-nav__icon{height:16px;margin-top:-8px;position:absolute;right:16px;top:50%;width:16px}"; -const _sfc_main$3 = { - components: { - ArrowRight - }, - props: { - lang: String, - group: Object - }, - data() { - return { - active: [] - }; - }, - computed: { - base() { - return this.lang ? `/${this.lang}` : ""; - } - } -}; -const _hoisted_1$2 = { class: "demo-home-nav" }; -const _hoisted_2$2 = { class: "demo-home-nav__title" }; -const _hoisted_3$2 = { class: "demo-home-nav__group" }; -function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) { - const _component_arrow_right = resolveComponent("arrow-right"); - const _component_router_link = resolveComponent("router-link"); - return openBlock(), createElementBlock("div", _hoisted_1$2, [ - createBaseVNode("div", _hoisted_2$2, toDisplayString($props.group.title), 1), - createBaseVNode("div", _hoisted_3$2, [ - (openBlock(true), createElementBlock(Fragment, null, renderList($props.group.items, (navItem) => { - return openBlock(), createBlock(_component_router_link, { - class: "demo-home-nav__block", - key: navItem.path, - to: `${$options.base}/${navItem.path}` - }, { - default: withCtx(() => [ - createTextVNode(toDisplayString(navItem.title) + " ", 1), - createVNode(_component_arrow_right, { class: "demo-home-nav__icon" }) - ]), - _: 2 - }, 1032, ["to"]); - }), 128)) - ]) - ]); -} -var DemoHomeNav = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]); -var DemoHome_vue_vue_type_style_index_0_lang = ".demo-home{background:#fff;box-sizing:border-box;min-height:100vh;padding:46px 20px 20px;width:100%}.demo-home__desc,.demo-home__title{font-weight:400;line-height:1;padding-left:16px;-webkit-user-select:none;user-select:none}.demo-home__title{font-size:32px;margin:0 0 16px}.demo-home__title img,.demo-home__title span{display:inline-block;vertical-align:middle}.demo-home__title img{width:32px}.demo-home__title span{margin-left:16px}.demo-home__title--small{font-size:24px}.demo-home__desc{color:rgba(69,90,100,.6);font-size:14px;margin:0 0 40px}"; -const _sfc_main$2 = { - components: { - DemoHomeNav - }, - computed: { - lang() { - const { lang } = this.$route.meta; - return lang; - }, - config() { - const { locales: locales2 } = config.site; - if (locales2) { - return locales2[this.lang]; - } - return config.site; - }, - smallTitle() { - return this.config.title.length >= 8; - } - } -}; -const _hoisted_1$1 = { class: "demo-home" }; -const _hoisted_2$1 = ["src"]; -const _hoisted_3$1 = { - key: 0, - class: "demo-home__desc" -}; -function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { - const _component_demo_home_nav = resolveComponent("demo-home-nav"); - return openBlock(), createElementBlock("div", _hoisted_1$1, [ - createBaseVNode("h1", { - class: normalizeClass(["demo-home__title", { "demo-home__title--small": $options.smallTitle }]) - }, [ - createBaseVNode("img", { - src: $options.config.logo - }, null, 8, _hoisted_2$1), - createBaseVNode("span", null, toDisplayString($options.config.title), 1) - ], 2), - $options.config.description ? (openBlock(), createElementBlock("h2", _hoisted_3$1, toDisplayString($options.config.description), 1)) : createCommentVNode("v-if", true), - (openBlock(true), createElementBlock(Fragment, null, renderList($options.config.nav, (group, index) => { - return openBlock(), createBlock(_component_demo_home_nav, { - key: index, - lang: $options.lang, - group - }, null, 8, ["lang", "group"]); - }), 128)) - ]); -} -var DemoHome = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]); -const { locales, defaultLang } = config.site; -setDefaultLang(defaultLang); -function getLangFromRoute(route) { - const lang = route.path.split("/")[1]; - const langs = Object.keys(locales); - if (langs.indexOf(lang) !== -1) { - return lang; - } - return getLang(); -} -function getRoutes() { - const routes = []; - const names = Object.keys(demos); - const langs = locales ? Object.keys(locales) : []; - if (langs.length) { - routes.push({ - name: "NotFound", - path: "/:path(.*)+", - redirect: (route) => ({ - name: getLangFromRoute(route) - }) - }); - langs.forEach((lang) => { - routes.push({ - name: lang, - path: `/${lang}`, - component: DemoHome, - meta: { lang } - }); - }); - } else { - routes.push({ - name: "NotFound", - path: "/:path(.*)+", - redirect: { - name: "home" - } - }); - routes.push({ - name: "home", - path: "/", - component: DemoHome - }); - } - names.forEach((name) => { - const component = decamelize(name); - if (langs.length) { - langs.forEach((lang) => { - routes.push({ - name: `${lang}/${component}`, - path: `/${lang}/${component}`, - component: demos[name], - meta: { - name, - lang - } - }); - }); - } else { - routes.push({ - name: component, - path: `/${component}`, - component: demos[name], - meta: { - name - } - }); - } - }); - return routes; -} -const router = createRouter({ - history: createWebHashHistory(), - routes: getRoutes(), - scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 } -}); -watch(router.currentRoute, () => { - if (!router.currentRoute.value.redirectedFrom) { - nextTick(syncPathToParent); - } -}); -listenToSyncPath(router); -window.vueRouter = router; -var DemoNav_vue_vue_type_style_index_0_lang = ".demo-nav{align-items:center;background-color:#fff;display:flex;height:56px;justify-content:center;position:relative}.demo-nav__title{font-size:17px;font-weight:600;text-transform:capitalize}.demo-nav__back{cursor:pointer;height:24px;left:16px;position:absolute;top:16px;width:24px}"; -const _sfc_main$1 = { - 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 } = this.$route.meta || {}; - return name ? name.replace(/-/g, "") : ""; - } - }, - methods: { - onBack() { - if (history.length > 1) { - history.back(); - } else { - this.$router.replace("/"); - } - } - } -}; -const _hoisted_1 = { class: "demo-nav" }; -const _hoisted_2 = { class: "demo-nav__title" }; -const _hoisted_3 = ["d"]; -function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { - return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [ - createBaseVNode("div", _hoisted_2, toDisplayString($options.title), 1), - (openBlock(), createElementBlock("svg", { - class: "demo-nav__back", - viewBox: "0 0 1000 1000", - onClick: _cache[0] || (_cache[0] = (...args) => $options.onBack && $options.onBack(...args)) - }, [ - createBaseVNode("path", { - fill: "#969799", - "fill-rule": "evenodd", - d: $data.path - }, null, 8, _hoisted_3) - ])) - ], 512)), [ - [vShow, $options.title] - ]); -} -var DemoNav = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]); -var App_vue_vue_type_style_index_0_lang = '@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;color:#323233;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;font-size:16px;min-width:1100px;overflow-x:auto}body,p{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{margin:0 auto;width:1680px}}body{min-width:100vw}::-webkit-scrollbar{background:transparent;width:0}'; -const _sfc_main = { - components: { DemoNav } -}; -function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { - const _component_demo_nav = resolveComponent("demo-nav"); - const _component_demo_section = resolveComponent("demo-section"); - const _component_router_view = resolveComponent("router-view"); - return openBlock(), createElementBlock(Fragment, null, [ - createVNode(_component_demo_nav), - createVNode(_component_router_view, null, { - default: withCtx(({ Component }) => [ - (openBlock(), createBlock(KeepAlive, null, [ - createVNode(_component_demo_section, null, { - default: withCtx(() => [ - (openBlock(), createBlock(resolveDynamicComponent(Component))) - ]), - _: 2 - }, 1024) - ], 1024)) - ]), - _: 1 - }) - ], 64); -} -var App = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); -(function() { - if (typeof window === "undefined") { - return; - } - var eventTarget; - var supportTouch = "ontouchstart" in window; - if (!document.createTouch) { - document.createTouch = function(view, target, identifier, pageX, pageY, screenX, screenY) { - return new Touch(target, identifier, { - pageX, - pageY, - screenX, - screenY, - clientX: pageX - window.pageXOffset, - clientY: pageY - window.pageYOffset - }, 0, 0); - }; - } - if (!document.createTouchList) { - document.createTouchList = function() { - var touchList = TouchList(); - for (var i2 = 0; i2 < arguments.length; i2++) { - touchList[i2] = arguments[i2]; - } - touchList.length = arguments.length; - return touchList; - }; - } - if (!Element.prototype.matches) { - Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; - } - if (!Element.prototype.closest) { - Element.prototype.closest = function(s2) { - var el = this; - do { - if (el.matches(s2)) - return el; - el = el.parentElement || el.parentNode; - } while (el !== null && el.nodeType === 1); - return null; - }; - } - var Touch = function Touch2(target, identifier, pos, deltaX, deltaY) { - deltaX = deltaX || 0; - deltaY = deltaY || 0; - this.identifier = identifier; - this.target = target; - this.clientX = pos.clientX + deltaX; - this.clientY = pos.clientY + deltaY; - this.screenX = pos.screenX + deltaX; - this.screenY = pos.screenY + deltaY; - this.pageX = pos.pageX + deltaX; - this.pageY = pos.pageY + deltaY; - }; - function TouchList() { - var touchList = []; - touchList["item"] = function(index) { - return this[index] || null; - }; - touchList["identifiedTouch"] = function(id) { - return this[id + 1] || null; - }; - return touchList; - } - var initiated = false; - function onMouse(touchType) { - return function(ev) { - if (ev.type === "mousedown") { - initiated = true; - } - if (ev.type === "mouseup") { - initiated = false; - } - if (ev.type === "mousemove" && !initiated) { - return; - } - if (ev.type === "mousedown" || !eventTarget || eventTarget && !eventTarget.dispatchEvent) { - eventTarget = ev.target; - } - if (eventTarget.closest("[data-no-touch-simulate]") == null) { - triggerTouch(touchType, ev); - } - if (ev.type === "mouseup") { - eventTarget = null; - } - }; - } - function triggerTouch(eventName, mouseEv) { - var touchEvent = document.createEvent("Event"); - touchEvent.initEvent(eventName, true, true); - touchEvent.altKey = mouseEv.altKey; - touchEvent.ctrlKey = mouseEv.ctrlKey; - touchEvent.metaKey = mouseEv.metaKey; - touchEvent.shiftKey = mouseEv.shiftKey; - touchEvent.touches = getActiveTouches(mouseEv); - touchEvent.targetTouches = getActiveTouches(mouseEv); - touchEvent.changedTouches = createTouchList(mouseEv); - eventTarget.dispatchEvent(touchEvent); - } - function createTouchList(mouseEv) { - var touchList = TouchList(); - touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0)); - return touchList; - } - function getActiveTouches(mouseEv) { - if (mouseEv.type === "mouseup") { - return TouchList(); - } - return createTouchList(mouseEv); - } - function TouchEmulator() { - window.addEventListener("mousedown", onMouse("touchstart"), true); - window.addEventListener("mousemove", onMouse("touchmove"), true); - window.addEventListener("mouseup", onMouse("touchend"), true); - } - TouchEmulator["multiTouchOffset"] = 75; - if (!supportTouch) { - new TouchEmulator(); - } -})(); -window.app = createApp(App).use(router).component(DemoBlock.name, DemoBlock).component(DemoSection.name, DemoSection); -setTimeout(() => { - window.app.mount("#app"); -}, 0); diff --git a/vite/assets/main.e6aeb5ab.css b/vite/assets/main.e6aeb5ab.css deleted file mode 100644 index ac7afe9c..00000000 --- a/vite/assets/main.e6aeb5ab.css +++ /dev/null @@ -1 +0,0 @@ -.van-doc-nav{background-color:#fff;box-shadow:0 8px 12px #ebedf0;left:0;max-width:220px;min-width:220px;overflow-y:scroll;padding:24px 0;position:fixed;z-index:1}@media (min-width:1680px){.van-doc-nav{left:50%;margin-left:-840px}}.van-doc-nav::-webkit-scrollbar{background-color:initial;height:6px;width:6px}.van-doc-nav::-webkit-scrollbar-thumb{background-color:initial;border-radius:6px}.van-doc-nav:hover::-webkit-scrollbar-thumb{background-color:#455a6433}.van-doc-nav__group{margin-bottom:16px;padding-left:6px}.van-doc-nav__title{color:#455a64;font-size:15px;font-weight:600;line-height:28px;padding:8px 0 8px 24px}.van-doc-nav__item a{color:#455a64;display:block;font-size:14px;line-height:20px;margin:8px 0;padding:8px 0 8px 24px;transition:color .2s}.van-doc-nav__item a.active,.van-doc-nav__item a:hover{color:#4fc08d}.van-doc-nav__item a.active{background-color:#ebfff0;border-radius:999px;font-weight:600}.van-doc-nav__item a span{font-size:13px}@media (max-width:1300px){.van-doc-nav__item a{font-size:13px}.van-doc-nav__item:active{font-size:14px}}:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Key,.DocSearch-Button-KeySeparator,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-webkit-input-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0}}.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:fade-in .1s ease-in forwards;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"\bb "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:1px;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}#docsearch{display:inline-block;vertical-align:middle}.DocSearch-Button{background:#f7f8fa;height:32px}.DocSearch-Button:hover{box-shadow:none}.DocSearch-Search-Icon{height:18px;width:18px}.DocSearch-Button-Key{font-size:12px}.van-doc-header{background-color:#001938;-webkit-user-select:none;user-select:none;width:100%}.van-doc-header__top{align-items:center;display:flex;height:64px;padding:0 24px}.van-doc-header__top-nav{flex:1;font-size:0;text-align:right}.van-doc-header__top-nav>li{display:inline-block;position:relative;vertical-align:middle}.van-doc-header__top-nav-item{margin-left:16px}.van-doc-header__top-nav-title{display:block;font-size:15px}.van-doc-header__cube{background:#f7f8fa;border:1px solid hsla(0,0%,100%,.7);border-radius:20px;color:#001938;cursor:pointer;display:block;font-size:14px;line-height:30px;padding:0 12px;position:relative;text-align:center;transition:.3s ease-in-out}.van-doc-header__version{padding-right:20px}.van-doc-header__version:after{border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:1px;color:#001938;content:"";height:5px;position:absolute;right:9px;top:10px;transform:rotate(-45deg);width:5px}.van-doc-header__version-pop{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #ebedf0;color:#333;left:0;line-height:36px;overflow:hidden;position:absolute;text-align:left;top:34px;transform-origin:top;transition:.2s cubic-bezier(.215,.61,.355,1);width:100%;z-index:99}.van-doc-header__version-pop-item{padding-left:12px;transition:.2s}.van-doc-header__version-pop-item:hover{background-color:#f7f8fa;color:#1989fa}.van-doc-header__logo{display:block}.van-doc-header__logo img,.van-doc-header__logo span{display:inline-block;vertical-align:middle}.van-doc-header__logo img{margin-right:12px;width:28px}.van-doc-header__logo span{color:#fff;font-size:22px}.van-doc-header__link span{color:#fff;font-size:16px}.van-doc-header__link img{display:block;height:30px;transition:.3s cubic-bezier(.175,.885,.32,1.275);width:30px}.van-doc-header__link img:hover{transform:scale(1.2)}.van-doc-dropdown-enter,.van-doc-dropdown-leave-active{opacity:0;transform:scaleY(0)}.van-doc-card{background-color:#fff;border-radius:20px;box-shadow:0 8px 12px #ebedf0;margin-bottom:24px;padding:24px}.van-doc-card>blockquote a,.van-doc-card>p a,.van-doc-card>table a,.van-doc-card>ul a{-webkit-font-smoothing:auto;color:#1989fa;margin:0 1px}.van-doc-card>blockquote a:hover,.van-doc-card>p a:hover,.van-doc-card>table a:hover,.van-doc-card>ul a:hover{color:#0570db}.van-doc-card>blockquote a:active,.van-doc-card>p a:active,.van-doc-card>table a:active,.van-doc-card>ul a:active{color:#0456a9}.van-doc-card>h3,.van-doc-card>h4,.van-doc-card>h5,.van-doc-card>h6{color:#323233;font-weight:400;line-height:1.5}.van-doc-card>h3[id],.van-doc-card>h4[id],.van-doc-card>h5[id],.van-doc-card>h6[id]{cursor:pointer}.van-doc-card>h3{font-size:19px;font-weight:600;margin-bottom:16px}.van-doc-card>h4{font-size:16px}.van-doc-card>h4,.van-doc-card>h5{font-weight:600;margin:24px 0 12px}.van-doc-card>h5{font-size:15px}.van-doc-card>blockquote p,.van-doc-card>p{color:#34495e;font-size:15px;line-height:26px}.van-doc-card>blockquote p strong,.van-doc-card>p strong{color:#000}.van-doc-card>table{border-collapse:collapse;color:#34495e;font-size:14px;line-height:1.5;margin-top:12px;width:100%}.van-doc-card>table th{font-weight:600;padding:8px 10px;text-align:left}.van-doc-card>table th:first-child{padding-left:0}.van-doc-card>table th:last-child{padding-right:0}.van-doc-card>table td{border-top:1px solid #f1f4f8;padding:8px}.van-doc-card>table td:first-child{padding-left:0}.van-doc-card>table td:first-child code{background-color:#1989fa1a;border-radius:20px;color:#1989fa;font-size:11px;font-weight:600;margin:0;padding:2px 6px}.van-doc-card>table td:last-child{padding-right:0}.van-doc-card>table em{-webkit-font-smoothing:auto;color:#4fc08d;display:inline-block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-style:normal;max-width:300px}.van-doc-card>ol li,.van-doc-card>ul li{color:#34495e;font-size:15px;line-height:26px;margin:5px 0 5px 10px;padding-left:15px;position:relative}.van-doc-card>ol li:before,.van-doc-card>ul li:before{border:1px solid #666;border-radius:50%;box-sizing:border-box;content:"";height:6px;left:0;margin-top:10px;position:absolute;top:0;width:6px}.van-doc-card>hr{border:0;border-top:1px solid #eee;margin:30px 0}.van-doc-card>ol code,.van-doc-card>p code,.van-doc-card>table code,.van-doc-card>ul code{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;border-radius:4px;display:inline;font-family:inherit;font-size:14px;font-weight:600;margin:0 2px;padding:2px 5px;word-break:keep-all}.van-doc-card>blockquote{background-color:#ecf9ff;border-radius:20px;margin:16px 0 0;padding:16px}.van-doc-card>img,.van-doc-card>p img{border-radius:20px;margin:16px 0;width:100%}.van-doc-content{flex:1;padding:0 0 75px;position:relative}.van-doc-content .van-doc-markdown-body{overflow:hidden;padding:24px}.van-doc-content .van-doc-markdown-body h1,.van-doc-content .van-doc-markdown-body h2{color:#323233;font-weight:400;line-height:1.5}.van-doc-content .van-doc-markdown-body h1[id],.van-doc-content .van-doc-markdown-body h2[id]{cursor:pointer}.van-doc-content .van-doc-markdown-body h1{cursor:default;font-size:30px;margin:0 0 30px}.van-doc-content .van-doc-markdown-body h2{font-size:25px;margin:45px 0 20px}.van-doc-content--changelog strong{display:block;font-size:15px;font-weight:600;margin:24px 0 12px}.van-doc-content--changelog h3+p code{margin:0}.van-doc-content--changelog h3 a{color:inherit;font-size:20px}.van-doc-container{box-sizing:border-box;overflow:hidden;padding-left:220px}.van-doc-container--with-simulator{padding-right:384px}.van-doc-simulator{background:#fafafa;border-radius:20px;box-shadow:0 8px 12px #ebedf0;box-sizing:border-box;min-width:360px;overflow:hidden;position:absolute;right:24px;top:88px;width:360px;z-index:1}@media (max-width:1100px){.van-doc-simulator{left:750px;right:auto}}@media (min-width:1680px){.van-doc-simulator{margin-right:-816px;right:50%}}.van-doc-simulator-fixed{position:fixed;top:24px}.van-doc-simulator iframe{display:block;width:100%}code{word-wrap:break-word;-webkit-font-smoothing:auto;background-color:#f8f8f8;border-radius:20px;color:#58727e;display:block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-weight:400;line-height:26px;overflow-x:auto;padding:16px 20px;position:relative;white-space:pre-wrap}pre{margin:20px 0 0}pre+p{margin-top:20px}.hljs{background:#fff;display:block;overflow-x:auto;padding:.5em}.hljs-subst{color:#58727e}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#4fc08d}.hljs-comment,.hljs-quote{color:#999}.hljs-attribute,.hljs-keyword,.hljs-params{color:#8080ff}.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp,.hljs-variable{color:#eb6f6f}.hljs-attr,.hljs-built_in,.hljs-doctag,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{color:#4994df}.hljs-emphasis{font-style:italic}.van-doc-intro{padding-top:20px;text-align:center}.van-doc-intro p{margin-bottom:20px}.demo-playground[data-v-9efa7fdc]{background-color:#fff;border:1px solid #ebedf1;border-radius:1px;margin:24px 0}.demo-playground.transform[data-v-9efa7fdc]{transform:translate(0)}.demo-playground--previewer[data-v-9efa7fdc]{border-bottom:1px solid #ebedf1;padding:40px 24px}.demo-playground--previewer.compact[data-v-9efa7fdc]{padding:0}.demo-playground--code--actions[data-v-9efa7fdc]{align-items:center;display:flex;height:40px;padding:0 1em}.demo-playground--code--actions>a[data-v-9efa7fdc]:not(:last-child),.demo-playground--code--actions>button[data-v-9efa7fdc]:not(:last-child){margin-right:8px}.demo-playground--code--actions>a[data-v-9efa7fdc]{display:flex}.demo-playground--code--actions button[data-v-9efa7fdc]{border:0;box-sizing:border-box;cursor:pointer;display:inline-block;height:16px;opacity:.6;outline:none;padding:0;position:relative;transition:opacity .2s,background .2s;width:16px}.demo-playground--code--actions button[data-v-9efa7fdc]:after{bottom:-8px;content:"";left:-8px;position:absolute;right:-8px;top:-8px}.demo-playground--code--actions button[data-v-9efa7fdc]:hover{opacity:.8}.demo-playground--code--actions button[data-v-9efa7fdc]:active{opacity:.9}.demo-playground--code--actions button[data-v-9efa7fdc]:disabled{cursor:not-allowed;opacity:.2}.demo-playground--code--actions button[role=codesandbox][data-v-9efa7fdc]{background-position:-18px 0}.demo-playground--code--actions button[role=codepen][data-v-9efa7fdc]{background-position:-36px 0}.demo-playground--code--actions button[role=source][data-v-9efa7fdc]{background-position:-72px 0}.demo-playground--code--actions button[role=change-jsx][data-v-9efa7fdc]{background-position:-90px 0}.demo-playground--code--actions button[role=change-tsx][data-v-9efa7fdc]{background-position:-108px 0}.demo-playground--code--actions button[role=open-demo][data-v-9efa7fdc]{background-position:-126px 0}.demo-playground--code--actions button[role=motions][data-v-9efa7fdc]{background-position:-162px 0}.demo-playground--code--actions button[role=sketch-component][data-v-9efa7fdc]{background-position:-182px 0}.demo-playground--code--actions button[role=sketch-group][data-v-9efa7fdc]{background-position:-200px 0}.demo-playground--code--actions button[role=copy][data-status=ready][data-v-9efa7fdc]{background-position:-54px 0}.demo-playground--code--actions button[role=copy][data-status=copied][data-v-9efa7fdc]{background-position:-54px -16px;pointer-events:none}.demo-playground--code--actions button[role=refresh][data-v-9efa7fdc]{background-position-x:-144px}.demo-playground--code--actions>span[data-v-9efa7fdc]{display:inline-block;flex:1}.demo-playground--code--content[data-v-9efa7fdc]{border-top:1px dashed #ebedf1}.demo-playground--code--content[data-v-9efa7fdc] pre{margin:0}.demo-playground--code--content[data-v-9efa7fdc] .language-html{border-radius:0}.action-icon[data-v-9efa7fdc]{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAA8CAMAAADc4HoZAAABFFBMVEUAAABGT2VGTmZaYXpCvGtIUGg3tGBGTmU3s2A/tmFKUGxFTmRFTWVQWmxFTWRJUGZFTWRGTmRLWWpFTWRGTmVGTmVLVG1FTmRGTWVHTmVFTWRHUGdFTWRGT2ZFTWVGTmU6t2I7xHA3tF9GTWRIT2dFTmRGTmVFTWQ3s2BFTWRGTmVGTmZKUmVFTWRFTWRGTWRGTmVcXHxFTmVFTmVGTmVFTWRIUGdGTWVNU3FGT2ZGTmVHTmVFTWRFTWVFTmVITWRHUGZFTWVFTmRGTmZGTmVFTWVLU2g4tF83tGBFTWQ3s1/LzdT09faoq7Zwdoieoq58gpLj5OeCh5fq6+2/wsmTmKWQlKJfZnpIUGfU1tu0t8BOVWynlyFSAAAASXRSTlMAkoAHEkDQ/dgYFuf0C8gj+KQQmm1oEuyNWNg53kSXfCYI5tEtzq7ivbOgTBy924R1BfHUibcpYw1JcU7v+7E3Nav6XVPDGraPqQuKawAACh1JREFUeNrsm2lT6kgUhg9QFFUkgWDYZfnAVsi+KQJeQdGqt1xm7jZ3lv//PyYdhe7QWQw1zP0w83xQsY9Um4fTp7vToeBczmaX5MN5rXZO/+NGJzGuLejnkw3dADehLHkQyceAWD5C/0my9XqWPLlCK9WHQScirUMk18g7J9ZosYLFajFyT8siLIpuyQkHKBDw4NgYsnDr0Xybaii60rjYzsmdbrqnw0TvpbvkhjYuzinygDXJXLewR2/O/f73w1cWCUj0LkmiU8SeYsc9LXMZIJNjyXkqmbWQCzV8ICawzLO8jh3q4IyciYfugMnMMGYT4C4UJ2fOEbbSc0EyrVp4T/7u4kiZs6jANjwBxkupWMLG7NIlLZvxM+As3nRLTsD/N5xtekmHIEQuhBAoBuREtmaXWVgB41Smc97JbMZA7pqcKKgopbu7FC1BLUgD22MyeVnPWD0bonLLeCQRhIkzQNnz6gHiK0HmxeF4qkKPSsVygh2x2q50SmlZIGIyiQo8OY+XGVExOLVM2WVRbAkDSma0609aQaxKMgOo6YjQ77Tc8d3laxPRxS7R564yI8WSFkymgUNuJqlbomQLisblpnNAf0nrB1j06rTsA7n0SE5L2skkh+Qcm2CP3vGV2QHWp5Ypu4wDosumRpyzNrBwcFmqk4166dBmrFgJ5aeDKhvSklWLBLokgBhcaF3bFL59lV45EQsR3QLVfV0uAuNFhEy2JaC/fcveMVC8ltKSy3RITtjRl34yDSj0r8rMNkyXQksByJOdCmIdslNAKS7V0BIKdpmGQ1+S9slA2IVa60My89HoRKyZ5XTD8rhBX1DwEN85Gw53drIsT6W0FGTKyYmYtgcI427rI1NB5bQyZZeTuNCSXaEpBX2Cotm9qWqdJOqqajN85y8zTC6E8SGZGalmjja4uaQC0OUy0UzSAckNTKS0FGTKyYmYbfQP42brcFGr/X5+N/XDNVG+36+eXCZ3Kbbkbd644cHBW6bpnTlx0vZO6PL0NI/LE8uksxtUqQ7sUgpoAfp0TgLzqQ4oAFkkeFqadCwFxJMz4SKTwogVpIsaBtrv+qdQzZ8ibSB8cpncJW+Z68iQTBq5EXG6N6UIvTHVr2hPpHTX9ZY5Rf0ImfIEyEMmFWHQmk89gHKhBShCP68UoHVfFtZnqV0yahWYVLTdJyMFwE0ms8l+cnFJfWyIuM2TyuQuecsW4xFJMMcd0S1PzBRQGdkaOKosc4DKYn1amSM2rb4H5lwmaVUVqEXJItoA1LBGokwoHWKUS0AqBZTKxOgocJXJl74uLi+Be+I2TyuTu+SkkCInmrZS3kNXkMnnF9RFT5Qpv1cVJkYwmRzxlavMIRClmTgBYmIeU1bpfC+WqS6RKPOKOTxjaWlZXSpWcp4xq1dBZIaBTxH+v95kySLyCQifSCZ3WYuTnYbDKNvpnVMVPUpulvSGPiFRJlq39M5E95bZNYZXD1icTOaoHophQ1EgLcpkrBOsdLJimbglsstMzpnGxZtSE0vjwlKalGVyuEzZJSXQIxJs2kVVDJOLC6NKVK/0jLWrzEzPYB/G6SxV9pJZq2XlyXSHDqlAjW5XjaSCzfsfom2XiX3hbEN4y3G/r64agy7ZifRrXOa6wmMkmT7YZfbwTuPsUoGi2WUyWOlkxZJIkskGWD7YkpWcb4NtAJlVm8tHYEF2m6KofW/pXLe2INxkTs0QeszB5N5rmJVckg55RzI+gTpEToFySRZ1GAcy94lg8AmOtmtSh2QnNebrTCnmWJlzHRatYeRegbomWSZpU2Cq0UdkdgLKlBMzA2EZNpJkmnmZQ9EwqtSDMijqGU+ZeeSqD/pCkikhZ6ZsU8cNc+kuc3EoU0tgT4hE5q3ELgZCTIBh1nECVAWm0fMs3daA8bV4wUN7f0nhAkdCgkztnx9mZ5iQ+zDLSLxdx5bZFK+Tp8wZDNLqFEAmr5myzRh36TfM8obXX01eAeyaqT4LhYvouMccLzNSRIlZmwGzLnGskVWWWWhBmgBZlXPpOwHieEyA5joGsktZJvumXBN5yzSQW/puGhy2XGBDTjZbWDGXLhMgRZ4ArQF8f375+vnP5y/gFawKYHzlEuOzNPGRSVFgSkT37LcCYDSidpnnCUCQaTmUlyaW1QAyxaVJAVjLLmWZViQSUW+Z9RsWE1DmFuMIOZAddIMtTSrA69PTy/dfXr798QMo7GVmzjXyijleJqVwV7d6t4rL2+NlUeY5GE6bBnNp0yCQTG4zBYVIWGa6y6SMCmDoKZOuFQDVYDI1FWlyJtimQR8/vv76/O319enrl89/wdjLZEnsFeO/nee6NImv8MAW6zpSssylKLMMxrHbebJM2eZohYrkUpL5HhKfqohdesokbZED1oFk0gC5M/Kje+e7nafi9fnl8y8mn1+ef6AtyXSNOV4mZd4q7wAo+8s8fqOdA7httJd3Hwlpo12WeUZUv0PaVWaCuTSVqxgGkznPYTYiP/w32lfAr0+/fAF+++2PV6ApyvSK8ZcpL034LbAWclm2kEU/4i8z8C0wf5mcENQIcTxkJnuTOMV1ZBxkniceqYkmnRmtR4ooQWVSJwbD16b/LbAGTEffnvD705NpC3lZphxzrEwbYVZg2Dd+c9pZZpCb08FltrChj8nsAGpiDD0py9RWUIvAkFWOuwcFuA0ok4bALCuKswQFvTk9gMnL85fvz99h0ttsmp8+tdt9LlOKuXC5OS1fOa42c3jUUrW6sIGetB8bwVCUuUCgYyPBZa6B+w/KpHsVgOq4adBhTQ8RonIOwE3ACRBjGMNquJ/ODcc9YgQ8NtJVYfLn568vMImtVrmcoiitVmLuFON6bMRfpiOPY/QOD3T16juZ9V6AA10+MhkkE0Ys6yuzXFgTY35fzTw6L03iV8MOMbTt8CpJwWVa02C9PSyUt8NPKtBK0hEHuoYAzAH0G0z0c+IEjIGALDMfdeYCuD88ahmrxJnMuBE77qilLHPkKnOZlhLz9CcNnFu06hg7lLBGRx21DMHkr9+ZJ6HFKya4TC9atIOf6woBIX6SK8AhaM8D0D//ELR3ryLXlV4xV0qElhEiz0PQbcNoOx+CvlJgIT6H4xUTHCMGd1LE4aVTKpa+jyf4y/z5jycE7lXwxxO0gtFu5svECRrz/4NDf7dvxjYQwzAMdGEE8RaWq2ySh/cf6OGoyQCRANLkBHenWqnzxyGU6aVP0zRN0zTtmzUru64ZWZ923kC0n6tT9WnnnL+y5R51pj6L9ahlx7k6UR8kVt2Sh1W35GHVLXlYdUseVt2Sh1W3fK8aDmuSOmyfelyGwpqkjtvnnvMyENYcdeA+fSxaDNYUdeg+TovBmqAO3sdpMVjD1eH7OC0Ga7A6QR+nxWANVafo47QYrIHqJH0eWhDWMHWaPosWhTVInahPHzisIepUffrAYQ1QJ+vTgVgD1IP6/AHM0QJdY511NAAAAABJRU5ErkJggg==) no-repeat 0 0/230px auto}.van-doc-demo-block__title{color:#455a6499;font-size:14px;font-weight:400;line-height:16px;margin:0;padding:32px 16px 16px}.van-doc-demo-block__card{border-radius:8px;margin:12px 12px 0;overflow:hidden}.van-doc-demo-block__title+.van-doc-demo-block__card{margin-top:0}.van-doc-demo-block:first-of-type .van-doc-demo-block__title{padding-top:20px}.van-doc-demo-section{box-sizing:border-box;min-height:calc(100vh - 56px);padding-bottom:20px}.demo-home-nav__title{color:#455a6499;font-size:14px;margin:24px 0 8px 16px}.demo-home-nav__block{background:#f7f8fa;border-radius:99px;color:#323233;display:flex;font-size:14px;font-weight:600;line-height:40px;margin:0 0 12px;padding-left:20px;position:relative;transition:background .3s}.demo-home-nav__block:hover{background:#eef0f4}.demo-home-nav__block:active{background:#e4e8ee}.demo-home-nav__icon{height:16px;margin-top:-8px;position:absolute;right:16px;top:50%;width:16px}.demo-home{background:#fff;box-sizing:border-box;min-height:100vh;padding:46px 20px 20px;width:100%}.demo-home__desc,.demo-home__title{font-weight:400;line-height:1;padding-left:16px;-webkit-user-select:none;user-select:none}.demo-home__title{font-size:32px;margin:0 0 16px}.demo-home__title img,.demo-home__title span{display:inline-block;vertical-align:middle}.demo-home__title img{width:32px}.demo-home__title span{margin-left:16px}.demo-home__title--small{font-size:24px}.demo-home__desc{color:#455a6499;font-size:14px;margin:0 0 40px}.demo-nav{align-items:center;background-color:#fff;display:flex;height:56px;justify-content:center;position:relative}.demo-nav__title{font-size:17px;font-weight:600;text-transform:capitalize}.demo-nav__back{cursor:pointer;height:24px;left:16px;position:absolute;top:16px;width:24px}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;color:#323233;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;font-size:16px;min-width:1100px;overflow-x:auto}body,p{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{margin:0 auto;width:1680px}}body{min-width:100vw}::-webkit-scrollbar{background:transparent;width:0} diff --git a/vite/assets/main.e9e2ce12.js b/vite/assets/main.e9e2ce12.js deleted file mode 100644 index b802aa1f..00000000 --- a/vite/assets/main.e9e2ce12.js +++ /dev/null @@ -1,3 +0,0 @@ -var e,t=Object.defineProperty,n=Object.defineProperties,r=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,c=(e,n,r)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r;import{_ as l,p as u,c as s,s as f,i as p,a as m,l as h,d,b as v,e as y,g as _}from"./iframe-router.af4eced8.js";import{r as g,c as b,n as O,a as S,o as w,F as E,b as j,d as P,t as k,e as I,f as C,g as D,h as N,w as A,T as x,i as T,j as L,v as H,p as R,k as M,l as q,m as V,q as U,s as F}from"./vue-libs.1fd58d42.js";const $=["href","innerHTML"],B=["innerHTML"];var z=l({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||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(e,t,n,r,o,a){const i=g("router-link");return n.item.path?(w(),b(i,{key:0,class:O({active:a.active}),to:a.path,innerHTML:a.itemName},null,8,["class","to","innerHTML"])):n.item.link?(w(),S("a",{key:1,href:n.item.link,innerHTML:a.itemName},null,8,$)):(w(),S("a",{key:2,innerHTML:a.itemName},null,8,B))}]]);const K={name:"VanDocNav",components:{[z.name]:z},props:{lang:String,navConfig:Array},data:()=>({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)}}},W={class:"van-doc-nav__title"};var J=l(K,[["render",function(e,t,n,r,o,a){const i=g("van-doc-nav-link");return w(),S("div",{class:"van-doc-nav",style:D(a.style)},[(w(!0),S(E,null,j(n.navConfig,((e,t)=>(w(),S("div",{class:"van-doc-nav__group",key:t},[P("div",W,k(e.title),1),e.items?(w(!0),S(E,{key:0},j(e.items,((e,t)=>(w(),S("div",{key:t,class:"van-doc-nav__item"},[I(i,{item:e,base:a.base},null,8,["item","base"])])))),128)):C("v-if",!0)])))),128))],4)}]]); -/*! @docsearch/js 3.0.0-alpha.40 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -function Q(e){return(Q="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function G(){return(G=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n3)for(n=[n],a=3;a0?de(m.type,m.props,m.key,null,m.__v):m)){if(m.__=n,m.__b=n.__b+1,null===(p=y[s])||p&&m.key==p.key&&m.type===p.type)y[s]=void 0;else for(f=0;f<_;f++){if((p=y[f])&&m.key==p.key&&m.type===p.type){y[f]=void 0;break}p=null}De(e,m,p=p||ue,o,a,i,c,l,u),h=m.__e,(f=m.ref)&&p.ref!=f&&(v||(v=[]),p.ref&&v.push(p.ref,null,m),v.push(f,m.__c||h,m)),null!=h?(null==d&&(d=h),"function"==typeof m.type&&null!=m.__k&&m.__k===p.__k?m.__d=l=we(m,l,e):l=je(e,m,p,y,h,l),u||"option"!==n.type?"function"==typeof n.type&&(n.__d=l):e.value=""):l&&p.__e==l&&l.parentNode!=e&&(l=_e(p))}for(n.__e=d,s=_;s--;)null!=y[s]&&("function"==typeof n.type&&null!=y[s].__e&&y[s].__e==n.__d&&(n.__d=_e(r,s+1)),xe(y[s],y[s]));if(v)for(s=0;s3)for(n=[n],a=3;a=n.__.length&&n.__.push({}),n.__[e]}function Qe(e,t,n){var r=Je(Me++,2);return r.t=e,r.__c||(r.__=[n?n(t):rt(void 0,t),function(e){var t=r.t(r.__[0],e);r.__[0]!==t&&(r.__=[t,r.__[1]],r.__c.setState({}))}],r.__c=qe),r.__}function Ye(e,t){var n=Je(Me++,4);!oe.__s&&nt(n.__H,t)&&(n.__=e,n.__H=t,qe.__h.push(n))}function Ge(e,t){var n=Je(Me++,7);return nt(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Ze(){Fe.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(et),e.__H.__h.forEach(tt),e.__H.__h=[]}catch(t){e.__H.__h=[],oe.__e(t,e.__v)}})),Fe=[]}oe.__b=function(e){qe=null,$e&&$e(e)},oe.__r=function(e){Be&&Be(e),Me=0;var t=(qe=e.__c).__H;t&&(t.__h.forEach(et),t.__h.forEach(tt),t.__h=[])},oe.diffed=function(e){ze&&ze(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(1!==Fe.push(t)&&Ve===oe.requestAnimationFrame||((Ve=oe.requestAnimationFrame)||function(e){var t,n=function(){clearTimeout(r),Xe&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);Xe&&(t=requestAnimationFrame(n))})(Ze)),qe=void 0},oe.__c=function(e,t){t.some((function(e){try{e.__h.forEach(et),e.__h=e.__h.filter((function(e){return!e.__||tt(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],oe.__e(n,e.__v)}})),Ke&&Ke(e,t)},oe.unmount=function(e){We&&We(e);var t=e.__c;if(t&&t.__H)try{t.__H.__.forEach(et)}catch(n){oe.__e(n,t.__v)}};var Xe="function"==typeof requestAnimationFrame;function et(e){var t=qe;"function"==typeof e.__c&&e.__c(),qe=t}function tt(e){var t=qe;e.__c=e.__(),qe=t}function nt(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function rt(e,t){return"function"==typeof t?t(e):t}function ot(e,t){for(var n in t)e[n]=t[n];return e}function at(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function it(e){this.props=e}(it.prototype=new ye).isPureReactComponent=!0,it.prototype.shouldComponentUpdate=function(e,t){return at(this.props,e)||at(this.state,t)};var ct=oe.__b;oe.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),ct&&ct(e)};var lt="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,ut=function(e,t){return null==e?null:Ee(Ee(e).map(t))},st={map:ut,forEach:ut,count:function(e){return e?Ee(e).length:0},only:function(e){var t=Ee(e);if(1!==t.length)throw"Children.only";return t[0]},toArray:Ee},ft=oe.__e;function pt(){this.__u=0,this.t=null,this.__b=null}function mt(e){var t=e.__.__c;return t&&t.__e&&t.__e(e)}function ht(){this.u=null,this.o=null}oe.__e=function(e,t,n){if(e.then)for(var r,o=t;o=o.__;)if((r=o.__c)&&r.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t);ft(e,t,n)},(pt.prototype=new ye).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var o=mt(r.__v),a=!1,i=function(){a||(a=!0,n.componentWillUnmount=n.__c,o?o(c):c())};n.__c=n.componentWillUnmount,n.componentWillUnmount=function(){i(),n.__c&&n.__c()};var c=function(){if(!--r.__u){if(r.state.__e){var e=r.state.__e;r.__v.__k[0]=function e(t,n,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)})),t.__c&&t.__c.__P===n&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__e:r.__b=null});t=r.t.pop();)t.forceUpdate()}},l=!0===t.__h;r.__u++||l||r.setState({__e:r.__b=r.__v.__k[0]}),e.then(i,i)},pt.prototype.componentWillUnmount=function(){this.t=[]},pt.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function e(t,n,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach((function(e){"function"==typeof e.__c&&e.__c()})),t.__c.__H=null),null!=(t=ot({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=n),t.__c=null),t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)}))),t}(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__e&&he(ve,null,e.fallback);return o&&(o.__h=null),[he(ve,null,t.__e?null:e.children),o]};var dt=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]>>1,1),t.i.removeChild(e)}}),Le(he(vt,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function _t(e,t){return he(yt,{__v:e,i:t})}(ht.prototype=new ye).__e=function(e){var t=this,n=mt(t.__v),r=t.o.get(e);return r[0]++,function(o){var a=function(){t.props.revealOrder?(r.push(o),dt(t,e,r)):o()};n?n(a):a()}},ht.prototype.render=function(e){this.u=null,this.o=new Map;var t=Ee(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},ht.prototype.componentDidUpdate=ht.prototype.componentDidMount=function(){var e=this;this.o.forEach((function(t,n){dt(e,n,t)}))};var gt="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,bt=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Ot=function(e){return("undefined"!=typeof Symbol&&"symbol"==Q(Symbol())?/fil|che|rad/i:/fil|che|ra/i).test(e)};function St(e,t,n){return null==t.__k&&(t.textContent=""),Le(e,t),"function"==typeof n&&n(),e?e.__c:null}ye.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(e){Object.defineProperty(ye.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})}));var wt=oe.event;function Et(){}function jt(){return this.cancelBubble}function Pt(){return this.defaultPrevented}oe.event=function(e){return wt&&(e=wt(e)),e.persist=Et,e.isPropagationStopped=jt,e.isDefaultPrevented=Pt,e.nativeEvent=e};var kt,It={configurable:!0,get:function(){return this.class}},Ct=oe.vnode;oe.vnode=function(e){var t=e.type,n=e.props,r=n;if("string"==typeof t){for(var o in r={},n){var a=n[o];"value"===o&&"defaultValue"in n&&null==a||("defaultValue"===o&&"value"in n&&null==n.value?o="value":"download"===o&&!0===a?a="":/ondoubleclick/i.test(o)?o="ondblclick":/^onchange(textarea|input)/i.test(o+t)&&!Ot(n.type)?o="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(o)?o=o.toLowerCase():bt.test(o)?o=o.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===a&&(a=void 0),r[o]=a)}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=Ee(n.children).forEach((function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)}))),"select"==t&&null!=r.defaultValue&&(r.value=Ee(n.children).forEach((function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),e.props=r}t&&n.class!=n.className&&(It.enumerable="className"in n,null!=n.className&&(r.class=n.className),Object.defineProperty(r,"className",It)),e.$$typeof=gt,Ct&&Ct(e)};var Dt=oe.__r;oe.__r=function(e){Dt&&Dt(e),kt=e.__c};var Nt={ReactCurrentDispatcher:{current:{readContext:function(e){return kt.__n[e.__c].props.value}}}};function At(e){return!!e&&e.$$typeof===gt}"object"==("undefined"==typeof performance?"undefined":Q(performance))&&"function"==typeof performance.now&&performance.now.bind(performance);var xt={useState:function(e){return Ue=1,Qe(rt,e)},useReducer:Qe,useEffect:function(e,t){var n=Je(Me++,3);!oe.__s&&nt(n.__H,t)&&(n.__=e,n.__H=t,qe.__H.__h.push(n))},useLayoutEffect:Ye,useRef:function(e){return Ue=5,Ge((function(){return{current:e}}),[])},useImperativeHandle:function(e,t,n){Ue=6,Ye((function(){"function"==typeof e?e(t()):e&&(e.current=t())}),null==n?n:n.concat(e))},useMemo:Ge,useCallback:function(e,t){return Ue=8,Ge((function(){return e}),t)},useContext:function(e){var t=qe.context[e.__c],n=Je(Me++,9);return n.__c=e,t?(null==n.__&&(n.__=!0,t.sub(qe)),t.props.value):e.__},useDebugValue:function(e,t){oe.useDebugValue&&oe.useDebugValue(t?t(e):e)},version:"16.8.0",Children:st,render:St,hydrate:function(e,t,n){return He(e,t),"function"==typeof n&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(Le(null,e),!0)},createPortal:_t,createElement:he,createContext:function(e,t){var n={__c:t="__cC"+le++,__:e,Consumer:function(e,t){return e.children(t)},Provider:function(e){var n,r;return this.getChildContext||(n=[],(r={})[t]=this,this.getChildContext=function(){return r},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some(be)},this.sub=function(e){n.push(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n.splice(n.indexOf(e),1),t&&t.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return he.bind(null,e)},cloneElement:function(e){return At(e)?Re.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:ve,isValidElement:At,findDOMNode:function(e){return e&&(e.base||1===e.nodeType&&e)||null},Component:ye,PureComponent:it,memo:function(e,t){function n(e){var n=this.props.ref,r=n==e.ref;return!r&&n&&(n.call?n(null):n.current=null),t?!t(this.props,e)||!r:at(this.props,e)}function r(t){return this.shouldComponentUpdate=n,he(e,t)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(t,n){var r=ot({},t);return delete r.ref,e(r,(n=t.ref||n)&&("object"!=Q(n)||"current"in n)?n:null)}return t.$$typeof=lt,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:ve,Suspense:pt,SuspenseList:ht,lazy:function(e){var t,n,r;function o(o){if(t||(t=e()).then((function(e){n=e.default||e}),(function(e){r=e})),r)throw r;if(!n)throw t;return he(n,o)}return o.displayName="Lazy",o.__f=!0,o},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Nt};function Tt(){return xt.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},xt.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function Lt(){return xt.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},xt.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Ht(){return(Ht=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["translations"]),a=r.buttonText,i=void 0===a?"Search":a,c=r.buttonAriaLabel,l=void 0===c?"Search":c,u=Ge((function(){return"undefined"!=typeof navigator?/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl":null}),[]);return xt.createElement("button",Ht({type:"button",className:"DocSearch DocSearch-Button","aria-label":l},o,{ref:t}),xt.createElement("span",{className:"DocSearch-Button-Container"},xt.createElement(Lt,null),xt.createElement("span",{className:"DocSearch-Button-Placeholder"},i)),xt.createElement("span",{className:"DocSearch-Button-Keys"},null!==u&&xt.createElement(xt.Fragment,null,xt.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===u?xt.createElement(Tt,null):u),xt.createElement("span",{className:"DocSearch-Button-Key"},"K"))))})),Mt=0;function qt(e){return 0===e.collections.length?0:e.collections.reduce((function(e,t){return e+t.items.length}),0)}function Vt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Ut(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ft(e){return e.reduce((function(e,t){return e.concat(t)}),[])}function $t(e,t,n,r){if(!n)return null;if(e<0&&(null===t||null!==r&&0===t))return n+e;var o=(null===t?-1:t)+e;return o<=-1||o>=n?null===r?null:0:o}var Bt=function(){};function zt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Kt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Wt(e){return(Wt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Jt(e){var t,n,r=(n=(t=e).collections.map((function(e){return e.items.length})).reduce((function(e,t,n){var r=(e[n-1]||0)+t;return e.push(r),e}),[]).reduce((function(e,n){return n<=t.activeItemId?e+1:e}),0),t.collections[n]);if(!r)return null;var o=r.items[function(e){for(var t=e.state,n=e.collection,r=!1,o=0,a=0;!1===r;){var i=t.collections[o];if(i===n){r=!0;break}a+=i.items.length,o++}return t.activeItemId-a}({state:e,collection:r})],a=r.source;return{item:o,itemInputValue:a.getItemInputValue({item:o,state:e}),itemUrl:a.getItemUrl({item:o,state:e}),source:a}}function Qt(e,t){return e===t||e.contains(t)}function Yt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Gt(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["event","nextState","props","query","refresh","store"]);yn&&o.environment.clearTimeout(yn);var u,s=l.setCollections,f=l.setIsOpen,p=l.setQuery,m=l.setActiveItemId,h=l.setStatus;return p(a),m(o.defaultActiveItemId),a||!1!==o.openOnFocus?(h("loading"),yn=o.environment.setTimeout((function(){h("stalled")}),o.stallThreshold),o.getSources(dn({query:a,refresh:i,state:c.getState()},l)).then((function(e){return h("loading"),Promise.all(e.map((function(e){return Promise.resolve(e.getItems(dn({query:a,refresh:i,state:c.getState()},l))).then((function(t){return function(e,t){return n=e,Boolean(null==n?void 0:n.execute)?sn(sn({},e),{},{requests:e.queries.map((function(n){return{query:n,sourceId:t,transformResponse:e.transformResponse}}))}):{items:e,sourceId:t};var n}(t,e.sourceId)}))}))).then(mn).then((function(t){return function(e,t){return t.map((function(t){var n,r=e.filter((function(e){return e.sourceId===t.sourceId})),o=r.map((function(e){return e.items})),a=r[0].transformResponse,i=a?a({results:n=o.map((function(e){var t;return Gt(Gt({},e),{},{hits:null===(t=e.hits)||void 0===t?void 0:t.map((function(t){return Gt(Gt({},t),{},{__autocomplete_indexName:e.index,__autocomplete_queryID:e.queryID})}))})})),hits:n.map((function(e){return e.hits})).filter(Boolean),facetHits:n.map((function(e){var t;return null===(t=e.facetHits)||void 0===t?void 0:t.map((function(e){return{label:e.value,count:e.count,_highlightResult:{label:{value:e.highlighted}}}}))})).filter(Boolean)}):o;return Array.isArray(i),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned type ').concat(JSON.stringify(cn(i)),":\n\n").concat(JSON.stringify(i,null,2),".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),i.every(Boolean),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:t,items:i}}))}(t,e)})).then((function(e){var n;h("idle"),s(e);var u=o.shouldPanelOpen({state:c.getState()});f(null!==(n=r.isOpen)&&void 0!==n?n:o.openOnFocus&&!a&&u||u);var p=Jt(c.getState());if(null!==c.getState().activeItemId&&p){var m=p.item,d=p.itemInputValue,v=p.itemUrl,y=p.source;y.onActive(dn({event:t,item:m,itemInputValue:d,itemUrl:v,refresh:i,source:y,state:c.getState()},l))}})).finally((function(){yn&&o.environment.clearTimeout(yn)}))}))):(h("idle"),s(c.getState().collections.map((function(e){return dn(dn({},e),{},{items:[]})}))),f(null!==(u=r.isOpen)&&void 0!==u?u:o.shouldPanelOpen({state:c.getState()})),Promise.resolve())}function gn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function bn(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Pn(e){var t=e.props,n=e.refresh,r=e.store,o=jn(e,["props","refresh","store"]);return{getEnvironmentProps:function(e){var n=e.inputElement,o=e.formElement,a=e.panelElement;return wn({onTouchStart:function(e){!1!==r.getState().isOpen&&e.target!==n&&!1===[o,a].some((function(n){return Qt(n,e.target)||Qt(n,t.environment.document.activeElement)}))&&r.dispatch("blur",null)},onTouchMove:function(e){!1!==r.getState().isOpen&&n===t.environment.document.activeElement&&e.target!==n&&n.blur()}},jn(e,["inputElement","formElement","panelElement"]))},getRootProps:function(e){return wn({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-owns":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},e)},getFormProps:function(e){return e.inputElement,wn({action:"",noValidate:!0,role:"search",onSubmit:function(a){var i;a.preventDefault(),t.onSubmit(wn({event:a,refresh:n,state:r.getState()},o)),r.dispatch("submit",null),null===(i=e.inputElement)||void 0===i||i.blur()},onReset:function(a){var i;a.preventDefault(),t.onReset(wn({event:a,refresh:n,state:r.getState()},o)),r.dispatch("reset",null),null===(i=e.inputElement)||void 0===i||i.focus()}},jn(e,["inputElement"]))},getLabelProps:function(e){return wn({htmlFor:"".concat(t.id,"-input"),id:"".concat(t.id,"-label")},e)},getInputProps:function(e){function a(e){(t.openOnFocus||Boolean(r.getState().query))&&_n(wn({event:e,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},o)),r.dispatch("focus",null)}var i="ontouchstart"in t.environment,c=e||{},l=(c.inputElement,c.maxLength),u=void 0===l?512:l,s=jn(c,["inputElement","maxLength"]),f=Jt(r.getState());return wn({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&null!==r.getState().activeItemId?"".concat(t.id,"-item-").concat(r.getState().activeItemId):void 0,"aria-controls":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:r.getState().completion||r.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:null!=f&&f.itemUrl?"go":"search",spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:u,type:"search",onChange:function(e){_n(wn({event:e,props:t,query:e.currentTarget.value.slice(0,u),refresh:n,store:r},o))},onKeyDown:function(e){!function(e){var t=e.event,n=e.props,r=e.refresh,o=e.store,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["event","props","refresh","store"]);if("ArrowUp"===t.key||"ArrowDown"===t.key){var i=function(){var e=n.environment.document.getElementById("".concat(n.id,"-item-").concat(o.getState().activeItemId));e&&(e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView(!1))},c=function(){var e=Jt(o.getState());if(null!==o.getState().activeItemId&&e){var n=e.item,i=e.itemInputValue,c=e.itemUrl,l=e.source;l.onActive(bn({event:t,item:n,itemInputValue:i,itemUrl:c,refresh:r,source:l,state:o.getState()},a))}};t.preventDefault(),!1===o.getState().isOpen&&(n.openOnFocus||Boolean(o.getState().query))?_n(bn({event:t,props:n,query:o.getState().query,refresh:r,store:o},a)).then((function(){o.dispatch(t.key,{nextActiveItemId:n.defaultActiveItemId}),c(),setTimeout(i,0)})):(o.dispatch(t.key,{}),c(),i())}else if("Escape"===t.key)t.preventDefault(),o.dispatch(t.key,null);else if("Enter"===t.key){if(null===o.getState().activeItemId||o.getState().collections.every((function(e){return 0===e.items.length})))return;t.preventDefault();var l=Jt(o.getState()),u=l.item,s=l.itemInputValue,f=l.itemUrl,p=l.source;if(t.metaKey||t.ctrlKey)void 0!==f&&(p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a)),n.navigator.navigateNewTab({itemUrl:f,item:u,state:o.getState()}));else if(t.shiftKey)void 0!==f&&(p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a)),n.navigator.navigateNewWindow({itemUrl:f,item:u,state:o.getState()}));else if(t.altKey);else{if(void 0!==f)return p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a)),void n.navigator.navigate({itemUrl:f,item:u,state:o.getState()});_n(bn({event:t,nextState:{isOpen:!1},props:n,query:s,refresh:r,store:o},a)).then((function(){p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a))}))}}}(wn({event:e,props:t,refresh:n,store:r},o))},onFocus:a,onBlur:function(){i||r.dispatch("blur",null)},onClick:function(n){e.inputElement!==t.environment.document.activeElement||r.getState().isOpen||a(n)}},s)},getPanelProps:function(e){return wn({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},e)},getListProps:function(e){return wn({role:"listbox","aria-labelledby":"".concat(t.id,"-label"),id:"".concat(t.id,"-list")},e)},getItemProps:function(e){var a=e.item,i=e.source,c=jn(e,["item","source"]);return wn({id:"".concat(t.id,"-item-").concat(a.__autocomplete_id),role:"option","aria-selected":r.getState().activeItemId===a.__autocomplete_id,onMouseMove:function(e){if(a.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",a.__autocomplete_id);var t=Jt(r.getState());if(null!==r.getState().activeItemId&&t){var i=t.item,c=t.itemInputValue,l=t.itemUrl,u=t.source;u.onActive(wn({event:e,item:i,itemInputValue:c,itemUrl:l,refresh:n,source:u,state:r.getState()},o))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var c=i.getItemInputValue({item:a,state:r.getState()}),l=i.getItemUrl({item:a,state:r.getState()});(l?Promise.resolve():_n(wn({event:e,nextState:{isOpen:!1},props:t,query:c,refresh:n,store:r},o))).then((function(){i.onSelect(wn({event:e,item:a,itemInputValue:c,itemUrl:l,refresh:n,source:i,state:r.getState()},o))}))}},c)}}}function kn(e){var t,n=e.state;return!1===n.isOpen||null===n.activeItemId?null:(null===(t=Jt(n))||void 0===t?void 0:t.itemInputValue)||null}function In(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Cn(e){for(var t=1;t0}},t),{},{id:null!==(r=t.id)&&void 0!==r?r:"autocomplete-".concat(Mt++),plugins:a,initialState:on({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},t.initialState),onStateChange:function(e){var n;null===(n=t.onStateChange)||void 0===n||n.call(t,e),a.forEach((function(t){var n;return null===(n=t.onStateChange)||void 0===n?void 0:n.call(t,e)}))},onSubmit:function(e){var n;null===(n=t.onSubmit)||void 0===n||n.call(t,e),a.forEach((function(t){var n;return null===(n=t.onSubmit)||void 0===n?void 0:n.call(t,e)}))},onReset:function(e){var n;null===(n=t.onReset)||void 0===n||n.call(t,e),a.forEach((function(t){var n;return null===(n=t.onReset)||void 0===n?void 0:n.call(t,e)}))},getSources:function(e){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return nn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return nn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?nn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(a.map((function(e){return e.getSources}))),[t.getSources]).filter(Boolean).map((function(t){return function(e,t){var n=[];return Promise.resolve(e(t)).then((function(e){return Array.isArray(e),"The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(Wt(e)),":\n\n").concat(JSON.stringify(e,null,2)),Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,n.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));n.push(e.sourceId);var t=function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n0&&xt.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},xt.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),xt.createElement("ul",null,t.slice(0,3).reduce((function(t,n){return[].concat(function(e){return function(e){if(Array.isArray(e))return Zn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Zn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Zn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t),[xt.createElement("li",{key:n},xt.createElement("button",{className:"DocSearch-Prefill",key:n,onClick:function(){e.setQuery(n.toLowerCase()+" "),e.refresh(),e.inputRef.current.focus()}},n))])}),[]))),xt.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",xt.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(e.indexName,']+Missing+results+for+query+"').concat(e.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function er(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function tr(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:rr(t,"_snippetResult.".concat(n,".value"))||rr(t,n)}}))}function ar(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(l){o=!0,a=l}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}}(e,t)||function(e,t){if(e){if("string"==typeof e)return ir(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ir(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ir(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n|<\/mark>)/g,hr=RegExp(mr.source);function dr(e){var t,n,r,o,a,i=e;if(!i.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var c=((i.__docsearch_parent?null===(t=i.__docsearch_parent)||void 0===t||null===(n=t._highlightResult)||void 0===n||null===(r=n.hierarchy)||void 0===r?void 0:r.lvl0:null===(o=e._highlightResult)||void 0===o||null===(a=o.hierarchy)||void 0===a?void 0:a.lvl0)||{}).value;return c&&hr.test(c)?c.replace(mr,""):c}function vr(){return(vr=Object.assign||function(e){for(var t=1;t0}));return e.state.query?!1===t?xt.createElement(Xn,e):xt.createElement(yr,e):xt.createElement(gr,br({},e,{hasCollections:t}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status}));function Sr(){return(Sr=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(t,["_highlightResult","_snippetResult"])),i=a.findIndex((function(e){return e.objectID===n.objectID}));i>-1&&a.splice(i,1),a.unshift(n),a=a.slice(0,r),o.setItem(a)},remove:function(e){a=a.filter((function(t){return t.objectID!==e.objectID})),o.setItem(a)},getAll:function(){return a}}}function jr(e){var t,n="algoliasearch-client-js-".concat(e.key),r=function(){return void 0===t&&(t=e.localStorage||window.localStorage),t},o=function(){return JSON.parse(r().getItem(n)||"{}")};return{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var n=JSON.stringify(e),r=o()[n];return Promise.all([r||t(),void 0!==r])})).then((function(e){var t=ee(e,2),r=t[0],o=t[1];return Promise.all([r,o||n.miss(r)])})).then((function(e){return ee(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var a=o();return a[JSON.stringify(e)]=t,r().setItem(n,JSON.stringify(a)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=o();delete t[JSON.stringify(e)],r().setItem(n,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){r().removeItem(n)}))}}}function Pr(e){var t=te(e.caches),n=t.shift();return void 0===n?{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},r=t();return r.then((function(e){return Promise.all([e,n.miss(e)])})).then((function(e){return ee(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(e,r,o).catch((function(){return Pr({caches:t}).get(e,r,o)}))},set:function(e,r){return n.set(e,r).catch((function(){return Pr({caches:t}).set(e,r)}))},delete:function(e){return n.delete(e).catch((function(){return Pr({caches:t}).delete(e)}))},clear:function(){return n.clear().catch((function(){return Pr({caches:t}).clear()}))}}}function kr(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},a=JSON.stringify(n);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);var i=r(),c=o&&o.miss||function(){return Promise.resolve()};return i.then((function(e){return c(e)})).then((function(){return i}))},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function Ir(e){for(var t=e.length-1;t>0;t--){var n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}function Cr(e,t){return t?(Object.keys(t).forEach((function(n){e[n]=t[n](e)})),e):e}function Dr(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r0?r:void 0,timeout:n.timeout||t,headers:n.headers||{},queryParameters:n.queryParameters||{},cacheable:n.cacheable}}var Tr={Read:1,Write:2,Any:3};function Lr(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return X(X({},e),{},{status:t,lastUpdate:Date.now()})}function Hr(e){return"string"==typeof e?{protocol:"https",url:e,accept:Tr.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||Tr.Any}}var Rr="POST";function Mr(e,t,n,r){var o,a,i,c=[],l=function(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:X(X({},e.data),t.data);return JSON.stringify(n)}}(n,r),u=(o=r,a=X(X({},e.headers),o.headers),i={},Object.keys(a).forEach((function(e){var t=a[e];i[e.toLowerCase()]=t})),i),s=n.method,f="GET"!==n.method?{}:X(X({},n.data),r.data),p=X(X(X({"x-algolia-agent":e.userAgent.value},e.queryParameters),f),r.queryParameters),m=0,h=function t(o,a){var i=o.pop();if(void 0===i)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Fr(c)};var f={data:l,headers:u,method:s,url:Vr(i,n.path,p),connectTimeout:a(m,e.timeouts.connect),responseTimeout:a(m,r.timeout)},h=function(e){var t={request:f,response:e,host:i,triesLeft:o.length};return c.push(t),t},d={onSucess:function(e){return function(e){try{return JSON.parse(e.content)}catch(t){throw{name:"DeserializationError",message:t.message,response:e}}}(e)},onRetry:function(n){var r=h(n);return n.isTimedOut&&m++,Promise.all([e.logger.info("Retryable failure",$r(r)),e.hostsCache.set(i,Lr(i,n.isTimedOut?3:2))]).then((function(){return t(o,a)}))},onFail:function(e){throw h(e),function(e,t){var n=e.content,r=e.status,o=n;try{o=JSON.parse(n).message}catch(a){}return{name:"ApiError",message:o,status:r,transporterStackTrace:t}}(e,Fr(c))}};return e.requester.send(f).then((function(e){return n=d,o=(r=t=e).status,r.isTimedOut||function(e){var t=e.isTimedOut,n=e.status;return!t&&0==~~n}(r)||2!=~~(o/100)&&4!=~~(o/100)?n.onRetry(t):2==~~(t.status/100)?n.onSucess(t):n.onFail(t);var t,n,r,o}))};return function(e,t){return Promise.all(t.map((function(t){return e.get(t,(function(){return Promise.resolve(Lr(t))}))}))).then((function(e){var n=e.filter((function(e){return 1===(t=e).status||Date.now()-t.lastUpdate>12e4;var t})),r=e.filter((function(e){return 3===(t=e).status&&Date.now()-t.lastUpdate<=12e4;var t})),o=[].concat(te(n),te(r));return{getTimeout:function(e,t){return(0===r.length&&0===e?1:r.length+3+e)*t},statelessHosts:o.length>0?o.map((function(e){return Hr(e)})):t}}))}(e.hostsCache,t).then((function(e){return h(te(e.statelessHosts).reverse(),e.getTimeout)}))}function qr(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var n="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(n)&&(t.value="".concat(t.value).concat(n)),t}};return t}function Vr(e,t,n){var r=Ur(n),o="".concat(e.protocol,"://").concat(e.url,"/").concat("/"===t.charAt(0)?t.substr(1):t);return r.length&&(o+="?".concat(r)),o}function Ur(e){return Object.keys(e).map((function(t){return Dr("%s=%s",t,(n=e[t],"[object Object]"===Object.prototype.toString.call(n)||"[object Array]"===Object.prototype.toString.call(n)?JSON.stringify(e[t]):e[t]));var n})).join("&")}function Fr(e){return e.map((function(e){return $r(e)}))}function $r(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return X(X({},e),{},{request:X(X({},e.request),{},{headers:X(X({},e.request.headers),t)})})}var Br=function(e){return function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r={transporter:e.transporter,appId:e.appId,indexName:t};return Cr(r,n.methods)}},zr=function(e){return function(t,n){var r=t.map((function(e){return X(X({},e),{},{params:Ur(e.params||{})})}));return e.transporter.read({method:Rr,path:"1/indexes/*/queries",data:{requests:r},cacheable:!0},n)}},Kr=function(e){return function(t,n){return Promise.all(t.map((function(t){var r=t.params,o=r.facetName,a=r.facetQuery,i=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(r,["facetName","facetQuery"]);return Br(e)(t.indexName,{methods:{searchForFacetValues:Qr}}).searchForFacetValues(o,a,X(X({},n),i))})))}},Wr=function(e){return function(t,n,r){return e.transporter.read({method:Rr,path:Dr("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:n},cacheable:!0},r)}},Jr=function(e){return function(t,n){return e.transporter.read({method:Rr,path:Dr("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},n)}},Qr=function(e){return function(t,n,r){return e.transporter.read({method:Rr,path:Dr("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:n},cacheable:!0},r)}};function Yr(e,t,n){return function(e){var t,n,r,o,a=e.appId,i=(t=void 0!==e.authMode?e.authMode:Ar,n=a,r=e.apiKey,o={"x-algolia-api-key":r,"x-algolia-application-id":n},{headers:function(){return t===Ar?o:{}},queryParameters:function(){return t===Nr?o:{}}}),c=function(e){var t=e.hostsCache,n=e.logger,r=e.requester,o=e.requestsCache,a=e.responsesCache,i=e.timeouts,c=e.userAgent,l=e.hosts,u=e.queryParameters,s={hostsCache:t,logger:n,requester:r,requestsCache:o,responsesCache:a,timeouts:i,userAgent:c,headers:e.headers,queryParameters:u,hosts:l.map((function(e){return Hr(e)})),read:function(e,t){var n=xr(t,s.timeouts.read),r=function(){return Mr(s,s.hosts.filter((function(e){return 0!=(e.accept&Tr.Read)})),e,n)};if(!0!==(void 0!==n.cacheable?n.cacheable:e.cacheable))return r();var o={request:e,mappedRequestOptions:n,transporter:{queryParameters:s.queryParameters,headers:s.headers}};return s.responsesCache.get(o,(function(){return s.requestsCache.get(o,(function(){return s.requestsCache.set(o,r()).then((function(e){return Promise.all([s.requestsCache.delete(o),e])}),(function(e){return Promise.all([s.requestsCache.delete(o),Promise.reject(e)])})).then((function(e){var t=ee(e,2);return t[0],t[1]}))}))}),{miss:function(e){return s.responsesCache.set(o,e)}})},write:function(e,t){return Mr(s,s.hosts.filter((function(e){return 0!=(e.accept&Tr.Write)})),e,xr(t,s.timeouts.write))}};return s}(X(X({hosts:[{url:"".concat(a,"-dsn.algolia.net"),accept:Tr.Read},{url:"".concat(a,".algolia.net"),accept:Tr.Write}].concat(Ir([{url:"".concat(a,"-1.algolianet.com")},{url:"".concat(a,"-2.algolianet.com")},{url:"".concat(a,"-3.algolianet.com")}]))},e),{},{headers:X(X(X({},i.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:X(X({},i.queryParameters()),e.queryParameters)}));return Cr({transporter:c,appId:a,addAlgoliaAgent:function(e,t){c.userAgent.add({segment:e,version:t})},clearCache:function(){return Promise.all([c.requestsCache.clear(),c.responsesCache.clear()]).then((function(){}))}},e.methods)}(X(X(X({},{appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(e){return new Promise((function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return n.setRequestHeader(t,e.headers[t])}));var r,o=function(e,r){return setTimeout((function(){n.abort(),t({status:0,content:r,isTimedOut:!0})}),1e3*e)},a=o(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(a),r=o(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(a),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(a),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))}},logger:(3,{debug:function(e,t){return Promise.resolve()},info:function(e,t){return Promise.resolve()},error:function(e,t){return console.error(e,t),Promise.resolve()}}),responsesCache:kr(),requestsCache:kr({serializable:!1}),hostsCache:Pr({caches:[jr({key:"".concat("4.8.5","-").concat(e)}),kr()]}),userAgent:qr("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Nr}),n),{},{methods:{search:zr,searchForFacetValues:Kr,multipleQueries:zr,multipleSearchForFacetValues:Kr,initIndex:function(e){return function(t){return Br(e)(t,{methods:{search:Jr,searchForFacetValues:Qr,findAnswers:Wr}})}}}}))}function Gr(){return(Gr=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n",highlightPostTag:"",hitsPerPage:20},s)}]).catch((function(e){throw"RetryError"===e.name&&o("error"),e})).then((function(e){var t=e.results[0],o=t.hits,a=t.nbHits,i=sr(o,(function(e){return dr(e)}));return n.context.searchSuggestions.length0&&(K(),L.current&&L.current.focus())}),[M,K]),xt.useEffect((function(){function e(){if(A.current){var e=.01*window.innerHeight;A.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),xt.createElement("div",Gr({ref:N},z({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===C.status&&"DocSearch-Container--Stalled","error"===C.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(e){e.target===e.currentTarget&&p()}}),xt.createElement("div",{className:"DocSearch-Modal",ref:A},xt.createElement("header",{className:"DocSearch-SearchBar",ref:x},xt.createElement(wr,Gr({},$,{state:C,autoFocus:0===M.length,onClose:p,inputRef:L,isFromSelection:Boolean(M)&&M===R}))),xt.createElement("div",{className:"DocSearch-Dropdown",ref:T},xt.createElement(Or,Gr({},$,{indexName:c,state:C,hitComponent:v,resultsFooterComponent:_,disableUserPersonalization:j,recentSearches:U,favoriteSearches:V,onItemClick:function(e){F(e),p()},inputRef:L}))),xt.createElement("footer",{className:"DocSearch-Footer"},xt.createElement(Rn,null))))}function ro(){return(ro=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n{for(var n in t||(t={}))a.call(t,n)&&c(e,n,t[n]);if(o)for(var n of o(t))i.call(t,n)&&c(e,n,t[n]);return e})({},this.searchConfig),e=n(t,r({container:"#docsearch"})),St(xt.createElement(io,G({},e,{transformSearchClient:function(t){return t.addAlgoliaAgent("docsearch.js","3.0.0-alpha.40"),e.transformSearchClient?e.transformSearchClient(t):t}})),function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof e?t.document.querySelector(e):e}(e.container,e.environment)))}}},[["render",function(e,t,n,r,o,a){return w(),S("div",co)}]])},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:u,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((e=>e.lang!==this.lang));return e.length?e[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const e=!this.showVersionPop,t=e?"add":"remove";document.body[`${t}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)}}},[["render",function(e,t,n,r,o,a){const i=g("search-input");return w(),S("div",lo,[P("div",uo,[P("div",so,[P("a",fo,[P("img",{src:n.config.logo},null,8,po),P("span",null,k(n.config.title),1)]),P("ul",mo,[(w(!0),S(E,null,j(n.config.links,((e,t)=>(w(),S("li",{key:t,class:"van-doc-header__top-nav-item"},[P("a",{class:"van-doc-header__link",target:"_blank",href:e.url},[e.logo?(w(),S("img",{key:0,src:e.logo},null,8,vo)):e.text?(w(),S("span",yo,k(e.text),1)):C("v-if",!0)],8,ho)])))),128)),n.versions?(w(),S("li",_o,[P("span",{class:"van-doc-header__cube van-doc-header__version",onClick:t[0]||(t[0]=(...e)=>a.toggleVersionPop&&a.toggleVersionPop(...e))},[N(k(o.packageVersion)+" ",1),I(x,{name:"van-doc-dropdown"},{default:A((()=>[o.showVersionPop?(w(),S("div",go,[(w(!0),S(E,null,j(n.versions,((e,t)=>(w(),S("div",{key:t,class:"van-doc-header__version-pop-item",onClick:t=>a.onSwitchVersion(e)},k(e.label),9,bo)))),128))])):C("v-if",!0)])),_:1})])],512)):C("v-if",!0),a.langLabel&&a.langLink?(w(),S("li",Oo,[P("a",{class:"van-doc-header__cube",href:a.langLink},k(a.langLabel),9,So)])):C("v-if",!0),a.searchConfig?(w(),b(i,{key:2,lang:n.lang,"search-config":a.searchConfig},null,8,["lang","search-config"])):C("v-if",!0)])])])])}]]),DocContent:l({name:"VanDocContent",computed:{currentPage(){const{path:e}=this.$route;return e?e.split("/").slice(-1)[0]:this.$route.name}},mounted(){[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((e=>{e.addEventListener("click",this.scrollToAnchor)}))},methods:{scrollToAnchor(e){e.target.id&&this.$router.push({name:this.$route.name,hash:"#"+e.target.id})}}},[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O(["van-doc-content",`van-doc-content--${a.currentPage}`])},[T(e.$slots,"default")],2)}]]),DocContainer:l(wo,[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":n.hasSimulator}])},[T(e.$slots,"default")],2)}]]),DocSimulator:l({name:"VanDocSimulator",props:{src:String},data:()=>({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}))}},[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O(["van-doc-simulator",{"van-doc-simulator-fixed":a.isFixed}])},[P("iframe",{ref:"iframe",src:n.src,style:D(a.simulatorStyle),frameborder:"0"},null,12,Eo)],2)}]])},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,t=e.reduce(((e,t)=>e.concat(t.items)),[]),n=this.$route.path.split("/").pop();let r;for(let o=0,a=t.length;o{switch(e.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next")}}))}}},Po={class:"van-doc"};const ko={class:"app"};var Io=l({components:{VanDoc:l(jo,[["render",function(e,t,n,r,o,a){const i=g("doc-header"),c=g("doc-nav"),l=g("doc-content"),u=g("doc-container"),s=g("doc-simulator");return w(),S("div",Po,[I(i,{lang:n.lang,config:n.config,versions:n.versions,"lang-configs":n.langConfigs,onSwitchVersion:t[0]||(t[0]=t=>e.$emit("switch-version",t))},null,8,["lang","config","versions","lang-configs"]),I(c,{lang:n.lang,"nav-config":n.config.nav},null,8,["lang","nav-config"]),I(u,{"has-simulator":n.hasSimulator},{default:A((()=>[I(l,null,{default:A((()=>[T(e.$slots,"default")])),_:3})])),_:3},8,["has-simulator"]),n.hasSimulator?(w(),b(s,{key:0,src:n.simulator},null,8,["src"])):C("v-if",!0)])}]])},data:()=>({hasSimulator:!0}),computed:{simulator(){var e,t;if(null==(e=s.site.simulator)?void 0:e.url)return null==(t=s.site.simulator)?void 0:t.url;return`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:e}=this.$route.meta;return e||""},langConfigs(){const{locales:e={}}=s.site;return Object.keys(e).map((t=>({lang:t,label:e[t].langLabel||""})))},config(){const{locales:e}=s.site;return e?e[this.lang]:s.site},versions:()=>s.site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(e){f(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(((e,t)=>[...e,...t.items]),[]).find((e=>e.path===this.$route.meta.name));t&&t.title?e=t.title+" - "+e:this.config.description&&(e+=` - ${this.config.description}`),document.title=e,this.hasSimulator=!(s.site.hideSimulator||this.config.hideSimulator||t&&t.hideSimulator)}}},[["render",function(e,t,n,r,o,a){const i=g("router-view"),c=g("van-doc");return w(),S("div",ko,[a.config?(w(),b(c,{key:0,lang:a.lang,config:a.config,versions:a.versions,simulator:a.simulator,"has-simulator":o.hasSimulator,"lang-configs":a.langConfigs},{default:A((()=>[I(i)])),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):C("v-if",!0)])}]]);const Co={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape:unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){!function(e){const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);const n=document.getSelection();if(!n)return;const r=n.rangeCount>0&&n.getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),r&&(n.removeAllRanges(),n.addRange(r))}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((()=>{this.copyStatus="ready"}),2e3)}}},Do={class:"demo-playground--code"},No={class:"demo-playground--code--actions"},Ao=(e=>(R("data-v-9efa7fdc"),e=e(),M(),e))((()=>P("span",null,null,-1))),xo=["data-status"],To=["innerHTML"];var Lo=l(Co,[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O({"demo-playground":!n.inline,transform:n.transform})},[n.inline?T(e.$slots,"default",{key:0},void 0,!0):(w(),S(E,{key:1},[P("div",{class:O(["demo-playground--previewer",{compact:n.compact}])},[T(e.$slots,"default",{},void 0,!0)],2),P("div",Do,[P("div",No,[Ao,P("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":o.copyStatus,onClick:t[0]||(t[0]=(...e)=>a.copySourceCode&&a.copySourceCode(...e))},null,8,xo),P("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:t[1]||(t[1]=(...e)=>a.toogleSource&&a.toogleSource(...e))})]),L(P("div",{innerHTML:a.unescape(n.codeSnippet),class:"demo-playground--code--content"},null,8,To),[[H,o.showSource]])])],64))],2)}],["__scopeId","data-v-9efa7fdc"]]);p&&location.replace("mobile.html"+location.hash);const{locales:Ho,defaultLang:Ro}=s.site;function Mo(e){const t=e.path.split("/")[1];return-1!==Object.keys(Ho).indexOf(t)?t:_()}m(Ro);const qo=q({history:V(),routes:function(){const e=[],t=Object.keys(d);return Ho?e.push({name:"notFound",path:"/:path(.*)+",redirect:e=>({name:Mo(e)})}):e.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),t.forEach((t=>{const{component:n,lang:r}=function(e){if(-1!==e.indexOf("_")){const t=e.split("_"),n=t.shift();return{component:`${y(n)}`,lang:t.join("-")}}return{component:`${y(e)}`,lang:""}}(t);"home"===n&&function(t,n){e.push({name:n||"home",path:`/${n||""}`,component:t,meta:{lang:n}})}(d[t],r),r?e.push({name:`${r}/${n}`,path:`/${r}/${n}`,component:d[t],meta:{lang:r,name:n}}):e.push({name:`${n}`,path:`/${n}`,component:d[t],meta:{name:n}})})),e}(),scrollBehavior:e=>e.hash?{el:e.hash}:{top:0}});qo.afterEach((()=>{U(v)})),!1!==(null==(e=s.site.simulator)?void 0:e.syncPathFromSimulator)&&h(qo),window.vueRouter=qo,window.app=F(Io).use(qo).component(Lo.name,Lo),setTimeout((()=>{window.app.mount("#app")}),0); diff --git a/vite/assets/mobile.c499ae33.js b/vite/assets/mobile.c499ae33.js deleted file mode 100644 index 7f9c9a93..00000000 --- a/vite/assets/mobile.c499ae33.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,e as t,a as n,l as o,g as a,f as s}from"./iframe-router.af4eced8.js";import{a as c,t as r,f as l,i,o as u,n as m,d,r as p,F as h,b as v,c as f,w as g,h as y,e as w,l as _,m as b,x as k,q as E,j as $,v as T,y as B,K as L,s as X}from"./vue-libs.1fd58d42.js";const Y={name:"DemoBlock",props:{card:Boolean,title:String}},K={class:"van-doc-demo-block"},O={key:0,class:"van-doc-demo-block__title"},j={key:1,class:"van-doc-demo-block__card"};var x=e(Y,[["render",function(e,t,n,o,a,s){return u(),c("div",K,[n.title?(u(),c("h2",O,r(n.title),1)):l("v-if",!0),n.card?(u(),c("div",j,[i(e.$slots,"default")])):i(e.$slots,"default",{key:2})])}]]);var z=e({name:"DemoSection",computed:{demoName(){const{meta:e}=this.$route||{};return e&&e.name?`demo-${t(e.name)}`:""}}},[["render",function(e,t,n,o,a,s){return u(),c("section",{class:m(["van-doc-demo-section",s.demoName])},[i(e.$slots,"default")],2)}]]);const N={},D={versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[]},S={},F={viewBox:"0 0 1024 1024"},M=[d("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),d("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)];const C={class:"demo-home-nav"},R={class:"demo-home-nav__title"},A={class:"demo-home-nav__group"};const q={class:"demo-home"},H=["src"],I={key:0,class:"demo-home__desc"};var P=e({components:{DemoHomeNav:e({components:{ArrowRight:e(S,[["render",function(e,t){return u(),c("svg",F,M)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(e,t,n,o,a,s){const l=p("arrow-right"),i=p("router-link");return u(),c("div",C,[d("div",R,r(n.group.title),1),d("div",A,[(u(!0),c(h,null,v(n.group.items,(e=>(u(),f(i,{class:"demo-home-nav__block",key:e.path,to:`${s.base}/${e.path}`},{default:g((()=>[y(r(e.title)+" ",1),w(l,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:e}=this.$route.meta;return e},config(){const{locales:e}=D;return e?e[this.lang]:D},smallTitle(){return this.config.title.length>=8}}},[["render",function(e,t,n,o,a,s){const i=p("demo-home-nav");return u(),c("div",q,[d("h1",{class:m(["demo-home__title",{"demo-home__title--small":s.smallTitle}])},[d("img",{src:s.config.logo},null,8,H),d("span",null,r(s.config.title),1)],2),s.config.description?(u(),c("h2",I,r(s.config.description),1)):l("v-if",!0),(u(!0),c(h,null,v(s.config.nav,((e,t)=>(u(),f(i,{key:t,lang:s.lang,group:e},null,8,["lang","group"])))),128))])}]]);const{locales:U,defaultLang:V}=D;function W(e){const t=e.path.split("/")[1];return-1!==Object.keys(U).indexOf(t)?t:a()}n(V);const G=_({history:b(),routes:function(){const e=[],n=Object.keys(N),o=U?Object.keys(U):[];return o.length?(e.push({name:"NotFound",path:"/:path(.*)+",redirect:e=>({name:W(e)})}),o.forEach((t=>{e.push({name:t,path:`/${t}`,component:P,meta:{lang:t}})}))):(e.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),e.push({name:"home",path:"/",component:P})),n.forEach((n=>{const a=t(n);o.length?o.forEach((t=>{e.push({name:`${t}/${a}`,path:`/${t}/${a}`,component:N[n],meta:{name:n,lang:t}})})):e.push({name:a,path:`/${a}`,component:N[n],meta:{name:n}})})),e}(),scrollBehavior:(e,t,n)=>n||{x:0,y:0}});k(G.currentRoute,(()=>{G.currentRoute.value.redirectedFrom||E(s)})),o(G),window.vueRouter=G;const J={class:"demo-nav"},Q={class:"demo-nav__title"},Z=["d"];var ee=e({components:{DemoNav:e({data:()=>({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("/")}}},[["render",function(e,t,n,o,a,s){return $((u(),c("div",J,[d("div",Q,r(s.title),1),(u(),c("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:t[0]||(t[0]=(...e)=>s.onBack&&s.onBack(...e))},[d("path",{fill:"#969799","fill-rule":"evenodd",d:a.path},null,8,Z)]))],512)),[[T,s.title]])}]])}},[["render",function(e,t,n,o,a,s){const r=p("demo-nav"),l=p("demo-section"),i=p("router-view");return u(),c(h,null,[w(r),w(i,null,{default:g((({Component:e})=>[(u(),f(L,null,[w(l,null,{default:g((()=>[(u(),f(B(e)))])),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var e,t="ontouchstart"in window;document.createTouch||(document.createTouch=function(e,t,o,a,s,c,r){return new n(t,o,{pageX:a,pageY:s,screenX:c,screenY:r,clientX:a-window.pageXOffset,clientY:s-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var e=a(),t=0;t{window.app.mount("#app")}),0); diff --git a/vite/assets/nested.10c14f50.js b/vite/assets/nested.10c14f50.js deleted file mode 100644 index ea848164..00000000 --- a/vite/assets/nested.10c14f50.js +++ /dev/null @@ -1 +0,0 @@ -import "./main.bec8a985.js"; diff --git a/vite/assets/nested.4a8a3fe1.js b/vite/assets/nested.4a8a3fe1.js deleted file mode 100644 index a9654e14..00000000 --- a/vite/assets/nested.4a8a3fe1.js +++ /dev/null @@ -1 +0,0 @@ -import"./main.6d70fb31.js"; diff --git a/vite/assets/nested.5a8fa4c0.js b/vite/assets/nested.5a8fa4c0.js deleted file mode 100644 index 358d683e..00000000 --- a/vite/assets/nested.5a8fa4c0.js +++ /dev/null @@ -1 +0,0 @@ -import"./main.206a7a43.js"; diff --git a/vite/assets/nested.69dfa8e2.js b/vite/assets/nested.69dfa8e2.js deleted file mode 100644 index 70d6d4f6..00000000 --- a/vite/assets/nested.69dfa8e2.js +++ /dev/null @@ -1 +0,0 @@ -import"./main.5e9c7f08.js"; diff --git a/vite/assets/nested.d8b7fefd.js b/vite/assets/nested.d8b7fefd.js deleted file mode 100644 index 904efee2..00000000 --- a/vite/assets/nested.d8b7fefd.js +++ /dev/null @@ -1 +0,0 @@ -import"./main.a57ec5f0.js"; diff --git a/vite/assets/nested.e4962f14.js b/vite/assets/nested.e4962f14.js deleted file mode 100644 index d7cb2e6d..00000000 --- a/vite/assets/nested.e4962f14.js +++ /dev/null @@ -1 +0,0 @@ -import"./main.33235344.js"; diff --git a/vite/assets/style.195d65f1.css b/vite/assets/style.195d65f1.css deleted file mode 100644 index ce68060b..00000000 --- a/vite/assets/style.195d65f1.css +++ /dev/null @@ -1 +0,0 @@ -.van-doc-nav{background-color:#fff;box-shadow:0 8px 12px #ebedf0;left:0;max-width:220px;min-width:220px;overflow-y:scroll;padding:24px 0;position:fixed;z-index:1}@media (min-width:1680px){.van-doc-nav{left:50%;margin-left:-840px}}.van-doc-nav::-webkit-scrollbar{background-color:initial;height:6px;width:6px}.van-doc-nav::-webkit-scrollbar-thumb{background-color:initial;border-radius:6px}.van-doc-nav:hover::-webkit-scrollbar-thumb{background-color:#455a6433}.van-doc-nav__group{margin-bottom:16px;padding-left:6px}.van-doc-nav__title{color:#455a64;font-size:15px;font-weight:600;line-height:28px;padding:8px 0 8px 24px}.van-doc-nav__item a{color:#455a64;display:block;font-size:14px;line-height:20px;margin:8px 0;padding:8px 0 8px 24px;transition:color .2s}.van-doc-nav__item a.active,.van-doc-nav__item a:hover{color:#4fc08d}.van-doc-nav__item a.active{background-color:#ebfff0;border-radius:999px;font-weight:600}.van-doc-nav__item a span{font-size:13px}@media (max-width:1300px){.van-doc-nav__item a{font-size:13px}.van-doc-nav__item:active{font-size:14px}}:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-webkit-input-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0}}.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:fade-in .1s ease-in forwards;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"\bb "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:1px;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}#docsearch{display:inline-block;vertical-align:middle}.DocSearch-Button{background:#f7f8fa;height:32px}.DocSearch-Button:hover{box-shadow:none}.DocSearch-Search-Icon{height:18px;width:18px}.DocSearch-Button-Key{font-size:12px}.van-doc-header{background-color:#001938;-webkit-user-select:none;user-select:none;width:100%}.van-doc-header__top{align-items:center;display:flex;height:64px;padding:0 24px}.van-doc-header__top-nav{flex:1;font-size:0;text-align:right}.van-doc-header__top-nav>li{display:inline-block;position:relative;vertical-align:middle}.van-doc-header__top-nav-item{margin-left:16px}.van-doc-header__top-nav-title{display:block;font-size:15px}.van-doc-header__cube{background:#f7f8fa;border:1px solid hsla(0,0%,100%,.7);border-radius:20px;color:#001938;cursor:pointer;display:block;font-size:14px;line-height:30px;padding:0 12px;position:relative;text-align:center;transition:.3s ease-in-out}.van-doc-header__version{padding-right:20px}.van-doc-header__version:after{border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:1px;color:#001938;content:"";height:5px;position:absolute;right:9px;top:10px;transform:rotate(-45deg);width:5px}.van-doc-header__version-pop{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #ebedf0;color:#333;left:0;line-height:36px;overflow:hidden;position:absolute;text-align:left;top:34px;transform-origin:top;transition:.2s cubic-bezier(.215,.61,.355,1);width:100%;z-index:99}.van-doc-header__version-pop-item{padding-left:12px;transition:.2s}.van-doc-header__version-pop-item:hover{background-color:#f7f8fa;color:#1989fa}.van-doc-header__logo{display:block}.van-doc-header__logo img,.van-doc-header__logo span{display:inline-block;vertical-align:middle}.van-doc-header__logo img{margin-right:12px;width:28px}.van-doc-header__logo span{color:#fff;font-size:22px}.van-doc-header__link span{color:#fff;font-size:16px}.van-doc-header__link img{display:block;height:30px;transition:.3s cubic-bezier(.175,.885,.32,1.275);width:30px}.van-doc-header__link img:hover{transform:scale(1.2)}.van-doc-dropdown-enter,.van-doc-dropdown-leave-active{opacity:0;transform:scaleY(0)}.van-doc-card{background-color:#fff;border-radius:20px;box-shadow:0 8px 12px #ebedf0;margin-bottom:24px;padding:24px}.van-doc-card>blockquote a,.van-doc-card>p a,.van-doc-card>table a,.van-doc-card>ul a{-webkit-font-smoothing:auto;color:#1989fa;margin:0 1px}.van-doc-card>blockquote a:hover,.van-doc-card>p a:hover,.van-doc-card>table a:hover,.van-doc-card>ul a:hover{color:#0570db}.van-doc-card>blockquote a:active,.van-doc-card>p a:active,.van-doc-card>table a:active,.van-doc-card>ul a:active{color:#0456a9}.van-doc-card>h3,.van-doc-card>h4,.van-doc-card>h5,.van-doc-card>h6{color:#323233;font-weight:400;line-height:1.5}.van-doc-card>h3[id],.van-doc-card>h4[id],.van-doc-card>h5[id],.van-doc-card>h6[id]{cursor:pointer}.van-doc-card>h3{font-size:19px;font-weight:600;margin-bottom:16px}.van-doc-card>h4{font-size:16px}.van-doc-card>h4,.van-doc-card>h5{font-weight:600;margin:24px 0 12px}.van-doc-card>h5{font-size:15px}.van-doc-card>blockquote p,.van-doc-card>p{color:#34495e;font-size:15px;line-height:26px}.van-doc-card>blockquote p strong,.van-doc-card>p strong{color:#000}.van-doc-card>table{border-collapse:collapse;color:#34495e;font-size:14px;line-height:1.5;margin-top:12px;width:100%}.van-doc-card>table th{font-weight:600;padding:8px 10px;text-align:left}.van-doc-card>table th:first-child{padding-left:0}.van-doc-card>table th:last-child{padding-right:0}.van-doc-card>table td{border-top:1px solid #f1f4f8;padding:8px}.van-doc-card>table td:first-child{padding-left:0}.van-doc-card>table td:first-child code{background-color:#1989fa1a;border-radius:20px;color:#1989fa;font-size:11px;font-weight:600;margin:0;padding:2px 6px}.van-doc-card>table td:last-child{padding-right:0}.van-doc-card>table em{-webkit-font-smoothing:auto;color:#4fc08d;display:inline-block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-style:normal;max-width:300px}.van-doc-card>ol li,.van-doc-card>ul li{color:#34495e;font-size:15px;line-height:26px;margin:5px 0 5px 10px;padding-left:15px;position:relative}.van-doc-card>ol li:before,.van-doc-card>ul li:before{border:1px solid #666;border-radius:50%;box-sizing:border-box;content:"";height:6px;left:0;margin-top:10px;position:absolute;top:0;width:6px}.van-doc-card>hr{border:0;border-top:1px solid #eee;margin:30px 0}.van-doc-card>ol code,.van-doc-card>p code,.van-doc-card>table code,.van-doc-card>ul code{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;border-radius:4px;display:inline;font-family:inherit;font-size:14px;font-weight:600;margin:0 2px;padding:2px 5px;word-break:keep-all}.van-doc-card>blockquote{background-color:#ecf9ff;border-radius:20px;margin:16px 0 0;padding:16px}.van-doc-card>img,.van-doc-card>p img{border-radius:20px;margin:16px 0;width:100%}.van-doc-content{flex:1;padding:0 0 75px;position:relative}.van-doc-content .van-doc-markdown-body{overflow:hidden;padding:24px}.van-doc-content .van-doc-markdown-body h1,.van-doc-content .van-doc-markdown-body h2{color:#323233;font-weight:400;line-height:1.5}.van-doc-content .van-doc-markdown-body h1[id],.van-doc-content .van-doc-markdown-body h2[id]{cursor:pointer}.van-doc-content .van-doc-markdown-body h1{cursor:default;font-size:30px;margin:0 0 30px}.van-doc-content .van-doc-markdown-body h2{font-size:25px;margin:45px 0 20px}.van-doc-content--changelog strong{display:block;font-size:15px;font-weight:600;margin:24px 0 12px}.van-doc-content--changelog h3+p code{margin:0}.van-doc-content--changelog h3 a{color:inherit;font-size:20px}.van-doc-container{box-sizing:border-box;overflow:hidden;padding-left:220px}.van-doc-container--with-simulator{padding-right:384px}.van-doc-simulator{background:#fafafa;border-radius:20px;box-shadow:0 8px 12px #ebedf0;box-sizing:border-box;min-width:360px;overflow:hidden;position:absolute;right:24px;top:88px;width:360px;z-index:1}@media (max-width:1100px){.van-doc-simulator{left:750px;right:auto}}@media (min-width:1680px){.van-doc-simulator{margin-right:-816px;right:50%}}.van-doc-simulator-fixed{position:fixed;top:24px}.van-doc-simulator iframe{display:block;width:100%}code{word-wrap:break-word;-webkit-font-smoothing:auto;background-color:#f8f8f8;border-radius:20px;color:#58727e;display:block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-weight:400;line-height:26px;overflow-x:auto;padding:16px 20px;position:relative;white-space:pre-wrap}pre{margin:20px 0 0}pre+p{margin-top:20px}.hljs{background:#fff;display:block;overflow-x:auto;padding:.5em}.hljs-subst{color:#58727e}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#4fc08d}.hljs-comment,.hljs-quote{color:#999}.hljs-attribute,.hljs-keyword,.hljs-params{color:#8080ff}.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp,.hljs-variable{color:#eb6f6f}.hljs-attr,.hljs-built_in,.hljs-doctag,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{color:#4994df}.hljs-emphasis{font-style:italic}.van-doc-intro{padding-top:20px;text-align:center}.van-doc-intro p{margin-bottom:20px}.demo-playground[data-v-9efa7fdc]{background-color:#fff;border:1px solid #ebedf1;border-radius:1px;margin:24px 0}.demo-playground.transform[data-v-9efa7fdc]{transform:translate(0)}.demo-playground--previewer[data-v-9efa7fdc]{border-bottom:1px solid #ebedf1;padding:40px 24px}.demo-playground--previewer.compact[data-v-9efa7fdc]{padding:0}.demo-playground--code--actions[data-v-9efa7fdc]{align-items:center;display:flex;height:40px;padding:0 1em}.demo-playground--code--actions>a[data-v-9efa7fdc]:not(:last-child),.demo-playground--code--actions>button[data-v-9efa7fdc]:not(:last-child){margin-right:8px}.demo-playground--code--actions>a[data-v-9efa7fdc]{display:flex}.demo-playground--code--actions button[data-v-9efa7fdc]{border:0;box-sizing:border-box;cursor:pointer;display:inline-block;height:16px;opacity:.6;outline:none;padding:0;position:relative;transition:opacity .2s,background .2s;width:16px}.demo-playground--code--actions button[data-v-9efa7fdc]:after{bottom:-8px;content:"";left:-8px;position:absolute;right:-8px;top:-8px}.demo-playground--code--actions button[data-v-9efa7fdc]:hover{opacity:.8}.demo-playground--code--actions button[data-v-9efa7fdc]:active{opacity:.9}.demo-playground--code--actions button[data-v-9efa7fdc]:disabled{cursor:not-allowed;opacity:.2}.demo-playground--code--actions button[role=codesandbox][data-v-9efa7fdc]{background-position:-18px 0}.demo-playground--code--actions button[role=codepen][data-v-9efa7fdc]{background-position:-36px 0}.demo-playground--code--actions button[role=source][data-v-9efa7fdc]{background-position:-72px 0}.demo-playground--code--actions button[role=change-jsx][data-v-9efa7fdc]{background-position:-90px 0}.demo-playground--code--actions button[role=change-tsx][data-v-9efa7fdc]{background-position:-108px 0}.demo-playground--code--actions button[role=open-demo][data-v-9efa7fdc]{background-position:-126px 0}.demo-playground--code--actions button[role=motions][data-v-9efa7fdc]{background-position:-162px 0}.demo-playground--code--actions button[role=sketch-component][data-v-9efa7fdc]{background-position:-182px 0}.demo-playground--code--actions button[role=sketch-group][data-v-9efa7fdc]{background-position:-200px 0}.demo-playground--code--actions button[role=copy][data-status=ready][data-v-9efa7fdc]{background-position:-54px 0}.demo-playground--code--actions button[role=copy][data-status=copied][data-v-9efa7fdc]{background-position:-54px -16px;pointer-events:none}.demo-playground--code--actions button[role=refresh][data-v-9efa7fdc]{background-position-x:-144px}.demo-playground--code--actions>span[data-v-9efa7fdc]{display:inline-block;flex:1}.demo-playground--code--content[data-v-9efa7fdc]{border-top:1px dashed #ebedf1}.demo-playground--code--content[data-v-9efa7fdc] pre{margin:0}.demo-playground--code--content[data-v-9efa7fdc] .language-html{border-radius:0}.action-icon[data-v-9efa7fdc]{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAA8CAMAAADc4HoZAAABFFBMVEUAAABGT2VGTmZaYXpCvGtIUGg3tGBGTmU3s2A/tmFKUGxFTmRFTWVQWmxFTWRJUGZFTWRGTmRLWWpFTWRGTmVGTmVLVG1FTmRGTWVHTmVFTWRHUGdFTWRGT2ZFTWVGTmU6t2I7xHA3tF9GTWRIT2dFTmRGTmVFTWQ3s2BFTWRGTmVGTmZKUmVFTWRFTWRGTWRGTmVcXHxFTmVFTmVGTmVFTWRIUGdGTWVNU3FGT2ZGTmVHTmVFTWRFTWVFTmVITWRHUGZFTWVFTmRGTmZGTmVFTWVLU2g4tF83tGBFTWQ3s1/LzdT09faoq7Zwdoieoq58gpLj5OeCh5fq6+2/wsmTmKWQlKJfZnpIUGfU1tu0t8BOVWynlyFSAAAASXRSTlMAkoAHEkDQ/dgYFuf0C8gj+KQQmm1oEuyNWNg53kSXfCYI5tEtzq7ivbOgTBy924R1BfHUibcpYw1JcU7v+7E3Nav6XVPDGraPqQuKawAACh1JREFUeNrsm2lT6kgUhg9QFFUkgWDYZfnAVsi+KQJeQdGqt1xm7jZ3lv//PyYdhe7QWQw1zP0w83xQsY9Um4fTp7vToeBczmaX5MN5rXZO/+NGJzGuLejnkw3dADehLHkQyceAWD5C/0my9XqWPLlCK9WHQScirUMk18g7J9ZosYLFajFyT8siLIpuyQkHKBDw4NgYsnDr0Xybaii60rjYzsmdbrqnw0TvpbvkhjYuzinygDXJXLewR2/O/f73w1cWCUj0LkmiU8SeYsc9LXMZIJNjyXkqmbWQCzV8ICawzLO8jh3q4IyciYfugMnMMGYT4C4UJ2fOEbbSc0EyrVp4T/7u4kiZs6jANjwBxkupWMLG7NIlLZvxM+As3nRLTsD/N5xtekmHIEQuhBAoBuREtmaXWVgB41Smc97JbMZA7pqcKKgopbu7FC1BLUgD22MyeVnPWD0bonLLeCQRhIkzQNnz6gHiK0HmxeF4qkKPSsVygh2x2q50SmlZIGIyiQo8OY+XGVExOLVM2WVRbAkDSma0609aQaxKMgOo6YjQ77Tc8d3laxPRxS7R564yI8WSFkymgUNuJqlbomQLisblpnNAf0nrB1j06rTsA7n0SE5L2skkh+Qcm2CP3vGV2QHWp5Ypu4wDosumRpyzNrBwcFmqk4166dBmrFgJ5aeDKhvSklWLBLokgBhcaF3bFL59lV45EQsR3QLVfV0uAuNFhEy2JaC/fcveMVC8ltKSy3RITtjRl34yDSj0r8rMNkyXQksByJOdCmIdslNAKS7V0BIKdpmGQ1+S9slA2IVa60My89HoRKyZ5XTD8rhBX1DwEN85Gw53drIsT6W0FGTKyYmYtgcI427rI1NB5bQyZZeTuNCSXaEpBX2Cotm9qWqdJOqqajN85y8zTC6E8SGZGalmjja4uaQC0OUy0UzSAckNTKS0FGTKyYmYbfQP42brcFGr/X5+N/XDNVG+36+eXCZ3Kbbkbd644cHBW6bpnTlx0vZO6PL0NI/LE8uksxtUqQ7sUgpoAfp0TgLzqQ4oAFkkeFqadCwFxJMz4SKTwogVpIsaBtrv+qdQzZ8ibSB8cpncJW+Z68iQTBq5EXG6N6UIvTHVr2hPpHTX9ZY5Rf0ImfIEyEMmFWHQmk89gHKhBShCP68UoHVfFtZnqV0yahWYVLTdJyMFwE0ms8l+cnFJfWyIuM2TyuQuecsW4xFJMMcd0S1PzBRQGdkaOKosc4DKYn1amSM2rb4H5lwmaVUVqEXJItoA1LBGokwoHWKUS0AqBZTKxOgocJXJl74uLi+Be+I2TyuTu+SkkCInmrZS3kNXkMnnF9RFT5Qpv1cVJkYwmRzxlavMIRClmTgBYmIeU1bpfC+WqS6RKPOKOTxjaWlZXSpWcp4xq1dBZIaBTxH+v95kySLyCQifSCZ3WYuTnYbDKNvpnVMVPUpulvSGPiFRJlq39M5E95bZNYZXD1icTOaoHophQ1EgLcpkrBOsdLJimbglsstMzpnGxZtSE0vjwlKalGVyuEzZJSXQIxJs2kVVDJOLC6NKVK/0jLWrzEzPYB/G6SxV9pJZq2XlyXSHDqlAjW5XjaSCzfsfom2XiX3hbEN4y3G/r64agy7ZifRrXOa6wmMkmT7YZfbwTuPsUoGi2WUyWOlkxZJIkskGWD7YkpWcb4NtAJlVm8tHYEF2m6KofW/pXLe2INxkTs0QeszB5N5rmJVckg55RzI+gTpEToFySRZ1GAcy94lg8AmOtmtSh2QnNebrTCnmWJlzHRatYeRegbomWSZpU2Cq0UdkdgLKlBMzA2EZNpJkmnmZQ9EwqtSDMijqGU+ZeeSqD/pCkikhZ6ZsU8cNc+kuc3EoU0tgT4hE5q3ELgZCTIBh1nECVAWm0fMs3daA8bV4wUN7f0nhAkdCgkztnx9mZ5iQ+zDLSLxdx5bZFK+Tp8wZDNLqFEAmr5myzRh36TfM8obXX01eAeyaqT4LhYvouMccLzNSRIlZmwGzLnGskVWWWWhBmgBZlXPpOwHieEyA5joGsktZJvumXBN5yzSQW/puGhy2XGBDTjZbWDGXLhMgRZ4ArQF8f375+vnP5y/gFawKYHzlEuOzNPGRSVFgSkT37LcCYDSidpnnCUCQaTmUlyaW1QAyxaVJAVjLLmWZViQSUW+Z9RsWE1DmFuMIOZAddIMtTSrA69PTy/dfXr798QMo7GVmzjXyijleJqVwV7d6t4rL2+NlUeY5GE6bBnNp0yCQTG4zBYVIWGa6y6SMCmDoKZOuFQDVYDI1FWlyJtimQR8/vv76/O319enrl89/wdjLZEnsFeO/nee6NImv8MAW6zpSssylKLMMxrHbebJM2eZohYrkUpL5HhKfqohdesokbZED1oFk0gC5M/Kje+e7nafi9fnl8y8mn1+ef6AtyXSNOV4mZd4q7wAo+8s8fqOdA7httJd3Hwlpo12WeUZUv0PaVWaCuTSVqxgGkznPYTYiP/w32lfAr0+/fAF+++2PV6ApyvSK8ZcpL034LbAWclm2kEU/4i8z8C0wf5mcENQIcTxkJnuTOMV1ZBxkniceqYkmnRmtR4ooQWVSJwbD16b/LbAGTEffnvD705NpC3lZphxzrEwbYVZg2Dd+c9pZZpCb08FltrChj8nsAGpiDD0py9RWUIvAkFWOuwcFuA0ok4bALCuKswQFvTk9gMnL85fvz99h0ttsmp8+tdt9LlOKuXC5OS1fOa42c3jUUrW6sIGetB8bwVCUuUCgYyPBZa6B+w/KpHsVgOq4adBhTQ8RonIOwE3ACRBjGMNquJ/ODcc9YgQ8NtJVYfLn568vMImtVrmcoiitVmLuFON6bMRfpiOPY/QOD3T16juZ9V6AA10+MhkkE0Ys6yuzXFgTY35fzTw6L03iV8MOMbTt8CpJwWVa02C9PSyUt8NPKtBK0hEHuoYAzAH0G0z0c+IEjIGALDMfdeYCuD88ahmrxJnMuBE77qilLHPkKnOZlhLz9CcNnFu06hg7lLBGRx21DMHkr9+ZJ6HFKya4TC9atIOf6woBIX6SK8AhaM8D0D//ELR3ryLXlV4xV0qElhEiz0PQbcNoOx+CvlJgIT6H4xUTHCMGd1LE4aVTKpa+jyf4y/z5jycE7lXwxxO0gtFu5svECRrz/4NDf7dvxjYQwzAMdGEE8RaWq2ySh/cf6OGoyQCRANLkBHenWqnzxyGU6aVP0zRN0zTtmzUru64ZWZ923kC0n6tT9WnnnL+y5R51pj6L9ahlx7k6UR8kVt2Sh1W35GHVLXlYdUseVt2Sh1W3fK8aDmuSOmyfelyGwpqkjtvnnvMyENYcdeA+fSxaDNYUdeg+TovBmqAO3sdpMVjD1eH7OC0Ga7A6QR+nxWANVafo47QYrIHqJH0eWhDWMHWaPosWhTVInahPHzisIepUffrAYQ1QJ+vTgVgD1IP6/AHM0QJdY511NAAAAABJRU5ErkJggg==) no-repeat 0 0/230px auto}.van-doc-demo-block__title{color:#455a6499;font-size:14px;font-weight:400;line-height:16px;margin:0;padding:32px 16px 16px}.van-doc-demo-block__card{border-radius:8px;margin:12px 12px 0;overflow:hidden}.van-doc-demo-block__title+.van-doc-demo-block__card{margin-top:0}.van-doc-demo-block:first-of-type .van-doc-demo-block__title{padding-top:20px}.van-doc-demo-section{box-sizing:border-box;min-height:calc(100vh - 56px);padding-bottom:20px}.demo-home-nav__title{color:#455a6499;font-size:14px;margin:24px 0 8px 16px}.demo-home-nav__block{background:#f7f8fa;border-radius:99px;color:#323233;display:flex;font-size:14px;font-weight:600;line-height:40px;margin:0 0 12px;padding-left:20px;position:relative;transition:background .3s}.demo-home-nav__block:hover{background:#eef0f4}.demo-home-nav__block:active{background:#e4e8ee}.demo-home-nav__icon{height:16px;margin-top:-8px;position:absolute;right:16px;top:50%;width:16px}.demo-home{background:#fff;box-sizing:border-box;min-height:100vh;padding:46px 20px 20px;width:100%}.demo-home__desc,.demo-home__title{font-weight:400;line-height:1;padding-left:16px;-webkit-user-select:none;user-select:none}.demo-home__title{font-size:32px;margin:0 0 16px}.demo-home__title img,.demo-home__title span{display:inline-block;vertical-align:middle}.demo-home__title img{width:32px}.demo-home__title span{margin-left:16px}.demo-home__title--small{font-size:24px}.demo-home__desc{color:#455a6499;font-size:14px;margin:0 0 40px}.demo-nav{align-items:center;background-color:#fff;display:flex;height:56px;justify-content:center;position:relative}.demo-nav__title{font-size:17px;font-weight:600;text-transform:capitalize}.demo-nav__back{cursor:pointer;height:24px;left:16px;position:absolute;top:16px;width:24px}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;color:#323233;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;font-size:16px;min-width:1100px;overflow-x:auto}body,p{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{margin:0 auto;width:1680px}}body{min-width:100vw}::-webkit-scrollbar{background:transparent;width:0} diff --git a/vite/assets/style.7e455d8b.css b/vite/assets/style.7e455d8b.css deleted file mode 100644 index 0d6a6318..00000000 --- a/vite/assets/style.7e455d8b.css +++ /dev/null @@ -1 +0,0 @@ -.van-doc-nav{background-color:#fff;box-shadow:0 8px 12px #ebedf0;left:0;max-width:220px;min-width:220px;overflow-y:scroll;padding:24px 0;position:fixed;z-index:1}@media (min-width:1680px){.van-doc-nav{left:50%;margin-left:-840px}}.van-doc-nav::-webkit-scrollbar{background-color:initial;height:6px;width:6px}.van-doc-nav::-webkit-scrollbar-thumb{background-color:initial;border-radius:6px}.van-doc-nav:hover::-webkit-scrollbar-thumb{background-color:rgba(69,90,100,.2)}.van-doc-nav__group{margin-bottom:16px;padding-left:6px}.van-doc-nav__title{color:#455a64;font-size:15px;font-weight:600;line-height:28px;padding:8px 0 8px 24px}.van-doc-nav__item a{color:#455a64;display:block;font-size:14px;line-height:20px;margin:8px 0;padding:8px 0 8px 24px;transition:color .2s}.van-doc-nav__item a.active,.van-doc-nav__item a:hover{color:#4fc08d}.van-doc-nav__item a.active{background-color:#ebfff0;border-radius:999px;font-weight:600}.van-doc-nav__item a span{font-size:13px}@media (max-width:1300px){.van-doc-nav__item a{font-size:13px}.van-doc-nav__item:active{font-size:14px}}/*! @docsearch/css 3.0.0-alpha.40 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,0.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-webkit-input-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0}}.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:fade-in .1s ease-in forwards;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{stroke-width:var(--docsearch-icon-stroke-width);color:var(--docsearch-muted-color)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:1px;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}#docsearch{display:inline-block;vertical-align:middle}.DocSearch-Button{background:#f7f8fa;height:32px}.DocSearch-Button:hover{box-shadow:none}.DocSearch-Search-Icon{height:18px;width:18px}.DocSearch-Button-Key{font-size:12px}.van-doc-header{background-color:#001938;-webkit-user-select:none;user-select:none;width:100%}.van-doc-header__top{align-items:center;display:flex;height:64px;padding:0 24px}.van-doc-header__top-nav{flex:1;font-size:0;text-align:right}.van-doc-header__top-nav>li{display:inline-block;position:relative;vertical-align:middle}.van-doc-header__top-nav-item{margin-left:16px}.van-doc-header__top-nav-title{display:block;font-size:15px}.van-doc-header__cube{background:#f7f8fa;border:1px solid hsla(0,0%,100%,.7);border-radius:20px;color:#001938;cursor:pointer;display:block;font-size:14px;line-height:30px;padding:0 12px;position:relative;text-align:center;transition:.3s ease-in-out}.van-doc-header__version{padding-right:20px}.van-doc-header__version:after{border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:1px;color:#001938;content:"";height:5px;position:absolute;right:9px;top:10px;transform:rotate(-45deg);width:5px}.van-doc-header__version-pop{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #ebedf0;color:#333;left:0;line-height:36px;overflow:hidden;position:absolute;text-align:left;top:34px;transform-origin:top;transition:.2s cubic-bezier(.215,.61,.355,1);width:100%;z-index:99}.van-doc-header__version-pop-item{padding-left:12px;transition:.2s}.van-doc-header__version-pop-item:hover{background-color:#f7f8fa;color:#1989fa}.van-doc-header__logo{display:block}.van-doc-header__logo img,.van-doc-header__logo span{display:inline-block;vertical-align:middle}.van-doc-header__logo img{margin-right:12px;width:28px}.van-doc-header__logo span{color:#fff;font-size:22px}.van-doc-header__link span{color:#fff;font-size:16px}.van-doc-header__link img{display:block;height:30px;transition:.3s cubic-bezier(.175,.885,.32,1.275);width:30px}.van-doc-header__link img:hover{transform:scale(1.2)}.van-doc-dropdown-enter,.van-doc-dropdown-leave-active{opacity:0;transform:scaleY(0)}.van-doc-card{background-color:#fff;border-radius:20px;box-shadow:0 8px 12px #ebedf0;margin-bottom:24px;padding:24px}.van-doc-card>blockquote a,.van-doc-card>p a,.van-doc-card>table a,.van-doc-card>ul a{-webkit-font-smoothing:auto;color:#1989fa;margin:0 1px}.van-doc-card>blockquote a:hover,.van-doc-card>p a:hover,.van-doc-card>table a:hover,.van-doc-card>ul a:hover{color:#0570db}.van-doc-card>blockquote a:active,.van-doc-card>p a:active,.van-doc-card>table a:active,.van-doc-card>ul a:active{color:#0456a9}.van-doc-card>h3,.van-doc-card>h4,.van-doc-card>h5,.van-doc-card>h6{color:#323233;font-weight:400;line-height:1.5}.van-doc-card>h3[id],.van-doc-card>h4[id],.van-doc-card>h5[id],.van-doc-card>h6[id]{cursor:pointer}.van-doc-card>h3{font-size:19px;font-weight:600;margin-bottom:16px}.van-doc-card>h4{font-size:16px}.van-doc-card>h4,.van-doc-card>h5{font-weight:600;margin:24px 0 12px}.van-doc-card>h5{font-size:15px}.van-doc-card>blockquote p,.van-doc-card>p{color:#34495e;font-size:15px;line-height:26px}.van-doc-card>blockquote p strong,.van-doc-card>p strong{color:#000}.van-doc-card>table{border-collapse:collapse;color:#34495e;font-size:14px;line-height:1.5;margin-top:12px;width:100%}.van-doc-card>table th{font-weight:600;padding:8px 10px;text-align:left}.van-doc-card>table th:first-child{padding-left:0}.van-doc-card>table th:last-child{padding-right:0}.van-doc-card>table td{border-top:1px solid #f1f4f8;padding:8px}.van-doc-card>table td:first-child{padding-left:0}.van-doc-card>table td:first-child code{background-color:rgba(25,137,250,.1);border-radius:20px;color:#1989fa;font-size:11px;font-weight:600;margin:0;padding:2px 6px}.van-doc-card>table td:last-child{padding-right:0}.van-doc-card>table em{-webkit-font-smoothing:auto;color:#4fc08d;display:inline-block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-style:normal;max-width:300px}.van-doc-card>ol li,.van-doc-card>ul li{color:#34495e;font-size:15px;line-height:26px;margin:5px 0 5px 10px;padding-left:15px;position:relative}.van-doc-card>ol li:before,.van-doc-card>ul li:before{border:1px solid #666;border-radius:50%;box-sizing:border-box;content:"";height:6px;left:0;margin-top:10px;position:absolute;top:0;width:6px}.van-doc-card>hr{border:0;border-top:1px solid #eee;margin:30px 0}.van-doc-card>ol code,.van-doc-card>p code,.van-doc-card>table code,.van-doc-card>ul code{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;border-radius:4px;display:inline;font-family:inherit;font-size:14px;font-weight:600;margin:0 2px;padding:2px 5px;word-break:keep-all}.van-doc-card>blockquote{background-color:#ecf9ff;border-radius:20px;margin:16px 0 0;padding:16px}.van-doc-card>img,.van-doc-card>p img{border-radius:20px;margin:16px 0;width:100%}.van-doc-content{flex:1;padding:0 0 75px;position:relative}.van-doc-content .van-doc-markdown-body{overflow:hidden;padding:24px}.van-doc-content .van-doc-markdown-body h1,.van-doc-content .van-doc-markdown-body h2{color:#323233;font-weight:400;line-height:1.5}.van-doc-content .van-doc-markdown-body h1[id],.van-doc-content .van-doc-markdown-body h2[id]{cursor:pointer}.van-doc-content .van-doc-markdown-body h1{cursor:default;font-size:30px;margin:0 0 30px}.van-doc-content .van-doc-markdown-body h2{font-size:25px;margin:45px 0 20px}.van-doc-content--changelog strong{display:block;font-size:15px;font-weight:600;margin:24px 0 12px}.van-doc-content--changelog h3+p code{margin:0}.van-doc-content--changelog h3 a{color:inherit;font-size:20px}.van-doc-container{box-sizing:border-box;overflow:hidden;padding-left:220px}.van-doc-container--with-simulator{padding-right:384px}.van-doc-simulator{background:#fafafa;border-radius:20px;box-shadow:0 8px 12px #ebedf0;box-sizing:border-box;min-width:360px;overflow:hidden;position:absolute;right:24px;top:88px;width:360px;z-index:1}@media (max-width:1100px){.van-doc-simulator{left:750px;right:auto}}@media (min-width:1680px){.van-doc-simulator{margin-right:-816px;right:50%}}.van-doc-simulator-fixed{position:fixed;top:24px}.van-doc-simulator iframe{display:block;width:100%}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;color:#323233;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;font-size:16px;min-width:1100px;overflow-x:auto}body,p{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{margin:0 auto;width:1680px}}code{word-wrap:break-word;-webkit-font-smoothing:auto;background-color:#f8f8f8;border-radius:20px;color:#58727e;display:block;font-family:Source Code Pro,Monaco,Inconsolata,monospace;font-size:14px;font-weight:400;line-height:26px;overflow-x:auto;padding:16px 20px;position:relative;white-space:pre-wrap}pre{margin:20px 0 0}pre+p{margin-top:20px}.hljs{background:#fff;display:block;overflow-x:auto;padding:.5em}.hljs-subst{color:#58727e}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#4fc08d}.hljs-comment,.hljs-quote{color:#999}.hljs-attribute,.hljs-keyword,.hljs-params{color:#8080ff}.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp,.hljs-variable{color:#eb6f6f}.hljs-attr,.hljs-built_in,.hljs-doctag,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{color:#4994df}.hljs-emphasis{font-style:italic}.van-doc-intro{padding-top:20px;text-align:center}.van-doc-intro p{margin-bottom:20px}.demo-playground[data-v-9efa7fdc]{background-color:#fff;border:1px solid #ebedf1;border-radius:1px;margin:24px 0}.demo-playground.transform[data-v-9efa7fdc]{transform:translate(0)}.demo-playground--previewer[data-v-9efa7fdc]{border-bottom:1px solid #ebedf1;padding:40px 24px}.demo-playground--previewer.compact[data-v-9efa7fdc]{padding:0}.demo-playground--code--actions[data-v-9efa7fdc]{align-items:center;display:flex;height:40px;padding:0 1em}.demo-playground--code--actions>a[data-v-9efa7fdc]:not(:last-child),.demo-playground--code--actions>button[data-v-9efa7fdc]:not(:last-child){margin-right:8px}.demo-playground--code--actions>a[data-v-9efa7fdc]{display:flex}.demo-playground--code--actions button[data-v-9efa7fdc]{border:0;box-sizing:border-box;cursor:pointer;display:inline-block;height:16px;opacity:.6;outline:none;padding:0;position:relative;transition:opacity .2s,background .2s;width:16px}.demo-playground--code--actions button[data-v-9efa7fdc]:after{bottom:-8px;content:"";left:-8px;position:absolute;right:-8px;top:-8px}.demo-playground--code--actions button[data-v-9efa7fdc]:hover{opacity:.8}.demo-playground--code--actions button[data-v-9efa7fdc]:active{opacity:.9}.demo-playground--code--actions button[data-v-9efa7fdc]:disabled{cursor:not-allowed;opacity:.2}.demo-playground--code--actions button[role=codesandbox][data-v-9efa7fdc]{background-position:-18px 0}.demo-playground--code--actions button[role=codepen][data-v-9efa7fdc]{background-position:-36px 0}.demo-playground--code--actions button[role=source][data-v-9efa7fdc]{background-position:-72px 0}.demo-playground--code--actions button[role=change-jsx][data-v-9efa7fdc]{background-position:-90px 0}.demo-playground--code--actions button[role=change-tsx][data-v-9efa7fdc]{background-position:-108px 0}.demo-playground--code--actions button[role=open-demo][data-v-9efa7fdc]{background-position:-126px 0}.demo-playground--code--actions button[role=motions][data-v-9efa7fdc]{background-position:-162px 0}.demo-playground--code--actions button[role=sketch-component][data-v-9efa7fdc]{background-position:-182px 0}.demo-playground--code--actions button[role=sketch-group][data-v-9efa7fdc]{background-position:-200px 0}.demo-playground--code--actions button[role=copy][data-status=ready][data-v-9efa7fdc]{background-position:-54px 0}.demo-playground--code--actions button[role=copy][data-status=copied][data-v-9efa7fdc]{background-position:-54px -16px;pointer-events:none}.demo-playground--code--actions button[role=refresh][data-v-9efa7fdc]{background-position-x:-144px}.demo-playground--code--actions>span[data-v-9efa7fdc]{display:inline-block;flex:1}.demo-playground--code--content[data-v-9efa7fdc]{border-top:1px dashed #ebedf1}.demo-playground--code--content[data-v-9efa7fdc] pre{margin:0}.demo-playground--code--content[data-v-9efa7fdc] .language-html{border-radius:0}.action-icon[data-v-9efa7fdc]{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAA8CAMAAADc4HoZAAABFFBMVEUAAABGT2VGTmZaYXpCvGtIUGg3tGBGTmU3s2A/tmFKUGxFTmRFTWVQWmxFTWRJUGZFTWRGTmRLWWpFTWRGTmVGTmVLVG1FTmRGTWVHTmVFTWRHUGdFTWRGT2ZFTWVGTmU6t2I7xHA3tF9GTWRIT2dFTmRGTmVFTWQ3s2BFTWRGTmVGTmZKUmVFTWRFTWRGTWRGTmVcXHxFTmVFTmVGTmVFTWRIUGdGTWVNU3FGT2ZGTmVHTmVFTWRFTWVFTmVITWRHUGZFTWVFTmRGTmZGTmVFTWVLU2g4tF83tGBFTWQ3s1/LzdT09faoq7Zwdoieoq58gpLj5OeCh5fq6+2/wsmTmKWQlKJfZnpIUGfU1tu0t8BOVWynlyFSAAAASXRSTlMAkoAHEkDQ/dgYFuf0C8gj+KQQmm1oEuyNWNg53kSXfCYI5tEtzq7ivbOgTBy924R1BfHUibcpYw1JcU7v+7E3Nav6XVPDGraPqQuKawAACh1JREFUeNrsm2lT6kgUhg9QFFUkgWDYZfnAVsi+KQJeQdGqt1xm7jZ3lv//PyYdhe7QWQw1zP0w83xQsY9Um4fTp7vToeBczmaX5MN5rXZO/+NGJzGuLejnkw3dADehLHkQyceAWD5C/0my9XqWPLlCK9WHQScirUMk18g7J9ZosYLFajFyT8siLIpuyQkHKBDw4NgYsnDr0Xybaii60rjYzsmdbrqnw0TvpbvkhjYuzinygDXJXLewR2/O/f73w1cWCUj0LkmiU8SeYsc9LXMZIJNjyXkqmbWQCzV8ICawzLO8jh3q4IyciYfugMnMMGYT4C4UJ2fOEbbSc0EyrVp4T/7u4kiZs6jANjwBxkupWMLG7NIlLZvxM+As3nRLTsD/N5xtekmHIEQuhBAoBuREtmaXWVgB41Smc97JbMZA7pqcKKgopbu7FC1BLUgD22MyeVnPWD0bonLLeCQRhIkzQNnz6gHiK0HmxeF4qkKPSsVygh2x2q50SmlZIGIyiQo8OY+XGVExOLVM2WVRbAkDSma0609aQaxKMgOo6YjQ77Tc8d3laxPRxS7R564yI8WSFkymgUNuJqlbomQLisblpnNAf0nrB1j06rTsA7n0SE5L2skkh+Qcm2CP3vGV2QHWp5Ypu4wDosumRpyzNrBwcFmqk4166dBmrFgJ5aeDKhvSklWLBLokgBhcaF3bFL59lV45EQsR3QLVfV0uAuNFhEy2JaC/fcveMVC8ltKSy3RITtjRl34yDSj0r8rMNkyXQksByJOdCmIdslNAKS7V0BIKdpmGQ1+S9slA2IVa60My89HoRKyZ5XTD8rhBX1DwEN85Gw53drIsT6W0FGTKyYmYtgcI427rI1NB5bQyZZeTuNCSXaEpBX2Cotm9qWqdJOqqajN85y8zTC6E8SGZGalmjja4uaQC0OUy0UzSAckNTKS0FGTKyYmYbfQP42brcFGr/X5+N/XDNVG+36+eXCZ3Kbbkbd644cHBW6bpnTlx0vZO6PL0NI/LE8uksxtUqQ7sUgpoAfp0TgLzqQ4oAFkkeFqadCwFxJMz4SKTwogVpIsaBtrv+qdQzZ8ibSB8cpncJW+Z68iQTBq5EXG6N6UIvTHVr2hPpHTX9ZY5Rf0ImfIEyEMmFWHQmk89gHKhBShCP68UoHVfFtZnqV0yahWYVLTdJyMFwE0ms8l+cnFJfWyIuM2TyuQuecsW4xFJMMcd0S1PzBRQGdkaOKosc4DKYn1amSM2rb4H5lwmaVUVqEXJItoA1LBGokwoHWKUS0AqBZTKxOgocJXJl74uLi+Be+I2TyuTu+SkkCInmrZS3kNXkMnnF9RFT5Qpv1cVJkYwmRzxlavMIRClmTgBYmIeU1bpfC+WqS6RKPOKOTxjaWlZXSpWcp4xq1dBZIaBTxH+v95kySLyCQifSCZ3WYuTnYbDKNvpnVMVPUpulvSGPiFRJlq39M5E95bZNYZXD1icTOaoHophQ1EgLcpkrBOsdLJimbglsstMzpnGxZtSE0vjwlKalGVyuEzZJSXQIxJs2kVVDJOLC6NKVK/0jLWrzEzPYB/G6SxV9pJZq2XlyXSHDqlAjW5XjaSCzfsfom2XiX3hbEN4y3G/r64agy7ZifRrXOa6wmMkmT7YZfbwTuPsUoGi2WUyWOlkxZJIkskGWD7YkpWcb4NtAJlVm8tHYEF2m6KofW/pXLe2INxkTs0QeszB5N5rmJVckg55RzI+gTpEToFySRZ1GAcy94lg8AmOtmtSh2QnNebrTCnmWJlzHRatYeRegbomWSZpU2Cq0UdkdgLKlBMzA2EZNpJkmnmZQ9EwqtSDMijqGU+ZeeSqD/pCkikhZ6ZsU8cNc+kuc3EoU0tgT4hE5q3ELgZCTIBh1nECVAWm0fMs3daA8bV4wUN7f0nhAkdCgkztnx9mZ5iQ+zDLSLxdx5bZFK+Tp8wZDNLqFEAmr5myzRh36TfM8obXX01eAeyaqT4LhYvouMccLzNSRIlZmwGzLnGskVWWWWhBmgBZlXPpOwHieEyA5joGsktZJvumXBN5yzSQW/puGhy2XGBDTjZbWDGXLhMgRZ4ArQF8f375+vnP5y/gFawKYHzlEuOzNPGRSVFgSkT37LcCYDSidpnnCUCQaTmUlyaW1QAyxaVJAVjLLmWZViQSUW+Z9RsWE1DmFuMIOZAddIMtTSrA69PTy/dfXr798QMo7GVmzjXyijleJqVwV7d6t4rL2+NlUeY5GE6bBnNp0yCQTG4zBYVIWGa6y6SMCmDoKZOuFQDVYDI1FWlyJtimQR8/vv76/O319enrl89/wdjLZEnsFeO/nee6NImv8MAW6zpSssylKLMMxrHbebJM2eZohYrkUpL5HhKfqohdesokbZED1oFk0gC5M/Kje+e7nafi9fnl8y8mn1+ef6AtyXSNOV4mZd4q7wAo+8s8fqOdA7httJd3Hwlpo12WeUZUv0PaVWaCuTSVqxgGkznPYTYiP/w32lfAr0+/fAF+++2PV6ApyvSK8ZcpL034LbAWclm2kEU/4i8z8C0wf5mcENQIcTxkJnuTOMV1ZBxkniceqYkmnRmtR4ooQWVSJwbD16b/LbAGTEffnvD705NpC3lZphxzrEwbYVZg2Dd+c9pZZpCb08FltrChj8nsAGpiDD0py9RWUIvAkFWOuwcFuA0ok4bALCuKswQFvTk9gMnL85fvz99h0ttsmp8+tdt9LlOKuXC5OS1fOa42c3jUUrW6sIGetB8bwVCUuUCgYyPBZa6B+w/KpHsVgOq4adBhTQ8RonIOwE3ACRBjGMNquJ/ODcc9YgQ8NtJVYfLn568vMImtVrmcoiitVmLuFON6bMRfpiOPY/QOD3T16juZ9V6AA10+MhkkE0Ys6yuzXFgTY35fzTw6L03iV8MOMbTt8CpJwWVa02C9PSyUt8NPKtBK0hEHuoYAzAH0G0z0c+IEjIGALDMfdeYCuD88ahmrxJnMuBE77qilLHPkKnOZlhLz9CcNnFu06hg7lLBGRx21DMHkr9+ZJ6HFKya4TC9atIOf6woBIX6SK8AhaM8D0D//ELR3ryLXlV4xV0qElhEiz0PQbcNoOx+CvlJgIT6H4xUTHCMGd1LE4aVTKpa+jyf4y/z5jycE7lXwxxO0gtFu5svECRrz/4NDf7dvxjYQwzAMdGEE8RaWq2ySh/cf6OGoyQCRANLkBHenWqnzxyGU6aVP0zRN0zTtmzUru64ZWZ923kC0n6tT9WnnnL+y5R51pj6L9ahlx7k6UR8kVt2Sh1W35GHVLXlYdUseVt2Sh1W3fK8aDmuSOmyfelyGwpqkjtvnnvMyENYcdeA+fSxaDNYUdeg+TovBmqAO3sdpMVjD1eH7OC0Ga7A6QR+nxWANVafo47QYrIHqJH0eWhDWMHWaPosWhTVInahPHzisIepUffrAYQ1QJ+vTgVgD1IP6/AHM0QJdY511NAAAAABJRU5ErkJggg==") no-repeat 0 0/230px auto}.van-doc-demo-block__title{color:rgba(69,90,100,.6);font-size:14px;font-weight:400;line-height:16px;margin:0;padding:32px 16px 16px}.van-doc-demo-block__card{border-radius:8px;margin:12px 12px 0;overflow:hidden}.van-doc-demo-block__title+.van-doc-demo-block__card{margin-top:0}.van-doc-demo-block:first-of-type .van-doc-demo-block__title{padding-top:20px}.van-doc-demo-section{box-sizing:border-box;min-height:calc(100vh - 56px);padding-bottom:20px}.demo-home-nav__title{color:rgba(69,90,100,.6);font-size:14px;margin:24px 0 8px 16px}.demo-home-nav__block{background:#f7f8fa;border-radius:99px;color:#323233;display:flex;font-size:14px;font-weight:600;line-height:40px;margin:0 0 12px;padding-left:20px;position:relative;transition:background .3s}.demo-home-nav__block:hover{background:#eef0f4}.demo-home-nav__block:active{background:#e4e8ee}.demo-home-nav__icon{height:16px;margin-top:-8px;position:absolute;right:16px;top:50%;width:16px}.demo-home{background:#fff;box-sizing:border-box;min-height:100vh;padding:46px 20px 20px;width:100%}.demo-home__desc,.demo-home__title{font-weight:400;line-height:1;padding-left:16px;-webkit-user-select:none;user-select:none}.demo-home__title{font-size:32px;margin:0 0 16px}.demo-home__title img,.demo-home__title span{display:inline-block;vertical-align:middle}.demo-home__title img{width:32px}.demo-home__title span{margin-left:16px}.demo-home__title--small{font-size:24px}.demo-home__desc{color:rgba(69,90,100,.6);font-size:14px;margin:0 0 40px}.demo-nav{align-items:center;background-color:#fff;display:flex;height:56px;justify-content:center;position:relative}.demo-nav__title{font-size:17px;font-weight:600;text-transform:capitalize}.demo-nav__back{cursor:pointer;height:24px;left:16px;position:absolute;top:16px;width:24px}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+1ea0-1ef9,u+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}body{-webkit-font-smoothing:antialiased;background-color:#f7f8fa;color:#323233;font-family:Open Sans,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;font-size:16px;min-width:1100px;overflow-x:auto}body,p{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.van-doc-row{width:100%}@media (min-width:1680px){.van-doc-row{margin:0 auto;width:1680px}}body{min-width:100vw}::-webkit-scrollbar{background:transparent;width:0} \ No newline at end of file diff --git a/vite/assets/vue-libs.1fd58d42.js b/vite/assets/vue-libs.1fd58d42.js deleted file mode 100644 index 65d302d7..00000000 --- a/vite/assets/vue-libs.1fd58d42.js +++ /dev/null @@ -1,6 +0,0 @@ -function e(e,t){const n=Object.create(null),o=e.split(",");for(let r=0;r!!n[e.toLowerCase()]:e=>!!n[e]}const t=e("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function n(e){return!!e||""===e}function o(e){if(w(e)){const t={};for(let n=0;n{if(e){const n=e.split(s);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function i(e){let t="";if(S(e))t=e;else if(w(e))for(let n=0;nnull==e?"":w(e)||k(e)&&(e.toString===R||!E(e.toString))?JSON.stringify(e,a,2):String(e),a=(e,t)=>t&&t.__v_isRef?a(e,t.value):x(t)?{[`Map(${t.size})`]:[...t.entries()].reduce(((e,[t,n])=>(e[`${t} =>`]=n,e)),{})}:C(t)?{[`Set(${t.size})`]:[...t.values()]}:!k(t)||w(t)||P(t)?t:String(t),u={},f=[],p=()=>{},d=()=>!1,h=/^on[^a-z]/,v=e=>h.test(e),m=e=>e.startsWith("onUpdate:"),g=Object.assign,y=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},b=Object.prototype.hasOwnProperty,_=(e,t)=>b.call(e,t),w=Array.isArray,x=e=>"[object Map]"===F(e),C=e=>"[object Set]"===F(e),E=e=>"function"==typeof e,S=e=>"string"==typeof e,A=e=>"symbol"==typeof e,k=e=>null!==e&&"object"==typeof e,O=e=>k(e)&&E(e.then)&&E(e.catch),R=Object.prototype.toString,F=e=>R.call(e),P=e=>"[object Object]"===F(e),$=e=>S(e)&&"NaN"!==e&&"-"!==e[0]&&""+parseInt(e,10)===e,T=e(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),j=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},M=/-(\w)/g,L=j((e=>e.replace(M,((e,t)=>t?t.toUpperCase():"")))),I=/\B([A-Z])/g,B=j((e=>e.replace(I,"-$1").toLowerCase())),V=j((e=>e.charAt(0).toUpperCase()+e.slice(1))),U=j((e=>e?`on${V(e)}`:"")),N=(e,t)=>!Object.is(e,t),D=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},W=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let z;let G;const H=[];class K{constructor(e=!1){this.active=!0,this.effects=[],this.cleanups=[],!e&&G&&(this.parent=G,this.index=(G.scopes||(G.scopes=[])).push(this)-1)}run(e){if(this.active)try{return this.on(),e()}finally{this.off()}}on(){this.active&&(H.push(this),G=this)}off(){this.active&&(H.pop(),G=H[H.length-1])}stop(e){if(this.active){if(this.effects.forEach((e=>e.stop())),this.cleanups.forEach((e=>e())),this.scopes&&this.scopes.forEach((e=>e.stop(!0))),this.parent&&!e){const e=this.parent.scopes.pop();e&&e!==this&&(this.parent.scopes[this.index]=e,e.index=this.index)}this.active=!1}}}const X=e=>{const t=new Set(e);return t.w=0,t.n=0,t},Q=e=>(e.w&ee)>0,Y=e=>(e.n&ee)>0,Z=new WeakMap;let J=0,ee=1;const te=[];let ne;const oe=Symbol(""),re=Symbol("");class se{constructor(e,t=null,n){this.fn=e,this.scheduler=t,this.active=!0,this.deps=[],function(e,t){(t=t||G)&&t.active&&t.effects.push(e)}(this,n)}run(){if(!this.active)return this.fn();if(!te.includes(this))try{return te.push(ne=this),ce.push(ie),ie=!0,ee=1<<++J,J<=30?(({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let o=0;o0?te[e-1]:void 0}}stop(){this.active&&(le(this),this.onStop&&this.onStop(),this.active=!1)}}function le(e){const{deps:t}=e;if(t.length){for(let n=0;n{("length"===t||t>=o)&&i.push(e)}));else switch(void 0!==n&&i.push(l.get(n)),t){case"add":w(e)?$(n)&&i.push(l.get("length")):(i.push(l.get(oe)),x(e)&&i.push(l.get(re)));break;case"delete":w(e)||(i.push(l.get(oe)),x(e)&&i.push(l.get(re)));break;case"set":x(e)&&i.push(l.get(oe))}if(1===i.length)i[0]&&ve(i[0]);else{const e=[];for(const t of i)t&&e.push(...t);ve(X(e))}}function ve(e,t){for(const n of w(e)?e:[...e])(n!==ne||n.allowRecurse)&&(n.scheduler?n.scheduler():n.run())}const me=e("__proto__,__v_isRef,__isVue"),ge=new Set(Object.getOwnPropertyNames(Symbol).map((e=>Symbol[e])).filter(A)),ye=Ce(),be=Ce(!1,!0),_e=Ce(!0),we=xe();function xe(){const e={};return["includes","indexOf","lastIndexOf"].forEach((t=>{e[t]=function(...e){const n=lt(this);for(let t=0,r=this.length;t{e[t]=function(...e){ae();const n=lt(this)[t].apply(this,e);return ue(),n}})),e}function Ce(e=!1,t=!1){return function(n,o,r){if("__v_isReactive"===o)return!e;if("__v_isReadonly"===o)return e;if("__v_raw"===o&&r===(e?t?Ze:Ye:t?Qe:Xe).get(n))return n;const s=w(n);if(!e&&s&&_(we,o))return Reflect.get(we,o,r);const l=Reflect.get(n,o,r);if(A(o)?ge.has(o):me(o))return l;if(e||fe(n,0,o),t)return l;if(pt(l)){return!s||!$(o)?l.value:l}return k(l)?e?tt(l):et(l):l}}function Ee(e=!1){return function(t,n,o,r){let s=t[n];if(!e&&(o=lt(o),s=lt(s),!w(t)&&pt(s)&&!pt(o)))return s.value=o,!0;const l=w(t)&&$(n)?Number(n)!0,deleteProperty:(e,t)=>!0},ke=g({},Se,{get:be,set:Ee(!0)}),Oe=e=>e,Re=e=>Reflect.getPrototypeOf(e);function Fe(e,t,n=!1,o=!1){const r=lt(e=e.__v_raw),s=lt(t);t!==s&&!n&&fe(r,0,t),!n&&fe(r,0,s);const{has:l}=Re(r),i=o?Oe:n?at:ct;return l.call(r,t)?i(e.get(t)):l.call(r,s)?i(e.get(s)):void(e!==r&&e.get(t))}function Pe(e,t=!1){const n=this.__v_raw,o=lt(n),r=lt(e);return e!==r&&!t&&fe(o,0,e),!t&&fe(o,0,r),e===r?n.has(e):n.has(e)||n.has(r)}function $e(e,t=!1){return e=e.__v_raw,!t&&fe(lt(e),0,oe),Reflect.get(e,"size",e)}function Te(e){e=lt(e);const t=lt(this);return Re(t).has.call(t,e)||(t.add(e),he(t,"add",e,e)),this}function je(e,t){t=lt(t);const n=lt(this),{has:o,get:r}=Re(n);let s=o.call(n,e);s||(e=lt(e),s=o.call(n,e));const l=r.call(n,e);return n.set(e,t),s?N(t,l)&&he(n,"set",e,t):he(n,"add",e,t),this}function Me(e){const t=lt(this),{has:n,get:o}=Re(t);let r=n.call(t,e);r||(e=lt(e),r=n.call(t,e)),o&&o.call(t,e);const s=t.delete(e);return r&&he(t,"delete",e,void 0),s}function Le(){const e=lt(this),t=0!==e.size,n=e.clear();return t&&he(e,"clear",void 0,void 0),n}function Ie(e,t){return function(n,o){const r=this,s=r.__v_raw,l=lt(s),i=t?Oe:e?at:ct;return!e&&fe(l,0,oe),s.forEach(((e,t)=>n.call(o,i(e),i(t),r)))}}function Be(e,t,n){return function(...o){const r=this.__v_raw,s=lt(r),l=x(s),i="entries"===e||e===Symbol.iterator&&l,c="keys"===e&&l,a=r[e](...o),u=n?Oe:t?at:ct;return!t&&fe(s,0,c?re:oe),{next(){const{value:e,done:t}=a.next();return t?{value:e,done:t}:{value:i?[u(e[0]),u(e[1])]:u(e),done:t}},[Symbol.iterator](){return this}}}}function Ve(e){return function(...t){return"delete"!==e&&this}}function Ue(){const e={get(e){return Fe(this,e)},get size(){return $e(this)},has:Pe,add:Te,set:je,delete:Me,clear:Le,forEach:Ie(!1,!1)},t={get(e){return Fe(this,e,!1,!0)},get size(){return $e(this)},has:Pe,add:Te,set:je,delete:Me,clear:Le,forEach:Ie(!1,!0)},n={get(e){return Fe(this,e,!0)},get size(){return $e(this,!0)},has(e){return Pe.call(this,e,!0)},add:Ve("add"),set:Ve("set"),delete:Ve("delete"),clear:Ve("clear"),forEach:Ie(!0,!1)},o={get(e){return Fe(this,e,!0,!0)},get size(){return $e(this,!0)},has(e){return Pe.call(this,e,!0)},add:Ve("add"),set:Ve("set"),delete:Ve("delete"),clear:Ve("clear"),forEach:Ie(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((r=>{e[r]=Be(r,!1,!1),n[r]=Be(r,!0,!1),t[r]=Be(r,!1,!0),o[r]=Be(r,!0,!0)})),[e,n,t,o]}const[Ne,De,qe,We]=Ue();function ze(e,t){const n=t?e?We:qe:e?De:Ne;return(t,o,r)=>"__v_isReactive"===o?!e:"__v_isReadonly"===o?e:"__v_raw"===o?t:Reflect.get(_(n,o)&&o in t?n:t,o,r)}const Ge={get:ze(!1,!1)},He={get:ze(!1,!0)},Ke={get:ze(!0,!1)},Xe=new WeakMap,Qe=new WeakMap,Ye=new WeakMap,Ze=new WeakMap;function Je(e){return e.__v_skip||!Object.isExtensible(e)?0:function(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((e=>F(e).slice(8,-1))(e))}function et(e){return e&&e.__v_isReadonly?e:nt(e,!1,Se,Ge,Xe)}function tt(e){return nt(e,!0,Ae,Ke,Ye)}function nt(e,t,n,o,r){if(!k(e))return e;if(e.__v_raw&&(!t||!e.__v_isReactive))return e;const s=r.get(e);if(s)return s;const l=Je(e);if(0===l)return e;const i=new Proxy(e,2===l?o:n);return r.set(e,i),i}function ot(e){return rt(e)?ot(e.__v_raw):!(!e||!e.__v_isReactive)}function rt(e){return!(!e||!e.__v_isReadonly)}function st(e){return ot(e)||rt(e)}function lt(e){const t=e&&e.__v_raw;return t?lt(t):e}function it(e){return q(e,"__v_skip",!0),e}const ct=e=>k(e)?et(e):e,at=e=>k(e)?tt(e):e;function ut(e){pe()&&((e=lt(e)).dep||(e.dep=X()),de(e.dep))}function ft(e,t){(e=lt(e)).dep&&ve(e.dep)}function pt(e){return Boolean(e&&!0===e.__v_isRef)}function dt(e,t){return pt(e)?e:new ht(e,t)}class ht{constructor(e,t){this._shallow=t,this.dep=void 0,this.__v_isRef=!0,this._rawValue=t?e:lt(e),this._value=t?e:ct(e)}get value(){return ut(this),this._value}set value(e){e=this._shallow?e:lt(e),N(e,this._rawValue)&&(this._rawValue=e,this._value=this._shallow?e:ct(e),ft(this))}}function vt(e){return pt(e)?e.value:e}const mt={get:(e,t,n)=>vt(Reflect.get(e,t,n)),set:(e,t,n,o)=>{const r=e[t];return pt(r)&&!pt(n)?(r.value=n,!0):Reflect.set(e,t,n,o)}};function gt(e){return ot(e)?e:new Proxy(e,mt)}class yt{constructor(e,t,n){this._setter=t,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new se(e,(()=>{this._dirty||(this._dirty=!0,ft(this))})),this.__v_isReadonly=n}get value(){const e=lt(this);return ut(e),e._dirty&&(e._dirty=!1,e._value=e.effect.run()),e._value}set value(e){this._setter(e)}}function bt(e,t){let n,o;const r=E(e);r?(n=e,o=p):(n=e.get,o=e.set);return new yt(n,o,r||!o)}function _t(e,t,...n){const o=e.vnode.props||u;let r=n;const s=t.startsWith("update:"),l=s&&t.slice(7);if(l&&l in o){const e=`${"modelValue"===l?"model":l}Modifiers`,{number:t,trim:s}=o[e]||u;s?r=n.map((e=>e.trim())):t&&(r=n.map(W))}let i,c=o[i=U(t)]||o[i=U(L(t))];!c&&s&&(c=o[i=U(B(t))]),c&&Wo(c,e,6,r);const a=o[i+"Once"];if(a){if(e.emitted){if(e.emitted[i])return}else e.emitted={};e.emitted[i]=!0,Wo(a,e,6,r)}}function wt(e,t,n=!1){const o=t.emitsCache,r=o.get(e);if(void 0!==r)return r;const s=e.emits;let l={},i=!1;if(!E(e)){const o=e=>{const n=wt(e,t,!0);n&&(i=!0,g(l,n))};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}return s||i?(w(s)?s.forEach((e=>l[e]=null)):g(l,s),o.set(e,l),l):(o.set(e,null),null)}function xt(e,t){return!(!e||!v(t))&&(t=t.slice(2).replace(/Once$/,""),_(e,t[0].toLowerCase()+t.slice(1))||_(e,B(t))||_(e,t))}Promise.resolve();let Ct=null,Et=null;function St(e){const t=Ct;return Ct=e,Et=e&&e.type.__scopeId||null,t}function At(e){Et=e}function kt(){Et=null}function Ot(e,t=Ct,n){if(!t)return e;if(e._n)return e;const o=(...n)=>{o._d&&lo(-1);const r=St(t),s=e(...n);return St(r),o._d&&lo(1),s};return o._n=!0,o._c=!0,o._d=!0,o}function Rt(e){const{type:t,vnode:n,proxy:o,withProxy:r,props:s,propsOptions:[l],slots:i,attrs:c,emit:a,render:u,renderCache:f,data:p,setupState:d,ctx:h,inheritAttrs:v}=e;let g,y;const b=St(e);try{if(4&n.shapeFlag){const e=r||o;g=xo(u.call(e,e,f,s,d,p,h)),y=c}else{const e=t;0,g=xo(e.length>1?e(s,{attrs:c,slots:i,emit:a}):e(s,null)),y=t.props?c:Ft(c)}}catch(w){no.length=0,zo(w,e,1),g=go(eo)}let _=g;if(y&&!1!==v){const e=Object.keys(y),{shapeFlag:t}=_;e.length&&7&t&&(l&&e.some(m)&&(y=Pt(y,l)),_=yo(_,y))}return n.dirs&&(_.dirs=_.dirs?_.dirs.concat(n.dirs):n.dirs),n.transition&&(_.transition=n.transition),g=_,St(b),g}const Ft=e=>{let t;for(const n in e)("class"===n||"style"===n||v(n))&&((t||(t={}))[n]=e[n]);return t},Pt=(e,t)=>{const n={};for(const o in e)m(o)&&o.slice(9)in t||(n[o]=e[o]);return n};function $t(e,t,n){const o=Object.keys(t);if(o.length!==Object.keys(e).length)return!0;for(let r=0;r1)return n&&E(t)?t.call(o.proxy):t}}const Mt=[Function,Array],Lt={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Mt,onEnter:Mt,onAfterEnter:Mt,onEnterCancelled:Mt,onBeforeLeave:Mt,onLeave:Mt,onAfterLeave:Mt,onLeaveCancelled:Mt,onBeforeAppear:Mt,onAppear:Mt,onAfterAppear:Mt,onAppearCancelled:Mt},setup(e,{slots:t}){const n=jo(),o=function(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return on((()=>{e.isMounted=!0})),ln((()=>{e.isUnmounting=!0})),e}();let r;return()=>{const s=t.default&&Dt(t.default(),!0);if(!s||!s.length)return;const l=lt(e),{mode:i}=l,c=s[0];if(o.isLeaving)return Vt(c);const a=Ut(c);if(!a)return Vt(c);const u=Bt(a,l,o,n);Nt(a,u);const f=n.subTree,p=f&&Ut(f);let d=!1;const{getTransitionKey:h}=a.type;if(h){const e=h();void 0===r?r=e:e!==r&&(r=e,d=!0)}if(p&&p.type!==eo&&(!fo(a,p)||d)){const e=Bt(p,l,o,n);if(Nt(p,e),"out-in"===i)return o.isLeaving=!0,e.afterLeave=()=>{o.isLeaving=!1,n.update()},Vt(c);"in-out"===i&&a.type!==eo&&(e.delayLeave=(e,t,n)=>{It(o,p)[String(p.key)]=p,e._leaveCb=()=>{t(),e._leaveCb=void 0,delete u.delayedLeave},u.delayedLeave=n})}return c}}};function It(e,t){const{leavingVNodes:n}=e;let o=n.get(t.type);return o||(o=Object.create(null),n.set(t.type,o)),o}function Bt(e,t,n,o){const{appear:r,mode:s,persisted:l=!1,onBeforeEnter:i,onEnter:c,onAfterEnter:a,onEnterCancelled:u,onBeforeLeave:f,onLeave:p,onAfterLeave:d,onLeaveCancelled:h,onBeforeAppear:v,onAppear:m,onAfterAppear:g,onAppearCancelled:y}=t,b=String(e.key),_=It(n,e),w=(e,t)=>{e&&Wo(e,o,9,t)},x={mode:s,persisted:l,beforeEnter(t){let o=i;if(!n.isMounted){if(!r)return;o=v||i}t._leaveCb&&t._leaveCb(!0);const s=_[b];s&&fo(e,s)&&s.el._leaveCb&&s.el._leaveCb(),w(o,[t])},enter(e){let t=c,o=a,s=u;if(!n.isMounted){if(!r)return;t=m||c,o=g||a,s=y||u}let l=!1;const i=e._enterCb=t=>{l||(l=!0,w(t?s:o,[e]),x.delayedLeave&&x.delayedLeave(),e._enterCb=void 0)};t?(t(e,i),t.length<=1&&i()):i()},leave(t,o){const r=String(e.key);if(t._enterCb&&t._enterCb(!0),n.isUnmounting)return o();w(f,[t]);let s=!1;const l=t._leaveCb=n=>{s||(s=!0,o(),w(n?h:d,[t]),t._leaveCb=void 0,_[r]===e&&delete _[r])};_[r]=e,p?(p(t,l),p.length<=1&&l()):l()},clone:e=>Bt(e,t,n,o)};return x}function Vt(e){if(zt(e))return(e=yo(e)).children=null,e}function Ut(e){return zt(e)?e.children?e.children[0]:void 0:e}function Nt(e,t){6&e.shapeFlag&&e.component?Nt(e.component.subTree,t):128&e.shapeFlag?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function Dt(e,t=!1){let n=[],o=0;for(let r=0;r1)for(let r=0;r!!e.type.__asyncLoader,zt=e=>e.type.__isKeepAlive,Gt={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(e,{slots:t}){const n=jo(),o=n.ctx;if(!o.renderer)return t.default;const r=new Map,s=new Set;let l=null;const i=n.suspense,{renderer:{p:c,m:a,um:u,o:{createElement:f}}}=o,p=f("div");function d(e){Zt(e),u(e,n,i)}function h(e){r.forEach(((t,n)=>{const o=Do(t.type);!o||e&&e(o)||v(n)}))}function v(e){const t=r.get(e);l&&t.type===l.type?l&&Zt(l):d(t),r.delete(e),s.delete(e)}o.activate=(e,t,n,o,r)=>{const s=e.component;a(e,t,n,0,i),c(s.vnode,e,t,n,s,i,o,e.slotScopeIds,r),Dn((()=>{s.isDeactivated=!1,s.a&&D(s.a);const t=e.props&&e.props.onVnodeMounted;t&&zn(t,s.parent,e)}),i)},o.deactivate=e=>{const t=e.component;a(e,p,null,1,i),Dn((()=>{t.da&&D(t.da);const n=e.props&&e.props.onVnodeUnmounted;n&&zn(n,t.parent,e),t.isDeactivated=!0}),i)},hr((()=>[e.include,e.exclude]),(([e,t])=>{e&&h((t=>Ht(e,t))),t&&h((e=>!Ht(t,e)))}),{flush:"post",deep:!0});let m=null;const g=()=>{null!=m&&r.set(m,Jt(n.subTree))};return on(g),sn(g),ln((()=>{r.forEach((e=>{const{subTree:t,suspense:o}=n,r=Jt(t);if(e.type!==r.type)d(e);else{Zt(r);const e=r.component.da;e&&Dn(e,o)}}))})),()=>{if(m=null,!t.default)return null;const n=t.default(),o=n[0];if(n.length>1)return l=null,n;if(!(uo(o)&&(4&o.shapeFlag||128&o.shapeFlag)))return l=null,o;let i=Jt(o);const c=i.type,a=Do(Wt(i)?i.type.__asyncResolved||{}:c),{include:u,exclude:f,max:p}=e;if(u&&(!a||!Ht(u,a))||f&&a&&Ht(f,a))return l=i,o;const d=null==i.key?c:i.key,h=r.get(d);return i.el&&(i=yo(i),128&o.shapeFlag&&(o.ssContent=i)),m=d,h?(i.el=h.el,i.component=h.component,i.transition&&Nt(i,i.transition),i.shapeFlag|=512,s.delete(d),s.add(d)):(s.add(d),p&&s.size>parseInt(p,10)&&v(s.values().next().value)),i.shapeFlag|=256,l=i,o}}};function Ht(e,t){return w(e)?e.some((e=>Ht(e,t))):S(e)?e.split(",").indexOf(t)>-1:!!e.test&&e.test(t)}function Kt(e,t){Qt(e,"a",t)}function Xt(e,t){Qt(e,"da",t)}function Qt(e,t,n=To){const o=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}e()});if(en(t,o,n),n){let e=n.parent;for(;e&&e.parent;)zt(e.parent.vnode)&&Yt(o,t,n,e),e=e.parent}}function Yt(e,t,n,o){const r=en(t,e,o,!0);cn((()=>{y(o[t],r)}),n)}function Zt(e){let t=e.shapeFlag;256&t&&(t-=256),512&t&&(t-=512),e.shapeFlag=t}function Jt(e){return 128&e.shapeFlag?e.ssContent:e}function en(e,t,n=To,o=!1){if(n){const r=n[e]||(n[e]=[]),s=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;ae(),Mo(n);const r=Wo(t,n,e,o);return Lo(),ue(),r});return o?r.unshift(s):r.push(s),s}}const tn=e=>(t,n=To)=>(!Bo||"sp"===e)&&en(e,t,n),nn=tn("bm"),on=tn("m"),rn=tn("bu"),sn=tn("u"),ln=tn("bum"),cn=tn("um"),an=tn("sp"),un=tn("rtg"),fn=tn("rtc");function pn(e,t=To){en("ec",e,t)}let dn=!0;function hn(e){const t=gn(e),n=e.proxy,o=e.ctx;dn=!1,t.beforeCreate&&vn(t.beforeCreate,e,"bc");const{data:r,computed:s,methods:l,watch:i,provide:c,inject:a,created:u,beforeMount:f,mounted:d,beforeUpdate:h,updated:v,activated:m,deactivated:g,beforeDestroy:y,beforeUnmount:b,destroyed:_,unmounted:x,render:C,renderTracked:S,renderTriggered:A,errorCaptured:O,serverPrefetch:R,expose:F,inheritAttrs:P,components:$,directives:T,filters:j}=t;if(a&&function(e,t,n=p,o=!1){w(e)&&(e=wn(e));for(const r in e){const n=e[r];let s;s=k(n)?"default"in n?jt(n.from||r,n.default,!0):jt(n.from||r):jt(n),pt(s)&&o?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>s.value,set:e=>s.value=e}):t[r]=s}}(a,o,null,e.appContext.config.unwrapInjectedRef),l)for(const p in l){const e=l[p];E(e)&&(o[p]=e.bind(n))}if(r){const t=r.call(n,n);k(t)&&(e.data=et(t))}if(dn=!0,s)for(const w in s){const e=s[w],t=bt({get:E(e)?e.bind(n,n):E(e.get)?e.get.bind(n,n):p,set:!E(e)&&E(e.set)?e.set.bind(n):p});Object.defineProperty(o,w,{enumerable:!0,configurable:!0,get:()=>t.value,set:e=>t.value=e})}if(i)for(const p in i)mn(i[p],o,n,p);if(c){const e=E(c)?c.call(n):c;Reflect.ownKeys(e).forEach((t=>{Tt(t,e[t])}))}function M(e,t){w(t)?t.forEach((t=>e(t.bind(n)))):t&&e(t.bind(n))}if(u&&vn(u,e,"c"),M(nn,f),M(on,d),M(rn,h),M(sn,v),M(Kt,m),M(Xt,g),M(pn,O),M(fn,S),M(un,A),M(ln,b),M(cn,x),M(an,R),w(F))if(F.length){const t=e.exposed||(e.exposed={});F.forEach((e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t})}))}else e.exposed||(e.exposed={});C&&e.render===p&&(e.render=C),null!=P&&(e.inheritAttrs=P),$&&(e.components=$),T&&(e.directives=T)}function vn(e,t,n){Wo(w(e)?e.map((e=>e.bind(t.proxy))):e.bind(t.proxy),t,n)}function mn(e,t,n,o){const r=o.includes(".")?gr(n,o):()=>n[o];if(S(e)){const n=t[e];E(n)&&hr(r,n)}else if(E(e))hr(r,e.bind(n));else if(k(e))if(w(e))e.forEach((e=>mn(e,t,n,o)));else{const o=E(e.handler)?e.handler.bind(n):t[e.handler];E(o)&&hr(r,o,e)}}function gn(e){const t=e.type,{mixins:n,extends:o}=t,{mixins:r,optionsCache:s,config:{optionMergeStrategies:l}}=e.appContext,i=s.get(t);let c;return i?c=i:r.length||n||o?(c={},r.length&&r.forEach((e=>yn(c,e,l,!0))),yn(c,t,l)):c=t,s.set(t,c),c}function yn(e,t,n,o=!1){const{mixins:r,extends:s}=t;s&&yn(e,s,n,!0),r&&r.forEach((t=>yn(e,t,n,!0)));for(const l in t)if(o&&"expose"===l);else{const o=bn[l]||n&&n[l];e[l]=o?o(e[l],t[l]):t[l]}return e}const bn={data:_n,props:Cn,emits:Cn,methods:Cn,computed:Cn,beforeCreate:xn,created:xn,beforeMount:xn,mounted:xn,beforeUpdate:xn,updated:xn,beforeDestroy:xn,beforeUnmount:xn,destroyed:xn,unmounted:xn,activated:xn,deactivated:xn,errorCaptured:xn,serverPrefetch:xn,components:Cn,directives:Cn,watch:function(e,t){if(!e)return t;if(!t)return e;const n=g(Object.create(null),e);for(const o in t)n[o]=xn(e[o],t[o]);return n},provide:_n,inject:function(e,t){return Cn(wn(e),wn(t))}};function _n(e,t){return t?e?function(){return g(E(e)?e.call(this,this):e,E(t)?t.call(this,this):t)}:t:e}function wn(e){if(w(e)){const t={};for(let n=0;n{c=!0;const[n,o]=kn(e,t,!0);g(l,n),o&&i.push(...o)};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}if(!s&&!c)return o.set(e,f),f;if(w(s))for(let f=0;f-1,n[1]=o<0||t-1||_(n,"default"))&&i.push(e)}}}const a=[l,i];return o.set(e,a),a}function On(e){return"$"!==e[0]}function Rn(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:null===e?"null":""}function Fn(e,t){return Rn(e)===Rn(t)}function Pn(e,t){return w(t)?t.findIndex((t=>Fn(t,e))):E(t)&&Fn(t,e)?0:-1}const $n=e=>"_"===e[0]||"$stable"===e,Tn=e=>w(e)?e.map(xo):[xo(e)],jn=(e,t,n)=>{const o=Ot(((...e)=>Tn(t(...e))),n);return o._c=!1,o},Mn=(e,t,n)=>{const o=e._ctx;for(const r in e){if($n(r))continue;const n=e[r];if(E(n))t[r]=jn(0,n,o);else if(null!=n){const e=Tn(n);t[r]=()=>e}}},Ln=(e,t)=>{const n=Tn(t);e.slots.default=()=>n};function In(e,t){if(null===Ct)return e;const n=Ct.proxy,o=e.dirs||(e.dirs=[]);for(let r=0;r(s.has(e)||(e&&E(e.install)?(s.add(e),e.install(i,...t)):E(e)&&(s.add(e),e(i,...t))),i),mixin:e=>(r.mixins.includes(e)||r.mixins.push(e),i),component:(e,t)=>t?(r.components[e]=t,i):r.components[e],directive:(e,t)=>t?(r.directives[e]=t,i):r.directives[e],mount(s,c,a){if(!l){const u=go(n,o);return u.appContext=r,c&&t?t(u,s):e(u,s,a),l=!0,i._container=s,s.__vue_app__=i,No(u.component)||u.component.proxy}},unmount(){l&&(e(null,i._container),delete i._container.__vue_app__)},provide:(e,t)=>(r.provides[e]=t,i)};return i}}const Dn=function(e,t){t&&t.pendingBranch?w(e)?t.effects.push(...e):t.effects.push(e):cr(e,er,Jo,tr)};function qn(e){return function(e,t){(z||(z="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{})).__VUE__=!0;const{insert:n,remove:o,patchProp:r,createElement:s,createText:l,createComment:i,setText:c,setElementText:a,parentNode:d,nextSibling:h,setScopeId:v=p,cloneNode:m,insertStaticContent:y}=e,b=(e,t,n,o=null,r=null,s=null,l=!1,i=null,c=!!t.dynamicChildren)=>{if(e===t)return;e&&!fo(e,t)&&(o=ne(e),Y(e,r,s,!0),e=null),-2===t.patchFlag&&(c=!1,t.dynamicChildren=null);const{type:a,ref:u,shapeFlag:f}=t;switch(a){case Jn:w(e,t,n,o);break;case eo:x(e,t,n,o);break;case to:null==e&&C(t,n,o,l);break;case Zn:M(e,t,n,o,r,s,l,i,c);break;default:1&f?A(e,t,n,o,r,s,l,i,c):6&f?I(e,t,n,o,r,s,l,i,c):(64&f||128&f)&&a.process(e,t,n,o,r,s,l,i,c,re)}null!=u&&r&&Wn(u,e&&e.ref,s,t||e,!t)},w=(e,t,o,r)=>{if(null==e)n(t.el=l(t.children),o,r);else{const n=t.el=e.el;t.children!==e.children&&c(n,t.children)}},x=(e,t,o,r)=>{null==e?n(t.el=i(t.children||""),o,r):t.el=e.el},C=(e,t,n,o)=>{[e.el,e.anchor]=y(e.children,t,n,o)},E=({el:e,anchor:t},o,r)=>{let s;for(;e&&e!==t;)s=h(e),n(e,o,r),e=s;n(t,o,r)},S=({el:e,anchor:t})=>{let n;for(;e&&e!==t;)n=h(e),o(e),e=n;o(t)},A=(e,t,n,o,r,s,l,i,c)=>{l=l||"svg"===t.type,null==e?k(t,n,o,r,s,l,i,c):P(e,t,r,s,l,i,c)},k=(e,t,o,l,i,c,u,f)=>{let p,d;const{type:h,props:v,shapeFlag:g,transition:y,patchFlag:b,dirs:_}=e;if(e.el&&void 0!==m&&-1===b)p=e.el=m(e.el);else{if(p=e.el=s(e.type,c,v&&v.is,v),8&g?a(p,e.children):16&g&&F(e.children,p,null,l,i,c&&"foreignObject"!==h,u,f),_&&Bn(e,null,l,"created"),v){for(const t in v)"value"===t||T(t)||r(p,t,null,v[t],c,e.children,l,i,te);"value"in v&&r(p,"value",null,v.value),(d=v.onVnodeBeforeMount)&&zn(d,l,e)}R(p,e,e.scopeId,u,l)}_&&Bn(e,null,l,"beforeMount");const w=(!i||i&&!i.pendingBranch)&&y&&!y.persisted;w&&y.beforeEnter(p),n(p,t,o),((d=v&&v.onVnodeMounted)||w||_)&&Dn((()=>{d&&zn(d,l,e),w&&y.enter(p),_&&Bn(e,null,l,"mounted")}),i)},R=(e,t,n,o,r)=>{if(n&&v(e,n),o)for(let s=0;s{for(let a=c;a{const c=t.el=e.el;let{patchFlag:f,dynamicChildren:p,dirs:d}=t;f|=16&e.patchFlag;const h=e.props||u,v=t.props||u;let m;(m=v.onVnodeBeforeUpdate)&&zn(m,n,t,e),d&&Bn(t,e,n,"beforeUpdate");const g=s&&"foreignObject"!==t.type;if(p?$(e.dynamicChildren,p,c,n,o,g,l):i||G(e,t,c,null,n,o,g,l,!1),f>0){if(16&f)j(c,t,h,v,n,o,s);else if(2&f&&h.class!==v.class&&r(c,"class",null,v.class,s),4&f&&r(c,"style",h.style,v.style,s),8&f){const l=t.dynamicProps;for(let t=0;t{m&&zn(m,n,t,e),d&&Bn(t,e,n,"updated")}),o)},$=(e,t,n,o,r,s,l)=>{for(let i=0;i{if(n!==o){for(const c in o){if(T(c))continue;const a=o[c],u=n[c];a!==u&&"value"!==c&&r(e,c,u,a,i,t.children,s,l,te)}if(n!==u)for(const c in n)T(c)||c in o||r(e,c,n[c],null,i,t.children,s,l,te);"value"in o&&r(e,"value",n.value,o.value)}},M=(e,t,o,r,s,i,c,a,u)=>{const f=t.el=e?e.el:l(""),p=t.anchor=e?e.anchor:l("");let{patchFlag:d,dynamicChildren:h,slotScopeIds:v}=t;v&&(a=a?a.concat(v):v),null==e?(n(f,o,r),n(p,o,r),F(t.children,o,p,s,i,c,a,u)):d>0&&64&d&&h&&e.dynamicChildren?($(e.dynamicChildren,h,o,s,i,c,a),(null!=t.key||s&&t===s.subTree)&&Gn(e,t,!0)):G(e,t,o,p,s,i,c,a,u)},I=(e,t,n,o,r,s,l,i,c)=>{t.slotScopeIds=i,null==e?512&t.shapeFlag?r.ctx.activate(t,n,o,l,c):V(t,n,o,r,s,l,c):U(e,t,c)},V=(e,t,n,o,r,s,l)=>{const i=e.component=function(e,t,n){const o=e.type,r=(t?t.appContext:e.appContext)||Po,s={uid:$o++,vnode:e,type:o,parent:t,appContext:r,root:null,next:null,subTree:null,update:null,scope:new K(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(r.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:kn(o,r),emitsOptions:wt(o,r),emit:null,emitted:null,propsDefaults:u,inheritAttrs:o.inheritAttrs,ctx:u,data:u,props:u,attrs:u,slots:u,refs:u,setupState:u,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};s.ctx={_:s},s.root=t?t.root:s,s.emit=_t.bind(null,s),e.ce&&e.ce(s);return s}(e,o,r);if(zt(e)&&(i.ctx.renderer=re),function(e,t=!1){Bo=t;const{props:n,children:o}=e.vnode,r=Io(e);En(e,n,r,t),((e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=lt(t),q(t,"_",n)):Mn(t,e.slots={})}else e.slots={},t&&Ln(e,t);q(e.slots,po,1)})(e,o);const s=r?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=it(new Proxy(e.ctx,Fo));const{setup:o}=n;if(o){const n=e.setupContext=o.length>1?function(e){const t=t=>{e.exposed=t||{}};let n;return{get attrs(){return n||(n=function(e){return new Proxy(e.attrs,{get:(t,n)=>(fe(e,0,"$attrs"),t[n])})}(e))},slots:e.slots,emit:e.emit,expose:t}}(e):null;Mo(e),ae();const r=qo(o,e,0,[e.props,n]);if(ue(),Lo(),O(r)){if(r.then(Lo,Lo),t)return r.then((n=>{Vo(e,n,t)})).catch((t=>{zo(t,e,0)}));e.asyncDep=r}else Vo(e,r,t)}else Uo(e,t)}(e,t):void 0;Bo=!1}(i),i.asyncDep){if(r&&r.registerDep(i,N),!e.el){const e=i.subTree=go(eo);x(null,e,t,n)}}else N(i,e,t,n,r,s,l)},U=(e,t,n)=>{const o=t.component=e.component;if(function(e,t,n){const{props:o,children:r,component:s}=e,{props:l,children:i,patchFlag:c}=t,a=s.emitsOptions;if(t.dirs||t.transition)return!0;if(!(n&&c>=0))return!(!r&&!i||i&&i.$stable)||o!==l&&(o?!l||$t(o,l,a):!!l);if(1024&c)return!0;if(16&c)return o?$t(o,l,a):!!l;if(8&c){const e=t.dynamicProps;for(let t=0;tXo&&Ko.splice(t,1)}(o.update),o.update()}else t.component=e.component,t.el=e.el,o.vnode=t},N=(e,t,n,o,r,s,l)=>{const i=new se((()=>{if(e.isMounted){let t,{next:n,bu:o,u:c,parent:a,vnode:u}=e,f=n;i.allowRecurse=!1,n?(n.el=u.el,W(e,n,l)):n=u,o&&D(o),(t=n.props&&n.props.onVnodeBeforeUpdate)&&zn(t,a,n,u),i.allowRecurse=!0;const p=Rt(e),h=e.subTree;e.subTree=p,b(h,p,d(h.el),ne(h),e,r,s),n.el=p.el,null===f&&function({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}(e,p.el),c&&Dn(c,r),(t=n.props&&n.props.onVnodeUpdated)&&Dn((()=>zn(t,a,n,u)),r)}else{let l;const{el:c,props:a}=t,{bm:u,m:f,parent:p}=e,d=Wt(t);if(i.allowRecurse=!1,u&&D(u),!d&&(l=a&&a.onVnodeBeforeMount)&&zn(l,p,t),i.allowRecurse=!0,c&&ie){const n=()=>{e.subTree=Rt(e),ie(c,e.subTree,e,r,null)};d?t.type.__asyncLoader().then((()=>!e.isUnmounted&&n())):n()}else{const l=e.subTree=Rt(e);b(null,l,n,o,e,r,s),t.el=l.el}if(f&&Dn(f,r),!d&&(l=a&&a.onVnodeMounted)){const e=t;Dn((()=>zn(l,p,e)),r)}256&t.shapeFlag&&e.a&&Dn(e.a,r),e.isMounted=!0,t=n=o=null}}),(()=>lr(e.update)),e.scope),c=e.update=i.run.bind(i);c.id=e.uid,i.allowRecurse=c.allowRecurse=!0,c()},W=(e,t,n)=>{t.component=e;const o=e.vnode.props;e.vnode=t,e.next=null,function(e,t,n,o){const{props:r,attrs:s,vnode:{patchFlag:l}}=e,i=lt(r),[c]=e.propsOptions;let a=!1;if(!(o||l>0)||16&l){let o;Sn(e,t,r,s)&&(a=!0);for(const s in i)t&&(_(t,s)||(o=B(s))!==s&&_(t,o))||(c?!n||void 0===n[s]&&void 0===n[o]||(r[s]=An(c,i,s,void 0,e,!0)):delete r[s]);if(s!==i)for(const e in s)t&&_(t,e)||(delete s[e],a=!0)}else if(8&l){const n=e.vnode.dynamicProps;for(let o=0;o{const{vnode:o,slots:r}=e;let s=!0,l=u;if(32&o.shapeFlag){const e=t._;e?n&&1===e?s=!1:(g(r,t),n||1!==e||delete r._):(s=!t.$stable,Mn(t,r)),l=t}else t&&(Ln(e,t),l={default:1});if(s)for(const i in r)$n(i)||i in l||delete r[i]})(e,t.children,n),ae(),ar(void 0,e.update),ue()},G=(e,t,n,o,r,s,l,i,c=!1)=>{const u=e&&e.children,f=e?e.shapeFlag:0,p=t.children,{patchFlag:d,shapeFlag:h}=t;if(d>0){if(128&d)return void X(u,p,n,o,r,s,l,i,c);if(256&d)return void H(u,p,n,o,r,s,l,i,c)}8&h?(16&f&&te(u,r,s),p!==u&&a(n,p)):16&f?16&h?X(u,p,n,o,r,s,l,i,c):te(u,r,s,!0):(8&f&&a(n,""),16&h&&F(p,n,o,r,s,l,i,c))},H=(e,t,n,o,r,s,l,i,c)=>{t=t||f;const a=(e=e||f).length,u=t.length,p=Math.min(a,u);let d;for(d=0;du?te(e,r,s,!0,!1,p):F(t,n,o,r,s,l,i,c,p)},X=(e,t,n,o,r,s,l,i,c)=>{let a=0;const u=t.length;let p=e.length-1,d=u-1;for(;a<=p&&a<=d;){const o=e[a],u=t[a]=c?Co(t[a]):xo(t[a]);if(!fo(o,u))break;b(o,u,n,null,r,s,l,i,c),a++}for(;a<=p&&a<=d;){const o=e[p],a=t[d]=c?Co(t[d]):xo(t[d]);if(!fo(o,a))break;b(o,a,n,null,r,s,l,i,c),p--,d--}if(a>p){if(a<=d){const e=d+1,f=ed)for(;a<=p;)Y(e[a],r,s,!0),a++;else{const h=a,v=a,m=new Map;for(a=v;a<=d;a++){const e=t[a]=c?Co(t[a]):xo(t[a]);null!=e.key&&m.set(e.key,a)}let g,y=0;const _=d-v+1;let w=!1,x=0;const C=new Array(_);for(a=0;a<_;a++)C[a]=0;for(a=h;a<=p;a++){const o=e[a];if(y>=_){Y(o,r,s,!0);continue}let u;if(null!=o.key)u=m.get(o.key);else for(g=v;g<=d;g++)if(0===C[g-v]&&fo(o,t[g])){u=g;break}void 0===u?Y(o,r,s,!0):(C[u-v]=a+1,u>=x?x=u:w=!0,b(o,t[u],n,null,r,s,l,i,c),y++)}const E=w?function(e){const t=e.slice(),n=[0];let o,r,s,l,i;const c=e.length;for(o=0;o>1,e[n[i]]0&&(t[o]=n[s-1]),n[s]=o)}}s=n.length,l=n[s-1];for(;s-- >0;)n[s]=l,l=t[l];return n}(C):f;for(g=E.length-1,a=_-1;a>=0;a--){const e=v+a,f=t[e],p=e+1{const{el:l,type:i,transition:c,children:a,shapeFlag:u}=e;if(6&u)return void Q(e.component.subTree,t,o,r);if(128&u)return void e.suspense.move(t,o,r);if(64&u)return void i.move(e,t,o,re);if(i===Zn){n(l,t,o);for(let e=0;ec.enter(l)),s);else{const{leave:e,delayLeave:r,afterLeave:s}=c,i=()=>n(l,t,o),a=()=>{e(l,(()=>{i(),s&&s()}))};r?r(l,i,a):a()}else n(l,t,o)},Y=(e,t,n,o=!1,r=!1)=>{const{type:s,props:l,ref:i,children:c,dynamicChildren:a,shapeFlag:u,patchFlag:f,dirs:p}=e;if(null!=i&&Wn(i,null,n,e,!0),256&u)return void t.ctx.deactivate(e);const d=1&u&&p,h=!Wt(e);let v;if(h&&(v=l&&l.onVnodeBeforeUnmount)&&zn(v,t,e),6&u)ee(e.component,n,o);else{if(128&u)return void e.suspense.unmount(n,o);d&&Bn(e,null,t,"beforeUnmount"),64&u?e.type.remove(e,t,n,r,re,o):a&&(s!==Zn||f>0&&64&f)?te(a,t,n,!1,!0):(s===Zn&&384&f||!r&&16&u)&&te(c,t,n),o&&Z(e)}(h&&(v=l&&l.onVnodeUnmounted)||d)&&Dn((()=>{v&&zn(v,t,e),d&&Bn(e,null,t,"unmounted")}),n)},Z=e=>{const{type:t,el:n,anchor:r,transition:s}=e;if(t===Zn)return void J(n,r);if(t===to)return void S(e);const l=()=>{o(n),s&&!s.persisted&&s.afterLeave&&s.afterLeave()};if(1&e.shapeFlag&&s&&!s.persisted){const{leave:t,delayLeave:o}=s,r=()=>t(n,l);o?o(e.el,l,r):r()}else l()},J=(e,t)=>{let n;for(;e!==t;)n=h(e),o(e),e=n;o(t)},ee=(e,t,n)=>{const{bum:o,scope:r,update:s,subTree:l,um:i}=e;o&&D(o),r.stop(),s&&(s.active=!1,Y(l,e,t,n)),i&&Dn(i,t),Dn((()=>{e.isUnmounted=!0}),t),t&&t.pendingBranch&&!t.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===t.pendingId&&(t.deps--,0===t.deps&&t.resolve())},te=(e,t,n,o=!1,r=!1,s=0)=>{for(let l=s;l6&e.shapeFlag?ne(e.component.subTree):128&e.shapeFlag?e.suspense.next():h(e.anchor||e.el),oe=(e,t,n)=>{null==e?t._vnode&&Y(t._vnode,null,null,!0):b(t._vnode||null,e,t,null,null,null,n),ur(),t._vnode=e},re={p:b,um:Y,m:Q,r:Z,mt:V,mc:F,pc:G,pbc:$,n:ne,o:e};let le,ie;t&&([le,ie]=t(re));return{render:oe,hydrate:le,createApp:Nn(oe,le)}}(e)}function Wn(e,t,n,o,r=!1){if(w(e))return void e.forEach(((e,s)=>Wn(e,t&&(w(t)?t[s]:t),n,o,r)));if(Wt(o)&&!r)return;const s=4&o.shapeFlag?No(o.component)||o.component.proxy:o.el,l=r?null:s,{i:i,r:c}=e,a=t&&t.r,f=i.refs===u?i.refs={}:i.refs,p=i.setupState;if(null!=a&&a!==c&&(S(a)?(f[a]=null,_(p,a)&&(p[a]=null)):pt(a)&&(a.value=null)),S(c)){const e=()=>{f[c]=l,_(p,c)&&(p[c]=l)};l?(e.id=-1,Dn(e,n)):e()}else if(pt(c)){const e=()=>{c.value=l};l?(e.id=-1,Dn(e,n)):e()}else E(c)&&qo(c,i,12,[l,f])}function zn(e,t,n,o=null){Wo(e,t,7,[n,o])}function Gn(e,t,n=!1){const o=e.children,r=t.children;if(w(o)&&w(r))for(let s=0;s0?oo||f:null,no.pop(),oo=no[no.length-1]||null,so>0&&oo&&oo.push(e),e}function co(e,t,n,o,r,s){return io(mo(e,t,n,o,r,s,!0))}function ao(e,t,n,o,r){return io(go(e,t,n,o,r,!0))}function uo(e){return!!e&&!0===e.__v_isVNode}function fo(e,t){return e.type===t.type&&e.key===t.key}const po="__vInternal",ho=({key:e})=>null!=e?e:null,vo=({ref:e})=>null!=e?S(e)||pt(e)||E(e)?{i:Ct,r:e}:e:null;function mo(e,t=null,n=null,o=0,r=null,s=(e===Zn?0:1),l=!1,i=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&ho(t),ref:t&&vo(t),scopeId:Et,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:s,patchFlag:o,dynamicProps:r,dynamicChildren:null,appContext:null};return i?(Eo(c,n),128&s&&e.normalize(c)):n&&(c.shapeFlag|=S(n)?8:16),so>0&&!l&&oo&&(c.patchFlag>0||6&s)&&32!==c.patchFlag&&oo.push(c),c}const go=function(e,t=null,n=null,r=0,s=null,l=!1){e&&e!==Kn||(e=eo);if(uo(e)){const o=yo(e,t,!0);return n&&Eo(o,n),o}c=e,E(c)&&"__vccOpts"in c&&(e=e.__vccOpts);var c;if(t){t=function(e){return e?st(e)||po in e?g({},e):e:null}(t);let{class:e,style:n}=t;e&&!S(e)&&(t.class=i(e)),k(n)&&(st(n)&&!w(n)&&(n=g({},n)),t.style=o(n))}const a=S(e)?1:(e=>e.__isSuspense)(e)?128:(e=>e.__isTeleport)(e)?64:k(e)?4:E(e)?2:0;return mo(e,t,n,r,s,a,l,!0)};function yo(e,t,n=!1){const{props:r,ref:s,patchFlag:l,children:c}=e,a=t?function(...e){const t={};for(let n=0;nt(e,n,void 0,s&&s[n])));else{const n=Object.keys(e);r=new Array(n.length);for(let o=0,l=n.length;o!uo(e)||e.type!==eo&&!(e.type===Zn&&!ko(e.children))))?e:null}const Oo=e=>e?Io(e)?No(e)||e.proxy:Oo(e.parent):null,Ro=g(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Oo(e.parent),$root:e=>Oo(e.root),$emit:e=>e.emit,$options:e=>gn(e),$forceUpdate:e=>()=>lr(e.update),$nextTick:e=>sr.bind(e.proxy),$watch:e=>mr.bind(e)}),Fo={get({_:e},t){const{ctx:n,setupState:o,data:r,props:s,accessCache:l,type:i,appContext:c}=e;let a;if("$"!==t[0]){const i=l[t];if(void 0!==i)switch(i){case 0:return o[t];case 1:return r[t];case 3:return n[t];case 2:return s[t]}else{if(o!==u&&_(o,t))return l[t]=0,o[t];if(r!==u&&_(r,t))return l[t]=1,r[t];if((a=e.propsOptions[0])&&_(a,t))return l[t]=2,s[t];if(n!==u&&_(n,t))return l[t]=3,n[t];dn&&(l[t]=4)}}const f=Ro[t];let p,d;return f?("$attrs"===t&&fe(e,0,t),f(e)):(p=i.__cssModules)&&(p=p[t])?p:n!==u&&_(n,t)?(l[t]=3,n[t]):(d=c.config.globalProperties,_(d,t)?d[t]:void 0)},set({_:e},t,n){const{data:o,setupState:r,ctx:s}=e;if(r!==u&&_(r,t))r[t]=n;else if(o!==u&&_(o,t))o[t]=n;else if(_(e.props,t))return!1;return("$"!==t[0]||!(t.slice(1)in e))&&(s[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:o,appContext:r,propsOptions:s}},l){let i;return void 0!==n[l]||e!==u&&_(e,l)||t!==u&&_(t,l)||(i=s[0])&&_(i,l)||_(o,l)||_(Ro,l)||_(r.config.globalProperties,l)}},Po=Vn();let $o=0;let To=null;const jo=()=>To||Ct,Mo=e=>{To=e,e.scope.on()},Lo=()=>{To&&To.scope.off(),To=null};function Io(e){return 4&e.vnode.shapeFlag}let Bo=!1;function Vo(e,t,n){E(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:k(t)&&(e.setupState=gt(t)),Uo(e,n)}function Uo(e,t,n){const o=e.type;e.render||(e.render=o.render||p),Mo(e),ae(),hn(e),ue(),Lo()}function No(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(gt(it(e.exposed)),{get:(t,n)=>n in t?t[n]:n in Ro?Ro[n](e):void 0}))}function Do(e){return E(e)&&e.displayName||e.name}function qo(e,t,n,o){let r;try{r=o?e(...o):e()}catch(s){zo(s,t,n)}return r}function Wo(e,t,n,o){if(E(e)){const r=qo(e,t,n,o);return r&&O(r)&&r.catch((e=>{zo(e,t,n)})),r}const r=[];for(let s=0;s>>1;fr(Ko[o])fr(e)-fr(t))),tr=0;trnull==e.id?1/0:e.id;function pr(e){Ho=!1,Go=!0,ar(e),Ko.sort(((e,t)=>fr(e)-fr(t)));try{for(Xo=0;Xoe.value,f=!!e._shallow):ot(e)?(c=()=>e,o=!0):w(e)?(d=!0,f=e.some(ot),c=()=>e.map((e=>pt(e)?e.value:ot(e)?yr(e):E(e)?qo(e,i,2):void 0))):c=E(e)?t?()=>qo(e,i,2):()=>{if(!i||!i.isUnmounted)return a&&a(),Wo(e,i,3,[h])}:p,t&&o){const e=c;c=()=>yr(e())}let h=e=>{a=b.onStop=()=>{qo(e,i,4)}};if(Bo)return h=p,t?n&&Wo(t,i,3,[c(),d?[]:void 0,h]):c(),p;let v=d?[]:dr;const m=()=>{if(b.active)if(t){const e=b.run();(o||f||(d?e.some(((e,t)=>N(e,v[t]))):N(e,v)))&&(a&&a(),Wo(t,i,3,[e,v===dr?void 0:v,h]),v=e)}else b.run()};let g;m.allowRecurse=!!t,g="sync"===r?m:"post"===r?()=>Dn(m,i&&i.suspense):()=>{!i||i.isMounted?function(e){cr(e,Yo,Qo,Zo)}(m):m()};const b=new se(c,g);return t?n?m():v=b.run():"post"===r?Dn(b.run.bind(b),i&&i.suspense):b.run(),()=>{b.stop(),i&&i.scope&&y(i.scope.effects,b)}}function mr(e,t,n){const o=this.proxy,r=S(e)?e.includes(".")?gr(o,e):()=>o[e]:e.bind(o,o);let s;E(t)?s=t:(s=t.handler,n=t);const l=To;Mo(this);const i=vr(r,s.bind(o),n);return l?Mo(l):Lo(),i}function gr(e,t){const n=t.split(".");return()=>{let t=e;for(let e=0;e{yr(e,t)}));else if(P(e))for(const n in e)yr(e[n],t);return e}function br(e,t,n){const o=arguments.length;return 2===o?k(t)&&!w(t)?uo(t)?go(e,null,[t]):go(e,t):go(e,null,t):(o>3?n=Array.prototype.slice.call(arguments,2):3===o&&uo(n)&&(n=[n]),go(e,t,n))}const _r="3.2.19",wr="undefined"!=typeof document?document:null,xr=new Map,Cr={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,o)=>{const r=t?wr.createElementNS("http://www.w3.org/2000/svg",e):wr.createElement(e,n?{is:n}:void 0);return"select"===e&&o&&null!=o.multiple&&r.setAttribute("multiple",o.multiple),r},createText:e=>wr.createTextNode(e),createComment:e=>wr.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>wr.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},cloneNode(e){const t=e.cloneNode(!0);return"_value"in e&&(t._value=e._value),t},insertStaticContent(e,t,n,o){const r=n?n.previousSibling:t.lastChild;let s=xr.get(e);if(!s){const t=wr.createElement("template");if(t.innerHTML=o?`${e}`:e,s=t.content,o){const e=s.firstChild;for(;e.firstChild;)s.appendChild(e.firstChild);s.removeChild(e)}xr.set(e,s)}return t.insertBefore(s.cloneNode(!0),n),[r?r.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};const Er=/\s*!important$/;function Sr(e,t,n){if(w(n))n.forEach((n=>Sr(e,t,n)));else if(t.startsWith("--"))e.setProperty(t,n);else{const o=function(e,t){const n=kr[t];if(n)return n;let o=L(t);if("filter"!==o&&o in e)return kr[t]=o;o=V(o);for(let r=0;rdocument.createEvent("Event").timeStamp&&(Rr=()=>performance.now());const e=navigator.userAgent.match(/firefox\/(\d+)/i);Fr=!!(e&&Number(e[1])<=53)}let Pr=0;const $r=Promise.resolve(),Tr=()=>{Pr=0};function jr(e,t,n,o,r=null){const s=e._vei||(e._vei={}),l=s[t];if(o&&l)l.value=o;else{const[n,i]=function(e){let t;if(Mr.test(e)){let n;for(t={};n=e.match(Mr);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[B(e.slice(2)),t]}(t);if(o){!function(e,t,n,o){e.addEventListener(t,n,o)}(e,n,s[t]=function(e,t){const n=e=>{const o=e.timeStamp||Rr();(Fr||o>=n.attached-1)&&Wo(function(e,t){if(w(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map((e=>t=>!t._stopped&&e(t)))}return t}(e,n.value),t,5,[e])};return n.value=e,n.attached=(()=>Pr||($r.then(Tr),Pr=Rr()))(),n}(o,r),i)}else l&&(!function(e,t,n,o){e.removeEventListener(t,n,o)}(e,n,l,i),s[t]=void 0)}}const Mr=/(?:Once|Passive|Capture)$/;const Lr=/^on[a-z]/;const Ir="transition",Br=(e,{slots:t})=>br(Lt,function(e){const t={};for(const g in e)g in Vr||(t[g]=e[g]);if(!1===e.css)return t;const{name:n="v",type:o,duration:r,enterFromClass:s=`${n}-enter-from`,enterActiveClass:l=`${n}-enter-active`,enterToClass:i=`${n}-enter-to`,appearFromClass:c=s,appearActiveClass:a=l,appearToClass:u=i,leaveFromClass:f=`${n}-leave-from`,leaveActiveClass:p=`${n}-leave-active`,leaveToClass:d=`${n}-leave-to`}=e,h=function(e){if(null==e)return null;if(k(e))return[Dr(e.enter),Dr(e.leave)];{const t=Dr(e);return[t,t]}}(r),v=h&&h[0],m=h&&h[1],{onBeforeEnter:y,onEnter:b,onEnterCancelled:_,onLeave:w,onLeaveCancelled:x,onBeforeAppear:C=y,onAppear:E=b,onAppearCancelled:S=_}=t,A=(e,t,n)=>{Wr(e,t?u:i),Wr(e,t?a:l),n&&n()},O=(e,t)=>{Wr(e,d),Wr(e,p),t&&t()},R=e=>(t,n)=>{const r=e?E:b,l=()=>A(t,e,n);Ur(r,[t,l]),zr((()=>{Wr(t,e?c:s),qr(t,e?u:i),Nr(r)||Hr(t,o,v,l)}))};return g(t,{onBeforeEnter(e){Ur(y,[e]),qr(e,s),qr(e,l)},onBeforeAppear(e){Ur(C,[e]),qr(e,c),qr(e,a)},onEnter:R(!1),onAppear:R(!0),onLeave(e,t){const n=()=>O(e,t);qr(e,f),document.body.offsetHeight,qr(e,p),zr((()=>{Wr(e,f),qr(e,d),Nr(w)||Hr(e,o,m,n)})),Ur(w,[e,n])},onEnterCancelled(e){A(e,!1),Ur(_,[e])},onAppearCancelled(e){A(e,!0),Ur(S,[e])},onLeaveCancelled(e){O(e),Ur(x,[e])}})}(e),t);Br.displayName="Transition";const Vr={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Br.props=g({},Lt.props,Vr);const Ur=(e,t=[])=>{w(e)?e.forEach((e=>e(...t))):e&&e(...t)},Nr=e=>!!e&&(w(e)?e.some((e=>e.length>1)):e.length>1);function Dr(e){return W(e)}function qr(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.add(t))),(e._vtc||(e._vtc=new Set)).add(t)}function Wr(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.remove(t)));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function zr(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}let Gr=0;function Hr(e,t,n,o){const r=e._endId=++Gr,s=()=>{r===e._endId&&o()};if(n)return setTimeout(s,n);const{type:l,timeout:i,propCount:c}=function(e,t){const n=window.getComputedStyle(e),o=e=>(n[e]||"").split(", "),r=o("transitionDelay"),s=o("transitionDuration"),l=Kr(r,s),i=o("animationDelay"),c=o("animationDuration"),a=Kr(i,c);let u=null,f=0,p=0;t===Ir?l>0&&(u=Ir,f=l,p=s.length):"animation"===t?a>0&&(u="animation",f=a,p=c.length):(f=Math.max(l,a),u=f>0?l>a?Ir:"animation":null,p=u?u===Ir?s.length:c.length:0);const d=u===Ir&&/\b(transform|all)(,|$)/.test(n.transitionProperty);return{type:u,timeout:f,propCount:p,hasTransform:d}}(e,t);if(!l)return o();const a=l+"end";let u=0;const f=()=>{e.removeEventListener(a,p),s()},p=t=>{t.target===e&&++u>=c&&f()};setTimeout((()=>{uXr(t)+Xr(e[n]))))}function Xr(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}const Qr={beforeMount(e,{value:t},{transition:n}){e._vod="none"===e.style.display?"":e.style.display,n&&t?n.beforeEnter(e):Yr(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:o}){!t!=!n&&(o?t?(o.beforeEnter(e),Yr(e,!0),o.enter(e)):o.leave(e,(()=>{Yr(e,!1)})):Yr(e,t))},beforeUnmount(e,{value:t}){Yr(e,t)}};function Yr(e,t){e.style.display=t?e._vod:"none"}const Zr=g({patchProp:(e,o,r,s,l=!1,i,c,a,u)=>{"class"===o?function(e,t,n){const o=e._vtc;o&&(t=(t?[t,...o]:[...o]).join(" ")),null==t?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}(e,s,l):"style"===o?function(e,t,n){const o=e.style,r=o.display;if(n)if(S(n))t!==n&&(o.cssText=n);else{for(const e in n)Sr(o,e,n[e]);if(t&&!S(t))for(const e in t)null==n[e]&&Sr(o,e,"")}else e.removeAttribute("style");"_vod"in e&&(o.display=r)}(e,r,s):v(o)?m(o)||jr(e,o,0,s,c):("."===o[0]?(o=o.slice(1),1):"^"===o[0]?(o=o.slice(1),0):function(e,t,n,o){if(o)return"innerHTML"===t||"textContent"===t||!!(t in e&&Lr.test(t)&&E(n));if("spellcheck"===t||"draggable"===t)return!1;if("form"===t)return!1;if("list"===t&&"INPUT"===e.tagName)return!1;if("type"===t&&"TEXTAREA"===e.tagName)return!1;if(Lr.test(t)&&S(n))return!1;return t in e}(e,o,s,l))?function(e,t,o,r,s,l,i){if("innerHTML"===t||"textContent"===t)return r&&i(r,s,l),void(e[t]=null==o?"":o);if("value"===t&&"PROGRESS"!==e.tagName){e._value=o;const n=null==o?"":o;return e.value!==n&&(e.value=n),void(null==o&&e.removeAttribute(t))}if(""===o||null==o){const r=typeof e[t];if("boolean"===r)return void(e[t]=n(o));if(null==o&&"string"===r)return e[t]="",void e.removeAttribute(t);if("number"===r){try{e[t]=0}catch(c){}return void e.removeAttribute(t)}}try{e[t]=o}catch(a){}}(e,o,s,i,c,a,u):("true-value"===o?e._trueValue=s:"false-value"===o&&(e._falseValue=s),function(e,o,r,s,l){if(s&&o.startsWith("xlink:"))null==r?e.removeAttributeNS(Or,o.slice(6,o.length)):e.setAttributeNS(Or,o,r);else{const s=t(o);null==r||s&&!n(r)?e.removeAttribute(o):e.setAttribute(o,s?"":r)}}(e,o,s,l))}},Cr);let Jr;const es=(...e)=>{const t=(Jr||(Jr=qn(Zr))).createApp(...e),{mount:n}=t;return t.mount=e=>{const o=function(e){if(S(e)){return document.querySelector(e)}return e} -/*! - * vue-router v4.0.11 - * (c) 2021 Eduardo San Martin Morote - * @license MIT - */(e);if(!o)return;const r=t._component;E(r)||r.render||r.template||(r.template=o.innerHTML),o.innerHTML="";const s=n(o,!1,o instanceof SVGElement);return o instanceof Element&&(o.removeAttribute("v-cloak"),o.setAttribute("data-v-app","")),s},t};const ts="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,ns=e=>ts?Symbol(e):"_vr_"+e,os=ns("rvlm"),rs=ns("rvd"),ss=ns("r"),ls=ns("rl"),is=ns("rvl"),cs="undefined"!=typeof window;const as=Object.assign;function us(e,t){const n={};for(const o in t){const r=t[o];n[o]=Array.isArray(r)?r.map(e):e(r)}return n}const fs=()=>{},ps=/\/$/;function ds(e,t,n="/"){let o,r={},s="",l="";const i=t.indexOf("?"),c=t.indexOf("#",i>-1?i:0);return i>-1&&(o=t.slice(0,i),s=t.slice(i+1,c>-1?c:t.length),r=e(s)),c>-1&&(o=o||t.slice(0,c),l=t.slice(c,t.length)),o=function(e,t){if(e.startsWith("/"))return e;if(!e)return t;const n=t.split("/"),o=e.split("/");let r,s,l=n.length-1;for(r=0;re===t[n])):1===e.length&&e[0]===t}var bs,_s,ws,xs;function Cs(e){if(!e)if(cs){const t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return"/"!==e[0]&&"#"!==e[0]&&(e="/"+e),e.replace(ps,"")}(_s=bs||(bs={})).pop="pop",_s.push="push",(xs=ws||(ws={})).back="back",xs.forward="forward",xs.unknown="";const Es=/^[^#]+#/;function Ss(e,t){return e.replace(Es,"#")+t}const As=()=>({left:window.pageXOffset,top:window.pageYOffset});function ks(e){let t;if("el"in e){const n=e.el,o="string"==typeof n&&n.startsWith("#"),r="string"==typeof n?o?document.getElementById(n.slice(1)):document.querySelector(n):n;if(!r)return;t=function(e,t){const n=document.documentElement.getBoundingClientRect(),o=e.getBoundingClientRect();return{behavior:t.behavior,left:o.left-n.left-(t.left||0),top:o.top-n.top-(t.top||0)}}(r,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(null!=t.left?t.left:window.pageXOffset,null!=t.top?t.top:window.pageYOffset)}function Os(e,t){return(history.state?history.state.position-t:-1)+e}const Rs=new Map;function Fs(e,t){const{pathname:n,search:o,hash:r}=t,s=e.indexOf("#");if(s>-1){let t=r.includes(e.slice(s))?e.slice(s).length:1,n=r.slice(t);return"/"!==n[0]&&(n="/"+n),hs(n,"")}return hs(n,e)+o+r}function Ps(e,t,n,o=!1,r=!1){return{back:e,current:t,forward:n,replaced:o,position:window.history.length,scroll:r?As():null}}function $s(e){const{history:t,location:n}=window,o={value:Fs(e,n)},r={value:t.state};function s(o,s,l){const i=e.indexOf("#"),c=i>-1?(n.host&&document.querySelector("base")?e:e.slice(i))+o:location.protocol+"//"+location.host+e+o;try{t[l?"replaceState":"pushState"](s,"",c),r.value=s}catch(a){console.error(a),n[l?"replace":"assign"](c)}}return r.value||s(o.value,{back:null,current:o.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0),{location:o,state:r,push:function(e,n){const l=as({},r.value,t.state,{forward:e,scroll:As()});s(l.current,l,!0),s(e,as({},Ps(o.value,e,null),{position:l.position+1},n),!1),o.value=e},replace:function(e,n){s(e,as({},t.state,Ps(r.value.back,e,r.value.forward,!0),n,{position:r.value.position}),!0),o.value=e}}}function Ts(e){const t=$s(e=Cs(e)),n=function(e,t,n,o){let r=[],s=[],l=null;const i=({state:s})=>{const i=Fs(e,location),c=n.value,a=t.value;let u=0;if(s){if(n.value=i,t.value=s,l&&l===c)return void(l=null);u=a?s.position-a.position:0}else o(i);r.forEach((e=>{e(n.value,c,{delta:u,type:bs.pop,direction:u?u>0?ws.forward:ws.back:ws.unknown})}))};function c(){const{history:e}=window;e.state&&e.replaceState(as({},e.state,{scroll:As()}),"")}return window.addEventListener("popstate",i),window.addEventListener("beforeunload",c),{pauseListeners:function(){l=n.value},listen:function(e){r.push(e);const t=()=>{const t=r.indexOf(e);t>-1&&r.splice(t,1)};return s.push(t),t},destroy:function(){for(const e of s)e();s=[],window.removeEventListener("popstate",i),window.removeEventListener("beforeunload",c)}}}(e,t.state,t.location,t.replace);const o=as({location:"",base:e,go:function(e,t=!0){t||n.pauseListeners(),history.go(e)},createHref:Ss.bind(null,e)},t,n);return Object.defineProperty(o,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(o,"state",{enumerable:!0,get:()=>t.state.value}),o}function js(e){return(e=location.host?e||location.pathname+location.search:"").includes("#")||(e+="#"),Ts(e)}function Ms(e){return"string"==typeof e||"symbol"==typeof e}const Ls={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Is=ns("nf");var Bs,Vs;function Us(e,t){return as(new Error,{type:e,[Is]:!0},t)}function Ns(e,t){return e instanceof Error&&Is in e&&(null==t||!!(e.type&t))}(Vs=Bs||(Bs={}))[Vs.aborted=4]="aborted",Vs[Vs.cancelled=8]="cancelled",Vs[Vs.duplicated=16]="duplicated";const Ds={sensitive:!1,strict:!1,start:!0,end:!0},qs=/[.+*?^${}()[\]/\\]/g;function Ws(e,t){let n=0;for(;nt.length?1===t.length&&80===t[0]?1:-1:0}function zs(e,t){let n=0;const o=e.score,r=t.score;for(;n1&&("*"===i||"+"===i)&&t(`A repeatable param (${a}) must be alone in its segment. eg: '/:ids+.`),s.push({type:1,value:a,regexp:u,repeatable:"*"===i||"+"===i,optional:"*"===i||"?"===i})):t("Invalid state to consume buffer"),a="")}function p(){a+=i}for(;c{s(p)}:fs}function s(e){if(Ms(e)){const t=o.get(e);t&&(o.delete(e),n.splice(n.indexOf(t),1),t.children.forEach(s),t.alias.forEach(s))}else{const t=n.indexOf(e);t>-1&&(n.splice(t,1),e.record.name&&o.delete(e.record.name),e.children.forEach(s),e.alias.forEach(s))}}function l(e){let t=0;for(;t=0;)t++;n.splice(t,0,e),e.record.name&&!Ys(e)&&o.set(e.record.name,e)}return t=Js({strict:!1,end:!0,sensitive:!1},t),e.forEach((e=>r(e))),{addRoute:r,resolve:function(e,t){let r,s,l,i={};if("name"in e&&e.name){if(r=o.get(e.name),!r)throw Us(1,{location:e});l=r.record.name,i=as(function(e,t){const n={};for(const o of t)o in e&&(n[o]=e[o]);return n}(t.params,r.keys.filter((e=>!e.optional)).map((e=>e.name))),e.params),s=r.stringify(i)}else if("path"in e)s=e.path,r=n.find((e=>e.re.test(s))),r&&(i=r.parse(s),l=r.record.name);else{if(r=t.name?o.get(t.name):n.find((e=>e.re.test(t.path))),!r)throw Us(1,{location:e,currentLocation:t});l=r.record.name,i=as({},t.params,e.params),s=r.stringify(i)}const c=[];let a=r;for(;a;)c.unshift(a.record),a=a.parent;return{name:l,path:s,params:i,matched:c,meta:Zs(c)}},removeRoute:s,getRoutes:function(){return n},getRecordMatcher:function(e){return o.get(e)}}}function Qs(e){const t={},n=e.props||!1;if("component"in e)t.default=n;else for(const o in e.components)t[o]="boolean"==typeof n?n:n[o];return t}function Ys(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function Zs(e){return e.reduce(((e,t)=>as(e,t.meta)),{})}function Js(e,t){const n={};for(const o in e)n[o]=o in t?t[o]:e[o];return n}const el=/#/g,tl=/&/g,nl=/\//g,ol=/=/g,rl=/\?/g,sl=/\+/g,ll=/%5B/g,il=/%5D/g,cl=/%5E/g,al=/%60/g,ul=/%7B/g,fl=/%7C/g,pl=/%7D/g,dl=/%20/g;function hl(e){return encodeURI(""+e).replace(fl,"|").replace(ll,"[").replace(il,"]")}function vl(e){return hl(e).replace(sl,"%2B").replace(dl,"+").replace(el,"%23").replace(tl,"%26").replace(al,"`").replace(ul,"{").replace(pl,"}").replace(cl,"^")}function ml(e){return null==e?"":function(e){return hl(e).replace(el,"%23").replace(rl,"%3F")}(e).replace(nl,"%2F")}function gl(e){try{return decodeURIComponent(""+e)}catch(t){}return""+e}function yl(e){const t={};if(""===e||"?"===e)return t;const n=("?"===e[0]?e.slice(1):e).split("&");for(let o=0;oe&&vl(e))):[o&&vl(o)]).forEach((e=>{void 0!==e&&(t+=(t.length?"&":"")+n,null!=e&&(t+="="+e))}))}return t}function _l(e){const t={};for(const n in e){const o=e[n];void 0!==o&&(t[n]=Array.isArray(o)?o.map((e=>null==e?null:""+e)):null==o?o:""+o)}return t}function wl(){let e=[];return{add:function(t){return e.push(t),()=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)}},list:()=>e,reset:function(){e=[]}}}function xl(e,t,n,o,r){const s=o&&(o.enterCallbacks[r]=o.enterCallbacks[r]||[]);return()=>new Promise(((l,i)=>{const c=e=>{var c;!1===e?i(Us(4,{from:n,to:t})):e instanceof Error?i(e):"string"==typeof(c=e)||c&&"object"==typeof c?i(Us(2,{from:t,to:e})):(s&&o.enterCallbacks[r]===s&&"function"==typeof e&&s.push(e),l())},a=e.call(o&&o.instances[r],t,n,c);let u=Promise.resolve(a);e.length<3&&(u=u.then(c)),u.catch((e=>i(e)))}))}function Cl(e,t,n,o){const r=[];for(const l of e)for(const e in l.components){let i=l.components[e];if("beforeRouteEnter"===t||l.instances[e])if("object"==typeof(s=i)||"displayName"in s||"props"in s||"__vccOpts"in s){const s=(i.__vccOpts||i)[t];s&&r.push(xl(s,n,o,l,e))}else{let s=i();r.push((()=>s.then((r=>{if(!r)return Promise.reject(new Error(`Couldn't resolve component "${e}" at "${l.path}"`));const s=(i=r).__esModule||ts&&"Module"===i[Symbol.toStringTag]?r.default:r;var i;l.components[e]=s;const c=(s.__vccOpts||s)[t];return c&&xl(c,n,o,l,e)()}))))}}var s;return r}function El(e){const t=jt(ss),n=jt(ls),o=bt((()=>t.resolve(vt(e.to)))),r=bt((()=>{const{matched:e}=o.value,{length:t}=e,r=e[t-1],s=n.matched;if(!r||!s.length)return-1;const l=s.findIndex(vs.bind(null,r));if(l>-1)return l;const i=Al(e[t-2]);return t>1&&Al(r)===i&&s[s.length-1].path!==i?s.findIndex(vs.bind(null,e[t-2])):l})),s=bt((()=>r.value>-1&&function(e,t){for(const n in t){const o=t[n],r=e[n];if("string"==typeof o){if(o!==r)return!1}else if(!Array.isArray(r)||r.length!==o.length||o.some(((e,t)=>e!==r[t])))return!1}return!0}(n.params,o.value.params))),l=bt((()=>r.value>-1&&r.value===n.matched.length-1&&ms(n.params,o.value.params)));return{route:o,href:bt((()=>o.value.href)),isActive:s,isExactActive:l,navigate:function(n={}){return function(e){if(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)return;if(e.defaultPrevented)return;if(void 0!==e.button&&0!==e.button)return;if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}e.preventDefault&&e.preventDefault();return!0}(n)?t[vt(e.replace)?"replace":"push"](vt(e.to)).catch(fs):Promise.resolve()}}}const Sl=qt({name:"RouterLink",props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:El,setup(e,{slots:t}){const n=et(El(e)),{options:o}=jt(ss),r=bt((()=>({[kl(e.activeClass,o.linkActiveClass,"router-link-active")]:n.isActive,[kl(e.exactActiveClass,o.linkExactActiveClass,"router-link-exact-active")]:n.isExactActive})));return()=>{const o=t.default&&t.default(n);return e.custom?o:br("a",{"aria-current":n.isExactActive?e.ariaCurrentValue:null,href:n.href,onClick:n.navigate,class:r.value},o)}}});function Al(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const kl=(e,t,n)=>null!=e?e:null!=t?t:n;function Ol(e,t){if(!e)return null;const n=e(t);return 1===n.length?n[0]:n}const Rl=qt({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},setup(e,{attrs:t,slots:n}){const o=jt(is),r=bt((()=>e.route||o.value)),s=jt(rs,0),l=bt((()=>r.value.matched[s]));Tt(rs,s+1),Tt(os,l),Tt(is,r);const i=dt(c,!1);var c;return hr((()=>[i.value,l.value,e.name]),(([e,t,n],[o,r,s])=>{t&&(t.instances[n]=e,r&&r!==t&&e&&e===o&&(t.leaveGuards.size||(t.leaveGuards=r.leaveGuards),t.updateGuards.size||(t.updateGuards=r.updateGuards))),!e||!t||r&&vs(t,r)&&o||(t.enterCallbacks[n]||[]).forEach((t=>t(e)))}),{flush:"post"}),()=>{const o=r.value,s=l.value,c=s&&s.components[e.name],a=e.name;if(!c)return Ol(n.default,{Component:c,route:o});const u=s.props[e.name],f=u?!0===u?o.params:"function"==typeof u?u(o):u:null,p=br(c,as({},f,t,{onVnodeUnmounted:e=>{e.component.isUnmounted&&(s.instances[a]=null)},ref:i}));return Ol(n.default,{Component:p,route:o})||p}}});function Fl(e){const t=Xs(e.routes,e),n=e.parseQuery||yl,o=e.stringifyQuery||bl,r=e.history,s=wl(),l=wl(),i=wl(),c=dt(Ls,!0);let a=Ls;cs&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const u=us.bind(null,(e=>""+e)),f=us.bind(null,ml),p=us.bind(null,gl);function d(e,s){if(s=as({},s||c.value),"string"==typeof e){const o=ds(n,e,s.path),l=t.resolve({path:o.path},s),i=r.createHref(o.fullPath);return as(o,l,{params:p(l.params),hash:gl(o.hash),redirectedFrom:void 0,href:i})}let l;if("path"in e)l=as({},e,{path:ds(n,e.path,s.path).path});else{const t=as({},e.params);for(const e in t)null==t[e]&&delete t[e];l=as({},e,{params:f(e.params)}),s.params=f(s.params)}const i=t.resolve(l,s),a=e.hash||"";i.params=u(p(i.params));const d=function(e,t){const n=t.query?e(t.query):"";return t.path+(n&&"?")+n+(t.hash||"")}(o,as({},e,{hash:(h=a,hl(h).replace(ul,"{").replace(pl,"}").replace(cl,"^")),path:i.path}));var h;const v=r.createHref(d);return as({fullPath:d,hash:a,query:o===bl?_l(e.query):e.query||{}},i,{redirectedFrom:void 0,href:v})}function h(e){return"string"==typeof e?ds(n,e,c.value.path):as({},e)}function v(e,t){if(a!==e)return Us(8,{from:t,to:e})}function m(e){return y(e)}function g(e){const t=e.matched[e.matched.length-1];if(t&&t.redirect){const{redirect:n}=t;let o="function"==typeof n?n(e):n;return"string"==typeof o&&(o=o.includes("?")||o.includes("#")?o=h(o):{path:o},o.params={}),as({query:e.query,hash:e.hash,params:e.params},o)}}function y(e,t){const n=a=d(e),r=c.value,s=e.state,l=e.force,i=!0===e.replace,u=g(n);if(u)return y(as(h(u),{state:s,force:l,replace:i}),t||n);const f=n;let p;return f.redirectedFrom=t,!l&&function(e,t,n){const o=t.matched.length-1,r=n.matched.length-1;return o>-1&&o===r&&vs(t.matched[o],n.matched[r])&&ms(t.params,n.params)&&e(t.query)===e(n.query)&&t.hash===n.hash}(o,r,n)&&(p=Us(16,{to:f,from:r}),F(r,r,!0,!1)),(p?Promise.resolve(p):_(f,r)).catch((e=>Ns(e)?e:O(e,f,r))).then((e=>{if(e){if(Ns(e,2))return y(as(h(e.to),{state:s,force:l,replace:i}),t||f)}else e=x(f,r,!0,i,s);return w(f,r,e),e}))}function b(e,t){const n=v(e,t);return n?Promise.reject(n):Promise.resolve()}function _(e,t){let n;const[o,r,i]=function(e,t){const n=[],o=[],r=[],s=Math.max(t.matched.length,e.matched.length);for(let l=0;lvs(e,s)))?o.push(s):n.push(s));const i=e.matched[l];i&&(t.matched.find((e=>vs(e,i)))||r.push(i))}return[n,o,r]}(e,t);n=Cl(o.reverse(),"beforeRouteLeave",e,t);for(const s of o)s.leaveGuards.forEach((o=>{n.push(xl(o,e,t))}));const c=b.bind(null,e,t);return n.push(c),Pl(n).then((()=>{n=[];for(const o of s.list())n.push(xl(o,e,t));return n.push(c),Pl(n)})).then((()=>{n=Cl(r,"beforeRouteUpdate",e,t);for(const o of r)o.updateGuards.forEach((o=>{n.push(xl(o,e,t))}));return n.push(c),Pl(n)})).then((()=>{n=[];for(const o of e.matched)if(o.beforeEnter&&!t.matched.includes(o))if(Array.isArray(o.beforeEnter))for(const r of o.beforeEnter)n.push(xl(r,e,t));else n.push(xl(o.beforeEnter,e,t));return n.push(c),Pl(n)})).then((()=>(e.matched.forEach((e=>e.enterCallbacks={})),n=Cl(i,"beforeRouteEnter",e,t),n.push(c),Pl(n)))).then((()=>{n=[];for(const o of l.list())n.push(xl(o,e,t));return n.push(c),Pl(n)})).catch((e=>Ns(e,8)?e:Promise.reject(e)))}function w(e,t,n){for(const o of i.list())o(e,t,n)}function x(e,t,n,o,s){const l=v(e,t);if(l)return l;const i=t===Ls,a=cs?history.state:{};n&&(o||i?r.replace(e.fullPath,as({scroll:i&&a&&a.scroll},s)):r.push(e.fullPath,s)),c.value=e,F(e,t,n,i),R()}let C;function E(){C=r.listen(((e,t,n)=>{const o=d(e),s=g(o);if(s)return void y(as(s,{replace:!0}),o).catch(fs);a=o;const l=c.value;var i,u;cs&&(i=Os(l.fullPath,n.delta),u=As(),Rs.set(i,u)),_(o,l).catch((e=>Ns(e,12)?e:Ns(e,2)?(y(e.to,o).then((e=>{Ns(e,20)&&!n.delta&&n.type===bs.pop&&r.go(-1,!1)})).catch(fs),Promise.reject()):(n.delta&&r.go(-n.delta,!1),O(e,o,l)))).then((e=>{(e=e||x(o,l,!1))&&(n.delta?r.go(-n.delta,!1):n.type===bs.pop&&Ns(e,20)&&r.go(-1,!1)),w(o,l,e)})).catch(fs)}))}let S,A=wl(),k=wl();function O(e,t,n){R(e);const o=k.list();return o.length?o.forEach((o=>o(e,t,n))):console.error(e),Promise.reject(e)}function R(e){S||(S=!0,E(),A.list().forEach((([t,n])=>e?n(e):t())),A.reset())}function F(t,n,o,r){const{scrollBehavior:s}=e;if(!cs||!s)return Promise.resolve();const l=!o&&function(e){const t=Rs.get(e);return Rs.delete(e),t}(Os(t.fullPath,0))||(r||!o)&&history.state&&history.state.scroll||null;return sr().then((()=>s(t,n,l))).then((e=>e&&ks(e))).catch((e=>O(e,t,n)))}const P=e=>r.go(e);let $;const T=new Set;return{currentRoute:c,addRoute:function(e,n){let o,r;return Ms(e)?(o=t.getRecordMatcher(e),r=n):r=e,t.addRoute(r,o)},removeRoute:function(e){const n=t.getRecordMatcher(e);n&&t.removeRoute(n)},hasRoute:function(e){return!!t.getRecordMatcher(e)},getRoutes:function(){return t.getRoutes().map((e=>e.record))},resolve:d,options:e,push:m,replace:function(e){return m(as(h(e),{replace:!0}))},go:P,back:()=>P(-1),forward:()=>P(1),beforeEach:s.add,beforeResolve:l.add,afterEach:i.add,onError:k.add,isReady:function(){return S&&c.value!==Ls?Promise.resolve():new Promise(((e,t)=>{A.add([e,t])}))},install(e){e.component("RouterLink",Sl),e.component("RouterView",Rl),e.config.globalProperties.$router=this,Object.defineProperty(e.config.globalProperties,"$route",{enumerable:!0,get:()=>vt(c)}),cs&&!$&&c.value===Ls&&($=!0,m(r.location).catch((e=>{})));const t={};for(const o in Ls)t[o]=bt((()=>c.value[o]));e.provide(ss,this),e.provide(ls,et(t)),e.provide(is,c);const n=e.unmount;T.add(e),e.unmount=function(){T.delete(e),T.size<1&&(a=Ls,C&&C(),c.value=Ls,$=!1,S=!1),n()}}}}function Pl(e){return e.reduce(((e,t)=>e.then((()=>t()))),Promise.resolve())}export{Zn as F,Gt as K,Br as T,co as a,So as b,ao as c,mo as d,go as e,wo as f,o as g,bo as h,Ao as i,In as j,kt as k,Fl as l,js as m,i as n,ro as o,At as p,sr as q,Hn as r,es as s,c as t,_o as u,Qr as v,Ot as w,hr as x,Xn as y}; diff --git a/vite/index.html b/vite/index.html deleted file mode 100644 index 83f1ad7b..00000000 --- a/vite/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - Vant Weapp - 轻量、可靠的小程序 UI 组件库 - - - - - - - - - - - - - - - - -
- - - diff --git a/vite/mobile.html b/vite/mobile.html deleted file mode 100644 index e735a505..00000000 --- a/vite/mobile.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - Vant Weapp - 轻量、可靠的小程序 UI 组件库 - - - - - - - - - - - - - - - - - -
- - -