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 &amp; 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&amp;\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 &amp; 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=&quot;2d&quot;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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: &#39;shared&#39;</code>\u9009\u9879</p></blockquote><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&#39;shared&#39;</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">&lt;<span class="hljs-name">van-cell</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span>\n  <span class="hljs-attr">title-class</span>=<span class="hljs-string">&quot;cell-title&quot;</span>\n  <span class="hljs-attr">value-class</span>=<span class="hljs-string">&quot;cell-value&quot;</span>\n/&gt;</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&amp;_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>&quot;style&quot;: &quot;v2&quot;</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">&quot;setting&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n    ...\n    <span class="hljs-attr">&quot;packNpmManually&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>\n    <span class="hljs-attr">&quot;packNpmRelationList&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>\n      <span class="hljs-punctuation">{</span>\n        <span class="hljs-attr">&quot;packageJsonPath&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;./package.json&quot;</span><span class="hljs-punctuation">,</span>\n        <span class="hljs-attr">&quot;miniprogramNpmDistDir&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;./miniprogram/&quot;</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./&#39;\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 -&gt; \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">&quot;compilerOptions&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n    ...\n    <span class="hljs-attr">&quot;baseUrl&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;.&quot;</span><span class="hljs-punctuation">,</span>\n    <span class="hljs-attr">&quot;types&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;miniprogram-api-typings&quot;</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>\n    <span class="hljs-attr">&quot;paths&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n      <span class="hljs-attr">&quot;@vant/weapp/*&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;path/to/node_modules/@vant/weapp/dist/*&quot;</span><span class="hljs-punctuation">]</span>\n    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>\n    <span class="hljs-attr">&quot;lib&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;ES6&quot;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/button/index&quot;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;path/to/@vant/weapp/dist/button/index&quot;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;path/to/@vant/weapp/lib/button/index&quot;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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 &amp;&amp; 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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;my-button&quot;</span>&gt;</span>\n  \u9ED8\u8BA4\u6309\u94AE\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;{{ buttonStyle }}&quot;</span>&gt;</span>\n  \u9ED8\u8BA4\u6309\u94AE\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">() =&gt;</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">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>\n    \u9ED8\u8BA4\u6309\u94AE\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-toast&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</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">&#39;path/to/vant-weapp/dist/toast/toast&#39;</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">&#39;\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-action-sheet&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/action-sheet/index&quot;</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">&lt;<span class="hljs-name">van-action-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n  <span class="hljs-attr">bind:select</span>=<span class="hljs-string">&quot;onSelect&quot;</span>\n/&gt;</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">&#39;\u9009\u9879&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u9009\u9879&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u9009\u9879&#39;</span>,\n        <span class="hljs-attr">subname</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n        <span class="hljs-attr">openType</span>: <span class="hljs-string">&#39;share&#39;</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">&lt;<span class="hljs-name">van-action-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n  <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">&quot;\u53D6\u6D88&quot;</span>\n/&gt;</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">&#39;\u7740\u8272\u9009\u9879&#39;</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#ee0a24&#39;</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">&#39;\u7981\u7528\u9009\u9879&#39;</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">&lt;<span class="hljs-name">van-action-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n  <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">&quot;\u53D6\u6D88&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-action-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n  <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-action-sheet</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-action-sheet</span>&gt;</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">&lt;<span class="hljs-name">van-action-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n  <span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">&quot;onGetUserInfo&quot;</span>\n/&gt;</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">&#39;\u83B7\u53D6\u7528\u6237\u4FE1\u606F&#39;</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#07c160&#39;</span>, <span class="hljs-attr">openType</span>: <span class="hljs-string">&#39;getUserInfo&#39;</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>=&quot;getUserInfo&quot;\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>=&quot;contact&quot;\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>=&quot;getPhoneNumber&quot;\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>=&quot;launchApp&quot;\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>=&quot;launchApp&quot;\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>=&quot;openSetting&quot;\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=&quot;contact&quot;\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=&quot;contact&quot;\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=&quot;contact&quot;\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=&quot;contact&quot;\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&quot;\u53EF\u80FD\u8981\u53D1\u9001\u7684\u5C0F\u7A0B\u5E8F&quot;\u63D0\u793A\uFF0C\u7528\u6237\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u53D1\u9001\u5C0F\u7A0B\u5E8F\u6D88\u606F\uFF0CopenType=&quot;contact&quot;\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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-area&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/area/index&quot;</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">&lt;<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span> /&gt;</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">&#39;\u5317\u4EAC\u5E02&#39;</span>,\n    <span class="hljs-number">120000</span>: <span class="hljs-string">&#39;\u5929\u6D25\u5E02&#39;</span>,\n  },\n  <span class="hljs-attr">city_list</span>: {\n    <span class="hljs-number">110100</span>: <span class="hljs-string">&#39;\u5317\u4EAC\u5E02&#39;</span>,\n    <span class="hljs-number">120100</span>: <span class="hljs-string">&#39;\u5929\u6D25\u5E02&#39;</span>,\n  },\n  <span class="hljs-attr">county_list</span>: {\n    <span class="hljs-number">110101</span>: <span class="hljs-string">&#39;\u4E1C\u57CE\u533A&#39;</span>,\n    <span class="hljs-number">110102</span>: <span class="hljs-string">&#39;\u897F\u57CE\u533A&#39;</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">&#39;@vant/area-data&#39;</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">&lt;<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;110101&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span> <span class="hljs-attr">columns-num</span>=<span class="hljs-string">&quot;{{ 2 }}&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-area</span>\n  <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span>\n  <span class="hljs-attr">columns-placeholder</span>=<span class="hljs-string">&quot;{{ [&#39;\u8BF7\u9009\u62E9&#39;, &#39;\u8BF7\u9009\u62E9&#39;, &#39;\u8BF7\u9009\u62E9&#39;] }}&quot;</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>\n/&gt;</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">&#39;region&#39;</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>) =&gt;</span> {\n    <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span> &amp;&amp; res.<span class="hljs-property">data</span>.<span class="hljs-property">length</span> &gt; <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>) =&gt;</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">&#39;110000&#39;</span>,\n    <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5317\u4EAC\u5E02&#39;</span>,\n  },\n  {\n    <span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110100&#39;</span>,\n    <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5317\u4EAC\u5E02&#39;</span>,\n  },\n  {\n    <span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110101&#39;</span>,\n    <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E1C\u57CE\u533A&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/button/index&quot;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;default&quot;</span>&gt;</span>\u9ED8\u8BA4\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u4FE1\u606F\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u8B66\u544A\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5371\u9669\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6734\u7D20\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u6734\u7D20\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<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">&quot;primary&quot;</span>&gt;</span>\u7EC6\u8FB9\u6846\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<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">&quot;info&quot;</span>&gt;</span>\u7EC6\u8FB9\u6846\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u7981\u7528\u72B6\u6001<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u7981\u7528\u72B6\u6001<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">loading-type</span>=<span class="hljs-string">&quot;spinner&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span> <span class="hljs-attr">loading-text</span>=<span class="hljs-string">&quot;\u52A0\u8F7D\u4E2D...&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">square</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u65B9\u5F62\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u5706\u5F62\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;star-o&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;star-o&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/logo.png&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\n  \u6309\u94AE\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span>&gt;</span>\u5927\u53F7\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;normal&quot;</span>&gt;</span>\u666E\u901A\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span>\u5C0F\u578B\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>\u8FF7\u4F60\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">block</span>&gt;</span>\u5757\u7EA7\u5143\u7D20<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span>&gt;</span>\u5355\u8272\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">plain</span>&gt;</span>\u5355\u8272\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(to right, #4bb0ff, #6149f6)&quot;</span>&gt;</span>\n  \u6E10\u53D8\u8272\u6309\u94AE\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-calendar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/calendar/index&quot;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u9009\u62E9\u5355\u4E2A\u65E5\u671F&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ date }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onDisplay&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span> <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span> /&gt;</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">&#39;&#39;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u9009\u62E9\u591A\u4E2A\u65E5\u671F&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ text }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onDisplay&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;multiple&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n  <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>\n/&gt;</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">&#39;&#39;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u9009\u62E9\u65E5\u671F\u533A\u95F4&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ date }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onDisplay&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n  <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>\n/&gt;</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">&#39;&#39;</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">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">show-confirm</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#07c160&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-calendar</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n  <span class="hljs-attr">max-date</span>=<span class="hljs-string">&quot;{{ maxDate }}&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-calendar</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span>\n  <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">&quot;\u5B8C\u6210&quot;</span>\n  <span class="hljs-attr">confirm-disabled-text</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">formatter</span>=<span class="hljs-string">&quot;{{ formatter }}&quot;</span> /&gt;</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">&#39;\u52B3\u52A8\u8282&#39;</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">&#39;\u4E94\u56DB\u9752\u5E74\u8282&#39;</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">&#39;\u4ECA\u5929&#39;</span>;\n        }\n      }\n\n      <span class="hljs-keyword">if</span> (day.<span class="hljs-property">type</span> === <span class="hljs-string">&#39;start&#39;</span>) {\n        day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">&#39;\u5165\u4F4F&#39;</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">&#39;end&#39;</span>) {\n        day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">&#39;\u79BB\u5E97&#39;</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">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">round</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;right&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">max-range</span>=<span class="hljs-string">&quot;{{ 3 }}&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">first-day-of-week</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-calendar</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u65E5\u5386&quot;</span>\n  <span class="hljs-attr">poppable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  <span class="hljs-attr">show-confirm</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;calendar&quot;</span>\n/&gt;</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) =&gt; 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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-card&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/card/index&quot;</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">&lt;<span class="hljs-name">van-card</span>\n  <span class="hljs-attr">num</span>=<span class="hljs-string">&quot;2&quot;</span>\n  <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;2.00&quot;</span>\n  <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5546\u54C1\u6807\u9898&quot;</span>\n  <span class="hljs-attr">thumb</span>=<span class="hljs-string">&quot;{{ imageURL }}&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-card</span>\n  <span class="hljs-attr">num</span>=<span class="hljs-string">&quot;2&quot;</span>\n  <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;\u6807\u7B7E&quot;</span>\n  <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;10.00&quot;</span>\n  <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5546\u54C1\u6807\u9898&quot;</span>\n  <span class="hljs-attr">thumb</span>=<span class="hljs-string">&quot;{{ imageURL }}&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-card</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-cell&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/cell/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-cell-group&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/cell-group/index&quot;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">inset</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;location-o&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">is-link</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">arrow-direction</span>=<span class="hljs-string">&quot;down&quot;</span> /&gt;</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">&lt;<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">&quot;\u5355\u5143\u683C&quot;</span>\n  <span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;navigateTo&quot;</span>\n  <span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5206\u7EC41&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5206\u7EC42&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">is-link</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;title&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-cell-text&quot;</span>&gt;</span>\u5355\u5143\u683C<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-icon&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">center</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> /&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-checkbox&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/checkbox/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-checkbox-group&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/checkbox-group/index&quot;</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">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\u590D\u9009\u6846<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</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">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  \u590D\u9009\u6846\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</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">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  \u590D\u9009\u6846\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</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">&lt;<span class="hljs-name">van-checkbox</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span>\n  <span class="hljs-attr">checked-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n&gt;</span>\n  \u590D\u9009\u6846\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</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">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">&quot;25px&quot;</span>&gt;</span>\u590D\u9009\u6846<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</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">&lt;<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">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  \u81EA\u5B9A\u4E49\u56FE\u6807\n  <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ checked ? activeIcon : inactiveIcon }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</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">&#39;//img.yzcdn.cn/icon-active.png&#39;</span>,\n    <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-normal.png&#39;</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">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">label-disabled</span>&gt;</span>\u590D\u9009\u6846<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</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">&lt;<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ result }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>\u590D\u9009\u6846 a<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>\u590D\u9009\u6846 b<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span>&gt;</span>\u590D\u9009\u6846 c<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</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">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</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">&lt;<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ result }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;{{ 2 }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>\u590D\u9009\u6846 a<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>\u590D\u9009\u6846 b<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span>&gt;</span>\u590D\u9009\u6846 c<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</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">&lt;<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ result }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span>\n      <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ list }}&quot;</span>\n      <span class="hljs-attr">wx:key</span>=<span class="hljs-string">&quot;index&quot;</span>\n      <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u590D\u9009\u6846 {{ item }}&quot;</span>\n      <span class="hljs-attr">value-class</span>=<span class="hljs-string">&quot;value-class&quot;</span>\n      <span class="hljs-attr">clickable</span>\n      <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;{{ index }}&quot;</span>\n      <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;toggle&quot;</span>\n    &gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span>\n        <span class="hljs-attr">catch:tap</span>=<span class="hljs-string">&quot;noop&quot;</span>\n        <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkboxes-{{ index }}&quot;</span>\n        <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;{{ item }}&quot;</span>\n      /&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</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">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</span>, <span class="hljs-string">&#39;c&#39;</span>],\n    <span class="hljs-attr">result</span>: [<span class="hljs-string">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-circle&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/circle/index&quot;</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">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 30 }}&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;text&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">&quot;6&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BBD\u5EA6\u5B9A\u5236&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-circle</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">layer-color</span>=<span class="hljs-string">&quot;#eeeeee&quot;</span>\n  <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n  <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u989C\u8272\u5B9A\u5236&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;{{ gradientColor }}&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6E10\u53D8\u8272&quot;</span> /&gt;</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">&#39;0%&#39;</span>: <span class="hljs-string">&#39;#ffd01e&#39;</span>,\n      <span class="hljs-string">&#39;100%&#39;</span>: <span class="hljs-string">&#39;#ee0a24&#39;</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">&lt;<span class="hljs-name">van-circle</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n  <span class="hljs-attr">clockwise</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u9006\u65F6\u9488&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;120&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5927\u5C0F\u5B9A\u5236&quot;</span> /&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-row&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/row/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-col&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/col/index&quot;</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">&lt;<span class="hljs-name">van-row</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;4&quot;</span>&gt;</span>span: 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">&quot;4&quot;</span>&gt;</span>offset: 4, span: 10<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">&quot;12&quot;</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;12&quot;</span>&gt;</span>offset: 12, span: 12<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</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">&lt;<span class="hljs-name">van-row</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">&quot;20&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-collapse&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/collapse/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-collapse-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/collapse-item/index&quot;</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">&lt;<span class="hljs-name">van-collapse</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeNames }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u5FAE\u5546\u57CE&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u96F6\u552E&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</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">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u7F8E\u4E1A&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">disabled</span>&gt;</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">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</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">&#39;1&#39;</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">&lt;<span class="hljs-name">van-collapse</span> <span class="hljs-attr">accordion</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeName }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u5FAE\u5546\u57CE&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u96F6\u552E&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</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">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u7F8E\u4E1A&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</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">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</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">&#39;1&#39;</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">&lt;<span class="hljs-name">van-collapse</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeNames }}&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n  <span class="hljs-attr">bind:open</span>=<span class="hljs-string">&quot;onOpen&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u5FAE\u5546\u57CE&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u96F6\u552E&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</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">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u7F8E\u4E1A&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</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">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</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">&#39;1&#39;</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">&lt;<span class="hljs-name">van-collapse</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeNames }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;title&quot;</span>&gt;</span>\u6709\u8D5E\u5FAE\u5546\u57CE<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;question-o&quot;</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n    \u63D0\u4F9B\u591A\u6837\u5E97\u94FA\u6A21\u677F\uFF0C\u5FEB\u901F\u642D\u5EFA\u7F51\u4E0A\u5546\u57CE\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6709\u8D5E\u96F6\u552E&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span>&gt;</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">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</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">&#39;1&#39;</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">&#39;@vant/weapp/common/index.wxss&#39;</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">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-ellipsis&quot;</span>&gt;</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">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u6700\u591A\u663E\u793A\u4E24\u884C --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-multi-ellipsis--l2&quot;</span>&gt;</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">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u6700\u591A\u663E\u793A\u4E09\u884C --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-multi-ellipsis--l3&quot;</span>&gt;</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">&lt;/<span class="hljs-name">view</span>&gt;</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">&lt;!-- \u4E0A\u8FB9\u6846 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--top&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u4E0B\u8FB9\u6846 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--bottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u5DE6\u8FB9\u6846 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u53F3\u8FB9\u6846 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u4E0A\u4E0B\u8FB9\u6846 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--top-bottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u5168\u8FB9\u6846 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--surround&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</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">&#39;Helvetica Neue&#39;</span>, Helvetica,\n    Segoe UI, Arial, Roboto, <span class="hljs-string">&#39;PingFang SC&#39;</span>, <span class="hljs-string">&#39;miui&#39;</span>, <span class="hljs-string">&#39;Hiragino Sans GB&#39;</span>, <span class="hljs-string">&#39;Microsoft Yahei&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-config-provider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/config-provider/index&quot;</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">&lt;<span class="hljs-name">van-config-provider</span> <span class="hljs-attr">theme-vars</span>=<span class="hljs-string">&quot;{{ themeVars }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u8BC4\u5206&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;input&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%&quot;</span>&gt;</span>\n        <span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>\n          <span class="hljs-attr">model:value</span>=<span class="hljs-string">&quot;{{ rate }}&quot;</span>\n          <span class="hljs-attr">data-key</span>=<span class="hljs-string">&quot;rate&quot;</span>\n          <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n        /&gt;</span>\n      <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u6ED1\u5757&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;input&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%&quot;</span>&gt;</span>\n        <span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span>\n          <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ slider }}&quot;</span>\n          <span class="hljs-attr">data-key</span>=<span class="hljs-string">&quot;slider&quot;</span>\n          <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n        /&gt;</span>\n      <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin: 16px&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<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">&quot;primary&quot;</span>&gt;</span>\u63D0\u4EA4<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-config-provider</span>&gt;</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">&#39;../../common/page&#39;</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">&#39;#07c160&#39;</span>,\n      <span class="hljs-attr">sliderBarHeight</span>: <span class="hljs-string">&#39;4px&#39;</span>,\n      <span class="hljs-attr">sliderButtonWidth</span>: <span class="hljs-string">&#39;20px&#39;</span>,\n      <span class="hljs-attr">sliderButtonHeight</span>: <span class="hljs-string">&#39;20px&#39;</span>,\n      <span class="hljs-attr">sliderActiveBackgroundColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,\n      <span class="hljs-attr">buttonPrimaryBorderColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,\n      <span class="hljs-attr">buttonPrimaryBackgroundColor</span>: <span class="hljs-string">&#39;#07c160&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-count-down&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/count-down/index&quot;</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">&lt;<span class="hljs-name">van-count-down</span> <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ time }}&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-count-down</span> <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ time }}&quot;</span> <span class="hljs-attr">format</span>=<span class="hljs-string">&quot;DD \u5929 HH \u65F6 mm \u5206 ss \u79D2&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-count-down</span> <span class="hljs-attr">millisecond</span> <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ time }}&quot;</span> <span class="hljs-attr">format</span>=<span class="hljs-string">&quot;HH:mm:ss:SSS&quot;</span> /&gt;</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">&lt;<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">&quot;{{ time }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ timeData.hours }}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ timeData.minutes }}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ timeData.seconds }}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-count-down</span>&gt;</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">&lt;<span class="hljs-name">van-count-down</span>\n  <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-count-down&quot;</span>\n  <span class="hljs-attr">millisecond</span>\n  <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ 3000 }}&quot;</span>\n  <span class="hljs-attr">auto-start</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  <span class="hljs-attr">format</span>=<span class="hljs-string">&quot;ss:SSS&quot;</span>\n  <span class="hljs-attr">bind:finish</span>=<span class="hljs-string">&quot;finished&quot;</span>\n/&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5F00\u59CB&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;play-circle-o&quot;</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">&quot;start&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6682\u505C&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;pause-circle-o&quot;</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">&quot;pause&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u91CD\u7F6E&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;replay&quot;</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">&quot;reset&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&#39;.control-count-down&#39;</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">&#39;.control-count-down&#39;</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">&#39;.control-count-down&#39;</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">&#39;\u5012\u8BA1\u65F6\u7ED3\u675F&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-datetime-picker&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/datetime-picker/index&quot;</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">&lt;<span class="hljs-name">van-datetime-picker</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime&quot;</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n  <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n  <span class="hljs-attr">max-date</span>=<span class="hljs-string">&quot;{{ maxDate }}&quot;</span>\n  <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-datetime-picker</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;date&quot;</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n  <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n  <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n  <span class="hljs-attr">formatter</span>=<span class="hljs-string">&quot;{{ formatter }}&quot;</span>\n/&gt;</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">&#39;year&#39;</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">&#39;month&#39;</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">&lt;<span class="hljs-name">van-datetime-picker</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;year-month&quot;</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n  <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n  <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-datetime-picker</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n  <span class="hljs-attr">min-hour</span>=<span class="hljs-string">&quot;{{ minHour }}&quot;</span>\n  <span class="hljs-attr">max-hour</span>=<span class="hljs-string">&quot;{{ maxHour }}&quot;</span>\n  <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n/&gt;</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">&#39;12:00&#39;</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">&lt;<span class="hljs-name">van-datetime-picker</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n  <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;{{ filter }}&quot;</span>\n/&gt;</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">&#39;12:00&#39;</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">&#39;minute&#39;</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>) =&gt;</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) =&gt; values</em></td><td>-</td></tr><tr><td>formatter</td><td>\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570</td><td><em>(type, value) =&gt; value</em></td><td>-</td></tr><tr><td>title</td><td>\u9876\u90E8\u680F\u6807\u9898</td><td><em>string</em></td><td><code>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-dialog&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/dialog/index&quot;</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">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</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">&#39;path/to/@vant/weapp/dist/dialog/dialog&#39;</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">&#39;\u6807\u9898&#39;</span>,\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</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">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</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">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</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">&#39;path/to/@vant/weapp/dist/dialog/dialog&#39;</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">&#39;\u6807\u9898&#39;</span>,\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,\n})\n  .<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n    <span class="hljs-comment">// on confirm</span>\n  })\n  .<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =&gt;</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">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</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">&#39;path/to/@vant/weapp/dist/dialog/dialog&#39;</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">&#39;\u6807\u9898&#39;</span>,\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,\n  <span class="hljs-attr">theme</span>: <span class="hljs-string">&#39;round-button&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</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">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,\n  <span class="hljs-attr">theme</span>: <span class="hljs-string">&#39;round-button&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</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">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</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">&#39;path/to/@vant/weapp/dist/dialog/dialog&#39;</span>;\n\n<span class="hljs-keyword">const</span> <span class="hljs-title function_">beforeClose</span> = (<span class="hljs-params">action</span>) =&gt; <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> {\n  <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {\n    <span class="hljs-keyword">if</span> (action === <span class="hljs-string">&#39;confirm&#39;</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">&#39;\u6807\u9898&#39;</span>,\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</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">&lt;<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">&quot;\u6807\u9898&quot;</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">show-cancel-button</span>\n  <span class="hljs-attr">confirm-button-open-type</span>=<span class="hljs-string">&quot;getUserInfo&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n  <span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">&quot;getUserInfo&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/1.jpg&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dialog</span>&gt;</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) =&gt; boolean | Promise&lt;boolean&gt;</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) =&gt; boolean | Promise&lt;boolean&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-divider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/divider/index&quot;</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">&lt;<span class="hljs-name">van-divider</span> /&gt;</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">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">hairline</span> /&gt;</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">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">dashed</span> /&gt;</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">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>\u6587\u672C<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span>\u6587\u672C<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>\u6587\u672C<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</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">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">textColor</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>\u6587\u672C\u989C\u8272<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">borderColor</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>\n  border \u989C\u8272\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">fontSize</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span>\u5B57\u4F53\u5927\u5C0F<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</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">&lt;<span class="hljs-name">van-divider</span>\n  <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span>\n  <span class="hljs-attr">customStyle</span>=<span class="hljs-string">&quot;color: #1989fa; border-color: #1989fa; font-size: 18px;&quot;</span>\n&gt;</span>\n  \u6587\u672C\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-dropdown-menu&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/dropdown-menu/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-dropdown-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/dropdown-item/index&quot;</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">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</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">&#39;\u5168\u90E8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u65B0\u6B3E\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6D3B\u52A8\u5546\u54C1&#39;</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">&#39;\u9ED8\u8BA4\u6392\u5E8F&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;a&#39;</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u597D\u8BC4\u6392\u5E8F&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;b&#39;</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u9500\u91CF\u6392\u5E8F&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;c&#39;</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">&#39;a&#39;</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">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;item&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;{{ itemTitle }}&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;{{ switchTitle1 }}&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>\n        <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span>\n        <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>\n        <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 26px&quot;</span>\n        <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ switch1 }}&quot;</span>\n        <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n        <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onSwitch1Change&quot;</span>\n      /&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;{{ switchTitle2 }}&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>\n        <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span>\n        <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>\n        <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 26px&quot;</span>\n        <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ switch2 }}&quot;</span>\n        <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n        <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onSwitch2Change&quot;</span>\n      /&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;padding: 5px 16px;&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">block</span> <span class="hljs-attr">round</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>&gt;</span>\n        \u786E\u8BA4\n      <span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</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">&#39;\u5305\u90AE&#39;</span>,\n    <span class="hljs-attr">switchTitle2</span>: <span class="hljs-string">&#39;\u56E2\u8D2D&#39;</span>,\n    <span class="hljs-attr">itemTitle</span>: <span class="hljs-string">&#39;\u7B5B\u9009&#39;</span>,\n    <span class="hljs-attr">option1</span>: [\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5168\u90E8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u65B0\u6B3E\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6D3B\u52A8\u5546\u54C1&#39;</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">&#39;#item&#39;</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">&lt;<span class="hljs-name">van-dropdown-menu</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</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">&lt;<span class="hljs-name">van-dropdown-menu</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;up&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</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">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-empty&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/empty/index&quot;</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">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</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">&lt;!-- \u901A\u7528\u9519\u8BEF --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;error&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</span>\n<span class="hljs-comment">&lt;!-- \u7F51\u7EDC\u9519\u8BEF --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;network&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</span>\n<span class="hljs-comment">&lt;!-- \u641C\u7D22\u63D0\u793A --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-empty</span>\n  <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-image&quot;</span>\n  <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/custom-empty-image.png&quot;</span>\n  <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bottom-button&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-empty</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</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">&lt;/<span class="hljs-name">style</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-field&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/field/index&quot;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n    <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&#39;&#39;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">model:value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&#39;&#39;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username }}&quot;</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">&quot;\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;question-o&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">bind:click-icon</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span>\n  /&gt;</span>\n\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ password }}&quot;</span>\n    <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span>\n    <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u5BC6\u7801&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u5BC6\u7801&quot;</span>\n    <span class="hljs-attr">required</span>\n    <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u8F93\u5165\u6846\u5DF2\u7981\u7528&quot;</span>\n    <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;contact&quot;</span>\n    <span class="hljs-attr">disabled</span>\n    <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username }}&quot;</span>\n    <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">error</span>\n  /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ phone }}&quot;</span>\n    <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u624B\u673A\u53F7&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u624B\u673A\u53F7&quot;</span>\n    <span class="hljs-attr">error-message</span>=<span class="hljs-string">&quot;\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF&quot;</span>\n    <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username3 }}&quot;</span>\n    <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>\n    <span class="hljs-attr">input-align</span>=<span class="hljs-string">&quot;right&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ message }}&quot;</span>\n    <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7559\u8A00&quot;</span>\n    <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;textarea&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7559\u8A00&quot;</span>\n    <span class="hljs-attr">autosize</span>\n    <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ sms }}&quot;</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">&quot;\u77ED\u4FE1\u9A8C\u8BC1\u7801&quot;</span>\n    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801&quot;</span>\n    <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n    <span class="hljs-attr">use-button-slot</span>\n  &gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\n      \u53D1\u9001\u9A8C\u8BC1\u7801\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</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&amp;page=1&amp;block=1&amp;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>&#39;&#39;</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>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-goods-action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/goods-action/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-goods-action-icon&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/goods-action-icon/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-goods-action-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/goods-action-button/index&quot;</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">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span>\n    <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269\u8F66&quot;</span>\n    <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>\n    <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickButton&quot;</span>\n  /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickButton&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</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">&#39;\u70B9\u51FB\u56FE\u6807&#39;</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">&#39;\u70B9\u51FB\u6309\u94AE&#39;</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">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5E97\u94FA&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</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">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5E97\u94FA&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#be99ff&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</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">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5E97\u94FA&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<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">&quot;#7232dd&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-grid&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/grid/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-grid-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/grid-item/index&quot;</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">&lt;<span class="hljs-name">van-grid</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 6 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<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">&quot;{{ 3 }}&quot;</span> <span class="hljs-attr">wx:for-item</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">image</span>\n      <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%; height: 90px;&quot;</span>\n      <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg&quot;</span>\n    /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-grid-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">square</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 8 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">&quot;{{ 10 }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 8 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;horizontal&quot;</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span>\n    <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>\n    <span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;navigateTo&quot;</span>\n    <span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>\n    <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;Navigate \u8DF3\u8F6C&quot;</span>\n  /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span>\n    <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>\n    <span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;reLaunch&quot;</span>\n    <span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>\n    <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;ReLaunch \u8DF3\u8F6C&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-icon&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/icon/index&quot;</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">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;close&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;https://b.yzcdn.cn/vant/icon-demo-1126.png&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;9&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;red&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;50px&quot;</span> /&gt;</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">&#39;my-icon&#39;</span>;\n  <span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">&#39;./my-icon.ttf&#39;</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">&#39;truetype&#39;</span>);\n}\n\n<span class="hljs-selector-class">.my-icon</span> {\n  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#39;my-icon&#39;</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">&#39;\\e626&#39;</span>;\n}\n</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">class-prefix</span>=<span class="hljs-string">&quot;my-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;extra&quot;</span> /&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-image&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/image/index&quot;</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">&lt;<span class="hljs-name">van-image</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-image</span>\n  <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;10rem&quot;</span>\n  <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;10rem&quot;</span>\n  <span class="hljs-attr">fit</span>=<span class="hljs-string">&quot;contain&quot;</span>\n  <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>\n/&gt;</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">&lt;<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">&quot;10rem&quot;</span>\n  <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;10rem&quot;</span>\n  <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-image</span>\n  <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100&quot;</span>\n  <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;100&quot;</span>\n  <span class="hljs-attr">lazy-load</span>\n  <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-image</span> <span class="hljs-attr">use-loading-slot</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;loading&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;spinner&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;20&quot;</span> <span class="hljs-attr">vertical</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-image</span>&gt;</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">&lt;<span class="hljs-name">van-image</span> <span class="hljs-attr">use-error-slot</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;error&quot;</span>&gt;</span>\u52A0\u8F7D\u5931\u8D25<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-image</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-index-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/index-bar/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-index-anchor&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/index-anchor/index&quot;</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">&lt;<span class="hljs-name">van-index-bar</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;A&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;B&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n  ...\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-bar</span>&gt;</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">&lt;<span class="hljs-name">van-index-bar</span> <span class="hljs-attr">index-list</span>=<span class="hljs-string">&quot;{{ indexList }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u6807\u98981<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-anchor</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u6807\u98982<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-anchor</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n  ...\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-bar</span>&gt;</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>&lt;IndexBar /&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-loading&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/loading/index&quot;</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">&lt;<span class="hljs-name">van-loading</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;spinner&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;spinner&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>&gt;</span>\u52A0\u8F7D\u4E2D...<span class="hljs-tag">&lt;/<span class="hljs-name">van-loading</span>&gt;</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">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span> <span class="hljs-attr">vertical</span>&gt;</span>\u52A0\u8F7D\u4E2D...<span class="hljs-tag">&lt;/<span class="hljs-name">van-loading</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-nav-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/nav-bar/index&quot;</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">&lt;<span class="hljs-name">van-nav-bar</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>\n  <span class="hljs-attr">left-text</span>=<span class="hljs-string">&quot;\u8FD4\u56DE&quot;</span>\n  <span class="hljs-attr">right-text</span>=<span class="hljs-string">&quot;\u6309\u94AE&quot;</span>\n  <span class="hljs-attr">left-arrow</span>\n  <span class="hljs-attr">bind:click-left</span>=<span class="hljs-string">&quot;onClickLeft&quot;</span>\n  <span class="hljs-attr">bind:click-right</span>=<span class="hljs-string">&quot;onClickRight&quot;</span>\n/&gt;</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">&#39;\u70B9\u51FB\u8FD4\u56DE&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</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">&#39;\u70B9\u51FB\u6309\u94AE&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</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">&lt;<span class="hljs-name">van-nav-bar</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> <span class="hljs-attr">left-text</span>=<span class="hljs-string">&quot;\u8FD4\u56DE&quot;</span> <span class="hljs-attr">left-arrow</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-nav-bar</span>&gt;</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>&#39;&#39;</code></td></tr><tr><td>left-text</td><td>\u5DE6\u4FA7\u6587\u6848</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>right-text</td><td>\u53F3\u4FA7\u6587\u6848</td><td><em>string</em></td><td><code>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-notice-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/notice-bar/index&quot;</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">&lt;<span class="hljs-name">van-notice-bar</span>\n  <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;volume-o&quot;</span>\n  <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\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&quot;</span>\n/&gt;</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">&lt;!-- \u6587\u5B57\u8F83\u77ED\u65F6\uFF0C\u901A\u8FC7\u8BBE\u7F6E scrollable \u5C5E\u6027\u5F00\u542F\u6EDA\u52A8\u64AD\u653E --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">scrollable</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span> /&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>\n  <span class="hljs-attr">scrollable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n  <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\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&quot;</span>\n/&gt;</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">&lt;<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">&quot;{{ false }}&quot;</span>\n  <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\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&quot;</span>\n/&gt;</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">&lt;!-- closeable \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u5173\u95ED\u6309\u94AE --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;closeable&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span> /&gt;</span>\n\n<span class="hljs-comment">&lt;!-- link \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u94FE\u63A5\u7BAD\u5934 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;link&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-notice-bar</span>\n  <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>\n  <span class="hljs-attr">background</span>=<span class="hljs-string">&quot;#ecf9ff&quot;</span>\n  <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;info-o&quot;</span>\n  <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-notice-bar</span>\n  <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;{{ text }}&quot;</span>\n  <span class="hljs-attr">speed</span>=<span class="hljs-string">&quot;{{speedValue}}&quot;</span>\n  <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png&quot;</span>\n/&gt;</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>&#39;&#39;</code></td></tr><tr><td>text</td><td>\u901A\u77E5\u6587\u672C\u5185\u5BB9</td><td><em>string</em></td><td><code>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-notify&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/notify/index&quot;</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">&#39;path/to/@vant/weapp/dist/notify/notify&#39;</span>;\n\n<span class="hljs-title class_">Notify</span>(<span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</span>);\n</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u5BF9\u5E94\u7684\u8282\u70B9 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-notify&quot;</span> /&gt;</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">&#39;primary&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</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">&#39;success&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</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">&#39;danger&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</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">&#39;warning&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</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">&#39;\u81EA\u5B9A\u4E49\u989C\u8272&#39;</span>,\n  <span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#ad0000&#39;</span>,\n  <span class="hljs-attr">background</span>: <span class="hljs-string">&#39;#ffe1e1&#39;</span>,\n});\n\n<span class="hljs-title class_">Notify</span>({\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u81EA\u5B9A\u4E49\u65F6\u957F&#39;</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">&#39;\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668&#39;</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">&#39;#custom-selector&#39;</span>,\n});\n</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u81EA\u5B9A\u4E49\u8282\u70B9 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;custom-selector&quot;</span> /&gt;</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>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-overlay&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/overlay/index&quot;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickShow&quot;</span>&gt;</span>\u663E\u793A\u906E\u7F69\u5C42<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-overlay</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickHide&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickShow&quot;</span>&gt;</span>\u5D4C\u5165\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-overlay</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickHide&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;block&quot;</span> <span class="hljs-attr">catch:tap</span>=<span class="hljs-string">&quot;noop&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-overlay</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-panel&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/panel/index&quot;</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">&lt;<span class="hljs-name">van-panel</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> <span class="hljs-attr">status</span>=<span class="hljs-string">&quot;\u72B6\u6001&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-panel</span>&gt;</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">&lt;<span class="hljs-name">van-panel</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> <span class="hljs-attr">status</span>=<span class="hljs-string">&quot;\u72B6\u6001&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-panel</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-picker&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/picker/index&quot;</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">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&#39;path/to/@vant/weapp/dist/toast/toast&#39;</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">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span>, <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5609\u5174&#39;</span>, <span class="hljs-string">&#39;\u6E56\u5DDE&#39;</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">&lt;<span class="hljs-name">van-picker</span>\n  <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span>\n  <span class="hljs-attr">default-index</span>=<span class="hljs-string">&quot;{{ 2 }}&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</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">&lt;<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">&quot;\u6807\u9898&quot;</span>\n  <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span>\n  <span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span>\n  <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>\n/&gt;</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">&#39;path/to/@vant/weapp/dist/toast/toast&#39;</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">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span>, <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5609\u5174&#39;</span>, <span class="hljs-string">&#39;\u6E56\u5DDE&#39;</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">&#39;\u53D6\u6D88&#39;</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">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">const</span> citys = {\n  \u6D59\u6C5F: [<span class="hljs-string">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span>, <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5609\u5174&#39;</span>, <span class="hljs-string">&#39;\u6E56\u5DDE&#39;</span>],\n  \u798F\u5EFA: [<span class="hljs-string">&#39;\u798F\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u53A6\u95E8&#39;</span>, <span class="hljs-string">&#39;\u8386\u7530&#39;</span>, <span class="hljs-string">&#39;\u4E09\u660E&#39;</span>, <span class="hljs-string">&#39;\u6CC9\u5DDE&#39;</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">&#39;column1&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">values</span>: citys[<span class="hljs-string">&#39;\u6D59\u6C5F&#39;</span>],\n        <span class="hljs-attr">className</span>: <span class="hljs-string">&#39;column2&#39;</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">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> /&gt;</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">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span> },\n      { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</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">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> <span class="hljs-attr">loading</span> /&gt;</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>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-popup&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/popup/index&quot;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5C55\u793A\u5F39\u51FA\u5C42&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;showPopup&quot;</span> /&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</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">&lt;<span class="hljs-name">van-popup</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;top&quot;</span>\n  <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%;&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-popup</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u81EA\u5B9A\u4E49\u56FE\u6807 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">close-icon</span>=<span class="hljs-string">&quot;close&quot;</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n\n<span class="hljs-comment">&lt;!-- \u56FE\u6807\u4F4D\u7F6E --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">close-icon-position</span>=<span class="hljs-string">&quot;top-left&quot;</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-popup</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">round</span>\n  <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n  <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</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">&lt;!-- page-meta \u53EA\u80FD\u662F\u9875\u9762\u5185\u7684\u7B2C\u4E00\u4E2A\u8282\u70B9 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">page-meta</span> <span class="hljs-attr">page-style</span>=<span class="hljs-string">&quot;{{ show ? &#39;overflow: hidden;&#39; : &#39;&#39; }}&quot;</span> /&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">catch:touchstart</span> /&gt;</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>&#39;&#39;</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>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-progress&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/progress/index&quot;</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">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">:percentage</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">&quot;8&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">inactive</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;\u6A59\u8272&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#f2826a&quot;</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;25&quot;</span> /&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;\u7EA2\u8272&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span>\n  <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;75&quot;</span>\n  <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;\u7D2B\u8272&quot;</span>\n  <span class="hljs-attr">pivot-color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span>\n  <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(to right, #be99ff, #7232dd)&quot;</span>\n/&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-radio&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/radio/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-radio-group&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/radio-group/index&quot;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&#39;1&#39;</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">&lt;<span class="hljs-name">van-radio-group</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n  <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;horizontal&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">checked-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">checked-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">&quot;24px&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">&quot;24px&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<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">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n    \u81EA\u5B9A\u4E49\u56FE\u6807\n    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ radio === &#39;1&#39; ? icon.active : icon.normal }}&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<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">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\n    \u81EA\u5B9A\u4E49\u56FE\u6807\n    <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ radio === &#39;2&#39; ? icon.active : icon.normal }}&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&#39;//img.yzcdn.cn/icon-normal.png&#39;</span>,\n      <span class="hljs-attr">active</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-active.png&#39;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">label-disabled</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">label-disabled</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u9009\u6846 1&quot;</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u9009\u6846 2&quot;</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> /&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</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">&#39;1&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-rate&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/rate/index&quot;</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">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-rate</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;like&quot;</span>\n  <span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;like-o&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-rate</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;{{ 25 }}&quot;</span>\n  <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffd21e&quot;</span>\n  <span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;star&quot;</span>\n  <span class="hljs-attr">void-color</span>=<span class="hljs-string">&quot;#eee&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-rate</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">allow-half</span>\n  <span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;star&quot;</span>\n  <span class="hljs-attr">void-color</span>=<span class="hljs-string">&quot;#eee&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">count</span>=<span class="hljs-string">&quot;{{ 6 }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">readonly</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&#39;\u5F53\u524D\u503C\uFF1A&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-search&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/search/index&quot;</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">&lt;<span class="hljs-name">van-search</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-search</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>\n  <span class="hljs-attr">show-action</span>\n  <span class="hljs-attr">bind:search</span>=<span class="hljs-string">&quot;onSearch&quot;</span>\n  <span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-search</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">input-align</span>=<span class="hljs-string">&quot;center&quot;</span>\n  <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-search</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-search</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;round&quot;</span>\n  <span class="hljs-attr">background</span>=<span class="hljs-string">&quot;#4fc08d&quot;</span>\n  <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-search</span>\n  <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n  <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u5730\u5740&quot;</span>\n  <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>\n  <span class="hljs-attr">use-action-slot</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n  <span class="hljs-attr">bind:search</span>=<span class="hljs-string">&quot;onSearch&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;action&quot;</span> <span class="hljs-attr">bind:tap</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>\u641C\u7D22<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-search</span>&gt;</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">&#39;&#39;</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">&#39;\u641C\u7D22&#39;</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">&#39;\u641C\u7D22&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-share-sheet&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/share-sheet/index&quot;</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">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u663E\u793A\u5206\u4EAB\u9762\u677F&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB&quot;</span>\n  <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>\n  <span class="hljs-attr">bind:select</span>=<span class="hljs-string">&quot;onSelect&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</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">&#39;\u5FAE\u4FE1&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span>, <span class="hljs-attr">openType</span>: <span class="hljs-string">&#39;share&#39;</span> },\n      { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u535A&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },\n      { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u590D\u5236\u94FE\u63A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span> },\n      { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5206\u4EAB\u6D77\u62A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },\n      { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E8C\u7EF4\u7801&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</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">&lt;<span class="hljs-name">van-share-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB&quot;</span>\n  <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>\n/&gt;</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">&#39;\u5FAE\u4FE1&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span> },\n        { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u535A&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },\n        { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;QQ&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qq&#39;</span> },\n      ],\n      [\n        { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u590D\u5236\u94FE\u63A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span> },\n        { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5206\u4EAB\u6D77\u62A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },\n        { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E8C\u7EF4\u7801&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</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">&lt;<span class="hljs-name">van-share-sheet</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span> /&gt;</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">&#39;\u540D\u79F0&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-fire.png&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u540D\u79F0&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-light.png&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u540D\u79F0&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-water.png&#39;</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">&lt;<span class="hljs-name">van-share-sheet</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>\n  <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>\n  <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB&quot;</span>\n  <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span>\n/&gt;</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">&#39;\u5FAE\u4FE1&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span> },\n      { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u535A&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },\n      {\n        <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u590D\u5236\u94FE\u63A5&#39;</span>,\n        <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span>,\n        <span class="hljs-attr">description</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n      },\n      { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5206\u4EAB\u6D77\u62A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },\n      { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E8C\u7EF4\u7801&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</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>&#39;\u53D6\u6D88&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-sidebar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/sidebar/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-sidebar-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/sidebar-item/index&quot;</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">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</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">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</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">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</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">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D 1&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D 2&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D 3&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-notify&quot;</span> /&gt;</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">&#39;@vant/weapp/dist/notify/notify&#39;</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">&#39;primary&#39;</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>&#39;&#39;</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>&#39;&#39;</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>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-skeleton&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/skeleton/index&quot;</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">&lt;<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">row</span>=<span class="hljs-string">&quot;3&quot;</span> /&gt;</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">&lt;<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">&quot;3&quot;</span> /&gt;</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">&lt;<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">&quot;3&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;{{ loading }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5B9E\u9645\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-skeleton</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-slider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/slider/index&quot;</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">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&#39;none&#39;</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">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 10, 50 }}&quot;</span> <span class="hljs-attr">range</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&#39;none&#39;</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">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;-50&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</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">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;10&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">bar-height</span>=<span class="hljs-string">&quot;4px&quot;</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentValue }}&quot;</span> <span class="hljs-attr">use-button-slot</span> <span class="hljs-attr">bind:drag</span>=<span class="hljs-string">&quot;onDrag&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-button&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>{{ currentValue }}/100<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-slider</span>&gt;</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">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 150px;&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span>\n    <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ [10, 50] }}&quot;</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">&quot;margin-left: 100px;&quot;</span>\n    <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n  /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</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">&#39;none&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-stepper&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/stepper/index&quot;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;2&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 5 }}&quot;</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;5&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;8&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">integer</span> /&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">long-press</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;0.2&quot;</span> <span class="hljs-attr">decimal-length</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">async-change</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">() =&gt;</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">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">input-width</span>=<span class="hljs-string">&quot;40px&quot;</span> <span class="hljs-attr">button-size</span>=<span class="hljs-string">&quot;32px&quot;</span> /&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-steps&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/steps/index&quot;</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">&lt;<span class="hljs-name">van-steps</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> /&gt;</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">&#39;\u6B65\u9AA4\u4E00&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E8C&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E09&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u56DB&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</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">&lt;<span class="hljs-name">van-steps</span>\n  <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span>\n  <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>\n  <span class="hljs-attr">active-icon</span>=<span class="hljs-string">&quot;success&quot;</span>\n  <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#38f&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-steps</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> /&gt;</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">&#39;\u6B65\u9AA4\u4E00&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n        <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;location-o&#39;</span>,\n        <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;success&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E8C&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n        <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;like-o&#39;</span>,\n        <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;plus&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E09&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n        <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;star-o&#39;</span>,\n        <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;cross&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u56DB&#39;</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,\n        <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;phone-o&#39;</span>,\n        <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;fail&#39;</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">&lt;<span class="hljs-name">van-steps</span>\n  <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span>\n  <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>\n  <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;vertical&quot;</span>\n  <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n/&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-sticky&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/sticky/index&quot;</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">&lt;<span class="hljs-name">van-sticky</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u57FA\u7840\u7528\u6CD5<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</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">&lt;<span class="hljs-name">van-sticky</span> <span class="hljs-attr">offset-top</span>=<span class="hljs-string">&quot;{{ 50 }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u5438\u9876\u8DDD\u79BB<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</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">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;container&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 150px;&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-sticky</span> <span class="hljs-attr">container</span>=<span class="hljs-string">&quot;{{ container }}&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6307\u5B9A\u5BB9\u5668<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</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">() =&gt;</span> wx.<span class="hljs-title function_">createSelectorQuery</span>().<span class="hljs-title function_">select</span>(<span class="hljs-string">&#39;#container&#39;</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">&lt;<span class="hljs-name">scroll-view</span>\n  <span class="hljs-attr">bind:scroll</span>=<span class="hljs-string">&quot;onScroll&quot;</span>\n  <span class="hljs-attr">scroll-y</span>\n  <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;scroller&quot;</span>\n  <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 200px;&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 400px; padding-top: 50px;&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-sticky</span> <span class="hljs-attr">scroll-top</span>=<span class="hljs-string">&quot;{{ scrollTop }}&quot;</span> <span class="hljs-attr">offset-top</span>=<span class="hljs-string">&quot;{{ offsetTop }}&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u5D4C\u5957\u5728 scroll-view \u5185<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</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">&#39;#scroller&#39;</span>)\n      .<span class="hljs-title function_">boundingClientRect</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-submit-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/submit-bar/index&quot;</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">&lt;<span class="hljs-name">van-submit-bar</span>\n  <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>\n  <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>\n  <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>\n/&gt;</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">&lt;<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">&quot;{{ 3050 }}&quot;</span>\n  <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>\n  <span class="hljs-attr">tip</span>=<span class="hljs-string">&quot;\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, \u6211\u4EEC\u5DF2\u4E3A\u60A8\u63A8\u8350\u5FEB\u9012&quot;</span>\n  <span class="hljs-attr">tip-icon</span>=<span class="hljs-string">&quot;info-o&quot;</span>\n  <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>\n/&gt;</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">&lt;<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">&quot;{{ 3050 }}&quot;</span>\n  <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>\n  <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-submit-bar</span>\n  <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>\n  <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>\n  <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onClickButton&quot;</span>\n  <span class="hljs-attr">tip</span>=<span class="hljs-string">&quot;{{ true }}&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;tip&quot;</span>&gt;</span>\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>\u4FEE\u6539\u5730\u5740<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-submit-bar</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-swipe-cell&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/swipe-cell/index&quot;</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">&lt;<span class="hljs-name">van-swipe-cell</span> <span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span> <span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</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">&lt;<span class="hljs-name">van-swipe-cell</span>\n  <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;swipe-cell&quot;</span>\n  <span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n  <span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n  <span class="hljs-attr">async-close</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</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">&#39;left&#39;</span>:\n      <span class="hljs-keyword">case</span> <span class="hljs-string">&#39;cell&#39;</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">&#39;right&#39;</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">&#39;\u786E\u5B9A\u5220\u9664\u5417\uFF1F&#39;</span>,\n        }).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</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">&lt;<span class="hljs-name">van-swipe-cell</span>\n  <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;swipe-cell2&quot;</span>\n  <span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n  <span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n  <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;\u793A\u4F8B&quot;</span>\n  <span class="hljs-attr">bind:open</span>=<span class="hljs-string">&quot;onOpen&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-swipe-cell__left&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-swipe-cell__right&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</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">&#39;left&#39;</span>:\n        <span class="hljs-title class_">Notify</span>({\n          <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</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">&#39;right&#39;</span>:\n        <span class="hljs-title class_">Notify</span>({\n          <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-switch&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/switch/index&quot;</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">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</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">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">loading</span> /&gt;</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">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-switch</span>\n  <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span>\n  <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n  <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</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">&#39;\u63D0\u793A&#39;</span>,\n      <span class="hljs-attr">content</span>: <span class="hljs-string">&#39;\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F&#39;</span>,\n      <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-tab&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tab/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-tabs&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tabs/index&quot;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&#39;none&#39;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 5&quot;</span>&gt;</span>\u5185\u5BB9 5<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 6&quot;</span>&gt;</span>\u5185\u5BB9 6<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">bind:disabled</span>=<span class="hljs-string">&quot;onClickDisabled&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&#39;none&#39;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;card&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&#39;none&#39;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">sticky</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">animated</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">swipeable</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</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">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;show&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;tabs&quot;</span> /&gt;</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">&#39;#tabs&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-tabbar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tabbar/index&quot;</span><span class="hljs-punctuation">,</span>\n  <span class="hljs-attr">&quot;van-tabbar-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tabbar-item/index&quot;</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">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</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">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;home&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;friends&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;setting&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</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">&#39;home&#39;</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">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">dot</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;20&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</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">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">image</span>\n      <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span>\n      <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ icon.normal }}&quot;</span>\n      <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;aspectFit&quot;</span>\n      <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 30px; height: 18px;&quot;</span>\n    /&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">image</span>\n      <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon-active&quot;</span>\n      <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ icon.active }}&quot;</span>\n      <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;aspectFit&quot;</span>\n      <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 30px; height: 18px;&quot;</span>\n    /&gt;</span>\n    \u81EA\u5B9A\u4E49\n  <span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</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">&#39;https://img.yzcdn.cn/vant/user-inactive.png&#39;</span>,\n      <span class="hljs-attr">active</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/user-active.png&#39;</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">&lt;<span class="hljs-name">van-tabbar</span>\n  <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>\n  <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n  <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;#000&quot;</span>\n  <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</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">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</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">&#39;none&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-tag&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tag/index&quot;</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">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</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">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</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">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</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">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</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">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#f2826a&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">plain</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffe1e1&quot;</span> <span class="hljs-attr">text-color</span>=<span class="hljs-string">&quot;#ad0000&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</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">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</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">&lt;<span class="hljs-name">van-tag</span>\n  <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show.primary }}&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>\n  <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;primary&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n  \u6807\u7B7E\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span>\n  <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show.success }}&quot;</span>\n  <span class="hljs-attr">closeable</span>\n  <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>\n  <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>\n  <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;success&quot;</span>\n  <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n  \u6807\u7B7E\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-toast&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/toast/index&quot;</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">&#39;path/to/@vant/weapp/dist/toast/toast&#39;</span>;\n\n<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~&#39;</span>);\n</code></pre><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-toast&quot;</span> /&gt;</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">&#39;\u52A0\u8F7D\u4E2D...&#39;</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">&#39;\u52A0\u8F7D\u4E2D...&#39;</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">&#39;spinner&#39;</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">&#39;\u6210\u529F\u6587\u6848&#39;</span>);\n<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">fail</span>(<span class="hljs-string">&#39;\u5931\u8D25\u6587\u6848&#39;</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">&#39;\u5012\u8BA1\u65F6 3 \u79D2&#39;</span>,\n  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#39;#custom-selector&#39;</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">() =&gt;</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">&lt;<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;custom-selector&quot;</span> /&gt;</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">&#39;success&#39;</span>,\n  <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u63D0\u4EA4\u6210\u529F&#39;</span>,\n  <span class="hljs-attr">onClose</span>: <span class="hljs-function">() =&gt;</span> {\n    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#39;\u6267\u884COnClose\u51FD\u6570&#39;</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>&#39;&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-transition&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/transition/index&quot;</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">&lt;<span class="hljs-name">van-transition</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">custom-class</span>=<span class="hljs-string">&quot;block&quot;</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">van-transition</span>&gt;</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">&lt;<span class="hljs-name">van-transition</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fade-up&quot;</span> /&gt;</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">&lt;<span class="hljs-name">van-transition</span>\n  <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n  <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span>\n  <span class="hljs-attr">duration</span>=<span class="hljs-string">&quot;{{ { enter: 300, leave: 1000 } }}&quot;</span>\n  <span class="hljs-attr">enter-class</span>=<span class="hljs-string">&quot;van-enter-class&quot;</span>\n  <span class="hljs-attr">enter-active-class</span>=<span class="hljs-string">&quot;van-enter-active-class&quot;</span>\n  <span class="hljs-attr">leave-active-class</span>=<span class="hljs-string">&quot;van-leave-active-class&quot;</span>\n  <span class="hljs-attr">leave-to-class</span>=<span class="hljs-string">&quot;van-leave-to-class&quot;</span>\n/&gt;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-tree-select&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tree-select/index&quot;</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">&lt;<span class="hljs-name">van-tree-select</span>\n  <span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>\n  <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>\n  <span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>\n  <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>\n  <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-tree-select</span>\n  <span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>\n  <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>\n  <span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>\n  <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;{{ max }}&quot;</span>\n  <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>\n  <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>\n/&gt;</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 &gt; -<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">&lt;<span class="hljs-name">van-tree-select</span>\n  <span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>\n  <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;55vw&quot;</span>\n  <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>\n  <span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>\n  <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>\n  <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>\n&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/apple-1.jpg&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;content&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tree-select</span>&gt;</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">&#39;\u6240\u6709\u57CE\u5E02&#39;</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">&#39;\u6E29\u5DDE&#39;</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">&#39;\u676D\u5DDE&#39;</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">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n  <span class="hljs-attr">&quot;van-uploader&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/uploader/index&quot;</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">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span> /&gt;</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">&#39;https://example.weixin.qq.com/upload&#39;</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">&#39;file&#39;</span>,\n      <span class="hljs-attr">formData</span>: { <span class="hljs-attr">user</span>: <span class="hljs-string">&#39;test&#39;</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">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> /&gt;</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">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,\n        <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u56FE\u72471&#39;</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">&#39;http://iph.href.lu/60x60?text=default&#39;</span>,\n        <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u56FE\u72472&#39;</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">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> <span class="hljs-attr">deletable</span>=<span class="hljs-string">&quot;{{ true }}&quot;</span> /&gt;</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">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/tree.jpg&#39;</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">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> /&gt;</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">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,\n        <span class="hljs-attr">status</span>: <span class="hljs-string">&#39;uploading&#39;</span>,\n        <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u4E2D&#39;</span>,\n      },\n      {\n        <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/tree.jpg&#39;</span>,\n        <span class="hljs-attr">status</span>: <span class="hljs-string">&#39;failed&#39;</span>,\n        <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u5931\u8D25&#39;</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">&lt;<span class="hljs-name">van-uploader</span>\n  <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span>\n  <span class="hljs-attr">max-count</span>=<span class="hljs-string">&quot;2&quot;</span>\n  <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span>\n/&gt;</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">&lt;<span class="hljs-name">van-uploader</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E0A\u4F20\u56FE\u7247<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-uploader</span>&gt;</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">&lt;<span class="hljs-name">van-uploader</span>\n  <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span>\n  <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;media&quot;</span>\n  <span class="hljs-attr">use-before-read</span>\n  <span class="hljs-attr">bind:before-read</span>=<span class="hljs-string">&quot;beforeRead&quot;</span>\n  <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span>\n/&gt;</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">&#39;image&#39;</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">&#39;\u8BF7\u9009\u62E9\u56FE\u7247&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</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>) =&gt;</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> =&gt;</span> {\n        wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u6210\u529F&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</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> =&gt;</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> =&gt;</span> {\n        wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u5931\u8D25&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</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>[&#39;original&#39;,&#39;compressed&#39;]</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>[&#39;album&#39;, &#39;camera&#39;]</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);