/******/ (function(modules) { // webpackBootstrap /******/ function hotDisposeChunk(chunkId) { /******/ delete installedChunks[chunkId]; /******/ } /******/ var parentHotUpdateCallback = window["webpackHotUpdate"]; /******/ window["webpackHotUpdate"] = /******/ function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars /******/ hotAddUpdateChunk(chunkId, moreModules); /******/ if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules); /******/ } ; /******/ /******/ function hotDownloadUpdateChunk(chunkId) { // eslint-disable-line no-unused-vars /******/ var head = document.getElementsByTagName("head")[0]; /******/ var script = document.createElement("script"); /******/ script.type = "text/javascript"; /******/ script.charset = "utf-8"; /******/ script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js"; /******/ ; /******/ head.appendChild(script); /******/ } /******/ /******/ function hotDownloadManifest(requestTimeout) { // eslint-disable-line no-unused-vars /******/ requestTimeout = requestTimeout || 10000; /******/ return new Promise(function(resolve, reject) { /******/ if(typeof XMLHttpRequest === "undefined") /******/ return reject(new Error("No browser support")); /******/ try { /******/ var request = new XMLHttpRequest(); /******/ var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json"; /******/ request.open("GET", requestPath, true); /******/ request.timeout = requestTimeout; /******/ request.send(null); /******/ } catch(err) { /******/ return reject(err); /******/ } /******/ request.onreadystatechange = function() { /******/ if(request.readyState !== 4) return; /******/ if(request.status === 0) { /******/ // timeout /******/ reject(new Error("Manifest request to " + requestPath + " timed out.")); /******/ } else if(request.status === 404) { /******/ // no update available /******/ resolve(); /******/ } else if(request.status !== 200 && request.status !== 304) { /******/ // other failure /******/ reject(new Error("Manifest request to " + requestPath + " failed.")); /******/ } else { /******/ // success /******/ try { /******/ var update = JSON.parse(request.responseText); /******/ } catch(e) { /******/ reject(e); /******/ return; /******/ } /******/ resolve(update); /******/ } /******/ }; /******/ }); /******/ } /******/ /******/ /******/ /******/ var hotApplyOnUpdate = true; /******/ var hotCurrentHash = "e03037c6045fa7641395"; // eslint-disable-line no-unused-vars /******/ var hotRequestTimeout = 10000; /******/ var hotCurrentModuleData = {}; /******/ var hotCurrentChildModule; // eslint-disable-line no-unused-vars /******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars /******/ var hotCurrentParentsTemp = []; // eslint-disable-line no-unused-vars /******/ /******/ function hotCreateRequire(moduleId) { // eslint-disable-line no-unused-vars /******/ var me = installedModules[moduleId]; /******/ if(!me) return __webpack_require__; /******/ var fn = function(request) { /******/ if(me.hot.active) { /******/ if(installedModules[request]) { /******/ if(installedModules[request].parents.indexOf(moduleId) < 0) /******/ installedModules[request].parents.push(moduleId); /******/ } else { /******/ hotCurrentParents = [moduleId]; /******/ hotCurrentChildModule = request; /******/ } /******/ if(me.children.indexOf(request) < 0) /******/ me.children.push(request); /******/ } else { /******/ console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); /******/ hotCurrentParents = []; /******/ } /******/ return __webpack_require__(request); /******/ }; /******/ var ObjectFactory = function ObjectFactory(name) { /******/ return { /******/ configurable: true, /******/ enumerable: true, /******/ get: function() { /******/ return __webpack_require__[name]; /******/ }, /******/ set: function(value) { /******/ __webpack_require__[name] = value; /******/ } /******/ }; /******/ }; /******/ for(var name in __webpack_require__) { /******/ if(Object.prototype.hasOwnProperty.call(__webpack_require__, name) && name !== "e") { /******/ Object.defineProperty(fn, name, ObjectFactory(name)); /******/ } /******/ } /******/ fn.e = function(chunkId) { /******/ if(hotStatus === "ready") /******/ hotSetStatus("prepare"); /******/ hotChunksLoading++; /******/ return __webpack_require__.e(chunkId).then(finishChunkLoading, function(err) { /******/ finishChunkLoading(); /******/ throw err; /******/ }); /******/ /******/ function finishChunkLoading() { /******/ hotChunksLoading--; /******/ if(hotStatus === "prepare") { /******/ if(!hotWaitingFilesMap[chunkId]) { /******/ hotEnsureUpdateChunk(chunkId); /******/ } /******/ if(hotChunksLoading === 0 && hotWaitingFiles === 0) { /******/ hotUpdateDownloaded(); /******/ } /******/ } /******/ } /******/ }; /******/ return fn; /******/ } /******/ /******/ function hotCreateModule(moduleId) { // eslint-disable-line no-unused-vars /******/ var hot = { /******/ // private stuff /******/ _acceptedDependencies: {}, /******/ _declinedDependencies: {}, /******/ _selfAccepted: false, /******/ _selfDeclined: false, /******/ _disposeHandlers: [], /******/ _main: hotCurrentChildModule !== moduleId, /******/ /******/ // Module API /******/ active: true, /******/ accept: function(dep, callback) { /******/ if(typeof dep === "undefined") /******/ hot._selfAccepted = true; /******/ else if(typeof dep === "function") /******/ hot._selfAccepted = dep; /******/ else if(typeof dep === "object") /******/ for(var i = 0; i < dep.length; i++) /******/ hot._acceptedDependencies[dep[i]] = callback || function() {}; /******/ else /******/ hot._acceptedDependencies[dep] = callback || function() {}; /******/ }, /******/ decline: function(dep) { /******/ if(typeof dep === "undefined") /******/ hot._selfDeclined = true; /******/ else if(typeof dep === "object") /******/ for(var i = 0; i < dep.length; i++) /******/ hot._declinedDependencies[dep[i]] = true; /******/ else /******/ hot._declinedDependencies[dep] = true; /******/ }, /******/ dispose: function(callback) { /******/ hot._disposeHandlers.push(callback); /******/ }, /******/ addDisposeHandler: function(callback) { /******/ hot._disposeHandlers.push(callback); /******/ }, /******/ removeDisposeHandler: function(callback) { /******/ var idx = hot._disposeHandlers.indexOf(callback); /******/ if(idx >= 0) hot._disposeHandlers.splice(idx, 1); /******/ }, /******/ /******/ // Management API /******/ check: hotCheck, /******/ apply: hotApply, /******/ status: function(l) { /******/ if(!l) return hotStatus; /******/ hotStatusHandlers.push(l); /******/ }, /******/ addStatusHandler: function(l) { /******/ hotStatusHandlers.push(l); /******/ }, /******/ removeStatusHandler: function(l) { /******/ var idx = hotStatusHandlers.indexOf(l); /******/ if(idx >= 0) hotStatusHandlers.splice(idx, 1); /******/ }, /******/ /******/ //inherit from previous dispose call /******/ data: hotCurrentModuleData[moduleId] /******/ }; /******/ hotCurrentChildModule = undefined; /******/ return hot; /******/ } /******/ /******/ var hotStatusHandlers = []; /******/ var hotStatus = "idle"; /******/ /******/ function hotSetStatus(newStatus) { /******/ hotStatus = newStatus; /******/ for(var i = 0; i < hotStatusHandlers.length; i++) /******/ hotStatusHandlers[i].call(null, newStatus); /******/ } /******/ /******/ // while downloading /******/ var hotWaitingFiles = 0; /******/ var hotChunksLoading = 0; /******/ var hotWaitingFilesMap = {}; /******/ var hotRequestedFilesMap = {}; /******/ var hotAvailableFilesMap = {}; /******/ var hotDeferred; /******/ /******/ // The update info /******/ var hotUpdate, hotUpdateNewHash; /******/ /******/ function toModuleId(id) { /******/ var isNumber = (+id) + "" === id; /******/ return isNumber ? +id : id; /******/ } /******/ /******/ function hotCheck(apply) { /******/ if(hotStatus !== "idle") throw new Error("check() is only allowed in idle status"); /******/ hotApplyOnUpdate = apply; /******/ hotSetStatus("check"); /******/ return hotDownloadManifest(hotRequestTimeout).then(function(update) { /******/ if(!update) { /******/ hotSetStatus("idle"); /******/ return null; /******/ } /******/ hotRequestedFilesMap = {}; /******/ hotWaitingFilesMap = {}; /******/ hotAvailableFilesMap = update.c; /******/ hotUpdateNewHash = update.h; /******/ /******/ hotSetStatus("prepare"); /******/ var promise = new Promise(function(resolve, reject) { /******/ hotDeferred = { /******/ resolve: resolve, /******/ reject: reject /******/ }; /******/ }); /******/ hotUpdate = {}; /******/ var chunkId = 0; /******/ { // eslint-disable-line no-lone-blocks /******/ /*globals chunkId */ /******/ hotEnsureUpdateChunk(chunkId); /******/ } /******/ if(hotStatus === "prepare" && hotChunksLoading === 0 && hotWaitingFiles === 0) { /******/ hotUpdateDownloaded(); /******/ } /******/ return promise; /******/ }); /******/ } /******/ /******/ function hotAddUpdateChunk(chunkId, moreModules) { // eslint-disable-line no-unused-vars /******/ if(!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId]) /******/ return; /******/ hotRequestedFilesMap[chunkId] = false; /******/ for(var moduleId in moreModules) { /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { /******/ hotUpdate[moduleId] = moreModules[moduleId]; /******/ } /******/ } /******/ if(--hotWaitingFiles === 0 && hotChunksLoading === 0) { /******/ hotUpdateDownloaded(); /******/ } /******/ } /******/ /******/ function hotEnsureUpdateChunk(chunkId) { /******/ if(!hotAvailableFilesMap[chunkId]) { /******/ hotWaitingFilesMap[chunkId] = true; /******/ } else { /******/ hotRequestedFilesMap[chunkId] = true; /******/ hotWaitingFiles++; /******/ hotDownloadUpdateChunk(chunkId); /******/ } /******/ } /******/ /******/ function hotUpdateDownloaded() { /******/ hotSetStatus("ready"); /******/ var deferred = hotDeferred; /******/ hotDeferred = null; /******/ if(!deferred) return; /******/ if(hotApplyOnUpdate) { /******/ // Wrap deferred object in Promise to mark it as a well-handled Promise to /******/ // avoid triggering uncaught exception warning in Chrome. /******/ // See https://bugs.chromium.org/p/chromium/issues/detail?id=465666 /******/ Promise.resolve().then(function() { /******/ return hotApply(hotApplyOnUpdate); /******/ }).then( /******/ function(result) { /******/ deferred.resolve(result); /******/ }, /******/ function(err) { /******/ deferred.reject(err); /******/ } /******/ ); /******/ } else { /******/ var outdatedModules = []; /******/ for(var id in hotUpdate) { /******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) { /******/ outdatedModules.push(toModuleId(id)); /******/ } /******/ } /******/ deferred.resolve(outdatedModules); /******/ } /******/ } /******/ /******/ function hotApply(options) { /******/ if(hotStatus !== "ready") throw new Error("apply() is only allowed in ready status"); /******/ options = options || {}; /******/ /******/ var cb; /******/ var i; /******/ var j; /******/ var module; /******/ var moduleId; /******/ /******/ function getAffectedStuff(updateModuleId) { /******/ var outdatedModules = [updateModuleId]; /******/ var outdatedDependencies = {}; /******/ /******/ var queue = outdatedModules.slice().map(function(id) { /******/ return { /******/ chain: [id], /******/ id: id /******/ }; /******/ }); /******/ while(queue.length > 0) { /******/ var queueItem = queue.pop(); /******/ var moduleId = queueItem.id; /******/ var chain = queueItem.chain; /******/ module = installedModules[moduleId]; /******/ if(!module || module.hot._selfAccepted) /******/ continue; /******/ if(module.hot._selfDeclined) { /******/ return { /******/ type: "self-declined", /******/ chain: chain, /******/ moduleId: moduleId /******/ }; /******/ } /******/ if(module.hot._main) { /******/ return { /******/ type: "unaccepted", /******/ chain: chain, /******/ moduleId: moduleId /******/ }; /******/ } /******/ for(var i = 0; i < module.parents.length; i++) { /******/ var parentId = module.parents[i]; /******/ var parent = installedModules[parentId]; /******/ if(!parent) continue; /******/ if(parent.hot._declinedDependencies[moduleId]) { /******/ return { /******/ type: "declined", /******/ chain: chain.concat([parentId]), /******/ moduleId: moduleId, /******/ parentId: parentId /******/ }; /******/ } /******/ if(outdatedModules.indexOf(parentId) >= 0) continue; /******/ if(parent.hot._acceptedDependencies[moduleId]) { /******/ if(!outdatedDependencies[parentId]) /******/ outdatedDependencies[parentId] = []; /******/ addAllToSet(outdatedDependencies[parentId], [moduleId]); /******/ continue; /******/ } /******/ delete outdatedDependencies[parentId]; /******/ outdatedModules.push(parentId); /******/ queue.push({ /******/ chain: chain.concat([parentId]), /******/ id: parentId /******/ }); /******/ } /******/ } /******/ /******/ return { /******/ type: "accepted", /******/ moduleId: updateModuleId, /******/ outdatedModules: outdatedModules, /******/ outdatedDependencies: outdatedDependencies /******/ }; /******/ } /******/ /******/ function addAllToSet(a, b) { /******/ for(var i = 0; i < b.length; i++) { /******/ var item = b[i]; /******/ if(a.indexOf(item) < 0) /******/ a.push(item); /******/ } /******/ } /******/ /******/ // at begin all updates modules are outdated /******/ // the "outdated" status can propagate to parents if they don't accept the children /******/ var outdatedDependencies = {}; /******/ var outdatedModules = []; /******/ var appliedUpdate = {}; /******/ /******/ var warnUnexpectedRequire = function warnUnexpectedRequire() { /******/ console.warn("[HMR] unexpected require(" + result.moduleId + ") to disposed module"); /******/ }; /******/ /******/ for(var id in hotUpdate) { /******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) { /******/ moduleId = toModuleId(id); /******/ var result; /******/ if(hotUpdate[id]) { /******/ result = getAffectedStuff(moduleId); /******/ } else { /******/ result = { /******/ type: "disposed", /******/ moduleId: id /******/ }; /******/ } /******/ var abortError = false; /******/ var doApply = false; /******/ var doDispose = false; /******/ var chainInfo = ""; /******/ if(result.chain) { /******/ chainInfo = "\nUpdate propagation: " + result.chain.join(" -> "); /******/ } /******/ switch(result.type) { /******/ case "self-declined": /******/ if(options.onDeclined) /******/ options.onDeclined(result); /******/ if(!options.ignoreDeclined) /******/ abortError = new Error("Aborted because of self decline: " + result.moduleId + chainInfo); /******/ break; /******/ case "declined": /******/ if(options.onDeclined) /******/ options.onDeclined(result); /******/ if(!options.ignoreDeclined) /******/ abortError = new Error("Aborted because of declined dependency: " + result.moduleId + " in " + result.parentId + chainInfo); /******/ break; /******/ case "unaccepted": /******/ if(options.onUnaccepted) /******/ options.onUnaccepted(result); /******/ if(!options.ignoreUnaccepted) /******/ abortError = new Error("Aborted because " + moduleId + " is not accepted" + chainInfo); /******/ break; /******/ case "accepted": /******/ if(options.onAccepted) /******/ options.onAccepted(result); /******/ doApply = true; /******/ break; /******/ case "disposed": /******/ if(options.onDisposed) /******/ options.onDisposed(result); /******/ doDispose = true; /******/ break; /******/ default: /******/ throw new Error("Unexception type " + result.type); /******/ } /******/ if(abortError) { /******/ hotSetStatus("abort"); /******/ return Promise.reject(abortError); /******/ } /******/ if(doApply) { /******/ appliedUpdate[moduleId] = hotUpdate[moduleId]; /******/ addAllToSet(outdatedModules, result.outdatedModules); /******/ for(moduleId in result.outdatedDependencies) { /******/ if(Object.prototype.hasOwnProperty.call(result.outdatedDependencies, moduleId)) { /******/ if(!outdatedDependencies[moduleId]) /******/ outdatedDependencies[moduleId] = []; /******/ addAllToSet(outdatedDependencies[moduleId], result.outdatedDependencies[moduleId]); /******/ } /******/ } /******/ } /******/ if(doDispose) { /******/ addAllToSet(outdatedModules, [result.moduleId]); /******/ appliedUpdate[moduleId] = warnUnexpectedRequire; /******/ } /******/ } /******/ } /******/ /******/ // Store self accepted outdated modules to require them later by the module system /******/ var outdatedSelfAcceptedModules = []; /******/ for(i = 0; i < outdatedModules.length; i++) { /******/ moduleId = outdatedModules[i]; /******/ if(installedModules[moduleId] && installedModules[moduleId].hot._selfAccepted) /******/ outdatedSelfAcceptedModules.push({ /******/ module: moduleId, /******/ errorHandler: installedModules[moduleId].hot._selfAccepted /******/ }); /******/ } /******/ /******/ // Now in "dispose" phase /******/ hotSetStatus("dispose"); /******/ Object.keys(hotAvailableFilesMap).forEach(function(chunkId) { /******/ if(hotAvailableFilesMap[chunkId] === false) { /******/ hotDisposeChunk(chunkId); /******/ } /******/ }); /******/ /******/ var idx; /******/ var queue = outdatedModules.slice(); /******/ while(queue.length > 0) { /******/ moduleId = queue.pop(); /******/ module = installedModules[moduleId]; /******/ if(!module) continue; /******/ /******/ var data = {}; /******/ /******/ // Call dispose handlers /******/ var disposeHandlers = module.hot._disposeHandlers; /******/ for(j = 0; j < disposeHandlers.length; j++) { /******/ cb = disposeHandlers[j]; /******/ cb(data); /******/ } /******/ hotCurrentModuleData[moduleId] = data; /******/ /******/ // disable module (this disables requires from this module) /******/ module.hot.active = false; /******/ /******/ // remove module from cache /******/ delete installedModules[moduleId]; /******/ /******/ // when disposing there is no need to call dispose handler /******/ delete outdatedDependencies[moduleId]; /******/ /******/ // remove "parents" references from all children /******/ for(j = 0; j < module.children.length; j++) { /******/ var child = installedModules[module.children[j]]; /******/ if(!child) continue; /******/ idx = child.parents.indexOf(moduleId); /******/ if(idx >= 0) { /******/ child.parents.splice(idx, 1); /******/ } /******/ } /******/ } /******/ /******/ // remove outdated dependency from module children /******/ var dependency; /******/ var moduleOutdatedDependencies; /******/ for(moduleId in outdatedDependencies) { /******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { /******/ module = installedModules[moduleId]; /******/ if(module) { /******/ moduleOutdatedDependencies = outdatedDependencies[moduleId]; /******/ for(j = 0; j < moduleOutdatedDependencies.length; j++) { /******/ dependency = moduleOutdatedDependencies[j]; /******/ idx = module.children.indexOf(dependency); /******/ if(idx >= 0) module.children.splice(idx, 1); /******/ } /******/ } /******/ } /******/ } /******/ /******/ // Not in "apply" phase /******/ hotSetStatus("apply"); /******/ /******/ hotCurrentHash = hotUpdateNewHash; /******/ /******/ // insert new code /******/ for(moduleId in appliedUpdate) { /******/ if(Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) { /******/ modules[moduleId] = appliedUpdate[moduleId]; /******/ } /******/ } /******/ /******/ // call accept handlers /******/ var error = null; /******/ for(moduleId in outdatedDependencies) { /******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { /******/ module = installedModules[moduleId]; /******/ if(module) { /******/ moduleOutdatedDependencies = outdatedDependencies[moduleId]; /******/ var callbacks = []; /******/ for(i = 0; i < moduleOutdatedDependencies.length; i++) { /******/ dependency = moduleOutdatedDependencies[i]; /******/ cb = module.hot._acceptedDependencies[dependency]; /******/ if(cb) { /******/ if(callbacks.indexOf(cb) >= 0) continue; /******/ callbacks.push(cb); /******/ } /******/ } /******/ for(i = 0; i < callbacks.length; i++) { /******/ cb = callbacks[i]; /******/ try { /******/ cb(moduleOutdatedDependencies); /******/ } catch(err) { /******/ if(options.onErrored) { /******/ options.onErrored({ /******/ type: "accept-errored", /******/ moduleId: moduleId, /******/ dependencyId: moduleOutdatedDependencies[i], /******/ error: err /******/ }); /******/ } /******/ if(!options.ignoreErrored) { /******/ if(!error) /******/ error = err; /******/ } /******/ } /******/ } /******/ } /******/ } /******/ } /******/ /******/ // Load self accepted modules /******/ for(i = 0; i < outdatedSelfAcceptedModules.length; i++) { /******/ var item = outdatedSelfAcceptedModules[i]; /******/ moduleId = item.module; /******/ hotCurrentParents = [moduleId]; /******/ try { /******/ __webpack_require__(moduleId); /******/ } catch(err) { /******/ if(typeof item.errorHandler === "function") { /******/ try { /******/ item.errorHandler(err); /******/ } catch(err2) { /******/ if(options.onErrored) { /******/ options.onErrored({ /******/ type: "self-accept-error-handler-errored", /******/ moduleId: moduleId, /******/ error: err2, /******/ orginalError: err, // TODO remove in webpack 4 /******/ originalError: err /******/ }); /******/ } /******/ if(!options.ignoreErrored) { /******/ if(!error) /******/ error = err2; /******/ } /******/ if(!error) /******/ error = err; /******/ } /******/ } else { /******/ if(options.onErrored) { /******/ options.onErrored({ /******/ type: "self-accept-errored", /******/ moduleId: moduleId, /******/ error: err /******/ }); /******/ } /******/ if(!options.ignoreErrored) { /******/ if(!error) /******/ error = err; /******/ } /******/ } /******/ } /******/ } /******/ /******/ // handle errors in accept handlers and self accepted module load /******/ if(error) { /******/ hotSetStatus("fail"); /******/ return Promise.reject(error); /******/ } /******/ /******/ hotSetStatus("idle"); /******/ return new Promise(function(resolve) { /******/ resolve(outdatedModules); /******/ }); /******/ } /******/ /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {}, /******/ hot: hotCreateModule(moduleId), /******/ parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp), /******/ children: [] /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "https://b.yzcdn.cn/zanui/weapp"; /******/ /******/ // __webpack_hash__ /******/ __webpack_require__.h = function() { return hotCurrentHash; }; /******/ /******/ // Load entry module and return exports /******/ return hotCreateRequire("./src/main.js")(__webpack_require__.s = "./src/main.js"); /******/ }) /************************************************************************/ /******/ ({ /***/ "../../packages/actionsheet/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Actionsheet 行动按钮

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"/dist/actionsheet/index.wxml\" />\n<!-- 直接使用 zan-actionsheet 模板，并且直接传入参数配置 -->\n<template is=\"zan-actionsheet\" data=\"{{ ...actionsheet }}\"></template>\n
\n
const { Actionsheet, extend } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Actionsheet 里面声明的方法\nPage(extend({}, Actionsheet, {\n  data: {\n    actionsheet: {\n      show: false,\n      actions: []\n    }\n  }\n  // ...\n}));\n
\n

代码演示

\n

基础功能

\n

在 js 中设置传入的 show 为 true，即可展示出 actionsheet。actionsheet 会根据传入的 actions 展示按钮。

\n
this.setData({\n  'actionsheet.show': true\n})\n
\n

当行动按钮被点击或者弹层被关掉时，都可以在可以在页面中注册 handleZanActionsheetClick 和 handleZanActionsheetCancel 方法来监听。

\n
Page({\n  // 当行动按钮被关闭时，触发该函数\n  // componentId 即为在模板中传入的 componentId\n  // 用于在一个页面上使用多个 actionsheet 时，进行区分\n  handleZanActionsheetCancel({ componentId }) {\n  },\n\n  // 当行动按钮中有一个被点击时触发\n  // index 代表被点击按钮在传入参数 actions 中的位置\n  handleZanActionsheetClick({ componentId, index }) {\n  }\n});\n
\n

Actionsheet 支持的具体参数如下

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
show用来表示是否展示行动按钮Booleanfalse
cancelText行动按钮底部取消按钮的文案，不传则不显示取消按钮String
closeOnClickOverlay是否在点击背景时，关闭行动按钮Booleanfalse
componentId用于区分行动按钮之间的唯一名称String
actions行动按钮的按钮显示配置Array[]
\n

actions 的具体数据结构

\n
// actions 为数组结构传入\n[{\n  // 按钮文案\n  name: '选项1',\n  // 按钮描述文案，不传就不显示\n  subname: '选项描述语1',\n  // 按钮特殊类，可以通过传入这个，为按钮增加特殊样式\n  className: 'action-class',\n  // 按钮是否显示为 loading\n  loading: false,\n  // 按钮的微信开放能力\n  // 具体支持可参考微信官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html\n  openType: 'share'\n}]\n
\n\n
const { Actionsheet, extend } = require('../../dist/index');\n\nPage(extend({}, Actionsheet, {\n  data: {\n    baseActionsheet: {\n      show: false,\n      cancelText: '关闭 Action',\n      closeOnClickOverlay: true,\n      componentId: 'baseActionsheet',\n      actions: [{\n        name: '选项1',\n        subname: '选项描述语1',\n        className: 'action-class',\n        loading: false\n      }, {\n        name: '选项2',\n        subname: '选项描述语2',\n        className: 'action-class',\n        loading: false\n      }, {\n        name: '去分享',\n        openType: 'share'\n      }]\n    }\n  },\n\n  onShareAppMessage() {\n    return {\n      title: 'ZanUI-WeApp',\n      imageUrl: 'https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png'\n    };\n  },\n\n  toggleActionsheet() {\n    this.setData({\n      'baseActionsheet.show': true\n    });\n  },\n\n  handleZanActionsheetCancel({ componentId }) {\n    this.setData({\n      [`${componentId}.show`]: false\n    });\n  },\n\n  handleZanActionsheetClick({ componentId, index }) {\n    console.log(`item index ${index} clicked`);\n\n    // 如果是分享按钮被点击, 不处理关闭\n    if (index === 2) {\n      return;\n    }\n\n    this.setData({\n      [`${componentId}.actions[${index}].loading`]: true\n    });\n\n    setTimeout(() => {\n      this.setData({\n        [`${componentId}.show`]: false,\n        [`${componentId}.actions[${index}].loading`]: false\n      });\n    }, 1500);\n  }\n\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Actionsheet 行动按钮\"\n}\n
\n
<import src=\"/dist/actionsheet/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom zan-hairline--bottom\">ACTIONSHEET</view>\n\n  <view class=\"zan-btns\" style=\"margin-top: 30vh;\">\n    <button class=\"zan-btn\" bindtap=\"toggleActionsheet\">\n      Actionsheet\n    </button>\n  </view>\n\n  <template is=\"zan-actionsheet\" data=\"{{ ...baseActionsheet }}\"></template>\n\n</view>\n
\n\n
\n ","label":"Actionsheet 行动按钮"} /***/ }), /***/ "../../packages/badge/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Badge 徽章

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n
<view class=\"badge-container zan-badge\">\n  <view class=\"zan-badge__count\">10</view>\n</view>\n
\n
.badge-container {\n  width: 100px;\n  height: 100px;\n}\n
\n\n
Page({\n  data: {\n  },\n\n  onLoad: function () {\n\n  },\n\n  onShow: function() {\n  },\n})\n
\n
{\n  \"navigationBarTitleText\": \"Badge 徽章\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom zan-hairline--bottom\">BADGE</view>\n\n  <view class=\"demo\">\n    <view class=\"demo__item\">\n      <view class=\"demo__icon zan-badge\">\n      </view>\n    </view>\n    <view class=\"demo__item\">\n      <view class=\"demo__icon zan-badge\">\n        <view class=\"zan-badge__count\">9</view>\n      </view>\n    </view>\n    <view class=\"demo__item\">\n      <view class=\"demo__icon zan-badge\">\n        <view class=\"zan-badge__count\">19</view>\n      </view>\n    </view>\n    <view class=\"demo__item\">\n      <view class=\"demo__icon zan-badge\">\n        <view class=\"zan-badge__count\">99+</view>\n      </view>\n    </view>\n  </view>\n</view>\n
\n
.demo {\n  padding: 40px 0;\n  display: flex;\n}\n.demo__item {\n  flex: 1;\n}\n.demo__icon {\n  margin: 0 auto;\n  width: 48px;\n  height: 48px;\n  background: #ddd;\n  border-radius: 4px;\n}\n
\n\n
\n ","label":"Badge 徽章"} /***/ }), /***/ "../../packages/btn/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Button 按钮

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

基础用法

\n
<button class=\"zan-btn\">取消订单</button>\n
\n

按钮类型

\n

按钮支持额外的三种类型 primary, danger, warn

\n
<button class=\"zan-btn zan-btn--primary\">确认付款</button>\n<button class=\"zan-btn zan-btn--danger\">确认付款</button>\n<button class=\"zan-btn zan-btn--warn\">确认付款</button>\n
\n

按钮大小

\n

按钮支持额外三种大小 large, small, mini

\n
<button class=\"zan-btn zan-btn--large\">确认付款</button>\n<button class=\"zan-btn zan-btn--small\">取消订单</button>\n<button class=\"zan-btn zan-btn--mini\">确认付款</button>\n
\n

其他

\n

按钮支持镂空状态，可以直接使用 zan-btn--plain

\n
<button class=\"zan-btn zan-btn--primary zan-btn--plain\">确认付款</button>\n
\n

同时支持加载中状态，可以使用 zan-btn--loading 获得

\n
<button class=\"zan-btn zan-btn--loading\">确认付款</button>\n
\n

\"\"\n

\n
Page({\n  data: {\n  },\n\n  onLoad: function () {\n\n  },\n\n  onShow: function() {\n  },\n})\n
\n
{\n  \"navigationBarTitleText\": \"Button 按钮\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">BUTTON</view>\n\n  <view class=\"zan-panel-title\">普通按钮</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-btns\">\n      <button class=\"zan-btn\">取消订单</button>\n      <button class=\"zan-btn zan-btn--primary\">确认付款</button>\n      <button class=\"zan-btn zan-btn--danger\">确认付款</button>\n      <button class=\"zan-btn zan-btn--warn\">确认付款</button>\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">大号按钮，没有边框线及圆角</view>\n  <view class=\"zan-panel\">\n    <button class=\"zan-btn zan-btn--large zan-btn--primary\">确认付款</button>\n    <button class=\"zan-btn zan-btn--large zan-btn--warn\">立即购买</button>\n    <button class=\"zan-btn zan-btn--large zan-btn--danger\">立即购买</button>\n  </view>\n\n  <view class=\"zan-panel-title\">小号按钮</view>\n  <view class=\"zan-panel\" style=\"padding: 15px;\">\n    <button class=\"zan-btn zan-btn--small\">取消订单</button>\n    <button class=\"zan-btn zan-btn--small zan-btn--primary\">确认付款</button>\n  </view>\n\n  <view class=\"zan-panel-title\">迷你按钮</view>\n  <view class=\"zan-panel\" style=\"padding: 15px;\">\n    <button class=\"zan-btn zan-btn--mini zan-btn--plain\">取消订单</button>\n    <button class=\"zan-btn zan-btn--mini zan-btn--primary zan-btn--plain\">确认付款</button>\n    <button class=\"zan-btn zan-btn--mini zan-btn--warn zan-btn--plain\">确认付款</button>\n    <button class=\"zan-btn zan-btn--mini zan-btn--danger zan-btn--plain\">确认付款</button>\n  </view>\n\n  <view class=\"zan-panel-title\">Loading</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-btns\">\n      <button class=\"zan-btn zan-btn--loading\">取消订单</button>\n      <button class=\"zan-btn zan-btn--loading zan-btn--primary\">确认付款</button>\n      <button class=\"zan-btn zan-btn--loading zan-btn--danger\">确认付款</button>\n      <button class=\"zan-btn zan-btn--loading zan-btn--warn\">确认付款</button>\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">Disabled</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-btns\">\n      <button class=\"zan-btn zan-btn--disabled\" disabled>取消订单</button>\n      <button class=\"zan-btn zan-btn--disabled zan-btn--primary\" disabled>确认付款</button>\n      <button class=\"zan-btn zan-btn--disabled zan-btn--danger\" disabled>确认付款</button>\n      <button class=\"zan-btn zan-btn--disabled zan-btn--warn\" disabled>确认付款</button>\n    </view>\n  </view>\n\n</view>\n
\n\n
\n ","label":"Button 按钮"} /***/ }), /***/ "../../packages/capsule/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Capsule 胶囊

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的模板里引入组件库模板

\n
<import src=\"path/to/zanui-weapp/dist/capsule/index.wxml\" />\n
\n

代码演示

\n

基础用法

\n

可以用 leftText 和 rightText 控制左右文案

\n
<template is=\"capsule\" data=\"{{ leftText: '1折', rightText: '限购一份'}}\" />\n
\n

使用不同类型胶囊

\n

按钮支持额外的三种类型 primary, danger, warn

\n
<template is=\"capsule\" data=\"{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}\" />\n
\n

自定义颜色

\n

通过 color 熟悉，可以自定义显示的颜色

\n
<template is=\"capsule\" data=\"{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}\" />\n
\n\n
Page({\n})\n
\n
{\n  \"navigationBarTitleText\": \"Capsule 胶囊\"\n}\n
\n
<import src=\"/dist/capsule/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">CAPSULE</view>\n\n  <view class=\"zan-panel-title\">基本用法</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--last-child\">\n      <template is=\"capsule\" data=\"{{ leftText: '1折', rightText: '限购一份'}}\" />\n      <template is=\"capsule\" data=\"{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}\" />\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">自定义颜色</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--last-child\">\n      <template is=\"capsule\" data=\"{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}\" />\n    </view>\n  </view>\n\n</view>~~~\n~~~ wxss\n.zan-capsule + .zan-capsule {\n  margin-left: 10px;\n}\n
\n\n
\n ","label":"Capsule 胶囊"} /***/ }), /***/ "../../packages/card/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Card 卡片

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

基础用法

\n

卡片可以用于左侧图片，右侧描述信息的展示。\nzan-card 由 zan-card__thumb 和 zan-card__detail 组成。分别负责左侧图片展示和右侧内容区域展示\n如下，是一个商品信息的展示：

\n
<view class=\"zan-card\">\n  <!-- 卡片左侧商品图片 -->\n  <view class=\"zan-card__thumb\">\n    <image class=\"zan-card__img\"\n      src=\"https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg\"\n      mode=\"aspectFit\"\n    ></image>\n  </view>\n  <!-- 卡片右侧详情描述 -->\n  <view class=\"zan-card__detail\">\n    <!-- 商品标题行 -->\n    <!-- 每行可以使用 zan-card__detail-row 来控制展示区域 -->\n    <!-- 每行里面可以用 zan-card__left-col zan-card__right-col 来控制左右展示 -->\n    <view class=\"zan-card__detail-row\">\n      <view class=\"zan-card__right-col\">¥ 999.99</view>\n      <view class=\"zan-card__left-col zan-ellipsis--l2\">\n         红烧牛肉【虚拟商品】【有库存】【有sku】\n      </view>\n    </view>\n    <!-- 商品附属信息展示行 -->\n    <view class=\"zan-card__detail-row zan-c-gray-darker\">\n      <view class=\"zan-card__right-col\">x2</view>\n      <view class=\"zan-card__left-col\">\n        3000克 50%\n      </view>\n    </view>\n    <!-- 商品操作按钮相关 -->\n    <view class=\"zan-card__detail-row zan-c-gray-darker\">\n      <view class=\"zan-card__left-col zan-c-red\">已发货</view>\n    </view>\n  </view>\n</view>\n
\n\n
Page({\n  data: {\n  },\n\n  onLoad: function () {\n\n  },\n\n  onShow: function() {\n  },\n})\n
\n
{\n  \"navigationBarTitleText\": \"Card 卡片\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">CARD</view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-card\">\n      <view class=\"zan-card__thumb\">\n        <image class=\"zan-card__img\"\n          src=\"https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg\"\n          mode=\"aspectFit\"\n        ></image>\n      </view>\n      <view class=\"zan-card__detail\">\n        <view class=\"zan-card__detail-row\">\n          <view class=\"zan-card__right-col\">¥ 999.99</view>\n          <view class=\"zan-card__left-col zan-ellipsis--l2\">\n             红烧牛肉【虚拟商品】【有库存】【有sku】\n          </view>\n        </view>\n\n        <view class=\"zan-card__detail-row zan-c-gray-darker\">\n          <view class=\"zan-card__right-col\">x2</view>\n          <view class=\"zan-card__left-col\">\n            3000克 50%\n          </view>\n        </view>\n\n        <view class=\"zan-card__detail-row zan-c-gray-darker\">\n          <view class=\"zan-card__left-col zan-c-red\">已发货</view>\n        </view>\n      </view>\n    </view>\n  </view>\n\n</view>\n
\n\n
\n ","label":"Card 卡片"} /***/ }), /***/ "../../packages/cell/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Cell 单元格

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

基础用法

\n

zan-cell 有三部分组成：\n顶部 Icon：zan-cell__icon\n主内容区：zan-cell__bd\n附属内容：zan-cell__ft

\n
<view class=\"zan-cell\">\n  <view class=\"zan-cell__icon zan-icon zan-icon-check\"></view>\n  <view class=\"zan-cell__bd\">单行列表</view>\n  <view class=\"zan-cell__ft\">详细信息</view>\n</view>\n
\n

当然，也可以在内容区增加附加描述

\n
<view class=\"zan-cell\">\n  <view class=\"zan-cell__bd\">\n    <view class=\"zan-cell__text\">单行列表</view>\n    <view class=\"zan-cell__desc\">附加描述</view>\n  </view>\n  <view class=\"zan-cell__ft\">详细信息</view>\n</view>\n
\n

带箭头的单元格

\n

在根元素上增加 zan-cell--access，可以在右侧显示出箭头。

\n
<view class=\"zan-cell zan-cell--access\">\n  <view class=\"zan-cell__bd\">单行列表</view>\n  <view class=\"zan-cell__ft\"></view>\n</view>\n
\n

带开关的单元格

\n

增加 zan-cell--switch，更好的适配带有开关的情况

\n
<view class=\"zan-cell zan-cell--switch\">\n  <view class=\"zan-cell__bd\">开关</view>\n  <view class=\"zan-cell__ft\">\n    <template is=\"zan-switch\" data=\"{{ checked }}\"/>\n  </view>\n</view>\n
\n\n
var Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.Switch, {\n  data: {\n    checked: false\n  },\n\n  onLoad() {\n  },\n\n  onShow() {\n  },\n\n  handleZanSwitchChange(e) {\n    this.setData({\n      checked: e.checked\n    });\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Cell 单元格\"\n}\n
\n
<import src=\"/dist/switch/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">CELL</view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">单行列表</view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">单行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__icon zan-icon zan-icon-checked\" style=\"color:#38f;\"></view>\n      <view class=\"zan-cell__bd\">单行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view class=\"zan-cell__text\">单行列表</view>\n        <view class=\"zan-cell__desc\">附加描述</view>\n      </view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">单行列表</view>\n      <view class=\"zan-cell__ft\"></view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--switch\">\n      <view class=\"zan-cell__bd\">开关</view>\n      <view class=\"zan-cell__ft\">\n        <template is=\"zan-switch\" data=\"{{ checked }}\"/>\n      </view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">单行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n    </view>\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n    </view>\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\"></view>\n    </view>\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\"></view>\n    </view>\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\"></view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n    <view class=\"zan-cell zan-cell--access\">\n      <view class=\"zan-cell__bd\">多行列表</view>\n      <view class=\"zan-cell__ft\">详细信息</view>\n    </view>\n  </view>\n\n</view>\n
\n\n
\n ","label":"Cell 单元格"} /***/ }), /***/ "../../packages/dialog/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Dialog 弹出框

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"/dist/dialog/index.wxml\" />\n<!-- 直接使用 zan-dialog 模板，并且直接传入 zanDialog -->\n<template is=\"zan-dialog\" data=\"{{ zanDialog }}\"></template>\n
\n
const { Dialog, extend } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Dialog 里面声明的方法\nPage(extend({}, Dialog, {\n  // ...\n}));\n
\n

代码演示

\n

基础功能

\n

在 js 中直接调用 this.showZanDialog 即可，可以在 title 或者 content 传入需要展示的内容。

\n

showZanDialog 调用后返回 promise 对象。点击确定后，可以在 resolve 状态中监听到。点击取消后，可以在 reject 状态中监听到。

\n
this.showZanDialog({\n  content: '这是一个模态弹窗',\n  showCancel: true\n}).then(() => {\n  console.log('=== dialog ===', 'type: confirm');\n}).catch(() => {\n  console.log('=== dialog ===', 'type: cancel');\n});\n
\n

按钮展示方式

\n

按钮可以通过设置 buttonsShowVertical 来切换按钮纵向展示或者横向并排展示，方便各种场景下使用。

\n
this.showZanDialog({\n  content: '这是一个模态弹窗',\n  buttonsShowVertical: true,\n  showCancel: true\n});\n
\n

自定义展示按钮

\n

dialog 支持自定义展示按钮。设置 buttons 数组即可实现。自定义按钮的点击后，都会在 resolve 状态中监听到。

\n
this.showZanDialog({\n  content: '这是一个模态弹窗',\n  buttons: [{\n    // 按钮文案\n    text: '现金支付',\n    // 按钮文字颜色\n    color: 'red',\n    // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击\n    type: 'cash'\n  }, {\n    text: '微信支付',\n    color: '#3CC51F',\n    type: 'wechat'\n  }, {\n    text: '取消',\n    type: 'cancel'\n  }]\n}).then(({ type }) => {\n  // type 可以用于判断具体是哪一个按钮被点击\n  console.log('=== dialog with custom buttons ===', `type: ${type}`);\n});\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
title弹窗标题String-
content弹窗内容String-必须
buttonsShowVertical按钮是否纵向展示Booleanfalse
showConfirm是否展示确认按钮Booleantrue
confirmText确认按钮文案String确定
confirmColor确认按钮文字颜色String#3CC51F
showCancel是否展示取消按钮Booleanfalse
cancelText取消按钮文案String取消
cancelColor取消按钮文字颜色String#333
buttons自定义按钮列表，设置以后，以上关于 确认 和 取消 按钮的设置全部不生效。Array-
\n

buttons 参考格式：

\n
[{\n  // 按钮文案\n  text: '现金支付',\n  // 按钮文字颜色\n  color: 'red',\n  // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击\n  type: 'cash'\n}, {\n  // 按钮文案\n  text: '微信支付',\n  // 按钮文字颜色\n  color: '#3CC51F',\n  // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击\n  type: 'wechat'\n}, {\n  // 按钮文案\n  text: '取消',\n  // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击\n  type: 'cancel'\n}]\n
\n\n
const Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.Dialog, {\n  toggleBaseDialog() {\n    this.showZanDialog({\n      title: '弹窗',\n      content: '这是一个模态弹窗\\n换行',\n      showCancel: true\n    }).then(() => {\n      console.log('=== dialog ===', 'type: confirm');\n    }).catch(() => {\n      console.log('=== dialog ===', 'type: cancel');\n    });\n  },\n\n  toggleWithoutTitleDialog() {\n    this.showZanDialog({\n      content: '这是一个模态弹窗'\n    }).then(() => {\n      console.log('=== dialog without title ===', 'type: confirm');\n    });\n  },\n\n  toggleButtonDialog() {\n    this.showZanDialog({\n      title: '弹窗',\n      content: '这是一个模态弹窗',\n      buttons: [{\n        text: '现金支付',\n        color: 'red',\n        type: 'cash'\n      }, {\n        text: '微信支付',\n        color: '#3CC51F',\n        type: 'wechat'\n      }, {\n        text: '取消',\n        type: 'cancel'\n      }]\n    }).then(({ type }) => {\n      console.log('=== dialog with custom buttons ===', `type: ${type}`);\n    });\n  },\n\n  toggleVerticalDialog() {\n    this.showZanDialog({\n      title: '弹窗',\n      content: '这是一个模态弹窗',\n      buttonsShowVertical: true,\n      buttons: [{\n        text: '现金支付',\n        color: 'red',\n        type: 'cash'\n      }, {\n        text: '微信支付',\n        color: '#3CC51F',\n        type: 'wechat'\n      }, {\n        text: '取消',\n        type: 'cancel'\n      }]\n    }).then(({ type }) => {\n      console.log('=== dialog with vertical buttons ===', `type: ${type}`);\n    });\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Dialog 弹出框\"\n}\n
\n
<import src=\"/dist/dialog/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">DIALOG</view>\n\n  <view class=\"zan-btns\" style=\"margin-top: 30vh;\">\n    <button class=\"zan-btn\" bindtap=\"toggleBaseDialog\">\n      基础 Dialog\n    </button>\n    <button class=\"zan-btn\" bindtap=\"toggleWithoutTitleDialog\">\n      Dialog - 无标题\n    </button>\n    <button class=\"zan-btn\" bindtap=\"toggleButtonDialog\">\n      Dialog - 自定义显示按钮\n    </button>\n    <button class=\"zan-btn\" bindtap=\"toggleVerticalDialog\">\n      Dialog - 按钮纵向排布\n    </button>\n  </view>\n\n</view>\n\n<template is=\"zan-dialog\" data=\"{{ zanDialog }}\"></template>\n
\n\n
\n ","label":"Dialog 弹出框"} /***/ }), /***/ "../../packages/field/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Field 输入框

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/field/index.wxml\" />\n\n<!-- 直接使用 zan-field 模板，并且直接传入设置值 -->\n<template is=\"zan-field\" data=\"{{ value }}\"></template>\n
\n
const { Field, extend } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Field 里面声明的方法\nPage(extend({}, Field, {\n  // ...\n}));\n
\n

代码演示

\n

field 支持多种展示方式，在 data 中传入对应的设置即可。

\n
<template is=\"zan-field\" data=\"{{ title: '收货人', type: 'input', placeholder: '名字', value }}\"></template>\n
\n

当 field 触发输入事件时，可以在页面中注册 handleZanFieldChange 方法来监听

\n
Page(extend({}, Field, {\n  // 输入框内容更改时触发\n  handleZanFieldChange({ componentId, detail }) {\n    /*\n     * componentId 即为在模板中传入的 componentId\n     * 用于在一个页面上使用多个 tab 时，进行区分\n     * detail 即输入框中的内容\n     */\n    /*\n     * 处理函数可以直接 return 一个字符串，将替换输入框的内容。\n     */\n  },\n  // 输入框聚焦时触发\n  handleZanFieldFocus({ componentId, detail }) {},\n  // 输入框失焦时触发\n  handleZanFieldBlur({ componentId, detail }) {},\n}));\n
\n

Field 支持传入参数如下

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
title输入框左侧标题，若传入为空，则不显示标题String-
name输入框的名字，作为 form 表单提交时数据的 keyStringcomponentId 指定的值
value输入框的内容String-
type输入框的类型，可选值为 input, textareaStringinput
inputType输入框为 input 情况下，输入框的类型，例如：number, text, passwordStringtext
placeholder输入框为空时占位符String
focus自动聚焦，拉起键盘Booleanfalse
disabled输入框是否禁用Booleanfalse
mode输入框展示样式，可选值为 wrapped, normalStringnormal
right输入框内容是否居右显示Booleanfalse
error是否显示为输入框错误情况下的样式Booleanfalse
componentId用于区分输入框之间的唯一名称String-
\n\n
const Zan = require('../../dist/index');\nconst config = require('./config');\n\nPage(Object.assign({}, Zan.Field, {\n  data: {\n    config,\n    value: 'test',\n    textareaValue: 'test textarea',\n    area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],\n    areaIndex: 0,\n    // picker-view 示例配置\n    pickerViewConfig: {\n      show: false,\n      value: [0, 0],\n      year: [2016, 2017, 2018],\n      sex: ['男', '女']\n    }\n  },\n\n  onAreaChange(e) {\n    this.setData({\n      areaIndex: e.detail.value\n    });\n  },\n\n  handleZanFieldChange(e) {\n    const { componentId, detail } = e;\n\n    console.log('[zan:field:change]', componentId, detail);\n  },\n\n  handleZanFieldFocus(e) {\n    const { componentId, detail } = e;\n\n    console.log('[zan:field:focus]', componentId, detail);\n  },\n\n  handleZanFieldBlur(e) {\n    const { componentId, detail } = e;\n\n    console.log('[zan:field:blur]', componentId, detail);\n  },\n\n  clearInput() {\n    this.setData({\n      value: ''\n    });\n  },\n\n  clearTextarea() {\n    this.setData({\n      textareaValue: ''\n    });\n  },\n\n  formSubmit(event) {\n    console.log('[zan:field:submit]', event.detail.value);\n  },\n\n  formReset(event) {\n    console.log('[zan:field:reset]', event);\n  },\n\n  /* piker-view 示例相关函数 */\n  handleDateFieldClick() {\n    this.setData({\n      'pickerViewConfig.show': true\n    });\n  },\n\n  handlePopupDateChange(e) {\n    this.setData({\n      'pickerViewConfig.value': e.detail.value\n    });\n  },\n\n  hideDatePopup() {\n    this.setData({\n      'pickerViewConfig.show': false\n    });\n  }\n\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Field 输入框\"\n}\n
\n
<import src=\"/dist/field/index.wxml\" />\n\n<view class=\"container\">\n  <view class=\"doc-title zan-hairline--bottom\">Field</view>\n\n  <!-- Field 基础用法 -->\n  <view class=\"zan-panel-title\">基础用法</view>\n  <view class=\"zan-panel\">\n    <template\n      is=\"zan-field\"\n      data=\"{{ ...config.base.name, value }}\"></template>\n    <template\n      is=\"zan-field\"\n      data=\"{{ ...config.base.tel }}\"></template>\n    <template\n      is=\"zan-field\"\n      data=\"{{ ...config.base.address }}\"></template>\n    <template\n      is=\"zan-field\"\n      data=\"{{ ...config.base.disabled }}\"></template>\n  </view>\n\n  <view class=\"zan-btns\">\n    <button\n      class=\"zan-btn zan-btn--primary\"\n      bindtap=\"clearInput\">清除输入</button>\n  </view>\n\n  <!-- 去除标题后的输入框样式 -->\n  <view class=\"zan-panel-title\">无标题输入框</view>\n  <view class=\"zan-panel\">\n    <template\n      is=\"zan-field\"\n      data=\"{{ ...config.notitle, value: textareaValue }}\"></template>\n  </view>\n\n  <view class=\"zan-btns\">\n    <button\n      class=\"zan-btn zan-btn--primary\"\n      bindtap=\"clearTextarea\">清除输入</button>\n  </view>\n\n  <!-- 使用 Field 圆角样式 -->\n  <view class=\"zan-panel-title field__title--radius\">圆角输入框</view>\n  <template\n    is=\"zan-field\"\n    data=\"{{ ...config.radius.totalPrice }}\"></template>\n  <template\n    is=\"zan-field\"\n    data=\"{{ ...config.radius.excludePrice }}\"></template>\n  <template\n    is=\"zan-field\"\n    data=\"{{ ...config.radius.notitle }}\"></template>\n\n  <!-- form 中使用 Field -->\n  <view class=\"zan-panel-title\">Form 表单中的field应用</view>\n  <form bindsubmit=\"formSubmit\" bindreset=\"formReset\">\n    <view class=\"zan-panel\">\n      <template\n        is=\"zan-field\"\n        data=\"{{ ...config.form.name }}\"></template>\n      <template\n        is=\"zan-field\"\n        data=\"{{ ...config.form.tel }}\"></template>\n      <view class=\"zan-btns\">\n        <button\n          class=\"zan-btn zan-btn--primary\"\n          formType=\"submit\">提交数据</button>\n        <button\n          class=\"zan-btn\"\n          formType=\"reset\">重置数据</button>\n      </view>\n    </view>\n  </form>\n\n  <view class=\"zan-panel-title\">自定义显示内容</view>\n  <view class=\"zan-panel\">\n    <!-- 配合 popup 使用 picker-view -->\n    <view class=\"zan-cell zan-field\">\n      <view class=\"zan-cell__hd zan-field__title\">人员信息</view>\n      <view\n        class=\"zan-field__input zan-cell__bd\"\n        bindtap=\"handleDateFieldClick\"\n      >\n        出生日期: {{ pickerViewConfig.year[pickerViewConfig.value[0]] }}\n        性别: {{ pickerViewConfig.sex[pickerViewConfig.value[1]] }}\n      </view>\n    </view>\n    <!-- 对应的 popup 层 -->\n    <view\n      class=\"zan-popup zan-popup--bottom {{ pickerViewConfig.show ? 'zan-popup--show' : ''}}\"\n    >\n      <view class=\"zan-popup__mask\" bindtap=\"hideDatePopup\"></view>\n      <view class=\"zan-popup__container popup-field-example--bottom\">\n        <picker-view\n          value=\"{{ pickerViewConfig.value }}\"\n          indicator-style=\"height: 50px\"\n          class=\"picker-view-example\"\n          bindchange=\"handlePopupDateChange\"\n        >\n          <picker-view-column>\n            <view\n              class=\"picker-view-column-example\"\n              wx:for=\"{{ pickerViewConfig.year }}\"\n            >{{item}}年</view>\n          </picker-view-column>\n          <picker-view-column>\n            <view\n              class=\"picker-view-column-example\"\n              wx:for=\"{{ pickerViewConfig.sex }}\"\n            >{{item}}</view>\n          </picker-view-column>\n        </picker-view>\n      </view>\n    </view>\n\n    <!-- 简单 picker 示例 -->\n    <view class=\"zan-cell zan-field\">\n      <view class=\"zan-cell__hd zan-field__title\">选择区域</view>\n      <picker\n        mode=\"selector\"\n        class=\"zan-field__input zan-cell__bd\"\n        range=\"{{ area }}\"\n        value=\"{{ areaIndex }}\"\n        bindchange=\"onAreaChange\"\n      >\n        {{ area[areaIndex] }}\n      </picker>\n    </view>\n\n    <view class=\"zan-cell zan-field\">\n      <view class=\"zan-cell__hd zan-field__title\">验证码</view>\n      <input\n        type=\"text\"\n        placeholder=\"请输入短信验证码\"\n        class=\"zan-field__input zan-cell__bd\"/>\n      <view class=\"zan-cell__ft\">\n        <button class=\"zan-btn zan-btn--mini zan-btn--primary\">获取验证码</button>\n      </view>\n    </view>\n  </view>\n</view>\n
\n
.field__title--radius {\n  padding-bottom: 10px;\n}\n\n.popup-field-example--bottom {\n  width: 100%;\n  height: 150px;\n}\n\n.picker-view-example {\n  height: 120px;\n}\n\n.picker-view-column-example {\n  line-height: 50px;\n  text-align: center;\n}\n
\n\n
\n ","label":"Field 输入框"} /***/ }), /***/ "../../packages/helper/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Helper 基础样式

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

直接在元素上增加指定 class 即可

\n
<view class=\"zan-pull-right\">zan-pull-right: 往右靠</view>\n
\n

具体可用类名如下：

\n

字体大小

\n

zan-font-8 文字以8像素大小展示

\n

zan-font-10 文字以10像素大小展示

\n

zan-font-12 文字以12像素大小展示

\n

zan-font-14 文字以14像素大小展示

\n

zan-font-16 文字以16像素大小展示

\n

zan-font-18 文字以18像素大小展示

\n

zan-font-20 文字以20像素大小展示

\n

zan-font-22 文字以22像素大小展示

\n

zan-font-24 文字以24像素大小展示

\n

zan-font-30 文字以30像素大小展示

\n

字体颜色

\n

zan-c-red 文字以红色展示

\n

zan-c-gray 文字以浅灰色展示

\n

zan-c-gray-dark 文字以灰色展示

\n

zan-c-gray-darker 文字以深灰色展示

\n

zan-c-black 文字以黑色展示

\n

zan-c-blue 文字以蓝色展示

\n

zan-c-green 文字以绿色展示

\n

字体样式

\n

zan-pull-right 文字往右靠

\n

zan-text-deleted 文字显示删除效果

\n

zan-font-bold 文字加粗显示

\n

其他

\n

zan-arrow 展示向右侧箭头，以 absolute 布局，需要在外层加上 relative 来定位

\n

zan-ellipsis 文字过长点点点显示

\n

zan-ellipsis--l2 文字过长点点点显示，最多显示两行

\n

zan-ellipsis--l3 文字过长点点点显示，最多显示三行\n

\n
Page({\n  data: {\n  },\n\n  onLoad: function () {\n\n  },\n\n  onShow: function() {\n  },\n})\n
\n
{\n  \"navigationBarTitleText\": \"Helper 基础样式\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view class=\"zan-pull-right\">zan-pull-right: 往右靠</view>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view class=\"zan-text-deleted\">zan-text-deleted：被删除的效果</view>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view>\n          <view class=\"zan-font-12\">zan-font-12：字号12</view>\n          <view class=\"zan-font-12 zan-font-bold\">zan-font-bold：再来个加粗</view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view>\n          <view class=\"zan-font-16\">zan-font-16：字号16</view>\n          <view class=\"zan-font-16 zan-font-bold\">zan-font-bold：再来个加粗</view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view class=\"\">\n          <view>字体颜色</view>\n          <view class=\"zan-c-red\">zan-c-red: 红色</view>\n          <view class=\"zan-c-gray\">zan-c-gray: 灰色</view>\n          <view class=\"zan-c-gray-dark\">zan-c-gray-dark: 再灰一点点</view>\n          <view class=\"zan-c-gray-darker\">zan-c-gray-darker: 更深的灰色</view>\n          <view class=\"zan-c-black\">zan-c-black: 黑色</view>\n          <view class=\"zan-c-blue\">zan-c-blue: 蓝色</view>\n          <view class=\"zan-c-green\">zan-c-green: 绿色</view>\n        </view>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view>zan-arrow：箭头</view>\n        <view class=\"zan-arrow\"></view>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <view class=\"zan-ellipsis\" style=\"width: 300px;\">\n          zan-ellipsis：单行点点点\n          ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符\n        </view>\n      </view>\n    </view>\n\n    <view class=\"zan-cell zan-cell--last-child\">\n      <view class=\"zan-cell__bd\">\n        <view class=\"zan-ellipsis--l2\">\n          zan-ellipsis--l2：单行点点点\n          ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符\n        </view>\n      </view>\n    </view>\n\n  </view>\n\n</view>\n
\n\n
\n ","label":"Helper 基础样式"} /***/ }), /***/ "../../packages/icon/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Icon 图标

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

可以在任意元素上增加 zan-icon 类即可

\n
<view class=\"zan-icon zan-icon-close\"></view>\n
\n

支持的 icon 和 名称 见下图

\n

\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n

\n
Page({\n  data: {\n    icons: [\n      'close',\n      'location',\n      'clock',\n      'gold-coin',\n      'chat',\n      'exchange',\n      'upgrade',\n      'edit',\n      'contact',\n      'passed',\n      'points',\n      'delete',\n      'records',\n      'logistics',\n      'check',\n      'checked',\n      'gift',\n      'like-o',\n      'like',\n      'qr',\n      'qr-invalid',\n      'shop',\n      'photograph',\n      'add',\n      'add2',\n      'add-o',\n      'photo',\n      'cart',\n      'arrow',\n      'search',\n      'clear',\n      'success',\n      'fail',\n      'wechat',\n      'alipay',\n      'password-view',\n      'wap-nav',\n      'password-not-view',\n      'wap-home',\n      'ecard-pay',\n      'balance-pay',\n      'peer-pay',\n      'credit-pay',\n      'debit-pay',\n      'other-pay',\n      'shopping-cart',\n      'browsing-history',\n      'goods-collect',\n      'shop-collect',\n      'receive-gift',\n      'send-gift',\n      'setting',\n      'coupon',\n      'free-postage',\n      'discount',\n      'birthday-privilege',\n      'member-day-privilege',\n      'balance-details',\n      'cash-back-record',\n      'points-mall',\n      'exchange-record',\n      'pending-payment',\n      'pending-orders',\n      'pending-deliver',\n      'pending-evaluate',\n      'cash-on-deliver',\n      'gift-card-pay',\n      'underway',\n      'point-gift',\n      'after-sale',\n      'edit-data',\n      'question',\n      'description',\n      'card',\n      'gift-card',\n      'completed',\n      'value-card',\n      'certificate',\n      'tosend',\n      'sign',\n      'home',\n      'phone',\n      'play',\n      'pause',\n      'stop',\n      'hot',\n      'new',\n      'new-arrival',\n      'hot-sale'\n    ]\n  }\n});\n
\n
{\n  \"navigationBarTitleText\": \"Icon 图标\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">ICON</view>\n\n  <view class=\"zan-panel\">\n    <view wx:for=\"{{ icons }}\" wx:for-item=\"icon\" class=\"icon-wrap\">\n      <view class=\"zan-icon zan-icon-{{ icon }}\"  style=\"color: #ff4343;\"></view>\n      <view class=\"icon-classname\">zan-icon-{{ icon }}</view>\n    </view>\n  </view>\n</view>\n
\n
.icon-wrap {\n  width: 33.33333%;\n  height: 100px;\n  float: left;\n  text-align: center;\n}\n.icon-classname {\n  color: #999;\n  font-size: 10px;\n}\n.zan-icon {\n  font-size: 24px;\n  margin: 20px;\n}\n
\n\n
\n ","label":"Icon 图标"} /***/ }), /***/ "../../packages/loadmore/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Loadmore 加载

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板

\n
<import src=\"path/to/zanui-weapp/dist/loadmore/index.wxml\" />\n\n<!-- 直接使用 zan-loadmore 模板，并且直接传入设置值 -->\n<template is=\"zan-loadmore\" data=\"{{ loading: true }}\"></template>\n
\n

代码演示

\n

loadmore 支持三种状态，loading, nodata, nomore。传入指定的值即可显示

\n
<!-- 加载更多 -->\n<template is=\"zan-loadmore\" data=\"{{ loading: true }}\"></template>\n<!-- 没有可以显示的数据 -->\n<template is=\"zan-loadmore\" data=\"{{ nodata: true }}\"></template>\n<!-- 没有更多的数据了 -->\n<template is=\"zan-loadmore\" data=\"{{ nomore: true }}\"></template>\n
\n\n
Page({\n  data: {\n  },\n\n  onLoad: function () {\n\n  },\n\n  onShow: function() {\n  },\n})\n
\n
{\n  \"navigationBarTitleText\": \"Loadmore 加载\"\n}\n
\n
<import src=\"/dist/loadmore/index.wxml\" />\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">LOADMORE</view>\n\n  <template is=\"zan-loadmore\" data=\"{{ loading: true }}\" />\n  <template is=\"zan-loadmore\" data=\"{{ nodata: true }}\" />\n  <template is=\"zan-loadmore\" data=\"{{ nomore: true }}\" />\n</view>\n
\n\n
\n ","label":"Loadmore 加载"} /***/ }), /***/ "../../packages/noticebar/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Noticebar 通告栏

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/noticebar/index.wxml\" />\n\n<!-- 直接使用 zan-noticebar 模板，并且直接传入设置值 -->\n<template is=\"zan-noticebar\" data=\"{{ ...data, componentId: 'noticebar'  }}\"></template>\n
\n

// 在 Page 中混入 Noticebar 里面声明的方法

\n
const { Noticebar, extend } = require('path/to/zanui-weapp/dist/index');\n\nPage(extend({}, Noticebar, {\n  // ...\n}));\n
\n

代码演示

\n

Noticebar 组件支持滚动和静止两种展示方式，通过 text 传入展示文案

\n
<template is=\"zan-noticebar\" data=\"{{ text: '展示文案', componentId: 'noticebar'  }}\"></template>\n
\n

注意

\n

如果组件需要开启滚动展示，需要在 Page 的脚本中执行 initZanNoticeBarScroll 方法，来开启滚动展示

\n
Page(extend({}, Noticebar, {\n  // ...\n  onShow() {\n    // 在方法中传入对应的 componentId\n    this.initZanNoticeBarScroll('movable');\n  }\n  // ...\n}));\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
text通告栏展示文案String-
componentId用于区分页面多个 Noticebar 组件，在调用 initZanNoticeBarScroll 时需要传入String-
\n\n
var Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.NoticeBar, {\n  data: {\n    movable: {\n      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'\n    },\n    static1: {\n      text: '足协杯战线连续第2年上演广州德比战'\n    },\n    static2: {\n      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'\n    }\n  },\n  onShow() {\n    // 滚动通告栏需要initScroll\n    this.initZanNoticeBarScroll('movable');\n    // initScroll的通告栏如果宽度足够显示内容将保持静止\n    this.initZanNoticeBarScroll('static1');\n    // 不进行initScroll的通告栏也将保持静止\n    // this.initZanNoticeBarScroll('static2');\n  }\n}))\n
\n
{\n  \"navigationBarTitleText\": \"Noticebar 通告栏\"\n}\n
\n
<import src=\"/dist/noticebar/index.wxml\" />\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">NOTICEBAR</view>\n\n  <view class=\"zan-panel-title\">滚动通告栏</view>\n  <view class=\"zan-panel\">\n    <template\n      is=\"zan-noticebar\"\n      data=\"{{ ...movable, componentId: 'movable'  }}\"\n    ></template>\n  </view>\n\n  <view class=\"zan-panel-title\">静止通告栏1</view>\n  <view class=\"zan-panel\">\n    <template\n      is=\"zan-noticebar\"\n      data=\"{{ ...static1, componentId: 'static1'  }}\"\n    ></template>\n  </view>\n\n  <view class=\"zan-panel-title\">静止通告栏2</view>\n  <view class=\"zan-panel\">\n    <template\n      is=\"zan-noticebar\"\n      data=\"{{ ...static2, componentId: 'static2'  }}\"\n    ></template>\n  </view>\n\n</view>~~~\n</wxapp-demo>
\n\n
\n ","label":"Noticebar 通告栏"} /***/ }), /***/ "../../packages/panel/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Panel 面板

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

Panel 提供了一块白色的展示区域，直接在需要的元素上加上 zan-panel 类即可，使用方式如下

\n
<view class=\"zan-panel\">\n  <view>内容</view>\n</view>\n
\n\n
Page({\n  data: {\n  },\n\n  onLoad: function () {\n\n  },\n\n  onShow: function() {\n  },\n})\n
\n
{\n  \"navigationBarTitleText\": \"Panel 面板\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">PANEL</view>\n\n  <view class=\"zan-panel-title\">标题</view>\n  <view class=\"zan-panel\">\n    <view style=\"padding: 15px;\">内容</view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view style=\"padding: 15px;\">内容</view>\n  </view>\n\n  <view class=\"zan-panel zan-panel--without-border\">\n    <view style=\"padding: 15px;\">无边框的panel</view>\n  </view>\n\n  <view class=\"zan-panel\">\n    <view style=\"padding: 15px;\">内容</view>\n  </view>\n\n</view>\n
\n\n
\n ","label":"Panel 面板"} /***/ }), /***/ "../../packages/popup/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Popup 弹出层

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里使用特定的 wxml 结构

\n
<!-- 在需要展示时，增加 zan-popup--show 类即可 -->\n<view class=\"zan-popup zan-popup--show\">\n  <!-- 遮罩层，有需要可以在遮罩层上增加点击事件 -->\n  <view class=\"zan-popup__mask\"></view>\n  <!-- 弹出层的内容放在此元素内 -->\n  <view class=\"zan-popup__container\"></view>\n</view>\n
\n

代码演示

\n

popup 动画

\n

popup 额外支持了 上下左右 四种动画方式，通过在顶层加指定的类即可。使用方式如下

\n
<!-- 从底部弹出的弹层 -->\n<view class=\"zan-popup zan-popup--bottom\">\n  <!-- 填充 popup 内容 -->\n</view>\n\n<!-- 从顶部弹出的弹层 -->\n<view class=\"zan-popup zan-popup--top\">\n  <!-- 填充 popup 内容 -->\n</view>\n\n<!-- 从左侧弹出的弹层 -->\n<view class=\"zan-popup zan-popup--left\">\n  <!-- 填充 popup 内容 -->\n</view>\n\n<!-- 从右侧弹出的弹层 -->\n<view class=\"zan-popup zan-popup--right\">\n  <!-- 填充 popup 内容 -->\n</view>\n
\n

样式配置

\n

popup 中内容区域的样式，可以通过自定义 zan-popup__container 或者内部元素来实现。

\n
<view class=\"zan-popup zan-popup--show\">\n  <!-- 遮罩层，有需要可以在遮罩层上增加点击事件 -->\n  <view class=\"zan-popup__mask\"></view>\n  <!-- 弹出层的内容放在此元素内 -->\n  <view class=\"zan-popup__container demo-contaienr\" style=\"padding: 15px;\"></view>\n</view>\n
\n\n
Page({\n\n  data: {\n    showPopup: false,\n    showLeftPopup: false,\n    showRightPopup: false,\n    showTopPopup: false,\n    showBottomPopup: false\n  },\n\n  togglePopup() {\n    this.setData({\n      showPopup: !this.data.showPopup\n    });\n  },\n\n  toggleLeftPopup() {\n    this.setData({\n      showLeftPopup: !this.data.showLeftPopup\n    });\n  },\n\n  toggleRightPopup() {\n    this.setData({\n      showRightPopup: !this.data.showRightPopup\n    });\n  },\n\n  toggleBottomPopup() {\n    this.setData({\n      showBottomPopup: !this.data.showBottomPopup\n    });\n  },\n\n  toggleTopPopup() {\n    this.setData({\n      showTopPopup: !this.data.showTopPopup\n    });\n  }\n});\n
\n
{\n  \"navigationBarTitleText\": \"Popup 弹出层\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">POPUP</view>\n\n  <view class=\"zan-btns\" style=\"margin-top: 30vh;\">\n    <button class=\"zan-btn\" bindtap=\"togglePopup\">\n      弹出popup\n    </button>\n    <button class=\"zan-btn\" bindtap=\"toggleTopPopup\">\n      从顶部弹出popup\n    </button>\n    <button class=\"zan-btn\" bindtap=\"toggleBottomPopup\">\n      从底部弹出popup\n    </button>\n    <button class=\"zan-btn\" bindtap=\"toggleLeftPopup\">\n      从左边弹出popup\n    </button>\n    <button class=\"zan-btn\" bindtap=\"toggleRightPopup\">\n      从右边弹出popup\n    </button>\n  </view>\n\n  <view class=\"zan-popup {{ showPopup ? 'zan-popup--show' : ''}}\">\n    <view class=\"zan-popup__mask\" bindtap=\"togglePopup\"></view>\n    <view class=\"zan-popup__container popup-example--center\">\n      <view class=\"zan-btns\">\n        <button class=\"zan-btn\" bindtap=\"togglePopup\">\n          关闭 popup\n        </button>\n      </view>\n    </view>\n  </view>\n\n  <view class=\"popup-example--left zan-popup zan-popup--left {{ showLeftPopup ? 'zan-popup--show' : ''}}\">\n    <view class=\"zan-popup__mask\" bindtap=\"toggleLeftPopup\"></view>\n    <view class=\"zan-popup__container\">\n      <view class=\"zan-btns\">\n        <button class=\"zan-btn\" catchtap=\"toggleLeftPopup\">\n          关闭 popup\n        </button>\n      </view>\n    </view>\n  </view>\n\n  <view class=\"popup-example--right zan-popup zan-popup--right {{ showRightPopup ? 'zan-popup--show' : ''}}\">\n    <view class=\"zan-popup__mask\" catchtap=\"toggleRightPopup\"></view>\n    <view class=\"zan-popup__container\">\n      <view class=\"zan-btns\">\n        <button class=\"zan-btn\" catchtap=\"toggleRightPopup\">\n          关闭 popup\n        </button>\n      </view>\n    </view>\n  </view>\n\n  <view class=\"popup-example--top zan-popup zan-popup--top {{ showTopPopup ? 'zan-popup--show' : ''}}\">\n    <view class=\"zan-popup__mask\" catchtap=\"toggleTopPopup\"></view>\n    <view class=\"zan-popup__container\">\n      内容\n    </view>\n  </view>\n\n  <view class=\"popup-example--bottom zan-popup zan-popup--bottom {{ showBottomPopup ? 'zan-popup--show' : ''}}\">\n    <view class=\"zan-popup__mask\" catchtap=\"toggleBottomPopup\"></view>\n    <view class=\"zan-popup__container\">\n      <view class=\"zan-btns\">\n        <button class=\"zan-btn\" catchtap=\"toggleBottomPopup\">\n          关闭 popup\n        </button>\n      </view>\n    </view>\n  </view>\n\n</view>\n
\n
.popup-example--center {\n  border-radius: 4px;\n}\n\n.popup-example--right .zan-popup__container {\n  top: 0;\n  bottom: 0;\n}\n\n.popup-example--left .zan-popup__container {\n  top: 0;\n  bottom: 0;\n}\n\n.popup-example--top .zan-popup__container {\n  left: 0;\n  right: 0;\n  padding: 15px;\n  background-color: rgba(0, 0, 0, 0.7);\n  color: #fff;\n  font-size: 16px;\n}\n.popup-example--top .zan-popup__mask {\n  opacity: 0;\n}\n\n.popup-example--bottom .zan-popup__container {\n  left: 0;\n  right: 0;\n}\n
\n\n
\n ","label":"Popup 弹出层"} /***/ }), /***/ "../../packages/row/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Layout 布局

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度

\n
<view class=\"zan-row\">\n  <view class=\"zan-col zan-col-8\">\n    span: 8\n  </view>\n  <view class=\"zan-col zan-col-8\">\n    span: 8\n  </view>\n  <view class=\"zan-col zan-col-8\">\n    span: 8\n  </view>\n</view>\n
\n

Layout 提供了 offset 功能。添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同

\n
<view class=\"zan-row\">\n  <view class=\"zan-col zan-col-4\">span: 4</view>\n  <view class=\"zan-col zan-col-10 zan-col-offset-4\">offset: 4, span: 10</view>\n</view>\n<view class=\"zan-row\">\n  <view class=\"zan-col zan-col-12 zan-col-offset-12\">offset: 12, span: 12</view>\n</view>\n
\n\n\n
\n ","label":"Layout 布局"} /***/ }), /***/ "../../packages/select/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Select 选择

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/select/index.wxml\" />\n\n<template is=\"zan-select\" data=\"{{ items, checkedValue: checked.base, componentId: 'base' }}\" ></template>\n
\n
const { extend, Select } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Select 里面声明的方法\nPage(extend({}, Select, {\n  // ...\n}));\n
\n

代码演示

\n

基础功能

\n

Select 组件通过传入的 items 对象控制显示，用 checkedValue 确认显示的高亮项目

\n
<template is=\"zan-select\" data=\"{{ items, checkedValue: checked.base, componentId: 'base' }}\" ></template>\n
\n

当 Select 被点击时，可以在页面中注册 handleZanTabChange 方法来监听

\n
Page(extend({}, Select, {\n  handleZanSelectChange({ componentId, value }) {\n    // componentId 即为在模板中传入的 componentId\n    // 用于在一个页面上使用多个 Select 时，进行区分\n    // value 表示被选中项的 value\n  }\n}));\n
\n

具体参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
itemsselect 显示各个项的配置Array-
checkedValue高亮的 item 的 value 值String-
nameSelect 的名字，作为 form 表单提交时数据的 keyString-
activeColorSelect 高亮颜色String#ff4444
componentId用于区分页面多个 Select 组件String-
\n

items 参数格式

\n
[\n  {\n    // 当前选项离左侧的距离\n    padding: 0,\n    // 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到\n    value: '1',\n    // 选项文案\n    name: '选项一',\n  },\n  {\n    padding: 0,\n    value: '2',\n    name: '选项二',\n  },\n]\n
\n\n
���\u0001Bud1��\u0010���\b���\u0010����%����������������������\b���\b��������������������\u0002�����������\u0001��\u0010������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������\u0001������\b\u000b���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������\u0001��� ���\u0001���@���\u0001�������\u0001��\u0001����\u0001��\u0002����\u0001��\u0004��������\u0001��\u0010����\u0001�� ����\u0001��@����\u0001�������\u0001�\u0001�����\u0001�\u0002�����\u0001�\u0004�����\u0001�\b�����\u0001�\u0010�����\u0001� �����\u0001�@�����\u0001�������\u0001\u0001������\u0001\u0002������\u0001\u0004������\u0001\b������\u0001\u0010������\u0001 ������\u0001@��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������\u0003������\u0010\u000b���E���%�������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������\u0001\u0004DSDB���\u0001�����������������������\u0001���`�������\u0001�������\u0001��\u0001����\u0001��\u0002����\u0001��\u0004����\u0002��\b���\u0018��������\u0001�� ����\u0001��@����\u0001�������\u0001�\u0001�����\u0001�\u0002�����\u0001�\u0004�����\u0001�\b�����\u0001�\u0010�����\u0001� �����\u0001�@�����\u0001�������\u0001\u0001������\u0001\u0002������\u0001\u0004������\u0001\b������\u0001\u0010������\u0001 ������\u0001@��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������~~~\n~~~ js\nvar Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.Select, Zan.TopTips, {\n\n  data: {\n    items: [\n      {\n        padding: 0,\n        value: '1',\n        name: '选项一',\n      },\n      {\n        padding: 0,\n        value: '2',\n        name: '选项二',\n      },\n    ],\n\n    checked: {\n      base: -1,\n      color: -1,\n      form: -1\n    },\n\n    activeColor: '#4b0'\n  },\n\n  handleZanSelectChange({ componentId, value }) {\n    this.setData({\n      [`checked.${componentId}`]: value\n    });\n  },\n\n  formSubmit(event) {\n    console.log('[zan:field:submit]', event.detail.value);\n    this.showZanTopTips(`选中的值为${event.detail.value.formtest}`);\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Select 选择\"\n}\n
\n
<import src=\"/dist/select/index.wxml\" />\n<import src=\"/dist/toptips/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">SELECT</view>\n\n  <view class=\"zan-panel-title\">基础用法</view>\n  <view class=\"zan-panel\">\n    <view>\n      <template is=\"zan-select\" data=\"{{ items, checkedValue: checked.base, componentId: 'base' }}\" ></template>\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">自定义高亮颜色</view>\n  <view class=\"zan-panel\">\n    <view>\n      <template is=\"zan-select\" data=\"{{ items, checkedValue: checked.color, activeColor, componentId: 'color' }}\" ></template>\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">Form 表单中的select应用</view>\n  <form bindsubmit=\"formSubmit\">\n    <view class=\"zan-panel\">\n      <view>\n        <template\n          is=\"zan-select\"\n          data=\"{{ items, checkedValue: checked.form, name: 'formtest', componentId: 'form' }}\" ></template>\n      </view>\n    </view>\n\n    <view class=\"zan-btns\">\n      <button\n        class=\"zan-btn zan-btn--primary\"\n        formType=\"submit\">提交数据</button>\n    </view>\n  </form>\n</view>\n\n<template is=\"zan-toptips\" data=\"{{ zanTopTips }}\"></template>\n
\n\n
\n ","label":"Select 选择"} /***/ }), /***/ "../../packages/stepper/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Stepper 计数器

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/stepper/index.wxml\" />\n\n<template is=\"zan-stepper\" data=\"{{ ...stepper, componentId: 'stepper' }}\"></template>\n
\n
const { extend, Stepper } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Stepper 里面声明的方法\nPage(extend({}, Stepper, {\n  // ...\n}));\n
\n

代码演示

\n

基础功能

\n

Stepper 组件通过传入的 stepper 对象控制，内部数据格式如下：

\n
const stepper = {\n  // 当前 stepper 数字\n  stepper: 1,\n  // 最小可到的数字\n  min: 1,\n  // 最大可到的数字\n  max: 1\n};\n
\n

当一个 Stepper 中，min 超过 max，就会导致组件被置灰

\n

当 stepper 被点击时，可以在页面中注册 handleZanStepperChange 方法来监听

\n
Page(extend({}, Stepper, {\n  handleZanStepperChange({ componentId, stepper }) {\n    // componentId 即为在模板中传入的 componentId\n    // 用于在一个页面上使用多个 stepper 时，进行区分\n    // stepper 代表操作后，应该要展示的数字，需要设置到数据对象里，才会更新页面展示\n    this.setData({\n      stepper\n    });\n  }\n}));\n
\n\n
var Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.Stepper, {\n  data: {\n    stepper1: {\n      stepper: 10,\n      min: 1,\n      max: 20\n    },\n    stepper2: {\n      stepper: 1,\n      min: 1,\n      max: 1\n    },\n    stepper3: {\n      stepper: 10,\n      min: 1,\n      max: 20\n    }\n  },\n\n  handleZanStepperChange(e) {\n    var componentId = e.componentId;\n    var stepper = e.stepper;\n\n    this.setData({\n      [`${componentId}.stepper`]: stepper\n    });\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Stepper 计数器\"\n}\n
\n
<import src=\"/dist/stepper/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">Stepper</view>\n\n  <view style=\"padding: 40px 15px\">\n    <template is=\"zan-stepper\" data=\"{{ ...stepper1, componentId: 'stepper1' }}\" />\n  </view>\n\n  <!-- 当最大值等于最小值时，组件不可用 -->\n  <view style=\"padding: 40px 15px \">\n    <template is=\"zan-stepper\" data=\"{{ ...stepper2, componentId: 'stepper2' }}\" />\n  </view>\n\n  <!-- small size -->\n  <view style=\"padding: 40px 15px \">\n    <template is=\"zan-stepper\" data=\"{{ ...stepper3, componentId: 'stepper3', size: 'small' }}\" />\n  </view>\n</view>\n
\n\n
\n ","label":"Stepper 计数器"} /***/ }), /***/ "../../packages/steps/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Steps 步骤条

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/steps/index.wxml\" />\n
\n

代码演示

\n

在模板中使用 zan-steps 模板，并传入相应数据

\n
<template is=\"zan-steps\" data=\"{{ type: 'horizon', steps }}\"></template>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
typesteps 的展示状态，可选值为 'horizon', 'vertical'Stringhorizon
hasDesc是否展示描述Booleanfalse
steps步骤条展示数据Array必须
className自定义类目，方便自定义显示String
\n

steps 数据格式如下：

\n
[\n  {\n    // 此步骤是否当前完成状态\n    current: false,\n    // 此步骤是否已经完成\n    done: true,\n    // 此步骤显示文案\n    text: '步骤一',\n    // 此步骤描述语\n    desc: '10.01'\n  },\n  {\n    done: true,\n    current: false,\n    text: '步骤二',\n    desc: '10.02'\n  },\n  {\n    done: true,\n    current: true,\n    text: '步骤三',\n    desc: '10.03'\n  }\n]\n
\n\n
Page({\n  data: {\n    steps: [\n      {\n        current: true,\n        done: true,\n        text: '步骤一',\n        desc: '10.01'\n      },\n      {\n        done: false,\n        current: false,\n        text: '步骤二',\n        desc: '10.02'\n      },\n      {\n        done: false,\n        current: false,\n        text: '步骤三'\n      }\n    ],\n    steps2: [\n      {\n        current: false,\n        done: true,\n        text: '步骤一',\n        desc: '10.01'\n      },\n      {\n        done: true,\n        current: true,\n        text: '步骤二',\n        desc: '10.02'\n      },\n      {\n        done: false,\n        current: false,\n        text: '步骤三',\n        desc: '10.03'\n      }\n    ],\n    steps3: [\n      {\n        current: false,\n        done: true,\n        text: '步骤一',\n        desc: '10.01'\n      },\n      {\n        done: true,\n        current: false,\n        text: '步骤二',\n        desc: '10.02'\n      },\n      {\n        done: true,\n        current: true,\n        text: '步骤三',\n        desc: '10.03'\n      }\n    ]\n  },\n\n  onLoad() {\n\n  },\n\n  onShow() {\n  },\n});\n
\n
{\n  \"navigationBarTitleText\": \"Steps 步骤条\"\n}\n
\n
<import src=\"/dist/steps/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">STEPS</view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'horizon', steps: steps }}\"></template>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'horizon', steps: steps2 }}\"></template>\n      </view>\n    </view>\n\n    <view class=\"zan-cell zan-cell--last-child\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'horizon', steps: steps3 }}\"></template>\n      </view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">有描述的steps</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'horizon', hasDesc: true, steps: steps }}\"></template>\n      </view>\n    </view>\n\n    <view class=\"zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'horizon', hasDesc: true, steps: steps2 }}\"></template>\n      </view>\n    </view>\n\n    <view class=\"zan-cell zan-cell--last-child\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'horizon', hasDesc: true, steps: steps3 }}\"></template>\n      </view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">垂直方向的steps</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'vertical', hasDesc: true, steps }}\"></template>\n      </view>\n    </view>\n\n    <view class=\"zan-cell zan-cell--last-child\">\n      <view class=\"zan-cell__bd\">\n        <template is=\"zan-steps\" data=\"{{ type: 'vertical', steps }}\"></template>\n      </view>\n    </view>\n  </view>\n\n  <view class=\"zan-panel-title\">可自定义class</view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell__bd\">\n      <template is=\"zan-steps\" data=\"{{ type: 'vertical', steps, className: 'my-class' }}\"></template>\n    </view>\n  </view>\n\n</view>\n
\n
.my-class {\n  padding: 10px;\n}\n.my-class .zan-steps__step--done {\n  color: #f44;\n}\n
\n\n
\n ","label":"Steps 步骤条"} /***/ }), /***/ "../../packages/switch/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Switch 开关

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/switch/index.wxml\" />\n
\n
const { Switch, extend } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Switch 里面声明的方法\nPage(extend({}, Switch, {\n  // ...\n}));\n
\n

代码演示

\n

在模板中使用 zan-switch 模板，并传入相应数据

\n
<template is=\"zan-switch\" data=\"{{ loading, disabled, checked, componentId: 'switch1' }}\"></template>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
loadingswitch 是否是 loading 状态Booleanfalse
disabled是否不可用Booleanfalse
checked是否打开状态Booleanfalse必须
componentId用于在一个页面上使用多个 switch 时，进行区分String
\n

当 switch 被点击时，可以在页面中注册 handleZanSwitchChange 方法来监听

\n
Page(extend({}, Tab, {\n  handleZanSwitchChange({ componentId, checked }) {\n    // componentId 即为在模板中传入的 componentId\n    // 用于在一个页面上使用多个 switch 时，进行区分\n    // checked 表示 switch 的选中状态\n    this.setData({ checked });\n  }\n}));\n
\n\n
var Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.Switch, {\n  data: {\n    sync: {\n      checked: false\n    },\n    async: {\n      checked: true,\n      loading: false\n    },\n  },\n\n  handleZanSwitchChange(e) {\n    var componentId = e.componentId;\n    var checked = e.checked;\n\n    if (componentId == 'sync') {\n      // 同步开关\n      this.setData({\n        [`${componentId}.checked`]: checked\n      });\n    } else if (componentId == 'async') {\n      // 异步开关\n      this.setData({\n        [`${componentId}.loading`]: true\n      });\n      setTimeout(() => {\n        this.setData({\n          [`${componentId}.loading`]: false,\n          [`${componentId}.checked`]: checked\n        });\n      }, 500);\n    }\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Switch 开关\"\n}\n
\n
<import src=\"/dist/switch/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">SWITCH</view>\n\n  <view class=\"zan-panel-title\">同步开关</view>\n  <view class=\"zan-panel\">\n    <template is=\"zan-switch\" data=\"{{ ...sync, componentId: 'sync' }}\" />\n  </view>\n\n  <view class=\"zan-panel-title\">异步开关</view>\n  <view class=\"zan-panel\">\n    <template is=\"zan-switch\" data=\"{{ ...async, componentId: 'async' }}\" />\n  </view>\n\n  <view class=\"zan-panel-title\">开关不可用</view>\n  <view class=\"zan-panel\">\n    <template is=\"zan-switch\" data=\"{{ checked: false, disabled: true, componentId: 'switch3' }}\" />\n    <template is=\"zan-switch\" data=\"{{ checked: true, disabled: true, componentId: 'switch4' }}\" />\n  </view>\n\n</view>\n
\n
.zan-panel {\n  padding: 10px;\n}\n.zan-switch {\n  margin-right: 8px;\n}\n
\n\n
\n ","label":"Switch 开关"} /***/ }), /***/ "../../packages/tab/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Tab 标签

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/tab/index.wxml\" />\n
\n
const { extend, Tab } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Tab 里面声明的方法\nPage(extend({}, Tab, {\n  // ...\n}));\n
\n

代码演示

\n

在模板中使用 zan-tab 模板，并传入相应数据

\n
<template is=\"zan-tab\" data=\"{{ tab: { list, selectedId, scroll, height }, componentId: 'tab1' }}\"></template>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
tabtab 配置对象Object-
tab.scroll是否开启 tab 左右滑动模式Boolean-
tab.list可选项列表Array-
tab.selectedId选中id--
tab.heighttab高度Number-
componentId用于区分页面多个 tab 组件String-
\n

tab 组件中，tab.list 数据格式如下

\n
[{\n  // tab 项 id\n  id: 'all',\n  // tab 项展示文案\n  title: '全部'\n}, {\n  id: 'topay',\n  title: '待付款'\n}, {\n  id: 'tosend',\n  title: '待发货'\n}, {\n  id: 'send',\n  title: '待收货'\n}, {\n  id: 'sign',\n  title: '已完成'\n}]\n
\n

当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听

\n
Page(extend({}, Tab, {\n  handleZanTabChange({ componentId, selectedId }) {\n    // componentId 即为在模板中传入的 componentId\n    // 用于在一个页面上使用多个 tab 时，进行区分\n    // selectId 表示被选中 tab 项的 id\n  }\n}));\n
\n\n
const { Tab, extend } = require('../../dist/index');\n\nPage(extend({}, Tab, {\n  data: {\n    tab1: {\n      list: [{\n        id: 'all',\n        title: '全部'\n      }, {\n        id: 'topay',\n        title: '待付款'\n      }, {\n        id: 'tosend',\n        title: '待发货'\n      }, {\n        id: 'send',\n        title: '待收货'\n      }, {\n        id: 'sign',\n        title: '已完成订单'\n      }],\n      selectedId: 'all'\n    },\n    tab2: {\n      list: [{\n        id: '1',\n        title: '最新商品1'\n      }, {\n        id: '2',\n        title: '最新商品2'\n      }, {\n        id: '3',\n        title: '最新商品3'\n      }, {\n        id: '4',\n        title: '最新商品4'\n      }, {\n        id: '5',\n        title: '最新商品5'\n      }, {\n        id: '6',\n        title: '最新商品6'\n      }],\n      selectedId: '1',\n      scroll: true,\n      height: 45\n    },\n    tab3: {\n      list: [{\n        id: '1',\n        title: '商品1'\n      }, {\n        id: '2',\n        title: '商品2'\n      }, {\n        id: '3',\n        title: '商品3'\n      }, {\n        id: '4',\n        title: '商品4'\n      }, {\n        id: '5',\n        title: '商品5'\n      }, {\n        id: '6',\n        title: '商品6'\n      }],\n      selectedId: '1',\n      scroll: true,\n      height: 45\n    }\n  },\n\n  handleZanTabChange(e) {\n    var componentId = e.componentId;\n    var selectedId = e.selectedId;\n\n    this.setData({\n      [`${componentId}.selectedId`]: selectedId\n    });\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Tab 标签\"\n}\n
\n
<import src=\"/dist/tab/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">TAB</view>\n\n  <view style=\"margin: 20px 0\">\n    <template\n      is=\"zan-tab\"\n      data=\"{{ ...tab1, componentId: 'tab1' }}\"></template>\n  </view>\n  <view style=\"margin: 20px 0\">\n    <template\n      is=\"zan-tab\"\n      data=\"{{ ...tab2, componentId: 'tab2' }}\"></template>\n  </view>\n  <view style=\"margin: 20px 0\">\n    <template\n      is=\"zan-tab\"\n      data=\"{{ ...tab3, componentId: 'tab3' }}\"></template>\n  </view>\n</view>\n
\n\n
\n ","label":"Tab 标签"} /***/ }), /***/ "../../packages/tag/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Tag 标签

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

代码演示

\n

直接在元素上添加zan-tag类即可。同时支持 danger, warn, primary 三种主题色。

\n

添加zan-tag--disabled以后，会以不可用形式展示

\n
<view class=\"zan-tag\">灰色</view>\n<view class=\"zan-tag zan-tag--danger\">会员折扣</view>\n<view class=\"zan-tag zan-tag--warn\">返现</view>\n<view class=\"zan-tag zan-tag--primary\">返现</view>\n<!-- 不可用样式 -->\n<view class=\"zan-tag zan-tag--disabled\">不可用</view>\n
\n

添加zan-tag--plain以后，即可展示镂空样式标签

\n
<view class=\"zan-tag zan-tag--warn zan-tag--plain\">返现</view>\n
\n\n
Page({\n  data: {\n  },\n\n  onLoad: function () {\n\n  },\n\n  onShow: function() {\n  },\n})\n
\n
{\n  \"navigationBarTitleText\": \"Tag 标记\"\n}\n
\n
<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">Tag</view>\n\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--last-child\">\n      <view class=\"zan-tag\">灰色</view>\n      <view class=\"zan-tag zan-tag--danger\">红色</view>\n      <view class=\"zan-tag zan-tag--disabled\">不可用</view>\n    </view>\n  </view>\n  <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--last-child\">\n      <view class=\"zan-tag zan-tag--danger\">会员折扣</view>\n      <view class=\"zan-tag zan-tag--warn\">返现</view>\n      <view class=\"zan-tag zan-tag--primary\">返现</view>\n      <view class=\"zan-tag zan-tag--primary zan-tag--disabled\">不可用</view>\n    </view>\n  </view>\n\n    <view class=\"zan-panel\">\n    <view class=\"zan-cell zan-cell--last-child\">\n      <view class=\"zan-tag zan-tag--plain\">灰色</view>\n      <view class=\"zan-tag zan-tag--danger zan-tag--plain\">会员折扣</view>\n      <view class=\"zan-tag zan-tag--warn zan-tag--plain\">返现</view>\n      <view class=\"zan-tag zan-tag--primary zan-tag--plain\">返现</view>\n      <view class=\"zan-tag zan-tag--primary zan-tag--plain zan-tag--disabled\">返现不可用</view>\n    </view>\n  </view>\n</view>\n
\n
.zan-tag + .zan-tag {\n  margin-left: 10px;\n}\n
\n\n
\n ","label":"Tag 标签"} /***/ }), /***/ "../../packages/toast/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

Toast 轻提示

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/toast/index.wxml\" />\n\n<!-- 直接使用 zan-toast 模板，并且直接传入 zanToast -->\n<template is=\"zan-toast\" data=\"{{ zanToast }}\"></template>\n
\n
const { Toast, extend } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 Toast 里面声明的方法\nPage(extend({}, Toast, {\n  // ...\n}));\n
\n

代码演示

\n

在 js 中直接调用 this.showZanToast 即可

\n
this.showZanToast('toast的内容');\n\nthis.showZanToast({\n  title: 'toast的内容'\n});\n
\n

Toast 支持在文字上展示图标，用法如下

\n
this.showZanToast({\n  title: 'toast的内容',\n  // icon 仅支持 Icon 组件内提供的\n  icon: 'fail'\n});\n
\n

Toast 组件扩展了一个 showZanLoading 的方法，快速展示加载中

\n
this.showZanLoading('toast的内容');\n
\n

参数说明

\n

方法

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
方法名参数返回值介绍
showZanToasttitle \\| options, timeout-展示提示
showZanLoadingtitle \\| options-展示加载提示
clearZanToast-关闭提示
\n

options 具体参数如下

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值必须
titletoast 显示文案String-
icontoast 显示图标，仅支持 Icon 组件内提供的和 loadingString-
imagetoast 显示图标，为图片的链接，传入此值后会覆盖 icon 值String-
timeouttoast 显示时间，小于0则会一直显示，需要手动调用 clearZanToast 清除Number-
\n\n
const Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.Toast, {\n  data: {},\n\n  showToast() {\n    this.showZanToast('toast的内容');\n  },\n\n  showIconToast() {\n    this.showZanToast({\n      title: 'toast的内容',\n      icon: 'fail'\n    });\n  },\n\n  showImageToast() {\n    this.showZanToast({\n      title: 'toast的内容',\n      image: 'https://b.yzcdn.cn/v2/image/dashboard/secured_transaction/suc_green@2x.png'\n    });\n  },\n\n  showLoadingToast() {\n    this.showZanToast({\n      title: 'toast的内容',\n      icon: 'loading'\n    });\n  },\n\n  showOnlyIcon() {\n    this.showZanToast({\n      icon: 'fail'\n    });\n  },\n\n  showLoading() {\n    this.showZanLoading('加载中');\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Toast 轻提示\"\n}\n
\n
<import src=\"/dist/toast/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">TOAST</view>\n\n  <view class=\"zan-btns\" style=\"margin-top: 15vh;\">\n    <button class=\"zan-btn\" bindtap=\"showToast\">\n      显示toast\n    </button>\n\n    <button class=\"zan-btn\" bindtap=\"showIconToast\">\n      显示 Icon 图标的toast\n    </button>\n\n    <button class=\"zan-btn\" bindtap=\"showImageToast\">\n      自定义图片作为图标的toast\n    </button>\n\n    <button class=\"zan-btn\" bindtap=\"showLoadingToast\">\n      显示 Loading toast\n    </button>\n\n    <button class=\"zan-btn\" bindtap=\"showOnlyIcon\">\n      只显示图标的toast\n    </button>\n\n    <button class=\"zan-btn\" bindtap=\"showLoading\">\n      显示 Loading\n    </button>\n  </view>\n</view>\n\n<template is=\"zan-toast\" data=\"{{ zanToast }}\"></template>\n
\n\n
\n ","label":"Toast 轻提示"} /***/ }), /***/ "../../packages/toptips/README.md": /***/ (function(module, exports) { module.exports = {"template":"\n
\n

TopTips 顶部提示

\n

使用指南

\n

在 app.wxss 中引入组件库所有样式

\n
@import \"path/to/zanui-weapp/dist/index.wxss\";\n
\n

在需要使用的页面里引入组件库模板和脚本

\n
<import src=\"path/to/zanui-weapp/dist/toptips/index.wxml\" />\n\n<!-- 直接使用 zan-toptips 模板，并且直接传入 zanTopTips -->\n<template is=\"zan-toptips\" data=\"{{ zanTopTips }}\"></template>\n
\n
const { TopTips, extend } = require('path/to/zanui-weapp/dist/index');\n\n// 在 Page 中混入 TopTips 里面声明的方法\nPage(extend({}, TopTips, {\n  // ...\n}));\n
\n

代码演示

\n

在 js 中直接调用 this.showZanTopTips 即可

\n
this.showZanTopTips('toptips的内容');\n
\n\n
var Zan = require('../../dist/index');\n\nPage(Object.assign({}, Zan.TopTips, {\n  data: {},\n\n  showTopTips() {\n    this.showZanTopTips('toptips的内容');\n  }\n}));\n
\n
{\n  \"navigationBarTitleText\": \"Toptips 顶部提示\"\n}\n
\n
<import src=\"/dist/toptips/index.wxml\" />\n\n<view class=\"container\">\n\n  <view class=\"doc-title zan-hairline--bottom\">TOPTIPS</view>\n\n  <view class=\"zan-btns\" style=\"margin-top: 30vh;\">\n    <button class=\"zan-btn\" bindtap=\"showTopTips\">\n      显示toptips\n    </button>\n  </view>\n</view>\n\n<template is=\"zan-toptips\" data=\"{{ zanTopTips }}\"></template>\n
\n\n
\n ","label":"TopTips 顶部提示"} /***/ }), /***/ "../../website/node_modules/babel-loader/lib/index.js!../.13.7.1@vue-loader/lib/selector.js?type=script&index=0!../../website/plugins/components/WxappPage.vue": /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // // // // // // // // // // // // // // // // // // /* harmony default export */ __webpack_exports__["a"] = ({ props: ['demoTypes'], data() { return { types: [], activeCodeType: '' }; }, created() { this.types = this.demoTypes ? this.demoTypes.split(',') : []; this.activeCodeType = this.types ? this.types[0] : ''; } }); /***/ }), /***/ "../../website/node_modules/css-loader/index.js?{\"sourceMap\":true}!../.13.7.1@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7a5a90c9\",\"scoped\":true,\"hasInlineConfig\":false}!../.13.7.1@vue-loader/lib/selector.js?type=styles&index=0!../../website/plugins/components/WxappPage.vue": /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__("../../website/node_modules/css-loader/lib/css-base.js")(true); // imports // module exports.push([module.i, "\ncode.language-wxml[data-v-7a5a90c9]::after {\n content: 'WXML';\n}\ncode.language-js[data-v-7a5a90c9]::after {\n content: 'JS';\n}\ncode.language-wxss[data-v-7a5a90c9]::after {\n content: 'WXSS';\n}\ncode.language-json[data-v-7a5a90c9]::after {\n content: 'JSON';\n}\n\n/* .demo {\n margin-top: 15px;\n}\n.demo-code {\n height: 500px;\n overflow: auto;\n background-color: #f5f7fa;\n}\n.code-type-tabs {\n display: flex;\n justify-content: center;\n text-align: center;\n}\n.code-type-tab {\n flex: 1;\n}\n.language-js, .language-wxml, .language-wxss, .language-json {\n display: none;\n}\n.js .language-js {\n display: block;\n}\n.json .language-json {\n display: block;\n}\n.wxml .language-wxml {\n display: block;\n}\n.wxss .language-wxss {\n display: block;\n}\npre + pre {\n margin-top: 0;\n} */\n", "", {"version":3,"sources":["/Users/chenyao/youzan/weapp/zanui-weapp/website/plugins/components/WxappPage.vue"],"names":[],"mappings":";AACA;EACE,gBAAgB;CACjB;AACD;EACE,cAAc;CACf;AACD;EACE,gBAAgB;CACjB;AACD;EACE,gBAAgB;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCI","file":"WxappPage.vue","sourcesContent":["\ncode.language-wxml[data-v-7a5a90c9]::after {\n content: 'WXML';\n}\ncode.language-js[data-v-7a5a90c9]::after {\n content: 'JS';\n}\ncode.language-wxss[data-v-7a5a90c9]::after {\n content: 'WXSS';\n}\ncode.language-json[data-v-7a5a90c9]::after {\n content: 'JSON';\n}\n\n/* .demo {\n margin-top: 15px;\n}\n.demo-code {\n height: 500px;\n overflow: auto;\n background-color: #f5f7fa;\n}\n.code-type-tabs {\n display: flex;\n justify-content: center;\n text-align: center;\n}\n.code-type-tab {\n flex: 1;\n}\n.language-js, .language-wxml, .language-wxss, .language-json {\n display: none;\n}\n.js .language-js {\n display: block;\n}\n.json .language-json {\n display: block;\n}\n.wxml .language-wxml {\n display: block;\n}\n.wxss .language-wxss {\n display: block;\n}\npre + pre {\n margin-top: 0;\n} */\n"],"sourceRoot":""}]); // exports /***/ }), /***/ "../../website/node_modules/css-loader/lib/css-base.js": /***/ (function(module, exports) { /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ // css base code, injected by the css-loader module.exports = function(useSourceMap) { var list = []; // return the list of modules as css string list.toString = function toString() { return this.map(function (item) { var content = cssWithMappingToString(item, useSourceMap); if(item[2]) { return "@media " + item[2] + "{" + content + "}"; } else { return content; } }).join(""); }; // import a list of modules into the list list.i = function(modules, mediaQuery) { if(typeof modules === "string") modules = [[null, modules, ""]]; var alreadyImportedModules = {}; for(var i = 0; i < this.length; i++) { var id = this[i][0]; if(typeof id === "number") alreadyImportedModules[id] = true; } for(i = 0; i < modules.length; i++) { var item = modules[i]; // skip already imported module // this implementation is not 100% perfect for weird media query combinations // when a module is imported multiple times with different media queries. // I hope this will never occur (Hey this way we have smaller bundles) if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { if(mediaQuery && !item[2]) { item[2] = mediaQuery; } else if(mediaQuery) { item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; } list.push(item); } } }; return list; }; function cssWithMappingToString(item, useSourceMap) { var content = item[1] || ''; var cssMapping = item[3]; if (!cssMapping) { return content; } if (useSourceMap && typeof btoa === 'function') { var sourceMapping = toComment(cssMapping); var sourceURLs = cssMapping.sources.map(function (source) { return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' }); return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); } return [content].join('\n'); } // Adapted from convert-source-map (MIT) function toComment(sourceMap) { // eslint-disable-next-line no-undef var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; return '/*# ' + data + ' */'; } /***/ }), /***/ "../../website/node_modules/vue-style-loader/index.js!../../website/node_modules/css-loader/index.js?{\"sourceMap\":true}!../.13.7.1@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7a5a90c9\",\"scoped\":true,\"hasInlineConfig\":false}!../.13.7.1@vue-loader/lib/selector.js?type=styles&index=0!../../website/plugins/components/WxappPage.vue": /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a