mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
11877 lines
1.2 MiB
11877 lines
1.2 MiB
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 ? `<svg>${content}</svg>` : 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]} <span>${name.slice(1).join(" ")}</span>`;
|
|
},
|
|
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>|<\/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: "<mark>", highlightPostTag: "</mark>", 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('<h1>\u66F4\u65B0\u65E5\u5FD7</h1><div class="van-doc-card"><h3 id="v1.9.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.7...v1.9.0">v1.9.0</a></h3><p><code>2021-09-27</code></p><p><strong>Bug Fixes</strong></p><ul><li>Slider: \u79FB\u9664 theme mixin <a href="https://github.com/youzan/vant-weapp/issues/4520">#4520</a></li><li>Tab: \u4FEE\u590D\u521D\u59CB\u4F4D\u7F6E\u4E0D\u6B63\u786E\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4521">#4521</a></li></ul><p><strong>Document</strong></p><ul><li>ActionSheet: \u6DFB\u52A0 show \u5C5E\u6027\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/issues/4518">#4518</a></li></ul><p><strong>Feature</strong></p><ul><li>Slider: \u6DFB\u52A0 vertical \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4486">#4486</a></li></ul><p><strong>Performance</strong></p><ul><li>\u79FB\u9664 CSS variables \u517C\u5BB9\u4EE3\u7801 <a href="https://github.com/youzan/vant-weapp/issues/4487">#4487</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.7" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.6...v1.8.7">v1.8.7</a></h3><p><code>2021-09-22</code></p><p><strong>Features</strong></p><ul><li>Icons: \u65B0\u589E guide-o \u56FE\u6807 <a href="https://github.com/youzan/vant-weapp/issues/4507">#4507</a></li></ul></div><div class="van-doc-card"><h3 id="1.8.6" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.5...v1.8.6">1.8.6</a></h3><p><code>2021-09-20</code></p><p><strong>Features</strong></p><ul><li>Calendar: \u65B0\u589E confirmDisabledText \u9ED8\u8BA4\u6587\u6848 <a href="https://github.com/youzan/vant-weapp/issues/4490">#4490</a>) (<a href="https://github.com/youzan/vant-weapp/commit/8629da1b75bb50e2f0a99905de90fd85015fb785">8629da1</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>\u79FB\u9664 optionalTypes <a href="https://github.com/youzan/vant-weapp/issues/4501">#4501</a>) (<a href="https://github.com/youzan/vant-weapp/commit/3afe10c0f929e5c6b0f32ca34de9dc8d05c8c016">3afe10c</a></li><li>Docs: \u4FEE\u590D\u6587\u6863\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/issues/4489">#4489</a></li></ul></div><div class="van-doc-card"><h3 id="1.8.5" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.4...v1.8.5">1.8.5</a></h3><p><code>2021-09-15</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D\u8D85\u51FA\u9009\u62E9\u8303\u56F4 toast \u63D0\u793A\u4E00\u76F4\u5B58\u5728\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4474">#4474</a></li><li>page-scroll: \u4FEE\u590D isDef \u53D6\u53CD\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4488">#4488</a></li></ul></div><div class="van-doc-card"><h3 id="1.8.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.3...v1.8.4">1.8.4</a></h3><p><code>2021-09-07</code></p><p><strong>Bug Fixes</strong></p><ul><li>page-scroll: \u4FEE\u590D getCurrentPage \u4E3A\u7A7A\u65F6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/issues/4458">#4458</a></li></ul><p><strong>Features</strong></p><ul><li>Field: \u65B0\u589E clear-trigger \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4461">#4461</a></li><li>Search: \u65B0\u589E clear-icon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4463">#4463</a></li><li>Search: \u65B0\u589E clear-trigger \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/commit/9e17b13164e57ff09140d755870853f702a89a39">9e17b13</a></li><li>Slider: \u65B0\u589E range \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4442">#4442</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.2...v1.8.3">v1.8.3</a></h3><p><code>2021-08-30</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D default-date \u5C5E\u6027\u5931\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4430">#4430</a></li><li>ShareSheet: \u8C03\u6574 overlayStyle \u5C5E\u6027\u7C7B\u578B\u4E3A string <a href="https://github.com/youzan/vant-weapp/commit/8c408e23030e65a0baf62f0b21fb8ed3f2c9df67">8c408e2</a></li><li>Stepper: \u8C03\u6574 minus/plus slots \u4F4D\u7F6E <a href="https://github.com/youzan/vant-weapp/issues/4427">#4427</a></li><li>Sticky: \u4FEE\u590D root \u4E3A null \u65F6\uFF0C\u8BFB\u53D6 root.top \u62A5\u9519\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4433">#4433</a></li><li>Calendar: \u8C03\u6574 minDate \u548C maxDate \u4F20\u503C\u7C7B\u578B\u4E3A Number <a href="https://github.com/youzan/vant-weapp/commit/37d8e697c9e3d985b926f68553b8afbb5c0a0569">37d8e69</a></li></ul><p><strong>Features</strong></p><ul><li>Popup: \u65B0\u589E lock-scroll \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4384">#4384</a></li></ul><p><strong>Performance Improvements</strong></p><ul><li>Radio: label \u7684 margin-left \u6539\u4E3A padding-left\uFF0C\u589E\u5927\u53EF\u70B9\u51FB\u533A\u57DF\uFF0C\u589E\u5F3A\u7528\u6237\u4F53\u9A8C <a href="https://github.com/youzan/vant-weapp/issues/4165">#4165</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.1...v1.8.2">v1.8.2</a></h3><p><code>2021-08-18</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/7f7cf62ee0f675ad6b86d41f70b23336e7ddc7a1">7f7cf6</a></li><li>Field: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/6dd42a0473578e26e5f5f96158959e56689f68b6">6dd42a</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.0...v1.8.1">v1.8.1</a></h3><p><code>2021-08-18</code></p><p><strong>Feature</strong></p><ul><li>Calendar: \u65B0\u589E click-subtitle \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4385">#4385</a></li><li>Circle: \u4F7F\u7528 setTimeout \u4EE3\u66FF setInterval <a href="https://github.com/youzan/vant-weapp/issues/4401">#4401</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Picker: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4408">#4408</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.7.2...v1.8.0">v1.8.0</a></h3><p><code>2021-08-11</code></p><p><strong>Feature</strong></p><ul><li>Overlay: \u65B0\u589E lock-scroll \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4383">#4383</a></li><li>search: \u65B0\u589E click-input \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4357">#4357</a></li></ul><p><strong>Performance</strong></p><ul><li>\u79FB\u9664\u4E86 iOS8 \u76F8\u5173\u7684 polyfill\uFF0C\u51CF\u5C11\u5305\u4F53\u79EF <a href="https://github.com/youzan/vant-weapp/issues/4395">#4395</a></li></ul></div><div class="van-doc-card"><h3 id="v1.7.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.7.1...v1.7.2">v1.7.2</a></h3><p><code>2021-07-19</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u521D\u59CB\u65E5\u671F\u8BBE\u7F6E\u4E3A\u5F53\u524D\u65E5\u671F <a href="https://github.com/youzan/vant-weapp/issues/4339">#4339</a></li></ul><p><strong>Features</strong></p><ul><li>Cell: CellGroup \u65B0\u589E inset \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4341">#4341</a></li><li>Search: \u65B0\u589E click-input \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4337">#4337</a></li></ul></div><div class="van-doc-card"><h3 id="1.7.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.7.1">1.7.1</a></h3><p><code>2021-07-06</code></p><p><strong>Bug Fixes</strong></p><ul><li>Col: \u4FEE\u590D\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4322">#4322</a></li><li>Grid: \u589E\u52A0 icon-prefix \u5C5E\u6027\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/issues/4318">#4318</a></li><li>IndexBar: \u4FEE\u590D\u5F53\u7D22\u5F15\u5217\u8868\u4E3A\u7A7A\u65F6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/issues/4310">#4310</a></li></ul></div><div class="van-doc-card"><h3 id="1.7.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.7.0">1.7.0</a></h3><p><code>2021-07-04</code></p><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D type \u4E3A getUserInfo & wx.getUserProfile \u53EF\u7528\u65F6 lang \u53C2\u6570\u5931\u6548 <a href="https://github.com/youzan/vant-weapp/issues/4250">#4250</a></li><li>ShareSheet: \u65B0\u589E\u5185\u7F6E icon <code>weapp-qrcode</code> <code>wechat-moments</code> <a href="https://github.com/youzan/vant-weapp/issues/4256">#4256</a></li></ul><p><strong>Features</strong></p><ul><li>Checkbox: \u589E\u52A0 direction \u5C5E\u6027\uFF0C\u8BBE\u7F6E\u6392\u5217\u65B9\u5411 <a href="https://github.com/youzan/vant-weapp/issues/4265">#4265</a></li><li>ConfigProvider: \u589E\u52A0\u5168\u5C40\u914D\u7F6E\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4279">#4279</a></li><li>Grid: \u589E\u52A0 reverse \u5C5E\u6027\uFF0C\u652F\u6301\u6587\u672C&\u56FE\u7247\u4F4D\u7F6E\u4E92\u6362 <a href="https://github.com/youzan/vant-weapp/issues/4280">#4280</a></li><li>GridItem: \u589E\u52A0 icon-prefix \u5C5E\u6027\uFF0C\u652F\u6301\u7B2C\u4E09\u65B9\u5B57\u4F53 <a href="https://github.com/youzan/vant-weapp/issues/4276">#4276</a></li><li>Rate: \u589E\u52A0\u66F4\u591A css \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/issues/4297">#4297</a></li><li>Slider: \u589E\u52A0\u66F4\u591A css \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/issues/4305">#4305</a></li></ul><p><strong>Improvements</strong></p><ul><li>wxs style \u65B9\u6CD5\u652F\u6301\u9A7C\u5CF0\u53D8\u91CF\u547D\u540D\uFF0C\u4EE5\u4FBF\u80FD\u66F4\u597D\u7684\u5728 wxml \u4E2D\u4F7F\u7528 <a href="https://github.com/youzan/vant-weapp/issues/4281">#4281</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.9" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.9">1.6.9</a></h3><p><code>2021-06-06</code></p><p><strong>Bug Fixes</strong></p><ul><li>DatetimePicker: \u4FEE\u590D \u52A8\u6001\u8BBE\u7F6E min-hour min-date \u663E\u793A\u4E0D\u6B63\u786E <a href="https://github.com/youzan/vant-weapp/issues/4245">#4245</a></li><li>Tabs: \u4FEE\u590D tab \u6570\u91CF\u8F83\u591A\u65F6\u6EDA\u52A8\u8DDD\u79BB\u4E0D\u6B63\u786E <a href="https://github.com/youzan/vant-weapp/issues/4202">#4202</a></li><li>Uploader: \u4FEE\u590D demo \u4E2D beforeRead \u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/issues/4235">#4235</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.9-beta.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.9-beta.2">1.6.9-beta.2</a></h3><p><code>2021-05-22</code></p><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D open-type \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/issues/4222">#4222</a></li><li>Calendar: \u4FEE\u590D allow-same-day \u5F00\u542F\u65F6 custom-color \u5C5E\u6027\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/issues/4200">#4200</a></li><li>Circle: \u4FEE\u590D value \u662F\u5C0F\u6570\u65F6\u6296\u52A8\u7684\u60C5\u51B5 <a href="https://github.com/youzan/vant-weapp/issues/4152">#4152</a></li><li>NoticeBar: \u8C03\u6574\u6EDA\u52A8\u884C\u4E3A <a href="https://github.com/youzan/vant-weapp/issues/4201">#4201</a></li><li>NoticeBar: \u4FEE\u590D\u4E0D\u6B63\u786E\u7684\u6EDA\u52A8\u901F\u5EA6 <a href="https://github.com/youzan/vant-weapp/commit/cde3876fb0742cacf3e481a8eb2b487dabc8709e">cde3876</a></li><li>Radio: \u652F\u6301\u52A8\u6001\u8BBE\u7F6E disabled <a href="https://github.com/youzan/vant-weapp/issues/4191">#4191</a></li><li>Rate: \u652F\u6301\u6ED1\u52A8\u9009\u62E9\u534A\u661F <a href="https://github.com/youzan/vant-weapp/issues/4195">#4195</a></li></ul><p><strong>Features</strong></p><ul><li>Calendar: \u589E\u52A0 first-day-of-week \u5C5E\u6027\uFF0C\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5 <a href="https://github.com/youzan/vant-weapp/issues/4211">#4211</a></li><li>Calendar: \u589E\u52A0 show-range-prompt \u5C5E\u6027\u548C over-range \u4E8B\u4EF6\uFF0C\u8BBE\u7F6E\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848 <a href="https://github.com/youzan/vant-weapp/issues/4212">#4212</a></li><li>Icons: \u56FE\u6807\u5E93\u8FC1\u79FB\u81F3 iconfont.cn <a href="https://github.com/youzan/vant-weapp/issues/4219">#4219</a></li><li>OpenType: \u652F\u6301 getUserProfile <a href="https://github.com/youzan/vant-weapp/issues/4203">#4203</a></li><li>Panel: \u79FB\u9664 useFooterSlot <a href="https://github.com/youzan/vant-weapp/issues/4205">#4205</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.8" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.8">1.6.8</a></h3><p><code>2021-02-26</code></p><p><strong>Features</strong></p><ul><li>NoticeBar: \u65B0\u589E\u9ED8\u8BA4\u63D2\u69FD (<a href="https://github.com/youzan/vant-weapp/pull/4048">#4048</a>)</li><li>Stepper: \u65B0\u589E theme \u5C5E\u6027\uFF0C\u652F\u6301\u5706\u5F62\u98CE\u683C (<a href="https://github.com/youzan/vant-weapp/pull/4049">#4049</a>)</li><li>Stepper: \u65B0\u589E plus & minus \u63D2\u69FD (<a href="https://github.com/youzan/vant-weapp/pull/4049">#4049</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Checkbox: \u4FEE\u590D label-position \u5C5E\u6027\u65E0\u6548 (<a href="https://github.com/youzan/vant-weapp/pull/4036">#4036</a>)</li><li>Dialog: \u4FEE\u590D beforeClose \u65B9\u6CD5\u7C7B\u578B\u5B9A\u4E49 (<a href="https://github.com/youzan/vant-weapp/pull/4019">#4019</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Circle: \u5F53\u5185\u7F6E canvas \u4E0D\u652F\u6301\u540C\u5C42\u6E32\u67D3\u65F6\u964D\u7EA7\u81F3\u9ED8\u8BA4 type (<a href="https://github.com/youzan/vant-weapp/pull/4050">#4050</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.7" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.7">1.6.7</a></h3><p><code>2021-01-27</code></p><p><strong>Features</strong></p><ul><li>Radio: \u65B0\u589E <code>direction</code> \u5C5E\u6027 (<a href="https://github.com/youzan/vant-weapp/issues/4007">#4007</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Icons: \u4FEE\u590D\u90E8\u5206\u5730\u533A\u56FE\u6807\u4E0D\u663E\u793A (<a href="https://github.com/youzan/vant-weapp/issues/4012">#4012</a>)</li><li>Transition: \u4FEE\u590D\u9ED8\u8BA4\u8BBE\u7F6E <code>show</code> \u5C5E\u6027\u4E3A <code>true</code> \u65F6\u4E0D\u751F\u6548 (<a href="https://github.com/youzan/vant-weapp/issues/4005">#4005</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.6" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.6">1.6.6</a></h3><p><code>2021-01-21</code></p><p><strong>Features</strong></p><ul><li>Uploader: \u652F\u6301\u6587\u4EF6\u9884\u89C8 (<a href="https://github.com/youzan/vant-weapp/pull/3975">#3975</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Picker: \u4FEE\u590D\u6807\u9898\u680F\u65E0\u6CD5\u663E\u793A (<a href="https://github.com/youzan/vant-weapp/pull/3973">#3973</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Calendar: \u4F18\u5316\u6A21\u677F\u4EE3\u7801 (<a href="https://github.com/youzan/vant-weapp/pull/3972">#3972</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.5" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.5">1.6.5</a></h3><p><code>2021-01-19</code></p><p><strong>Features</strong></p><ul><li>Field: \u65B0\u589E input \u63D2\u69FD (<a href="https://github.com/youzan/vant-weapp/pull/3932">#3932</a>)</li><li>Field: \u65B0\u589E click-input \u4E8B\u4EF6 (<a href="https://github.com/youzan/vant-weapp/pull/3932">#3932</a>)</li><li>Icon: \u65B0\u589E delete-o\u3001sort\u3001font\u3001font-o\u3001revoke \u56FE\u6807 (<a href="https://github.com/youzan/vant-weapp/pull/3881">#3881</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D custom-style \u5C5E\u6027\u4E0D\u751F\u6548 (<a href="https://github.com/youzan/vant-weapp/pull/3903">#3903</a>)</li><li>Dialog: \u4FEE\u590D close-on-click-overlay \u5C5E\u6027\u4E0D\u751F\u6548 (<a href="https://github.com/youzan/vant-weapp/pull/3913">#3913</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Cell: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3888">#3888</a>)</li><li>Col: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3886">#3886</a>)</li><li>Divider: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3887">#3887</a>)</li><li>Empty: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3933">#3933</a>)</li><li>Loading: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3892">#3892</a>)</li><li>Notice-bar: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3891">#3891</a>)</li><li>Notify: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3893">#3893</a>)</li><li>Picker: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3949">#3949</a>)</li><li>Stepper: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3890">#3890</a>)</li><li>Sticky: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3879">#3879</a>)</li><li>SwipeCell: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3928">#3928</a>)</li><li>Switch: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3889">#3889</a>)</li><li>Tag: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3894">#3894</a>)</li><li>Transition: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3895">#3895</a>)</li><li>Uploader: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3897">#3897</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.4">1.6.4</a></h3><p><code>2020-12-18</code></p><p><strong>Improvements</strong></p><ul><li>Tab: \u4F18\u5316\u7C98\u6027\u5E03\u5C40\u65F6\u7684\u6E32\u67D3\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3875">#3875</a>)</li><li>Grid: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Image: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Button: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3839">#3839</a>)</li><li>Icon: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Checkbox: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Slider: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D\u5728 phone \u8BBE\u5907\u4E0A\u9009\u62E9\u65E5\u671F\u540E\u663E\u793A\u9519\u8BEF (<a href="https://github.com/youzan/vant-weapp/pull/3833">#3833</a>)</li><li>GoodsAction: \u4FEE\u590D\u90E8\u5206\u8BBE\u5907\u4E0A\u9AD8\u5EA6\u5F02\u5E38 (<a href="https://github.com/youzan/vant-weapp/pull/3865">#3865</a>)</li><li>Slider: \u4FEE\u590D\u8BBE\u7F6E <code>max</code> <code>min</code> \u65F6\u6ED1\u52A8\u4E0D\u5747\u5300 (<a href="https://github.com/youzan/vant-weapp/pull/3876">#3876</a>)</li><li>Tab: \u4FEE\u590D\u5207\u6362\u65F6\u5185\u5BB9\u533A\u95EA\u70C1\u7684\u95EE\u9898 (<a href="https://github.com/youzan/vant-weapp/pull/3866">#3866</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.3">1.6.3</a></h3><p><code>2020-12-09</code></p><p><strong>Features</strong></p><ul><li>Dialog: \u65B0\u589E <code>beforeClose</code> \u5C5E\u6027 (<a href="https://github.com/youzan/vant-weapp/pull/3815">#3815</a>)</li><li>uploader: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF (<a href="https://github.com/youzan/vant-weapp/pull/3797">#3797</a>)</li><li>Aarea: \u652F\u6301\u4E0D\u4F20\u5165 <code>county_list</code> \u6570\u636E (<a href="https://github.com/youzan/vant-weapp/pull/3824">#3824</a>)</li><li>Tab: \u65B0\u589E <code>resize</code> \u65B9\u6CD5 (<a href="https://github.com/youzan/vant-weapp/pull/3827">#3827</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Collapse: \u4F7F\u7528 animate \u63D0\u5347\u52A8\u753B\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3826">#3826</a>)</li><li>Tab: \u4F18\u5316\u6837\u5F0F\u62FC\u88C5\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3827">#3827</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u8F93\u5165\u4E2D\u6587\u65F6\u663E\u793A\u5B57\u6570\u6682\u65F6\u8D85\u51FA maxlength (<a href="https://github.com/youzan/vant-weapp/pull/3802">#3802</a>)</li><li>Info: \u4FEE\u590D\u6837\u5F0F\u9519\u8BEF (<a href="https://github.com/youzan/vant-weapp/pull/3823">#3823</a>)</li><li>NavBar: \u4FEE\u590D\u52A8\u6001\u6E32\u67D3\u65F6\u7EC4\u4EF6\u62A5\u9519 (<a href="https://github.com/youzan/vant-weapp/pull/3822">#3822</a>)</li><li>Progress: \u4FEE\u590D <code>percentage</code> \u4E3A 0 \u65F6\u6837\u5F0F\u5F02\u5E38 (<a href="https://github.com/youzan/vant-weapp/pull/3808">#3808</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.2">1.6.2</a></h3><p><code>2020-11-29</code></p><p><strong>Features</strong></p><ul><li>Tabbar: \u65B0\u589E <code>placeholder</code> <code>icon-prefix</code> \u5C5E\u6027 (<a href="https://github.com/youzan/vant-weapp/pull/3792">#3792</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>DatetimePicker: \u4FEE\u590D <code>type=year-month</code> \u65F6\u9009\u62E9\u51FA\u73B0\u62A5\u9519 (<a href="https://github.com/youzan/vant-weapp/pull/3783">#3783</a>)</li><li>Info: \u4FEE\u590D\u90E8\u5206\u5B89\u5353\u8BBE\u5907\u4E2D\u6587\u6848\u4E0D\u5B8C\u5168\u5C45\u4E2D (<a href="https://github.com/youzan/vant-weapp/pull/3778">#3778</a>)</li><li>Tab: \u4FEE\u590D <code>ellipsis</code> \u4E3A <code>false</code> \u65F6\u4E0B\u5212\u7EBF\u4F4D\u7F6E\u4E0D\u6B63\u786E (<a href="https://github.com/youzan/vant-weapp/pull/3777">#3777</a>)</li><li>Notify: \u4FEE\u590D\u7EC4\u4EF6\u672A\u5168\u5C40\u5C45\u4E2D (<a href="https://github.com/youzan/vant-weapp/pull/3751">#3751</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Icon: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3791">#3791</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.1">1.6.1</a></h3><p><code>2020-11-12</code></p><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u672A\u4F20\u5165 <code>label</code> \u5C5E\u6027\u65F6\u4ECD\u6E32\u67D3 label <a href="https://github.com/youzan/vant-weapp/pull/3756">#3756</a></li><li>Picker: \u4FEE\u590D confirm\u3001cancel \u4E8B\u4EF6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/3755">#3755</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.0">1.6.0</a></h3><p><code>2020-11-11</code></p><p><strong>Features</strong></p><ul><li>SwipeCell: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B <code>custom-class</code> <a href="https://github.com/youzan/vant-weapp/pull/3678">#3678</a></li><li>ActionSheet: \u8C03\u6574\u53D6\u6D88\u6587\u5B57\u989C\u8272\u81F3 @gray-7 <a href="https://github.com/youzan/vant-weapp/pull/3719">#3719</a></li><li>ActionSheet: \u8C03\u6574\u9876\u90E8\u680F\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3720">#3720</a></li><li>ActionSheet: \u8C03\u6574\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\u81F3 22px <a href="https://github.com/youzan/vant-weapp/pull/3718">#3718</a></li><li>ActionSheet: \u8C03\u6574\u63CF\u8FF0\u6587\u5B57\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3726">#3726</a></li><li>Cell: \u8C03\u6574\u56FE\u6807\u5916\u8FB9\u8DDD\u81F3 4px <a href="https://github.com/youzan/vant-weapp/pull/3721">#3721</a></li><li>DropdownMenu: \u589E\u52A0\u9ED8\u8BA4\u9634\u5F71 <a href="https://github.com/youzan/vant-weapp/pull/3723">#3723</a></li><li>DropdownMenu: \u8C03\u6574\u9009\u4E2D\u6001\u9ED8\u8BA4\u989C\u8272\u81F3 #ee0a24 <a href="https://github.com/youzan/vant-weapp/pull/3725">#3725</a></li><li>Image: \u8C03\u6574\u56FE\u6807\u5927\u5C0F\u81F3 36px <a href="https://github.com/youzan/vant-weapp/pull/3724">#3724</a></li><li>Popup: \u8C03\u6574\u5706\u89D2\u81F3 16px <a href="https://github.com/youzan/vant-weapp/pull/3713">#3713</a></li><li>Search: \u8C03\u6574\u5DE6\u4FA7\u5185\u8FB9\u8DDD\u81F3 12px <a href="https://github.com/youzan/vant-weapp/pull/3716">#3716</a></li><li>Sidebar: \u8C03\u6574\u5BBD\u5EA6\u81F3 85px <a href="https://github.com/youzan/vant-weapp/pull/3722">#3722</a></li><li>TabbarItem: \u8C03\u6574\u56FE\u6807\u5927\u5C0F\u81F3 22px <a href="https://github.com/youzan/vant-weapp/pull/3717">#3717</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u4F7F\u7528 <code>label</code> \u5C5E\u6027\u65F6 <code>label-class</code> \u6837\u5F0F\u7C7B\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3729">#3729</a></li><li>NoticeBar: \u4FEE\u590D\u5185\u5BB9\u8F83\u77ED\u65F6\u5F00\u542F <code>scrollable</code> \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3727">#3727</a></li><li>SidebarItem: \u4FEE\u590D\u957F\u6570\u5B57\u4E0D\u6362\u884C\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3714">#3714</a></li><li>Tag: \u9ED8\u8BA4\u5B57\u4F53\u52A0\u5165 miui <a href="https://github.com/youzan/vant-weapp/pull/3715">#3715</a></li></ul></div><div class="van-doc-card"><h3 id="1.5.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.5.2">1.5.2</a></h3><p><code>2020-10-15</code></p><p><strong>Features</strong></p><ul><li>Uploader: \u6807\u51C6\u5316 file-list \u4E0E\u4E8B\u4EF6\u53C2\u6570 <a href="https://github.com/youzan/vant-weapp/pull/3673">#3673</a></li><li>Uploader: \u65B0\u589E thumb\uFF0C\u652F\u6301\u7F29\u7565\u56FE\u5C55\u793A <a href="https://github.com/youzan/vant-weapp/pull/3673">#3673</a></li><li>GoodsAction: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/pull/3654">#3654</a></li><li>\u79FB\u52A8 @types/wechat-miniprogram \u81F3 dependencies <a href="https://github.com/youzan/vant-weapp/pull/3674">#3654</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D\u7EC6\u8FB9\u6846\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3653">#3653</a></li><li>Tab: \u91CD\u6784\u52A8\u753B\u5B9E\u73B0\uFF0C\u4E0D\u518D\u4F7F\u7528 <code>transform</code> <a href="https://github.com/youzan/vant-weapp/pull/3668">#3668</a></li></ul></div><div class="van-doc-card"><h3 id="1.5.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.5.1">1.5.1</a></h3><p><code>2020-09-29</code></p><p><strong>Features</strong></p><ul><li>Card: \u65B0\u589E <code>origin-price</code> <code>tag</code> \u63D2\u69FD <a href="https://github.com/youzan/vant-weapp/pull/3645">#3645</a></li><li>ShareSheet: \u8C03\u6574\u9ED8\u8BA4 z-index \u81F3 100 <a href="https://github.com/youzan/vant-weapp/pull/3575">#3575</a></li><li>ShareSheet: \u65B0\u589E item \u5C5E\u6027 openType <a href="https://github.com/youzan/vant-weapp/pull/3575">#3575</a></li><li>Uploader: \u6269\u5927\u5220\u9664\u6309\u94AE\u70B9\u51FB\u533A\u57DF <a href="https://github.com/youzan/vant-weapp/pull/3631">#3631</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Uploader: \u652F\u6301\u9884\u89C8\u89C6\u9891 <a href="https://github.com/youzan/vant-weapp/pull/3594">#3594</a></li><li>Dialog: \u8C03\u6574\u7C7B\u578B\u5B9A\u4E49 <a href="https://github.com/youzan/vant-weapp/pull/3630">#3630</a></li><li>NavBar: \u4FEE\u590D CSS \u53D8\u91CF --nav-bar-icon-color \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3643">#3643</a></li><li>NavBar: \u4FEE\u590D\u672A\u8BBE\u7F6E title \u65F6\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3643">#3643</a></li><li>Tab: \u4FEE\u590D line-width \u5C5E\u6027\u4E0D\u652F\u6301 string <a href="https://github.com/youzan/vant-weapp/pull/3628">#3628</a></li></ul></div><div class="van-doc-card"><h3 id="1.5.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.5.0">1.5.0</a></h3><p><code>2020-08-27</code></p><p><strong>Features</strong></p><ul><li>ShareSheet: \u65B0\u589E\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3559">#3559</a></li><li>Icons: \u5347\u7EA7 @vant/icons \u81F3 v1.2.5 <a href="https://github.com/youzan/vant-weapp/pull/3539">#3539</a></li><li>sidebar: \u65B0\u589E badge \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3564">#3564</a></li><li>Tabs: \u8C03\u6574\u9ED8\u8BA4 line-width \u81F3 40px <a href="https://github.com/youzan/vant-weapp/pull/3518">#3518</a></li><li>Tabs: \u53BB\u9664\u9ED8\u8BA4\u8FB9\u6846 <a href="https://github.com/youzan/vant-weapp/pull/3519">#3519</a></li><li>TreeSelect: \u65B0\u589E selected-icon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3565">#3565</a></li><li>TreeSelect: \u652F\u6301 badge\u3001dot \u663E\u793A <a href="https://github.com/youzan/vant-weapp/pull/3565">#3565</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>collapse: \u4FEE\u590D\u5D4C\u5957\u5728 popup \u7B49\u7EC4\u4EF6\u4E2D\u65F6\u9ED8\u8BA4\u5C55\u5F00\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3562">#3562</a></li><li>empty: \u4FEE\u590D image\u3001description \u63D2\u69FD\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3563">#3563</a></li></ul></div><div class="van-doc-card"><h3 id="1.4.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.4">1.4.4</a></h3><p><code>2020-08-12</code></p><p><strong>Bug Fixes</strong></p><ul><li>Transition: \u91CD\u6784\u7EC4\u4EF6\u4EE5\u4FEE\u590D\u5361\u987F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3498">#3498</a></li><li>Icon: \u4FEE\u590D\u6570\u5B57\u672A\u5BF9\u9F50 <a href="https://github.com/youzan/vant-weapp/pull/3501">#3501</a></li><li>Tab: \u4FEE\u590D\u53EF\u6EDA\u52A8\u65F6\u4E0B\u5212\u7EBF\u4F4D\u7F6E\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/3511">#3511</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.3">v1.4.3</a></h3><p><code>2020-08-07</code></p><p><strong>Features</strong></p><ul><li>Dialog: \u589E\u52A0\u5706\u89D2\u6309\u94AE\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3476">#3476</a></li><li>Cell: \u8C03\u6574\u4E0B\u5212\u7EBF\u4F4D\u7F6E <a href="https://github.com/youzan/vant-weapp/pull/3487">#3487</a></li><li>Tab: \u8C03\u6574\u9ED8\u8BA4\u6EDA\u52A8\u9608\u503C\u81F3 5 \u4E2A\u3001\u4F18\u5316\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3459">#3459</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.2">v1.4.2</a></h3><p><code>2020-08-03</code></p><p><strong>Features</strong></p><ul><li>Toast: \u4F18\u5316\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3451">#3451</a></li><li>Tag: \u4F18\u5316\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3465">#3465</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D\u8D85\u51FA max-range \u65F6\u672A\u663E\u793A Toast <a href="https://github.com/youzan/vant-weapp/pull/3466">#3466</a></li><li>Tab: \u4FEE\u590D\u624B\u52BF\u6EDA\u52A8\u53EF\u5207\u6362\u81F3\u7981\u7528\u9879 <a href="https://github.com/youzan/vant-weapp/pull/3467">#3467</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.1">v1.4.1</a></h3><p><code>2020-07-28</code></p><p><strong>Features</strong></p><ul><li>Picker: \u8C03\u6574\u9ED8\u8BA4\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570\u4E3A 6 \u4E2A <a href="https://github.com/youzan/vant-weapp/pull/3418">#3418</a></li><li>Toast: \u8C03\u6574\u5706\u89D2\u4E3A 8px <a href="https://github.com/youzan/vant-weapp/pull/3419">#3419</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Slider: \u4FEE\u590D\u70B9\u51FB\u4F1A\u89E6\u53D1 drag \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3415">#3415</a></li><li>Area: \u4FEE\u590D\u4E2D\u95F4\u5217\u65E0\u6CD5\u6EDA\u52A8 <a href="https://github.com/youzan/vant-weapp/pull/3443">#3443</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.0">v1.4.0</a></h3><p><code>2020-07-17</code></p><p><strong>Features</strong></p><ul><li>Empty: \u65B0\u589E Empty \u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3327">#3327</a></li><li>NoticeBar: \u65B0\u589E background \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3388">#3388</a></li><li>NoticeBar: \u65B0\u589E close \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3388">#3388</a></li><li>GridItem: \u65B0\u589E icon-color \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3386">#3386</a></li><li>NavBar: \u73B0\u5728 custom-style \u5C06\u5F71\u54CD\u6839\u8282\u70B9<a href="https://github.com/youzan/vant-weapp/pull/3371">#3371</a></li><li>Cell: \u65B0\u589E title-style \u5C5E\u6027, fix Field label width <a href="https://github.com/youzan/vant-weapp/pull/3370">#3370</a></li><li>Uploader: \u66F4\u65B0 failed \u56FE\u6807 <a href="https://github.com/youzan/vant-weapp/pull/3359">#3359</a></li><li>Uploader: \u66F4\u65B0\u5220\u9664\u56FE\u6807\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3385">#3385</a></li><li>Uploader: \u79FB\u9664\u5706\u89D2\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3384">#3384</a></li><li>Field: \u66F4\u65B0\u7981\u7528\u6001\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3358">#3358</a></li><li>Field: \u66F4\u65B0 label \u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3357">#3357</a></li><li>Picker: \u8C03\u6574 action button \u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3316">#3316</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Collapse: \u4F7F\u7528 animation \u91CD\u6784\u52A8\u753B\u90E8\u5206\u903B\u8F91\u4EE5\u4FEE\u590D\u52A8\u753B\u5361\u987F <a href="https://github.com/youzan/vant-weapp/pull/3401">#3401</a></li><li>Uploader: \u4FEE\u590D loading \u6837\u5F0F\u9519\u8BEF\u3001\u8C03\u6574 previewSize \u5C5E\u6027\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/pull/3317">#3317</a></li><li>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 <a href="https://github.com/youzan/vant-weapp/pull/3318">#3318</a></li><li>DatetimePicker: \u4FEE\u590D\u4F7F\u7528 formatter \u65F6\uFF0C\u4E8B\u4EF6\u8FD4\u56DE\u503C\u53EF\u80FD\u4E0D\u6B63\u786E <a href="https://github.com/youzan/vant-weapp/pull/3352">#3352</a></li><li>Field: \u4FEE\u590D textarea \u6A21\u5F0F\u4E0B label \u4E0E value \u4E0D\u5728\u540C\u4E00\u6C34\u5E73\u7EBF\u4E0A <a href="https://github.com/youzan/vant-weapp/pull/3383">#3383</a></li><li>Dialog: show dialog after class ready <a href="https://github.com/youzan/vant-weapp/pull/3374">#3374</a></li><li>Calendar: confirm-disabled-text \u5C5E\u6027\u589E\u52A0\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/pull/3394">#3394</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.3">v1.3.3</a></h3><p><code>2020-06-24</code></p><p><strong>Features</strong></p><ul><li>steps: \u4E3A\u6BCF\u4E00\u9879\u589E\u52A0 inactiveIcon\u3001activeIcon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3315">#3315</a></li><li>field: \u589E\u52A0\u5916\u90E8\u6837\u5F0F\u7C7B label-class <a href="https://github.com/youzan/vant-weapp/pull/3311">#3311</a></li><li>field: \u73B0\u5728\u603B\u4F1A\u4ECE\u5185\u90E8 set value \u503C <a href="https://github.com/youzan/vant-weapp/pull/3313">#3313</a></li><li>uploader: \u4E3A\u6BCF\u4E00\u9879\u589E\u52A0 deletable \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3270">#3270</a></li><li>uploader: \u6269\u5927\u5220\u9664\u56FE\u6807\u7684\u53EF\u70B9\u51FB\u533A\u57DF <a href="https://github.com/youzan/vant-weapp/pull/3265">#3265</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>tabbar: \u4FEE\u590D iphone-se \u4E0A\u9AD8\u5EA6\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3314">#3314</a></li><li>grid: \u4FEE\u590D text \u4E0E icon \u540C\u65F6\u8BBE\u7F6E\u65F6\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3310">#3310</a></li><li>calendar: \u4FEE\u590D\u591A\u9009\u6A21\u5F0F\u4E0B default-date \u5C5E\u6027\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3284">#3284</a></li><li>circle: \u4FEE\u590D type=\u201C2d\u201D \u65F6\u65E0\u6CD5\u52A8\u6001\u53D8\u66F4 value <a href="https://github.com/youzan/vant-weapp/pull/3264">#3264</a></li><li>nav-bar: \u4FEE\u590D\u672A\u8BBE\u7F6E left-text \u65F6\u5DE6\u4FA7\u56FE\u6807\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3263">#3263</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.2">v1.3.2</a></h3><p><code>2020-06-04</code></p><p><strong>Features</strong></p><ul><li>button: \u65B0\u589E form-type \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3208">#3208</a></li><li>grid: \u65B0\u589E icon-size\u3001badge \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3236">#3236</a></li><li>grid: \u65B0\u589E direction \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3192">#3192</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Grid: \u4FEE\u590D\u5F00\u542F <code>square</code> \u65F6\u6A2A\u3001\u7EB5\u5411\u95F4\u8DDD\u4E0D\u540C <a href="https://github.com/youzan/vant-weapp/pull/3231">#3231</a></li><li>uploader: \u4FEE\u590D\u70B9\u51FB\u5220\u9664\u56FE\u6807\u65F6\u89E6\u53D1 click-preview \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3230">#3230</a></li><li>circle: \u4FEE\u590D <code>type="2d"</code> \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3228">#3228</a></li><li>calendar: \u4FEE\u590D\u5728\u9009\u62E9\u533A\u95F4\u65F6\uFF0C\u70B9\u51FB\u786E\u5B9A\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/3195">#3195</a></li><li>tag: \u4FEE\u590D css \u53D8\u91CF\u540D\u62FC\u5199\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/3191">#3191</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.1">v1.3.1</a></h3><p><code>2020-05-24</code></p><p><strong>Features</strong></p><ul><li>Button: \u65B0\u589E class-prefix \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3159">#3159</a></li><li>Collapse: \u65B0\u589E open\u3001close \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3176">#3176</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>\u4FEE\u590D\u63A7\u5236\u53F0\u63D0\u793A\u9009\u62E9\u5668\u9519\u8BEF\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3137">#3137</a></li><li>\u4FEE\u590D GoodsActionButton \u5728\u67D0\u4E9B\u60C5\u51B5\u4E0B\u62A5\u9519\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3145">#3145</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.0">v1.3.0</a></h3><p><code>2020-05-08</code></p><h4 id="zhi-chi-jian-yi-shuang-xiang-bang-ding" tabindex="-1">\u652F\u6301\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A</h4><p>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</p><p>Slider <a href="https://github.com/youzan/vant-weapp/pull/3107">#3107</a></p><p>Search <a href="https://github.com/youzan/vant-weapp/pull/3106">#3106</a></p><p>Rate <a href="https://github.com/youzan/vant-weapp/pull/3105">#3105</a></p><p><strong>Features</strong></p><ul><li>sticky: \u65B0\u589E scroll-top \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3115">#3115</a></li><li>button: \u65B0\u589E dataset \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3075">#3075</a></li><li>uploader: \u6240\u6709\u7C7B\u578B\u90FD\u4F1A\u89E6\u53D1 click-preview \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3071">#3071</a></li><li>Uploader: \u5C5E\u6027 accept \u65B0\u589E\u503C media <a href="https://github.com/youzan/vant-weapp/pull/3047">#3047</a></li><li>feat: \u65B0\u589E\u57FA\u7840 font-family <a href="https://github.com/youzan/vant-weapp/pull/3061">#3061</a></li><li>submit-bar: \u4F7F\u7528\u53E6\u4E00\u4E2A view \u5B9E\u73B0 safe-area-inset-bottom \u4EE5\u907F\u514D\u6837\u5F0F\u51B2\u7A81 <a href="https://github.com/youzan/vant-weapp/pull/3104">#3104</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>dialog: \u4FEE\u590D title \u591A\u4F59\u7A7A\u683C\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3069">#3069</a></li><li>tab: \u4FEE\u590D tab \u4E2A\u6570\u591A\u65F6\u663E\u793A\u6EDA\u52A8\u6761 <a href="https://github.com/youzan/vant-weapp/pull/3072">#3072</a></li><li>Sticky: \u4FEE\u590D\u4F7F\u7528\u7EC4\u4EF6\u65F6\u9875\u9762 onPageScroll \u5931\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3092">#3092</a></li><li>button: \u4FEE\u590D disabled \u5C5E\u6027\u5BF9 open-type \u7C7B\u578B\u7684\u6309\u94AE\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3076">#3076</a></li></ul></div><div class="van-doc-card"><h3 id="v1.2.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.2.2">v1.2.2</a></h3><p><code>2020-04-21</code></p><p><strong>Features</strong></p><ul><li>GoodsActionButton: \u65B0\u589E CSS \u53D8\u91CF goods-action-line-height <a href="https://github.com/youzan/vant-weapp/pull/3037">#3037</a></li><li>Calendar: \u9009\u62E9\u533A\u95F4\u5927\u4E8E range \u65F6\u81EA\u52A8\u9009\u4E2D\u6700\u5927\u8303\u56F4 <a href="https://github.com/youzan/vant-weapp/pull/3026">#3026</a></li><li>Notify: \u65B0\u589E top \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3018">#3018</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u672A\u8BBE\u7F6E autosize \u65F6 wxs \u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/3038">#3038</a></li><li>Field: \u907F\u514D\u8BBE\u7F6E showClear \u4E3A undefined <a href="https://github.com/youzan/vant-weapp/pull/3012">#3012</a></li></ul></div><div class="van-doc-card"><h3 id="v1.2.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.2.1">v1.2.1</a></h3><p><code>2020-04-12</code></p><p><strong>Features</strong></p><ul><li>Field: \u652F\u6301\u5C0F\u7A0B\u5E8F\u53CC\u5411\u7ED1\u5B9A <a href="https://github.com/youzan/vant-weapp/pull/2986">#2986</a></li><li>Calendar: \u591A\u9009\u6A21\u5F0F\u4E0B\u65B0\u589E unselect \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2990">#2990</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>IndexBar: \u79FB\u9664 scroll-top \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2999">#2999</a></li><li>Uploader: \u4FEE\u590D\u56FE\u7247\u540E\u7F00\u540D\u4E3A\u5927\u5199\u65F6\u672A\u6B63\u5E38\u8BC6\u522B <a href="https://github.com/youzan/vant-weapp/pull/2987">#2987</a></li><li>Field: \u4FEE\u590D autosize \u5C5E\u6027 \u8BBE\u7F6E max-height \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3007">#3007</a></li></ul></div><div class="van-doc-card"><h3 id="v1.2.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.2.0">v1.2.0</a></h3><p><code>2020-04-04</code></p><p><strong>Features</strong></p><ul><li>TreeSelect: \u66F4\u65B0 nav \u80CC\u666F\u8272 <a href="https://github.com/youzan/vant-weapp/pull/2952">#2952</a></li><li>Sticky: \u4F7F\u7528 page scroll \u91CD\u6784\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2950">#2950</a></li><li>Field: \u65B0\u589E auto-focus\u3001disable-default-padding\u3001cursor \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2936">#2936</a></li><li>Field: \u65B0\u589E linechange\u3001keyboardheightchange \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2936">#2936</a></li><li>Uploader: \u652F\u6301\u663E\u793A\u4E0A\u4F20\u72B6\u6001 <a href="https://github.com/youzan/vant-weapp/pull/2929">#2929</a></li><li>Image: mode \u5C5E\u6027\u65B0\u589E widthFix\u3001heightFix <a href="https://github.com/youzan/vant-weapp/pull/2908">#2908</a></li><li>Canvas: \u65B0\u589E type \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2906">#2906</a></li><li>NavBar: \u65B0\u589E placeholder \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2896">#2896</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u8F93\u5165\u8FC7\u5FEB\u65F6\u8F93\u5165\u6846\u5185\u5BB9\u4E0D\u65AD\u56DE\u9000 <a href="https://github.com/youzan/vant-weapp/pull/2936">#2936</a></li><li>Calendar: \u4FEE\u590D show-confirm \u4E3A true \u65F6\u7EC4\u4EF6\u521D\u59CB\u5316\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/2951">#2951</a></li><li>Tab: \u4FEE\u590D type \u4E3A card \u65F6 color \u5BF9\u8FB9\u6846\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2941">#2941</a></li></ul></div><div class="van-doc-card"><h3 id="v1.1.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.1.0">v1.1.0</a></h3><p><code>2020-03-21</code></p><p><strong>Features</strong></p><ul><li>\u65B0\u589E Calendar \u65E5\u5386\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2894">#2894</a></li><li>Grid: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B custom-class\u3001content-class\u3001icon-class\u3001text-class <a href="https://github.com/youzan/vant-weapp/pull/2882">#2882</a></li><li>Steps: \u65B0\u589E click \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2874">#2874</a></li><li>SideBar: \u65B0\u589E title \u63D2\u69FD <a href="https://github.com/youzan/vant-weapp/pull/2873">#2873</a></li><li>Uploader: \u65B0\u589E upload-icon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2869">#2869</a></li><li>Uploader: \u65B0\u589E show-upload \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2868">#2868</a></li><li>Uploader: \u66F4\u65B0\u6837\u5F0F\u3001\u8C03\u6574\u4E8B\u4EF6\u89E6\u53D1\u987A\u5E8F\u4E0E vant \u4E00\u81F4 <a href="https://github.com/youzan/vant-weapp/pull/2886">#2886</a></li><li>Field: \u65B0\u589E show-word-limit \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2856">#2856</a></li><li>Field: autosize \u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\uFF0C\u6307\u5B9A maxHeight \u4E0E minHeight <a href="https://github.com/youzan/vant-weapp/pull/2856">#2856</a></li><li>Field: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/pull/2856">#2856</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: \u79FB\u9664 lang \u5C5E\u6027\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/pull/2883">#2883</a></li><li>Button: \u4FEE\u590D disabled \u5C5E\u6027\u5BF9\u539F\u751F\u4E8B\u4EF6\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2878">#2878</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.7" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.7">v1.0.7</a></h3><p><code>2020-03-04</code></p><p><strong>Features</strong></p><ul><li>DropdownItem: \u65B0\u589E <code>popupStyle</code> \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2804">#2804</a></li><li>DropdownItem: \u65B0\u589E <code>open</code> <code>close</code> <code>opened</code> <code>closed</code> \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2804">#2804</a></li><li>Card: \u65B0\u589E <code>price</code> <code>num</code> \u63D2\u69FD <a href="https://github.com/youzan/vant-weapp/pull/2787">#2787</a></li><li>Card: \u65B0\u589E <code>origin-price-class</code> \u5916\u90E8\u6837\u5F0F\u7C7B <a href="https://github.com/youzan/vant-weapp/pull/2787">#2787</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tab: \u4FEE\u590D\u5185\u5BB9\u9879\u9AD8\u5EA6\u4E0D\u540C\u65F6\u7C98\u6027\u5E03\u5C40\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/2817">#2817</a></li><li>Picker: \u4FEE\u590D\u672A\u9009\u4E2D\u9879\u6837\u5F0F\u672A\u7F6E\u7070 <a href="https://github.com/youzan/vant-weapp/pull/2816">#2816</a></li><li>GoodsActionButton: \u4FEE\u590D\u4EC5\u4F7F\u7528\u4E00\u4E2A button \u65F6\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/2808">#2808</a></li><li>Radio: <code>name</code>\u7C7B\u578B\u4E0E<code>value</code>\u7EDF\u4E00 <a href="https://github.com/youzan/vant-weapp/pull/2801">#2801</a></li><li>Uploader: \u4FEE\u590D\u6587\u6863\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2777">#2777</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.6" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.6">v1.0.6</a></h3><p><code>2020-02-24</code></p><p><strong>Features</strong></p><ul><li>GoodsActionButton: \u65B0\u589E\u9ED8\u8BA4 slot <a href="https://github.com/youzan/vant-weapp/pull/2779">#2779</a></li><li>SubmitBar: \u66F4\u65B0\u5706\u89D2\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/2755">#2755</a></li><li>Card: \u66F4\u65B0\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/2754">#2754</a></li><li>\u4F18\u5316 relation \u90E8\u5206\u4EE3\u7801 <a href="https://github.com/youzan/vant-weapp/pull/2760">#2760</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>DropdownItem: \u4FEE\u590D\u70B9\u51FB\u9009\u9879\u65F6\u4E0D\u89E6\u53D1<code>close</code>\u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2766">#2766</a></li><li>GoodsActionButton: \u4FEE\u590D\u4F4E\u7248\u672C\u57FA\u7840\u5E93\u4E0B\u7684\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/2762">#2762</a></li><li>Tabs: \u4FEE\u590D\u70B9\u51FB\u7981\u7528\u9879\u65F6\u4E8B\u4EF6\u53C2\u6570\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2758">#2758</a></li><li>Checkbox: \u4FEE\u590D\u52A8\u6001\u8BBE\u7F6E<code>disabled</code>\u5C5E\u6027\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2748">#2748</a></li><li>Button: add loading color when plain is true <a href="https://github.com/youzan/vant-weapp/pull/2746">#2746</a></li><li>Radio: \u4FEE\u590D<code>label-disabled</code>\u6587\u6863\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2763">#2763</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.5" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.5">v1.0.5</a></h3><p><code>2020-02-07</code></p><p><strong>Features</strong></p><ul><li>ActionSheet: actions \u652F\u6301\u66F4\u591A openType <a href="https://github.com/youzan/vant-weapp/pull/2715">#2715</a></li><li>Uploader: \u65B0\u589E\u5F00\u59CB<code>disabled</code>\u65F6\u7684\u7EC4\u4EF6\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/2720">#2720</a></li><li>Icon: \u8C03\u6574\u793A\u4F8B\u5C0F\u7A0B\u5E8F\u9875\u9762\u4E0E vant \u5BF9\u9F50 <a href="https://github.com/youzan/vant-weapp/pull/2728">#2728</a></li><li>\u793A\u4F8B\u5C0F\u7A0B\u5E8F\u9996\u9875\u4E0E vant \u5BF9\u9F50 <a href="https://github.com/youzan/vant-weapp/pull/2729">#2729</a></li><li>\u5B8C\u5584\u5FEB\u901F\u4E0A\u624B\u6587\u6863\uFF0C\u589E\u52A0 npm \u6784\u5EFA\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/pull/2726">#2726</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Radio: \u4FEE\u590D<code>disabled</code>\u5C5E\u6027\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2711">#2711</a></li><li>Tab: \u4FEE\u590D<code>animated</code>\u5C5E\u6027\u65E0\u6CD5\u52A8\u6001\u5207\u6362 <a href="https://github.com/youzan/vant-weapp/pull/2712">#2712</a></li><li>Circle: \u4FEE\u6B63\u6587\u6863\u9519\u8BEF\uFF0C<code>size</code>\u5C5E\u6027\u4E0D\u652F\u6301<code>string</code>\u7C7B\u578B <a href="https://github.com/youzan/vant-weapp/pull/2694">#2694</a></li><li>\u4FEE\u6B63\u6587\u6863\u9ED8\u8BA4 slot \u540D\u79F0\u4E3A default \u7684\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2726">#2726</a></li><li>TreeSelect: \u4FEE\u6B63\u6587\u6863\u793A\u4F8B\u4EE3\u7801\u6807\u7B7E\u95ED\u5408\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2710">#2710</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.4">v1.0.4</a></h3><p><code>2020-01-21</code></p><p><strong>Features</strong></p><ul><li>Stepper: \u65B0\u589E disable-long-press \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2691">#2691</a></li><li>quickstart: \u5FEB\u901F\u4E0A\u624B\u65B0\u589E\u5173\u95ED style v2 \u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/pull/2704">#2704</a></li><li>Search: \u65B0\u589E background\u3001disabled\u3001input-align \u6587\u6863\u793A\u4F8B <a href="https://github.com/youzan/vant-weapp/pull/2698">#2698</a></li><li>Icon: \u6587\u6863\u65B0\u589E\u56FE\u6807\u6587\u5B57\u52A0\u8F7D\u5931\u8D25\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/pull/2681">#2681</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Sticky: \u4FEE\u590D\u771F\u673A\u4E0A\u9875\u9762\u6EDA\u52A8\u7F13\u6162\u65F6\u65E0\u6CD5\u5438\u9876/\u53D6\u6D88\u5438\u9876 <a href="https://github.com/youzan/vant-weapp/pull/2703">#2703</a></li><li>DropdownItem: \u4FEE\u590D wx:key \u8B66\u544A <a href="https://github.com/youzan/vant-weapp/pull/2670">#2670</a></li><li>IndexBar: \u6587\u6863\u4FEE\u590D\u7EC4\u4EF6\u5F15\u5165\u8DEF\u5F84\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2689">#2689</a></li><li>\u5347\u7EA7\u4F9D\u8D56\u7248\u672C\u4EE5\u907F\u514D\u5B89\u5168\u8B66\u544A <a href="https://github.com/youzan/vant-weapp/pull/2680">#2680</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.3">v1.0.3</a></h3><p><code>2020-01-09</code></p><p><strong>Features</strong></p><ul><li>npm \u5305\u9ED8\u8BA4\u8F93\u51FA es5 \u7248\u672C\u4EE3\u7801 <a href="https://github.com/youzan/vant-weapp/pull/2639">#2639</a></li><li>Steps: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B desc-class <a href="https://github.com/youzan/vant-weapp/pull/2630">#2630</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>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 <a href="https://github.com/youzan/vant-weapp/pull/2663">#2663</a></li><li>NavBar: \u4FEE\u590D\u8FD4\u56DE\u56FE\u6807\u672A\u5C45\u4E2D\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/2633">#2633</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.2">v1.0.2</a></h3><p><code>2019-12-31</code></p><p><strong>Features</strong></p><ul><li>Skeleton: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B<code>row-class``avatar-class``title-class</code> <a href="https://github.com/youzan/vant-weapp/pull/2612">#2612</a></li><li>SwipeCell: \u652F\u6301\u52A8\u6001\u4FEE\u6539<code>width</code>\u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2607">#2607</a></li><li>Uploader: \u65B0\u589E<code>camera``compressed``maxDuration</code>\u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2584">#2584</a></li></ul><p><strong>Improvements</strong></p><ul><li>Tab: \u4F18\u5316\u5F39\u6027\u6EDA\u52A8\u6548\u679C <a href="https://github.com/youzan/vant-weapp/pull/2606">#2606</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>IndexBar: \u4FEE\u590D\u5B57\u6BCD\u672A\u5168\u90E8\u5B9A\u4E49\u65F6 click \u4E8B\u4EF6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/2605">#2605</a></li><li>Field: \u4FEE\u590D\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4E0B\u4E00\u6B21\u70B9\u51FB\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2602">#2602</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.1">v1.0.1</a></h3><p><code>2019-12-23</code></p><p><strong>Features</strong></p><ul><li>Uploader: \u65B0\u589E sizeType \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2563">#2563</a></li><li>GoodsActionButton: \u65B0\u589E plain \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2559">#2559</a></li><li>Uploader: \u53BB\u9664 use-slot \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2551">#2551</a></li><li>\u65B0\u589E\u6837\u5F0F\u8986\u76D6\u8BF4\u660E\u6587\u6863 <a href="https://github.com/youzan/vant-weapp/pull/2566">#2566</a></li></ul><p><strong>Improvements</strong></p><ul><li>\u4F7F\u7528 nextTick \u4F18\u5316\u90E8\u5206\u5F02\u6B65\u903B\u8F91 <a href="https://github.com/youzan/vant-weapp/pull/2561">#2561</a></li><li>wxs \u65B0\u589E addUnit \u65B9\u6CD5\u4EE5\u51CF\u5C11 setData \u8C03\u7528\u6B21\u6570 <a href="https://github.com/youzan/vant-weapp/pull/2550">#2550</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tag: \u4FEE\u590D\u672A\u4F9D\u8D56 van-icon \u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2579">#2579</a></li><li>Notify: \u4FEE\u590D safeAreaInsetTop \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2558">#2558</a></li><li>Uploader: \u4FEE\u590D capture \u5C5E\u6027\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2551">#2551</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.0">v1.0.0</a></h3><p><code>2019-12-11</code></p><h4 id="zhu-yao-bian-dong" tabindex="-1">\u4E3B\u8981\u53D8\u52A8</h4><ul><li>npm \u5305\u540D\u7531 vant-weapp \u91CD\u547D\u540D\u4E3A @vant/weapp</li><li>\u589E\u52A0\u5341\u4E00\u4E2A\u65B0\u7EC4\u4EF6</li><li>\u589E\u52A0\u6570\u5341\u4E2A API</li><li>\u6240\u6709\u7EC4\u4EF6\u652F\u6301\u901A\u8FC7<code>CSS\u81EA\u5B9A\u4E49\u5C5E\u6027</code>\u81EA\u5B9A\u4E49\u6837\u5F0F</li><li>\u4F7F\u7528<code>env()</code>\u91CD\u6784 iOS \u5B89\u5168\u533A\u57DF\u9002\u914D</li><li>\u8C03\u6574\u90E8\u5206 API \u547D\u540D\uFF0C\u5E9F\u9664\u5C11\u91CF API</li></ul><h4 id="xin-zu-jian" tabindex="-1">\u65B0\u7EC4\u4EF6</h4><p>\u5728 Vant Weapp 1.0 \u7248\u672C\u4E2D\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 11 \u4E2A\u5B9E\u7528\u7684\u57FA\u7840\u7EC4\u4EF6\uFF1A</p><ul><li><b>Grid \u5BAB\u683C</b>\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A</li><li><b>Image \u56FE\u7247</b>\uFF0C\u589E\u5F3A\u7248\u7684 Image \u6807\u7B7E\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u4E0E\u52A0\u8F7D\u5931\u8D25\u63D0\u793A</li><li><b>Circle \u73AF\u5F62\u8FDB\u5EA6\u6761</b>\uFF0C\u544A\u77E5\u7528\u6237\u5F53\u524D\u7684\u72B6\u6001\u548C\u8FDB\u5EA6</li><li><b>Overaly \u906E\u7F69\u5C42</b>\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C</li><li><b>Divider \u5206\u5272\u7EBF</b>\uFF0C\u533A\u9694\u5185\u5BB9\u7684\u5206\u5272\u7EBF</li><li><b>Sticky \u7C98\u6027\u5E03\u5C40</b>\uFF0C\u4E0E CSS \u4E2D<code>position: sticky</code>\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u7C7B\u4F3C</li><li><b>Skeleton \u9AA8\u67B6\u5C4F</b>\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</li><li><b>IndexBar \u7D22\u5F15\u680F</b>\uFF0C\u901A\u8BAF\u5F55\u4E2D\u7684\u5B57\u6BCD\u7D22\u5F15\u680F\uFF0C\u7528\u4E8E\u957F\u5217\u8868\u5FEB\u901F\u7D22\u5F15</li><li><b>Uploader \u6587\u4EF6\u4E0A\u4F20</b>\uFF0C\u4E0A\u4F20\u4E00\u4E2A\u6216\u591A\u4E2A\u6587\u4EF6</li><li><b>CountDown \u5012\u8BA1\u65F6</b>\uFF0C\u7528\u4E8E\u663E\u793A\u6D3B\u52A8\u5012\u8BA1\u65F6\u3001\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49</li><li><b>DropdownMenu \u4E0B\u62C9\u83DC\u5355</b>\uFF0C\u7528\u4E8E\u5217\u8868\u7684\u5206\u7C7B\u9009\u62E9\u3001\u7B5B\u9009\u53CA\u6392\u5E8F</li></ul><p><img src="https://img.yzcdn.cn/public_files/2019/12/06/748d9b70feb76eeaf44f9d6080b6e108.png" alt=""></p><h4 id="yang-shi-ding-zhi" tabindex="-1">\u6837\u5F0F\u5B9A\u5236</h4><p>\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</p><p>\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</p><p>\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684\u7EC4\u4EF6\u6A21\u578B\u76F8\u5F53\u4E8E\u4E00\u4E2A\u7B80\u5316\u7248\u7684 <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-CN">Shadow DOM</a>\uFF0C\u5E78\u8FD0\u7684\u662F\uFF0C\u5C0F\u7A0B\u5E8F\u4E5F\u652F\u6301\u4E86 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS \u81EA\u5B9A\u4E49\u5C5E\u6027</a> \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</p><p>\u4ECE 1.0 \u7248\u672C\u5F00\u59CB\uFF0CVant Weapp \u4E2D\u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u652F\u6301\u901A\u8FC7 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS \u7EC4\u5B9A\u4E49\u5C5E\u6027</a> \u8FDB\u884C\u6837\u5F0F\u5B9A\u5236\uFF0C\u5177\u4F53\u4F7F\u7528\u59FF\u52BF\u53EF\u67E5\u770B<a href="https://youzan.github.io/vant-weapp/#/theme">\u76F8\u5173\u6587\u6863</a></p><p><img src="https://img.yzcdn.cn/public_files/2019/06/11/9a066c1a212264c7ae56065e1f13d317.png" alt="\u5B9A\u5236\u4E3B\u9898"></p><h4 id="bu-jian-rong-geng-xin" tabindex="-1">\u4E0D\u517C\u5BB9\u66F4\u65B0</h4><p>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<b>\u65E0\u75DB\u5347\u7EA7</b>\u3002</p><h5 id="badge" tabindex="-1">Badge</h5><ul><li><code>BadgeGroup</code>\u91CD\u547D\u540D\u4E3A<code>Sidebar</code></li><li><code>Badge</code>\u91CD\u547D\u540D\u4E3A<code>SlidebarItem</code></li><li><code>active</code>\u5C5E\u6027\u91CD\u547D\u540D\u4E3A<code>activeKey</code></li></ul><h5 id="notify" tabindex="-1">Notify</h5><ul><li><code>text</code>\u9009\u9879\u91CD\u547D\u540D\u4E3A<code>message</code></li><li><code>backgroundColor</code>\u9009\u9879\u91CD\u547D\u540D\u4E3A<code>background</code></li></ul><h5 id="popup" tabindex="-1">Popup</h5><ul><li>\u53BB\u9664<code>transitionend</code>\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6</li></ul><h5 id="switchcell" tabindex="-1">SwitchCell</h5><ul><li>\u79FB\u9664\u4E86<code>SwitchCell</code>\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u4F7F\u7528<code>Cell</code>\u548C<code>Switch</code>\u7EC4\u4EF6\u4EE3\u66FF</li></ul><h5 id="transition" tabindex="-1">Transition</h5><ul><li>\u53BB\u9664<code>transitionend</code>\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6</li></ul><hr><h4 id="xin-te-xing" tabindex="-1">\u65B0\u7279\u6027</h4><h5 id="actionsheet" tabindex="-1">ActionSheet</h5><ul><li>\u65B0\u589E<code>click-overlay</code>\u4E8B\u4EF6</li><li>\u65B0\u589E<code>close-on-click-action</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>color</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>description</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>round</code>\u5C5E\u6027</li></ul><h5 id="area" tabindex="-1">Area</h5><ul><li>\u65B0\u589E<code>columns-placeholder</code>\u5C5E\u6027</li><li><code>reset</code>\u65B9\u6CD5\u652F\u6301\u4F20\u5165<code>code</code>\u53C2\u6570</li></ul><h5 id="button" tabindex="-1">Button</h5><ul><li>\u65B0\u589E<code>loading-type</code>\u5C5E\u6027</li><li><code>color</code>\u5C5E\u6027\u652F\u6301\u6E10\u53D8\u8272</li><li>\u5207\u6362<code>disabled</code>\u65F6\u589E\u52A0\u8FC7\u6E21\u6548\u679C</li></ul><h5 id="checkbox" tabindex="-1">Checkbox</h5><ul><li>\u65B0\u589E<code>icon-size</code>\u5C5E\u6027</li></ul><h5 id="color" tabindex="-1">Color</h5><ul><li>\u57FA\u7840\u7EA2\u8272\u66F4\u65B0\u4E3A<code>#ee0a24</code></li></ul><h5 id="datetimepicker" tabindex="-1">DatetimePicker</h5><ul><li>\u65B0\u589E<code>filter</code>\u5C5E\u6027</li></ul><h5 id="dialog" tabindex="-1">Dialog</h5><ul><li>\u4F18\u5316\u6587\u5B57\u6362\u884C</li><li>\u65B0\u589E<code>title</code>\u63D2\u69FD</li><li>\u65B0\u589E<code>confirm-button-color</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>cancel-button-color</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>width</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>overlay-style</code>\u5C5E\u6027</li></ul><h5 id="field" tabindex="-1">Field</h5><ul><li>\u65B0\u589E<code>clickable</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>arrow-direction</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>hold-keyboard</code>\u5C5E\u6027</li></ul><h5 id="goodsactionbutton" tabindex="-1">GoodsActionButton</h5><ul><li>\u65B0\u589E<code>color</code>\u5C5E\u6027</li><li>\u6837\u5F0F\u5347\u7EA7\u4E3A\u5706\u89D2\u98CE\u683C</li></ul><h5 id="goodsactionicon" tabindex="-1">GoodsActionIcon</h5><ul><li>\u65B0\u589E<code>icon</code>\u63D2\u69FD</li><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li></ul><h5 id="griditem" tabindex="-1">GridItem</h5><ul><li>\u65B0\u589E<code>info</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li></ul><h5 id="icon" tabindex="-1">Icon</h5><ul><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>down</code>\u56FE\u6807</li><li>\u65B0\u589E<code>wap-hone</code>\u5B9E\u5E95\u98CE\u683C\u56FE\u6807</li><li>\u652F\u6301<code>number</code>\u7C7B\u578B\u7684<code>size</code>\u5C5E\u6027</li></ul><h5 id="loading" tabindex="-1">Loading</h5><ul><li>\u652F\u6301<code>number</code>\u7C7B\u578B\u7684<code>size</code>\u5C5E\u6027</li></ul><h5 id="noticebar" tabindex="-1">NoticeBar</h5><ul><li>\u963B\u6B62\u5173\u95ED\u56FE\u6807\u70B9\u51FB\u4E8B\u4EF6\u5192\u6CE1</li></ul><h5 id="notify-1" tabindex="-1">Notify</h5><ul><li>\u65B0\u589E<code>clear</code>\u65B9\u6CD5</li></ul><h5 id="popup-1" tabindex="-1">Popup</h5><ul><li>\u65B0\u589E<code>round</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>closeable</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>close-icon</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>close-icon-position</code>\u5C5E\u6027</li></ul><h5 id="progress" tabindex="-1">Progress</h5><ul><li>\u65B0\u589E<code>stroke-width</code>\u5C5E\u6027</li></ul><h5 id="radio" tabindex="-1">Radio</h5><ul><li>\u65B0\u589E<code>icon-size</code>\u5C5E\u6027</li></ul><h5 id="rate" tabindex="-1">Rate</h5><ul><li>\u4F18\u5316\u624B\u52BF\u5224\u65AD</li><li>\u65B0\u589E<code>gutter</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>touchable</code>\u5C5E\u6027</li><li>\u652F\u6301<code>string</code>\u7C7B\u578B\u7684<code>size</code>\u5C5E\u6027</li></ul><h5 id="search" tabindex="-1">Search</h5><ul><li>\u65B0\u589E<code>action-text</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>left-icon</code>\u63D2\u69FD</li><li>\u65B0\u589E<code>right-icon</code>\u63D2\u69FD</li></ul><h5 id="slidebaritem" tabindex="-1">SlidebarItem</h5><ul><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li></ul><h5 id="slider" tabindex="-1">Slider</h5><ul><li>\u65B0\u589E<code>drag-start</code>\u4E8B\u4EF6</li><li>\u65B0\u589E<code>drag-end</code>\u4E8B\u4EF6</li><li>\u652F\u6301\u4F20\u5165\u4EFB\u610F\u8303\u56F4\u7684<code>max</code>\u548C<code>min</code>\u5C5E\u6027</li><li>\u652F\u6301<code>number</code>\u7C7B\u578B\u7684<code>bar-height</code>\u5C5E\u6027</li><li>\u589E\u52A0\u6ED1\u52A8\u52A8\u753B</li><li>\u589E\u5927\u70B9\u51FB\u533A\u57DF</li></ul><h5 id="swipecell" tabindex="-1">SwipeCell</h5><ul><li>\u65B0\u589E<code>name</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>open</code>\u4E8B\u4EF6</li><li>\u652F\u6301\u6253\u5F00\u72B6\u6001\u4E92\u65A5</li></ul><h5 id="switch" tabindex="-1">Switch</h5><ul><li>\u52A0\u8F7D\u56FE\u6807\u7684\u989C\u8272\u4F1A\u8DDF\u968F\u5F00\u5173\u72B6\u6001\u53D8\u5316</li></ul><h5 id="stepper" tabindex="-1">Stepper</h5><ul><li>\u652F\u6301\u957F\u6309\u624B\u52BF</li><li>\u65B0\u589E<code>input-width</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>button-size</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>decimalLength</code>\u5C5E\u6027</li><li>\u65B0\u589E disablePlus\u3001disableMinus \u5C5E\u6027</li></ul><h5 id="steps" tabindex="-1">Steps</h5><ul><li>\u65B0\u589E<code>active-icon</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>inactive-icon</code>\u5C5E\u6027</li></ul><h5 id="tabs" tabindex="-1">Tabs</h5><ul><li>\u4F7F\u7528 Sticky \u7EC4\u4EF6\u91CD\u6784\u5438\u9876\u5B9E\u73B0</li><li>\u65B0\u589E<code>name</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>line-height</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>ellipsis</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>lazy-render</code>\u5C5E\u6027</li><li><code>line-width</code>\u5C5E\u6027\u652F\u6301<code>String</code>\u7C7B\u578B</li><li>\u589E\u52A0\u4E91\u5F00\u53D1\u7ED3\u5408\u793A\u4F8B</li></ul><h5 id="treeselect" tabindex="-1">TreeSelect</h5><ul><li>\u65B0\u589E<code>max</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>content</code>\u63D2\u69FD</li></ul></div>', 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('<h1>\u6837\u5F0F\u8986\u76D6</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>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</p></div><div class="van-doc-card"><h3 id="jie-chu-yang-shi-ge-chi" tabindex="-1">\u89E3\u9664\u6837\u5F0F\u9694\u79BB</h3><p>\u6837\u5F0F\u9694\u79BB\u7684\u76F8\u5173\u80CC\u666F\u77E5\u8BC6\u8BF7\u67E5\u9605<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a></p><br><p>Vant Weapp \u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u5F00\u542F\u4E86<code>addGlobalClass: true</code>\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</p><blockquote><p>\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</p></blockquote><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre><pre><code class="language-css"><span class="hljs-comment">/* page.wxss */</span>\n<span class="hljs-selector-class">.van-button--primary</span> {\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;\n <span class="hljs-attribute">background-color</span>: pink;\n}\n</code></pre><blockquote><p>\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u4F7F\u7528 Vant Weapp \u7EC4\u4EF6\u65F6\uFF0C\u9700\u5F00\u542F<code>styleIsolation: 'shared'</code>\u9009\u9879</p></blockquote><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Component</span>({\n <span class="hljs-attr">options</span>: {\n <span class="hljs-attr">styleIsolation</span>: <span class="hljs-string">'shared'</span>,\n },\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.van-button--primary</span> {\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;\n <span class="hljs-attribute">background-color</span>: pink;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-wai-bu-yang-shi-lei" tabindex="-1">\u4F7F\u7528\u5916\u90E8\u6837\u5F0F\u7C7B</h3><p>\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u76F8\u5173\u77E5\u8BC6\u80CC\u666F\u8BF7\u67E5\u9605<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a></p><br><p>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</p><p>\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<code>!important</code>\u4EE5\u4FDD\u8BC1\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u4F18\u5148\u7EA7\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span>\n <span class="hljs-attr">title-class</span>=<span class="hljs-string">"cell-title"</span>\n <span class="hljs-attr">value-class</span>=<span class="hljs-string">"cell-value"</span>\n/></span>\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.cell-title</span> {\n <span class="hljs-attribute">color</span>: pink <span class="hljs-meta">!important</span>;\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span> <span class="hljs-meta">!important</span>;\n}\n\n<span class="hljs-selector-class">.cell-value</span> {\n <span class="hljs-attribute">color</span>: green <span class="hljs-meta">!important</span>;\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span> <span class="hljs-meta">!important</span>;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-css-bian-liang" tabindex="-1">\u4F7F\u7528 CSS \u53D8\u91CF</h3><p>Vant Weapp \u4E3A\u90E8\u5206 CSS \u5C5E\u6027\u5F00\u653E\u4E86\u57FA\u4E8E CSS \u5C5E\u6027\u7684\u5B9A\u5236\u65B9\u6848\u3002</p><p>\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</p><p>\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<a href="#/theme">\u5B9A\u5236\u4E3B\u9898</a></p></div>', 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('<div class="van-doc-card"><div class="van-doc-intro"><img class="van-doc-intro__logo" style="width:120px;height:120px;box-shadow:none;" src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png"><h2 style="margin:0;font-size:32px;line-height:60px;">Vant Weapp</h2><p>\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u5C0F\u7A0B\u5E8F UI \u7EC4\u4EF6\u5E93</p></div></div><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Vant \u662F<strong>\u6709\u8D5E\u524D\u7AEF\u56E2\u961F</strong>\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</p><p>\u76EE\u524D Vant \u5B98\u65B9\u63D0\u4F9B\u4E86 <a href="https://vant-contrib.gitee.io/vant">Vue \u7248\u672C</a>\u548C<a href="http://vant-contrib.gitee.io/vant-weapp">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248\u672C</a>\uFF0C\u5E76\u7531\u793E\u533A\u56E2\u961F\u7EF4\u62A4 <a href="https://github.com/mxdi9i7/vant-react">React \u7248\u672C</a>\u3002</p></div><div class="van-doc-card"><h3 id="yu-lan" tabindex="-1">\u9884\u89C8</h3><p>\u626B\u63CF\u4E0B\u65B9\u5C0F\u7A0B\u5E8F\u4E8C\u7EF4\u7801\uFF0C\u4F53\u9A8C\u7EC4\u4EF6\u5E93\u793A\u4F8B\uFF1A</p><img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg" style="width:200px;height:200px;margin-top:15px;box-shadow:none;"></div><div class="van-doc-card"><h3 id="kuai-su-shang-shou" tabindex="-1">\u5FEB\u901F\u4E0A\u624B</h3><p>\u8BF7\u53C2\u8003 <a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p></div><div class="van-doc-card"><h3 id="gong-xian-dai-ma" tabindex="-1">\u8D21\u732E\u4EE3\u7801</h3><p>\u4F7F\u7528\u8FC7\u7A0B\u4E2D\u53D1\u73B0\u4EFB\u4F55\u95EE\u9898\u90FD\u53EF\u4EE5\u63D0 <a href="https://github.com/youzan/vant-weapp/issues">Issue</a> \u7ED9\u6211\u4EEC\uFF0C\u5F53\u7136\uFF0C\u6211\u4EEC\u4E5F\u975E\u5E38\u6B22\u8FCE\u4F60\u7ED9\u6211\u4EEC\u53D1 <a href="https://github.com/youzan/vant-weapp/pulls">PR</a></p></div><div class="van-doc-card"><h3 id="jia-ru-wo-men" tabindex="-1">\u52A0\u5165\u6211\u4EEC</h3><p><strong>\u6709\u8D5E\u524D\u7AEF\u56E2\u961F</strong>\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</p><p>\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</p><img src="https://img.yzcdn.cn/public_files/2019/07/22/f4b70763c55c8710c52c667ecf192c05.jpeg" style="width:320px;height:303px;box-shadow:none;"><p>\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</p><ul><li><a target="_blank" href="https://app.mokahr.com/apply/youzan/3750#/jobs/?keyword=%E5%89%8D%E7%AB%AF&_k=tueqds">\u804C\u4F4D\u8BE6\u60C5</a>\uFF08Base: \u676D\u5DDE/\u6DF1\u5733\uFF09</li><li><a target="_blank" href="https://tech.youzan.com/tag/front-end/">\u56E2\u961F\u535A\u5BA2</a></li><li><a target="_blank" href="https://github.com/youzan">\u5F00\u6E90\u9879\u76EE</a></li></ul></div><div class="van-doc-card"><h3 id="lian-jie" tabindex="-1">\u94FE\u63A5</h3><ul><li><a href="https://github.com/youzan/vant-weapp/issues">\u610F\u89C1\u53CD\u9988</a></li><li><a href="https://job.youzan.com">\u52A0\u5165\u6211\u4EEC</a></li><li><a href="#/changelog">\u66F4\u65B0\u65E5\u5FD7</a></li><li><a href="https://github.com/youzan/vant">Vant Vue \u7248</a></li></ul></div><div class="van-doc-card"><h3 id="kai-yuan-xie-yi" tabindex="-1">\u5F00\u6E90\u534F\u8BAE</h3><p>\u672C\u9879\u76EE\u57FA\u4E8E <a href="https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89">MIT</a> \u534F\u8BAE\uFF0C\u8BF7\u81EA\u7531\u5730\u4EAB\u53D7\u548C\u53C2\u4E0E\u5F00\u6E90</p></div>', 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('<h1>\u5FEB\u901F\u4E0A\u624B</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">\u80CC\u666F\u77E5\u8BC6</h3><p>\u4F7F\u7528 Vant Weapp \u524D\uFF0C\u8BF7\u786E\u4FDD\u4F60\u5DF2\u7ECF\u5B66\u4E60\u8FC7\u5FAE\u4FE1\u5B98\u65B9\u7684 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/">\u5C0F\u7A0B\u5E8F\u7B80\u6613\u6559\u7A0B</a> \u548C <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/">\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4ECB\u7ECD</a>\u3002</p></div><h2 id="an-zhuang" tabindex="-1">\u5B89\u88C5</h2><div class="van-doc-card"><h3 id="bu-zou-yi-tong-guo-npm-an-zhuang" tabindex="-1">\u6B65\u9AA4\u4E00 \u901A\u8FC7 npm \u5B89\u88C5</h3><blockquote><p>\u4F7F\u7528 npm \u6784\u5EFA\u524D\uFF0C\u8BF7\u5148\u9605\u8BFB\u5FAE\u4FE1\u5B98\u65B9\u7684 <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html">npm \u652F\u6301</a></p></blockquote><pre><code class="language-bash"><span class="hljs-comment"># \u901A\u8FC7 npm \u5B89\u88C5</span>\nnpm i @vant/weapp -S --production\n\n<span class="hljs-comment"># \u901A\u8FC7 yarn \u5B89\u88C5</span>\nyarn add @vant/weapp --production\n\n<span class="hljs-comment"># \u5B89\u88C5 0.x \u7248\u672C</span>\nnpm i vant-weapp -S --production\n</code></pre></div><div class="van-doc-card"><h3 id="bu-zou-er-xiu-gai-app.json" tabindex="-1">\u6B65\u9AA4\u4E8C \u4FEE\u6539 app.json</h3><p>\u5C06 app.json \u4E2D\u7684 <code>"style": "v2"</code> \u53BB\u9664\uFF0C\u5C0F\u7A0B\u5E8F\u7684<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style">\u65B0\u7248\u57FA\u7840\u7EC4\u4EF6</a>\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</p></div><div class="van-doc-card"><h3 id="bu-zou-san-xiu-gai-project.config.json" tabindex="-1">\u6B65\u9AA4\u4E09 \u4FEE\u6539 project.config.json</h3><p>\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u9879\u76EE\uFF0C<code>miniprogramRoot</code> \u9ED8\u8BA4\u4E3A <code>miniprogram</code>\uFF0C<code>package.json</code> \u5728\u5176\u5916\u90E8\uFF0Cnpm \u6784\u5EFA\u65E0\u6CD5\u6B63\u5E38\u5DE5\u4F5C\u3002</p><p>\u9700\u8981\u624B\u52A8\u5728 <code>project.config.json</code> \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</p><pre><code class="language-json"><span class="hljs-punctuation">{</span>\n ...\n <span class="hljs-attr">"setting"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n ...\n <span class="hljs-attr">"packNpmManually"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"packNpmRelationList"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>\n <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"packageJsonPath"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"./package.json"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"miniprogramNpmDistDir"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"./miniprogram/"</span>\n <span class="hljs-punctuation">}</span>\n <span class="hljs-punctuation">]</span>\n <span class="hljs-punctuation">}</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><p>\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</p></div><div class="van-doc-card"><h3 id="bu-zou-si-gou-jian-npm-bao" tabindex="-1">\u6B65\u9AA4\u56DB \u6784\u5EFA npm \u5305</h3><p>\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u70B9\u51FB <strong>\u5DE5\u5177 -> \u6784\u5EFA npm</strong>\uFF0C\u5E76\u52FE\u9009 <strong>\u4F7F\u7528 npm \u6A21\u5757</strong> \u9009\u9879\uFF0C\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u5373\u53EF\u5F15\u5165\u7EC4\u4EF6\u3002</p><img style="width:500px;" src="https://img.yzcdn.cn/public_files/2019/08/15/fa0549210055976cb63798503611ce3d.png"></div><div class="van-doc-card"><h3 id="bu-zou-wu-typescript-zhi-chi" tabindex="-1">\u6B65\u9AA4\u4E94 typescript \u652F\u6301</h3><p>\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</p><h4 id="an-zhuang-miniprogram-api-typings" tabindex="-1">\u5B89\u88C5 miniprogram-api-typings</h4><pre><code class="language-bash"><span class="hljs-comment"># \u901A\u8FC7 npm \u5B89\u88C5</span>\nnpm i -D miniprogram-api-typings\n\n<span class="hljs-comment"># \u901A\u8FC7 yarn \u5B89\u88C5</span>\nyarn add -D miniprogram-api-typings\n</code></pre><h4 id="zai-tsconfig.json-zhong-zeng-jia-ru-xia-pei-zhi-yi-fang-zhi-tsc-bian-yi-bao-cuo." tabindex="-1">\u5728 tsconfig.json \u4E2D\u589E\u52A0\u5982\u4E0B\u914D\u7F6E\uFF0C\u4EE5\u9632\u6B62 tsc \u7F16\u8BD1\u62A5\u9519\u3002</h4><p>\u8BF7\u5C06<code>path/to/node_modules/@vant/weapp</code>\u4FEE\u6539\u4E3A\u9879\u76EE\u7684 <code>node_modules</code> \u4E2D @vant/weapp \u6240\u5728\u7684\u76EE\u5F55\u3002</p><pre><code class="language-json"><span class="hljs-punctuation">{</span>\n ...\n <span class="hljs-attr">"compilerOptions"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n ...\n <span class="hljs-attr">"baseUrl"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"."</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"types"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">"miniprogram-api-typings"</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"paths"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"@vant/weapp/*"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">"path/to/node_modules/@vant/weapp/dist/*"</span><span class="hljs-punctuation">]</span>\n <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"lib"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">"ES6"</span><span class="hljs-punctuation">]</span>\n <span class="hljs-punctuation">}</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-li-gong-cheng" tabindex="-1">\u793A\u4F8B\u5DE5\u7A0B</h3><p>\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A<a href="https://github.com/youzan/vant-demo">\u793A\u4F8B\u5DE5\u7A0B</a>\uFF0C\u793A\u4F8B\u5DE5\u7A0B\u4F1A\u5E2E\u52A9\u4F60\u4E86\u89E3\u5982\u4E0B\u5185\u5BB9\uFF1A</p><ul><li>\u57FA\u4E8E Vant Weapp \u642D\u5EFA\u5C0F\u7A0B\u5E8F\u5E94\u7528</li><li>\u6837\u5F0F\u8986\u76D6\u65B9\u6848</li></ul></div><h2 id="shi-yong" tabindex="-1">\u4F7F\u7528</h2><div class="van-doc-card"><h3 id="yin-ru-zu-jian" tabindex="-1">\u5F15\u5165\u7EC4\u4EF6</h3><p>\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u53EA\u9700\u8981\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u914D\u7F6E Button \u5BF9\u5E94\u7684\u8DEF\u5F84\u5373\u53EF\u3002</p><p>\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</p><pre><code class="language-json"><span class="hljs-comment">// \u901A\u8FC7 npm \u5B89\u88C5</span>\n<span class="hljs-comment">// app.json</span>\n<span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-button"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/button/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><pre><code class="language-json"><span class="hljs-comment">// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es6\u7248\u672C</span>\n<span class="hljs-comment">// app.json</span>\n<span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-button"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"path/to/@vant/weapp/dist/button/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><pre><code class="language-json"><span class="hljs-comment">// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es5\u7248\u672C</span>\n<span class="hljs-comment">// app.json</span>\n<span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-button"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"path/to/@vant/weapp/lib/button/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-zu-jian" tabindex="-1">\u4F7F\u7528\u7EC4\u4EF6</h3><p>\u5F15\u5165\u7EC4\u4EF6\u540E\uFF0C\u53EF\u4EE5\u5728 wxml \u4E2D\u76F4\u63A5\u4F7F\u7528\u7EC4\u4EF6</p><pre><code class="language-xml"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><h2 id="qi-ta" tabindex="-1">\u5176\u4ED6</h2><div class="van-doc-card"><h3 id="zai-kai-fa-zhe-gong-ju-zhong-yu-lan-shi-li-xiao-cheng-xu" tabindex="-1">\u5728\u5F00\u53D1\u8005\u5DE5\u5177\u4E2D\u9884\u89C8\u793A\u4F8B\u5C0F\u7A0B\u5E8F</h3><pre><code class="language-bash">\n<span class="hljs-comment"># \u5C06\u9879\u76EE\u514B\u9686\u5230\u672C\u5730</span>\ngit <span class="hljs-built_in">clone</span> git@github.com:youzan/vant-weapp.git\n\n<span class="hljs-comment"># \u5B89\u88C5\u9879\u76EE\u4F9D\u8D56</span>\n<span class="hljs-built_in">cd</span> vant-weapp && npm install\n\n<span class="hljs-comment"># \u6267\u884C\u7EC4\u4EF6\u7F16\u8BD1</span>\nnpm run dev\n\n</code></pre><p>\u63A5\u7740\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u5BFC\u5165<code>example</code>\u76EE\u5F55\u7684\u9879\u76EE\u5C31\u53EF\u4EE5\u9884\u89C8\u793A\u4F8B\u4E86\u3002</p></div>', 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('<h1>\u5B9A\u5236\u4E3B\u9898</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">\u80CC\u666F\u77E5\u8BC6</h3><p>\u5C0F\u7A0B\u5E8F\u57FA\u4E8E <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn">Shadow DOM</a> \u6765\u5B9E\u73B0\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u6240\u4EE5 Vant Weapp \u4F7F\u7528\u4E0E\u4E4B\u914D\u5957\u7684 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS \u53D8\u91CF</a> \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</p><p>CSS \u53D8\u91CF \u7684\u517C\u5BB9\u6027\u8981\u6C42\u53EF\u4EE5\u5728 <a href="https://caniuse.com/#feat=css-variables">\u8FD9\u91CC</a> \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</p></div><div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">\u6837\u5F0F\u53D8\u91CF</h3><p>\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 <a href="https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less">\u914D\u7F6E\u6587\u4EF6</a>\u3002</p><pre><code class="language-less"><span class="hljs-comment">// Component Colors</span>\n<span class="hljs-variable">@text-color:</span> <span class="hljs-number">#323233</span>;\n<span class="hljs-variable">@border-color:</span> <span class="hljs-number">#ebedf0</span>;\n<span class="hljs-variable">@active-color:</span> <span class="hljs-number">#f2f3f5</span>;\n<span class="hljs-variable">@background-color:</span> <span class="hljs-number">#f8f8f8</span>;\n<span class="hljs-variable">@background-color-light:</span> <span class="hljs-number">#fafafa</span>;\n</code></pre></div><h2 id="ding-zhi-fang-fa" tabindex="-1">\u5B9A\u5236\u65B9\u6CD5</h2><div class="van-doc-card"><h3 id="ding-zhi-dan-ge-zu-jian-de-zhu-ti-yang-shi" tabindex="-1">\u5B9A\u5236\u5355\u4E2A\u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F</h3><blockquote><p>\u5728 wxss \u4E2D\u4E3A\u7EC4\u4EF6\u8BBE\u7F6E CSS \u53D8\u91CF</p></blockquote><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-button"</span>></span>\n \u9ED8\u8BA4\u6309\u94AE\n<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre><pre><code class="language-less"><span class="hljs-selector-class">.my-button</span> {\n <span class="hljs-attr">--button-border-radius</span>: 10px;\n <span class="hljs-attr">--button-default-color</span>: #f2f3f5;\n}\n</code></pre><blockquote><p>\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</p></blockquote><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"{{ buttonStyle }}"</span>></span>\n \u9ED8\u8BA4\u6309\u94AE\n<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">buttonStyle</span>: <span class="hljs-string">`\n --button-border-radius: 10px;\n --button-default-color: green;\n `</span>,\n },\n\n <span class="hljs-title function_">onLoad</span>(<span class="hljs-params"></span>) {\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">buttonStyle</span>: <span class="hljs-string">`\n --button-border-radius: 2px;\n --button-default-color: pink;\n `</span>,\n });\n }, <span class="hljs-number">2000</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="ding-zhi-duo-ge-zu-jian-de-zhu-ti-yang-shi" tabindex="-1">\u5B9A\u5236\u591A\u4E2A\u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F</h3><blockquote><p>\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</p></blockquote><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClick"</span>></span>\n \u9ED8\u8BA4\u6309\u94AE\n <span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n\n <span class="hljs-tag"><<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-toast"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/vant-weapp/dist/toast/toast'</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~'</span>);\n },\n});\n</code></pre><pre><code class="language-less"><span class="hljs-selector-class">.container</span> {\n <span class="hljs-attr">--button-border-radius</span>: 10px;\n <span class="hljs-attr">--button-default-color</span>: #f2f3f5;\n <span class="hljs-attr">--toast-max-width</span>: 100px;\n <span class="hljs-attr">--toast-background-color</span>: pink;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="ding-zhi-quan-ju-zhu-ti-yang-shi" tabindex="-1">\u5B9A\u5236\u5168\u5C40\u4E3B\u9898\u6837\u5F0F</h3><blockquote><p>\u5728 app.wxss \u4E2D\uFF0C\u5199\u5165 CSS \u53D8\u91CF\uFF0C\u5373\u53EF\u5BF9\u5168\u5C40\u751F\u6548</p></blockquote><pre><code class="language-less"><span class="hljs-selector-tag">page</span> {\n <span class="hljs-attr">--button-border-radius</span>: 10px;\n <span class="hljs-attr">--button-default-color</span>: #f2f3f5;\n <span class="hljs-attr">--toast-max-width</span>: 100px;\n <span class="hljs-attr">--toast-background-color</span>: pink;\n}\n</code></pre></div>', 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('<h1>ActionSheet \u52A8\u4F5C\u9762\u677F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-action-sheet"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/action-sheet/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u9700\u8981\u4F20\u5165\u4E00\u4E2A<code>actions</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">"{{ actions }}"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n <span class="hljs-attr">bind:select</span>=<span class="hljs-string">"onSelect"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">actions</span>: [\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u9009\u9879'</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u9009\u9879'</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u9009\u9879'</span>,\n <span class="hljs-attr">subname</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n <span class="hljs-attr">openType</span>: <span class="hljs-string">'share'</span>,\n },\n ],\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n\n <span class="hljs-title function_">onSelect</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-xiang-zhuang-tai" tabindex="-1">\u9009\u9879\u72B6\u6001</h3><p>\u9009\u9879\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u72B6\u6001\u6216\u7981\u7528\u72B6\u6001\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">"{{ actions }}"</span>\n <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"\u53D6\u6D88"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">actions</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u7740\u8272\u9009\u9879'</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">'#ee0a24'</span> },\n { <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u7981\u7528\u9009\u9879'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-qu-xiao-an-niu" tabindex="-1">\u5C55\u793A\u53D6\u6D88\u6309\u94AE</h3><p>\u8BBE\u7F6E<code>cancel-text</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">"{{ actions }}"</span>\n <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"\u53D6\u6D88"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-miao-shu-xin-xi" tabindex="-1">\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>description</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u9009\u9879\u4E0A\u65B9\u663E\u793A\u63CF\u8FF0\u4FE1\u606F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">"{{ actions }}"</span>\n <span class="hljs-attr">description</span>=<span class="hljs-string">"\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-biao-ti-lan" tabindex="-1">\u5C55\u793A\u6807\u9898\u680F</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>title</code>\u5C5E\u6027\u5C55\u793A\u6807\u9898\u680F\uFF0C\u540C\u65F6\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-action-sheet</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\u5185\u5BB9<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-action-sheet</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="wei-xin-kai-fang-neng-li" tabindex="-1">\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B</h3><p>\u9700\u8981\u4F20\u5165\u4E00\u4E2A<code>actions</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">"{{ actions }}"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n <span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">"onGetUserInfo"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">actions</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u83B7\u53D6\u7528\u6237\u4FE1\u606F'</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">'#07c160'</span>, <span class="hljs-attr">openType</span>: <span class="hljs-string">'getUserInfo'</span> },\n ],\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n\n <span class="hljs-title function_">onGetUserInfo</span>(<span class="hljs-params">e</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u52A8\u4F5C\u9762\u677F</td><td><em>boolean</em></td><td>-</td></tr><tr><td>actions</td><td>\u83DC\u5355\u9009\u9879</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>description <code>v1.0.0</code></td><td>\u9009\u9879\u4E0A\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F</td><td><em>string</em></td><td>-</td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>cancel-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td>-</td></tr><tr><td>round <code>v1.0.0</code></td><td>\u662F\u5426\u663E\u793A\u5706\u89D2</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-action</td><td>\u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u662F\u5426\u5173\u95ED\u83DC\u5355</td><td><em>boolean</em></td><td>-</td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:select</td><td>\u9009\u4E2D\u9009\u9879\u65F6\u89E6\u53D1\uFF0C\u7981\u7528\u6216\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1</td><td>event.detail: \u9009\u9879\u5BF9\u5E94\u7684\u5BF9\u8C61</td></tr><tr><td>bind:close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:cancel</td><td>\u53D6\u6D88\u6309\u94AE\u70B9\u51FB\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>\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\uFF0C<a href="#/action-sheet#actions">openType</a>="getUserInfo"\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:contact</td><td>\u5BA2\u670D\u6D88\u606F\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>="contact"\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>="getPhoneNumber"\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:error</td><td>\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>="launchApp"\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:launchapp</td><td>\u6253\u5F00 APP \u6210\u529F\u7684\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>="launchApp"\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:opensetting</td><td>\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>="openSetting"\u65F6\u6709\u6548</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="actions" tabindex="-1">actions</h3><p><code>API</code>\u4E2D\u7684<code>actions</code>\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<code>key</code>\uFF1A</p><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>subname</td><td>\u4E8C\u7EA7\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>\u9009\u9879\u6587\u5B57\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>loading</td><td>\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001</td><td><em>boolean</em></td><td>-</td></tr><tr><td>className</td><td>\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class \u7C7B\u540D</td><td><em>string</em></td><td>-</td></tr><tr><td>openType</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\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\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>sessionFrom</td><td>\u4F1A\u8BDD\u6765\u6E90\uFF0CopenType="contact"\u65F6\u6709\u6548</td><td><em>string</em></td><td>-</td></tr><tr><td>sendMessageTitle</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898\uFF0CopenType="contact"\u65F6\u6709\u6548</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>sendMessagePath</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84\uFF0CopenType="contact"\u65F6\u6709\u6548</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>sendMessageImg</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u56FE\u7247\uFF0CopenType="contact"\u65F6\u6709\u6548</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>showMessageCard</td><td>\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\u6548</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>appParameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570\uFF0CopenType=launchApp \u65F6\u6709\u6548</td><td><em>string</em></td><td>-</td></tr></tbody></table></div>', 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('<h1>Area \u7701\u5E02\u533A\u9009\u62E9</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7701\u5E02\u533A\u9009\u62E9\u7EC4\u4EF6\u901A\u5E38\u4E0E <a href="#/popup">\u5F39\u51FA\u5C42</a> \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-area"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/area/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u521D\u59CB\u5316\u7701\u5E02\u533A\u7EC4\u4EF6\u65F6\uFF0C\u9700\u8981\u901A\u8FC7 <code>area-list</code> \u5C5E\u6027\u4F20\u5165\u7701\u5E02\u533A\u6570\u636E\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">"{{ areaList }}"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="arealist-ge-shi" tabindex="-1">areaList \u683C\u5F0F</h3><p>areaList \u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u5305\u542B <code>province_list</code>\u3001<code>city_list</code>\u3001<code>county_list</code> \u4E09\u4E2A key\u3002</p><p>\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 <code>11</code>\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\uFF0C\u4E3A <code>110000</code>\u3002</p><p>\u793A\u4F8B\u6570\u636E\u5982\u4E0B\uFF1A</p><pre><code class="language-js"><span class="hljs-keyword">const</span> areaList = {\n <span class="hljs-attr">province_list</span>: {\n <span class="hljs-number">110000</span>: <span class="hljs-string">'\u5317\u4EAC\u5E02'</span>,\n <span class="hljs-number">120000</span>: <span class="hljs-string">'\u5929\u6D25\u5E02'</span>,\n },\n <span class="hljs-attr">city_list</span>: {\n <span class="hljs-number">110100</span>: <span class="hljs-string">'\u5317\u4EAC\u5E02'</span>,\n <span class="hljs-number">120100</span>: <span class="hljs-string">'\u5929\u6D25\u5E02'</span>,\n },\n <span class="hljs-attr">county_list</span>: {\n <span class="hljs-number">110101</span>: <span class="hljs-string">'\u4E1C\u57CE\u533A'</span>,\n <span class="hljs-number">110102</span>: <span class="hljs-string">'\u897F\u57CE\u533A'</span>,\n <span class="hljs-comment">// ....</span>\n },\n};\n</code></pre></div><div class="van-doc-card"><h3 id="vant-area-data" tabindex="-1">@vant/area-data</h3><p>Vant \u5B98\u65B9\u63D0\u4F9B\u4E86\u4E00\u4EFD\u9ED8\u8BA4\u7684\u7701\u5E02\u533A\u6570\u636E\uFF0C\u53EF\u4EE5\u901A\u8FC7 <a href="https://github.com/youzan/vant/tree/dev/packages/vant-area-data">@vant/area-data</a> \u5F15\u5165\u3002</p><pre><code class="language-bash">yarn add @vant/area-data\n</code></pre><pre><code class="language-ts"><span class="hljs-keyword">import</span> { areaList } <span class="hljs-keyword">from</span> <span class="hljs-string">'@vant/area-data'</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n areaList,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-zhong-sheng-shi-qu" tabindex="-1">\u9009\u4E2D\u7701\u5E02\u533A</h3><p>\u5982\u679C\u60F3\u9009\u4E2D\u67D0\u4E2A\u7701\u5E02\u533A\uFF0C\u9700\u8981\u4F20\u5165\u4E00\u4E2A<code>value</code>\u5C5E\u6027\uFF0C\u7ED1\u5B9A\u5BF9\u5E94\u7684\u7701\u5E02\u533A<code>code</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">"{{ areaList }}"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"110101"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="pei-zhi-xian-shi-lie" tabindex="-1">\u914D\u7F6E\u663E\u793A\u5217</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>columns-num</code>\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<code>2</code>\uFF0C\u5219\u53EA\u4F1A\u663E\u793A\u7701\u5E02\u9009\u62E9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">"{{ areaList }}"</span> <span class="hljs-attr">columns-num</span>=<span class="hljs-string">"{{ 2 }}"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="pei-zhi-lie-zhan-wei-ti-shi-wen-zi" tabindex="-1">\u914D\u7F6E\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>columns-placeholder</code>\u5C5E\u6027\u914D\u7F6E\u6BCF\u4E00\u5217\u7684\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-area</span>\n <span class="hljs-attr">area-list</span>=<span class="hljs-string">"{{ areaList }}"</span>\n <span class="hljs-attr">columns-placeholder</span>=<span class="hljs-string">"{{ ['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9'] }}"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span>\n/></span>\n</code></pre></div><h2 id="yun-kai-fa-shi-li" tabindex="-1">\u4E91\u5F00\u53D1\u793A\u4F8B</h2><div class="van-doc-card"><h3 id="shi-yong-yun-kai-fa-huo-qu-sheng-shi-qu-shu-ju" tabindex="-1">\u4F7F\u7528\u4E91\u5F00\u53D1\u83B7\u53D6\u7701\u5E02\u533A\u6570\u636E</h3><p>\u5B9E\u9645\u9879\u76EE\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html">\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1</a>\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</p><p>\u5728\u5C0F\u7A0B\u5E8F\u4E2D\u4F7F\u7528\u4E91\u80FD\u529B\u4E4B\u524D\u9700\u8981\u5148\u8C03\u7528<code>wx.could.init</code>\u65B9\u6CD5\u5B8C\u6210\u4E91\u80FD\u529B\u7684\u521D\u59CB\u5316\u3002</p><pre><code class="language-js"><span class="hljs-keyword">const</span> db = wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">database</span>();\n\ndb.<span class="hljs-title function_">collection</span>(<span class="hljs-string">'region'</span>)\n .<span class="hljs-title function_">limit</span>(<span class="hljs-number">1</span>)\n .<span class="hljs-title function_">get</span>()\n .<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =></span> {\n <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span> && res.<span class="hljs-property">data</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">areaList</span>: res.<span class="hljs-property">data</span>[<span class="hljs-number">0</span>],\n });\n }\n })\n .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">err</span>) =></span> {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err);\n });\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u7684\u7701\u5E02\u533A<code>code</code></td><td><em>string</em></td><td>-</td></tr><tr><td>title</td><td>\u9876\u90E8\u680F\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>area-list</td><td>\u7701\u5E02\u533A\u6570\u636E\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9</td><td><em>object</em></td><td>-</td></tr><tr><td>columns-num</td><td>\u7701\u5E02\u533A\u663E\u793A\u5217\u6570\uFF0C3-\u7701\u5E02\u533A\uFF0C2-\u7701\u5E02\uFF0C1-\u7701</td><td><em>string | number</em></td><td><code>3</code></td></tr><tr><td>columns-placeholder</td><td>\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57</td><td><em>string[]</em></td><td><code>[]</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>item-height</td><td>\u9009\u9879\u9AD8\u5EA6</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>visible-item-count</td><td>\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570</td><td><em>number</em></td><td><code>6</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:confirm</td><td>\u70B9\u51FB\u53F3\u4E0A\u65B9\u5B8C\u6210\u6309\u94AE</td><td>\u4E00\u4E2A\u6570\u7EC4\u53C2\u6570\uFF0C\u5177\u4F53\u683C\u5F0F\u770B\u4E0B\u65B9\u6570\u636E\u683C\u5F0F\u7AE0\u8282</td></tr><tr><td>bind:cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6</td><td>-</td></tr><tr><td>bind:change</td><td>\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1</td><td>Picker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Area \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>reset</td><td>code: string</td><td>-</td><td>\u6839\u636E code \u91CD\u7F6E\u6240\u6709\u9009\u9879\uFF0C\u82E5\u4E0D\u4F20 code\uFF0C\u5219\u91CD\u7F6E\u5230\u7B2C\u4E00\u9879</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dian-ji-wan-cheng-shi-fan-hui-de-shu-ju-ge-shi" tabindex="-1">\u70B9\u51FB\u5B8C\u6210\u65F6\u8FD4\u56DE\u7684\u6570\u636E\u683C\u5F0F</h3><p>\u8FD4\u56DE\u7684\u6570\u636E\u6574\u4F53\u4E3A\u4E00\u4E2A Object\uFF0C\u5305\u542B <code>values</code>, <code>indexs</code> \u4E24\u4E2A key\u3002</p><p><code>values</code> \u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B <code>columnsNum</code> \u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u7684\u6570\u636E\u3002</p><p><code>code</code> \u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u7F16\u7801\uFF0C <code>name</code> \u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u540D\u79F0\u3002</p><pre><code class="language-javascript">[\n {\n <span class="hljs-attr">code</span>: <span class="hljs-string">'110000'</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5317\u4EAC\u5E02'</span>,\n },\n {\n <span class="hljs-attr">code</span>: <span class="hljs-string">'110100'</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5317\u4EAC\u5E02'</span>,\n },\n {\n <span class="hljs-attr">code</span>: <span class="hljs-string">'110101'</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u4E1C\u57CE\u533A'</span>,\n },\n];\n</code></pre><p><code>indexs</code> \u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B <code>columnsNum</code> \u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u9879\u7684\u5E8F\u53F7\u3002</p></div>', 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('<h1>Button \u6309\u94AE</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u6309\u94AE\u7528\u4E8E\u89E6\u53D1\u4E00\u4E2A\u64CD\u4F5C\uFF0C\u5982\u63D0\u4EA4\u8868\u5355\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-button"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/button/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="an-niu-lei-xing" tabindex="-1">\u6309\u94AE\u7C7B\u578B</h3><p>\u652F\u6301<code>default</code>\u3001<code>primary</code>\u3001<code>info</code>\u3001<code>warning</code>\u3001<code>danger</code>\u4E94\u79CD\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A<code>default</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"default"</span>></span>\u9ED8\u8BA4\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>></span>\u4FE1\u606F\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>\u8B66\u544A\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u5371\u9669\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="po-su-an-niu" tabindex="-1">\u6734\u7D20\u6309\u94AE</h3><p>\u901A\u8FC7<code>plain</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6734\u7D20\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>></span>\u6734\u7D20\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xi-bian-kuang" tabindex="-1">\u7EC6\u8FB9\u6846</h3><p>\u8BBE\u7F6E<code>hairline</code>\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F 0.5px \u8FB9\u6846\uFF0C\u57FA\u4E8E\u4F2A\u7C7B\u5B9E\u73B0\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">hairline</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u7EC6\u8FB9\u6846\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">hairline</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>></span>\u7EC6\u8FB9\u6846\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7<code>disabled</code>\u5C5E\u6027\u6765\u7981\u7528\u6309\u94AE\uFF0C\u6B64\u65F6\u6309\u94AE\u7684<code>bind:click</code>\u4E8B\u4EF6\u4E0D\u4F1A\u89E6\u53D1\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u7981\u7528\u72B6\u6001<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>></span>\u7981\u7528\u72B6\u6001<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">loading-type</span>=<span class="hljs-string">"spinner"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">loading-text</span>=<span class="hljs-string">"\u52A0\u8F7D\u4E2D..."</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="an-niu-xing-zhuang" tabindex="-1">\u6309\u94AE\u5F62\u72B6</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">square</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u65B9\u5F62\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>></span>\u5706\u5F62\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-an-niu" tabindex="-1">\u56FE\u6807\u6309\u94AE</h3><p>\u901A\u8FC7<code>icon</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"star-o"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"star-o"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/logo.png"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>></span>\n \u6309\u94AE\n<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="an-niu-chi-cun" tabindex="-1">\u6309\u94AE\u5C3A\u5BF8</h3><p>\u652F\u6301<code>large</code>\u3001<code>normal</code>\u3001<code>small</code>\u3001<code>mini</code>\u56DB\u79CD\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3A<code>normal</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"large"</span>></span>\u5927\u53F7\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"normal"</span>></span>\u666E\u901A\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span>></span>\u5C0F\u578B\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"mini"</span>></span>\u8FF7\u4F60\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="kuai-ji-yuan-su" tabindex="-1">\u5757\u7EA7\u5143\u7D20</h3><p>\u901A\u8FC7<code>block</code>\u5C5E\u6027\u53EF\u4EE5\u5C06\u6309\u94AE\u7684\u5143\u7D20\u7C7B\u578B\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">block</span>></span>\u5757\u7EA7\u5143\u7D20<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>color</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#7232dd"</span>></span>\u5355\u8272\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#7232dd"</span> <span class="hljs-attr">plain</span>></span>\u5355\u8272\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"linear-gradient(to right, #4bb0ff, #6149f6)"</span>></span>\n \u6E10\u53D8\u8272\u6309\u94AE\n<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>id</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>type</td><td>\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>info</code> <code>warning</code> <code>danger</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>size</td><td>\u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A <code>normal</code> <code>large</code> <code>small</code> <code>mini</code></td><td><em>string</em></td><td><code>normal</code></td></tr><tr><td>color <code>v1.0.0</code></td><td>\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165<code>linear-gradient</code>\u6E10\u53D8\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>class-prefix</td><td>\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 <a href="#/icon">class-prefix \u5C5E\u6027</a></td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>plain</td><td>\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>block</td><td>\u662F\u5426\u4E3A\u5757\u7EA7\u5143\u7D20</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>round</td><td>\u662F\u5426\u4E3A\u5706\u5F62\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>square</td><td>\u662F\u5426\u4E3A\u65B9\u5F62\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>hairline</td><td>\u662F\u5426\u4F7F\u7528 0.5px \u8FB9\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading-text</td><td>\u52A0\u8F7D\u72B6\u6001\u63D0\u793A\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>loading-type</td><td>\u52A0\u8F7D\u72B6\u6001\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>loading-size</td><td>\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F</td><td><em>string</em></td><td><code>20px</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td></tr><tr><td>business-id</td><td>\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id</td><td><em>number</em></td><td>-</td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>dataset</td><td>\u6309\u94AE dataset\uFF0Copen-type \u4E3A <code>share</code> \u65F6\uFF0C\u53EF\u5728 onShareAppMessage \u4E8B\u4EF6\u7684 <code>event.target.dataset.detail</code> \u4E2D\u770B\u5230\u4F20\u5165\u7684\u503C</td><td><em>any</em></td><td>-</td></tr><tr><td>form-type</td><td>\u7528\u4E8E form \u7EC4\u4EF6\uFF0C\u53EF\u9009\u503C\u4E3A<code>submit</code> <code>reset</code>\uFF0C\u70B9\u51FB\u5206\u522B\u4F1A\u89E6\u53D1 form \u7EC4\u4EF6\u7684 submit/reset \u4E8B\u4EF6</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u6309\u94AE\uFF0C\u4E14\u6309\u94AE\u72B6\u6001\u4E0D\u4E3A\u52A0\u8F7D\u6216\u7981\u7528\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>\u7528\u6237\u70B9\u51FB\u8BE5\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C<br>\u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo</td><td>-</td></tr><tr><td>bind:contact</td><td>\u5BA2\u670D\u6D88\u606F\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:error</td><td>\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:opensetting</td><td>\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03</td><td>-</td></tr></tbody></table><blockquote><p>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</p></blockquote></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>loading-class</td><td>\u52A0\u8F7D\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Calendar \u65E5\u5386</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u65E5\u5386\u7EC4\u4EF6\u7528\u4E8E\u9009\u62E9\u65E5\u671F\u6216\u65E5\u671F\u533A\u95F4\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-calendar"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/calendar/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="xuan-ze-dan-ge-ri-qi" tabindex="-1">\u9009\u62E9\u5355\u4E2A\u65E5\u671F</h3><p>\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<code>confirm</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u9009\u62E9\u5355\u4E2A\u65E5\u671F"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ date }}"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onDisplay"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span> <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">"onConfirm"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">date</span>: <span class="hljs-string">''</span>,\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n <span class="hljs-title function_">formatDate</span>(<span class="hljs-params">date</span>) {\n date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(date);\n <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${date.getMonth() + <span class="hljs-number">1</span>}</span>/<span class="hljs-subst">${date.getDate()}</span>`</span>;\n },\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">date</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">formatDate</span>(event.<span class="hljs-property">detail</span>),\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-duo-ge-ri-qi" tabindex="-1">\u9009\u62E9\u591A\u4E2A\u65E5\u671F</h3><p>\u8BBE\u7F6E<code>type</code>\u4E3A<code>multiple</code>\u540E\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C\u6B64\u65F6<code>confirm</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u9009\u62E9\u591A\u4E2A\u65E5\u671F"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ text }}"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onDisplay"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"multiple"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">"onConfirm"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">text</span>: <span class="hljs-string">''</span>,\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">date</span>: <span class="hljs-string">`\u9009\u62E9\u4E86 <span class="hljs-subst">${event.detail.length}</span> \u4E2A\u65E5\u671F`</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-qu-jian" tabindex="-1">\u9009\u62E9\u65E5\u671F\u533A\u95F4</h3><p>\u8BBE\u7F6E<code>type</code>\u4E3A<code>range</code>\u540E\u53EF\u4EE5\u9009\u62E9\u65E5\u671F\u533A\u95F4\uFF0C\u6B64\u65F6<code>confirm</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u9009\u62E9\u65E5\u671F\u533A\u95F4"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ date }}"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onDisplay"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">"onConfirm"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">date</span>: <span class="hljs-string">''</span>,\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n <span class="hljs-title function_">formatDate</span>(<span class="hljs-params">date</span>) {\n date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(date);\n <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${date.getMonth() + <span class="hljs-number">1</span>}</span>/<span class="hljs-subst">${date.getDate()}</span>`</span>;\n },\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> [start, end] = event.<span class="hljs-property">detail</span>;\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">date</span>: <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.formatDate(start)}</span> - <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.formatDate(end)}</span>`</span>,\n });\n },\n});\n</code></pre><blockquote><p>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</p></blockquote></div><div class="van-doc-card"><h3 id="kuai-jie-xuan-ze" tabindex="-1">\u5FEB\u6377\u9009\u62E9</h3><p>\u5C06<code>show-confirm</code>\u8BBE\u7F6E\u4E3A<code>false</code>\u53EF\u4EE5\u9690\u85CF\u786E\u8BA4\u6309\u94AE\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u7ACB\u5373\u89E6\u53D1<code>confirm</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">show-confirm</span>=<span class="hljs-string">"{{ false }}"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>color</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#07c160"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ri-qi-fan-wei" tabindex="-1">\u81EA\u5B9A\u4E49\u65E5\u671F\u8303\u56F4</h3><p>\u901A\u8FC7<code>min-date</code>\u548C<code>max-date</code>\u5B9A\u4E49\u65E5\u5386\u7684\u8303\u56F4\uFF0C\u9700\u8981\u6CE8\u610F\u7684\u662F<code>min-date</code>\u548C<code>max-date</code>\u7684\u533A\u95F4\u4E0D\u5B9C\u8FC7\u5927\uFF0C\u5426\u5219\u4F1A\u9020\u6210\u4E25\u91CD\u7684\u6027\u80FD\u95EE\u9898\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">"{{ minDate }}"</span>\n <span class="hljs-attr">max-date</span>=<span class="hljs-string">"{{ maxDate }}"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2010</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>).<span class="hljs-title function_">getTime</span>(),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2010</span>, <span class="hljs-number">0</span>, <span class="hljs-number">31</span>).<span class="hljs-title function_">getTime</span>(),\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu-wen-zi" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u5B57</h3><p>\u901A\u8FC7<code>confirm-text</code>\u8BBE\u7F6E\u6309\u94AE\u6587\u5B57\uFF0C\u901A\u8FC7<code>confirm-disabled-text</code>\u8BBE\u7F6E\u6309\u94AE\u7981\u7528\u65F6\u7684\u6587\u5B57\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span>\n <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"\u5B8C\u6210"</span>\n <span class="hljs-attr">confirm-disabled-text</span>=<span class="hljs-string">"\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ri-qi-wen-an" tabindex="-1">\u81EA\u5B9A\u4E49\u65E5\u671F\u6587\u6848</h3><p>\u901A\u8FC7\u4F20\u5165<code>formatter</code>\u51FD\u6570\u6765\u5BF9\u65E5\u5386\u4E0A\u6BCF\u4E00\u683C\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">formatter</span>=<span class="hljs-string">"{{ formatter }}"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-title function_">formatter</span>(<span class="hljs-params">day</span>) {\n <span class="hljs-keyword">const</span> month = day.<span class="hljs-property">date</span>.<span class="hljs-title function_">getMonth</span>() + <span class="hljs-number">1</span>;\n <span class="hljs-keyword">const</span> date = day.<span class="hljs-property">date</span>.<span class="hljs-title function_">getDate</span>();\n\n <span class="hljs-keyword">if</span> (month === <span class="hljs-number">5</span>) {\n <span class="hljs-keyword">if</span> (date === <span class="hljs-number">1</span>) {\n day.<span class="hljs-property">topInfo</span> = <span class="hljs-string">'\u52B3\u52A8\u8282'</span>;\n } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (date === <span class="hljs-number">4</span>) {\n day.<span class="hljs-property">topInfo</span> = <span class="hljs-string">'\u4E94\u56DB\u9752\u5E74\u8282'</span>;\n } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (date === <span class="hljs-number">11</span>) {\n day.<span class="hljs-property">text</span> = <span class="hljs-string">'\u4ECA\u5929'</span>;\n }\n }\n\n <span class="hljs-keyword">if</span> (day.<span class="hljs-property">type</span> === <span class="hljs-string">'start'</span>) {\n day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">'\u5165\u4F4F'</span>;\n } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (day.<span class="hljs-property">type</span> === <span class="hljs-string">'end'</span>) {\n day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">'\u79BB\u5E97'</span>;\n }\n\n <span class="hljs-keyword">return</span> day;\n },\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-dan-chu-wei-zhi" tabindex="-1">\u81EA\u5B9A\u4E49\u5F39\u51FA\u4F4D\u7F6E</h3><p>\u901A\u8FC7<code>position</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A<code>top</code>\u3001<code>left</code>\u3001<code>right</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">round</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">position</span>=<span class="hljs-string">"right"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ri-qi-qu-jian-zui-da-fan-wei" tabindex="-1">\u65E5\u671F\u533A\u95F4\u6700\u5927\u8303\u56F4</h3><p>\u9009\u62E9\u65E5\u671F\u533A\u95F4\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>max-range</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">max-range</span>=<span class="hljs-string">"{{ 3 }}"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-zhou-qi-shi-ri" tabindex="-1">\u81EA\u5B9A\u4E49\u5468\u8D77\u59CB\u65E5</h3><p>\u901A\u8FC7 <code>first-day-of-week</code> \u5C5E\u6027\u8BBE\u7F6E\u4E00\u5468\u4ECE\u54EA\u5929\u5F00\u59CB\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">first-day-of-week</span>=<span class="hljs-string">"{{ 1 }}"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ping-pu-zhan-shi" tabindex="-1">\u5E73\u94FA\u5C55\u793A</h3><p>\u5C06<code>poppable</code>\u8BBE\u7F6E\u4E3A<code>false</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u65E5\u5386"</span>\n <span class="hljs-attr">poppable</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">show-confirm</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar"</span>\n/></span>\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.calendar</span> {\n <span class="hljs-attr">--calendar-height</span>: <span class="hljs-number">500px</span>;\n}\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u9009\u62E9\u7C7B\u578B:<br><code>single</code>\u8868\u793A\u9009\u62E9\u5355\u4E2A\u65E5\u671F\uFF0C<br><code>multiple</code>\u8868\u793A\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C<br><code>range</code>\u8868\u793A\u9009\u62E9\u65E5\u671F\u533A\u95F4</td><td><em>string</em></td><td><code>single</code></td></tr><tr><td>title</td><td>\u65E5\u5386\u6807\u9898</td><td><em>string</em></td><td><code>\u65E5\u671F\u9009\u62E9</code></td></tr><tr><td>color</td><td>\u4E3B\u9898\u8272\uFF0C\u5BF9\u5E95\u90E8\u6309\u94AE\u548C\u9009\u4E2D\u65E5\u671F\u751F\u6548</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>min-date</td><td>\u53EF\u9009\u62E9\u7684\u6700\u5C0F\u65E5\u671F</td><td><em>timestamp</em></td><td>\u5F53\u524D\u65E5\u671F</td></tr><tr><td>max-date</td><td>\u53EF\u9009\u62E9\u7684\u6700\u5927\u65E5\u671F</td><td><em>timestamp</em></td><td>\u5F53\u524D\u65E5\u671F\u7684\u516D\u4E2A\u6708\u540E</td></tr><tr><td>default-date</td><td>\u9ED8\u8BA4\u9009\u4E2D\u7684\u65E5\u671F\uFF0C<code>type</code>\u4E3A<code>multiple</code>\u6216<code>range</code>\u65F6\u4E3A\u6570\u7EC4</td><td><em>timestamp | timestamp[]</em></td><td>\u4ECA\u5929</td></tr><tr><td>row-height</td><td>\u65E5\u671F\u884C\u9AD8</td><td><em>number | string</em></td><td><code>64</code></td></tr><tr><td>formatter</td><td>\u65E5\u671F\u683C\u5F0F\u5316\u51FD\u6570</td><td><em>(day: Day) => Day</em></td><td>-</td></tr><tr><td>poppable</td><td>\u662F\u5426\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u65E5\u5386</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-mark</td><td>\u662F\u5426\u663E\u793A\u6708\u4EFD\u80CC\u666F\u6C34\u5370</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-title</td><td>\u662F\u5426\u5C55\u793A\u65E5\u5386\u6807\u9898</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-subtitle</td><td>\u662F\u5426\u5C55\u793A\u65E5\u5386\u526F\u6807\u9898\uFF08\u5E74\u6708\uFF09</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-confirm</td><td>\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>confirm-text</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u5B9A</code></td></tr><tr><td>confirm-disabled-text</td><td>\u786E\u8BA4\u6309\u94AE\u5904\u4E8E\u7981\u7528\u72B6\u6001\u65F6\u7684\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u5B9A</code></td></tr><tr><td>first-day-of-week</td><td>\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5</td><td><em>0~6</em></td><td><code>0</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="poppable-props" tabindex="-1">Poppable Props</h3><p>\u5F53 Calendar \u7684 <code>poppable</code> \u4E3A <code>true</code> \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u65E5\u5386\u5F39\u7A97</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>position</td><td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>top</code> <code>right</code> <code>left</code></td><td><em>string</em></td><td><code>bottom</code></td></tr><tr><td>round</td><td>\u662F\u5426\u663E\u793A\u5706\u89D2\u5F39\u7A97</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="range-props" tabindex="-1">Range Props</h3><p>\u5F53 Calendar \u7684 <code>type</code> \u4E3A <code>range</code> \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>max-range</td><td>\u65E5\u671F\u533A\u95F4\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9ED8\u8BA4\u65E0\u9650\u5236</td><td><em>number | string</em></td><td>-</td></tr><tr><td>range-prompt</td><td>\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848</td><td><em>string | null</em></td><td><code>\u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 xx \u5929</code></td></tr><tr><td>show-range-prompt</td><td>\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>allow-same-day</td><td>\u662F\u5426\u5141\u8BB8\u65E5\u671F\u8303\u56F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E3A\u540C\u4E00\u5929</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="day-shu-ju-jie-gou" tabindex="-1">Day \u6570\u636E\u7ED3\u6784</h3><p>\u65E5\u5386\u4E2D\u7684\u6BCF\u4E2A\u65E5\u671F\u90FD\u5BF9\u5E94\u4E00\u4E2A Day \u5BF9\u8C61\uFF0C\u901A\u8FC7<code>formatter</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 Day \u5BF9\u8C61\u7684\u5185\u5BB9\u3002</p><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>date</td><td>\u65E5\u671F\u5BF9\u5E94\u7684 Date \u5BF9\u8C61</td><td><em>Date</em></td></tr><tr><td>type</td><td>\u65E5\u671F\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A<code>selected</code>\u3001<code>start</code>\u3001<code>middle</code>\u3001<code>end</code>\u3001<code>disabled</code></td><td><em>string</em></td></tr><tr><td>text</td><td>\u4E2D\u95F4\u663E\u793A\u7684\u6587\u5B57</td><td><em>string</em></td></tr><tr><td>topInfo</td><td>\u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606F</td><td><em>string</em></td></tr><tr><td>bottomInfo</td><td>\u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606F</td><td><em>string</em></td></tr><tr><td>className</td><td>\u81EA\u5B9A\u4E49 className</td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>select</td><td>\u70B9\u51FB\u4EFB\u610F\u65E5\u671F\u65F6\u89E6\u53D1</td><td><em>value: Date | Date[]</em></td></tr><tr><td>unselect</td><td>\u5F53 Calendar \u7684 <code>type</code> \u4E3A <code>multiple</code> \u65F6,\u70B9\u51FB\u5DF2\u9009\u4E2D\u7684\u65E5\u671F\u65F6\u89E6\u53D1</td><td><em>value: Date</em></td></tr><tr><td>confirm</td><td>\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1\uFF0C\u82E5<code>show-confirm</code>\u4E3A<code>true</code>\uFF0C\u5219\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u540E\u89E6\u53D1</td><td><em>value: Date | Date[]</em></td></tr><tr><td>open</td><td>\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>close</td><td>\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>opened</td><td>\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>closed</td><td>\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>over-range</td><td>\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>click-subtitle <code>v1.8.1</code></td><td>\u70B9\u51FB\u65E5\u5386\u526F\u6807\u9898\u65F6\u89E6\u53D1</td><td><em>WechatMiniprogram.TouchEvent</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898</td></tr><tr><td>footer</td><td>\u81EA\u5B9A\u4E49\u5E95\u90E8\u533A\u57DF\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Calendar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th></tr></thead><tbody><tr><td>reset</td><td>\u91CD\u7F6E\u9009\u4E2D\u7684\u65E5\u671F\u5230\u9ED8\u8BA4\u503C</td><td>-</td><td>-</td></tr></tbody></table></div>', 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('<h1>Card \u5546\u54C1\u5361\u7247</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5546\u54C1\u5361\u7247\uFF0C\u7528\u4E8E\u5C55\u793A\u5546\u54C1\u7684\u56FE\u7247\u3001\u4EF7\u683C\u7B49\u4FE1\u606F\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-card"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/card/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-card</span>\n <span class="hljs-attr">num</span>=<span class="hljs-string">"2"</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">"2.00"</span>\n <span class="hljs-attr">desc</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5546\u54C1\u6807\u9898"</span>\n <span class="hljs-attr">thumb</span>=<span class="hljs-string">"{{ imageURL }}"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u53EF\u4EE5\u901A\u8FC7\u63D2\u69FD\u6DFB\u52A0\u5B9A\u5236\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-card</span>\n <span class="hljs-attr">num</span>=<span class="hljs-string">"2"</span>\n <span class="hljs-attr">tag</span>=<span class="hljs-string">"\u6807\u7B7E"</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">"10.00"</span>\n <span class="hljs-attr">desc</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5546\u54C1\u6807\u9898"</span>\n <span class="hljs-attr">thumb</span>=<span class="hljs-string">"{{ imageURL }}"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"footer"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"mini"</span>></span>\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"mini"</span>></span>\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-card</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>thumb</td><td>\u5DE6\u4FA7\u56FE\u7247</td><td><em>string</em></td><td>-</td></tr><tr><td>thumb-mode</td><td>\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\u503C</td><td><em>string</em></td><td><code>aspectFit</code></td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>desc</td><td>\u63CF\u8FF0</td><td><em>string</em></td><td>-</td></tr><tr><td>tag</td><td>\u6807\u7B7E</td><td><em>string</em></td><td>-</td></tr><tr><td>num</td><td>\u5546\u54C1\u6570\u91CF</td><td><em>string | number</em></td><td>-</td></tr><tr><td>price</td><td>\u5546\u54C1\u4EF7\u683C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>origin-price</td><td>\u5546\u54C1\u5212\u7EBF\u539F\u4EF7</td><td><em>string | number</em></td><td>-</td></tr><tr><td>centered</td><td>\u5185\u5BB9\u662F\u5426\u5782\u76F4\u5C45\u4E2D</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>currency</td><td>\u8D27\u5E01\u7B26\u53F7</td><td><em>string</em></td><td><code>\xA5</code></td></tr><tr><td>thumb-link</td><td>\u70B9\u51FB\u5DE6\u4FA7\u56FE\u7247\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>lazy-load</td><td>\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>desc</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>desc</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>num</td><td>\u81EA\u5B9A\u4E49\u6570\u91CF</td></tr><tr><td>price</td><td>\u81EA\u5B9A\u4E49\u4EF7\u683C</td></tr><tr><td>origin-price</td><td>\u81EA\u5B9A\u4E49\u5546\u54C1\u539F\u4EF7\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>origin-price</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>price-top</td><td>\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0A\u65B9\u533A\u57DF</td></tr><tr><td>bottom</td><td>\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0B\u65B9\u533A\u57DF</td></tr><tr><td>thumb</td><td>\u81EA\u5B9A\u4E49\u56FE\u7247\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>thumb</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>tag</td><td>\u81EA\u5B9A\u4E49\u56FE\u7247\u89D2\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>tag</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>tags</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u4E0B\u65B9\u6807\u7B7E\u533A\u57DF</td></tr><tr><td>footer</td><td>\u81EA\u5B9A\u4E49\u53F3\u4E0B\u89D2\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>thumb-class</td><td>\u5DE6\u4FA7\u56FE\u7247\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class</td><td>\u6807\u9898\u6837\u5F0F\u7C7B</td></tr><tr><td>price-class</td><td>\u4EF7\u683C\u6837\u5F0F\u7C7B</td></tr><tr><td>origin-price-class</td><td>\u5212\u7EBF\u539F\u4EF7\u6837\u5F0F\u7C7B</td></tr><tr><td>desc-class</td><td>\u63CF\u8FF0\u6837\u5F0F\u7C7B</td></tr><tr><td>num-class</td><td>\u6570\u91CF\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Cell \u5355\u5143\u683C</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5355\u5143\u683C\u4E3A\u5217\u8868\u4E2D\u7684\u5355\u4E2A\u5C55\u793A\u9879\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-cell"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/cell/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-cell-group"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/cell-group/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>Cell</code>\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u4E0E<code>CellGroup</code>\u642D\u914D\u4F7F\u7528\u3002<code>CellGroup</code>\u53EF\u4EE5\u4E3A<code>Cell</code>\u63D0\u4F9B\u4E0A\u4E0B\u5916\u8FB9\u6846\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span> <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="qia-pian-feng-ge" tabindex="-1">\u5361\u7247\u98CE\u683C</h3><p>\u901A\u8FC7 <code>CellGroup</code> \u7684 <code>inset</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">inset</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="dan-yuan-ge-da-xiao" tabindex="-1">\u5355\u5143\u683C\u5927\u5C0F</h3><p>\u901A\u8FC7<code>size</code>\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u5355\u5143\u683C\u7684\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"large"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"large"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-tu-biao" tabindex="-1">\u5C55\u793A\u56FE\u6807</h3><p>\u901A\u8FC7<code>icon</code>\u5C5E\u6027\u5728\u6807\u9898\u5DE6\u4FA7\u5C55\u793A\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"location-o"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-jian-tou" tabindex="-1">\u5C55\u793A\u7BAD\u5934</h3><p>\u8BBE\u7F6E<code>is-link</code>\u5C5E\u6027\u540E\u4F1A\u5728\u5355\u5143\u683C\u53F3\u4FA7\u663E\u793A\u7BAD\u5934\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7<code>arrow-direction</code>\u5C5E\u6027\u63A7\u5236\u7BAD\u5934\u65B9\u5411\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">is-link</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> <span class="hljs-attr">arrow-direction</span>=<span class="hljs-string">"down"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ye-mian-tiao-zhuan" tabindex="-1">\u9875\u9762\u8DF3\u8F6C</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>url</code>\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7<code>link-type</code>\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span>\n <span class="hljs-attr">is-link</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span>\n <span class="hljs-attr">link-type</span>=<span class="hljs-string">"navigateTo"</span>\n <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/dashboard/index"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="fen-zu-biao-ti" tabindex="-1">\u5206\u7EC4\u6807\u9898</h3><p>\u901A\u8FC7<code>CellGroup</code>\u7684<code>title</code>\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u5206\u7EC4\u6807\u9898\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5206\u7EC41"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5206\u7EC42"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-cha-cao" tabindex="-1">\u4F7F\u7528\u63D2\u69FD</h3><p>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"shop-o"</span> <span class="hljs-attr">is-link</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-cell-text"</span>></span>\u5355\u5143\u683C<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right-icon"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"custom-icon"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-ju-zhong" tabindex="-1">\u5782\u76F4\u5C45\u4E2D</h3><p>\u901A\u8FC7<code>center</code>\u5C5E\u6027\u53EF\u4EE5\u8BA9<code>Cell</code>\u7684\u5DE6\u53F3\u5185\u5BB9\u90FD\u5782\u76F4\u5C45\u4E2D\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">center</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span> /></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="cellgroup-props" tabindex="-1">CellGroup Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u5206\u7EC4\u6807\u9898</td><td><em>string</em></td><td><code>-</code></td></tr><tr><td>inset <code>v1.7.2</code></td><td>\u662F\u5426\u5C55\u793A\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cellgroup-wai-bu-yang-shi-lei" tabindex="-1">CellGroup \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-props" tabindex="-1">Cell Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>icon</td><td>\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>title</td><td>\u5DE6\u4FA7\u6807\u9898</td><td><em>string | number</em></td><td>-</td></tr><tr><td>title-width</td><td>\u6807\u9898\u5BBD\u5EA6\uFF0C\u987B\u5305\u542B\u5355\u4F4D</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u53F3\u4FA7\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>label</td><td>\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F</td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>large</code></td><td><em>string</em></td><td>-</td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>center</td><td>\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>is-link</td><td>\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>required</td><td>\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>arrow-direction</td><td>\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code> <code>up</code> <code>down</code></td><td><em>string</em></td><td>-</td></tr><tr><td>use-label-slot</td><td>\u662F\u5426\u4F7F\u7528 label slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-style <code>v1.4.0</code></td><td>\u6807\u9898\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-event" tabindex="-1">Cell Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u5355\u5143\u683C\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-slot" tabindex="-1">Cell Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49<code>value</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>value</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>title</td><td>\u81EA\u5B9A\u4E49<code>title</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>label</td><td>\u81EA\u5B9A\u4E49<code>label</code>\u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6E <code>use-label-slot</code>\u5C5E\u6027</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49<code>icon</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>icon</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662F<code>arrow</code>\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>is-link</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-wai-bu-yang-shi-lei" tabindex="-1">Cell \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class</td><td>\u6807\u9898\u6837\u5F0F\u7C7B</td></tr><tr><td>label-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr><tr><td>value-class</td><td>\u53F3\u4FA7\u5185\u5BB9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Checkbox \u590D\u9009\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u591A\u9009\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-checkbox"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/checkbox/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-checkbox-group"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/checkbox-group/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\u590D\u9009\u6846<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">checked</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>disabled</code>\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n \u590D\u9009\u6846\n<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xing-zhuang" tabindex="-1">\u81EA\u5B9A\u4E49\u5F62\u72B6</h3><p>\u5C06<code>shape</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>square</code>\uFF0C\u590D\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"square"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n \u590D\u9009\u6846\n<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>checked-color</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ checked }}"</span>\n <span class="hljs-attr">checked-color</span>=<span class="hljs-string">"#07c160"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n></span>\n \u590D\u9009\u6846\n<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><p>\u901A\u8FC7<code>icon-size</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">"25px"</span>></span>\u590D\u9009\u6846<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u901A\u8FC7 icon \u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">use-icon-slot</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n \u81EA\u5B9A\u4E49\u56FE\u6807\n <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ checked ? activeIcon : inactiveIcon }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">'//img.yzcdn.cn/icon-active.png'</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">'//img.yzcdn.cn/icon-normal.png'</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">checked</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-wen-ben-dian-ji" tabindex="-1">\u7981\u7528\u6587\u672C\u70B9\u51FB</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>label-disabled</code>\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">label-disabled</span>></span>\u590D\u9009\u6846<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="fu-xuan-kuang-zu" tabindex="-1">\u590D\u9009\u6846\u7EC4</h3><p>\u9700\u8981\u4E0E<code>van-checkbox-group</code>\u4E00\u8D77\u4F7F\u7528\uFF0C\u9009\u4E2D\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u901A\u8FC7<code>value</code>\u7ED1\u5B9A\u5728<code>van-checkbox-group</code>\u4E0A\uFF0C\u6570\u7EC4\u4E2D\u7684\u9879\u5373\u4E3A\u9009\u4E2D\u7684<code>Checkbox</code>\u7684<code>name</code>\u5C5E\u6027\u8BBE\u7F6E\u7684\u503C\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ result }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"a"</span>></span>\u590D\u9009\u6846 a<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"b"</span>></span>\u590D\u9009\u6846 b<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"c"</span>></span>\u590D\u9009\u6846 c<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-checkbox-group</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">result</span>: [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">result</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-zui-da-ke-xuan-shu" tabindex="-1">\u9650\u5236\u6700\u5927\u53EF\u9009\u6570</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ result }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"{{ 2 }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"a"</span>></span>\u590D\u9009\u6846 a<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"b"</span>></span>\u590D\u9009\u6846 b<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"c"</span>></span>\u590D\u9009\u6846 c<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-checkbox-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="da-pei-dan-yuan-ge-zu-jian-shi-yong" tabindex="-1">\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528</h3><p>\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165<code>Cell</code>\u548C<code>CellGroup</code>\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 checkbox \u7684 toggle \u65B9\u6CD5\u624B\u52A8\u89E6\u53D1\u5207\u6362\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ result }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span>\n <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{ list }}"</span>\n <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"index"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u590D\u9009\u6846 {{ item }}"</span>\n <span class="hljs-attr">value-class</span>=<span class="hljs-string">"value-class"</span>\n <span class="hljs-attr">clickable</span>\n <span class="hljs-attr">data-index</span>=<span class="hljs-string">"{{ index }}"</span>\n <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"toggle"</span>\n ></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span>\n <span class="hljs-attr">catch:tap</span>=<span class="hljs-string">"noop"</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"checkboxes-{{ index }}"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"{{ item }}"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-checkbox-group</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">list</span>: [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>],\n <span class="hljs-attr">result</span>: [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">result</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n\n <span class="hljs-title function_">toggle</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { index } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;\n <span class="hljs-keyword">const</span> checkbox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">`.checkboxes-<span class="hljs-subst">${index}</span>`</span>);\n checkbox.<span class="hljs-title function_">toggle</span>();\n },\n\n <span class="hljs-title function_">noop</span>(<span class="hljs-params"></span>) {},\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.value-class</span> {\n <span class="hljs-attribute">flex</span>: none <span class="hljs-meta">!important</span>;\n}\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="checkbox-props" tabindex="-1">Checkbox Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6 Checkbox \u540D\u79F0</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A <code>round</code> <code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>value</td><td>\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u5355\u9009\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-disabled</td><td>\u662F\u5426\u7981\u7528\u5355\u9009\u6846\u5185\u5BB9\u70B9\u51FB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-position</td><td>\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code></td><td><em>string</em></td><td><code>right</code></td></tr><tr><td>use-icon-slot</td><td>\u662F\u5426\u4F7F\u7528 icon slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>checked-color</td><td>\u9009\u4E2D\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>icon-size</td><td>icon \u5927\u5C0F</td><td><em>string | number</em></td><td><code>20px</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkboxgroup-props" tabindex="-1">CheckboxGroup Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u6240\u6709\u9009\u4E2D\u9879\u7684 name</td><td><em>Array</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>max</td><td>\u8BBE\u7F6E\u6700\u5927\u53EF\u9009\u6570</td><td><em>number</em></td><td><code>0</code>\uFF08\u65E0\u9650\u5236\uFF09</td></tr><tr><td>direction <code>v1.7.0</code></td><td>\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code></td><td><em>string</em></td><td><code>vertical</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-event" tabindex="-1">Checkbox Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u7EC4\u4EF6\u7684\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-wai-bu-yang-shi-lei" tabindex="-1">Checkbox \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>label-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkboxgroup-event" tabindex="-1">CheckboxGroup Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u7EC4\u4EF6\u7684\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-slot" tabindex="-1">Checkbox Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u6587\u672C</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-fang-fa" tabindex="-1">Checkbox \u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 checkbox \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>toggle</td><td>-</td><td>-</td><td>\u5207\u6362\u9009\u4E2D\u72B6\u6001</td></tr></tbody></table></div>', 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('<h1>Circle \u73AF\u5F62\u8FDB\u5EA6\u6761</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5706\u73AF\u5F62\u7684\u8FDB\u5EA6\u6761\u7EC4\u4EF6\uFF0C\u652F\u6301\u8FDB\u5EA6\u6E10\u53D8\u52A8\u753B\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-circle"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/circle/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>value</code>\u5C5E\u6027\u8868\u793A\u8FDB\u5EA6\u6761\u7684\u76EE\u6807\u8FDB\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 30 }}"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"text"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="kuan-du-ding-zhi" tabindex="-1">\u5BBD\u5EA6\u5B9A\u5236</h3><p>\u901A\u8FC7<code>stroke-width</code>\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u5BBD\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5BBD\u5EA6\u5B9A\u5236"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yan-se-ding-zhi" tabindex="-1">\u989C\u8272\u5B9A\u5236</h3><p>\u901A\u8FC7<code>color</code>\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u989C\u8272\uFF0C<code>layer-color</code>\u5C5E\u6027\u6765\u63A7\u5236\u8F68\u9053\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-circle</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">layer-color</span>=<span class="hljs-string">"#eeeeee"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"#ee0a24"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"\u989C\u8272\u5B9A\u5236"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jian-bian-se" tabindex="-1">\u6E10\u53D8\u8272</h3><p><code>color</code>\u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u6765\u5B9A\u4E49\u6E10\u53D8\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"{{ gradientColor }}"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6E10\u53D8\u8272"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">25</span>,\n <span class="hljs-attr">gradientColor</span>: {\n <span class="hljs-string">'0%'</span>: <span class="hljs-string">'#ffd01e'</span>,\n <span class="hljs-string">'100%'</span>: <span class="hljs-string">'#ee0a24'</span>,\n },\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="ni-shi-zhen-fang-xiang" tabindex="-1">\u9006\u65F6\u9488\u65B9\u5411</h3><p>\u5C06<code>clockwise</code>\u8BBE\u7F6E\u4E3A<code>false</code>\uFF0C\u8FDB\u5EA6\u4F1A\u4ECE\u9006\u65F6\u9488\u65B9\u5411\u5F00\u59CB\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-circle</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"#07c160"</span>\n <span class="hljs-attr">clockwise</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"\u9006\u65F6\u9488"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="da-xiao-ding-zhi" tabindex="-1">\u5927\u5C0F\u5B9A\u5236</h3><p>\u901A\u8FC7<code>size</code>\u5C5E\u6027\u8BBE\u7F6E\u5706\u73AF\u76F4\u5F84\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"120"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5927\u5C0F\u5B9A\u5236"</span> /></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u76EE\u6807\u8FDB\u5EA6</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>type</td><td>\u6307\u5B9A canvas \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>2d</code></td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5706\u73AF\u76F4\u5F84\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>color</td><td>\u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u53EF\u4EE5\u5B9A\u4E49\u6E10\u53D8\u8272</td><td><em>string | object</em></td><td><code>#1989fa</code></td></tr><tr><td>layer-color</td><td>\u8F68\u9053\u989C\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>fill</td><td>\u586B\u5145\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>speed</td><td>\u52A8\u753B\u901F\u5EA6\uFF08\u5355\u4F4D\u4E3A value/s\uFF09</td><td><em>number</em></td><td><code>50</code></td></tr><tr><td>text</td><td>\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>stroke-width</td><td>\u8FDB\u5EA6\u6761\u5BBD\u5EA6</td><td><em>number</em></td><td><code>4</code></td></tr><tr><td>clockwise</td><td>\u662F\u5426\u987A\u65F6\u9488\u589E\u52A0</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u6587\u5B57\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>fill</code>\uFF0C\u63D2\u69FD\u5185\u5BB9\u4F1A\u88AB\u539F\u751F\u7EC4\u4EF6\u8986\u76D6</td></tr></tbody></table></div>', 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('<h1>Layout \u5E03\u5C40</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Layout \u63D0\u4F9B\u4E86<code>van-row</code>\u548C<code>van-col</code>\u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-row"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/row/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-col"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/col/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><p>Layout \u7EC4\u4EF6\u63D0\u4F9B\u4E86<code>24\u5217\u6805\u683C</code>\uFF0C\u901A\u8FC7\u5728<code>Col</code>\u4E0A\u6DFB\u52A0<code>span</code>\u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0<code>offset</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-row</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-row</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"4"</span>></span>span: 4<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"4"</span>></span>offset: 4, span: 10<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-row</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"12"</span>></span>offset: 12, span: 12<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="she-zhi-lie-yuan-su-jian-ju" tabindex="-1">\u8BBE\u7F6E\u5217\u5143\u7D20\u95F4\u8DDD</h3><p>\u901A\u8FC7<code>gutter</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-row</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">"20"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">"8"</span>></span>span: 8<span class="hljs-tag"></<span class="hljs-name">van-col</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-row</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="row-props" tabindex="-1">Row Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>gutter</td><td>\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09</td><td><em>string | number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="col-props" tabindex="-1">Col Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>span</td><td>\u5217\u5143\u7D20\u5BBD\u5EA6</td><td><em>string | number</em></td><td>-</td></tr><tr><td>offset</td><td>\u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BB</td><td><em>string | number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Collapse \u6298\u53E0\u9762\u677F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-collapse"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/collapse/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-collapse-item"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/collapse-item/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u63A7\u5236\u5C55\u5F00\u7684\u9762\u677F\u5217\u8868\uFF0C<code>activeNames</code>\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-collapse</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ activeNames }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u5FAE\u5546\u57CE"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\n \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u96F6\u552E"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\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 <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u7F8E\u4E1A"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">disabled</span>></span>\n \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6\n <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-collapse</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeNames</span>: [<span class="hljs-string">'1'</span>],\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shou-feng-qin" tabindex="-1">\u624B\u98CE\u7434</h3><p>\u901A\u8FC7<code>accordion</code>\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u624B\u98CE\u7434\u6A21\u5F0F\uFF0C\u6700\u591A\u5C55\u5F00\u4E00\u4E2A\u9762\u677F\uFF0C\u6B64\u65F6<code>activeName</code>\u4E3A\u5B57\u7B26\u4E32\u683C\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-collapse</span> <span class="hljs-attr">accordion</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ activeName }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u5FAE\u5546\u57CE"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\n \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u96F6\u552E"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\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 <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u7F8E\u4E1A"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"3"</span>></span>\n \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6\n <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-collapse</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeName</span>: <span class="hljs-string">'1'</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeName</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shi-jian-jian-ting" tabindex="-1">\u4E8B\u4EF6\u76D1\u542C</h3><p><code>van-collapse</code> \u63D0\u4F9B\u4E86 <code>change</code>, <code>open</code> \u548C <code>close</code> \u4E8B\u4EF6\u3002<code>change</code> \u4E8B\u4EF6\u5728\u9762\u677F\u5207\u6362\u65F6\u89E6\u53D1\uFF0C<code>open</code> \u4E8B\u4EF6\u5728\u9762\u677F\u5C55\u5F00\u65F6\u89E6\u53D1\uFF0C<code>close</code> \u4E8B\u4EF6\u5728\u9762\u677F\u5173\u95ED\u65F6\u89E6\u53D1\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-collapse</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ activeNames }}"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n <span class="hljs-attr">bind:open</span>=<span class="hljs-string">"onOpen"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u5FAE\u5546\u57CE"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\n \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u96F6\u552E"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\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 <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u7F8E\u4E1A"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"3"</span>></span>\n \u7EBF\u4E0A\u62D3\u5BA2\uFF0C\u968F\u65F6\u9884\u7EA6\uFF0C\u8D34\u5FC3\u987A\u624B\u7684\u5F00\u5355\u6536\u94F6\n <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-collapse</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeNames</span>: [<span class="hljs-string">'1'</span>],\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n <span class="hljs-title function_">onOpen</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`\u5C55\u5F00: <span class="hljs-subst">${event.detail}</span>`</span>);\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`\u5173\u95ED: <span class="hljs-subst">${event.detail}</span>`</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-biao-ti-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-collapse</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ activeNames }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>></span>\u6709\u8D5E\u5FAE\u5546\u57CE<span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"question-o"</span> /></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6709\u8D5E\u96F6\u552E"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"shop-o"</span>></span>\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 <span class="hljs-tag"></<span class="hljs-name">van-collapse-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-collapse</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeNames</span>: [<span class="hljs-string">'1'</span>],\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="collapse-props" tabindex="-1">Collapse Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u5C55\u5F00\u9762\u677F\u7684 name</td><td>\u975E\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A<em>(string | number)[]</em><br>\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A<em>string | number</em></td><td>-</td></tr><tr><td>accordion</td><td>\u662F\u5426\u5F00\u542F\u624B\u98CE\u7434\u6A21\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapse-event" tabindex="-1">Collapse Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u5207\u6362\u9762\u677F\u65F6\u89E6\u53D1</td><td>activeNames: <em>string | Array</em></td></tr><tr><td>open</td><td>\u5C55\u5F00\u9762\u677F\u65F6\u89E6\u53D1</td><td>currentName: <em>string | number</em></td></tr><tr><td>close</td><td>\u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1</td><td>currentName: <em>string | number</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapseitem-props" tabindex="-1">CollapseItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u503C</td><td><em>string | number</em></td><td><code>index</code></td></tr><tr><td>title</td><td>\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>icon</td><td>\u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>label</td><td>\u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606F</td><td><em>string</em></td><td>-</td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>is-link</td><td>\u662F\u5426\u5C55\u793A\u6807\u9898\u680F\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u9762\u677F</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapseitem-slot" tabindex="-1">CollapseItem Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u9762\u677F\u5185\u5BB9</td></tr><tr><td>value</td><td>\u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49<code>icon</code></td></tr><tr><td>title</td><td>\u81EA\u5B9A\u4E49<code>title</code></td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662F<code>arrow</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapse-wai-bu-yang-shi-lei" tabindex="-1">Collapse \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapseitem-wai-bu-yang-shi-lei" tabindex="-1">CollapseItem \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>content-class</td><td>\u5185\u5BB9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>\u5185\u7F6E\u6837\u5F0F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728 app.wxss \u4E2D\u5F15\u5165\u5185\u7F6E\u6837\u5F0F\u3002</p><pre><code class="language-css"><span class="hljs-keyword">@import</span> <span class="hljs-string">'@vant/weapp/common/index.wxss'</span>;\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="wen-zi-sheng-lue" tabindex="-1">\u6587\u5B57\u7701\u7565</h3><p>\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</p><pre><code class="language-xml"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-ellipsis"</span>></span>\n \u8FD9\u662F\u4E00\u6BB5\u5BBD\u5EA6\u9650\u5236 250px \u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002\n<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n<span class="hljs-comment"><!-- \u6700\u591A\u663E\u793A\u4E24\u884C --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-multi-ellipsis--l2"</span>></span>\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<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n<span class="hljs-comment"><!-- \u6700\u591A\u663E\u793A\u4E09\u884C --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-multi-ellipsis--l3"</span>></span>\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<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="1px-bian-kuang" tabindex="-1">1px \u8FB9\u6846</h3><p>\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</p><pre><code class="language-xml"><span class="hljs-comment"><!-- \u4E0A\u8FB9\u6846 --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-hairline--top"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n<span class="hljs-comment"><!-- \u4E0B\u8FB9\u6846 --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-hairline--bottom"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n<span class="hljs-comment"><!-- \u5DE6\u8FB9\u6846 --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-hairline--left"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n<span class="hljs-comment"><!-- \u53F3\u8FB9\u6846 --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-hairline--right"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n<span class="hljs-comment"><!-- \u4E0A\u4E0B\u8FB9\u6846 --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-hairline--top-bottom"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n<span class="hljs-comment"><!-- \u5168\u8FB9\u6846 --></span>\n<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-hairline--surround"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="quan-ju-zi-ti" tabindex="-1">\u5168\u5C40\u5B57\u4F53</h3><p>\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</p><pre><code class="language-css">page {\n <span class="hljs-attribute">font-family</span>: -apple-system, BlinkMacSystemFont, <span class="hljs-string">'Helvetica Neue'</span>, Helvetica,\n Segoe UI, Arial, Roboto, <span class="hljs-string">'PingFang SC'</span>, <span class="hljs-string">'miui'</span>, <span class="hljs-string">'Hiragino Sans GB'</span>, <span class="hljs-string">'Microsoft Yahei'</span>,\n sans-serif;\n}\n</code></pre></div>', 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('<h1>ConfigProvider \u5168\u5C40\u914D\u7F6E</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u914D\u7F6E Vant Weapp \u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F\uFF0C\u4ECE <code>v1.7.0</code> \u7248\u672C\u5F00\u59CB\u652F\u6301\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-config-provider"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/config-provider/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="ding-zhi-zhu-ti" tabindex="-1">\u5B9A\u5236\u4E3B\u9898</h2><div class="van-doc-card"><h3 id="jie-shao-1" tabindex="-1">\u4ECB\u7ECD</h3><p>Vant Weapp \u7EC4\u4EF6\u901A\u8FC7\u4E30\u5BCC\u7684 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS \u53D8\u91CF</a> \u6765\u7EC4\u7EC7\u6837\u5F0F\uFF0C\u901A\u8FC7\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u5B9E\u73B0<strong>\u5B9A\u5236\u4E3B\u9898\u3001\u52A8\u6001\u5207\u6362\u4E3B\u9898</strong>\u7B49\u6548\u679C\u3002</p><h4 id="shi-li" tabindex="-1">\u793A\u4F8B</h4><p>\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u67E5\u770B\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u53EF\u4EE5\u770B\u5230 <code>.van-button--primary</code> \u7C7B\u540D\u4E0A\u5B58\u5728\u4EE5\u4E0B\u53D8\u91CF\uFF1A</p><pre><code class="language-css"><span class="hljs-selector-class">.van-button--primary</span> {\n <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--button-primary-color, <span class="hljs-number">#fff</span>);\n <span class="hljs-attribute">background</span>: <span class="hljs-built_in">var</span>(--button-primary-background-color, <span class="hljs-number">#07c160</span>);\n <span class="hljs-attribute">border</span>: <span class="hljs-built_in">var</span>(--button-border-width, <span class="hljs-number">1px</span>) solid <span class="hljs-built_in">var</span>(\n --button-primary-border-color,\n <span class="hljs-number">#07c160</span>\n );\n}\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-css-bian-liang" tabindex="-1">\u81EA\u5B9A\u4E49 CSS \u53D8\u91CF</h3><h4 id="tong-guo-css-fu-gai" tabindex="-1">\u901A\u8FC7 CSS \u8986\u76D6</h4><p>\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</p><pre><code class="language-css"><span class="hljs-comment">/* \u6DFB\u52A0\u8FD9\u6BB5\u6837\u5F0F\u540E\uFF0CPrimary Button \u4F1A\u53D8\u6210\u7EA2\u8272 */</span>\npage {\n <span class="hljs-attr">--button-primary-background-color</span>: red;\n}\n</code></pre><h4 id="tong-guo-configprovider-fu-gai" tabindex="-1">\u901A\u8FC7 ConfigProvider \u8986\u76D6</h4><p><code>ConfigProvider</code> \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 <code>ConfigProvider</code> \u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 <code>theme-vars</code> \u5C5E\u6027\u6765\u914D\u7F6E\u4E00\u4E9B\u4E3B\u9898\u53D8\u91CF\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-config-provider</span> <span class="hljs-attr">theme-vars</span>=<span class="hljs-string">"{{ themeVars }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u8BC4\u5206"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"input"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">model:value</span>=<span class="hljs-string">"{{ rate }}"</span>\n <span class="hljs-attr">data-key</span>=<span class="hljs-string">"rate"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u6ED1\u5757"</span> <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"input"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-slider</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ slider }}"</span>\n <span class="hljs-attr">data-key</span>=<span class="hljs-string">"slider"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin: 16px"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">block</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u63D0\u4EA4<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-config-provider</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Page</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'../../common/page'</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">rate</span>: <span class="hljs-number">4</span>,\n <span class="hljs-attr">slider</span>: <span class="hljs-number">50</span>,\n <span class="hljs-attr">themeVars</span>: {\n <span class="hljs-attr">rateIconFullColor</span>: <span class="hljs-string">'#07c160'</span>,\n <span class="hljs-attr">sliderBarHeight</span>: <span class="hljs-string">'4px'</span>,\n <span class="hljs-attr">sliderButtonWidth</span>: <span class="hljs-string">'20px'</span>,\n <span class="hljs-attr">sliderButtonHeight</span>: <span class="hljs-string">'20px'</span>,\n <span class="hljs-attr">sliderActiveBackgroundColor</span>: <span class="hljs-string">'#07c160'</span>,\n <span class="hljs-attr">buttonPrimaryBorderColor</span>: <span class="hljs-string">'#07c160'</span>,\n <span class="hljs-attr">buttonPrimaryBackgroundColor</span>: <span class="hljs-string">'#07c160'</span>,\n },\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { key } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n [key]: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>theme-vars</td><td>\u81EA\u5B9A\u4E49\u4E3B\u9898\u53D8\u91CF</td><td><em>object</em></td><td>-</td></tr></tbody></table></div>', 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('<h1>CountDown \u5012\u8BA1\u65F6</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5B9E\u65F6\u5C55\u793A\u5012\u8BA1\u65F6\u6570\u503C\uFF0C\u652F\u6301\u6BEB\u79D2\u7CBE\u5EA6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-count-down"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/count-down/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><p><code>time</code>\u5C5E\u6027\u8868\u793A\u5012\u8BA1\u65F6\u603B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-count-down</span> <span class="hljs-attr">time</span>=<span class="hljs-string">"{{ time }}"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">time</span>: <span class="hljs-number">30</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ge-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u683C\u5F0F</h3><p>\u901A\u8FC7<code>format</code>\u5C5E\u6027\u8BBE\u7F6E\u5012\u8BA1\u65F6\u6587\u672C\u7684\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-count-down</span> <span class="hljs-attr">time</span>=<span class="hljs-string">"{{ time }}"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"DD \u5929 HH \u65F6 mm \u5206 ss \u79D2"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="hao-miao-ji-xuan-ran" tabindex="-1">\u6BEB\u79D2\u7EA7\u6E32\u67D3</h3><p>\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6E<code>millisecond</code>\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-count-down</span> <span class="hljs-attr">millisecond</span> <span class="hljs-attr">time</span>=<span class="hljs-string">"{{ time }}"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"HH:mm:ss:SSS"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><p>\u8BBE\u7F6E<code>use-slot</code>\u5C5E\u6027\u540E\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5012\u8BA1\u65F6\u6837\u5F0F\uFF0C\u9700\u8981\u901A\u8FC7<code>bind:change</code>\u4E8B\u4EF6\u83B7\u53D6<code>timeData</code>\u5BF9\u8C61\u5E76\u81EA\u884C\u6E32\u67D3\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9\u8868\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-count-down</span> <span class="hljs-attr">use-slot</span> <span class="hljs-attr">time</span>=<span class="hljs-string">"{{ time }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>{{ timeData.hours }}<span class="hljs-tag"></<span class="hljs-name">text</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>{{ timeData.minutes }}<span class="hljs-tag"></<span class="hljs-name">text</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>{{ timeData.seconds }}<span class="hljs-tag"></<span class="hljs-name">text</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-count-down</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">time</span>: <span class="hljs-number">30</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span>,\n <span class="hljs-attr">timeData</span>: {},\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">timeData</span>: e.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.item</span> {\n <span class="hljs-attribute">display</span>: inline-block;\n <span class="hljs-attribute">width</span>: <span class="hljs-number">22px</span>;\n <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">5px</span>;\n <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;\n <span class="hljs-attribute">text-align</span>: center;\n <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1989fa</span>;\n <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">2px</span>;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="shou-dong-kong-zhi" tabindex="-1">\u624B\u52A8\u63A7\u5236</h3><p>\u901A\u8FC7 <code>selectComponent</code> \u9009\u62E9\u5668\u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u53EF\u4EE5\u8C03\u7528<code>start</code>\u3001<code>pause</code>\u3001<code>reset</code>\u65B9\u6CD5\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-count-down</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"control-count-down"</span>\n <span class="hljs-attr">millisecond</span>\n <span class="hljs-attr">time</span>=<span class="hljs-string">"{{ 3000 }}"</span>\n <span class="hljs-attr">auto-start</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">format</span>=<span class="hljs-string">"ss:SSS"</span>\n <span class="hljs-attr">bind:finish</span>=<span class="hljs-string">"finished"</span>\n/></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">"3"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5F00\u59CB"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"play-circle-o"</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">"start"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6682\u505C"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"pause-circle-o"</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">"pause"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u91CD\u7F6E"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"replay"</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">"reset"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">start</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> countDown = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">'.control-count-down'</span>);\n countDown.<span class="hljs-title function_">start</span>();\n },\n\n <span class="hljs-title function_">pause</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> countDown = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">'.control-count-down'</span>);\n countDown.<span class="hljs-title function_">pause</span>();\n },\n\n <span class="hljs-title function_">reset</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> countDown = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">'.control-count-down'</span>);\n countDown.<span class="hljs-title function_">reset</span>();\n },\n\n <span class="hljs-title function_">finished</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u5012\u8BA1\u65F6\u7ED3\u675F'</span>);\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>time</td><td>\u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2</td><td><em>number</em></td><td>-</td></tr><tr><td>format</td><td>\u65F6\u95F4\u683C\u5F0F\uFF0CDD-\u65E5\uFF0CHH-\u65F6\uFF0Cmm-\u5206\uFF0Css-\u79D2\uFF0CSSS-\u6BEB\u79D2</td><td><em>string</em></td><td><code>HH:mm:ss</code></td></tr><tr><td>auto-start</td><td>\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>millisecond</td><td>\u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6837\u5F0F\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>finish</td><td>\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>change</td><td>\u65F6\u95F4\u53D8\u5316\u65F6\u89E6\u53D1\uFF0C\u4EC5\u5728\u5F00\u542F<code>use-slot</code>\u540E\u624D\u4F1A\u89E6\u53D1</td><td>timeData</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="timedata-ge-shi" tabindex="-1">timeData \u683C\u5F0F</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>days</td><td>\u5269\u4F59\u5929\u6570</td><td><em>number</em></td></tr><tr><td>hours</td><td>\u5269\u4F59\u5C0F\u65F6</td><td><em>number</em></td></tr><tr><td>minutes</td><td>\u5269\u4F59\u5206\u949F</td><td><em>number</em></td></tr><tr><td>seconds</td><td>\u5269\u4F59\u79D2\u6570</td><td><em>number</em></td></tr><tr><td>milliseconds</td><td>\u5269\u4F59\u6BEB\u79D2</td><td><em>number</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 CountDown \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>start</td><td>-</td><td>-</td><td>\u5F00\u59CB\u5012\u8BA1\u65F6</td></tr><tr><td>pause</td><td>-</td><td>-</td><td>\u6682\u505C\u5012\u8BA1\u65F6</td></tr><tr><td>reset</td><td>-</td><td>-</td><td>\u91CD\u8BBE\u5012\u8BA1\u65F6\uFF0C\u82E5<code>auto-start</code>\u4E3A<code>true</code>\uFF0C\u91CD\u8BBE\u540E\u4F1A\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6</td></tr></tbody></table></div>', 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('<h1>DatetimePicker \u65F6\u95F4\u9009\u62E9</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u9009\u62E9\u65F6\u95F4\uFF0C\u652F\u6301\u65E5\u671F\u3001\u65F6\u5206\u7B49\u65F6\u95F4\u7EF4\u5EA6\uFF0C\u901A\u5E38\u4E0E <a href="#/popup">\u5F39\u51FA\u5C42</a> \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-datetime-picker"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/datetime-picker/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="xuan-ze-wan-zheng-shi-jian" tabindex="-1">\u9009\u62E9\u5B8C\u6574\u65F6\u95F4</h3><p><code>value</code> \u4E3A\u65F6\u95F4\u6233\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"datetime"</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ currentDate }}"</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">"{{ minDate }}"</span>\n <span class="hljs-attr">max-date</span>=<span class="hljs-string">"{{ maxDate }}"</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">"onInput"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">minHour</span>: <span class="hljs-number">10</span>,\n <span class="hljs-attr">maxHour</span>: <span class="hljs-number">20</span>,\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2019</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>).<span class="hljs-title function_">getTime</span>(),\n <span class="hljs-attr">currentDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-nian-yue-ri" tabindex="-1">\u9009\u62E9\u65E5\u671F\uFF08\u5E74\u6708\u65E5\uFF09</h3><p><code>value</code> \u4E3A\u65F6\u95F4\u6233\uFF0C\u901A\u8FC7\u4F20\u5165 <code>formatter</code> \u51FD\u6570\u5BF9\u9009\u9879\u6587\u5B57\u8FDB\u884C\u5904\u7406\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"date"</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ currentDate }}"</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">"onInput"</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">"{{ minDate }}"</span>\n <span class="hljs-attr">formatter</span>=<span class="hljs-string">"{{ formatter }}"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),\n <span class="hljs-title function_">formatter</span>(<span class="hljs-params">type, value</span>) {\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">'year'</span>) {\n <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${value}</span>\u5E74`</span>;\n }\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">'month'</span>) {\n <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${value}</span>\u6708`</span>;\n }\n <span class="hljs-keyword">return</span> value;\n },\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-nian-yue" tabindex="-1">\u9009\u62E9\u65E5\u671F\uFF08\u5E74\u6708\uFF09</h3><p><code>value</code> \u4E3A\u65F6\u95F4\u6233\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"year-month"</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ currentDate }}"</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">"{{ minDate }}"</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">"onInput"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-shi-jian" tabindex="-1">\u9009\u62E9\u65F6\u95F4</h3><p><code>value</code> \u4E3A\u5B57\u7B26\u4E32\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"time"</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ currentDate }}"</span>\n <span class="hljs-attr">min-hour</span>=<span class="hljs-string">"{{ minHour }}"</span>\n <span class="hljs-attr">max-hour</span>=<span class="hljs-string">"{{ maxHour }}"</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">"onInput"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentDate</span>: <span class="hljs-string">'12:00'</span>,\n <span class="hljs-attr">minHour</span>: <span class="hljs-number">10</span>,\n <span class="hljs-attr">maxHour</span>: <span class="hljs-number">20</span>,\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-xiang-guo-lu-qi" tabindex="-1">\u9009\u9879\u8FC7\u6EE4\u5668</h3><p>\u901A\u8FC7\u4F20\u5165 <code>filter</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"time"</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ currentDate }}"</span>\n <span class="hljs-attr">filter</span>=<span class="hljs-string">"{{ filter }}"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentDate</span>: <span class="hljs-string">'12:00'</span>,\n <span class="hljs-title function_">filter</span>(<span class="hljs-params">type, options</span>) {\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">'minute'</span>) {\n <span class="hljs-keyword">return</span> options.<span class="hljs-title function_">filter</span>(<span class="hljs-function">(<span class="hljs-params">option</span>) =></span> option % <span class="hljs-number">5</span> === <span class="hljs-number">0</span>);\n }\n\n <span class="hljs-keyword">return</span> options;\n },\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>type</td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>date</code> <code>time</code> <code>year-month</code> <br> <strong>\u4E0D\u5EFA\u8BAE\u52A8\u6001\u4FEE\u6539</strong></td><td><em>string</em></td><td><code>datetime</code></td></tr><tr><td>min-date</td><td>\u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949F</td><td><em>number</em></td><td>\u5341\u5E74\u524D</td></tr><tr><td>max-date</td><td>\u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949F</td><td><em>number</em></td><td>\u5341\u5E74\u540E</td></tr><tr><td>min-hour</td><td>\u53EF\u9009\u7684\u6700\u5C0F\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>max-hour</td><td>\u53EF\u9009\u7684\u6700\u5927\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>23</code></td></tr><tr><td>min-minute</td><td>\u53EF\u9009\u7684\u6700\u5C0F\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>max-minute</td><td>\u53EF\u9009\u7684\u6700\u5927\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>59</code></td></tr><tr><td>filter</td><td>\u9009\u9879\u8FC7\u6EE4\u51FD\u6570</td><td><em>(type, values) => values</em></td><td>-</td></tr><tr><td>formatter</td><td>\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570</td><td><em>(type, value) => value</em></td><td>-</td></tr><tr><td>title</td><td>\u9876\u90E8\u680F\u6807\u9898</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>show-toolbar</td><td>\u662F\u5426\u663E\u793A\u9876\u90E8\u680F</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>item-height</td><td>\u9009\u9879\u9AD8\u5EA6</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>visible-item-count</td><td>\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570</td><td><em>number</em></td><td><code>6</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>input</td><td>\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D value</td></tr><tr><td>change</td><td>\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u7EC4\u4EF6\u5B9E\u4F8B</td></tr><tr><td>confirm</td><td>\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D value</td></tr><tr><td>cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="change-shi-jian" tabindex="-1">change \u4E8B\u4EF6</h3><p>\u5728<code>change</code>\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</p><table><thead><tr><th>\u51FD\u6570</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>getColumnValue(index)</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C</td></tr><tr><td>setColumnValue(index, value)</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C</td></tr><tr><td>getColumnValues(index)</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C</td></tr><tr><td>setColumnValues(index, values)</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C</td></tr><tr><td>getValues()</td><td>\u83B7\u53D6\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C\uFF0C\u8FD4\u56DE\u4E00\u4E2A\u6570\u7EC4</td></tr><tr><td>setValues(values)</td><td><code>values</code>\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u8BBE\u7F6E\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>active-class</td><td>\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>toolbar-class</td><td>\u9876\u90E8\u680F\u6837\u5F0F\u7C7B</td></tr><tr><td>column-class</td><td>\u5217\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Dialog \u5F39\u51FA\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-dialog"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/dialog/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="xiao-xi-ti-shi" tabindex="-1">\u6D88\u606F\u63D0\u793A</h3><p>\u7528\u4E8E\u63D0\u793A\u4E00\u4E9B\u6D88\u606F\uFF0C\u53EA\u5305\u542B\u4E00\u4E2A\u786E\u8BA4\u6309\u94AE\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-dialog"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/dialog/dialog'</span>;\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">'\u6807\u9898'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u5F39\u7A97\u5185\u5BB9'</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-comment">// on close</span>\n});\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u5F39\u7A97\u5185\u5BB9'</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-comment">// on close</span>\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xiao-xi-que-ren" tabindex="-1">\u6D88\u606F\u786E\u8BA4</h3><p>\u7528\u4E8E\u786E\u8BA4\u6D88\u606F\uFF0C\u5305\u542B\u53D6\u6D88\u548C\u786E\u8BA4\u6309\u94AE\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-dialog"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/dialog/dialog'</span>;\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">'\u6807\u9898'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u5F39\u7A97\u5185\u5BB9'</span>,\n})\n .<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-comment">// on confirm</span>\n })\n .<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-comment">// on cancel</span>\n });\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-an-niu-feng-ge" tabindex="-1">\u5706\u89D2\u6309\u94AE\u98CE\u683C</h3><p>\u5C06 theme \u9009\u9879\u8BBE\u7F6E\u4E3A <code>round-button</code> \u53EF\u4EE5\u5C55\u793A\u5706\u89D2\u6309\u94AE\u98CE\u683C\u7684\u5F39\u7A97\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-dialog"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/dialog/dialog'</span>;\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">'\u6807\u9898'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u5F39\u7A97\u5185\u5BB9'</span>,\n <span class="hljs-attr">theme</span>: <span class="hljs-string">'round-button'</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-comment">// on close</span>\n});\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u5F39\u7A97\u5185\u5BB9'</span>,\n <span class="hljs-attr">theme</span>: <span class="hljs-string">'round-button'</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-comment">// on close</span>\n});\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-guan-bi" tabindex="-1">\u5F02\u6B65\u5173\u95ED</h3><p>\u901A\u8FC7 <code>beforeClose</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-dialog"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/dialog/dialog'</span>;\n\n<span class="hljs-keyword">const</span> <span class="hljs-title function_">beforeClose</span> = (<span class="hljs-params">action</span>) => <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-keyword">if</span> (action === <span class="hljs-string">'confirm'</span>) {\n <span class="hljs-title function_">resolve</span>(<span class="hljs-literal">true</span>);\n } <span class="hljs-keyword">else</span> {\n <span class="hljs-comment">// \u62E6\u622A\u53D6\u6D88\u64CD\u4F5C</span>\n <span class="hljs-title function_">resolve</span>(<span class="hljs-literal">false</span>);\n }\n }, <span class="hljs-number">1000</span>);\n});\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">'\u6807\u9898'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u5F39\u7A97\u5185\u5BB9'</span>\n beforeClose\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zu-jian-diao-yong" tabindex="-1">\u7EC4\u4EF6\u8C03\u7528</h3><p>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dialog</span>\n <span class="hljs-attr">use-slot</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">show-cancel-button</span>\n <span class="hljs-attr">confirm-button-open-type</span>=<span class="hljs-string">"getUserInfo"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n <span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">"getUserInfo"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://img.yzcdn.cn/1.jpg"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-dialog</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">getUserInfo</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>Dialog</td><td><code>options</code></td><td><code>Promise</code></td><td>\u5C55\u793A\u5F39\u7A97</td></tr><tr><td>Dialog.alert</td><td><code>options</code></td><td><code>Promise</code></td><td>\u5C55\u793A\u6D88\u606F\u63D0\u793A\u5F39\u7A97</td></tr><tr><td>Dialog.confirm</td><td><code>options</code></td><td><code>Promise</code></td><td>\u5C55\u793A\u6D88\u606F\u786E\u8BA4\u5F39\u7A97</td></tr><tr><td>Dialog.setDefaultOptions</td><td><code>options</code></td><td><code>void</code></td><td>\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548</td></tr><tr><td>Dialog.resetDefaultOptions</td><td>-</td><td><code>void</code></td><td>\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548</td></tr><tr><td>Dialog.close</td><td>-</td><td><code>void</code></td><td>\u5173\u95ED\u5F39\u7A97</td></tr><tr><td>Dialog.stopLoading</td><td>-</td><td><code>void</code></td><td>\u505C\u6B62\u6309\u94AE\u7684\u52A0\u8F7D\u72B6\u6001</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><p>\u901A\u8FC7\u51FD\u6570\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>320px</code></td></tr><tr><td>message</td><td>\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7<code>\\n</code>\u6362\u884C</td><td><em>string</em></td><td>-</td></tr><tr><td>messageAlign</td><td>\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A<code>left</code> <code>right</code></td><td><em>string</em></td><td><code>center</code></td></tr><tr><td>theme</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A<code>round-button</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>zIndex</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>className</td><td>\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548</td><td><em>string</em></td><td>\u2018\u2019</td></tr><tr><td>customStyle</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>\u2018\u2019</td></tr><tr><td>selector</td><td>\u81EA\u5B9A\u4E49\u9009\u62E9\u5668</td><td><em>string</em></td><td><code>van-dialog</code></td></tr><tr><td>showConfirmButton</td><td>\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>showCancelButton</td><td>\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>confirmButtonText</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancelButtonText</td><td>\u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>overlayStyle</td><td>\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F</td><td><em>object</em></td><td>-</td></tr><tr><td>closeOnClickOverlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>asyncClose</td><td>\u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 <code>beforeClose</code> \u5C5E\u6027\u4EE3\u66FF</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>beforeClose</td><td>\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE <code>false</code> \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise</td><td><em>(action) => boolean | Promise<boolean></em></td><td>-</td></tr><tr><td>context</td><td>\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587</td><td><em>object</em></td><td>\u5F53\u524D\u9875\u9762</td></tr><tr><td>transition</td><td>\u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3A<code>fade</code> <code>none</code></td><td><em>string</em></td><td><code>scale</code></td></tr><tr><td>confirmButtonOpenType</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="opentype-options" tabindex="-1">OpenType Options</h3><p>\u4F7F\u7528<code>confirmButtonOpenType</code>\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B\u9009\u9879\uFF1A</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>open-type</th></tr></thead><tbody><tr><td>appParameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td><td><code>launchApp</code></td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td><td><code>getUserInfo</code></td></tr><tr><td>sessionFrom</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>businessId</td><td>\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id</td><td><em>number</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>sendMessageTitle</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td><td><code>contact</code></td></tr><tr><td>sendMessagePath</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td><td><code>contact</code></td></tr><tr><td>sendMessageImg</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td><td><code>contact</code></td></tr><tr><td>showMessageCard</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td><td><code>contact</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><p>\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props:</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u5F39\u7A97</td><td><em>boolean</em></td><td>-</td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>320px</code></td></tr><tr><td>message</td><td>\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7<code>\\n</code>\u6362\u884C</td><td><em>string</em></td><td>-</td></tr><tr><td>theme</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A<code>round-button</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>message-align</td><td>\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A<code>left</code> <code>right</code></td><td><em>string</em></td><td><code>center</code></td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>class-name</td><td>\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548</td><td><em>string</em></td><td>\u2018\u2019</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>\u2018\u2019</td></tr><tr><td>show-confirm-button</td><td>\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-cancel-button</td><td>\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>confirm-button-color</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>cancel-button-color</td><td>\u53D6\u6D88\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272</td><td><em>string</em></td><td><code>#333</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>overlay-style <code>v1.0.0</code></td><td>\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F</td><td><em>object</em></td><td>-</td></tr><tr><td>close-on-click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-title-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6807\u9898\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>async-close</td><td>\u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 <code>beforeClose</code> \u5C5E\u6027\u4EE3\u66FF</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>before-close</td><td>\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE <code>false</code> \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise</td><td><em>(action) => boolean | Promise<boolean></em></td><td>-</td></tr><tr><td>transition</td><td>\u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3A<code>fade</code></td><td><em>string</em></td><td><code>scale</code></td></tr><tr><td>confirm-button-open-type</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="opentype-props" tabindex="-1">OpenType Props</h3><p>\u4F7F\u7528<code>confirm-button-open-type</code>\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>open-type</th></tr></thead><tbody><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td><td><code>launchApp</code></td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td><td><code>getUserInfo</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>business-id</td><td>\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id</td><td><em>number</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td><td><code>contact</code></td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td><td><code>contact</code></td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td><td><code>contact</code></td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td><td><code>contact</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:close</td><td>\u5F39\u7A97\u5173\u95ED\u65F6\u89E6\u53D1</td><td>event.detail: \u89E6\u53D1\u5173\u95ED\u4E8B\u4EF6\u7684\u6765\u6E90\uFF0C<br>\u679A\u4E3E\u4E3A<code>confirm</code>,<code>cancel</code>,<code>overlay</code></td></tr><tr><td>bind:confirm</td><td>\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C<br>\u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo</td><td>-</td></tr><tr><td>bind:contact</td><td>\u5BA2\u670D\u6D88\u606F\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:error</td><td>\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:opensetting</td><td>\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49<code>title</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr></tbody></table></div>', 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('<h1>Divider \u5206\u5272\u7EBF</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C06\u5185\u5BB9\u5206\u9694\u4E3A\u591A\u4E2A\u533A\u57DF\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-divider"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/divider/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-divider</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-hairline" tabindex="-1">\u4F7F\u7528 hairline</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">hairline</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xu-xian" tabindex="-1">\u865A\u7EBF</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">dashed</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="wen-ben-wei-zhi" tabindex="-1">\u6587\u672C\u4F4D\u7F6E</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">"center"</span>></span>\u6587\u672C<span class="hljs-tag"></<span class="hljs-name">van-divider</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">"left"</span>></span>\u6587\u672C<span class="hljs-tag"></<span class="hljs-name">van-divider</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">"right"</span>></span>\u6587\u672C<span class="hljs-tag"></<span class="hljs-name">van-divider</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shu-xing" tabindex="-1">\u81EA\u5B9A\u4E49\u5C5E\u6027</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">"center"</span> <span class="hljs-attr">textColor</span>=<span class="hljs-string">"#1989fa"</span>></span>\u6587\u672C\u989C\u8272<span class="hljs-tag"></<span class="hljs-name">van-divider</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">"center"</span> <span class="hljs-attr">borderColor</span>=<span class="hljs-string">"#1989fa"</span>></span>\n border \u989C\u8272\n<span class="hljs-tag"></<span class="hljs-name">van-divider</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">"center"</span> <span class="hljs-attr">fontSize</span>=<span class="hljs-string">"18"</span>></span>\u5B57\u4F53\u5927\u5C0F<span class="hljs-tag"></<span class="hljs-name">van-divider</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-divider</span>\n <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">"center"</span>\n <span class="hljs-attr">customStyle</span>=<span class="hljs-string">"color: #1989fa; border-color: #1989fa; font-size: 18px;"</span>\n></span>\n \u6587\u672C\n<span class="hljs-tag"></<span class="hljs-name">van-divider</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>dashed</td><td>\u865A\u7EBF</td><td><em>boolean</em></td><td>false</td></tr><tr><td>hairline</td><td>\u7EC6\u7EBF</td><td><em>boolean</em></td><td>false</td></tr><tr><td>content-position</td><td>\u6587\u672C\u4F4D\u7F6E\uFF0C<code>left</code> <code>center</code> <code>right</code></td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>\u9ED8\u8BA4</td><td>\u81EA\u5B9A\u4E49\u6587\u672C\u5185\u5BB9</td></tr></tbody></table></div>', 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('<h1>DropdownMenu \u4E0B\u62C9\u83DC\u5355</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5411\u4E0B\u5F39\u51FA\u7684\u83DC\u5355\u5217\u8868\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-dropdown-menu"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/dropdown-menu/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-dropdown-item"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/dropdown-item/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dropdown-menu</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value1 }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option1 }}"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value2 }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option2 }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-dropdown-menu</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">option1</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u5168\u90E8\u5546\u54C1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u65B0\u6B3E\u5546\u54C1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6D3B\u52A8\u5546\u54C1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">2</span> },\n ],\n <span class="hljs-attr">option2</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u9ED8\u8BA4\u6392\u5E8F'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'a'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u597D\u8BC4\u6392\u5E8F'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'b'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u9500\u91CF\u6392\u5E8F'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'c'</span> },\n ],\n <span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">value2</span>: <span class="hljs-string">'a'</span>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-cai-dan-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dropdown-menu</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value1 }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option1 }}"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"{{ itemTitle }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"{{ switchTitle1 }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-switch</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">"right-icon"</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">"24px"</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 26px"</span>\n <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ switch1 }}"</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#ee0a24"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onSwitch1Change"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"{{ switchTitle2 }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-switch</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">"right-icon"</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">"24px"</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 26px"</span>\n <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ switch2 }}"</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#ee0a24"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onSwitch2Change"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 5px 16px;"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">block</span> <span class="hljs-attr">round</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onConfirm"</span>></span>\n \u786E\u8BA4\n <span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-dropdown-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-dropdown-menu</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">switchTitle1</span>: <span class="hljs-string">'\u5305\u90AE'</span>,\n <span class="hljs-attr">switchTitle2</span>: <span class="hljs-string">'\u56E2\u8D2D'</span>,\n <span class="hljs-attr">itemTitle</span>: <span class="hljs-string">'\u7B5B\u9009'</span>,\n <span class="hljs-attr">option1</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u5168\u90E8\u5546\u54C1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u65B0\u6B3E\u5546\u54C1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6D3B\u52A8\u5546\u54C1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">2</span> },\n ],\n <span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,\n },\n\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">'#item'</span>).<span class="hljs-title function_">toggle</span>();\n },\n\n <span class="hljs-title function_">onSwitch1Change</span>(<span class="hljs-params">{ detail }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">switch1</span>: detail });\n },\n\n <span class="hljs-title function_">onSwitch2Change</span>(<span class="hljs-params">{ detail }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">switch2</span>: detail });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xuan-zhong-zhuang-tai-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dropdown-menu</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#1989fa"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value1 }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option1 }}"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value2 }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option2 }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-dropdown-menu</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xiang-shang-zhan-kai" tabindex="-1">\u5411\u4E0A\u5C55\u5F00</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dropdown-menu</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"up"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value1 }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option1 }}"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value2 }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option2 }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-dropdown-menu</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-cai-dan" tabindex="-1">\u7981\u7528\u83DC\u5355</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-dropdown-menu</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value1 }}"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option1 }}"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value2 }}"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ option2 }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-dropdown-menu</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="dropdownmenu-props" tabindex="-1">DropdownMenu Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>active-color</td><td>\u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>z-index</td><td>\u83DC\u5355\u680F z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>10</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2</td><td><em>number</em></td><td><code>200</code></td></tr><tr><td>direction</td><td>\u83DC\u5355\u5C55\u5F00\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A up</td><td><em>string</em></td><td><code>down</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-outside</td><td>\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8 menu \u540E\u5173\u95ED\u83DC\u5355</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-props" tabindex="-1">DropdownItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684 value</td><td><em>number | string</em></td><td>-</td></tr><tr><td>title</td><td>\u83DC\u5355\u9879\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u9009\u4E2D\u9879\u6587\u5B57</td></tr><tr><td>options</td><td>\u9009\u9879\u6570\u7EC4</td><td><em>Option[]</em></td><td><code>[]</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u83DC\u5355</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-class</td><td>\u6807\u9898\u989D\u5916\u7C7B\u540D</td><td><em>string</em></td><td>-</td></tr><tr><td>popup-style</td><td>\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-events" tabindex="-1">DropdownItem Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u70B9\u51FB\u9009\u9879\u5BFC\u81F4 value \u53D8\u5316\u65F6\u89E6\u53D1</td><td>value</td></tr><tr><td>open</td><td>\u6253\u5F00\u83DC\u5355\u680F\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>close</td><td>\u5173\u95ED\u83DC\u5355\u680F\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>opened</td><td>\u6253\u5F00\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>closed</td><td>\u5173\u95ED\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-fang-fa" tabindex="-1">DropdownItem \u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent(id) \u53EF\u8BBF\u95EE\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th></tr></thead><tbody><tr><td>toggle</td><td>\u5207\u6362\u83DC\u5355\u5C55\u793A\u72B6\u6001\uFF0C\u4F20<code>true</code>\u4E3A\u663E\u793A\uFF0C<code>false</code>\u4E3A\u9690\u85CF\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD</td><td>show?: boolean</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="option-shu-ju-jie-gou" tabindex="-1">Option \u6570\u636E\u7ED3\u6784</h3><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>text</td><td>\u6587\u5B57</td><td><em>string</em></td></tr><tr><td>value</td><td>\u6807\u8BC6\u7B26</td><td><em>number | string</em></td></tr><tr><td>icon</td><td>\u5DE6\u4FA7<a href="#/icon">\u56FE\u6807\u540D\u79F0</a>\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td></tr></tbody></table></div>', 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('<h1>Empty \u7A7A\u72B6\u6001</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7A7A\u72B6\u6001\u65F6\u7684\u5360\u4F4D\u63D0\u793A\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-empty"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/empty/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-empty</span> <span class="hljs-attr">description</span>=<span class="hljs-string">"\u63CF\u8FF0\u6587\u5B57"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-lei-xing" tabindex="-1">\u56FE\u7247\u7C7B\u578B</h3><p>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</p><pre><code class="language-html"><span class="hljs-comment"><!-- \u901A\u7528\u9519\u8BEF --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">"error"</span> <span class="hljs-attr">description</span>=<span class="hljs-string">"\u63CF\u8FF0\u6587\u5B57"</span> /></span>\n<span class="hljs-comment"><!-- \u7F51\u7EDC\u9519\u8BEF --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">"network"</span> <span class="hljs-attr">description</span>=<span class="hljs-string">"\u63CF\u8FF0\u6587\u5B57"</span> /></span>\n<span class="hljs-comment"><!-- \u641C\u7D22\u63D0\u793A --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">description</span>=<span class="hljs-string">"\u63CF\u8FF0\u6587\u5B57"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-pian" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u7247</h3><p>\u9700\u8981\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u5728 image \u5C5E\u6027\u4E2D\u4F20\u5165\u4EFB\u610F\u56FE\u7247 URL\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-empty</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">"custom-image"</span>\n <span class="hljs-attr">image</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/custom-empty-image.png"</span>\n <span class="hljs-attr">description</span>=<span class="hljs-string">"\u63CF\u8FF0\u6587\u5B57"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="di-bu-nei-rong" tabindex="-1">\u5E95\u90E8\u5185\u5BB9</h3><p>\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728 Empty \u7EC4\u4EF6\u7684\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-empty</span> <span class="hljs-attr">description</span>=<span class="hljs-string">"\u63CF\u8FF0\u6587\u5B57"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bottom-button"</span>></span>\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-empty</span>></span>\n\n<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css">\n <span class="hljs-selector-class">.bottom-button</span> {\n <span class="hljs-attribute">width</span>: <span class="hljs-number">160px</span>;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;\n }\n</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>image</td><td>\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>error</code> <code>network</code> <code>search</code>\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL</td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>description</td><td>\u56FE\u7247\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5E95\u90E8\u5185\u5BB9</td></tr><tr><td>image</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807</td></tr><tr><td>description</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57</td></tr></tbody></table></div>', 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('<h1>Field \u8F93\u5165\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u6237\u53EF\u4EE5\u5728\u6587\u672C\u6846\u5185\u8F93\u5165\u6216\u7F16\u8F91\u6587\u5B57\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-field"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/field/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u7528\u6237\u540D"</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-comment">// event.detail \u4E3A\u5F53\u524D\u8F93\u5165\u7684\u503C</span>\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shuang-xiang-bang-ding" tabindex="-1">\u53CC\u5411\u7ED1\u5B9A</h3><p>\u6700\u4F4E\u57FA\u7840\u5E93\u7248\u672C\u5728 2.9.3 \u4EE5\u4E0A\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html">\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A</a>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">model:value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u7528\u6237\u540D"</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-lei-xing" tabindex="-1">\u81EA\u5B9A\u4E49\u7C7B\u578B</h3><p>\u6839\u636E<code>type</code>\u5C5E\u6027\u5B9A\u4E49\u4E0D\u540C\u7C7B\u578B\u7684\u8F93\u5165\u6846\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ username }}"</span>\n <span class="hljs-attr">required</span>\n <span class="hljs-attr">clearable</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u7528\u6237\u540D"</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">"question-o"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u7528\u6237\u540D"</span>\n <span class="hljs-attr">bind:click-icon</span>=<span class="hljs-string">"onClickIcon"</span>\n /></span>\n\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ password }}"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u5BC6\u7801"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u5BC6\u7801"</span>\n <span class="hljs-attr">required</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-shu-ru-kuang" tabindex="-1">\u7981\u7528\u8F93\u5165\u6846</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"\u8F93\u5165\u6846\u5DF2\u7981\u7528"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u7528\u6237\u540D"</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">"contact"</span>\n <span class="hljs-attr">disabled</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="cuo-wu-ti-shi" tabindex="-1">\u9519\u8BEF\u63D0\u793A</h3><p>\u901A\u8FC7<code>error</code>\u6216\u8005<code>error-message</code>\u5C5E\u6027\u589E\u52A0\u5BF9\u5E94\u7684\u9519\u8BEF\u63D0\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ username }}"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u7528\u6237\u540D"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u7528\u6237\u540D"</span>\n <span class="hljs-attr">error</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ phone }}"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u624B\u673A\u53F7"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u624B\u673A\u53F7"</span>\n <span class="hljs-attr">error-message</span>=<span class="hljs-string">"\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF"</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="nei-rong-dui-qi-fang-shi" tabindex="-1">\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>input-align</code>\u5C5E\u6027\u8BBE\u7F6E\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ username3 }}"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u7528\u6237\u540D"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u7528\u6237\u540D"</span>\n <span class="hljs-attr">input-align</span>=<span class="hljs-string">"right"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-du-zi-gua-ying" tabindex="-1">\u9AD8\u5EA6\u81EA\u9002\u5E94</h3><p>\u5BF9\u4E8E textarea\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>autosize</code>\u5C5E\u6027\u8BBE\u7F6E\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ message }}"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u7559\u8A00"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"textarea"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u7559\u8A00"</span>\n <span class="hljs-attr">autosize</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="cha-ru-an-niu" tabindex="-1">\u63D2\u5165\u6309\u94AE</h3><p>\u901A\u8FC7 button slot \u53EF\u4EE5\u5728\u8F93\u5165\u6846\u5C3E\u90E8\u63D2\u5165\u6309\u94AE\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ sms }}"</span>\n <span class="hljs-attr">center</span>\n <span class="hljs-attr">clearable</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u77ED\u4FE1\u9A8C\u8BC1\u7801"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801"</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">use-button-slot</span>\n ></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\n \u53D1\u9001\u9A8C\u8BC1\u7801\n <span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n</code></pre></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="zhen-ji-shang-wei-shi-me-hui-chu-xian-ju-jiao-shi-placeholder-jia-cu-shan-shuo-de-xian-xiang" tabindex="-1">\u771F\u673A\u4E0A\u4E3A\u4EC0\u4E48\u4F1A\u51FA\u73B0\u805A\u7126\u65F6 placeholder \u52A0\u7C97\u3001\u95EA\u70C1\u7684\u73B0\u8C61\uFF1F</h3><p>\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</p><p>\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B<a href="https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97">\u5FAE\u4FE1\u5F00\u653E\u793E\u533A</a>\u3002</p></div><div class="van-doc-card"><h3 id="zhen-ji-shang-placeholder-wei-shi-me-hui-gai-guo-popup-deng-qi-ta-zu-jian" tabindex="-1">\u771F\u673A\u4E0A placeholder \u4E3A\u4EC0\u4E48\u4F1A\u76D6\u8FC7 popup \u7B49\u5176\u5B83\u7EC4\u4EF6\uFF1F</h3><p>\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<a href="https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html">\u539F\u751F\u7EC4\u4EF6\u8BF4\u660E</a>\u3002</p></div><div class="van-doc-card"><h3 id="textarea-de-placeholder-zai-zhen-ji-shang-wei-shi-me-hui-pian-yi" tabindex="-1">textarea \u7684 placeholder \u5728\u771F\u673A\u4E0A\u4E3A\u4EC0\u4E48\u4F1A\u504F\u79FB\uFF1F</h3><p>\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 <code>padding</code>\uFF0C\u4E14\u65E0\u6CD5\u7F6E 0\u3002</p><p>\u540C\u65F6 <code>placeholder-style</code> \u5BF9 <code>vertical-align</code>\u3001<code>line-height</code> \u7B49\u5927\u91CF css \u5C5E\u6027\u90FD\u4E0D\u751F\u6548\u3002</p><p>\u8FD9\u4E00\u7CFB\u5217\u7684\u95EE\u9898\u5BFC\u81F4\u4E86 placeholder \u5728\u771F\u673A\u4E0A\u53EF\u80FD\u4F1A\u51FA\u73B0\u504F\u79FB\u3002</p><p>\u5FAE\u4FE1\u5DF2\u7ECF\u5728 <code>2.10.0</code> \u57FA\u7840\u5E93\u7248\u672C\u540E\u652F\u6301\u79FB\u9664\u9ED8\u8BA4\u7684 <code>padding</code>\uFF0C\u4F46\u4F4E\u7248\u672C\u4ECD\u6709\u95EE\u9898\u3002\u8BE6\u60C5\u53EF\u4EE5\u67E5\u770B <a href="https://developers.weixin.qq.com/community/develop/issue/96">\u5FAE\u4FE1\u5F00\u653E\u793E\u533A</a>\u3002</p></div><div class="van-doc-card"><h3 id="shou-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" tabindex="-1">\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</h3><p>\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 <code>blur</code> \u4E8B\u4EF6\u4E2D\u53D6\u5230\u8F93\u5165\u7684\u503C\u3002</p><p>\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B<a href="https://developers.weixin.qq.com/community/search?query=input%20%E6%89%8B%E5%86%99%E8%BE%93%E5%85%A5&page=1&block=1&random=1567079239098">\u5FAE\u4FE1\u5F00\u653E\u793E\u533A</a>\u3002</p></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>label</td><td>\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C</td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>large</code></td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u5F53\u524D\u8F93\u5165\u7684\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>type</td><td>\u53EF\u8BBE\u7F6E\u4E3A\u4EFB\u610F\u539F\u751F\u7C7B\u578B, \u5982 <code>number</code> <code>idcard</code> <code>textarea</code> <code>digit</code></td><td><em>string</em></td><td><code>text</code></td></tr><tr><td>fixed</td><td>\u5982\u679C type \u4E3A <code>textarea</code> \u4E14\u5728\u4E00\u4E2A <code>position:fixed</code> \u7684\u533A\u57DF\uFF0C\u9700\u8981\u663E\u793A\u6307\u5B9A\u5C5E\u6027 fixed \u4E3A true</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>focus</td><td>\u83B7\u53D6\u7126\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8F93\u5165\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>\u662F\u5426\u53EA\u8BFB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clearable</td><td>\u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>required</td><td>\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>center</td><td>\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>password</td><td>\u662F\u5426\u662F\u5BC6\u7801\u7C7B\u578B</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-width</td><td>\u6807\u9898\u5BBD\u5EA6</td><td><em>string</em></td><td><code>6.2em</code></td></tr><tr><td>maxlength</td><td>\u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>placeholder</td><td>\u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>placeholder-style</td><td>\u6307\u5B9A placeholder \u7684\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>is-link</td><td>\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>arrow-direction</td><td>\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code> <code>up</code> <code>down</code></td><td><em>string</em></td><td>-</td></tr><tr><td>show-word-limit</td><td>\u662F\u5426\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\uFF0C\u9700\u8981\u8BBE\u7F6E<code>maxlength</code>\u5C5E\u6027</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error</td><td>\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error-message</td><td>\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793A</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>error-message-align</td><td>\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>input-align</td><td>\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td><td><em>string</em></td><td><code>left</code></td></tr><tr><td>autosize</td><td>\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u53EA\u5BF9 textarea \u6709\u6548\uFF0C<br>\u53EF\u4F20\u5165\u5BF9\u8C61,\u5982 { maxHeight: 100, minHeight: 50 }\uFF0C<br>\u5355\u4F4D\u4E3A<code>px</code></td><td><em>boolean | object</em></td><td><code>false</code></td></tr><tr><td>left-icon</td><td>\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>right-icon</td><td>\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>confirm-type</td><td>\u8BBE\u7F6E\u952E\u76D8\u53F3\u4E0B\u89D2\u6309\u94AE\u7684\u6587\u5B57\uFF0C\u4EC5\u5728 type=\u2018text\u2019 \u65F6\u751F\u6548</td><td><em>string</em></td><td><code>done</code></td></tr><tr><td>confirm-hold</td><td>\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\u6548</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>hold-keyboard</td><td>focus \u65F6\uFF0C\u70B9\u51FB\u9875\u9762\u7684\u65F6\u5019\u4E0D\u6536\u8D77\u952E\u76D8</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>cursor-spacing</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u5E95\u90E8\u4E0E\u952E\u76D8\u7684\u8DDD\u79BB</td><td><em>number</em></td><td><code>50</code></td></tr><tr><td>adjust-position</td><td>\u952E\u76D8\u5F39\u8D77\u65F6\uFF0C\u662F\u5426\u81EA\u52A8\u4E0A\u63A8\u9875\u9762</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-confirm-bar</td><td>\u662F\u5426\u663E\u793A\u952E\u76D8\u4E0A\u65B9\u5E26\u6709\u201D\u5B8C\u6210\u201C\u6309\u94AE\u90A3\u4E00\u680F\uFF0C\u53EA\u5BF9 textarea \u6709\u6548</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>selection-start</td><td>\u5149\u6807\u8D77\u59CB\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-end \u642D\u914D\u4F7F\u7528</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>selection-end</td><td>\u5149\u6807\u7ED3\u675F\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-start \u642D\u914D\u4F7F\u7528</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>auto-focus</td><td>\u81EA\u52A8\u805A\u7126\uFF0C\u62C9\u8D77\u952E\u76D8</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disable-default-padding</td><td>\u662F\u5426\u53BB\u6389 iOS \u4E0B\u7684\u9ED8\u8BA4\u5185\u8FB9\u8DDD\uFF0C\u53EA\u5BF9 textarea \u6709\u6548</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>cursor</td><td>\u6307\u5B9A focus \u65F6\u7684\u5149\u6807\u4F4D\u7F6E</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>clear-trigger <code>v1.8.4</code></td><td>\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0C<code>always</code> \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C<br><code>focus</code> \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A</td><td><em>string</em></td><td><code>focus</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:input</td><td>\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:change</td><td>\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:confirm</td><td>\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:click-icon</td><td>\u70B9\u51FB\u5C3E\u90E8\u56FE\u6807\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:focus</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1</td><td>event.detail.value: \u5F53\u524D\u8F93\u5165\u503C; <br>event.detail.height: \u952E\u76D8\u9AD8\u5EA6</td></tr><tr><td>bind:blur</td><td>\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1</td><td>event.detail.value: \u5F53\u524D\u8F93\u5165\u503C; <br>event.detail.cursor: \u6E38\u6807\u4F4D\u7F6E(\u5982\u679C <code>type</code> \u4E0D\u4E3A <code>textarea</code>\uFF0C\u503C\u4E3A <code>0</code>)</td></tr><tr><td>bind:clear</td><td>\u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-input</td><td>\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:linechange</td><td>\u8F93\u5165\u6846\u884C\u6570\u53D8\u5316\u65F6\u8C03\u7528\uFF0C\u53EA\u5BF9 textarea \u6709\u6548</td><td>event.detail = { height: 0, heightRpx: 0, lineCount: 0 }</td></tr><tr><td>bind:keyboardheightchange</td><td>\u952E\u76D8\u9AD8\u5EA6\u53D1\u751F\u53D8\u5316\u7684\u65F6\u5019\u89E6\u53D1\u6B64\u4E8B\u4EF6</td><td>event.detail = { height: height, duration: duration }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>label</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u6807\u7B7E\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>label</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>left-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807</td></tr><tr><td>button</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u6309\u94AE</td></tr><tr><td>input</td><td>\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</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>label-class</td><td>\u5DE6\u4FA7\u6587\u672C\u6837\u5F0F\u7C7B</td></tr><tr><td>input-class</td><td>\u8F93\u5165\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>right-icon-class</td><td>\u53F3\u4FA7\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>GoodsAction \u5546\u54C1\u5BFC\u822A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u4E3A\u5546\u54C1\u76F8\u5173\u64CD\u4F5C\u63D0\u4F9B\u4FBF\u6377\u4EA4\u4E92\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-goods-action"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/goods-action/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-goods-action-icon"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/goods-action-icon/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-goods-action-button"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/goods-action-button/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-goods-action</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"chat-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5BA2\u670D"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickIcon"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u8D2D\u7269\u8F66"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickIcon"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"\u52A0\u5165\u8D2D\u7269\u8F66"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>\n <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickButton"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u7ACB\u5373\u8D2D\u4E70"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickButton"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-goods-action</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClickIcon</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u70B9\u51FB\u56FE\u6807'</span>);\n },\n\n <span class="hljs-title function_">onClickButton</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u70B9\u51FB\u6309\u94AE'</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">\u63D0\u793A\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>info</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-goods-action</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"chat-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5BA2\u670D"</span> <span class="hljs-attr">dot</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u8D2D\u7269\u8F66"</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"5"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"shop-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5E97\u94FA"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u52A0\u5165\u8D2D\u7269\u8F66"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u7ACB\u5373\u8D2D\u4E70"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-goods-action</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE\u989C\u8272</h3><p>\u901A\u8FC7<code>color</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165<code>linear-gradient</code>\u6E10\u53D8\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-goods-action</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"chat-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5BA2\u670D"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u8D2D\u7269\u8F66"</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"5"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"shop-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5E97\u94FA"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#be99ff"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u52A0\u5165\u8D2D\u7269\u8F66"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#7232dd"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u7ACB\u5373\u8D2D\u4E70"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-goods-action</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="po-su-an-niu" tabindex="-1">\u6734\u7D20\u6309\u94AE</h3><p>\u901A\u8FC7<code>plain</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-goods-action</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"chat-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5BA2\u670D"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u8D2D\u7269\u8F66"</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"5"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"shop-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u5E97\u94FA"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#7232dd"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u52A0\u5165\u8D2D\u7269"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#7232dd"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u7ACB\u5373\u8D2D\u4E70"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-goods-action</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="goodsaction-props" tabindex="-1">GoodsAction Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionicon-props" tabindex="-1">GoodsActionIcon Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>text</td><td>\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u89C1<code>icon</code>\u7EC4\u4EF6</td><td><em>string</em></td><td>-</td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F</td><td><em>string | number</em></td><td>-</td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>id</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-props" tabindex="-1">GoodsActionButton Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>text</td><td>\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 <code>linear-gradient</code> \u6E10\u53D8\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>id</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>type</td><td>\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>warning</code> <code>danger</code></td><td><em>string</em></td><td><code>danger</code></td></tr><tr><td>plain</td><td>\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>size</td><td>\u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A <code>normal</code> <code>large</code> <code>small</code> <code>mini</code></td><td><em>string</em></td><td><code>normal</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionicon-slot" tabindex="-1">GoodsActionIcon Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>icon</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-slot" tabindex="-1">GoodsActionButton Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u6309\u94AE\u663E\u793A\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionicon-wai-bu-yang-shi-lei" tabindex="-1">GoodsActionIcon \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>text-class</td><td>\u6587\u5B57\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-wai-bu-yang-shi-lei" tabindex="-1">GoodsActionButton \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Grid \u5BAB\u683C</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-grid"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/grid/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-grid-item"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/grid-item/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><p>\u901A\u8FC7<code>icon</code>\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u5185\u7684\u56FE\u6807\uFF0C<code>text</code>\u5C5E\u6027\u8BBE\u7F6E\u6587\u5B57\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-lie-shu" tabindex="-1">\u81EA\u5B9A\u4E49\u5217\u6570</h3><p>\u9ED8\u8BA4\u4E00\u884C\u5C55\u793A\u56DB\u4E2A\u683C\u5B50\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>column-num</code>\u81EA\u5B9A\u4E49\u5217\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">"3"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{ 6 }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u5185\u5BB9</h3><p>\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u683C\u5B50\u5C55\u793A\u7684\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">border</span>=<span class="hljs-string">"{{ false }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">use-slot</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{ 3 }}"</span> <span class="hljs-attr">wx:for-item</span>=<span class="hljs-string">"index"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">image</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%; height: 90px;"</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-grid-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zheng-fang-xing-ge-zi" tabindex="-1">\u6B63\u65B9\u5F62\u683C\u5B50</h3><p>\u8BBE\u7F6E<code>square</code>\u5C5E\u6027\u540E\uFF0C\u683C\u5B50\u7684\u9AD8\u5EA6\u4F1A\u548C\u5BBD\u5EA6\u4FDD\u6301\u4E00\u81F4\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">square</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{ 8 }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ge-zi-jian-ju" tabindex="-1">\u683C\u5B50\u95F4\u8DDD</h3><p>\u901A\u8FC7<code>gutter</code>\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u8DDD\u79BB\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">"{{ 10 }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{ 8 }}"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="nei-rong-heng-pai" tabindex="-1">\u5185\u5BB9\u6A2A\u6392</h3><p>\u5C06<code>direction</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>horizontal</code>\uFF0C\u53EF\u4EE5\u8BA9\u5BAB\u683C\u7684\u5185\u5BB9\u5448\u6A2A\u5411\u6392\u5217\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"horizontal"</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">"2"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ye-mian-tiao-zhuan" tabindex="-1">\u9875\u9762\u8DF3\u8F6C</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>url</code>\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7<code>link-type</code>\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">"2"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">"home-o"</span>\n <span class="hljs-attr">link-type</span>=<span class="hljs-string">"navigateTo"</span>\n <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/dashboard/index"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"Navigate \u8DF3\u8F6C"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span>\n <span class="hljs-attr">link-type</span>=<span class="hljs-string">"reLaunch"</span>\n <span class="hljs-attr">url</span>=<span class="hljs-string">"/pages/dashboard/index"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"ReLaunch \u8DF3\u8F6C"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">\u63D0\u793A\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>badge</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">"2"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home-o"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> <span class="hljs-attr">dot</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6587\u5B57"</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">"99+"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-grid</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="grid-props" tabindex="-1">Grid Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>column-num</td><td>\u5217\u6570</td><td><em>number</em></td><td><code>4</code></td></tr><tr><td>icon-size <code>v1.3.2</code></td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string</em></td><td><code>28px</code></td></tr><tr><td>gutter</td><td>\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>center</td><td>\u662F\u5426\u5C06\u683C\u5B50\u5185\u5BB9\u5C45\u4E2D\u663E\u793A</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>square</td><td>\u662F\u5426\u5C06\u683C\u5B50\u56FA\u5B9A\u4E3A\u6B63\u65B9\u5F62</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u683C\u5B50\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>direction</td><td>\u683C\u5B50\u5185\u5BB9\u6392\u5217\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code></td><td><em>string</em></td><td><code>vertical</code></td></tr><tr><td>reverse <code>v1.7.0</code></td><td>\u662F\u5426\u8C03\u6362\u56FE\u6807\u548C\u6587\u672C\u7684\u4F4D\u7F6E</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="grid-wai-bu-yang-shi-lei" tabindex="-1">Grid \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-props" tabindex="-1">GridItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>text</td><td>\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>icon-color</td><td>\u56FE\u6807\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>icon-prefix <code>v1.7.0</code></td><td>\u7B2C\u4E09\u65B9\u56FE\u6807\u524D\u7F00</td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>badge</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-events" tabindex="-1">GridItem Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u683C\u5B50\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-slots" tabindex="-1">GridItem Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5BAB\u683C\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6E<code>use-slot</code>\u5C5E\u6027</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>use-slot</code>\u6216\u8005<code>icon</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>text</td><td>\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>use-slot</code>\u6216\u8005<code>text</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-wai-bu-yang-shi-lei" tabindex="-1">GridItem \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>content-class</td><td>\u5185\u5BB9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>text-class</td><td>\u6587\u672C\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Icon \u56FE\u6807</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-icon"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/icon/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>Icon</code>\u7684<code>name</code>\u5C5E\u6027\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"close"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"https://b.yzcdn.cn/vant/icon-demo-1126.png"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">\u63D0\u793A\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>info</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chat"</span> <span class="hljs-attr">dot</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chat"</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"9"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chat"</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"99+"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-yan-se" tabindex="-1">\u56FE\u6807\u989C\u8272</h3><p>\u8BBE\u7F6E<code>color</code>\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chat"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"red"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-da-xiao" tabindex="-1">\u56FE\u6807\u5927\u5C0F</h3><p>\u8BBE\u7F6E<code>size</code>\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chat"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"50px"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\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 <code>app.wxss</code> \u6587\u4EF6\u4E2D\u5F15\u5165\u3002</p><pre><code class="language-css"><span class="hljs-comment">/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */</span>\n<span class="hljs-keyword">@font-face</span> {\n <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'my-icon'</span>;\n <span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'./my-icon.ttf'</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">'truetype'</span>);\n}\n\n<span class="hljs-selector-class">.my-icon</span> {\n <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'my-icon'</span>;\n}\n\n<span class="hljs-selector-class">.my-icon-extra</span><span class="hljs-selector-pseudo">::before</span> {\n <span class="hljs-attribute">content</span>: <span class="hljs-string">'\\e626'</span>;\n}\n</code></pre><pre><code class="language-html"><span class="hljs-comment"><!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">class-prefix</span>=<span class="hljs-string">"my-icon"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"extra"</span> /></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td>-</td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u63D0\u793A</td><td><em>string | number</em></td><td>-</td></tr><tr><td>color</td><td>\u56FE\u6807\u989C\u8272</td><td><em>string</em></td><td><code>inherit</code></td></tr><tr><td>size</td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 <code>20px</code>\uFF0C<code>2em</code>\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>inherit</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>class-prefix</td><td>\u7C7B\u540D\u524D\u7F00</td><td><em>string</em></td><td><code>van-icon</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="kai-fa-zhe-gong-ju-shang-ti-shi-failed-to-load-font-shi-shi-me-qing-kuang" tabindex="-1">\u5F00\u53D1\u8005\u5DE5\u5177\u4E0A\u63D0\u793A Failed to load font \u662F\u4EC0\u4E48\u60C5\u51B5\uFF1F</h3><p>\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<a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a> - \u6CE8\u610F\u4E8B\u9879\u7B2C 5 \u6761\u3002</p></div>', 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('<h1>Image \u56FE\u7247</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-image"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/image/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u57FA\u7840\u7528\u6CD5\u4E0E\u539F\u751F <a href="(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)">image</a> \u6807\u7B7E\u4E00\u81F4\uFF0C\u53EF\u4EE5\u8BBE\u7F6E<code>src</code>\u3001<code>width</code>\u3001<code>height</code>\u7B49\u539F\u751F\u5C5E\u6027\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/cat.jpeg"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tian-chong-mo-shi" tabindex="-1">\u586B\u5145\u6A21\u5F0F</h3><p>\u901A\u8FC7<code>fit</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1\u4E0B\u65B9\u8868\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image</span>\n <span class="hljs-attr">width</span>=<span class="hljs-string">"10rem"</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">"10rem"</span>\n <span class="hljs-attr">fit</span>=<span class="hljs-string">"contain"</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/cat.jpeg"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-xing-tu-pian" tabindex="-1">\u5706\u5F62\u56FE\u7247</h3><p>\u901A\u8FC7<code>round</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u53D8\u5706\uFF0C\u6CE8\u610F\u5F53\u56FE\u7247\u5BBD\u9AD8\u4E0D\u76F8\u7B49\u4E14<code>fit</code>\u4E3A<code>contain</code>\u6216<code>scale-down</code>\u65F6\uFF0C\u5C06\u65E0\u6CD5\u586B\u5145\u4E00\u4E2A\u5B8C\u6574\u7684\u5706\u5F62\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image</span>\n <span class="hljs-attr">round</span>\n <span class="hljs-attr">width</span>=<span class="hljs-string">"10rem"</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">"10rem"</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/cat.jpeg"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-lan-jia-zai" tabindex="-1">\u56FE\u7247\u61D2\u52A0\u8F7D</h3><p>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image</span>\n <span class="hljs-attr">width</span>=<span class="hljs-string">"100"</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">"100"</span>\n <span class="hljs-attr">lazy-load</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/cat.jpeg"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhong-ti-shi" tabindex="-1">\u52A0\u8F7D\u4E2D\u63D0\u793A</h3><p><code>Image</code>\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u4E2D\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7<code>loading</code>\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image</span> <span class="hljs-attr">use-loading-slot</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-loading</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"loading"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"spinner"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">vertical</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-image</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-shi-bai-ti-shi" tabindex="-1">\u52A0\u8F7D\u5931\u8D25\u63D0\u793A</h3><p><code>Image</code>\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7<code>error</code>\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-image</span> <span class="hljs-attr">use-error-slot</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"error"</span>></span>\u52A0\u8F7D\u5931\u8D25<span class="hljs-tag"></<span class="hljs-name">text</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-image</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>src</td><td>\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td>-</td></tr><tr><td>fit</td><td>\u56FE\u7247\u586B\u5145\u6A21\u5F0F</td><td><em>string</em></td><td><em>fill</em></td></tr><tr><td>alt</td><td>\u66FF\u4EE3\u6587\u672C</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td>-</td></tr><tr><td>height</td><td>\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td>-</td></tr><tr><td>radius</td><td>\u5706\u89D2\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>round</td><td>\u662F\u5426\u663E\u793A\u4E3A\u5706\u5F62</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lazy-load</td><td>\u662F\u5426\u61D2\u52A0\u8F7D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-error</td><td>\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u63D0\u793A</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-loading</td><td>\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u4E2D\u63D0\u793A</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>use-error-slot</td><td>\u662F\u5426\u4F7F\u7528 error \u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-loading-slot</td><td>\u662F\u5426\u4F7F\u7528 loading \u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-menu-by-longpress</td><td>\u662F\u5426\u5F00\u542F\u957F\u6309\u56FE\u7247\u663E\u793A\u8BC6\u522B\u5C0F\u7A0B\u5E8F\u7801\u83DC\u5355</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tu-pian-tian-chong-mo-shi" tabindex="-1">\u56FE\u7247\u586B\u5145\u6A21\u5F0F \b</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u542B\u4E49</th></tr></thead><tbody><tr><td>contain</td><td>\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u957F\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765</td></tr><tr><td>cover</td><td>\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</td></tr><tr><td>fill</td><td>\u62C9\u4F38\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u586B\u6EE1\u5143\u7D20</td></tr><tr><td>widthFix</td><td>\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</td></tr><tr><td>heightFix</td><td>\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</td></tr><tr><td>none</td><td>\u4FDD\u6301\u56FE\u7247\u539F\u6709\u5C3A\u5BF8</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1</td><td>event: Event</td></tr><tr><td>load</td><td>\u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1</td><td>event: Event</td></tr><tr><td>error</td><td>\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u65F6\u89E6\u53D1</td><td>event: Event</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>loading</td><td>\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D\u7684\u63D0\u793A\u5185\u5BB9</td></tr><tr><td>error</td><td>\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u65F6\u7684\u63D0\u793A\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>image-class</td><td>\u56FE\u7247\u6837\u5F0F\u7C7B</td></tr><tr><td>loading-class</td><td>loading \u6837\u5F0F\u7C7B</td></tr><tr><td>error-class</td><td>error \u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>IndexBar \u7D22\u5F15\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5217\u8868\u7684\u7D22\u5F15\u5206\u7C7B\u663E\u793A\u548C\u5FEB\u901F\u5B9A\u4F4D\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-index-bar"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/index-bar/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-index-anchor"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/index-anchor/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u70B9\u51FB\u7D22\u5F15\u680F\u65F6\uFF0C\u4F1A\u81EA\u52A8\u8DF3\u8F6C\u5230\u5BF9\u5E94\u7684<code>IndexAnchor</code>\u951A\u70B9\u4F4D\u7F6E\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-index-bar</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"A"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"B"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n ...\n<span class="hljs-tag"></<span class="hljs-name">van-index-bar</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-suo-yin-lie-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u7D22\u5F15\u5217\u8868</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>index-list</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u5C55\u793A\u7684\u7D22\u5F15\u5B57\u7B26\u5217\u8868\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-index-bar</span> <span class="hljs-attr">index-list</span>=<span class="hljs-string">"{{ indexList }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"1"</span>></span>\u6807\u98981<span class="hljs-tag"></<span class="hljs-name">van-index-anchor</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"2"</span>></span>\u6807\u98982<span class="hljs-tag"></<span class="hljs-name">van-index-anchor</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6587\u672C"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n\n ...\n<span class="hljs-tag"></<span class="hljs-name">van-index-bar</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">indexList</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">9</span>, <span class="hljs-number">10</span>],\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="indexbar-props" tabindex="-1">IndexBar Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>index-list</td><td>\u7D22\u5F15\u5B57\u7B26\u5217\u8868</td><td><em>string[] | number[]</em></td><td><code>A-Z</code></td><td>-</td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>1</code></td><td>-</td></tr><tr><td>sticky</td><td>\u662F\u5426\u5F00\u542F\u951A\u70B9\u81EA\u52A8\u5438\u9876</td><td><em>boolean</em></td><td><code>true</code></td><td>-</td></tr><tr><td>sticky-offset-top</td><td>\u951A\u70B9\u81EA\u52A8\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB</td><td><em>number</em></td><td><code>0</code></td><td>-</td></tr><tr><td>highlight-color</td><td>\u7D22\u5F15\u5B57\u7B26\u9AD8\u4EAE\u989C\u8272</td><td><em>string</em></td><td><code>#07c160</code></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="indexanchor-props" tabindex="-1">IndexAnchor Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td><td>-</td></tr><tr><td>index</td><td>\u7D22\u5F15\u5B57\u7B26</td><td><em>string | number</em></td><td>-</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="indexbar-events" tabindex="-1">IndexBar Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>select</td><td>\u9009\u4E2D\u5B57\u7B26\u65F6\u89E6\u53D1</td><td>index: \u7D22\u5F15\u5B57\u7B26</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="indexanchor-slots" tabindex="-1">IndexAnchor Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u951A\u70B9\u4F4D\u7F6E\u663E\u793A\u5185\u5BB9\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u5B57\u7B26</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="qian-tao-zai-gun-dong-yuan-su-zhong-indexanchor-shi-xiao" tabindex="-1">\u5D4C\u5957\u5728\u6EDA\u52A8\u5143\u7D20\u4E2D IndexAnchor \u5931\u6548\uFF1F</h3><p>\u7531\u4E8E <code><IndexBar /></code> \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\uFF1A<code>view</code> \u4F7F\u7528 <code>overflow: scroll;</code> \u6216\u8005 <code>scroll-view</code>\uFF0C\u5177\u4F53\u53EF\u67E5\u770B<a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a>\u3002\u5386\u53F2 issue: <a href="https://github.com/youzan/vant-weapp/issues/4252">#4252</a></p></div>', 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('<h1>Loading \u52A0\u8F7D</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u52A0\u8F7D\u56FE\u6807\uFF0C\u7528\u4E8E\u8868\u793A\u52A0\u8F7D\u4E2D\u7684\u8FC7\u6E21\u72B6\u6001\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-loading"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/loading/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="jia-zai-lei-xing" tabindex="-1">\u52A0\u8F7D\u7C7B\u578B</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-loading</span> /></span> <span class="hljs-tag"><<span class="hljs-name">van-loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"spinner"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-loading</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#1989fa"</span> /></span> <span class="hljs-tag"><<span class="hljs-name">van-loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"spinner"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#1989fa"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-wen-an" tabindex="-1">\u52A0\u8F7D\u6587\u6848</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-loading</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"24px"</span>></span>\u52A0\u8F7D\u4E2D...<span class="hljs-tag"></<span class="hljs-name">van-loading</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-pai-lie" tabindex="-1">\u5782\u76F4\u6392\u5217</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-loading</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"24px"</span> <span class="hljs-attr">vertical</span>></span>\u52A0\u8F7D\u4E2D...<span class="hljs-tag"></<span class="hljs-name">van-loading</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>color</td><td>\u989C\u8272</td><td><em>string</em></td><td><code>#c9c9c9</code></td></tr><tr><td>type</td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>size</td><td>\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>30px</code></td></tr><tr><td>text-size <code>v1.0.0</code></td><td>\u6587\u5B57\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>14px</code></td></tr><tr><td>vertical <code>v1.0.0</code></td><td>\u662F\u5426\u5782\u76F4\u6392\u5217\u56FE\u6807\u548C\u6587\u5B57\u5185\u5BB9</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u52A0\u8F7D\u6587\u6848</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>NavBar \u5BFC\u822A\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u4E3A\u9875\u9762\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\uFF0C\u5E38\u7528\u4E8E\u9875\u9762\u9876\u90E8\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-nav-bar"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/nav-bar/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-nav-bar</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span>\n <span class="hljs-attr">left-text</span>=<span class="hljs-string">"\u8FD4\u56DE"</span>\n <span class="hljs-attr">right-text</span>=<span class="hljs-string">"\u6309\u94AE"</span>\n <span class="hljs-attr">left-arrow</span>\n <span class="hljs-attr">bind:click-left</span>=<span class="hljs-string">"onClickLeft"</span>\n <span class="hljs-attr">bind:click-right</span>=<span class="hljs-string">"onClickRight"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClickLeft</span>(<span class="hljs-params"></span>) {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">'\u70B9\u51FB\u8FD4\u56DE'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span> });\n },\n <span class="hljs-title function_">onClickRight</span>(<span class="hljs-params"></span>) {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">'\u70B9\u51FB\u6309\u94AE'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u901A\u8FC7 slot \u5B9A\u5236\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-nav-bar</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span> <span class="hljs-attr">left-text</span>=<span class="hljs-string">"\u8FD4\u56DE"</span> <span class="hljs-attr">left-arrow</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-nav-bar</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>left-text</td><td>\u5DE6\u4FA7\u6587\u6848</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>right-text</td><td>\u53F3\u4FA7\u6587\u6848</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>left-arrow</td><td>\u662F\u5426\u663E\u793A\u5DE6\u4FA7\u7BAD\u5934</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>fixed</td><td>\u662F\u5426\u56FA\u5B9A\u5728\u9876\u90E8</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>placeholder</td><td>\u56FA\u5B9A\u5728\u9876\u90E8\u65F6\u662F\u5426\u5F00\u542F\u5360\u4F4D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>z-index</td><td>\u5143\u7D20 z-index</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>custom-style</td><td>\u6839\u8282\u70B9\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>safe-area-inset-top</td><td>\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898</td></tr><tr><td>left</td><td>\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u533A\u57DF\u5185\u5BB9</td></tr><tr><td>right</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click-left</td><td>\u70B9\u51FB\u5DE6\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-right</td><td>\u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class</td><td>\u6807\u9898\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>NoticeBar \u901A\u77E5\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u5C55\u793A\u4E00\u7EC4\u6D88\u606F\u901A\u77E5\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-notice-bar"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/notice-bar/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">"volume-o"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"\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"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="gun-dong-bo-fang" tabindex="-1">\u6EDA\u52A8\u64AD\u653E</h3><p>\u901A\u77E5\u680F\u7684\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u4F1A\u81EA\u52A8\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u901A\u8FC7 <code>scrollable</code> \u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u8BE5\u884C\u4E3A\u3002</p><pre><code class="language-html"><span class="hljs-comment"><!-- \u6587\u5B57\u8F83\u77ED\u65F6\uFF0C\u901A\u8FC7\u8BBE\u7F6E scrollable \u5C5E\u6027\u5F00\u542F\u6EDA\u52A8\u64AD\u653E --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">scrollable</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002"</span> /></span>\n\n<span class="hljs-comment"><!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">scrollable</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"\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"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="duo-xing-zhan-shi" tabindex="-1">\u591A\u884C\u5C55\u793A</h3><p>\u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E <code>wrapable</code> \u5C5E\u6027\u6765\u5F00\u542F\u591A\u884C\u5C55\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">wrapable</span>\n <span class="hljs-attr">scrollable</span>=<span class="hljs-string">"{{ false }}"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"\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"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tong-zhi-lan-mo-shi" tabindex="-1">\u901A\u77E5\u680F\u6A21\u5F0F</h3><p>\u901A\u77E5\u680F\u652F\u6301 <code>closeable</code> \u548C <code>link</code> \u4E24\u79CD\u6A21\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-comment"><!-- closeable \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u5173\u95ED\u6309\u94AE --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"closeable"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002"</span> /></span>\n\n<span class="hljs-comment"><!-- link \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u94FE\u63A5\u7BAD\u5934 --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"link"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><p>\u901A\u8FC7 <code>color</code> \u5C5E\u6027\u8BBE\u7F6E\u6587\u672C\u989C\u8272\uFF0C\u901A\u8FC7 <code>background</code> \u5C5E\u6027\u8BBE\u7F6E\u80CC\u666F\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"#1989fa"</span>\n <span class="hljs-attr">background</span>=<span class="hljs-string">"#ecf9ff"</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">"info-o"</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-gun-dong-su-lu" tabindex="-1">\u81EA\u5B9A\u4E49\u6EDA\u52A8\u901F\u7387</h3><p>\u4F7F\u7528<code>speed</code>\u5C5E\u6027\u63A7\u5236\u6EDA\u52A8\u901F\u7387\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">"{{ text }}"</span>\n <span class="hljs-attr">speed</span>=<span class="hljs-string">"{{speedValue}}"</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">"//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"</span>\n/></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>mode</td><td>\u901A\u77E5\u680F\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>closeable</code> <code>link</code></td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>text</td><td>\u901A\u77E5\u6587\u672C\u5185\u5BB9</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>color</td><td>\u901A\u77E5\u6587\u672C\u989C\u8272</td><td><em>string</em></td><td><code>#ed6a0c</code></td></tr><tr><td>background</td><td>\u6EDA\u52A8\u6761\u80CC\u666F</td><td><em>string</em></td><td><code>#fffbe8</code></td></tr><tr><td>left-icon</td><td>\u5DE6\u4FA7<a href="#/icon">\u56FE\u6807\u540D\u79F0</a>\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td>-</td></tr><tr><td>delay</td><td>\u52A8\u753B\u5EF6\u8FDF\u65F6\u95F4 (s)</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>speed</td><td>\u6EDA\u52A8\u901F\u7387 (px/s)</td><td><em>number</em></td><td><code>60</code></td></tr><tr><td>scrollable</td><td>\u662F\u5426\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u9ED8\u8BA4\u5F00\u542F</td><td><em>boolean</em></td><td>-</td></tr><tr><td>wrapable</td><td>\u662F\u5426\u5F00\u542F\u6587\u672C\u6362\u884C\uFF0C\u53EA\u5728\u7981\u7528\u6EDA\u52A8\u65F6\u751F\u6548</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B</td><td><em>string</em></td><td><code>navigate</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB\u901A\u77E5\u680F\u65F6\u89E6\u53D1</td><td><em>event: Event</em></td></tr><tr><td>close</td><td>\u5173\u95ED\u901A\u77E5\u680F\u65F6\u89E6\u53D1</td><td><em>event: Event</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u901A\u77E5\u6587\u672C\u5185\u5BB9\uFF0C\u4EC5\u5728 <code>text</code> \u5C5E\u6027\u4E3A\u7A7A\u65F6\u6709\u6548</td></tr><tr><td>left-icon</td><td>\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Notify \u6D88\u606F\u63D0\u793A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-notify"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/notify/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Notify</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/notify/notify'</span>;\n\n<span class="hljs-title class_">Notify</span>(<span class="hljs-string">'\u901A\u77E5\u5185\u5BB9'</span>);\n</code></pre><pre><code class="language-html"><span class="hljs-comment"><!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u5BF9\u5E94\u7684\u8282\u70B9 --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-notify"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="tong-zhi-lei-xing" tabindex="-1">\u901A\u77E5\u7C7B\u578B</h3><p>\u652F\u6301<code>primary</code>\u3001<code>success</code>\u3001<code>warning</code>\u3001<code>danger</code>\u56DB\u79CD\u901A\u77E5\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A<code>danger</code>\u3002</p><pre><code class="language-js"><span class="hljs-comment">// \u4E3B\u8981\u901A\u77E5</span>\n<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">'primary'</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'\u901A\u77E5\u5185\u5BB9'</span> });\n\n<span class="hljs-comment">// \u6210\u529F\u901A\u77E5</span>\n<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">'success'</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'\u901A\u77E5\u5185\u5BB9'</span> });\n\n<span class="hljs-comment">// \u5371\u9669\u901A\u77E5</span>\n<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">'danger'</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'\u901A\u77E5\u5185\u5BB9'</span> });\n\n<span class="hljs-comment">// \u8B66\u544A\u901A\u77E5</span>\n<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">'warning'</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'\u901A\u77E5\u5185\u5BB9'</span> });\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tong-zhi" tabindex="-1">\u81EA\u5B9A\u4E49\u901A\u77E5</h3><p>\u81EA\u5B9A\u4E49\u6D88\u606F\u901A\u77E5\u7684\u989C\u8272\u548C\u5C55\u793A\u65F6\u957F\u3002</p><pre><code class="language-js"><span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u81EA\u5B9A\u4E49\u989C\u8272'</span>,\n <span class="hljs-attr">color</span>: <span class="hljs-string">'#ad0000'</span>,\n <span class="hljs-attr">background</span>: <span class="hljs-string">'#ffe1e1'</span>,\n});\n\n<span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u81EA\u5B9A\u4E49\u65F6\u957F'</span>,\n <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>,\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xuan-ze-qi" tabindex="-1">\u81EA\u5B9A\u4E49\u9009\u62E9\u5668</h3><pre><code class="language-js"><span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668'</span>,\n <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>,\n <span class="hljs-attr">selector</span>: <span class="hljs-string">'#custom-selector'</span>,\n});\n</code></pre><pre><code class="language-html"><span class="hljs-comment"><!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u81EA\u5B9A\u4E49\u8282\u70B9 --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"custom-selector"</span> /></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th></tr></thead><tbody><tr><td>Notify</td><td>\u5C55\u793A\u63D0\u793A</td><td><code>options | message</code></td><td>notify \u5B9E\u4F8B</td></tr><tr><td>Notify.clear</td><td>\u5173\u95ED\u63D0\u793A</td><td><code>options</code></td><td><code>void</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type <code>v1.0.0</code></td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>success</code> <code>warning</code></td><td><em>string</em></td><td><code>danger</code></td></tr><tr><td>message <code>v1.0.0</code></td><td>\u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7<code>\\n</code>\u6362\u884C</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>duration</td><td>\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Cnotify \u4E0D\u4F1A\u6D88\u5931</td><td><em>number</em></td><td><code>3000</code></td></tr><tr><td>selector</td><td>\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668</td><td><em>string</em></td><td><code>van-notify</code></td></tr><tr><td>color</td><td>\u5B57\u4F53\u989C\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>top</td><td>\u9876\u90E8\u8DDD\u79BB</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>background</td><td>\u80CC\u666F\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>context</td><td>\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587</td><td><em>object</em></td><td>\u5F53\u524D\u9875\u9762</td></tr><tr><td>onClick</td><td>\u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr><tr><td>onOpened</td><td>\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr><tr><td>onClose</td><td>\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr><tr><td>safeAreaInsetTop</td><td>\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div>', 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('<h1>Overlay \u906E\u7F69\u5C42</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-overlay"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/overlay/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickShow"</span>></span>\u663E\u793A\u906E\u7F69\u5C42<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-overlay</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickHide"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onClickShow</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });\n },\n\n <span class="hljs-title function_">onClickHide</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="qian-ru-nei-rong" tabindex="-1">\u5D4C\u5165\u5185\u5BB9</h3><p>\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728\u906E\u7F69\u5C42\u4E0A\u5D4C\u5165\u4EFB\u610F\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickShow"</span>></span>\u5D4C\u5165\u5185\u5BB9<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-overlay</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClickHide"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"wrapper"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"block"</span> <span class="hljs-attr">catch:tap</span>=<span class="hljs-string">"noop"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-overlay</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onClickShow</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });\n },\n\n <span class="hljs-title function_">onClickHide</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n\n <span class="hljs-title function_">noop</span>(<span class="hljs-params"></span>) {},\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.wrapper</span> {\n <span class="hljs-attribute">display</span>: flex;\n <span class="hljs-attribute">align-items</span>: center;\n <span class="hljs-attribute">justify-content</span>: center;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;\n}\n\n<span class="hljs-selector-class">.block</span> {\n <span class="hljs-attribute">width</span>: <span class="hljs-number">120px</span>;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">120px</span>;\n <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2</td><td><em>string | number</em></td><td><code>0.3</code></td></tr><tr><td>class-name</td><td>\u81EA\u5B9A\u4E49\u7C7B\u540D</td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>lock-scroll <code>v1.7.3</code></td><td>\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8\uFF0C\u9501\u5B9A\u65F6\u8499\u5C42\u91CC\u7684\u5185\u5BB9\u4E5F\u5C06\u65E0\u6CD5\u6EDA\u52A8</td><td><em>boolean</em></td><td>true</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u7528\u4E8E\u5728\u906E\u7F69\u5C42\u4E0A\u65B9\u5D4C\u5165\u5185\u5BB9</td></tr></tbody></table></div>', 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('<h1>Panel \u9762\u677F</h1><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-panel"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/panel/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u9762\u677F\u53EA\u662F\u4E00\u4E2A\u5BB9\u5668\uFF0C\u91CC\u9762\u53EF\u4EE5\u653E\u5165\u81EA\u5B9A\u4E49\u7684\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-panel</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span> <span class="hljs-attr">status</span>=<span class="hljs-string">"\u72B6\u6001"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\u5185\u5BB9<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-panel</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u4F7F\u7528<code>slot</code>\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-panel</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span> <span class="hljs-attr">status</span>=<span class="hljs-string">"\u72B6\u6001"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\u5185\u5BB9<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"footer"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span>></span>\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u6309\u94AE<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-panel</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>desc</td><td>\u63CF\u8FF0</td><td><em>string</em></td><td>-</td></tr><tr><td>status</td><td>\u72B6\u6001</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5185\u5BB9</td></tr><tr><td>header</td><td>\u81EA\u5B9A\u4E49 header\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u3001<code>desc</code>\u3001<code>status</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>footer</td><td>\u81EA\u5B9A\u4E49 footer</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>header-class</td><td>\u5934\u90E8\u6837\u5F0F\u7C7B</td></tr><tr><td>footer-class</td><td>\u5E95\u90E8\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Picker \u9009\u62E9\u5668</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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 <a href="#/popup">\u5F39\u51FA\u5C42</a> \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-picker"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/picker/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">"{{ columns }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/toast/toast'</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [<span class="hljs-string">'\u676D\u5DDE'</span>, <span class="hljs-string">'\u5B81\u6CE2'</span>, <span class="hljs-string">'\u6E29\u5DDE'</span>, <span class="hljs-string">'\u5609\u5174'</span>, <span class="hljs-string">'\u6E56\u5DDE'</span>],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">${value}</span>, \u5F53\u524D\u7D22\u5F15\uFF1A<span class="hljs-subst">${index}</span>`</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="mo-ren-xuan-zhong-xiang" tabindex="-1">\u9ED8\u8BA4\u9009\u4E2D\u9879</h3><p>\u5355\u5217\u9009\u62E9\u5668\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7<code>default-index</code>\u5C5E\u6027\u8BBE\u7F6E\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\u503C\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">columns</span>=<span class="hljs-string">"{{ columns }}"</span>\n <span class="hljs-attr">default-index</span>=<span class="hljs-string">"{{ 2 }}"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-ding-bu-lan" tabindex="-1">\u5C55\u793A\u9876\u90E8\u680F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">show-toolbar</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u9898"</span>\n <span class="hljs-attr">columns</span>=<span class="hljs-string">"{{ columns }}"</span>\n <span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">"onCancel"</span>\n <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">"onConfirm"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/toast/toast'</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [<span class="hljs-string">'\u676D\u5DDE'</span>, <span class="hljs-string">'\u5B81\u6CE2'</span>, <span class="hljs-string">'\u6E29\u5DDE'</span>, <span class="hljs-string">'\u5609\u5174'</span>, <span class="hljs-string">'\u6E56\u5DDE'</span>],\n },\n\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">${value}</span>, \u5F53\u524D\u7D22\u5F15\uFF1A<span class="hljs-subst">${index}</span>`</span>);\n },\n\n <span class="hljs-title function_">onCancel</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u53D6\u6D88'</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="duo-lie-lian-dong" tabindex="-1">\u591A\u5217\u8054\u52A8</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">"{{ columns }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">const</span> citys = {\n \u6D59\u6C5F: [<span class="hljs-string">'\u676D\u5DDE'</span>, <span class="hljs-string">'\u5B81\u6CE2'</span>, <span class="hljs-string">'\u6E29\u5DDE'</span>, <span class="hljs-string">'\u5609\u5174'</span>, <span class="hljs-string">'\u6E56\u5DDE'</span>],\n \u798F\u5EFA: [<span class="hljs-string">'\u798F\u5DDE'</span>, <span class="hljs-string">'\u53A6\u95E8'</span>, <span class="hljs-string">'\u8386\u7530'</span>, <span class="hljs-string">'\u4E09\u660E'</span>, <span class="hljs-string">'\u6CC9\u5DDE'</span>],\n};\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [\n {\n <span class="hljs-attr">values</span>: <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(citys),\n <span class="hljs-attr">className</span>: <span class="hljs-string">'column1'</span>,\n },\n {\n <span class="hljs-attr">values</span>: citys[<span class="hljs-string">'\u6D59\u6C5F'</span>],\n <span class="hljs-attr">className</span>: <span class="hljs-string">'column2'</span>,\n <span class="hljs-attr">defaultIndex</span>: <span class="hljs-number">2</span>,\n },\n ],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;\n picker.<span class="hljs-title function_">setColumnValues</span>(<span class="hljs-number">1</span>, citys[value[<span class="hljs-number">0</span>]]);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-xuan-xiang" tabindex="-1">\u7981\u7528\u9009\u9879</h3><p>\u9009\u9879\u53EF\u4EE5\u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u901A\u8FC7\u8BBE\u7F6E disabled \u6765\u7981\u7528\u8BE5\u9009\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">"{{ columns }}"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u676D\u5DDE'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u5B81\u6CE2'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6E29\u5DDE'</span> },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><p>\u5F53 Picker \u6570\u636E\u662F\u901A\u8FC7\u5F02\u6B65\u83B7\u53D6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 <code>loading</code> \u5C5E\u6027\u663E\u793A\u52A0\u8F7D\u63D0\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">"{{ columns }}"</span> <span class="hljs-attr">loading</span> /></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>columns</td><td>\u5BF9\u8C61\u6570\u7EC4\uFF0C\u914D\u7F6E\u6BCF\u4E00\u5217\u663E\u793A\u7684\u6570\u636E</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>show-toolbar</td><td>\u662F\u5426\u663E\u793A\u9876\u90E8\u680F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>toolbar-position</td><td>\u9876\u90E8\u680F\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A<code>bottom</code></td><td><em>string</em></td><td><code>top</code></td></tr><tr><td>title</td><td>\u9876\u90E8\u680F\u6807\u9898</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>value-key</td><td>\u9009\u9879\u5BF9\u8C61\u4E2D\uFF0C\u6587\u5B57\u5BF9\u5E94\u7684 key</td><td><em>string</em></td><td><code>text</code></td></tr><tr><td>item-height</td><td>\u9009\u9879\u9AD8\u5EA6</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>visible-item-count</td><td>\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570</td><td><em>number</em></td><td><code>6</code></td></tr><tr><td>default-index</td><td>\u5355\u5217\u9009\u62E9\u5668\u7684\u9ED8\u8BA4\u9009\u4E2D\u9879\u7D22\u5F15\uFF0C<br>\u591A\u5217\u9009\u62E9\u5668\u8BF7\u53C2\u8003\u4E0B\u65B9\u7684 Columns \u914D\u7F6E</td><td><em>number</em></td><td><code>0</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><p>Picker \u7EC4\u4EF6\u7684\u4E8B\u4EF6\u4F1A\u6839\u636E columns \u662F\u5355\u5217\u6216\u591A\u5217\u8FD4\u56DE\u4E0D\u540C\u7684\u53C2\u6570\u3002</p><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>confirm</td><td>\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1</td><td>\u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15<br>\u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1</td><td>\u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15<br>\u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>change</td><td>\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1</td><td>\u5355\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15<br>\u591A\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="columns-shu-ju-jie-gou" tabindex="-1">Columns \u6570\u636E\u7ED3\u6784</h3><p>\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0C<code>columns</code>\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<code>key</code>\u3002</p><table><thead><tr><th>key</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>values</td><td>\u5217\u4E2D\u5BF9\u5E94\u7684\u5907\u9009\u503C</td></tr><tr><td>defaultIndex</td><td>\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\uFF0C\u9ED8\u8BA4\u4E3A 0</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>active-class</td><td>\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>toolbar-class</td><td>\u9876\u90E8\u680F\u6837\u5F0F\u7C7B</td></tr><tr><td>column-class</td><td>\u5217\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 picker \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>getValues</td><td>-</td><td>values</td><td>\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>setValues</td><td>values</td><td>-</td><td>\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>getIndexes</td><td>-</td><td>indexes</td><td>\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>setIndexes</td><td>indexes</td><td>-</td><td>\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>getColumnValue</td><td>columnIndex</td><td>value</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>setColumnValue</td><td>columnIndex, value</td><td>-</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>getColumnIndex</td><td>columnIndex</td><td>optionIndex</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td></tr><tr><td>setColumnIndex</td><td>columnIndex, optionIndex</td><td>-</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td></tr><tr><td>getColumnValues</td><td>columnIndex</td><td>values</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879</td></tr><tr><td>setColumnValues</td><td>columnIndex, values</td><td>-</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879</td></tr></tbody></table></div>', 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('<h1>Popup \u5F39\u51FA\u5C42</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-popup"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/popup/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>show</code>\u5C5E\u6027\u63A7\u5236\u5F39\u51FA\u5C42\u662F\u5426\u5C55\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5C55\u793A\u5F39\u51FA\u5C42"</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"showPopup"</span> /></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>></span>\u5185\u5BB9<span class="hljs-tag"></<span class="hljs-name">van-popup</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">showPopup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="dan-chu-wei-zhi" tabindex="-1">\u5F39\u51FA\u4F4D\u7F6E</h3><p>\u901A\u8FC7<code>position</code>\u5C5E\u6027\u8BBE\u7F6E\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u5C45\u4E2D\u5F39\u51FA\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A<code>top</code>\u3001<code>bottom</code>\u3001<code>left</code>\u3001<code>right</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">"top"</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">"height: 20%;"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="guan-bi-tu-biao" tabindex="-1">\u5173\u95ED\u56FE\u6807</h3><p>\u8BBE\u7F6E<code>closeable</code>\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<code>close-icon</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528<code>close-icon-position</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">"height: 20%"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n/></span>\n\n<span class="hljs-comment"><!-- \u81EA\u5B9A\u4E49\u56FE\u6807 --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">close-icon</span>=<span class="hljs-string">"close"</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">"height: 20%"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n/></span>\n\n<span class="hljs-comment"><!-- \u56FE\u6807\u4F4D\u7F6E --></span>\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">close-icon-position</span>=<span class="hljs-string">"top-left"</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">"height: 20%"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-dan-chuang" tabindex="-1">\u5706\u89D2\u5F39\u7A97</h3><p>\u8BBE\u7F6E<code>round</code>\u5C5E\u6027\u540E\uFF0C\u5F39\u7A97\u4F1A\u6839\u636E\u5F39\u51FA\u4F4D\u7F6E\u6DFB\u52A0\u4E0D\u540C\u7684\u5706\u89D2\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">round</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">"height: 20%"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-zhi-gun-dong-chuan-tou" tabindex="-1">\u7981\u6B62\u6EDA\u52A8\u7A7F\u900F</h3><p>\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</p><p>\u76EE\u524D\uFF0C\u7EC4\u4EF6\u53EF\u4EE5\u901A\u8FC7 <code>lock-scroll</code> \u5C5E\u6027\u5904\u7406\u90E8\u5206\u6EDA\u52A8\u7A7F\u900F\u95EE\u9898\u3002 <strong>\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</strong> \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</p><h4 id="page-meta" tabindex="-1"><a href="https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html">page-meta</a></h4><p>\u5F53\u5C0F\u7A0B\u5E8F\u57FA\u7840\u5E93\u6700\u4F4E\u7248\u672C\u5728 2.9.0 \u4EE5\u4E0A\u65F6\uFF0C\u5373\u53EF\u4F7F\u7528 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html">page-meta</a> \u7EC4\u4EF6\u52A8\u6001\u4FEE\u6539\u9875\u9762\u6837\u5F0F</p><pre><code class="language-html"><span class="hljs-comment"><!-- page-meta \u53EA\u80FD\u662F\u9875\u9762\u5185\u7684\u7B2C\u4E00\u4E2A\u8282\u70B9 --></span>\n<span class="hljs-tag"><<span class="hljs-name">page-meta</span> <span class="hljs-attr">page-style</span>=<span class="hljs-string">"{{ show ? 'overflow: hidden;' : '' }}"</span> /></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">catch:touchstart</span> /></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u5F39\u51FA\u5C42</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>position</td><td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>top</code> <code>bottom</code> <code>right</code> <code>left</code></td><td><em>string</em></td><td><code>center</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2</td><td><em>number | object</em></td><td><code>300</code></td></tr><tr><td>round</td><td>\u662F\u5426\u663E\u793A\u5706\u89D2</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0F</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>overlay-style</td><td>\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>closeable</td><td>\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>close-icon</td><td>\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td><code>cross</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-top</td><td>\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lock-scroll <code>v1.7.3</code></td><td>\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:close</td><td>\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:before-enter</td><td>\u8FDB\u5165\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:enter</td><td>\u8FDB\u5165\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-enter</td><td>\u8FDB\u5165\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:before-leave</td><td>\u79BB\u5F00\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:leave</td><td>\u79BB\u5F00\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-leave</td><td>\u79BB\u5F00\u540E\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Progress \u8FDB\u5EA6\u6761</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u7684\u5F53\u524D\u8FDB\u5EA6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-progress"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/progress/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4E3A\u84DD\u8272\uFF0C\u4F7F\u7528<code>percentage</code>\u5C5E\u6027\u6765\u8BBE\u7F6E\u5F53\u524D\u8FDB\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-tiao-cu-xi" tabindex="-1">\u7EBF\u6761\u7C97\u7EC6</h3><p>\u901A\u8FC7<code>stroke-width</code>\u53EF\u4EE5\u8BBE\u7F6E\u8FDB\u5EA6\u6761\u7684\u7C97\u7EC6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-progress</span> <span class="hljs-attr">:percentage</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"8"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-hui" tabindex="-1">\u7F6E\u7070</h3><p>\u8BBE\u7F6E<code>inactive</code>\u5C5E\u6027\u540E\u8FDB\u5EA6\u6761\u5C06\u7F6E\u7070\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-progress</span> <span class="hljs-attr">inactive</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yang-shi-ding-zhi" tabindex="-1">\u6837\u5F0F\u5B9A\u5236</h3><p>\u53EF\u4EE5\u4F7F\u7528<code>pivot-text</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0C<code>color</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u8FDB\u5EA6\u6761\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-progress</span> <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">"\u6A59\u8272"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#f2826a"</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"25"</span> /></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-progress</span> <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">"\u7EA2\u8272"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#ee0a24"</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> /></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-progress</span>\n <span class="hljs-attr">percentage</span>=<span class="hljs-string">"75"</span>\n <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">"\u7D2B\u8272"</span>\n <span class="hljs-attr">pivot-color</span>=<span class="hljs-string">"#7232dd"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"linear-gradient(to right, #be99ff, #7232dd)"</span>\n/></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>inactive</td><td>\u662F\u5426\u7F6E\u7070</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>percentage</td><td>\u8FDB\u5EA6\u767E\u5206\u6BD4</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>stroke-width</td><td>\u8FDB\u5EA6\u6761\u7C97\u7EC6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>4px</code></td></tr><tr><td>show-pivot</td><td>\u662F\u5426\u663E\u793A\u8FDB\u5EA6\u6587\u5B57</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>color</td><td>\u8FDB\u5EA6\u6761\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>text-color</td><td>\u8FDB\u5EA6\u6587\u5B57\u989C\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>track-color</td><td>\u8F68\u9053\u989C\u8272</td><td><em>string</em></td><td><code>#e5e5e5</code></td></tr><tr><td>pivot-text</td><td>\u6587\u5B57\u663E\u793A</td><td><em>string</em></td><td>\u767E\u5206\u6BD4\u6587\u5B57</td></tr><tr><td>pivot-color</td><td>\u6587\u5B57\u80CC\u666F\u8272</td><td><em>string</em></td><td>\u4E0E\u8FDB\u5EA6\u6761\u989C\u8272\u4E00\u81F4</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Radio \u5355\u9009\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-radio"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/radio/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-radio-group"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/radio-group/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u4E2D\u9879\u7684 name \u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">radio</span>: <span class="hljs-string">'1'</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shui-ping-pai-lie" tabindex="-1">\u6C34\u5E73\u6392\u5217</h3><p>\u5C06<code>direction</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>horizontal</code>\u540E\uFF0C\u5355\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n <span class="hljs-attr">direction</span>=<span class="hljs-string">"horizontal"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7<code>disabled</code>\u5C5E\u6027\u7981\u6B62\u9009\u9879\u5207\u6362\uFF0C\u5728<code>Radio</code>\u4E0A\u8BBE\u7F6E<code>diabled</code>\u53EF\u4EE5\u7981\u7528\u5355\u4E2A\u9009\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xing-zhuang" tabindex="-1">\u81EA\u5B9A\u4E49\u5F62\u72B6</h3><p>\u5C06<code>shape</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>square</code>\uFF0C\u5355\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"square"</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"square"</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>checked-color</code>\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">checked-color</span>=<span class="hljs-string">"#07c160"</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">checked-color</span>=<span class="hljs-string">"#07c160"</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><p>\u901A\u8FC7<code>icon-size</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">"24px"</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">"24px"</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u901A\u8FC7<code>icon</code>\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u9700\u8981\u8BBE\u7F6E<code>use-icon-slot</code>\u5C5E\u6027\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">use-icon-slot</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\n \u81EA\u5B9A\u4E49\u56FE\u6807\n <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ radio === '1' ? icon.active : icon.normal }}"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">use-icon-slot</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\n \u81EA\u5B9A\u4E49\u56FE\u6807\n <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ radio === '2' ? icon.active : icon.normal }}"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">radio</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">icon</span>: {\n <span class="hljs-attr">normal</span>: <span class="hljs-string">'//img.yzcdn.cn/icon-normal.png'</span>,\n <span class="hljs-attr">active</span>: <span class="hljs-string">'//img.yzcdn.cn/icon-active.png'</span>,\n },\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-wen-ben-dian-ji" tabindex="-1">\u7981\u7528\u6587\u672C\u70B9\u51FB</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>label-disabled</code>\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u5355\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">label-disabled</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">label-disabled</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yu-cell-zu-jian-yi-qi-shi-yong" tabindex="-1">\u4E0E Cell \u7EC4\u4EF6\u4E00\u8D77\u4F7F\u7528</h3><p>\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165<code>Cell</code>\u548C<code>CellGroup</code>\u7EC4\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ radio }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u9009\u6846 1"</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClick"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right-icon"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u9009\u6846 2"</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClick"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right-icon"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">radio</span>: <span class="hljs-string">'1'</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { name } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: name,\n });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="radiogroup-props" tabindex="-1">RadioGroup Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26</td><td><em>any</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>direction <code>v1.6.7</code></td><td>\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code></td><td><em>string</em></td><td><code>vertical</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radio-props" tabindex="-1">Radio Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A <code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-disabled</td><td>\u662F\u5426\u7981\u7528\u6587\u672C\u5185\u5BB9\u70B9\u51FB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-position</td><td>\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code></td><td><em>string</em></td><td><code>right</code></td></tr><tr><td>icon-size</td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>20px</code></td></tr><tr><td>checked-color</td><td>\u9009\u4E2D\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>use-icon-slot</td><td>\u662F\u5426\u4F7F\u7528 icon \u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radio-event" tabindex="-1">Radio Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u7684 name</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radio-wai-bu-yang-shi-lei" tabindex="-1">Radio \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>label-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radiogroup-event" tabindex="-1">RadioGroup Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u7684 name</td></tr></tbody></table></div>', 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('<h1>Rate \u8BC4\u5206</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5BF9\u4E8B\u7269\u8FDB\u884C\u8BC4\u7EA7\u64CD\u4F5C\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-rate"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/rate/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">3</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">value</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">"like"</span>\n <span class="hljs-attr">void-icon</span>=<span class="hljs-string">"like-o"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">"{{ 25 }}"</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">"#ffd21e"</span>\n <span class="hljs-attr">void-icon</span>=<span class="hljs-string">"star"</span>\n <span class="hljs-attr">void-color</span>=<span class="hljs-string">"#eee"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ban-xing" tabindex="-1">\u534A\u661F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">allow-half</span>\n <span class="hljs-attr">void-icon</span>=<span class="hljs-string">"star"</span>\n <span class="hljs-attr">void-color</span>=<span class="hljs-string">"#eee"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">2.5</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">value</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shu-liang" tabindex="-1">\u81EA\u5B9A\u4E49\u6570\u91CF</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">count</span>=<span class="hljs-string">"{{ 6 }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-du-zhuang-tai" tabindex="-1">\u53EA\u8BFB\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span> <span class="hljs-attr">readonly</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jian-ting-change-shi-jian" tabindex="-1">\u76D1\u542C change \u4E8B\u4EF6</h3><p>\u8BC4\u5206\u53D8\u5316\u65F6\uFF0C\u4F1A\u89E6\u53D1 <code>change</code> \u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">2</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u5F53\u524D\u503C\uFF1A'</span> + event.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u5F53\u524D\u5206\u503C</td><td><em>number</em></td><td>-</td></tr><tr><td>count</td><td>\u56FE\u6807\u603B\u6570</td><td><em>number</em></td><td><code>5</code></td></tr><tr><td>size</td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>20px</code></td></tr><tr><td>gutter</td><td>\u56FE\u6807\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>4px</code></td></tr><tr><td>color</td><td>\u9009\u4E2D\u65F6\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#ffd21e</code></td></tr><tr><td>void-color</td><td>\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#c7c7c7</code></td></tr><tr><td>icon</td><td>\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>star</code></td></tr><tr><td>void-icon</td><td>\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>star-o</code></td></tr><tr><td>allow-half</td><td>\u662F\u5426\u5141\u8BB8\u534A\u9009</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001 \b</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8BC4\u5206</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled-color</td><td>\u7981\u7528\u65F6\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#bdbdbd</code></td></tr><tr><td>touchable</td><td>\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u6ED1\u52A8\u624B\u52BF\u9009\u62E9\u8BC4\u5206</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u5F53\u524D\u5206\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail:\u5F53\u524D\u5206\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Search \u641C\u7D22</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u641C\u7D22\u573A\u666F\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-search"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/search/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>van-search</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-search</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-jian-jian-ting" tabindex="-1">\u4E8B\u4EF6\u76D1\u542C</h3><p><code>van-search</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"</span>\n <span class="hljs-attr">show-action</span>\n <span class="hljs-attr">bind:search</span>=<span class="hljs-string">"onSearch"</span>\n <span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">"onCancel"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="sou-suo-kuang-nei-rong-dui-qi" tabindex="-1">\u641C\u7D22\u6846\u5185\u5BB9\u5BF9\u9F50</h3><p>\u901A\u8FC7 <code>input-align</code> \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">input-align</span>=<span class="hljs-string">"center"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-sou-suo-kuang" tabindex="-1">\u7981\u7528\u641C\u7D22\u6846</h3><p>\u901A\u8FC7 <code>disabled</code> \u5C5E\u6027\u53EF\u4EE5\u5C06\u7EC4\u4EF6\u8BBE\u7F6E\u4E3A\u7981\u7528\u72B6\u6001\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-search</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-bei-jing-se" tabindex="-1">\u81EA\u5B9A\u4E49\u80CC\u666F\u8272</h3><p>\u901A\u8FC7<code>background</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5916\u90E8\u7684\u80CC\u666F\u8272\uFF0C\u901A\u8FC7<code>shape</code>\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A<code>round</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">shape</span>=<span class="hljs-string">"round"</span>\n <span class="hljs-attr">background</span>=<span class="hljs-string">"#4fc08d"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE</h3><p><code>van-search</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u5730\u5740"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"</span>\n <span class="hljs-attr">use-action-slot</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n <span class="hljs-attr">bind:search</span>=<span class="hljs-string">"onSearch"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"action"</span> <span class="hljs-attr">bind:tap</span>=<span class="hljs-string">"onClick"</span>></span>\u641C\u7D22<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-search</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">value</span>: e.<span class="hljs-property">detail</span>,\n });\n },\n <span class="hljs-title function_">onSearch</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u641C\u7D22'</span> + <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">value</span>);\n },\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u641C\u7D22'</span> + <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">value</span>);\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>label</td><td>\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A <code>round</code></td><td><em>string</em></td><td><code>square</code></td></tr><tr><td>value</td><td>\u5F53\u524D\u8F93\u5165\u7684\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>background</td><td>\u641C\u7D22\u6846\u80CC\u666F\u8272</td><td><em>string</em></td><td><code>#f2f2f2</code></td></tr><tr><td>show-action</td><td>\u662F\u5426\u5728\u641C\u7D22\u6846\u53F3\u4FA7\u663E\u793A\u53D6\u6D88\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>action-text <code>v1.0.0</code></td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>focus</td><td>\u83B7\u53D6\u7126\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error</td><td>\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8F93\u5165\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>\u662F\u5426\u53EA\u8BFB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clearable</td><td>\u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>clear-trigger <code>v1.8.4</code></td><td>\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0C<code>always</code> \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C<br><code>focus</code> \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A</td><td><em>string</em></td><td><code>focus</code></td></tr><tr><td>clear-icon <code>v1.8.4</code></td><td>\u6E05\u9664<a href="#/icon">\u56FE\u6807\u540D\u79F0</a>\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td><code>clear</code></td></tr><tr><td>maxlength</td><td>\u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>use-action-slot</td><td>\u662F\u5426\u4F7F\u7528 action slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>placeholder</td><td>\u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>placeholder-style</td><td>\u6307\u5B9A\u5360\u4F4D\u7B26\u7684\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>input-align</td><td>\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td><td><em>string</em></td><td><code>left</code></td></tr><tr><td>use-left-icon-slot</td><td>\u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807 slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-right-icon-slot</td><td>\u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807 slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>left-icon</td><td>\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\uFF09</td><td><em>string</em></td><td><code>search</code></td></tr><tr><td>right-icon</td><td>\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\uFF09</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:search</td><td>\u786E\u5B9A\u641C\u7D22\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:change</td><td>\u8F93\u5165\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:cancel</td><td>\u53D6\u6D88\u641C\u7D22\u641C\u7D22\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:focus</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:blur</td><td>\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:clear</td><td>\u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-input</td><td>\u70B9\u51FB\u641C\u7D22\u533A\u57DF\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>action</td><td>\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u53F3\u4FA7\u6309\u94AE\uFF0C\u9700\u8981\u5728<code>use-action-slot</code>\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A</td></tr><tr><td>label</td><td>\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C</td></tr><tr><td>left-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728<code>use-left-icon-slot</code>\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728<code>use-right-icon-slot</code>\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>field-class</td><td>\u641C\u7D22\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>input-class</td><td>\u8F93\u5165\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>cancel-class</td><td>\u53D6\u6D88\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>ShareSheet \u5206\u4EAB\u9762\u677F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-share-sheet"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/share-sheet/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u5206\u4EAB\u9762\u677F\u901A\u8FC7 <code>options</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u663E\u793A\u5206\u4EAB\u9762\u677F"</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClick"</span> /></span>\n<span class="hljs-tag"><<span class="hljs-name">van-share-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ showShare }}"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"</span>\n <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ options }}"</span>\n <span class="hljs-attr">bind:select</span>=<span class="hljs-string">"onSelect"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5FAE\u4FE1'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'wechat'</span>, <span class="hljs-attr">openType</span>: <span class="hljs-string">'share'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5FAE\u535A'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'weibo'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u590D\u5236\u94FE\u63A5'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'link'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5206\u4EAB\u6D77\u62A5'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'poster'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u4E8C\u7EF4\u7801'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'qrcode'</span> },\n ],\n },\n\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">showShare</span>: <span class="hljs-literal">true</span> });\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span> });\n },\n\n <span class="hljs-title function_">onSelect</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(event.<span class="hljs-property">detail</span>.<span class="hljs-property">name</span>);\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onClose</span>();\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-duo-xing-xuan-xiang" tabindex="-1">\u5C55\u793A\u591A\u884C\u9009\u9879</h3><p>\u5F53\u5206\u4EAB\u9009\u9879\u7684\u6570\u91CF\u8F83\u591A\u65F6\uFF0C\u53EF\u4EE5\u5C06 <code>options</code> \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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-share-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ showShare }}"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"</span>\n <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ options }}"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5FAE\u4FE1'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'wechat'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5FAE\u535A'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'weibo'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'QQ'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'qq'</span> },\n ],\n [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u590D\u5236\u94FE\u63A5'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'link'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5206\u4EAB\u6D77\u62A5'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'poster'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u4E8C\u7EF4\u7801'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'qrcode'</span> },\n ],\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u9664\u4E86\u4F7F\u7528\u5185\u7F6E\u7684\u51E0\u79CD\u56FE\u6807\u5916\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728 <code>icon</code> \u4E2D\u4F20\u5165\u56FE\u7247 URL \u6765\u4F7F\u7528\u81EA\u5B9A\u4E49\u7684\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-share-sheet</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ showShare }}"</span> <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ options }}"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u540D\u79F0'</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/custom-icon-fire.png'</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u540D\u79F0'</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/custom-icon-light.png'</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u540D\u79F0'</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/custom-icon-water.png'</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-miao-shu-xin-xi" tabindex="-1">\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F</h3><p>\u901A\u8FC7 <code>description</code> \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57, \u5728 <code>options</code> \u5185\u8BBE\u7F6E <code>description</code> \u5C5E\u6027\u53EF\u4EE5\u6DFB\u52A0\u5206\u4EAB\u9009\u9879\u63CF\u8FF0\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-share-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ showShare }}"</span>\n <span class="hljs-attr">options</span>=<span class="hljs-string">"{{ options }}"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB"</span>\n <span class="hljs-attr">description</span>=<span class="hljs-string">"\u63CF\u8FF0\u4FE1\u606F"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5FAE\u4FE1'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'wechat'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5FAE\u535A'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'weibo'</span> },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u590D\u5236\u94FE\u63A5'</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'link'</span>,\n <span class="hljs-attr">description</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u5206\u4EAB\u6D77\u62A5'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'poster'</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">'\u4E8C\u7EF4\u7801'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'qrcode'</span> },\n ],\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>options</td><td>\u5206\u4EAB\u9009\u9879</td><td><em>Option[]</em></td><td><code>[]</code></td></tr><tr><td>title</td><td>\u9876\u90E8\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>cancel-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>'\u53D6\u6D88'</code></td></tr><tr><td>description</td><td>\u6807\u9898\u4E0B\u65B9\u7684\u8F85\u52A9\u63CF\u8FF0\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2</td><td><em>number | string</em></td><td><code>300</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="option-shu-ju-jie-gou" tabindex="-1">Option \u6570\u636E\u7ED3\u6784</h3><p><code>options</code>\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</p><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>name</td><td>\u5206\u4EAB\u6E20\u9053\u540D\u79F0</td><td><em>string</em></td></tr><tr><td>description</td><td>\u5206\u4EAB\u9009\u9879\u63CF\u8FF0</td><td><em>string</em></td></tr><tr><td>icon</td><td>\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u4E3A <code>qq</code> <code>link</code> <code>weibo</code> <code>wechat</code> <code>poster</code> <code>qrcode</code> <code>weapp-qrcode</code> <code>wechat-moments</code>\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL</td><td><em>string</em></td></tr><tr><td>openType</td><td>\u6309\u94AE <code>open-type</code>\uFF0C\u53EF\u7528\u4E8E\u5B9E\u73B0\u5206\u4EAB\u529F\u80FD\uFF0C\u53EF\u9009\u503C\u4E3A <code>share</code></td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>select</td><td>\u70B9\u51FB\u5206\u4EAB\u9009\u9879\u65F6\u89E6\u53D1</td><td><em>option: Option, index: number</em></td></tr><tr><td>close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898</td></tr><tr><td>description</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57</td></tr></tbody></table></div>', 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('<h1>Sidebar \u4FA7\u8FB9\u5BFC\u822A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-sidebar"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/sidebar/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-sidebar-item"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/sidebar-item/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7\u5728<code>van-sidebar</code>\u4E0A\u8BBE\u7F6E<code>activeKey</code>\u5C5E\u6027\u6765\u63A7\u5236\u9009\u4E2D\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">"{{ activeKey }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sidebar</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeKey</span>: <span class="hljs-number">0</span>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="hui-biao-ti-shi" tabindex="-1">\u5FBD\u6807\u63D0\u793A</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>badge</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">"{{ activeKey }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> <span class="hljs-attr">dot</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">"5"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">"99+"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sidebar</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-xuan-xiang" tabindex="-1">\u7981\u7528\u9009\u9879</h3><p>\u901A\u8FC7<code>disabled</code>\u5C5E\u6027\u7981\u7528\u9009\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">"{{ activeKey }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> <span class="hljs-attr">disabled</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sidebar</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jian-ting-qie-huan-shi-jian" tabindex="-1">\u76D1\u542C\u5207\u6362\u4E8B\u4EF6</h3><p>\u8BBE\u7F6E<code>change</code>\u65B9\u6CD5\u6765\u76D1\u542C\u5207\u6362\u5BFC\u822A\u9879\u65F6\u7684\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">"{{ activeKey }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D 1"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D 2"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E\u540D 3"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sidebar</span>></span>\n\n<span class="hljs-tag"><<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-notify"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Notify</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'@vant/weapp/dist/notify/notify'</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeKey</span>: <span class="hljs-number">0</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">'primary'</span>, <span class="hljs-attr">message</span>: event.<span class="hljs-property">detail</span> });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="sidebar-props" tabindex="-1">Sidebar Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>activeKey</td><td>\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td><td><em>string | number</em></td><td><code>0</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebar-event" tabindex="-1">Sidebar Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u5207\u6362\u5FBD\u7AE0\u65F6\u89E6\u53D1</td><td>\u5F53\u524D\u9009\u4E2D\u5FBD\u7AE0\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebar-wai-bu-yang-shi-lei" tabindex="-1">Sidebar \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-props" tabindex="-1">SidebarItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u5185\u5BB9</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9\uFF08\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 badge \u5C5E\u6027\uFF09</td><td><em>string | number</em></td><td><code>''</code></td></tr><tr><td>badge <code>v1.5.0</code></td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9</td><td><em>string | number</em></td><td><code>''</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8BE5\u9879</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-slot" tabindex="-1">SidebarItem Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-event" tabindex="-1">SidebarItem Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB\u5FBD\u7AE0\u65F6\u89E6\u53D1</td><td><code>event.detail</code> \u4E3A\u5F53\u524D\u5FBD\u7AE0\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-wai-bu-yang-shi-lei" tabindex="-1">SidebarItem \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Skeleton \u9AA8\u67B6\u5C4F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5728\u5185\u5BB9\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u5C55\u793A\u4E00\u7EC4\u5360\u4F4D\u56FE\u5F62\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-skeleton"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/skeleton/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>title</code>\u5C5E\u6027\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE\uFF0C\u901A\u8FC7<code>row</code>\u5C5E\u6027\u914D\u7F6E\u5360\u4F4D\u6BB5\u843D\u884C\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">row</span>=<span class="hljs-string">"3"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-shi-tou-xiang" tabindex="-1">\u663E\u793A\u5934\u50CF</h3><p>\u901A\u8FC7<code>avatar</code>\u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">avatar</span> <span class="hljs-attr">row</span>=<span class="hljs-string">"3"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-zi-zu-jian" tabindex="-1">\u5C55\u793A\u5B50\u7EC4\u4EF6</h3><p>\u5C06<code>loading</code>\u5C5E\u6027\u8BBE\u7F6E\u6210<code>false</code>\u8868\u793A\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\uFF0C\u6B64\u65F6\u4F1A\u9690\u85CF\u5360\u4F4D\u56FE\uFF0C\u5E76\u663E\u793A<code>Skeleton</code>\u7684\u5B50\u7EC4\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">avatar</span> <span class="hljs-attr">row</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">"{{ loading }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span>></span>\u5B9E\u9645\u5185\u5BB9<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-skeleton</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span>,\n },\n <span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span>,\n });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>row</td><td>\u6BB5\u843D\u5360\u4F4D\u56FE\u884C\u6570</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>row-width</td><td>\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6\uFF0C\u53EF\u4F20\u6570\u7EC4\u6765\u8BBE\u7F6E\u6BCF\u4E00\u884C\u7684\u5BBD\u5EA6</td><td><em>string | string[]</em></td><td><code>100%</code></td></tr><tr><td>title</td><td>\u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-width</td><td>\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6</td><td><em>string | number</em></td><td><code>40%</code></td></tr><tr><td>avatar</td><td>\u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>avatar-size</td><td>\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0F</td><td><em>string | number</em></td><td><code>32px</code></td></tr><tr><td>avatar-shape</td><td>\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A<code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u5360\u4F4D\u56FE\uFF0C\u4F20<code>false</code>\u65F6\u4F1A\u5C55\u793A\u5B50\u7EC4\u4EF6\u5185\u5BB9</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>animate</td><td>\u662F\u5426\u5F00\u542F\u52A8\u753B</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div>', 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('<h1>Slider \u6ED1\u5757</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u6ED1\u52A8\u8F93\u5165\u6761\uFF0C\u7528\u4E8E\u5728\u7ED9\u5B9A\u7684\u8303\u56F4\u5185\u9009\u62E9\u4E00\u4E2A\u503C\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-slider"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/slider/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span>,\n <span class="hljs-attr">title</span>: <span class="hljs-string">`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">${event.detail}</span>`</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shuang-hua-kuai" tabindex="-1">\u53CC\u6ED1\u5757</h3><p>\u6DFB\u52A0 <code>range</code> \u5C5E\u6027\u5C31\u53EF\u4EE5\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F\uFF0C\u786E\u4FDD <code>value</code> \u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 10, 50 }}"</span> <span class="hljs-attr">range</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span>,\n <span class="hljs-attr">title</span>: <span class="hljs-string">`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">${event.detail}</span>`</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-xuan-ze-fan-wei" tabindex="-1">\u6307\u5B9A\u9009\u62E9\u8303\u56F4</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"-50"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"50"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong" tabindex="-1">\u7981\u7528</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">disabled</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-bu-chang" tabindex="-1">\u6307\u5B9A\u6B65\u957F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">step</span>=<span class="hljs-string">"10"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">bar-height</span>=<span class="hljs-string">"4px"</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#ee0a24"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ currentValue }}"</span> <span class="hljs-attr">use-button-slot</span> <span class="hljs-attr">bind:drag</span>=<span class="hljs-string">"onDrag"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"custom-button"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"button"</span>></span>{{ currentValue }}/100<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-slider</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentValue</span>: <span class="hljs-number">50</span>,\n },\n\n <span class="hljs-title function_">onDrag</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentValue</span>: event.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-fang-xiang" tabindex="-1">\u5782\u76F4\u65B9\u5411</h3><p>\u8BBE\u7F6E <code>vertical</code> \u5C5E\u6027\u540E\uFF0C\u6ED1\u5757\u4F1A\u5782\u76F4\u5C55\u793A\uFF0C\u4E14\u9AD8\u5EA6\u4E3A 100% \u7236\u5143\u7D20\u9AD8\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 150px;"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-slider</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ [10, 50] }}"</span>\n <span class="hljs-attr">range</span>\n <span class="hljs-attr">vertical</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 100px;"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span>,\n <span class="hljs-attr">title</span>: <span class="hljs-string">`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">${event.detail}</span>`</span>,\n });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u8FDB\u5EA6\u767E\u5206\u6BD4\uFF0C\u5728\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\u4E3A\u6570\u7EC4\u683C\u5F0F</td><td><em>number | number[]</em></td><td><code>0</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6ED1\u5757</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>max</td><td>\u6700\u5927\u503C</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>min</td><td>\u6700\u5C0F\u503C</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>step</td><td>\u6B65\u957F</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>bar-height</td><td>\u8FDB\u5EA6\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>2px</code></td></tr><tr><td>active-color</td><td>\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u989C\u8272</td><td><em>string</em></td><td><code>#e5e5e5</code></td></tr><tr><td>use-slot-button</td><td>\u662F\u5426\u4F7F\u7528\u6309\u94AE\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>range <code>v1.8.4</code></td><td>\u662F\u5426\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>vertical <code>v1.8.5</code></td><td>\u662F\u5426\u5782\u76F4\u5C55\u793A</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:drag</td><td>\u62D6\u52A8\u8FDB\u5EA6\u6761\u65F6\u89E6\u53D1</td><td>event.detail.value: \u5F53\u524D\u8FDB\u5EA6</td></tr><tr><td>bind:change</td><td>\u8FDB\u5EA6\u503C\u6539\u53D8\u540E\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8FDB\u5EA6</td></tr><tr><td>bind:drag-start</td><td>\u5F00\u59CB\u62D6\u52A8\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:drag-end</td><td>\u7ED3\u675F\u62D6\u52A8\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>button</td><td>\u81EA\u5B9A\u4E49\u6ED1\u5757\u6309\u94AE</td><td><em>{ value: number }</em></td></tr><tr><td>left-button <code>v1.8.4</code></td><td>\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09</td><td><em>{ value: number }</em></td></tr><tr><td>right-button <code>v1.8.4</code></td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6ED1\u5757\u6309\u94AE \uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09</td><td><em>{ value: number }</em></td></tr></tbody></table></div>', 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('<h1>Stepper \u6B65\u8FDB\u5668</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-stepper"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/stepper/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u8BBE\u7F6E\u8F93\u5165\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>change</code>\u4E8B\u4EF6\u76D1\u542C\u5230\u8F93\u5165\u503C\u7684\u53D8\u5316\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 1 }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="bu-chang-she-zhi" tabindex="-1">\u6B65\u957F\u8BBE\u7F6E</h3><p>\u901A\u8FC7<code>step</code>\u5C5E\u6027\u8BBE\u7F6E\u6BCF\u6B21\u70B9\u51FB\u589E\u52A0\u6216\u51CF\u5C11\u6309\u94AE\u65F6\u53D8\u5316\u7684\u503C\uFF0C\u9ED8\u8BA4\u4E3A<code>1</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 1 }}"</span> <span class="hljs-attr">step</span>=<span class="hljs-string">"2"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shu-ru-fan-wei" tabindex="-1">\u9650\u5236\u8F93\u5165\u8303\u56F4</h3><p>\u901A\u8FC7<code>min</code>\u548C<code>max</code>\u5C5E\u6027\u9650\u5236\u8F93\u5165\u503C\u7684\u8303\u56F4\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 5 }}"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"8"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shu-ru-zheng-shu" tabindex="-1">\u9650\u5236\u8F93\u5165\u6574\u6570</h3><p>\u8BBE\u7F6E<code>integer</code>\u5C5E\u6027\u540E\uFF0C\u8F93\u5165\u6846\u5C06\u9650\u5236\u53EA\u80FD\u8F93\u5165\u6574\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 1 }}"</span> <span class="hljs-attr">integer</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>disabled</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 1 }}"</span> <span class="hljs-attr">disabled</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="guan-bi-chang-an" tabindex="-1">\u5173\u95ED\u957F\u6309</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>long-press</code>\u5C5E\u6027\u51B3\u5B9A\u6B65\u8FDB\u5668\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 1 }}"</span> <span class="hljs-attr">long-press</span>=<span class="hljs-string">"{{ false }}"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="gu-ding-xiao-shu-wei-shu" tabindex="-1">\u56FA\u5B9A\u5C0F\u6570\u4F4D\u6570</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>decimal-length</code>\u5C5E\u6027\u53EF\u4EE5\u4FDD\u7559\u56FA\u5B9A\u7684\u5C0F\u6570\u4F4D\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 1 }}"</span> <span class="hljs-attr">step</span>=<span class="hljs-string">"0.2"</span> <span class="hljs-attr">decimal-length</span>=<span class="hljs-string">"{{ 1 }}"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-bian-geng" tabindex="-1">\u5F02\u6B65\u53D8\u66F4</h3><p>\u5982\u679C\u9700\u8981\u5F02\u6B65\u5730\u4FEE\u6539\u8F93\u5165\u6846\u7684\u503C\uFF0C\u53EF\u4EE5\u8BBE\u7F6E<code>async-change</code>\u5C5E\u6027\uFF0C\u5E76\u5728<code>change</code>\u4E8B\u4EF6\u4E2D\u624B\u52A8\u4FEE\u6539<code>value</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ value }}"</span> <span class="hljs-attr">async-change</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">1</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">value</span>) {\n <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({ <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span> });\n\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">clear</span>();\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ value });\n }, <span class="hljs-number">500</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><p>\u901A\u8FC7<code>input-width</code>\u5C5E\u6027\u8BBE\u7F6E\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u901A\u8FC7<code>button-size</code>\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u5927\u5C0F\u548C\u8F93\u5165\u6846\u9AD8\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ 1 }}"</span> <span class="hljs-attr">input-width</span>=<span class="hljs-string">"40px"</span> <span class="hljs-attr">button-size</span>=<span class="hljs-string">"32px"</span> /></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u8F93\u5165\u503C</td><td><em>string | number</em></td><td>\u6700\u5C0F\u503C</td></tr><tr><td>min</td><td>\u6700\u5C0F\u503C</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>max</td><td>\u6700\u5927\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>step</td><td>\u6B65\u957F</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>integer</td><td>\u662F\u5426\u53EA\u5141\u8BB8\u8F93\u5165\u6574\u6570</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disable-input</td><td>\u662F\u5426\u7981\u7528\u8F93\u5165\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>async-change</td><td>\u662F\u5426\u5F00\u542F\u5F02\u6B65\u53D8\u66F4\uFF0C\u5F00\u542F\u540E\u9700\u8981\u624B\u52A8\u63A7\u5236\u8F93\u5165\u503C</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>input-width</td><td>\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>32px</code></td></tr><tr><td>button-size</td><td>\u6309\u94AE\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code>\uFF0C\u8F93\u5165\u6846\u9AD8\u5EA6\u4F1A\u548C\u6309\u94AE\u5927\u5C0F\u4FDD\u6301\u4E00\u81F4</td><td><em>string | number</em></td><td><code>28px</code></td></tr><tr><td>show-plus</td><td>\u662F\u5426\u663E\u793A\u589E\u52A0\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-minus</td><td>\u662F\u5426\u663E\u793A\u51CF\u5C11\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>decimal-length</td><td>\u56FA\u5B9A\u663E\u793A\u7684\u5C0F\u6570\u4F4D\u6570</td><td><em>number</em></td><td>-</td></tr><tr><td>theme</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A <code>round</code></td><td><em>string</em></td><td>-</td></tr><tr><td>disable-plus</td><td>\u662F\u5426\u7981\u7528\u589E\u52A0\u6309\u94AE</td><td><em>boolean</em></td><td>-</td></tr><tr><td>disable-minus</td><td>\u662F\u5426\u7981\u7528\u51CF\u5C11\u6309\u94AE</td><td><em>boolean</em></td><td>-</td></tr><tr><td>long-press</td><td>\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u7684\u503C</td></tr><tr><td>bind:overlimit</td><td>\u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:plus</td><td>\u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:minus</td><td>\u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:focus</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:blur</td><td>\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>plus</td><td>\u52A0\u53F7\u6309\u94AE</td></tr><tr><td>minus</td><td>\u51CF\u53F7\u6309\u94AE</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>input-class</td><td>\u8F93\u5165\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>plus-class</td><td>\u52A0\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr><tr><td>minus-class</td><td>\u51CF\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Steps \u6B65\u9AA4\u6761</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-steps"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/steps/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-steps</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">"{{ steps }}"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">steps</span>: [\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u4E00'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u4E8C'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u4E09'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u56DB'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><p>\u53EF\u4EE5\u901A\u8FC7 <code>active-icon</code> \u548C <code>active-color</code> \u5C5E\u6027\u8BBE\u7F6E\u6FC0\u6D3B\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u548C\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-steps</span>\n <span class="hljs-attr">steps</span>=<span class="hljs-string">"{{ steps }}"</span>\n <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span>\n <span class="hljs-attr">active-icon</span>=<span class="hljs-string">"success"</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#38f"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u53EF\u4EE5\u901A\u8FC7 <code>inactiveIcon</code> \u548C <code>activeIcon</code> \u5C5E\u6027\u5206\u522B\u8BBE\u7F6E\u6BCF\u4E00\u9879\u7684\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-steps</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">"{{ steps }}"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">steps</span>: [\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u4E00'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">'location-o'</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">'success'</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u4E8C'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">'like-o'</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">'plus'</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u4E09'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">'star-o'</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">'cross'</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6B65\u9AA4\u56DB'</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">'\u63CF\u8FF0\u4FE1\u606F'</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">'phone-o'</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">'fail'</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shu-xiang-bu-zou-tiao" tabindex="-1">\u7AD6\u5411\u6B65\u9AA4\u6761</h3><p>\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E<code>direction</code>\u5C5E\u6027\u6765\u6539\u53D8\u6B65\u9AA4\u6761\u7684\u663E\u793A\u65B9\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-steps</span>\n <span class="hljs-attr">steps</span>=<span class="hljs-string">"{{ steps }}"</span>\n <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span>\n <span class="hljs-attr">direction</span>=<span class="hljs-string">"vertical"</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#ee0a24"</span>\n/></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="steps-props" tabindex="-1">Steps Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>active</td><td>\u5F53\u524D\u6B65\u9AA4</td><td><em>number</em></td><td>0</td></tr><tr><td>direction</td><td>\u663E\u793A\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code> <code>vertical</code></td><td><em>string</em></td><td><code>horizontal</code></td></tr><tr><td>active-color</td><td>\u6FC0\u6D3B\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#07c160</code></td></tr><tr><td>inactive-color</td><td>\u672A\u6FC0\u6D3B\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#969799</code></td></tr><tr><td>active-icon</td><td>\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>checked</code></td></tr><tr><td>inactive-icon</td><td>\u672A\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click-step</td><td>\u70B9\u51FB\u6B65\u9AA4\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail:\u5F53\u524D\u6B65\u9AA4\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>desc-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Sticky \u7C98\u6027\u5E03\u5C40</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Sticky \u7EC4\u4EF6\u4E0E CSS \u4E2D<code>position: sticky</code>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-sticky"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/sticky/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u5C06\u5185\u5BB9\u5305\u88F9\u5728<code>Sticky</code>\u7EC4\u4EF6\u5185\u5373\u53EF\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sticky</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u57FA\u7840\u7528\u6CD5<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="xi-ding-ju-chi" tabindex="-1">\u5438\u9876\u8DDD\u79BB</h3><p>\u901A\u8FC7<code>offset-top</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-sticky</span> <span class="hljs-attr">offset-top</span>=<span class="hljs-string">"{{ 50 }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>></span>\u5438\u9876\u8DDD\u79BB<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-rong-qi" tabindex="-1">\u6307\u5B9A\u5BB9\u5668</h3><p>\u901A\u8FC7<code>container</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 150px;"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sticky</span> <span class="hljs-attr">container</span>=<span class="hljs-string">"{{ container }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>\u6307\u5B9A\u5BB9\u5668<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">container</span>: <span class="hljs-literal">null</span>,\n },\n\n <span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">container</span>: <span class="hljs-function">() =></span> wx.<span class="hljs-title function_">createSelectorQuery</span>().<span class="hljs-title function_">select</span>(<span class="hljs-string">'#container'</span>),\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="qian-tao-zai-scroll-view-nei-shi-yong" tabindex="-1">\u5D4C\u5957\u5728 scroll-view \u5185\u4F7F\u7528</h3><p>\u901A\u8FC7 <code>scroll-top</code> \u4E0E <code>offset-top</code> \u5C5E\u6027\u53EF\u4EE5\u5B9E\u73B0\u5728 scroll-view \u5185\u5D4C\u5957\u4F7F\u7528\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">scroll-view</span>\n <span class="hljs-attr">bind:scroll</span>=<span class="hljs-string">"onScroll"</span>\n <span class="hljs-attr">scroll-y</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">"scroller"</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px;"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 400px; padding-top: 50px;"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-sticky</span> <span class="hljs-attr">scroll-top</span>=<span class="hljs-string">"{{ scrollTop }}"</span> <span class="hljs-attr">offset-top</span>=<span class="hljs-string">"{{ offsetTop }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>\u5D4C\u5957\u5728 scroll-view \u5185<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-sticky</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">scroll-view</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">scrollTop</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">offsetTop</span>: <span class="hljs-number">0</span>,\n },\n\n <span class="hljs-title function_">onScroll</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">createSelectorQuery</span>()\n .<span class="hljs-title function_">select</span>(<span class="hljs-string">'#scroller'</span>)\n .<span class="hljs-title function_">boundingClientRect</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =></span> {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">scrollTop</span>: event.<span class="hljs-property">detail</span>.<span class="hljs-property">scrollTop</span>,\n <span class="hljs-attr">offsetTop</span>: res.<span class="hljs-property">top</span>,\n });\n })\n .<span class="hljs-title function_">exec</span>();\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>offset-top</td><td>\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u5355\u4F4D<code>px</code></td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>z-index</td><td>\u5438\u9876\u65F6\u7684 z-index</td><td><em>number</em></td><td><code>99</code></td></tr><tr><td>container</td><td>\u4E00\u4E2A\u51FD\u6570\uFF0C\u8FD4\u56DE\u5BB9\u5668\u5BF9\u5E94\u7684 NodesRef \u8282\u70B9</td><td><em>function</em></td><td>-</td></tr><tr><td>scroll-top</td><td>\u5F53\u524D\u6EDA\u52A8\u533A\u57DF\u7684\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u975E <code>null</code> \u65F6\u4F1A\u7981\u7528\u9875\u9762\u6EDA\u52A8\u4E8B\u4EF6\u7684\u76D1\u542C</td><td><em>number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>scroll</td><td>\u6EDA\u52A8\u65F6\u89E6\u53D1</td><td>{ scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 }</td></tr></tbody></table></div>', 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('<h1>SubmitBar \u63D0\u4EA4\u8BA2\u5355\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C55\u793A\u8BA2\u5355\u91D1\u989D\u4E0E\u63D0\u4EA4\u8BA2\u5355\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-submit-bar"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/submit-bar/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">"{{ 3050 }}"</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">"\u63D0\u4EA4\u8BA2\u5355"</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">"onSubmit"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u7981\u7528\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1<code>submit</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">disabled</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">"{{ 3050 }}"</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">"\u63D0\u4EA4\u8BA2\u5355"</span>\n <span class="hljs-attr">tip</span>=<span class="hljs-string">"\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, \u6211\u4EEC\u5DF2\u4E3A\u60A8\u63A8\u8350\u5FEB\u9012"</span>\n <span class="hljs-attr">tip-icon</span>=<span class="hljs-string">"info-o"</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">"onSubmit"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><p>\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1<code>submit</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">loading</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">"{{ 3050 }}"</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">"\u63D0\u4EA4\u8BA2\u5355"</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">"onSubmit"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u901A\u8FC7\u63D2\u69FD\u63D2\u5165\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">"{{ 3050 }}"</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">"\u63D0\u4EA4\u8BA2\u5355"</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">"onClickButton"</span>\n <span class="hljs-attr">tip</span>=<span class="hljs-string">"{{ true }}"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"tip"</span>></span>\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, <span class="hljs-tag"><<span class="hljs-name">text</span>></span>\u4FEE\u6539\u5730\u5740<span class="hljs-tag"></<span class="hljs-name">text</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-submit-bar</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>price</td><td>\u4EF7\u683C\uFF08\u5355\u4F4D\u5206\uFF09</td><td><em>number</em></td><td>-</td></tr><tr><td>label</td><td>\u4EF7\u683C\u6587\u6848</td><td><em>string</em></td><td><code>\u5408\u8BA1\uFF1A</code></td></tr><tr><td>suffix-label</td><td>\u4EF7\u683C\u53F3\u4FA7\u6587\u6848</td><td><em>string</em></td><td>-</td></tr><tr><td>button-text</td><td>\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>button-type</td><td>\u6309\u94AE\u7C7B\u578B</td><td><em>string</em></td><td><code>danger</code></td></tr><tr><td>tip</td><td>\u63D0\u793A\u6587\u6848</td><td><em>string | boolean</em></td><td>-</td></tr><tr><td>tip-icon</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u4E2D\u7684\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>currency</td><td>\u8D27\u5E01\u7B26\u53F7</td><td><em>string</em></td><td><code>\xA5</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>decimal-length</td><td>\u4EF7\u683C\u5C0F\u6570\u70B9\u540E\u4F4D\u6570</td><td><em>number</em></td><td><code>2</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>submit</td><td>\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u5DE6\u4FA7\u5185\u5BB9</td></tr><tr><td>top</td><td>\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u4E0A\u65B9\u5185\u5BB9</td></tr><tr><td>tip</td><td>\u63D0\u793A\u6587\u6848\u4E2D\u7684\u989D\u5916\u64CD\u4F5C\u548C\u8BF4\u660E</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>price-class</td><td>\u4EF7\u683C\u6837\u5F0F\u7C7B</td></tr><tr><td>button-class</td><td>\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr><tr><td>bar-class</td><td>\u8BA2\u5355\u680F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>SwipeCell \u6ED1\u52A8\u5355\u5143\u683C</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u53EF\u4EE5\u5DE6\u53F3\u6ED1\u52A8\u6765\u5C55\u793A\u64CD\u4F5C\u6309\u94AE\u7684\u5355\u5143\u683C\u7EC4\u4EF6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-swipe-cell"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/swipe-cell/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-swipe-cell</span> <span class="hljs-attr">right-width</span>=<span class="hljs-string">"{{ 65 }}"</span> <span class="hljs-attr">left-width</span>=<span class="hljs-string">"{{ 65 }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"left"</span>></span>\u9009\u62E9<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>\u5220\u9664<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-swipe-cell</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-guan-bi" tabindex="-1">\u5F02\u6B65\u5173\u95ED</h3><p>\u5F53\u5F00\u542F<code>async-close</code>\u65F6\uFF0C \u901A\u8FC7\u7ED1\u5B9A<code>close</code>\u4E8B\u4EF6\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u5185\u5BB9\u70B9\u51FB\u65F6\u7684\u5173\u95ED\u884C\u4E3A\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-swipe-cell</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">"swipe-cell"</span>\n <span class="hljs-attr">right-width</span>=<span class="hljs-string">"{{ 65 }}"</span>\n <span class="hljs-attr">left-width</span>=<span class="hljs-string">"{{ 65 }}"</span>\n <span class="hljs-attr">async-close</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"left"</span>></span>\u9009\u62E9<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>\u5220\u9664<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-swipe-cell</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { position, instance } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-keyword">switch</span> (position) {\n <span class="hljs-keyword">case</span> <span class="hljs-string">'left'</span>:\n <span class="hljs-keyword">case</span> <span class="hljs-string">'cell'</span>:\n instance.<span class="hljs-title function_">close</span>();\n <span class="hljs-keyword">break</span>;\n <span class="hljs-keyword">case</span> <span class="hljs-string">'right'</span>:\n <span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u786E\u5B9A\u5220\u9664\u5417\uFF1F'</span>,\n }).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {\n instance.<span class="hljs-title function_">close</span>();\n });\n <span class="hljs-keyword">break</span>;\n }\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhu-dong-da-kai" tabindex="-1">\u4E3B\u52A8\u6253\u5F00</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-swipe-cell</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">"swipe-cell2"</span>\n <span class="hljs-attr">right-width</span>=<span class="hljs-string">"{{ 65 }}"</span>\n <span class="hljs-attr">left-width</span>=<span class="hljs-string">"{{ 65 }}"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"\u793A\u4F8B"</span>\n <span class="hljs-attr">bind:open</span>=<span class="hljs-string">"onOpen"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"left"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-swipe-cell__left"</span>></span>\u9009\u62E9<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u5355\u5143\u683C"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"\u5185\u5BB9"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"van-swipe-cell__right"</span>></span>\u5220\u9664<span class="hljs-tag"></<span class="hljs-name">view</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-swipe-cell</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onOpen</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { position, name } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-keyword">switch</span> (position) {\n <span class="hljs-keyword">case</span> <span class="hljs-string">'left'</span>:\n <span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">type</span>: <span class="hljs-string">'primary'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span><span class="hljs-subst">${position}</span>\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1`</span>,\n });\n <span class="hljs-keyword">break</span>;\n <span class="hljs-keyword">case</span> <span class="hljs-string">'right'</span>:\n <span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">type</span>: <span class="hljs-string">'primary'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span><span class="hljs-subst">${position}</span>\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1`</span>,\n });\n <span class="hljs-keyword">break</span>;\n }\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728 close \u4E8B\u4EF6\u7684\u53C2\u6570\u4E2D\u83B7\u53D6\u5230</td><td><em>string | number</em></td><td>-</td></tr><tr><td>left-width</td><td>\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>right-width</td><td>\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>async-close</td><td>\u662F\u5426\u5F02\u6B65\u5173\u95ED</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled <code>v1.3.4</code></td><td>\u662F\u5426\u7981\u7528\u6ED1\u52A8</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9</td></tr><tr><td>left</td><td>\u5DE6\u4FA7\u6ED1\u52A8\u5185\u5BB9</td></tr><tr><td>right</td><td>\u53F3\u4FA7\u6ED1\u52A8\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB\u65F6\u89E6\u53D1</td><td>\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (<code>left</code> <code>right</code> <code>cell</code> <code>outside</code>)</td></tr><tr><td>close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>{ position: \u2018left\u2019 | \u2018right\u2019 , instance , name: string }</td></tr><tr><td>open</td><td>\u6253\u5F00\u65F6\u89E6\u53D1</td><td>{ position: \u2018left\u2019 | \u2018right\u2019 , name: string }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="close-can-shu" tabindex="-1">close \u53C2\u6570</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u7C7B\u578B</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>position</td><td><em>string</em></td><td>\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (<code>left</code> <code>right</code> <code>cell</code> <code>outside</code>)</td></tr><tr><td>instance</td><td><em>object</em></td><td>SwipeCell \u5B9E\u4F8B</td></tr><tr><td>name</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 SwipeCell \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>open</td><td>position: <code>left | right</code></td><td>-</td><td>\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F</td></tr><tr><td>close</td><td>-</td><td>-</td><td>\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F</td></tr></tbody></table></div>', 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('<h1>Switch \u5F00\u5173</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5728\u6253\u5F00\u548C\u5173\u95ED\u72B6\u6001\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-switch"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/switch/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">{ detail }</span>) {\n <span class="hljs-comment">// \u9700\u8981\u624B\u52A8\u5BF9 checked \u72B6\u6001\u8FDB\u884C\u66F4\u65B0</span>\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">checked</span>: detail });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">disabled</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">loading</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"24px"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-switch</span>\n <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ checked }}"</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#07c160"</span>\n <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">"#ee0a24"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-kong-zhi" tabindex="-1">\u5F02\u6B65\u63A7\u5236</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"{{ checked }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">{ detail }</span>) {\n wx.<span class="hljs-title function_">showModal</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">'\u63D0\u793A'</span>,\n <span class="hljs-attr">content</span>: <span class="hljs-string">'\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F'</span>,\n <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =></span> {\n <span class="hljs-keyword">if</span> (res.<span class="hljs-property">confirm</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">checked2</span>: detail });\n }\n },\n });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>checked</td><td>\u5F00\u5173\u9009\u4E2D\u72B6\u6001</td><td><em>any</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>size</td><td>\u5F00\u5173\u5C3A\u5BF8</td><td><em>string</em></td><td><code>30px</code></td></tr><tr><td>active-color</td><td>\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>active-value</td><td>\u6253\u5F00\u65F6\u7684\u503C</td><td><em>any</em></td><td><code>true</code></td></tr><tr><td>inactive-value</td><td>\u5173\u95ED\u65F6\u7684\u503C</td><td><em>any</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F00\u5173\u72B6\u6001\u5207\u6362\u56DE\u8C03</td><td>event.detail: \u662F\u5426\u9009\u4E2D\u5F00\u5173</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>node-class</td><td>\u5706\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Tab \u6807\u7B7E\u9875</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u9009\u9879\u5361\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-tab"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/tab/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-tabs"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/tabs/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>active</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 4"</span>></span>\u5185\u5BB9 4<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">1</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`\u5207\u6362\u5230\u6807\u7B7E <span class="hljs-subst">${event.detail.name}</span>`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tong-guo-ming-cheng-pi-pei" tabindex="-1">\u901A\u8FC7\u540D\u79F0\u5339\u914D</h3><p>\u5728\u6807\u7B7E\u6307\u5B9A<code>name</code>\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0C<code>active</code>\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684<code>name</code>\uFF08\u6B64\u65F6\u65E0\u6CD5\u901A\u8FC7\u7D22\u5F15\u503C\u6765\u5339\u914D\u6807\u7B7E\uFF09\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"a"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"a"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"b"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"c"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="heng-xiang-gun-dong" tabindex="-1">\u6A2A\u5411\u6EDA\u52A8</h3><p>\u591A\u4E8E 5 \u4E2A\u6807\u7B7E\u65F6\uFF0CTab \u53EF\u4EE5\u6A2A\u5411\u6EDA\u52A8\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 4"</span>></span>\u5185\u5BB9 4<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 5"</span>></span>\u5185\u5BB9 5<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 6"</span>></span>\u5185\u5BB9 6<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-biao-qian" tabindex="-1">\u7981\u7528\u6807\u7B7E</h3><p>\u8BBE\u7F6E<code>disabled</code>\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<code>van-tabs</code>\u4E0A\u76D1\u542C<code>disabled</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">bind:disabled</span>=<span class="hljs-string">"onClickDisabled"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span> <span class="hljs-attr">disabled</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClickDisabled</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`\u6807\u7B7E <span class="hljs-subst">${event.detail.name}</span> \u5DF2\u88AB\u7981\u7528`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="yang-shi-feng-ge" tabindex="-1">\u6837\u5F0F\u98CE\u683C</h3><p><code>Tab</code>\u652F\u6301\u4E24\u79CD\u6837\u5F0F\u98CE\u683C\uFF1A<code>line</code>\u548C<code>card</code>\uFF0C\u9ED8\u8BA4\u4E3A<code>line</code>\u6837\u5F0F\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>type</code>\u5C5E\u6027\u4FEE\u6539\u6837\u5F0F\u98CE\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"card"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="dian-ji-shi-jian" tabindex="-1">\u70B9\u51FB\u4E8B\u4EF6</h3><p>\u53EF\u4EE5\u5728<code>van-tabs</code>\u4E0A\u7ED1\u5B9A<code>click</code>\u4E8B\u4EF6\uFF0C\u5728\u56DE\u8C03\u53C2\u6570\u7684<code>event.detail</code>\u4E2D\u53EF\u4EE5\u53D6\u5F97\u88AB\u70B9\u51FB\u6807\u7B7E\u7684\u6807\u9898\u548C\u6807\u8BC6\u7B26\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">"onClick"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`\u70B9\u51FB\u6807\u7B7E <span class="hljs-subst">${event.detail.name}</span>`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="nian-xing-bu-ju" tabindex="-1">\u7C98\u6027\u5E03\u5C40</h3><p>\u901A\u8FC7<code>sticky</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">sticky</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 4"</span>></span>\u5185\u5BB9 4<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="qie-huan-dong-hua" tabindex="-1">\u5207\u6362\u52A8\u753B</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>animated</code>\u6765\u8BBE\u7F6E\u662F\u5426\u542F\u7528\u5207\u6362 tab \u65F6\u7684\u52A8\u753B\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">animated</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 4"</span>></span>\u5185\u5BB9 4<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="hua-dong-qie-huan" tabindex="-1">\u6ED1\u52A8\u5207\u6362</h3><p>\u901A\u8FC7<code>swipeable</code>\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6ED1\u52A8\u5207\u6362\u6807\u7B7E\u9875\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">swipeable</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 4"</span>></span>\u5185\u5BB9 4<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="qian-tao-popup" tabindex="-1">\u5D4C\u5957 popup</h3><p>\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</p><p>\u6B64\u65F6\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 <code>wx:if</code> \u624B\u52A8\u63A7\u5236 van-tabs \u7684\u6E32\u67D3\u6765\u89C4\u907F\u8FD9\u79CD\u573A\u666F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{ show }}"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 1"</span>></span>\u5185\u5BB9 1<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 2"</span>></span>\u5185\u5BB9 2<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 3"</span>></span>\u5185\u5BB9 3<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"\u6807\u7B7E 4"</span>></span>\u5185\u5BB9 4<span class="hljs-tag"></<span class="hljs-name">van-tab</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-tabs</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-popup</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="tabs-props" tabindex="-1">Tabs Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A<code>card</code></td><td><em>string</em></td><td><code>line</code></td></tr><tr><td>color</td><td>\u6807\u7B7E\u4E3B\u9898\u8272</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>active</td><td>\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u6807\u8BC6\u7B26</td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2</td><td><em>number</em></td><td><code>0.3</code></td></tr><tr><td>line-width</td><td>\u5E95\u90E8\u6761\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D<code>px</code></td><td><em>string | number</em></td><td><code>40px</code></td></tr><tr><td>line-height</td><td>\u5E95\u90E8\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D<code>px</code></td><td><em>string | number</em></td><td><code>3px</code></td></tr><tr><td>animated</td><td>\u662F\u5426\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846\uFF0C\u4EC5\u5728 <code>line</code> \u98CE\u683C\u4E0B\u751F\u6548</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>ellipsis</td><td>\u662F\u5426\u7701\u7565\u8FC7\u957F\u7684\u6807\u9898\u6587\u5B57</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>sticky</td><td>\u662F\u5426\u4F7F\u7528\u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>swipeable</td><td>\u662F\u5426\u5F00\u542F\u624B\u52BF\u6ED1\u52A8\u5207\u6362</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lazy-render</td><td>\u662F\u5426\u5F00\u542F\u6807\u7B7E\u9875\u5185\u5BB9\u5EF6\u8FDF\u6E32\u67D3</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>offset-top</td><td>\u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40\u4E0B\u4E0E\u9876\u90E8\u7684\u6700\u5C0F\u8DDD\u79BB\uFF0C\u5355\u4F4D<code>px</code></td><td><em>number</em></td><td>-</td></tr><tr><td>swipe-threshold</td><td>\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</td><td><em>number</em></td><td><code>5</code></td></tr><tr><td>title-active-color</td><td>\u6807\u9898\u9009\u4E2D\u6001\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>title-inactive-color</td><td>\u6807\u9898\u9ED8\u8BA4\u6001\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>1</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tab-props" tabindex="-1">Tab Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26</td><td><em>string | number</em></td><td>\u6807\u7B7E\u7684\u7D22\u5F15\u503C</td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6807\u7B7E</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td>-</td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F</td><td><em>string | number</em></td><td>-</td></tr><tr><td>title-style</td><td>\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabs-slot" tabindex="-1">Tabs Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>nav-left</td><td>\u6807\u9898\u5DE6\u4FA7\u5185\u5BB9</td></tr><tr><td>nav-right</td><td>\u6807\u9898\u53F3\u4FA7\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tab-slot" tabindex="-1">Tab Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u6807\u7B7E\u9875\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabs-event" tabindex="-1">Tabs Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898</td></tr><tr><td>bind:change</td><td>\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E\u6539\u53D8\u65F6\u89E6\u53D1</td><td>name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898</td></tr><tr><td>bind:disabled</td><td>\u70B9\u51FB\u88AB\u7981\u7528\u7684\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898</td></tr><tr><td>bind:scroll</td><td>\u6EDA\u52A8\u65F6\u89E6\u53D1</td><td>{ scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>nav-class</td><td>\u6807\u7B7E\u680F\u6837\u5F0F\u7C7B</td></tr><tr><td>tab-class</td><td>\u6807\u7B7E\u6837\u5F0F\u7C7B</td></tr><tr><td>tab-active-class</td><td>\u6807\u7B7E\u6FC0\u6D3B\u6001\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Tabs \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>resize</td><td>-</td><td>-</td><td>\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</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="zu-jian-cong-yin-cang-zhuang-tai-qie-huan-dao-xian-shi-zhuang-tai-shi-di-bu-tiao-wei-zhi-cuo-wu" tabindex="-1">\u7EC4\u4EF6\u4ECE\u9690\u85CF\u72B6\u6001\u5207\u6362\u5230\u663E\u793A\u72B6\u6001\u65F6\uFF0C\u5E95\u90E8\u6761\u4F4D\u7F6E\u9519\u8BEF\uFF1F</h3><p>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</p><h4 id="jie-jue-fang-fa" tabindex="-1">\u89E3\u51B3\u65B9\u6CD5</h4><p>\u65B9\u6CD5\u4E00\uFF0C\u4F7F\u7528 <code>wx:if</code> \u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\uFF0C\u4F7F\u7EC4\u4EF6\u91CD\u65B0\u521D\u59CB\u5316\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"show"</span> /></span>\n</code></pre><p>\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabs</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tabs"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">'#tabs'</span>).<span class="hljs-title function_">resize</span>();\n</code></pre></div>', 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('<h1>Tabbar \u6807\u7B7E\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5E95\u90E8\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u9875\u9762\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-tabbar"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/tabbar/index"</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">"van-tabbar-item"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/tabbar-item/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"friends-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"setting-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabbar</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-comment">// event.detail \u7684\u503C\u4E3A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u7D22\u5F15</span>\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tong-guo-ming-cheng-pi-pei" tabindex="-1">\u901A\u8FC7\u540D\u79F0\u5339\u914D</h3><p>\u5728\u6807\u7B7E\u6307\u5B9A<code>name</code>\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0C<code>v-model</code>\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684<code>name</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"home"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"friends"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"friends-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"setting"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"setting-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabbar</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-string">'home'</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xian-shi-hui-biao" tabindex="-1">\u663E\u793A\u5FBD\u6807</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">dot</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"friends-o"</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"5"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"setting-o"</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"20"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabbar</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">info</span>=<span class="hljs-string">"3"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">image</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ icon.normal }}"</span>\n <span class="hljs-attr">mode</span>=<span class="hljs-string">"aspectFit"</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 30px; height: 18px;"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">image</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon-active"</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ icon.active }}"</span>\n <span class="hljs-attr">mode</span>=<span class="hljs-string">"aspectFit"</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 30px; height: 18px;"</span>\n /></span>\n \u81EA\u5B9A\u4E49\n <span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"setting-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabbar</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">icon</span>: {\n <span class="hljs-attr">normal</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/user-inactive.png'</span>,\n <span class="hljs-attr">active</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/user-active.png'</span>,\n },\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabbar</span>\n <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#07c160"</span>\n <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">"#000"</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"friends-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"setting-o"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabbar</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="qie-huan-biao-qian-shi-jian" tabindex="-1">\u5207\u6362\u6807\u7B7E\u4E8B\u4EF6</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"{{ active }}"</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">"onChange"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home-o"</span>></span>\u6807\u7B7E1<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"search"</span>></span>\u6807\u7B7E2<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"friends-o"</span>></span>\u6807\u7B7E3<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"setting-o"</span>></span>\u6807\u7B7E4<span class="hljs-tag"></<span class="hljs-name">van-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tabbar</span>></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n },\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`\u70B9\u51FB\u6807\u7B7E <span class="hljs-subst">${event.detail + <span class="hljs-number">1</span>}</span>`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jie-he-zi-ding-yi-tabbar" tabindex="-1">\u7ED3\u5408\u81EA\u5B9A\u4E49 tabBar</h3><p>\u8BF7\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a> \u4E0E <a href="https://developers.weixin.qq.com/s/vaXgTsmQ7hnm">\u4EE3\u7801\u7247\u6BB5</a>\u3002</p></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="tabbar-props" tabindex="-1">Tabbar Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>active</td><td>\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15</td><td><em>number</em></td><td>-</td></tr><tr><td>fixed</td><td>\u662F\u5426\u56FA\u5B9A\u5728\u5E95\u90E8</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>placeholder</td><td>\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</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>z-index</td><td>\u5143\u7D20 z-index</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>active-color</td><td>\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>\u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#7d7e80</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbar-event" tabindex="-1">Tabbar Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5207\u6362\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u540D\u79F0\u6216\u7D22\u5F15\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbaritem-props" tabindex="-1">TabbarItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26</td><td><em>string | number</em></td><td>\u5F53\u524D\u6807\u7B7E\u7684\u7D22\u5F15\u503C</td></tr><tr><td>icon</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>icon-prefix</td><td>\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 <a href="#/icon#props">class-prefix \u5C5E\u6027</a></td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td>-</td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F</td><td><em>string | number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbaritem-slot" tabindex="-1">TabbarItem Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>icon</td><td>\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807</td></tr><tr><td>icon-active</td><td>\u9009\u4E2D\u65F6\u7684\u56FE\u6807</td></tr></tbody></table></div>', 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('<h1>Tag \u6807\u7B7E</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u6807\u8BB0\u5173\u952E\u8BCD\u548C\u6982\u62EC\u4E3B\u8981\u5185\u5BB9\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-tag"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/tag/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7 <code>type</code> \u5C5E\u6027\u63A7\u5236\u6807\u7B7E\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u7070\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="kong-xin-yang-shi" tabindex="-1">\u7A7A\u5FC3\u6837\u5F0F</h3><p>\u8BBE\u7F6E <code>plain</code> \u5C5E\u6027\u8BBE\u7F6E\u4E3A\u7A7A\u5FC3\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-yang-shi" tabindex="-1">\u5706\u89D2\u6837\u5F0F</h3><p>\u901A\u8FC7 <code>round</code> \u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="biao-ji-yang-shi" tabindex="-1">\u6807\u8BB0\u6837\u5F0F</h3><p>\u901A\u8FC7 <code>mark</code> \u8BBE\u7F6E\u4E3A\u6807\u8BB0\u6837\u5F0F(\u534A\u5706\u89D2)\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#f2826a"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#7232dd"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#7232dd"</span> <span class="hljs-attr">plain</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#ffe1e1"</span> <span class="hljs-attr">text-color</span>=<span class="hljs-string">"#ad0000"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="biao-qian-da-xiao" tabindex="-1">\u6807\u7B7E\u5927\u5C0F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"medium"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"large"</span>></span>\u6807\u7B7E<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="ke-guan-bi-biao-qian" tabindex="-1">\u53EF\u5173\u95ED\u6807\u7B7E</h3><p>\u6DFB\u52A0 <code>closeable</code> \u5C5E\u6027\u8868\u793A\u6807\u7B7E\u662F\u53EF\u5173\u95ED\u7684\uFF0C\u5173\u95ED\u6807\u7B7E\u65F6\u4F1A\u89E6\u53D1 <code>close</code> \u4E8B\u4EF6\uFF0C\u5728 <code>close</code> \u4E8B\u4EF6\u4E2D\u53EF\u4EE5\u6267\u884C\u9690\u85CF\u6807\u7B7E\u7684\u903B\u8F91\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tag</span>\n <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{ show.primary }}"</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">"medium"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">"primary"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n></span>\n \u6807\u7B7E\n<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-tag</span>\n <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{ show.success }}"</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">"medium"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">"success"</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">"onClose"</span>\n></span>\n \u6807\u7B7E\n<span class="hljs-tag"></<span class="hljs-name">van-tag</span>></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: {\n <span class="hljs-attr">primary</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">success</span>: <span class="hljs-literal">true</span>,\n },\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n [<span class="hljs-string">`show.<span class="hljs-subst">${event.target.id}</span>`</span>]: <span class="hljs-literal">false</span>,\n });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>success</code> <code>danger</code> <code>warning</code></td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5927\u5C0F, \u53EF\u9009\u503C\u4E3A <code>large</code> <code>medium</code></td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>\u6807\u7B7E\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>plain</td><td>\u662F\u5426\u4E3A\u7A7A\u5FC3\u6837\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>round</td><td>\u662F\u5426\u4E3A\u5706\u89D2\u6837\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>mark</td><td>\u662F\u5426\u4E3A\u6807\u8BB0\u6837\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>text-color</td><td>\u6587\u672C\u989C\u8272\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E <code>color</code> \u5C5E\u6027</td><td><em>string</em></td><td><code>white</code></td></tr><tr><td>closeable</td><td>\u662F\u5426\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49 Tag \u663E\u793A\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>close</td><td>\u5173\u95ED\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Toast \u8F7B\u63D0\u793A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-toast"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/toast/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="wen-zi-ti-shi" tabindex="-1">\u6587\u5B57\u63D0\u793A</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/@vant/weapp/dist/toast/toast'</span>;\n\n<span class="hljs-title class_">Toast</span>(<span class="hljs-string">'\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~'</span>);\n</code></pre><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"van-toast"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-ti-shi" tabindex="-1">\u52A0\u8F7D\u63D0\u793A</h3><p>\u4F7F\u7528 <code>Toast.loading</code> \u65B9\u6CD5\u5C55\u793A\u52A0\u8F7D\u63D0\u793A\uFF0C\u901A\u8FC7 <code>forbidClick</code> \u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u80CC\u666F\u70B9\u51FB\uFF0C\u901A\u8FC7 <code>loadingType</code> \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\u3002</p><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u52A0\u8F7D\u4E2D...'</span>,\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n});\n\n<span class="hljs-comment">// \u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807</span>\n<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u52A0\u8F7D\u4E2D...'</span>,\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">loadingType</span>: <span class="hljs-string">'spinner'</span>,\n});\n</code></pre></div><div class="van-doc-card"><h3 id="cheng-gong-shi-bai-ti-shi" tabindex="-1">\u6210\u529F/\u5931\u8D25\u63D0\u793A</h3><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(<span class="hljs-string">'\u6210\u529F\u6587\u6848'</span>);\n<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">fail</span>(<span class="hljs-string">'\u5931\u8D25\u6587\u6848'</span>);\n</code></pre></div><div class="van-doc-card"><h3 id="dong-tai-geng-xin-ti-shi" tabindex="-1">\u52A8\u6001\u66F4\u65B0\u63D0\u793A</h3><pre><code class="language-javascript"><span class="hljs-keyword">const</span> toast = <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({\n <span class="hljs-attr">duration</span>: <span class="hljs-number">0</span>, <span class="hljs-comment">// \u6301\u7EED\u5C55\u793A toast</span>\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u5012\u8BA1\u65F6 3 \u79D2'</span>,\n <span class="hljs-attr">selector</span>: <span class="hljs-string">'#custom-selector'</span>,\n});\n\n<span class="hljs-keyword">let</span> second = <span class="hljs-number">3</span>;\n<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {\n second--;\n <span class="hljs-keyword">if</span> (second) {\n toast.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">`\u5012\u8BA1\u65F6 <span class="hljs-subst">${second}</span> \u79D2`</span>,\n });\n } <span class="hljs-keyword">else</span> {\n <span class="hljs-built_in">clearInterval</span>(timer);\n <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">clear</span>();\n }\n}, <span class="hljs-number">1000</span>);\n</code></pre><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"custom-selector"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="onclose-hui-diao-han-shu" tabindex="-1">OnClose \u56DE\u8C03\u51FD\u6570</h3><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>({\n <span class="hljs-attr">type</span>: <span class="hljs-string">'success'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u63D0\u4EA4\u6210\u529F'</span>,\n <span class="hljs-attr">onClose</span>: <span class="hljs-function">() =></span> {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'\u6267\u884COnClose\u51FD\u6570'</span>);\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>Toast</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u63D0\u793A</td></tr><tr><td>Toast.loading</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u52A0\u8F7D\u63D0\u793A</td></tr><tr><td>Toast.success</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u6210\u529F\u63D0\u793A</td></tr><tr><td>Toast.fail</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u5931\u8D25\u63D0\u793A</td></tr><tr><td>Toast.clear</td><td><code>clearAll</code></td><td><code>void</code></td><td>\u5173\u95ED\u63D0\u793A</td></tr><tr><td>Toast.setDefaultOptions</td><td><code>options</code></td><td><code>void</code></td><td>\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548</td></tr><tr><td>Toast.resetDefaultOptions</td><td>-</td><td><code>void</code></td><td>\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u63D0\u793A\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>loading</code> <code>success</code> <code>fail</code> <code>html</code></td><td><em>string</em></td><td><code>text</code></td></tr><tr><td>position</td><td>\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>top</code> <code>middle</code> <code>bottom</code></td><td><em>string</em></td><td><code>middle</code></td></tr><tr><td>message</td><td>\u5185\u5BB9</td><td><em>string</em></td><td><code>''</code></td></tr><tr><td>mask</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>forbidClick</td><td>\u662F\u5426\u7981\u6B62\u80CC\u666F\u70B9\u51FB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loadingType</td><td>\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>zIndex</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>1000</code></td></tr><tr><td>duration</td><td>\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Ctoast \u4E0D\u4F1A\u6D88\u5931</td><td><em>number</em></td><td><code>2000</code></td></tr><tr><td>selector</td><td>\u81EA\u5B9A\u4E49\u9009\u62E9\u5668</td><td><em>string</em></td><td><code>van-toast</code></td></tr><tr><td>context</td><td>\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587</td><td><em>object</em></td><td>\u5F53\u524D\u9875\u9762</td></tr><tr><td>onClose</td><td>\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5185\u5BB9</td></tr></tbody></table></div>', 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('<h1>Transition \u52A8\u753B</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u4F7F\u5143\u7D20\u4ECE\u4E00\u79CD\u6837\u5F0F\u9010\u6E10\u53D8\u5316\u4E3A\u53E6\u4E00\u79CD\u6837\u5F0F\u7684\u6548\u679C\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-transition"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/transition/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-transition</span> <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span> <span class="hljs-attr">custom-class</span>=<span class="hljs-string">"block"</span>></span>\u5185\u5BB9<span class="hljs-tag"></<span class="hljs-name">van-transition</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="dong-hua-lei-xing" tabindex="-1">\u52A8\u753B\u7C7B\u578B</h3><p>transition \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u52A8\u753B\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>name</code>\u5B57\u6BB5\u6307\u5B9A\u52A8\u753B\u7C7B\u578B\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-transition</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fade-up"</span> /></span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-transition</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">"{{ show }}"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">""</span>\n <span class="hljs-attr">duration</span>=<span class="hljs-string">"{{ { enter: 300, leave: 1000 } }}"</span>\n <span class="hljs-attr">enter-class</span>=<span class="hljs-string">"van-enter-class"</span>\n <span class="hljs-attr">enter-active-class</span>=<span class="hljs-string">"van-enter-active-class"</span>\n <span class="hljs-attr">leave-active-class</span>=<span class="hljs-string">"van-leave-active-class"</span>\n <span class="hljs-attr">leave-to-class</span>=<span class="hljs-string">"van-leave-to-class"</span>\n/></span>\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.van-enter-active-class</span>,\n<span class="hljs-selector-class">.van-leave-active-class</span> {\n <span class="hljs-attribute">transition-property</span>: background-color, transform;\n}\n\n<span class="hljs-selector-class">.van-enter-class</span>,\n<span class="hljs-selector-class">.van-leave-to-class</span> {\n <span class="hljs-attribute">background-color</span>: red;\n <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(-<span class="hljs-number">360deg</span>) <span class="hljs-built_in">translate3d</span>(-<span class="hljs-number">100%</span>, -<span class="hljs-number">100%</span>, <span class="hljs-number">0</span>);\n}\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u52A8\u753B\u7C7B\u578B</td><td><em>string</em></td><td><code>fade</code></td></tr><tr><td>show</td><td>\u662F\u5426\u5C55\u793A\u7EC4\u4EF6</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2</td><td><em>number | object</em></td><td><code>300</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:before-enter</td><td>\u8FDB\u5165\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:enter</td><td>\u8FDB\u5165\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-enter</td><td>\u8FDB\u5165\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:before-leave</td><td>\u79BB\u5F00\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:leave</td><td>\u79BB\u5F00\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-leave</td><td>\u79BB\u5F00\u540E\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>enter-class</td><td>\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</td></tr><tr><td>enter-active-class</td><td>\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</td></tr><tr><td>enter-to-class</td><td>\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</td></tr><tr><td>leave-class</td><td>\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</td></tr><tr><td>leave-active-class</td><td>\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</td></tr><tr><td>leave-to-class</td><td>\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</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dong-hua-lei-xing-1" tabindex="-1">\u52A8\u753B\u7C7B\u578B</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>fade</td><td>\u6DE1\u5165</td></tr><tr><td>fade-up</td><td>\u4E0A\u6ED1\u6DE1\u5165</td></tr><tr><td>fade-down</td><td>\u4E0B\u6ED1\u6DE1\u5165</td></tr><tr><td>fade-left</td><td>\u5DE6\u6ED1\u6DE1\u5165</td></tr><tr><td>fade-right</td><td>\u53F3\u6ED1\u6DE1\u5165</td></tr><tr><td>slide-up</td><td>\u4E0A\u6ED1\u8FDB\u5165</td></tr><tr><td>slide-down</td><td>\u4E0B\u6ED1\u8FDB\u5165</td></tr><tr><td>slide-left</td><td>\u5DE6\u6ED1\u8FDB\u5165</td></tr><tr><td>slide-right</td><td>\u53F3\u6ED1\u8FDB\u5165</td></tr></tbody></table></div>', 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('<h1>TreeSelect \u5206\u7C7B\u9009\u62E9</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u4ECE\u4E00\u7EC4\u76F8\u5173\u8054\u7684\u6570\u636E\u96C6\u5408\u4E2D\u8FDB\u884C\u9009\u62E9\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-tree-select"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/tree-select/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="dan-xuan-mo-shi" tabindex="-1">\u5355\u9009\u6A21\u5F0F</h3><p>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tree-select</span>\n <span class="hljs-attr">items</span>=<span class="hljs-string">"{{ items }}"</span>\n <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">"{{ mainActiveIndex }}"</span>\n <span class="hljs-attr">active-id</span>=<span class="hljs-string">"{{ activeId }}"</span>\n <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">"onClickNav"</span>\n <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">"onClickItem"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">mainActiveIndex</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">activeId</span>: <span class="hljs-literal">null</span>,\n },\n\n <span class="hljs-title function_">onClickNav</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">mainActiveIndex</span>: detail.<span class="hljs-property">index</span> || <span class="hljs-number">0</span>,\n });\n },\n\n <span class="hljs-title function_">onClickItem</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <span class="hljs-keyword">const</span> activeId = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">activeId</span> === detail.<span class="hljs-property">id</span> ? <span class="hljs-literal">null</span> : detail.<span class="hljs-property">id</span>;\n\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ activeId });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="duo-xuan-mo-shi" tabindex="-1">\u591A\u9009\u6A21\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tree-select</span>\n <span class="hljs-attr">items</span>=<span class="hljs-string">"{{ items }}"</span>\n <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">"{{ mainActiveIndex }}"</span>\n <span class="hljs-attr">active-id</span>=<span class="hljs-string">"{{ activeId }}"</span>\n <span class="hljs-attr">max</span>=<span class="hljs-string">"{{ max }}"</span>\n <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">"onClickNav"</span>\n <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">"onClickItem"</span>\n/></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">mainActiveIndex</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">activeId</span>: [],\n <span class="hljs-attr">max</span>: <span class="hljs-number">2</span>,\n },\n\n <span class="hljs-title function_">onClickNav</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">mainActiveIndex</span>: detail.<span class="hljs-property">index</span> || <span class="hljs-number">0</span>,\n });\n },\n\n <span class="hljs-title function_">onClickItem</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <span class="hljs-keyword">const</span> { activeId } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;\n\n <span class="hljs-keyword">const</span> index = activeId.<span class="hljs-title function_">indexOf</span>(detail.<span class="hljs-property">id</span>);\n <span class="hljs-keyword">if</span> (index > -<span class="hljs-number">1</span>) {\n activeId.<span class="hljs-title function_">splice</span>(index, <span class="hljs-number">1</span>);\n } <span class="hljs-keyword">else</span> {\n activeId.<span class="hljs-title function_">push</span>(detail.<span class="hljs-property">id</span>);\n }\n\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ activeId });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-tree-select</span>\n <span class="hljs-attr">items</span>=<span class="hljs-string">"{{ items }}"</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">"55vw"</span>\n <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">"{{ mainActiveIndex }}"</span>\n <span class="hljs-attr">active-id</span>=<span class="hljs-string">"{{ activeId }}"</span>\n <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">"onClickNav"</span>\n <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">"onClickItem"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://img.yzcdn.cn/vant/apple-1.jpg"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"content"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-tree-select</span>></span>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>items</td><td>\u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636E</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>height</td><td>\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>number | string</em></td><td><code>300</code></td></tr><tr><td>main-active-index</td><td>\u5DE6\u4FA7\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>active-id</td><td>\u53F3\u4FA7\u9009\u4E2D\u9879\u7684 id\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4</td><td><em>string | number | Array</em></td><td><code>0</code></td></tr><tr><td>max</td><td>\u53F3\u4FA7\u9879\u6700\u5927\u9009\u4E2D\u4E2A\u6570</td><td><em>number</em></td><td><em>Infinity</em></td></tr><tr><td>selected-icon <code>v1.5.0</code></td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u680F\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807</td><td><em>string</em></td><td><code>success</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click-nav</td><td>\u5DE6\u4FA7\u5BFC\u822A\u70B9\u51FB\u65F6\uFF0C\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail.index\uFF1A\u88AB\u70B9\u51FB\u7684\u5BFC\u822A\u7684\u7D22\u5F15</td></tr><tr><td>bind:click-item</td><td>\u53F3\u4FA7\u9009\u62E9\u9879\u88AB\u70B9\u51FB\u65F6\uFF0C\u4F1A\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail: \u8BE5\u70B9\u51FB\u9879\u7684\u6570\u636E</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>content</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9\uFF0C\u5982\u679C\u5B58\u5728 items\uFF0C\u5219\u63D2\u5165\u5728\u9876\u90E8</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="items-shu-ju-jie-gou" tabindex="-1">items \u6570\u636E\u7ED3\u6784</h3><p><code>items</code> \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</p><pre><code class="language-javascript">[\n {\n <span class="hljs-comment">// \u5BFC\u822A\u540D\u79F0</span>\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6240\u6709\u57CE\u5E02'</span>,\n <span class="hljs-comment">// \u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u5FBD\u6807\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301</span>\n <span class="hljs-attr">badge</span>: <span class="hljs-number">3</span>,\n <span class="hljs-comment">// \u662F\u5426\u5728\u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301</span>\n <span class="hljs-attr">dot</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-comment">// \u7981\u7528\u9009\u9879</span>\n <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-comment">// \u8BE5\u5BFC\u822A\u4E0B\u6240\u6709\u7684\u53EF\u9009\u9879</span>\n <span class="hljs-attr">children</span>: [\n {\n <span class="hljs-comment">// \u540D\u79F0</span>\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6E29\u5DDE'</span>,\n <span class="hljs-comment">// id\uFF0C\u4F5C\u4E3A\u5339\u914D\u9009\u4E2D\u72B6\u6001\u7684\u6807\u8BC6</span>\n <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,\n <span class="hljs-comment">// \u7981\u7528\u9009\u9879</span>\n <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'\u676D\u5DDE'</span>,\n <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,\n },\n ],\n },\n];\n</code></pre></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>main-item-class</td><td>\u5DE6\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>content-item-class</td><td>\u53F3\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>main-active-class</td><td>\u5DE6\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B</td></tr><tr><td>content-active-class</td><td>\u53F3\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B</td></tr><tr><td>main-disabled-class</td><td>\u5DE6\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B</td></tr><tr><td>content-disabled-class</td><td>\u53F3\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>', 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('<h1>Uploader \u6587\u4EF6\u4E0A\u4F20</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\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</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">"usingComponents"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <span class="hljs-attr">"van-uploader"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@vant/weapp/uploader/index"</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1<code>after-read</code>\u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684\u6587\u4EF6\u7684\u4E34\u65F6\u5730\u5740\uFF0C\u7136\u540E\u518D\u4F7F\u7528<code>wx.uploadFile</code>\u5C06\u56FE\u7247\u4E0A\u4F20\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">"{{ fileList }}"</span> <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">"afterRead"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [],\n },\n\n <span class="hljs-title function_">afterRead</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { file } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-comment">// \u5F53\u8BBE\u7F6E mutiple \u4E3A true \u65F6, file \u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u5426\u5219\u4E3A\u5BF9\u8C61\u683C\u5F0F</span>\n wx.<span class="hljs-title function_">uploadFile</span>({\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://example.weixin.qq.com/upload'</span>, <span class="hljs-comment">// \u4EC5\u4E3A\u793A\u4F8B\uFF0C\u975E\u771F\u5B9E\u7684\u63A5\u53E3\u5730\u5740</span>\n <span class="hljs-attr">filePath</span>: file.<span class="hljs-property">url</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">'file'</span>,\n <span class="hljs-attr">formData</span>: { <span class="hljs-attr">user</span>: <span class="hljs-string">'test'</span> },\n <span class="hljs-title function_">success</span>(<span class="hljs-params">res</span>) {\n <span class="hljs-comment">// \u4E0A\u4F20\u5B8C\u6210\u9700\u8981\u66F4\u65B0 fileList</span>\n <span class="hljs-keyword">const</span> { fileList = [] } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;\n fileList.<span class="hljs-title function_">push</span>({ ...file, <span class="hljs-attr">url</span>: res.<span class="hljs-property">data</span> });\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ fileList });\n },\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-yu-lan" tabindex="-1">\u56FE\u7247\u9884\u89C8</h3><p>\u901A\u8FC7\u5411\u7EC4\u4EF6\u4F20\u5165<code>file-list</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">"{{ fileList }}"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/leaf.jpg'</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u56FE\u72471'</span>,\n },\n <span class="hljs-comment">// Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6</span>\n <span class="hljs-comment">// \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E</span>\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'http://iph.href.lu/60x60?text=default'</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">'\u56FE\u72472'</span>,\n <span class="hljs-attr">isImage</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">deletable</span>: <span class="hljs-literal">true</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-ke-shan-chu-zhuang-tai" tabindex="-1">\u56FE\u7247\u53EF\u5220\u9664\u72B6\u6001</h3><p>\u901A\u8FC7<code>deletable</code>\u5C5E\u6027\u53EF\u63A7\u5236\u662F\u5426\u5F00\u542F\u6240\u6709\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0C<code>deletable</code>\u9ED8\u8BA4\u4E3A<code>true</code>\uFF0C\u5373\u6240\u6709\u56FE\u7247\u90FD\u53EF\u5220\u9664\u3002</p><p>\u82E5\u5E0C\u671B\u63A7\u5236\u5355\u5F20\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0C\u53EF\u5C06<code>deletable</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code>\uFF0C\u5E76\u5728<code>fileList</code>\u4E2D\u4E3A\u6BCF\u4E00\u9879\u8BBE\u7F6E<code>deletable</code>\u5C5E\u6027\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">"{{ fileList }}"</span> <span class="hljs-attr">deletable</span>=<span class="hljs-string">"{{ true }}"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/leaf.jpg'</span>,\n },\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/tree.jpg'</span>,\n <span class="hljs-attr">deletable</span>: <span class="hljs-literal">false</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shang-chuan-zhuang-tai" tabindex="-1">\u4E0A\u4F20\u72B6\u6001</h3><p>\u901A\u8FC7<code>status</code>\u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0C<code>uploading</code>\u8868\u793A\u4E0A\u4F20\u4E2D\uFF0C<code>failed</code>\u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0C<code>done</code>\u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">"{{ fileList }}"</span> /></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/leaf.jpg'</span>,\n <span class="hljs-attr">status</span>: <span class="hljs-string">'uploading'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u4E0A\u4F20\u4E2D'</span>,\n },\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">'https://img.yzcdn.cn/vant/tree.jpg'</span>,\n <span class="hljs-attr">status</span>: <span class="hljs-string">'failed'</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">'\u4E0A\u4F20\u5931\u8D25'</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shang-chuan-shu-liang" tabindex="-1">\u9650\u5236\u4E0A\u4F20\u6570\u91CF</h3><p>\u901A\u8FC7<code>max-count</code>\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</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span>\n <span class="hljs-attr">file-list</span>=<span class="hljs-string">"{{ fileList }}"</span>\n <span class="hljs-attr">max-count</span>=<span class="hljs-string">"2"</span>\n <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">"afterRead"</span>\n/></span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shang-chuan-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u4E0A\u4F20\u6837\u5F0F</h3><p>\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"photo"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>></span>\u4E0A\u4F20\u56FE\u7247<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-uploader</span>></span>\n</code></pre></div><div class="van-doc-card"><h3 id="shang-chuan-qian-xiao-yan" tabindex="-1">\u4E0A\u4F20\u524D\u6821\u9A8C</h3><p>\u5C06<code>use-before-read</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code>\uFF0C\u7136\u540E\u7ED1\u5B9A <code>before-read</code> \u4E8B\u4EF6\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\uFF0C\u8C03\u7528 <code>callback</code> \u65B9\u6CD5\u4F20\u5165 <code>true</code> \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u4F20\u5165 <code>false</code> \u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-uploader</span>\n <span class="hljs-attr">file-list</span>=<span class="hljs-string">"{{ fileList }}"</span>\n <span class="hljs-attr">accept</span>=<span class="hljs-string">"media"</span>\n <span class="hljs-attr">use-before-read</span>\n <span class="hljs-attr">bind:before-read</span>=<span class="hljs-string">"beforeRead"</span>\n <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">"afterRead"</span>\n/></span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [],\n },\n\n <span class="hljs-title function_">beforeRead</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { file, callback } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-title function_">callback</span>(file.<span class="hljs-property">type</span> === <span class="hljs-string">'image'</span>);\n },\n});\n</code></pre></div><h2 id="yun-kai-fa-shi-li" tabindex="-1">\u4E91\u5F00\u53D1\u793A\u4F8B</h2><div class="van-doc-card"><h3 id="shang-chuan-tu-pian-zhi-yun-cun-chu" tabindex="-1">\u4E0A\u4F20\u56FE\u7247\u81F3\u4E91\u5B58\u50A8</h3><p>\u5728\u5F00\u53D1\u4E2D\uFF0C\u53EF\u4EE5\u5229\u7528<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html">\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1</a>\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<code>fileiId</code>\u6765\u4E0B\u8F7D\u56FE\u7247\u3001\u5220\u9664\u56FE\u7247\u548C\u66FF\u6362\u4E34\u65F6\u94FE\u63A5\u3002</p><pre><code class="language-js"><span class="hljs-comment">// \u4E0A\u4F20\u56FE\u7247</span>\n<span class="hljs-title function_">uploadToCloud</span>(<span class="hljs-params"></span>) {\n wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">init</span>();\n <span class="hljs-keyword">const</span> { fileList } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;\n <span class="hljs-keyword">if</span> (!fileList.<span class="hljs-property">length</span>) {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">'\u8BF7\u9009\u62E9\u56FE\u7247'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span> });\n } <span class="hljs-keyword">else</span> {\n <span class="hljs-keyword">const</span> uploadTasks = fileList.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">file, index</span>) =></span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">uploadFilePromise</span>(<span class="hljs-string">`my-photo<span class="hljs-subst">${index}</span>.png`</span>, file));\n <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>(uploadTasks)\n .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">data</span> =></span> {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">'\u4E0A\u4F20\u6210\u529F'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span> });\n <span class="hljs-keyword">const</span> newFileList = data.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> ({ <span class="hljs-attr">url</span>: item.<span class="hljs-property">fileID</span> }));\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">cloudPath</span>: data, <span class="hljs-attr">fileList</span>: newFileList });\n })\n .<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =></span> {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">'\u4E0A\u4F20\u5931\u8D25'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'none'</span> });\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e);\n });\n }\n}\n\n<span class="hljs-title function_">uploadFilePromise</span>(<span class="hljs-params">fileName, chooseResult</span>) {\n <span class="hljs-keyword">return</span> wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">uploadFile</span>({\n <span class="hljs-attr">cloudPath</span>: fileName,\n <span class="hljs-attr">filePath</span>: chooseResult.<span class="hljs-property">url</span>\n });\n}\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728\u56DE\u8C03\u51FD\u6570\u7684\u7B2C\u4E8C\u9879\u53C2\u6570\u4E2D\u83B7\u53D6</td><td><em>string | number</em></td><td>-</td></tr><tr><td>accept</td><td>\u63A5\u53D7\u7684\u6587\u4EF6\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A<code>all</code> <code>media</code> <code>image</code> <code>file</code> <code>video</code></td><td><em>string</em></td><td><code>image</code></td></tr><tr><td>sizeType</td><td>\u6240\u9009\u7684\u56FE\u7247\u7684\u5C3A\u5BF8, \u5F53<code>accept</code>\u4E3A<code>image</code>\u7C7B\u578B\u65F6\u8BBE\u7F6E\u6240\u9009\u56FE\u7247\u7684\u5C3A\u5BF8\u53EF\u9009\u503C\u4E3A<code>original</code> <code>compressed</code></td><td><em>string[]</em></td><td><code>['original','compressed']</code></td></tr><tr><td>preview-size</td><td>\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>80px</code></td></tr><tr><td>preview-image</td><td>\u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>preview-full-image</td><td>\u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>multiple</td><td>\u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-upload</td><td>\u662F\u5426\u5C55\u793A\u6587\u4EF6\u4E0A\u4F20\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>deletable</td><td>\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>capture</td><td>\u56FE\u7247\u6216\u8005\u89C6\u9891\u9009\u53D6\u6A21\u5F0F\uFF0C\u5F53<code>accept</code>\u4E3A<code>image</code>\u7C7B\u578B\u65F6\u8BBE\u7F6E<code>capture</code>\u53EF\u9009\u503C\u4E3A<code>camera</code>\u53EF\u4EE5\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934</td><td><em>string | string[]</em></td><td><code>['album', 'camera']</code></td></tr><tr><td>max-size</td><td>\u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3A<code>byte</code></td><td><em>number</em></td><td>-</td></tr><tr><td>max-count</td><td>\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236</td><td><em>number</em></td><td>-</td></tr><tr><td>upload-text</td><td>\u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793A</td><td><em>string</em></td><td>-</td></tr><tr><td>image-fit</td><td>\u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8F<code>image</code>\u7EC4\u4EF6\u7684<code>mode</code>\u5C5E\u6027</td><td><em>string</em></td><td><code>scaleToFill</code></td></tr><tr><td>use-before-read</td><td>\u662F\u5426\u5F00\u542F\u6587\u4EF6\u8BFB\u53D6\u524D\u4E8B\u4EF6</td><td><em>boolean</em></td><td>-</td></tr><tr><td>camera</td><td>\u5F53 accept \u4E3A <code>video</code> \u65F6\u751F\u6548\uFF0C\u53EF\u9009\u503C\u4E3A <code>back</code> <code>front</code></td><td><em>string</em></td><td>-</td></tr><tr><td>compressed</td><td>\u5F53 accept \u4E3A <code>video</code> \u65F6\u751F\u6548\uFF0C\u662F\u5426\u538B\u7F29\u89C6\u9891\uFF0C\u9ED8\u8BA4\u4E3A<code>true</code></td><td><em>boolean</em></td><td>-</td></tr><tr><td>max-duration</td><td>\u5F53 accept \u4E3A <code>video</code> \u65F6\u751F\u6548\uFF0C\u62CD\u6444\u89C6\u9891\u6700\u957F\u62CD\u6444\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2</td><td><em>number</em></td><td>-</td></tr><tr><td>upload-icon</td><td>\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>plus</code></td></tr></tbody></table><h4 id="accept-de-he-fa-zhi" tabindex="-1">accept \u7684\u5408\u6CD5\u503C</h4><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td><code>media</code></td><td>\u56FE\u7247\u548C\u89C6\u9891</td></tr><tr><td><code>image</code></td><td>\u56FE\u7247</td></tr><tr><td><code>video</code></td><td>\u89C6\u9891</td></tr><tr><td><code>file</code></td><td>\u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u56FE\u7247\u548C\u89C6\u9891\u4EE5\u5916\u7684\u6587\u4EF6</td></tr><tr><td><code>all</code></td><td>\u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u6240\u6709\u6587\u4EF6</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="filelist" tabindex="-1">FileList</h3><p><code>file-list</code> \u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u5305\u542B\u4EE5\u4E0B <code>key</code>\u3002</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td><code>url</code></td><td>\u56FE\u7247\u548C\u89C6\u9891\u7684\u7F51\u7EDC\u8D44\u6E90\u5730\u5740</td></tr><tr><td><code>name</code></td><td>\u6587\u4EF6\u540D\u79F0\uFF0C\u89C6\u9891\u5C06\u5728\u5168\u5C4F\u9884\u89C8\u65F6\u4F5C\u4E3A\u6807\u9898\u663E\u793A</td></tr><tr><td><code>thumb</code></td><td>\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</td></tr><tr><td><code>type</code></td><td>\u6587\u4EF6\u7C7B\u578B\uFF0C\u53EF\u9009\u503C<code>image</code> <code>video</code> <code>file</code></td></tr><tr><td><code>isImage</code></td><td>\u624B\u52A8\u6807\u8BB0\u56FE\u7247\u8D44\u6E90</td></tr><tr><td><code>isVideo</code></td><td>\u624B\u52A8\u6807\u8BB0\u89C6\u9891\u8D44\u6E90</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="event" tabindex="-1">Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:before-read</td><td>\u6587\u4EF6\u8BFB\u53D6\u524D\uFF0C\u5728\u56DE\u8C03\u51FD\u6570\u4E2D\u8FD4\u56DE <code>false</code> \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u540C\u65F6\u9700\u8981\u5C06<code>use-before-read</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code></td><td><code>event.detail.file</code>: \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6\uFF0C<code>event.detail.callback</code>: \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528<code>callback(false)</code>\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6</td></tr><tr><td>bind:after-read</td><td>\u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540E</td><td><code>event.detail.file</code>: \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6</td></tr><tr><td>bind:oversize</td><td>\u6587\u4EF6\u8D85\u51FA\u5927\u5C0F\u9650\u5236</td><td>-</td></tr><tr><td>bind:click-preview</td><td>\u70B9\u51FB\u9884\u89C8\u56FE\u7247</td><td><code>event.detail.index</code>: \u70B9\u51FB\u56FE\u7247\u7684\u5E8F\u53F7\u503C</td></tr><tr><td>bind:delete</td><td>\u5220\u9664\u56FE\u7247</td><td><code>event.detail.index</code>: \u5220\u9664\u56FE\u7247\u7684\u5E8F\u53F7\u503C</td></tr></tbody></table></div>', 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);
|