(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{1195:function(module,exports,__webpack_require__){var __WEBPACK_AMD_DEFINE_FACTORY__,__WEBPACK_AMD_DEFINE_RESULT__,definition;
/*!
  * Reqwest! A general purpose XHR connection manager
  * license MIT (c) Dustin Diaz 2015
  * https://github.com/ded/reqwest
  */definition=function(){var context=this,XHR2;if("window"in context)var doc=document,byTag="getElementsByTagName",head=doc[byTag]("head")[0];else try{XHR2=__webpack_require__(1196)}catch(t){throw new Error("Peer dependency `xhr2` required! Please npm install xhr2")}var httpsRe=/^http/,protocolRe=/(^\w+):\/\//,twoHundo=/^(20\d|1223)$/,readyState="readyState",contentType="Content-Type",requestedWith="X-Requested-With",uniqid=0,callbackPrefix="reqwest_"+ +new Date,lastValue,xmlHttpRequest="XMLHttpRequest",xDomainRequest="XDomainRequest",noop=function(){},isArray="function"==typeof Array.isArray?Array.isArray:function(t){return t instanceof Array},defaultHeaders={contentType:"application/x-www-form-urlencoded",requestedWith:xmlHttpRequest,accept:{"*":"text/javascript, text/html, application/xml, text/xml, */*",xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript",js:"application/javascript, text/javascript"}},xhr=function(t){if(!0===t.crossOrigin){var s=context[xmlHttpRequest]?new XMLHttpRequest:null;if(s&&"withCredentials"in s)return s;if(context[xDomainRequest])return new XDomainRequest;throw new Error("Browser does not support cross-origin requests")}return context[xmlHttpRequest]?new XMLHttpRequest:XHR2?new XHR2:new ActiveXObject("Microsoft.XMLHTTP")},globalSetupOptions={dataFilter:function(t){return t}};function succeed(t){var s=protocolRe.exec(t.url);return s=s&&s[1]||context.location.protocol,httpsRe.test(s)?twoHundo.test(t.request.status):!!t.request.response}function handleReadyState(t,s,e){return function(){return t._aborted?e(t.request):t._timedOut?e(t.request,"Request is aborted: timeout"):void(t.request&&4==t.request[readyState]&&(t.request.onreadystatechange=noop,succeed(t)?s(t.request):e(t.request)))}}function setHeaders(t,s){var e,n=s.headers||{};n.Accept=n.Accept||defaultHeaders.accept[s.type]||defaultHeaders.accept["*"];var a="undefined"!=typeof FormData&&s.data instanceof FormData;for(e in s.crossOrigin||n[requestedWith]||(n[requestedWith]=defaultHeaders.requestedWith),n[contentType]||a||(n[contentType]=s.contentType||defaultHeaders.contentType),n)n.hasOwnProperty(e)&&"setRequestHeader"in t&&t.setRequestHeader(e,n[e])}function setCredentials(t,s){void 0!==s.withCredentials&&void 0!==t.withCredentials&&(t.withCredentials=!!s.withCredentials)}function generalCallback(t){lastValue=t}function urlappend(t,s){return t+(/\?/.test(t)?"&":"?")+s}function handleJsonp(t,s,e,n){var a=uniqid++,i=t.jsonpCallback||"callback",l=t.jsonpCallbackName||reqwest.getcallbackPrefix(a),r=new RegExp("((^|\\?|&)"+i+")=([^&]+)"),o=n.match(r),v=doc.createElement("script"),c=0,_=-1!==navigator.userAgent.indexOf("MSIE 10.0");return o?"?"===o[3]?n=n.replace(r,"$1="+l):l=o[3]:n=urlappend(n,i+"="+l),context[l]=generalCallback,v.type="text/javascript",v.src=n,v.async=!0,void 0===v.onreadystatechange||_||(v.htmlFor=v.id="_reqwest_"+a),v.onload=v.onreadystatechange=function(){if(v[readyState]&&"complete"!==v[readyState]&&"loaded"!==v[readyState]||c)return!1;v.onload=v.onreadystatechange=null,v.onclick&&v.onclick(),s(lastValue),lastValue=void 0,head.removeChild(v),c=1},head.appendChild(v),{abort:function(){v.onload=v.onreadystatechange=null,e({},"Request is aborted: timeout",{}),lastValue=void 0,head.removeChild(v),c=1}}}function getRequest(t,s){var e,n=this.o,a=(n.method||"GET").toUpperCase(),i="string"==typeof n?n:n.url,l=!1!==n.processData&&n.data&&"string"!=typeof n.data?reqwest.toQueryString(n.data):n.data||null,r=!1;return"jsonp"!=n.type&&"GET"!=a||!l||(i=urlappend(i,l),l=null),"jsonp"==n.type?handleJsonp(n,t,s,i):((e=n.xhr&&n.xhr(n)||xhr(n)).open(a,i,!1!==n.async),setHeaders(e,n),setCredentials(e,n),context[xDomainRequest]&&e instanceof context[xDomainRequest]?(e.onload=t,e.onerror=s,e.onprogress=function(){},r=!0):e.onreadystatechange=handleReadyState(this,t,s),n.before&&n.before(e),r?setTimeout((function(){e.send(l)}),200):e.send(l),e)}function Reqwest(t,s){this.o=t,this.fn=s,init.apply(this,arguments)}function setType(t){if(null!==t)return t.match("json")?"json":t.match("javascript")?"js":t.match("text")?"html":t.match("xml")?"xml":void 0}function init(o,fn){this.url="string"==typeof o?o:o.url,this.timeout=null,this._fulfilled=!1,this._successHandler=function(){},this._fulfillmentHandlers=[],this._errorHandlers=[],this._completeHandlers=[],this._erred=!1,this._responseArgs={};var self=this;function complete(t){for(o.timeout&&clearTimeout(self.timeout),self.timeout=null;self._completeHandlers.length>0;)self._completeHandlers.shift()(t)}function success(resp){var type=o.type||resp&&setType(resp.getResponseHeader("Content-Type"));resp="jsonp"!==type?self.request:resp;var filteredResponse=globalSetupOptions.dataFilter(resp.responseText,type),r=filteredResponse;try{resp.responseText=r}catch(t){}if(r)switch(type){case"json":try{resp=context.JSON?context.JSON.parse(r):eval("("+r+")")}catch(t){return error(resp,"Could not parse JSON in response",t)}break;case"js":resp=eval(r);break;case"html":resp=r;break;case"xml":resp=resp.responseXML&&resp.responseXML.parseError&&resp.responseXML.parseError.errorCode&&resp.responseXML.parseError.reason?null:resp.responseXML}for(self._responseArgs.resp=resp,self._fulfilled=!0,fn(resp),self._successHandler(resp);self._fulfillmentHandlers.length>0;)resp=self._fulfillmentHandlers.shift()(resp);complete(resp)}function timedOut(){self._timedOut=!0,self.request.abort()}function error(t,s,e){for(t=self.request,self._responseArgs.resp=t,self._responseArgs.msg=s,self._responseArgs.t=e,self._erred=!0;self._errorHandlers.length>0;)self._errorHandlers.shift()(t,s,e);complete(t)}fn=fn||function(){},o.timeout&&(this.timeout=setTimeout((function(){timedOut()}),o.timeout)),o.success&&(this._successHandler=function(){o.success.apply(o,arguments)}),o.error&&this._errorHandlers.push((function(){o.error.apply(o,arguments)})),o.complete&&this._completeHandlers.push((function(){o.complete.apply(o,arguments)})),this.request=getRequest.call(this,success,error)}function reqwest(t,s){return new Reqwest(t,s)}function normalize(t){return t?t.replace(/\r?\n/g,"\r\n"):""}function serial(t,s){var e,n,a,i,l=t.name,r=t.tagName.toLowerCase(),o=function(t){t&&!t.disabled&&s(l,normalize(t.attributes.value&&t.attributes.value.specified?t.value:t.text))};if(!t.disabled&&l)switch(r){case"input":/reset|button|image|file/i.test(t.type)||(e=/checkbox/i.test(t.type),n=/radio/i.test(t.type),a=t.value,(!e&&!n||t.checked)&&s(l,normalize(e&&""===a?"on":a)));break;case"textarea":s(l,normalize(t.value));break;case"select":if("select-one"===t.type.toLowerCase())o(t.selectedIndex>=0?t.options[t.selectedIndex]:null);else for(i=0;t.length&&i<t.length;i++)t.options[i].selected&&o(t.options[i])}}function eachFormElement(){var t,s,e=this,n=function(t,s){var n,a,i;for(n=0;n<s.length;n++)for(i=t[byTag](s[n]),a=0;a<i.length;a++)serial(i[a],e)};for(s=0;s<arguments.length;s++)t=arguments[s],/input|select|textarea/i.test(t.tagName)&&serial(t,e),n(t,["input","select","textarea"])}function serializeQueryString(){return reqwest.toQueryString(reqwest.serializeArray.apply(null,arguments))}function serializeHash(){var t={};return eachFormElement.apply((function(s,e){s in t?(t[s]&&!isArray(t[s])&&(t[s]=[t[s]]),t[s].push(e)):t[s]=e}),arguments),t}function buildParams(t,s,e,n){var a,i,l,r=/\[\]$/;if(isArray(s))for(i=0;s&&i<s.length;i++)l=s[i],e||r.test(t)?n(t,l):buildParams(t+"["+("object"==typeof l?i:"")+"]",l,e,n);else if(s&&"[object Object]"===s.toString())for(a in s)buildParams(t+"["+a+"]",s[a],e,n);else n(t,s)}return Reqwest.prototype={abort:function(){this._aborted=!0,this.request.abort()},retry:function(){init.call(this,this.o,this.fn)},then:function(t,s){return t=t||function(){},s=s||function(){},this._fulfilled?this._responseArgs.resp=t(this._responseArgs.resp):this._erred?s(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):(this._fulfillmentHandlers.push(t),this._errorHandlers.push(s)),this},always:function(t){return this._fulfilled||this._erred?t(this._responseArgs.resp):this._completeHandlers.push(t),this},fail:function(t){return this._erred?t(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):this._errorHandlers.push(t),this},catch:function(t){return this.fail(t)}},reqwest.serializeArray=function(){var t=[];return eachFormElement.apply((function(s,e){t.push({name:s,value:e})}),arguments),t},reqwest.serialize=function(){if(0===arguments.length)return"";var t,s=Array.prototype.slice.call(arguments,0);return(t=s.pop())&&t.nodeType&&s.push(t)&&(t=null),t&&(t=t.type),("map"==t?serializeHash:"array"==t?reqwest.serializeArray:serializeQueryString).apply(null,s)},reqwest.toQueryString=function(t,s){var e,n,a=s||!1,i=[],l=encodeURIComponent,r=function(t,s){s="function"==typeof s?s():null==s?"":s,i[i.length]=l(t)+"="+l(s)};if(isArray(t))for(n=0;t&&n<t.length;n++)r(t[n].name,t[n].value);else for(e in t)t.hasOwnProperty(e)&&buildParams(e,t[e],a,r);return i.join("&").replace(/%20/g,"+")},reqwest.getcallbackPrefix=function(){return callbackPrefix},reqwest.compat=function(t,s){return t&&(t.type&&(t.method=t.type)&&delete t.type,t.dataType&&(t.type=t.dataType),t.jsonpCallback&&(t.jsonpCallbackName=t.jsonpCallback)&&delete t.jsonpCallback,t.jsonp&&(t.jsonpCallback=t.jsonp)),new Reqwest(t,s)},reqwest.ajaxSetup=function(t){for(var s in t=t||{})globalSetupOptions[s]=t[s]},reqwest},module.exports?module.exports=definition():void 0===(__WEBPACK_AMD_DEFINE_RESULT__="function"==typeof(__WEBPACK_AMD_DEFINE_FACTORY__=definition)?__WEBPACK_AMD_DEFINE_FACTORY__.call(exports,__webpack_require__,exports,module):__WEBPACK_AMD_DEFINE_FACTORY__)||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)},1196:function(t,s){},1275:function(t,s,e){},1276:function(t,s,e){},1277:function(t,s,e){},1289:function(t,s,e){t.exports=function(){"use strict";var t="@@InfiniteScroll",s=function(t){return t===window?Math.max(window.pageYOffset||0,document.documentElement.scrollTop):t.scrollTop},e=document.defaultView.getComputedStyle,n=function(t){return t===window?s(window):t.getBoundingClientRect().top+s(window)},a=function(t){for(var s=t.parentNode;s;){if("HTML"===s.tagName)return!0;if(11===s.nodeType)return!1;s=s.parentNode}return!1},i=function(){if(!this.binded){this.binded=!0;var t,s,n,a,i,r,o,v,c=this,_=c.el,d=_.getAttribute("infinite-scroll-throttle-delay"),p=200;d&&(p=Number(c.vm[d]||d),(isNaN(p)||p<0)&&(p=200)),c.throttleDelay=p,c.scrollEventTarget=function(t){for(var s=t;s&&"HTML"!==s.tagName&&"BODY"!==s.tagName&&1===s.nodeType;){var n=e(s).overflowY;if("scroll"===n||"auto"===n)return s;s=s.parentNode}return window}(_),c.scrollListener=(t=l.bind(c),s=c.throttleDelay,v=function(){t.apply(r,o),a=n},function(){if(r=this,o=arguments,n=Date.now(),i&&(clearTimeout(i),i=null),a){var t=s-(n-a);t<0?v():i=setTimeout((function(){v()}),t)}else v()}),c.scrollEventTarget.addEventListener("scroll",c.scrollListener),this.vm.$on("hook:beforeDestroy",(function(){c.scrollEventTarget.removeEventListener("scroll",c.scrollListener)}));var h=_.getAttribute("infinite-scroll-disabled"),m=!1;h&&(this.vm.$watch(h,(function(t){c.disabled=t,!t&&c.immediateCheck&&l.call(c)})),m=Boolean(c.vm[h])),c.disabled=m;var u=_.getAttribute("infinite-scroll-distance"),g=0;u&&(g=Number(c.vm[u]||u),isNaN(g)&&(g=0)),c.distance=g;var f=_.getAttribute("infinite-scroll-immediate-check"),C=!0;f&&(C=Boolean(c.vm[f])),c.immediateCheck=C,C&&l.call(c);var j=_.getAttribute("infinite-scroll-listen-for-event");j&&c.vm.$on(j,(function(){l.call(c)}))}},l=function(t){var e=this.scrollEventTarget,a=this.el,i=this.distance;if(!0===t||!this.disabled){var l=s(e),r=l+function(t){return t===window?document.documentElement.clientHeight:t.clientHeight}(e);(e===a?e.scrollHeight-r<=i:r+i>=n(a)-n(e)+a.offsetHeight+l)&&this.expression&&this.expression()}},r={bind:function(s,e,n){s[t]={el:s,vm:n.context,expression:e.value};var l=arguments;s[t].vm.$on("hook:mounted",(function(){s[t].vm.$nextTick((function(){a(s)&&i.call(s[t],l),s[t].bindTryCount=0,function e(){s[t].bindTryCount>10||(s[t].bindTryCount++,a(s)?i.call(s[t],l):setTimeout(e,50))}()}))}))},unbind:function(s){s&&s[t]&&s[t].scrollEventTarget&&s[t].scrollEventTarget.removeEventListener("scroll",s[t].scrollListener)}},o=function(t){t.directive("InfiniteScroll",r)};return window.Vue&&(window.infiniteScroll=r,Vue.use(o)),r.install=o,r}()},1406:function(t,s,e){"use strict";var n=e(1275);e.n(n).a},1407:function(t,s,e){"use strict";(function(t){e.d(s,"a",(function(){return w}));var n={itemsLimit:1e3};var a=void 0;function i(){i.init||(i.init=!0,a=-1!==function(){var t=window.navigator.userAgent,s=t.indexOf("MSIE ");if(s>0)return parseInt(t.substring(s+5,t.indexOf(".",s)),10);if(t.indexOf("Trident/")>0){var e=t.indexOf("rv:");return parseInt(t.substring(e+3,t.indexOf(".",e)),10)}var n=t.indexOf("Edge/");return n>0?parseInt(t.substring(n+5,t.indexOf(".",n)),10):-1}())}var l={render:function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})},staticRenderFns:[],_scopeId:"data-v-b329ee4c",name:"resize-observer",methods:{notify:function(){this.$emit("notify")},addResizeHandlers:function(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.notify),this._w===this.$el.offsetWidth&&this._h===this.$el.offsetHeight||this.notify()},removeResizeHandlers:function(){this._resizeObject&&this._resizeObject.onload&&(!a&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.notify),delete this._resizeObject.onload)}},mounted:function(){var t=this;i(),this.$nextTick((function(){t._w=t.$el.offsetWidth,t._h=t.$el.offsetHeight}));var s=document.createElement("object");this._resizeObject=s,s.setAttribute("style","display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"),s.setAttribute("aria-hidden","true"),s.setAttribute("tabindex",-1),s.onload=this.addResizeHandlers,s.type="text/html",a&&this.$el.appendChild(s),s.data="about:blank",a||this.$el.appendChild(s)},beforeDestroy:function(){this.removeResizeHandlers()}};var r={version:"0.4.4",install:function(t){t.component("resize-observer",l)}},o=null;"undefined"!=typeof window?o=window.Vue:void 0!==t&&(o=t.Vue),o&&o.use(r);var v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c=function(){function t(t,s){for(var e=0;e<s.length;e++){var n=s[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(s,e,n){return e&&t(s.prototype,e),n&&t(s,n),s}}(),_=function(t){if(Array.isArray(t)){for(var s=0,e=Array(t.length);s<t.length;s++)e[s]=t[s];return e}return Array.from(t)};var d=function(){function t(s,e,n){!function(t,s){if(!(t instanceof s))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=s,this.observer=null,this.frozen=!1,this.createObserver(e,n)}return c(t,[{key:"createObserver",value:function(t,s){var e,n,a,i,l,r,o,v=this;(this.observer&&this.destroyObserver(),this.frozen)||(this.options="function"==typeof(e=t)?{callback:e}:e,this.callback=this.options.callback,this.callback&&this.options.throttle&&(this.callback=(n=this.callback,a=this.options.throttle,i=void 0,l=void 0,r=void 0,(o=function(t){for(var s=arguments.length,e=Array(s>1?s-1:0),o=1;o<s;o++)e[o-1]=arguments[o];r=e,i&&t===l||(l=t,clearTimeout(i),i=setTimeout((function(){n.apply(void 0,[t].concat(_(r))),i=0}),a))})._clear=function(){clearTimeout(i)},o)),this.oldResult=void 0,this.observer=new IntersectionObserver((function(t){var s=t[0];if(v.callback){var e=s.isIntersecting&&s.intersectionRatio>=v.threshold;if(e===v.oldResult)return;v.oldResult=e,v.callback(e,s),e&&v.options.once&&(v.frozen=!0,v.destroyObserver())}}),this.options.intersection),s.context.$nextTick((function(){v.observer.observe(v.el)})))}},{key:"destroyObserver",value:function(){this.observer&&(this.observer.disconnect(),this.observer=null),this.callback&&this.callback._clear&&(this.callback._clear(),this.callback=null)}},{key:"threshold",get:function(){return this.options.intersection&&this.options.intersection.threshold||0}}]),t}();function p(t,s,e){var n=s.value;if("undefined"==typeof IntersectionObserver)console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var a=new d(t,n,e);t._vue_visibilityState=a}}var h={bind:p,update:function(t,s,e){var n=s.value;if(!function t(s,e){if(s===e)return!0;if("object"===(void 0===s?"undefined":v(s))){for(var n in s)if(!t(s[n],e[n]))return!1;return!0}return!1}(n,s.oldValue)){var a=t._vue_visibilityState;a?a.createObserver(n,e):p(t,{value:n},e)}},unbind:function(t){var s=t._vue_visibilityState;s&&(s.destroyObserver(),delete t._vue_visibilityState)}};var m={version:"0.4.3",install:function(t){t.directive("observe-visibility",h)}},u=null;"undefined"!=typeof window?u=window.Vue:void 0!==t&&(u=t.Vue),u&&u.use(m);var g="undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{};var f=function(t,s){return t(s={exports:{}},s.exports),s.exports}((function(t){var s,e;s=g,e=function(){var t=/(auto|scroll)/,s=function(t,e){return null===t.parentNode?e:s(t.parentNode,e.concat([t]))},e=function(t,s){return getComputedStyle(t,null).getPropertyValue(s)},n=function(s){return t.test(function(t){return e(t,"overflow")+e(t,"overflow-y")+e(t,"overflow-x")}(s))};return function(t){if(t instanceof HTMLElement||t instanceof SVGElement){for(var e=s(t.parentNode,[]),a=0;a<e.length;a+=1)if(n(e[a]))return e[a];return document.scrollingElement||document.documentElement}}},t.exports?t.exports=e():s.Scrollparent=e()})),C=!1;if("undefined"!=typeof window){C=!1;try{var j=Object.defineProperty({},"passive",{get:function(){C=!0}});window.addEventListener("test",null,j)}catch(t){}}var y={components:{ResizeObserver:l},directives:{ObserveVisibility:h},props:{items:{type:Array,required:!0},itemHeight:{type:[Number,String],default:null},minItemHeight:{type:[Number,String],default:null},heightField:{type:String,default:"height"},typeField:{type:String,default:"type"},buffer:{type:[Number,String],default:200},pageMode:{type:Boolean,default:!1},prerender:{type:[Number,String],default:0},emitUpdate:{type:Boolean,default:!1}},computed:{cssClass:function(){return{"page-mode":this.pageMode}},heights:function(){if(null===this.itemHeight){for(var t={"-1":{accumulator:0}},s=this.items,e=this.heightField,n=this.minItemHeight,a=0,i=void 0,l=0,r=s.length;l<r;l++)a+=i=s[l][e]||n,t[l]={accumulator:a,height:i};return t}}},beforeDestroy:function(){this.removeListeners()},methods:{getListenerTarget:function(){var t=f(this.$el);return t!==window.document.documentElement&&t!==window.document.body||(t=window),t},getScroll:function(){var t=this.$el,s=void 0;if(this.pageMode){var e=t.getBoundingClientRect(),n=-e.top,a=window.innerHeight;n<0&&(a+=n,n=0),n+a>e.height&&(a=e.height-n),s={top:n,bottom:n+a}}else s={top:t.scrollTop,bottom:t.scrollTop+t.clientHeight};return s},applyPageMode:function(){this.pageMode?this.addListeners():this.removeListeners()},addListeners:function(){this.listenerTarget=this.getListenerTarget(),this.listenerTarget.addEventListener("scroll",this.handleScroll,!!C&&{passive:!0}),this.listenerTarget.addEventListener("resize",this.handleResize)},removeListeners:function(){this.listenerTarget&&(this.listenerTarget.removeEventListener("scroll",this.handleScroll),this.listenerTarget.removeEventListener("resize",this.handleResize),this.listenerTarget=null)},scrollToItem:function(t){var s=void 0;s=null===this.itemHeight?t>0?this.heights[t-1].accumulator:0:t*this.itemHeight,this.scrollToPosition(s)},scrollToPosition:function(t){this.$el.scrollTop=t},itemsLimitError:function(){var t=this;throw setTimeout((function(){console.log("It seems the scroller element isn't scrolling, so it tries to render all the items at once.","Scroller:",t.$el),console.log("Make sure the scroller has a fixed height and 'overflow-y' set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.")})),new Error("Rendered items limit reached")}}},b={name:"VirtualScroller",mixins:[y],props:{renderers:{type:Object,default:null},keyField:{type:String,default:"id"},mainTag:{type:String,default:"div"},containerTag:{type:String,default:"div"},containerClass:{type:[String,Array,Object],default:null},contentTag:{type:String,default:"div"},contentClass:{type:[String,Array,Object],default:null},poolSize:{type:[Number,String],default:2e3},delayPreviousItems:{type:Boolean,default:!1}},data:function(){return{visibleItems:[],itemContainerStyle:null,itemsStyle:null,keysEnabled:!0}},watch:{items:{handler:function(){this.updateVisibleItems(!0)},deep:!0},pageMode:function(){this.applyPageMode(),this.updateVisibleItems(!0)},itemHeight:"setDirty"},created:function(){this.$_ready=!1,this.$_startIndex=0,this.$_oldScrollTop=null,this.$_oldScrollBottom=null,this.$_offsetTop=0,this.$_height=0,this.$_scrollDirty=!1,this.$_updateDirty=!1;var t=parseInt(this.prerender);t>0?(this.visibleItems=this.items.slice(0,t),this.$_length=this.visibleItems.length,this.$_endIndex=this.$_length-1,this.$_skip=!0):(this.$_endIndex=0,this.$_length=0,this.$_skip=!1)},mounted:function(){var t=this;this.applyPageMode(),this.$nextTick((function(){t.updateVisibleItems(!0),t.$_ready=!0}))},methods:{updateVisibleItems:function(){var t=this,s=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.$_updateDirty||(this.$_updateDirty=!0,this.$nextTick((function(){t.$_updateDirty=!1;var e=t.items.length,a=t.getScroll(),i=t.items,l=t.itemHeight,r=void 0,o=void 0;if(a){var v=-1,c=-1,_=parseInt(t.buffer),d=parseInt(t.poolSize),p=~~(a.top/d)*d-_,h=Math.ceil(a.bottom/d)*d+_;if(!s&&(p===t.$_oldScrollTop&&h===t.$_oldScrollBottom||t.$_skip))return void(t.$_skip=!1);if(t.$_oldScrollTop=p,t.$_oldScrollBottom=h,null===l){var m=t.heights,u=0,g=e-1,f=~~(e/2),C=void 0;do{C=f,m[f].accumulator<p?u=f:f<e-1&&m[f+1].accumulator>p&&(g=f),f=~~((u+g)/2)}while(f!==C);for(f<0&&(f=0),v=f,o=f>0?m[f-1].accumulator:0,r=m[e-1].accumulator,c=f;c<e&&m[c].accumulator<h;c++);-1===c?c=i.length-1:++c>e&&(c=e)}else v=~~(p/l),c=Math.ceil(h/l),v<0&&(v=0),c>e&&(c=e),o=v*l,r=e*l;c-v>n.itemsLimit&&t.itemsLimitError(),(s||t.$_startIndex!==v||t.$_endIndex!==c||t.$_offsetTop!==o||t.$_height!==r||t.$_length!==e)&&(t.keysEnabled=!(v>t.$_endIndex||c<t.$_startIndex),t.itemContainerStyle={height:r+"px"},t.itemsStyle={marginTop:o+"px"},t.delayPreviousItems?(t.visibleItems=i.slice(t.$_startIndex,c),t.$nextTick((function(){t.visibleItems=i.slice(v,c)}))):t.visibleItems=i.slice(v,c),t.emitUpdate&&t.$emit("update",v,c),t.$_startIndex=v,t.$_endIndex=c,t.$_length=e,t.$_offsetTop=o,t.$_height=r)}})))},setDirty:function(){this.$_oldScrollTop=null,this.$_oldScrollBottom=null},handleScroll:function(){var t=this;this.$_scrollDirty||(this.$_scrollDirty=!0,requestAnimationFrame((function(){t.$_scrollDirty=!1,t.updateVisibleItems()})))},handleResize:function(){this.$emit("resize"),this.$_ready&&this.updateVisibleItems()},handleVisibilityChange:function(t,s){var e=this;this.$_ready&&(t||0!==s.boundingClientRect.width||0!==s.boundingClientRect.height)&&(this.$emit("visible"),this.$nextTick((function(){e.updateVisibleItems()})))}}},x=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e(t.mainTag,{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.handleVisibilityChange,expression:"handleVisibilityChange"}],tag:"component",staticClass:"virtual-scroller",class:t.cssClass,on:{"&scroll":function(s){return t.handleScroll(s)}}},[t._t("before-container"),t._v(" "),e(t.containerTag,{ref:"itemContainer",tag:"component",staticClass:"item-container",class:t.containerClass,style:t.itemContainerStyle},[t._t("before-content"),t._v(" "),e(t.contentTag,{ref:"items",tag:"component",staticClass:"items",class:t.contentClass,style:t.itemsStyle},[t.renderers?t._l(t.visibleItems,(function(s,n){return e(t.renderers[s[t.typeField]],{key:t.keysEnabled&&s[t.keyField]||void 0,tag:"component",staticClass:"item",attrs:{item:s,"item-index":t.$_startIndex+n}})})):[t._l(t.visibleItems,(function(s,e){return t._t("default",null,{item:s,itemIndex:t.$_startIndex+e,itemKey:t.keysEnabled&&s[t.keyField]||void 0})}))]],2),t._v(" "),t._t("after-content")],2),t._v(" "),t._t("after-container"),t._v(" "),e("resize-observer",{on:{notify:t.handleResize}})],2)};x._withStripped=!0;var w=function(t,s,e,n,a,i,l,r){var o=("function"==typeof e?e.options:e)||{};o.__file="/home/akryum/Projects/vue-virtual-scroller/src/components/VirtualScroller.vue",o.render||(o.render=t.render,o.staticRenderFns=t.staticRenderFns,o._compiled=!0,a&&(o.functional=!0)),o._scopeId=n;var v=void 0;if(s&&(v=function(t){s.call(this,l(t))}),void 0!==v)if(o.functional){var c=o.render;o.render=function(t,s){return v.call(s),c(t,s)}}else{var _=o.beforeCreate;o.beforeCreate=_?[].concat(_,v):[v]}return o}({render:x,staticRenderFns:[]},(function(t){t&&t("data-v-3eef485a_0",{source:"\n.virtual-scroller[data-v-3eef485a]:not(.page-mode) {\n  overflow-y: auto;\n}\n.item-container[data-v-3eef485a] {\n  box-sizing: border-box;\n  width: 100%;\n  overflow: hidden;\n}\n.items[data-v-3eef485a] {\n  width: 100%;\n}\n",map:{version:3,sources:["/home/akryum/Projects/vue-virtual-scroller/src/components/VirtualScroller.vue"],names:[],mappings:";AA+TA;EACA,iBAAA;CACA;AAEA;EACA,uBAAA;EACA,YAAA;EACA,iBAAA;CACA;AAEA;EACA,YAAA;CACA",file:"VirtualScroller.vue",sourcesContent:['<template>\n  <component\n    v-observe-visibility="handleVisibilityChange"\n    :is="mainTag"\n    :class="cssClass"\n    class="virtual-scroller"\n    @scroll.passive="handleScroll"\n  >\n    <slot\n      name="before-container"\n    />\n    <component\n      ref="itemContainer"\n      :is="containerTag"\n      :class="containerClass"\n      :style="itemContainerStyle"\n      class="item-container"\n    >\n      <slot\n        name="before-content"\n      />\n      <component\n        ref="items"\n        :is="contentTag"\n        :class="contentClass"\n        :style="itemsStyle"\n        class="items"\n      >\n        <template v-if="renderers">\n          <component\n            v-for="(item, index) in visibleItems"\n            :key="keysEnabled && item[keyField] || undefined"\n            :is="renderers[item[typeField]]"\n            :item="item"\n            :item-index="$_startIndex + index"\n            class="item"\n          />\n        </template>\n        <template v-else>\n          <slot\n            v-for="(item, index) in visibleItems"\n            :item="item"\n            :item-index="$_startIndex + index"\n            :item-key="keysEnabled && item[keyField] || undefined"\n            class="item"\n          />\n        </template>\n      </component>\n      <slot\n        name="after-content"\n      />\n    </component>\n    <slot\n      name="after-container"\n    />\n    <resize-observer @notify="handleResize" />\n  </component>\n</template>\n\n<script>\nimport Scroller from \'../mixins/scroller\'\nimport config from \'../config\'\n\nexport default {\n  name: \'VirtualScroller\',\n\n  mixins: [\n    Scroller,\n  ],\n\n  props: {\n    renderers: {\n      type: Object,\n      default: null,\n    },\n    keyField: {\n      type: String,\n      default: \'id\',\n    },\n    mainTag: {\n      type: String,\n      default: \'div\',\n    },\n    containerTag: {\n      type: String,\n      default: \'div\',\n    },\n    containerClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n    contentTag: {\n      type: String,\n      default: \'div\',\n    },\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n    poolSize: {\n      type: [Number, String],\n      default: 2000,\n    },\n    delayPreviousItems: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      visibleItems: [],\n      itemContainerStyle: null,\n      itemsStyle: null,\n      keysEnabled: true,\n    }\n  },\n\n  watch: {\n    items: {\n      handler () {\n        this.updateVisibleItems(true)\n      },\n      deep: true,\n    },\n    pageMode () {\n      this.applyPageMode()\n      this.updateVisibleItems(true)\n    },\n    itemHeight: \'setDirty\',\n  },\n\n  created () {\n    this.$_ready = false\n    this.$_startIndex = 0\n    this.$_oldScrollTop = null\n    this.$_oldScrollBottom = null\n    this.$_offsetTop = 0\n    this.$_height = 0\n    this.$_scrollDirty = false\n    this.$_updateDirty = false\n\n    const prerender = parseInt(this.prerender)\n    if (prerender > 0) {\n      this.visibleItems = this.items.slice(0, prerender)\n      this.$_length = this.visibleItems.length\n      this.$_endIndex = this.$_length - 1\n      this.$_skip = true\n    } else {\n      this.$_endIndex = 0\n      this.$_length = 0\n      this.$_skip = false\n    }\n  },\n\n  mounted () {\n    this.applyPageMode()\n    this.$nextTick(() => {\n      this.updateVisibleItems(true)\n      this.$_ready = true\n    })\n  },\n\n  methods: {\n    updateVisibleItems (force = false) {\n      if (!this.$_updateDirty) {\n        this.$_updateDirty = true\n        this.$nextTick(() => {\n          this.$_updateDirty = false\n\n          const l = this.items.length\n          const scroll = this.getScroll()\n          const items = this.items\n          const itemHeight = this.itemHeight\n          let containerHeight, offsetTop\n          if (scroll) {\n            let startIndex = -1\n            let endIndex = -1\n\n            const buffer = parseInt(this.buffer)\n            const poolSize = parseInt(this.poolSize)\n            const scrollTop = ~~(scroll.top / poolSize) * poolSize - buffer\n            const scrollBottom = Math.ceil(scroll.bottom / poolSize) * poolSize + buffer\n\n            if (!force && ((scrollTop === this.$_oldScrollTop && scrollBottom === this.$_oldScrollBottom) || this.$_skip)) {\n              this.$_skip = false\n              return\n            } else {\n              this.$_oldScrollTop = scrollTop\n              this.$_oldScrollBottom = scrollBottom\n            }\n\n            // Variable height mode\n            if (itemHeight === null) {\n              const heights = this.heights\n              let h\n              let a = 0\n              let b = l - 1\n              let i = ~~(l / 2)\n              let oldI\n\n              // Searching for startIndex\n              do {\n                oldI = i\n                h = heights[i].accumulator\n                if (h < scrollTop) {\n                  a = i\n                } else if (i < l - 1 && heights[i + 1].accumulator > scrollTop) {\n                  b = i\n                }\n                i = ~~((a + b) / 2)\n              } while (i !== oldI)\n              i < 0 && (i = 0)\n              startIndex = i\n\n              // For containers style\n              offsetTop = i > 0 ? heights[i - 1].accumulator : 0\n              containerHeight = heights[l - 1].accumulator\n\n              // Searching for endIndex\n              for (endIndex = i; endIndex < l && heights[endIndex].accumulator < scrollBottom; endIndex++);\n              if (endIndex === -1) {\n                endIndex = items.length - 1\n              } else {\n                endIndex++\n                // Bounds\n                endIndex > l && (endIndex = l)\n              }\n            } else {\n              // Fixed height mode\n              startIndex = ~~(scrollTop / itemHeight)\n              endIndex = Math.ceil(scrollBottom / itemHeight)\n\n              // Bounds\n              startIndex < 0 && (startIndex = 0)\n              endIndex > l && (endIndex = l)\n\n              offsetTop = startIndex * itemHeight\n              containerHeight = l * itemHeight\n            }\n\n            if (endIndex - startIndex > config.itemsLimit) {\n              this.itemsLimitError()\n            }\n\n            if (\n              force ||\n              this.$_startIndex !== startIndex ||\n              this.$_endIndex !== endIndex ||\n              this.$_offsetTop !== offsetTop ||\n              this.$_height !== containerHeight ||\n              this.$_length !== l\n            ) {\n              this.keysEnabled = !(startIndex > this.$_endIndex || endIndex < this.$_startIndex)\n\n              this.itemContainerStyle = {\n                height: containerHeight + \'px\',\n              }\n              this.itemsStyle = {\n                marginTop: offsetTop + \'px\',\n              }\n\n              if (this.delayPreviousItems) {\n                // Add next items\n                this.visibleItems = items.slice(this.$_startIndex, endIndex)\n                // Remove previous items\n                this.$nextTick(() => {\n                  this.visibleItems = items.slice(startIndex, endIndex)\n                })\n              } else {\n                this.visibleItems = items.slice(startIndex, endIndex)\n              }\n\n              this.emitUpdate && this.$emit(\'update\', startIndex, endIndex)\n\n              this.$_startIndex = startIndex\n              this.$_endIndex = endIndex\n              this.$_length = l\n              this.$_offsetTop = offsetTop\n              this.$_height = containerHeight\n            }\n          }\n        })\n      }\n    },\n\n    setDirty () {\n      this.$_oldScrollTop = null\n      this.$_oldScrollBottom = null\n    },\n\n    handleScroll () {\n      if (!this.$_scrollDirty) {\n        this.$_scrollDirty = true\n        requestAnimationFrame(() => {\n          this.$_scrollDirty = false\n          this.updateVisibleItems()\n        })\n      }\n    },\n\n    handleResize () {\n      this.$emit(\'resize\')\n      this.$_ready && this.updateVisibleItems()\n    },\n\n    handleVisibilityChange (isVisible, entry) {\n      if (this.$_ready && (isVisible || entry.boundingClientRect.width !== 0 || entry.boundingClientRect.height !== 0)) {\n        this.$emit(\'visible\')\n        this.$nextTick(() => {\n          this.updateVisibleItems()\n        })\n      }\n    },\n  },\n}\n<\/script>\n\n<style scoped>\n.virtual-scroller:not(.page-mode) {\n  overflow-y: auto;\n}\n\n.item-container {\n  box-sizing: border-box;\n  width: 100%;\n  overflow: hidden;\n}\n\n.items {\n  width: 100%;\n}\n</style>\n']},media:void 0})}),b,"data-v-3eef485a",!1,0,(function t(){var s=document.head||document.getElementsByTagName("head")[0],e=t.styles||(t.styles={}),n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,a){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var i=n?a.media||"default":t,l=e[i]||(e[i]={ids:[],parts:[],element:void 0});if(!l.ids.includes(t)){var r=a.source,o=l.ids.length;if(l.ids.push(t),n&&(l.element=l.element||document.querySelector("style[data-group="+i+"]")),!l.element){var v=l.element=document.createElement("style");v.type="text/css",a.media&&v.setAttribute("media",a.media),n&&(v.setAttribute("data-group",i),v.setAttribute("data-next-index","0")),s.appendChild(v)}if(n&&(o=parseInt(l.element.getAttribute("data-next-index")),l.element.setAttribute("data-next-index",o+1)),l.element.styleSheet)l.parts.push(r),l.element.styleSheet.cssText=l.parts.filter(Boolean).join("\n");else{var c=document.createTextNode(r),_=l.element.childNodes;_[o]&&l.element.removeChild(_[o]),_.length?l.element.insertBefore(c,_[o]):l.element.appendChild(c)}}}}})),I=0,k={name:"RecycleList",mixins:[y],props:{itemHeight:{type:Number,default:null},keyField:{type:String,default:null}},data:function(){return{pool:[],totalHeight:0}},watch:{items:function(){this.updateVisibleItems(!0)},pageMode:function(){this.applyPageMode(),this.updateVisibleItems(!1)},heights:{handler:function(){this.updateVisibleItems(!1)},deep:!0}},created:function(){this.$_ready=!1,this.$_startIndex=0,this.$_endIndex=0,this.$_views=new Map,this.$_unusedViews=new Map,this.$_scrollDirty=!1},mounted:function(){var t=this;this.applyPageMode(),this.$nextTick((function(){t.updateVisibleItems(!0),t.$_ready=!0}))},methods:{addView:function(t,s,e,n,a){var i={item:e,top:0},l={id:I++,index:s,used:!0,key:n,type:a};return Object.defineProperty(i,"nr",{configurable:!1,value:l}),t.push(i),i},unuseView:function(t){var s=arguments.length>1&&void 0!==arguments[1]&&arguments[1],e=this.$_unusedViews,n=t.nr.type,a=e.get(n);a||(a=[],e.set(n,a)),a.push(t),s||(t.nr.used=!1,t.top=-9999,this.$_views.delete(t.nr.key))},handleResize:function(){this.$emit("resize"),this.$_ready&&this.updateVisibleItems(!1)},handleScroll:function(t){var s=this;this.$_scrollDirty||(this.$_scrollDirty=!0,requestAnimationFrame((function(){s.$_scrollDirty=!1,s.updateVisibleItems(!1).continuous||(clearTimeout(s.$_refreshTimout),s.$_refreshTimout=setTimeout(s.handleScroll,100))})))},handleVisibilityChange:function(t,s){var e=this;this.$_ready&&(t||0!==s.boundingClientRect.width||0!==s.boundingClientRect.height?(this.$emit("visible"),requestAnimationFrame((function(){e.updateVisibleItems(!1)}))):this.$emit("hidden"))},updateVisibleItems:function(t){var s=this.getScroll(),e=parseInt(this.buffer);s.top-=e,s.bottom+=e;var a=this.itemHeight,i=this.typeField,l=this.keyField,r=this.items,o=r.length,v=this.heights,c=this.$_views,_=this.$_unusedViews,d=this.pool,p=void 0,h=void 0,m=void 0;if(o)if(null===a){var u=0,g=o-1,f=~~(o/2),C=void 0;do{C=f,v[f].accumulator<s.top?u=f:f<o-1&&v[f+1].accumulator>s.top&&(g=f),f=~~((u+g)/2)}while(f!==C);for(f<0&&(f=0),p=f,m=v[o-1].accumulator,h=f;h<o&&v[h].accumulator<s.bottom;h++);-1===h?h=r.length-1:++h>o&&(h=o)}else(p=~~(s.top/a))<0&&(p=0),(h=Math.ceil(s.bottom/a))>o&&(h=o),m=o*a;else p=h=m=0;h-p>n.itemsLimit&&this.itemsLimitError(),this.totalHeight=m;var j=void 0,y=p<=this.$_endIndex&&h>=this.$_startIndex,b=void 0;if(this.$_continuous!==y){if(y){c.clear(),_.clear();for(var x=0,w=d.length;x<w;x++)j=d[x],this.unuseView(j)}this.$_continuous=y}else if(y)for(var I=0,k=d.length;I<k;I++)(j=d[I]).nr.used&&(t&&(j.nr.index=r.findIndex((function(t){return l?t[l]===j.item[l]:t===j.item}))),(-1===j.nr.index||j.nr.index<p||j.nr.index>h)&&this.unuseView(j));y||(b=new Map);for(var A=void 0,T=void 0,S=void 0,D=void 0,$=p;$<h;$++){A=r[$];var L=l?A[l]:A;j=c.get(L),a||v[$].height?(j?j.nr.used=!0:(T=A[i],y?(S=_.get(T))&&S.length?((j=S.pop()).item=A,j.nr.used=!0,j.nr.index=$,j.nr.key=L,j.nr.type=T):j=this.addView(d,$,A,L,T):(S=_.get(T),D=b.get(T)||0,S&&D<S.length?((j=S[D]).item=A,j.nr.used=!0,j.nr.index=$,j.nr.key=L,j.nr.type=T,b.set(T,D+1)):(j=this.addView(d,$,A,L,T),this.unuseView(j,!0)),D++),c.set(L,j)),j.top=null===a?v[$-1].accumulator:$*a):j&&this.unuseView(j)}return this.$_startIndex=p,this.$_endIndex=h,this.emitUpdate&&this.$emit("update",p,h),{continuous:y}}}},A=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.handleVisibilityChange,expression:"handleVisibilityChange"}],staticClass:"recycle-list",class:t.cssClass,on:{"&scroll":function(s){return t.handleScroll(s)}}},[t._t("before-container"),t._v(" "),e("div",{ref:"wrapper",staticClass:"item-wrapper",style:{height:t.totalHeight+"px"}},t._l(t.pool,(function(s){return e("div",{key:s.nr.id,staticClass:"item-view",style:{transform:"translateY("+s.top+"px)"}},[t._t("default",null,{item:s.item,index:s.nr.index,active:s.nr.used})],2)}))),t._v(" "),t._t("after-container"),t._v(" "),e("resize-observer",{on:{notify:t.handleResize}})],2)};A._withStripped=!0;var T=function(t,s,e,n,a,i,l,r){var o=("function"==typeof e?e.options:e)||{};o.__file="/home/akryum/Projects/vue-virtual-scroller/src/components/RecycleList.vue",o.render||(o.render=t.render,o.staticRenderFns=t.staticRenderFns,o._compiled=!0,a&&(o.functional=!0)),o._scopeId=n;var v=void 0;if(s&&(v=function(t){s.call(this,l(t))}),void 0!==v)if(o.functional){var c=o.render;o.render=function(t,s){return v.call(s),c(t,s)}}else{var _=o.beforeCreate;o.beforeCreate=_?[].concat(_,v):[v]}return o}({render:A,staticRenderFns:[]},(function(t){t&&t("data-v-e814ad22_0",{source:"\n.recycle-list[data-v-e814ad22]:not(.page-mode) {\n  overflow-y: auto;\n}\n.item-wrapper[data-v-e814ad22] {\n  box-sizing: border-box;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n.item-view[data-v-e814ad22] {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  will-change: transform;\n}\n",map:{version:3,sources:["/home/akryum/Projects/vue-virtual-scroller/src/components/RecycleList.vue"],names:[],mappings:";AAgXA;EACA,iBAAA;CACA;AAEA;EACA,uBAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;CACA;AAEA;EACA,YAAA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,uBAAA;CACA",file:"RecycleList.vue",sourcesContent:['<template>\n  <div\n    v-observe-visibility="handleVisibilityChange"\n    :class="cssClass"\n    class="recycle-list"\n    @scroll.passive="handleScroll"\n  >\n    <slot\n      name="before-container"\n    />\n\n    <div\n      ref="wrapper"\n      :style="{ height: totalHeight + \'px\' }"\n      class="item-wrapper"\n    >\n      <div\n        v-for="view of pool"\n        :key="view.nr.id"\n        :style="{ transform: \'translateY(\' + view.top + \'px)\' }"\n        class="item-view"\n      >\n        <slot\n          :item="view.item"\n          :index="view.nr.index"\n          :active="view.nr.used"\n        />\n      </div>\n    </div>\n\n    <slot\n      name="after-container"\n    />\n\n    <resize-observer @notify="handleResize" />\n  </div>\n</template>\n\n<script>\nimport Scroller from \'../mixins/scroller\'\nimport config from \'../config\'\n\nlet uid = 0\n\nexport default {\n  name: \'RecycleList\',\n\n  mixins: [\n    Scroller,\n  ],\n\n  props: {\n    itemHeight: {\n      type: Number,\n      default: null,\n    },\n    keyField: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      pool: [],\n      totalHeight: 0,\n    }\n  },\n\n  watch: {\n    items () {\n      this.updateVisibleItems(true)\n    },\n    pageMode () {\n      this.applyPageMode()\n      this.updateVisibleItems(false)\n    },\n    heights: {\n      handler () {\n        this.updateVisibleItems(false)\n      },\n      deep: true,\n    },\n  },\n\n  created () {\n    this.$_ready = false\n    this.$_startIndex = 0\n    this.$_endIndex = 0\n    this.$_views = new Map()\n    this.$_unusedViews = new Map()\n    this.$_scrollDirty = false\n\n    // TODO prerender\n  },\n\n  mounted () {\n    this.applyPageMode()\n    this.$nextTick(() => {\n      this.updateVisibleItems(true)\n      this.$_ready = true\n    })\n  },\n\n  methods: {\n    addView (pool, index, item, key, type) {\n      const view = {\n        item,\n        top: 0,\n      }\n      const nonReactive = {\n        id: uid++,\n        index,\n        used: true,\n        key,\n        type,\n      }\n      Object.defineProperty(view, \'nr\', {\n        configurable: false,\n        value: nonReactive,\n      })\n      pool.push(view)\n      return view\n    },\n\n    unuseView (view, fake = false) {\n      const unusedViews = this.$_unusedViews\n      const type = view.nr.type\n      let unusedPool = unusedViews.get(type)\n      if (!unusedPool) {\n        unusedPool = []\n        unusedViews.set(type, unusedPool)\n      }\n      unusedPool.push(view)\n      if (!fake) {\n        view.nr.used = false\n        view.top = -9999\n        this.$_views.delete(view.nr.key)\n      }\n    },\n\n    handleResize () {\n      this.$emit(\'resize\')\n      if (this.$_ready) this.updateVisibleItems(false)\n    },\n\n    handleScroll (event) {\n      if (!this.$_scrollDirty) {\n        this.$_scrollDirty = true\n        requestAnimationFrame(() => {\n          this.$_scrollDirty = false\n          const { continuous } = this.updateVisibleItems(false)\n\n          // It seems sometimes chrome doesn\'t fire scroll event :/\n          // When non continous scrolling is ending, we force a refresh\n          if (!continuous) {\n            clearTimeout(this.$_refreshTimout)\n            this.$_refreshTimout = setTimeout(this.handleScroll, 100)\n          }\n        })\n      }\n    },\n\n    handleVisibilityChange (isVisible, entry) {\n      if (this.$_ready) {\n        if (isVisible || entry.boundingClientRect.width !== 0 || entry.boundingClientRect.height !== 0) {\n          this.$emit(\'visible\')\n          requestAnimationFrame(() => {\n            this.updateVisibleItems(false)\n          })\n        } else {\n          this.$emit(\'hidden\')\n        }\n      }\n    },\n\n    updateVisibleItems (checkItem) {\n      const scroll = this.getScroll()\n      const buffer = parseInt(this.buffer)\n      scroll.top -= buffer\n      scroll.bottom += buffer\n\n      const itemHeight = this.itemHeight\n      const typeField = this.typeField\n      const keyField = this.keyField\n      const items = this.items\n      const count = items.length\n      const heights = this.heights\n      const views = this.$_views\n      let unusedViews = this.$_unusedViews\n      const pool = this.pool\n      let startIndex, endIndex\n      let totalHeight\n\n      if (!count) {\n        startIndex = endIndex = totalHeight = 0\n      } else {\n        // Variable height mode\n        if (itemHeight === null) {\n          let h\n          let a = 0\n          let b = count - 1\n          let i = ~~(count / 2)\n          let oldI\n\n          // Searching for startIndex\n          do {\n            oldI = i\n            h = heights[i].accumulator\n            if (h < scroll.top) {\n              a = i\n            } else if (i < count - 1 && heights[i + 1].accumulator > scroll.top) {\n              b = i\n            }\n            i = ~~((a + b) / 2)\n          } while (i !== oldI)\n          i < 0 && (i = 0)\n          startIndex = i\n\n          // For container style\n          totalHeight = heights[count - 1].accumulator\n\n          // Searching for endIndex\n          for (endIndex = i; endIndex < count && heights[endIndex].accumulator < scroll.bottom; endIndex++);\n          if (endIndex === -1) {\n            endIndex = items.length - 1\n          } else {\n            endIndex++\n            // Bounds\n            endIndex > count && (endIndex = count)\n          }\n        } else {\n          // Fixed height mode\n          startIndex = ~~(scroll.top / itemHeight)\n          endIndex = Math.ceil(scroll.bottom / itemHeight)\n\n          // Bounds\n          startIndex < 0 && (startIndex = 0)\n          endIndex > count && (endIndex = count)\n\n          totalHeight = count * itemHeight\n        }\n      }\n\n      if (endIndex - startIndex > config.itemsLimit) {\n        this.itemsLimitError()\n      }\n\n      this.totalHeight = totalHeight\n\n      let view\n\n      const continuous = startIndex <= this.$_endIndex && endIndex >= this.$_startIndex\n      let unusedIndex\n\n      if (this.$_continuous !== continuous) {\n        if (continuous) {\n          views.clear()\n          unusedViews.clear()\n          for (let i = 0, l = pool.length; i < l; i++) {\n            view = pool[i]\n            this.unuseView(view)\n          }\n        }\n        this.$_continuous = continuous\n      } else if (continuous) {\n        for (let i = 0, l = pool.length; i < l; i++) {\n          view = pool[i]\n          if (view.nr.used) {\n            // Update view item index\n            if (checkItem) {\n              view.nr.index = items.findIndex(\n                item => keyField ? item[keyField] === view.item[keyField] : item === view.item\n              )\n            }\n\n            // Check if index is still in visible range\n            if (\n              view.nr.index === -1 ||\n              view.nr.index < startIndex ||\n              view.nr.index > endIndex\n            ) {\n              this.unuseView(view)\n            }\n          }\n        }\n      }\n\n      if (!continuous) {\n        unusedIndex = new Map()\n      }\n\n      let item, type, unusedPool\n      let v\n      for (let i = startIndex; i < endIndex; i++) {\n        item = items[i]\n        const key = keyField ? item[keyField] : item\n        view = views.get(key)\n\n        if (!itemHeight && !heights[i].height) {\n          if (view) this.unuseView(view)\n          continue\n        }\n\n        // No view assigned to item\n        if (!view) {\n          type = item[typeField]\n\n          if (continuous) {\n            unusedPool = unusedViews.get(type)\n            // Reuse existing view\n            if (unusedPool && unusedPool.length) {\n              view = unusedPool.pop()\n              view.item = item\n              view.nr.used = true\n              view.nr.index = i\n              view.nr.key = key\n              view.nr.type = type\n            } else {\n              view = this.addView(pool, i, item, key, type)\n            }\n          } else {\n            unusedPool = unusedViews.get(type)\n            v = unusedIndex.get(type) || 0\n            // Use existing view\n            // We don\'t care if they are already used\n            // because we are not in continous scrolling\n            if (unusedPool && v < unusedPool.length) {\n              view = unusedPool[v]\n              view.item = item\n              view.nr.used = true\n              view.nr.index = i\n              view.nr.key = key\n              view.nr.type = type\n              unusedIndex.set(type, v + 1)\n            } else {\n              view = this.addView(pool, i, item, key, type)\n              this.unuseView(view, true)\n            }\n            v++\n          }\n          views.set(key, view)\n        } else {\n          view.nr.used = true\n        }\n\n        // Update position\n        if (itemHeight === null) {\n          view.top = heights[i - 1].accumulator\n        } else {\n          view.top = i * itemHeight\n        }\n      }\n\n      this.$_startIndex = startIndex\n      this.$_endIndex = endIndex\n\n      this.emitUpdate && this.$emit(\'update\', startIndex, endIndex)\n\n      return {\n        continuous,\n      }\n    },\n  },\n}\n<\/script>\n\n<style scoped>\n.recycle-list:not(.page-mode) {\n  overflow-y: auto;\n}\n\n.item-wrapper {\n  box-sizing: border-box;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.item-view {\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  will-change: transform;\n}\n</style>\n']},media:void 0})}),k,"data-v-e814ad22",!1,0,(function t(){var s=document.head||document.getElementsByTagName("head")[0],e=t.styles||(t.styles={}),n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,a){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var i=n?a.media||"default":t,l=e[i]||(e[i]={ids:[],parts:[],element:void 0});if(!l.ids.includes(t)){var r=a.source,o=l.ids.length;if(l.ids.push(t),n&&(l.element=l.element||document.querySelector("style[data-group="+i+"]")),!l.element){var v=l.element=document.createElement("style");v.type="text/css",a.media&&v.setAttribute("media",a.media),n&&(v.setAttribute("data-group",i),v.setAttribute("data-next-index","0")),s.appendChild(v)}if(n&&(o=parseInt(l.element.getAttribute("data-next-index")),l.element.setAttribute("data-next-index",o+1)),l.element.styleSheet)l.parts.push(r),l.element.styleSheet.cssText=l.parts.filter(Boolean).join("\n");else{var c=document.createTextNode(r),_=l.element.childNodes;_[o]&&l.element.removeChild(_[o]),_.length?l.element.insertBefore(c,_[o]):l.element.appendChild(c)}}}}}));var S={version:"0.12.2",install:function(t,s){var e=Object.assign({},{installComponents:!0,componentsPrefix:""},s);for(var a in e)void 0!==e[a]&&(n[a]=e[a]);e.installComponents&&function(t,s){t.component(s+"virtual-scroller",w),t.component(s+"recycle-list",T)}(t,e.componentsPrefix)}},D=null;"undefined"!=typeof window?D=window.Vue:void 0!==t&&(D=t.Vue),D&&D.use(S)}).call(this,e(69))},1408:function(t,s,e){"use strict";var n=e(1276);e.n(n).a},1409:function(t,s,e){"use strict";var n=e(1277);e.n(n).a},1433:function(t,s,e){"use strict";e.r(s);var n=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <a-list itemLayout="horizontal" :dataSource="data">\n    <a-list-item slot="renderItem" slot-scope="item, index">\n      <a-list-item-meta description="Ant Design, a design language for background applications, is refined by Ant UED Team">\n        <a slot="title" href="https://www.antdv.com/">{{item.title}}</a>\n        <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>\n      </a-list-item-meta>\n    </a-list-item>\n  </a-list>\n',script:"\n  const data = [\n    {\n      title: 'Ant Design Title 1',\n    },\n    {\n      title: 'Ant Design Title 2',\n    },\n    {\n      title: 'Ant Design Title 3',\n    },\n    {\n      title: 'Ant Design Title 4',\n    },\n  ];\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n",style:"",us:"\n#### Basic list\nBasic list.\n",cn:"\n#### 基础列表\n基础列表。\n",sourceCode:'<template>\n  <a-list itemLayout="horizontal" :dataSource="data">\n    <a-list-item slot="renderItem" slot-scope="item, index">\n      <a-list-item-meta\n        description="Ant Design, a design language for background applications, is refined by Ant UED Team"\n      >\n        <a slot="title" href="https://www.antdv.com/">{{item.title}}</a>\n        <a-avatar\n          slot="avatar"\n          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"\n        />\n      </a-list-item-meta>\n    </a-list-item>\n  </a-list>\n</template>\n<script>\n  const data = [\n    {\n      title: \'Ant Design Title 1\',\n    },\n    {\n      title: \'Ant Design Title 2\',\n    },\n    {\n      title: \'Ant Design Title 3\',\n    },\n    {\n      title: \'Ant Design Title 4\',\n    },\n  ];\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n<\/script>\n<style></style>\n'}}},[e("template",{slot:"component"},[e("a-list",{attrs:{itemLayout:"horizontal",dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[e("a-list-item-meta",{attrs:{description:"Ant Design, a design language for background applications, is refined by Ant UED Team"}},[e("a",{attrs:{slot:"title",href:"https://www.antdv.com/"},slot:"title"},[t._v(t._s(s.title))]),t._v(" "),e("a-avatar",{attrs:{slot:"avatar",src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"},slot:"avatar"})],1)],1)}}])})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"基础列表"}},[t._v("基础列表 "),e("a",{staticClass:"anchor",attrs:{href:"#基础列表"}},[t._v("#")])]),t._v(" "),e("p",[t._v("基础列表。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Basic-list"}},[t._v("Basic list "),e("a",{staticClass:"anchor",attrs:{href:"#Basic-list"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Basic list.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("itemLayout")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"horizontal"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v("\n        "),e("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"Ant Design, a design language for background applications, is refined by Ant UED Team"')]),t._v("\n      >")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"https://www.antdv.com/"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item.title"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-avatar")]),t._v("\n          "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"avatar"')]),t._v("\n          "),e("span",{staticClass:"hljs-attr"},[t._v("src")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"')]),t._v("\n        />")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Ant Design Title 1'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Ant Design Title 2'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Ant Design Title 3'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Ant Design Title 4'")]),t._v(",\n    },\n  ];\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        data,\n      };\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};n._withStripped=!0;var a=[{title:"Ant Design Title 1"},{title:"Ant Design Title 2"},{title:"Ant Design Title 3"},{title:"Ant Design Title 4"}],i={data:function(){return{data:a}}},l=e(31),r=Object(l.a)(i,n,[],!1,null,null,null);r.options.__file="components/list/demo/basic.md";var o=r.exports,v=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <a-list :grid="{ gutter: 16, column: 4 }" :dataSource="data">\n    <a-list-item slot="renderItem" slot-scope="item, index">\n      <a-card :title="item.title">Card content</a-card>\n    </a-list-item>\n  </a-list>\n',script:"\n  const data = [\n    {\n      title: 'Title 1',\n    },\n    {\n      title: 'Title 2',\n    },\n    {\n      title: 'Title 3',\n    },\n    {\n      title: 'Title 4',\n    },\n  ];\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n",style:"",us:"\n#### Grid\nCreating a grid list by setting the `grid` property of List\n",cn:"\n#### 栅格列表\n可以通过设置 `List` 的 `grid` 属性来实现栅格列表，`column` 可设置期望显示的列数。\n",sourceCode:'<template>\n  <a-list :grid="{ gutter: 16, column: 4 }" :dataSource="data">\n    <a-list-item slot="renderItem" slot-scope="item, index">\n      <a-card :title="item.title">Card content</a-card>\n    </a-list-item>\n  </a-list>\n</template>\n<script>\n  const data = [\n    {\n      title: \'Title 1\',\n    },\n    {\n      title: \'Title 2\',\n    },\n    {\n      title: \'Title 3\',\n    },\n    {\n      title: \'Title 4\',\n    },\n  ];\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n<\/script>\n<style></style>\n'}}},[e("template",{slot:"component"},[e("a-list",{attrs:{grid:{gutter:16,column:4},dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[e("a-card",{attrs:{title:s.title}},[t._v("Card content")])],1)}}])})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"栅格列表"}},[t._v("栅格列表 "),e("a",{staticClass:"anchor",attrs:{href:"#栅格列表"}},[t._v("#")])]),t._v(" "),e("p",[t._v("可以通过设置 "),e("code",[t._v("List")]),t._v(" 的 "),e("code",[t._v("grid")]),t._v(" 属性来实现栅格列表，"),e("code",[t._v("column")]),t._v(" 可设置期望显示的列数。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Grid"}},[t._v("Grid "),e("a",{staticClass:"anchor",attrs:{href:"#Grid"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Creating a grid list by setting the "),e("code",[t._v("grid")]),t._v(" property of List")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":grid")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"{ gutter: 16, column: 4 }"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-card")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.title"')]),t._v(">")]),t._v("Card content"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-card")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 1'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 2'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 3'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 4'")]),t._v(",\n    },\n  ];\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        data,\n      };\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};v._withStripped=!0;var c=[{title:"Title 1"},{title:"Title 2"},{title:"Title 3"},{title:"Title 4"}],_={data:function(){return{data:c}}},d=Object(l.a)(_,v,[],!1,null,null,null);d.options.__file="components/list/demo/grid.md";var p=d.exports,h=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <div class="demo-infinite-container" v-infinite-scroll="handleInfiniteOnLoad" :infinite-scroll-disabled="busy" :infinite-scroll-distance="10">\n    <a-list :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">\n        <a-list-item-meta :description="item.email">\n          <a slot="title" :href="item.href">{{item.name.last}}</a>\n          <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>\n        </a-list-item-meta>\n        <div>Content</div>\n      </a-list-item>\n      <div v-if="loading && !busy" class="demo-loading-container">\n        <a-spin/>\n      </div>\n    </a-list>\n  </div>\n',script:"\n  import reqwest from 'reqwest';\n  import infiniteScroll from 'vue-infinite-scroll';\n  const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';\n  export default {\n    directives: { infiniteScroll },\n    data() {\n      return {\n        data: [],\n        loading: false,\n        busy: false,\n      };\n    },\n    beforeMount() {\n      this.fetchData(res => {\n        this.data = res.results;\n      });\n    },\n    methods: {\n      fetchData(callback) {\n        reqwest({\n          url: fakeDataUrl,\n          type: 'json',\n          method: 'get',\n          contentType: 'application/json',\n          success: res => {\n            callback(res);\n          },\n        });\n      },\n      handleInfiniteOnLoad() {\n        const data = this.data;\n        this.loading = true;\n        if (data.length > 14) {\n          this.$message.warning('Infinite List loaded all');\n          this.busy = true;\n          this.loading = false;\n          return;\n        }\n        this.fetchData(res => {\n          this.data = data.concat(res.results);\n          this.loading = false;\n        });\n      },\n    },\n  };\n",style:"\n  .demo-infinite-container {\n    border: 1px solid #e8e8e8;\n    border-radius: 4px;\n    overflow: auto;\n    padding: 8px 24px;\n    height: 300px;\n  }\n  .demo-loading-container {\n    position: absolute;\n    bottom: 40px;\n    width: 100%;\n    text-align: center;\n  }\n",us:"\n#### Scrolling loaded\nThe example of infinite load with [vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll).\n",cn:"\n#### 滚动加载\n结合 [vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll) 实现滚动自动加载列表。\n",sourceCode:'<template>\n  <div\n    class="demo-infinite-container"\n    v-infinite-scroll="handleInfiniteOnLoad"\n    :infinite-scroll-disabled="busy"\n    :infinite-scroll-distance="10"\n  >\n    <a-list :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">\n        <a-list-item-meta :description="item.email">\n          <a slot="title" :href="item.href">{{item.name.last}}</a>\n          <a-avatar\n            slot="avatar"\n            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"\n          />\n        </a-list-item-meta>\n        <div>Content</div>\n      </a-list-item>\n      <div v-if="loading && !busy" class="demo-loading-container">\n        <a-spin />\n      </div>\n    </a-list>\n  </div>\n</template>\n<script>\n  import reqwest from \'reqwest\';\n  import infiniteScroll from \'vue-infinite-scroll\';\n  const fakeDataUrl = \'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo\';\n  export default {\n    directives: { infiniteScroll },\n    data() {\n      return {\n        data: [],\n        loading: false,\n        busy: false,\n      };\n    },\n    beforeMount() {\n      this.fetchData(res => {\n        this.data = res.results;\n      });\n    },\n    methods: {\n      fetchData(callback) {\n        reqwest({\n          url: fakeDataUrl,\n          type: \'json\',\n          method: \'get\',\n          contentType: \'application/json\',\n          success: res => {\n            callback(res);\n          },\n        });\n      },\n      handleInfiniteOnLoad() {\n        const data = this.data;\n        this.loading = true;\n        if (data.length > 14) {\n          this.$message.warning(\'Infinite List loaded all\');\n          this.busy = true;\n          this.loading = false;\n          return;\n        }\n        this.fetchData(res => {\n          this.data = data.concat(res.results);\n          this.loading = false;\n        });\n      },\n    },\n  };\n<\/script>\n<style>\n  .demo-infinite-container {\n    border: 1px solid #e8e8e8;\n    border-radius: 4px;\n    overflow: auto;\n    padding: 8px 24px;\n    height: 300px;\n  }\n  .demo-loading-container {\n    position: absolute;\n    bottom: 40px;\n    width: 100%;\n    text-align: center;\n  }\n</style>\n'}}},[e("template",{slot:"component"},[e("div",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:t.handleInfiniteOnLoad,expression:"handleInfiniteOnLoad"}],staticClass:"demo-infinite-container",attrs:{"infinite-scroll-disabled":t.busy,"infinite-scroll-distance":10}},[e("a-list",{attrs:{dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[e("a-list-item-meta",{attrs:{description:s.email}},[e("a",{attrs:{slot:"title",href:s.href},slot:"title"},[t._v(t._s(s.name.last))]),t._v(" "),e("a-avatar",{attrs:{slot:"avatar",src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"},slot:"avatar"})],1),t._v(" "),e("div",[t._v("Content")])],1)}}])},[t._v(" "),t.loading&&!t.busy?e("div",{staticClass:"demo-loading-container"},[e("a-spin")],1):t._e()])],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"滚动加载"}},[t._v("滚动加载 "),e("a",{staticClass:"anchor",attrs:{href:"#滚动加载"}},[t._v("#")])]),t._v(" "),e("p",[t._v("结合 "),e("a",{attrs:{href:"https://github.com/ElemeFE/vue-infinite-scroll"}},[t._v("vue-infinite-scroll")]),t._v(" 实现滚动自动加载列表。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Scrolling-loaded"}},[t._v("Scrolling loaded "),e("a",{staticClass:"anchor",attrs:{href:"#Scrolling-loaded"}},[t._v("#")])]),t._v(" "),e("p",[t._v("The example of infinite load with "),e("a",{attrs:{href:"https://github.com/ElemeFE/vue-infinite-scroll"}},[t._v("vue-infinite-scroll")]),t._v(".")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v("\n    "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"demo-infinite-container"')]),t._v("\n    "),e("span",{staticClass:"hljs-attr"},[t._v("v-infinite-scroll")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleInfiniteOnLoad"')]),t._v("\n    "),e("span",{staticClass:"hljs-attr"},[t._v(":infinite-scroll-disabled")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"busy"')]),t._v("\n    "),e("span",{staticClass:"hljs-attr"},[t._v(":infinite-scroll-distance")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"10"')]),t._v("\n  >")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":description")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.email"')]),t._v(">")]),t._v("\n          "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":href")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.href"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item.name.last"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n          "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-avatar")]),t._v("\n            "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"avatar"')]),t._v("\n            "),e("span",{staticClass:"hljs-attr"},[t._v("src")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"')]),t._v("\n          />")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("Content"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"loading && !busy"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"demo-loading-container"')]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-spin")]),t._v(" />")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" reqwest "),e("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),e("span",{staticClass:"hljs-string"},[t._v("'reqwest'")]),t._v(";\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" infiniteScroll "),e("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),e("span",{staticClass:"hljs-string"},[t._v("'vue-infinite-scroll'")]),t._v(";\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" fakeDataUrl = "),e("span",{staticClass:"hljs-string"},[t._v("'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo'")]),t._v(";\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    "),e("span",{staticClass:"hljs-attr"},[t._v("directives")]),t._v(": { infiniteScroll },\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        "),e("span",{staticClass:"hljs-attr"},[t._v("data")]),t._v(": [],\n        "),e("span",{staticClass:"hljs-attr"},[t._v("loading")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n        "),e("span",{staticClass:"hljs-attr"},[t._v("busy")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n      };\n    },\n    beforeMount() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".fetchData("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = res.results;\n      });\n    },\n    "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n      fetchData(callback) {\n        reqwest({\n          "),e("span",{staticClass:"hljs-attr"},[t._v("url")]),t._v(": fakeDataUrl,\n          "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'json'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("method")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'get'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("contentType")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'application/json'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("success")]),t._v(": "),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n            callback(res);\n          },\n        });\n      },\n      handleInfiniteOnLoad() {\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data;\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (data.length > "),e("span",{staticClass:"hljs-number"},[t._v("14")]),t._v(") {\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$message.warning("),e("span",{staticClass:"hljs-string"},[t._v("'Infinite List loaded all'")]),t._v(");\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".busy = "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(";\n        }\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".fetchData("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = data.concat(res.results);\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n        });\n      },\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"css"},[t._v("\n  "),e("span",{staticClass:"hljs-selector-class"},[t._v(".demo-infinite-container")]),t._v(" {\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("border")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("1px")]),t._v(" solid "),e("span",{staticClass:"hljs-number"},[t._v("#e8e8e8")]),t._v(";\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("border-radius")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("4px")]),t._v(";\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("overflow")]),t._v(": auto;\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("padding")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(" "),e("span",{staticClass:"hljs-number"},[t._v("24px")]),t._v(";\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("height")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("300px")]),t._v(";\n  }\n  "),e("span",{staticClass:"hljs-selector-class"},[t._v(".demo-loading-container")]),t._v(" {\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("position")]),t._v(": absolute;\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("bottom")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("40px")]),t._v(";\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("width")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("100%")]),t._v(";\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("text-align")]),t._v(": center;\n  }\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};h._withStripped=!0;var m=e(1195),u=e.n(m),g=e(1289),f=e.n(g),C={directives:{infiniteScroll:f.a},data:function(){return{data:[],loading:!1,busy:!1}},beforeMount:function(){var t=this;this.fetchData((function(s){t.data=s.results}))},methods:{fetchData:function(t){u()({url:"https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo",type:"json",method:"get",contentType:"application/json",success:function(s){t(s)}})},handleInfiniteOnLoad:function(){var t=this,s=this.data;if(this.loading=!0,s.length>14)return this.$message.warning("Infinite List loaded all"),this.busy=!0,void(this.loading=!1);this.fetchData((function(e){t.data=s.concat(e.results),t.loading=!1}))}}},j=(e(1406),Object(l.a)(C,h,[],!1,null,null,null));j.options.__file="components/list/demo/infinite-load.md";var y=j.exports,b=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <a-list>\n    <virtual-scroller style="height: 400px" :items="data" item-height="73" v-infinite-scroll="handleInfiniteOnLoad" :infinite-scroll-disabled="busy" :infinite-scroll-distance="10">\n      <a-list-item slot-scope="{item}">\n        <a-list-item-meta :description="item.email">\n          <a slot="title" :href="item.href">{{item.name.last}}</a>\n          <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>\n        </a-list-item-meta>\n        <div>Content {{item.index}}</div>\n      </a-list-item>\n    </virtual-scroller>\n    <a-spin v-if="loading" class="demo-loading"/>\n  </a-list>\n',script:"\n  import reqwest from 'reqwest';\n  import infiniteScroll from 'vue-infinite-scroll';\n  import { VirtualScroller } from 'vue-virtual-scroller';\n  const fakeDataUrl = 'https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo';\n  export default {\n    directives: { infiniteScroll },\n    data() {\n      return {\n        data: [],\n        loading: false,\n        busy: false,\n      };\n    },\n    beforeMount() {\n      this.fetchData(res => {\n        this.data = res.results.map((item, index) => ({ ...item, index }));\n      });\n    },\n    methods: {\n      fetchData(callback) {\n        reqwest({\n          url: fakeDataUrl,\n          type: 'json',\n          method: 'get',\n          contentType: 'application/json',\n          success: res => {\n            callback(res);\n          },\n        });\n      },\n      handleInfiniteOnLoad() {\n        const data = this.data;\n        this.loading = true;\n        if (data.length > 100) {\n          this.$message.warning('Infinite List loaded all');\n          this.busy = true;\n          this.loading = false;\n          return;\n        }\n        this.fetchData(res => {\n          this.data = data.concat(res.results).map((item, index) => ({ ...item, index }));\n          this.loading = false;\n        });\n      },\n    },\n    components: {\n      'virtual-scroller': VirtualScroller,\n    },\n  };\n",style:"\n  .demo-loading {\n    position: absolute;\n    bottom: 40px;\n    width: 100%;\n    text-align: center;\n  }\n",us:"\n#### Infinite & virtualized\nAn example of infinite list & virtualized loading using [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller).\n`Virtualized` rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.\n",cn:"\n#### 滚动加载无限长列表\n结合 [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller) 实现滚动加载无限长列表，带有虚拟化（[virtualization](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/)）功能，能够提高数据量大时候长列表的性能。\n可以结合 [vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll) 实现滚动自动加载无限长列表。\n`virtualized` 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。\n",sourceCode:'<template>\n  <a-list>\n    <virtual-scroller\n      style="height: 400px"\n      :items="data"\n      item-height="73"\n      v-infinite-scroll="handleInfiniteOnLoad"\n      :infinite-scroll-disabled="busy"\n      :infinite-scroll-distance="10"\n    >\n      <a-list-item slot-scope="{item}">\n        <a-list-item-meta :description="item.email">\n          <a slot="title" :href="item.href">{{item.name.last}}</a>\n          <a-avatar\n            slot="avatar"\n            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"\n          />\n        </a-list-item-meta>\n        <div>Content {{item.index}}</div>\n      </a-list-item>\n    </virtual-scroller>\n    <a-spin v-if="loading" class="demo-loading" />\n  </a-list>\n</template>\n<script>\n  import reqwest from \'reqwest\';\n  import infiniteScroll from \'vue-infinite-scroll\';\n  import { VirtualScroller } from \'vue-virtual-scroller\';\n  const fakeDataUrl = \'https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo\';\n  export default {\n    directives: { infiniteScroll },\n    data() {\n      return {\n        data: [],\n        loading: false,\n        busy: false,\n      };\n    },\n    beforeMount() {\n      this.fetchData(res => {\n        this.data = res.results.map((item, index) => ({ ...item, index }));\n      });\n    },\n    methods: {\n      fetchData(callback) {\n        reqwest({\n          url: fakeDataUrl,\n          type: \'json\',\n          method: \'get\',\n          contentType: \'application/json\',\n          success: res => {\n            callback(res);\n          },\n        });\n      },\n      handleInfiniteOnLoad() {\n        const data = this.data;\n        this.loading = true;\n        if (data.length > 100) {\n          this.$message.warning(\'Infinite List loaded all\');\n          this.busy = true;\n          this.loading = false;\n          return;\n        }\n        this.fetchData(res => {\n          this.data = data.concat(res.results).map((item, index) => ({ ...item, index }));\n          this.loading = false;\n        });\n      },\n    },\n    components: {\n      \'virtual-scroller\': VirtualScroller,\n    },\n  };\n<\/script>\n<style>\n  .demo-loading {\n    position: absolute;\n    bottom: 40px;\n    width: 100%;\n    text-align: center;\n  }\n</style>\n'}}},[e("template",{slot:"component"},[e("a-list",[e("virtual-scroller",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:t.handleInfiniteOnLoad,expression:"handleInfiniteOnLoad"}],staticStyle:{height:"400px"},attrs:{items:t.data,"item-height":"73","infinite-scroll-disabled":t.busy,"infinite-scroll-distance":10},scopedSlots:t._u([{key:"default",fn:function(s){var n=s.item;return e("a-list-item",{},[e("a-list-item-meta",{attrs:{description:n.email}},[e("a",{attrs:{slot:"title",href:n.href},slot:"title"},[t._v(t._s(n.name.last))]),t._v(" "),e("a-avatar",{attrs:{slot:"avatar",src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"},slot:"avatar"})],1),t._v(" "),e("div",[t._v("Content "+t._s(n.index))])],1)}}])}),t._v(" "),t.loading?e("a-spin",{staticClass:"demo-loading"}):t._e()],1)],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"滚动加载无限长列表"}},[t._v("滚动加载无限长列表 "),e("a",{staticClass:"anchor",attrs:{href:"#滚动加载无限长列表"}},[t._v("#")])]),t._v(" "),e("p",[t._v("结合 "),e("a",{attrs:{href:"https://github.com/Akryum/vue-virtual-scroller"}},[t._v("vue-virtual-scroller")]),t._v(" 实现滚动加载无限长列表，带有虚拟化（"),e("a",{attrs:{href:"https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/"}},[t._v("virtualization")]),t._v("）功能，能够提高数据量大时候长列表的性能。"),e("br"),t._v("\n可以结合 "),e("a",{attrs:{href:"https://github.com/ElemeFE/vue-infinite-scroll"}},[t._v("vue-infinite-scroll")]),t._v(" 实现滚动自动加载无限长列表。"),e("br"),t._v(" "),e("code",[t._v("virtualized")]),t._v(" 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。"),e("br"),e("br")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Infinite-&-virtualized"}},[t._v("Infinite & virtualized "),e("a",{staticClass:"anchor",attrs:{href:"#Infinite-&-virtualized"}},[t._v("#")])]),t._v(" "),e("p",[t._v("An example of infinite list & virtualized loading using "),e("a",{attrs:{href:"https://github.com/Akryum/vue-virtual-scroller"}},[t._v("vue-virtual-scroller")]),t._v("."),e("br"),t._v(" "),e("code",[t._v("Virtualized")]),t._v(" rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible."),e("br")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("virtual-scroller")]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"height: 400px"')]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v(":items")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v("item-height")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"73"')]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v("v-infinite-scroll")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleInfiniteOnLoad"')]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v(":infinite-scroll-disabled")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"busy"')]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v(":infinite-scroll-distance")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"10"')]),t._v("\n    >")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"{item}"')]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":description")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.email"')]),t._v(">")]),t._v("\n          "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":href")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.href"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item.name.last"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n          "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-avatar")]),t._v("\n            "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"avatar"')]),t._v("\n            "),e("span",{staticClass:"hljs-attr"},[t._v("src")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"')]),t._v("\n          />")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("Content "),e("span",[t._v("{{")]),t._v("item.index"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("virtual-scroller")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-spin")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"demo-loading"')]),t._v(" />")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" reqwest "),e("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),e("span",{staticClass:"hljs-string"},[t._v("'reqwest'")]),t._v(";\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" infiniteScroll "),e("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),e("span",{staticClass:"hljs-string"},[t._v("'vue-infinite-scroll'")]),t._v(";\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" { VirtualScroller } "),e("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),e("span",{staticClass:"hljs-string"},[t._v("'vue-virtual-scroller'")]),t._v(";\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" fakeDataUrl = "),e("span",{staticClass:"hljs-string"},[t._v("'https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo'")]),t._v(";\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    "),e("span",{staticClass:"hljs-attr"},[t._v("directives")]),t._v(": { infiniteScroll },\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        "),e("span",{staticClass:"hljs-attr"},[t._v("data")]),t._v(": [],\n        "),e("span",{staticClass:"hljs-attr"},[t._v("loading")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n        "),e("span",{staticClass:"hljs-attr"},[t._v("busy")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n      };\n    },\n    beforeMount() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".fetchData("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = res.results.map("),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("item, index")]),t._v(") =>")]),t._v(" ({ ...item, index }));\n      });\n    },\n    "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n      fetchData(callback) {\n        reqwest({\n          "),e("span",{staticClass:"hljs-attr"},[t._v("url")]),t._v(": fakeDataUrl,\n          "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'json'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("method")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'get'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("contentType")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'application/json'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("success")]),t._v(": "),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n            callback(res);\n          },\n        });\n      },\n      handleInfiniteOnLoad() {\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data;\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (data.length > "),e("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(") {\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$message.warning("),e("span",{staticClass:"hljs-string"},[t._v("'Infinite List loaded all'")]),t._v(");\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".busy = "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(";\n        }\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".fetchData("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = data.concat(res.results).map("),e("span",{staticClass:"hljs-function"},[t._v("("),e("span",{staticClass:"hljs-params"},[t._v("item, index")]),t._v(") =>")]),t._v(" ({ ...item, index }));\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n        });\n      },\n    },\n    "),e("span",{staticClass:"hljs-attr"},[t._v("components")]),t._v(": {\n      "),e("span",{staticClass:"hljs-string"},[t._v("'virtual-scroller'")]),t._v(": VirtualScroller,\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"css"},[t._v("\n  "),e("span",{staticClass:"hljs-selector-class"},[t._v(".demo-loading")]),t._v(" {\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("position")]),t._v(": absolute;\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("bottom")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("40px")]),t._v(";\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("width")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("100%")]),t._v(";\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("text-align")]),t._v(": center;\n  }\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};b._withStripped=!0;var x=e(2),w=e.n(x),I=e(1407),k={directives:{infiniteScroll:f.a},data:function(){return{data:[],loading:!1,busy:!1}},beforeMount:function(){var t=this;this.fetchData((function(s){t.data=s.results.map((function(t,s){return w()({},t,{index:s})}))}))},methods:{fetchData:function(t){u()({url:"https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo",type:"json",method:"get",contentType:"application/json",success:function(s){t(s)}})},handleInfiniteOnLoad:function(){var t=this,s=this.data;if(this.loading=!0,s.length>100)return this.$message.warning("Infinite List loaded all"),this.busy=!0,void(this.loading=!1);this.fetchData((function(e){t.data=s.concat(e.results).map((function(t,s){return w()({},t,{index:s})})),t.loading=!1}))}},components:{"virtual-scroller":I.a}},A=(e(1408),Object(l.a)(k,b,[],!1,null,null,null));A.options.__file="components/list/demo/infinite-virtualized-load.md";var T=A.exports,S=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <a-list class="demo-loadmore-list" :loading="loading" itemLayout="horizontal" :dataSource="data">\n    <div v-if="showLoadingMore" slot="loadMore" :style="{ textAlign: \'center\', marginTop: \'12px\', height: \'32px\', lineHeight: \'32px\' }">\n      <a-spin v-if="loadingMore"/>\n      <a-button v-else="" @click="onLoadMore">loading more</a-button>\n    </div>\n    <a-list-item slot="renderItem" slot-scope="item, index">\n      <a slot="actions">edit</a>\n      <a slot="actions">more</a>\n      <a-list-item-meta description="Ant Design, a design language for background applications, is refined by Ant UED Team">\n        <a slot="title" href="https://www.antdv.com/">{{item.name.last}}</a>\n        <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>\n      </a-list-item-meta>\n      <div>content</div>\n    </a-list-item>\n  </a-list>\n',script:"\n  import reqwest from 'reqwest';\n\n  const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';\n\n  export default {\n    data() {\n      return {\n        loading: true,\n        loadingMore: false,\n        showLoadingMore: true,\n        data: [],\n      };\n    },\n    mounted() {\n      this.getData(res => {\n        this.loading = false;\n        this.data = res.results;\n      });\n    },\n    methods: {\n      getData(callback) {\n        reqwest({\n          url: fakeDataUrl,\n          type: 'json',\n          method: 'get',\n          contentType: 'application/json',\n          success: res => {\n            callback(res);\n          },\n        });\n      },\n      onLoadMore() {\n        this.loadingMore = true;\n        this.getData(res => {\n          this.data = this.data.concat(res.results);\n          this.loadingMore = false;\n          this.$nextTick(() => {\n            window.dispatchEvent(new Event('resize'));\n          });\n        });\n      },\n    },\n  };\n",style:"\n  .demo-loadmore-list {\n    min-height: 350px;\n  }\n",us:"\n#### Load more\nLoad more list with `loadMore` property.\n",cn:"\n#### 加载更多\n可通过 `loadMore` 属性实现加载更多功能。\n",sourceCode:'<template>\n  <a-list class="demo-loadmore-list" :loading="loading" itemLayout="horizontal" :dataSource="data">\n    <div\n      v-if="showLoadingMore"\n      slot="loadMore"\n      :style="{ textAlign: \'center\', marginTop: \'12px\', height: \'32px\', lineHeight: \'32px\' }"\n    >\n      <a-spin v-if="loadingMore" />\n      <a-button v-else @click="onLoadMore">loading more</a-button>\n    </div>\n    <a-list-item slot="renderItem" slot-scope="item, index">\n      <a slot="actions">edit</a>\n      <a slot="actions">more</a>\n      <a-list-item-meta\n        description="Ant Design, a design language for background applications, is refined by Ant UED Team"\n      >\n        <a slot="title" href="https://www.antdv.com/">{{item.name.last}}</a>\n        <a-avatar\n          slot="avatar"\n          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"\n        />\n      </a-list-item-meta>\n      <div>content</div>\n    </a-list-item>\n  </a-list>\n</template>\n<script>\n  import reqwest from \'reqwest\';\n\n  const fakeDataUrl = \'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo\';\n\n  export default {\n    data() {\n      return {\n        loading: true,\n        loadingMore: false,\n        showLoadingMore: true,\n        data: [],\n      };\n    },\n    mounted() {\n      this.getData(res => {\n        this.loading = false;\n        this.data = res.results;\n      });\n    },\n    methods: {\n      getData(callback) {\n        reqwest({\n          url: fakeDataUrl,\n          type: \'json\',\n          method: \'get\',\n          contentType: \'application/json\',\n          success: res => {\n            callback(res);\n          },\n        });\n      },\n      onLoadMore() {\n        this.loadingMore = true;\n        this.getData(res => {\n          this.data = this.data.concat(res.results);\n          this.loadingMore = false;\n          this.$nextTick(() => {\n            window.dispatchEvent(new Event(\'resize\'));\n          });\n        });\n      },\n    },\n  };\n<\/script>\n<style>\n  .demo-loadmore-list {\n    min-height: 350px;\n  }\n</style>\n'}}},[e("template",{slot:"component"},[e("a-list",{staticClass:"demo-loadmore-list",attrs:{loading:t.loading,itemLayout:"horizontal",dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[e("a",{attrs:{slot:"actions"},slot:"actions"},[t._v("edit")]),t._v(" "),e("a",{attrs:{slot:"actions"},slot:"actions"},[t._v("more")]),t._v(" "),e("a-list-item-meta",{attrs:{description:"Ant Design, a design language for background applications, is refined by Ant UED Team"}},[e("a",{attrs:{slot:"title",href:"https://www.antdv.com/"},slot:"title"},[t._v(t._s(s.name.last))]),t._v(" "),e("a-avatar",{attrs:{slot:"avatar",src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"},slot:"avatar"})],1),t._v(" "),e("div",[t._v("content")])],1)}}])},[t.showLoadingMore?e("div",{style:{textAlign:"center",marginTop:"12px",height:"32px",lineHeight:"32px"},attrs:{slot:"loadMore"},slot:"loadMore"},[t.loadingMore?e("a-spin"):e("a-button",{on:{click:t.onLoadMore}},[t._v("loading more")])],1):t._e()])],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"加载更多"}},[t._v("加载更多 "),e("a",{staticClass:"anchor",attrs:{href:"#加载更多"}},[t._v("#")])]),t._v(" "),e("p",[t._v("可通过 "),e("code",[t._v("loadMore")]),t._v(" 属性实现加载更多功能。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Load-more"}},[t._v("Load more "),e("a",{staticClass:"anchor",attrs:{href:"#Load-more"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Load more list with "),e("code",[t._v("loadMore")]),t._v(" property.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"demo-loadmore-list"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":loading")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("itemLayout")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"horizontal"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"showLoadingMore"')]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"loadMore"')]),t._v("\n      "),e("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }\"")]),t._v("\n    >")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-spin")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"loadingMore"')]),t._v(" />")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("v-else")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"onLoadMore"')]),t._v(">")]),t._v("loading more"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"actions"')]),t._v(">")]),t._v("edit"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"actions"')]),t._v(">")]),t._v("more"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v("\n        "),e("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"Ant Design, a design language for background applications, is refined by Ant UED Team"')]),t._v("\n      >")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"https://www.antdv.com/"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item.name.last"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-avatar")]),t._v("\n          "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"avatar"')]),t._v("\n          "),e("span",{staticClass:"hljs-attr"},[t._v("src")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"')]),t._v("\n        />")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("content"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" reqwest "),e("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),e("span",{staticClass:"hljs-string"},[t._v("'reqwest'")]),t._v(";\n\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" fakeDataUrl = "),e("span",{staticClass:"hljs-string"},[t._v("'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo'")]),t._v(";\n\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        "),e("span",{staticClass:"hljs-attr"},[t._v("loading")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n        "),e("span",{staticClass:"hljs-attr"},[t._v("loadingMore")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n        "),e("span",{staticClass:"hljs-attr"},[t._v("showLoadingMore")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n        "),e("span",{staticClass:"hljs-attr"},[t._v("data")]),t._v(": [],\n      };\n    },\n    mounted() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".getData("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = res.results;\n      });\n    },\n    "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n      getData(callback) {\n        reqwest({\n          "),e("span",{staticClass:"hljs-attr"},[t._v("url")]),t._v(": fakeDataUrl,\n          "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'json'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("method")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'get'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("contentType")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'application/json'")]),t._v(",\n          "),e("span",{staticClass:"hljs-attr"},[t._v("success")]),t._v(": "),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n            callback(res);\n          },\n        });\n      },\n      onLoadMore() {\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loadingMore = "),e("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n        "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".getData("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("res")]),t._v(" =>")]),t._v(" {\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data.concat(res.results);\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loadingMore = "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n          "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$nextTick("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n            "),e("span",{staticClass:"hljs-built_in"},[t._v("window")]),t._v(".dispatchEvent("),e("span",{staticClass:"hljs-keyword"},[t._v("new")]),t._v(" Event("),e("span",{staticClass:"hljs-string"},[t._v("'resize'")]),t._v("));\n          });\n        });\n      },\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"css"},[t._v("\n  "),e("span",{staticClass:"hljs-selector-class"},[t._v(".demo-loadmore-list")]),t._v(" {\n    "),e("span",{staticClass:"hljs-attribute"},[t._v("min-height")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("350px")]),t._v(";\n  }\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};S._withStripped=!0;var D={data:function(){return{loading:!0,loadingMore:!1,showLoadingMore:!0,data:[]}},mounted:function(){var t=this;this.getData((function(s){t.loading=!1,t.data=s.results}))},methods:{getData:function(t){u()({url:"https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo",type:"json",method:"get",contentType:"application/json",success:function(s){t(s)}})},onLoadMore:function(){var t=this;this.loadingMore=!0,this.getData((function(s){t.data=t.data.concat(s.results),t.loadingMore=!1,t.$nextTick((function(){window.dispatchEvent(new Event("resize"))}))}))}}},$=(e(1409),Object(l.a)(D,S,[],!1,null,null,null));$.options.__file="components/list/demo/loadmore.md";var L=$.exports,z=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :dataSource="data">\n    <a-list-item slot="renderItem" slot-scope="item, index">\n      <a-card :title="item.title">Card content</a-card>\n    </a-list-item>\n  </a-list>\n',script:"\n  const data = [\n    {\n      title: 'Title 1',\n    },\n    {\n      title: 'Title 2',\n    },\n    {\n      title: 'Title 3',\n    },\n    {\n      title: 'Title 4',\n    },\n    {\n      title: 'Title 5',\n    },\n    {\n      title: 'Title 6',\n    },\n  ];\n\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n",style:"",us:"\n#### Responsive grid list\nResponsive grid list. The size property is as same as [Layout Grid](https://www.antdv.com/components/grid/#Col).\n",cn:"\n#### 响应式的栅格列表\n响应式的栅格列表。尺寸与 [Layout Grid](https://www.antdv.com/components/grid-cn/#Col) 保持一致。\n",sourceCode:"<template>\n  <a-list :grid=\"{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }\" :dataSource=\"data\">\n    <a-list-item slot=\"renderItem\" slot-scope=\"item, index\">\n      <a-card :title=\"item.title\">Card content</a-card>\n    </a-list-item>\n  </a-list>\n</template>\n<script>\n  const data = [\n    {\n      title: 'Title 1',\n    },\n    {\n      title: 'Title 2',\n    },\n    {\n      title: 'Title 3',\n    },\n    {\n      title: 'Title 4',\n    },\n    {\n      title: 'Title 5',\n    },\n    {\n      title: 'Title 6',\n    },\n  ];\n\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n<\/script>\n<style></style>\n"}}},[e("template",{slot:"component"},[e("a-list",{attrs:{grid:{gutter:16,xs:1,sm:2,md:4,lg:4,xl:6,xxl:3},dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[e("a-card",{attrs:{title:s.title}},[t._v("Card content")])],1)}}])})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"响应式的栅格列表"}},[t._v("响应式的栅格列表 "),e("a",{staticClass:"anchor",attrs:{href:"#响应式的栅格列表"}},[t._v("#")])]),t._v(" "),e("p",[t._v("响应式的栅格列表。尺寸与 "),e("a",{attrs:{href:"https://www.antdv.com/components/grid-cn/#Col"}},[t._v("Layout Grid")]),t._v(" 保持一致。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Responsive-grid-list"}},[t._v("Responsive grid list "),e("a",{staticClass:"anchor",attrs:{href:"#Responsive-grid-list"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Responsive grid list. The size property is as same as "),e("a",{attrs:{href:"https://www.antdv.com/components/grid/#Col"}},[t._v("Layout Grid")]),t._v(".")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":grid")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-card")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":title")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.title"')]),t._v(">")]),t._v("Card content"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-card")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 1'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 2'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 3'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 4'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 5'")]),t._v(",\n    },\n    {\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'Title 6'")]),t._v(",\n    },\n  ];\n\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        data,\n      };\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};z._withStripped=!0;var E=[{title:"Title 1"},{title:"Title 2"},{title:"Title 3"},{title:"Title 4"},{title:"Title 5"},{title:"Title 6"}],H={data:function(){return{data:E}}},q=Object(l.a)(H,z,[],!1,null,null,null);q.options.__file="components/list/demo/resposive.md";var V=q.exports,O=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <h3 :style="{ marginBottom: \'16px\' }">Default Size</h3>\n    <a-list bordered="" :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">{{item}}</a-list-item>\n      <div slot="header">Header</div>\n      <div slot="footer">Footer</div>\n    </a-list>\n    <h3 :style="{ margin: \'16px 0\' }">Small Size</h3>\n    <a-list size="small" bordered="" :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">{{item}}</a-list-item>\n      <div slot="header">Header</div>\n      <div slot="footer">Footer</div>\n    </a-list>\n    <h3 :style="{ margin: \'16px 0\' }">Large Size</h3>\n    <a-list size="large" bordered="" :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">{{item}}</a-list-item>\n      <div slot="header">Header</div>\n      <div slot="footer">Footer</div>\n    </a-list>\n  </div>\n',script:"\n  const data = [\n    'Racing car sprays burning fuel into crowd.',\n    'Japanese princess to wed commoner.',\n    'Australian walks 100km after outback crash.',\n    'Man charged over missing wedding girl.',\n    'Los Angeles battles huge wildfires.',\n  ];\n\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n",style:"",us:"\n#### Simple list\nAnt Design supports a default list size as well as a large and small size.\nIf a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.\nCustomizing the header and footer of list by setting `header` and `footer` property.\n",cn:"\n#### 简单列表\n列表拥有大、中、小三种尺寸。\n通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。\n可通过设置 `header` 和 `footer`，来自定义列表头部和尾部。\n",sourceCode:'<template>\n  <div>\n    <h3 :style="{ marginBottom: \'16px\' }">Default Size</h3>\n    <a-list bordered :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">{{item}}</a-list-item>\n      <div slot="header">Header</div>\n      <div slot="footer">Footer</div>\n    </a-list>\n    <h3 :style="{ margin: \'16px 0\' }">Small Size</h3>\n    <a-list size="small" bordered :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">{{item}}</a-list-item>\n      <div slot="header">Header</div>\n      <div slot="footer">Footer</div>\n    </a-list>\n    <h3 :style="{ margin: \'16px 0\' }">Large Size</h3>\n    <a-list size="large" bordered :dataSource="data">\n      <a-list-item slot="renderItem" slot-scope="item, index">{{item}}</a-list-item>\n      <div slot="header">Header</div>\n      <div slot="footer">Footer</div>\n    </a-list>\n  </div>\n</template>\n<script>\n  const data = [\n    \'Racing car sprays burning fuel into crowd.\',\n    \'Japanese princess to wed commoner.\',\n    \'Australian walks 100km after outback crash.\',\n    \'Man charged over missing wedding girl.\',\n    \'Los Angeles battles huge wildfires.\',\n  ];\n\n  export default {\n    data() {\n      return {\n        data,\n      };\n    },\n  };\n<\/script>\n<style></style>\n'}}},[e("template",{slot:"component"},[e("div",[e("h3",{style:{marginBottom:"16px"}},[t._v("Default Size")]),t._v(" "),e("a-list",{attrs:{bordered:"",dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[t._v(t._s(s))])}}])},[t._v(" "),e("div",{attrs:{slot:"header"},slot:"header"},[t._v("Header")]),t._v(" "),e("div",{attrs:{slot:"footer"},slot:"footer"},[t._v("Footer")])]),t._v(" "),e("h3",{style:{margin:"16px 0"}},[t._v("Small Size")]),t._v(" "),e("a-list",{attrs:{size:"small",bordered:"",dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[t._v(t._s(s))])}}])},[t._v(" "),e("div",{attrs:{slot:"header"},slot:"header"},[t._v("Header")]),t._v(" "),e("div",{attrs:{slot:"footer"},slot:"footer"},[t._v("Footer")])]),t._v(" "),e("h3",{style:{margin:"16px 0"}},[t._v("Large Size")]),t._v(" "),e("a-list",{attrs:{size:"large",bordered:"",dataSource:t.data},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{},[t._v(t._s(s))])}}])},[t._v(" "),e("div",{attrs:{slot:"header"},slot:"header"},[t._v("Header")]),t._v(" "),e("div",{attrs:{slot:"footer"},slot:"footer"},[t._v("Footer")])])],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"简单列表"}},[t._v("简单列表 "),e("a",{staticClass:"anchor",attrs:{href:"#简单列表"}},[t._v("#")])]),t._v(" "),e("p",[t._v("列表拥有大、中、小三种尺寸。"),e("br"),t._v("\n通过设置 "),e("code",[t._v("size")]),t._v(" 为 "),e("code",[t._v("large")]),t._v(" "),e("code",[t._v("small")]),t._v(" 分别把按钮设为大、小尺寸。若不设置 "),e("code",[t._v("size")]),t._v("，则尺寸为中。"),e("br"),t._v("\n可通过设置 "),e("code",[t._v("header")]),t._v(" 和 "),e("code",[t._v("footer")]),t._v("，来自定义列表头部和尾部。"),e("br"),e("br")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Simple-list"}},[t._v("Simple list "),e("a",{staticClass:"anchor",attrs:{href:"#Simple-list"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Ant Design supports a default list size as well as a large and small size."),e("br"),t._v("\nIf a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size."),e("br"),t._v("\nCustomizing the header and footer of list by setting "),e("code",[t._v("header")]),t._v(" and "),e("code",[t._v("footer")]),t._v(" property."),e("br"),e("br")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("h3")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{ marginBottom: '16px' }\"")]),t._v(">")]),t._v("Default Size"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("h3")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"header"')]),t._v(">")]),t._v("Header"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"footer"')]),t._v(">")]),t._v("Footer"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("h3")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{ margin: '16px 0' }\"")]),t._v(">")]),t._v("Small Size"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("h3")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"small"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"header"')]),t._v(">")]),t._v("Header"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"footer"')]),t._v(">")]),t._v("Footer"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("h3")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{ margin: '16px 0' }\"")]),t._v(">")]),t._v("Large Size"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("h3")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"large"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"header"')]),t._v(">")]),t._v("Header"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"footer"')]),t._v(">")]),t._v("Footer"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n    "),e("span",{staticClass:"hljs-string"},[t._v("'Racing car sprays burning fuel into crowd.'")]),t._v(",\n    "),e("span",{staticClass:"hljs-string"},[t._v("'Japanese princess to wed commoner.'")]),t._v(",\n    "),e("span",{staticClass:"hljs-string"},[t._v("'Australian walks 100km after outback crash.'")]),t._v(",\n    "),e("span",{staticClass:"hljs-string"},[t._v("'Man charged over missing wedding girl.'")]),t._v(",\n    "),e("span",{staticClass:"hljs-string"},[t._v("'Los Angeles battles huge wildfires.'")]),t._v(",\n  ];\n\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        data,\n      };\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};O._withStripped=!0;var M=["Racing car sprays burning fuel into crowd.","Japanese princess to wed commoner.","Australian walks 100km after outback crash.","Man charged over missing wedding girl.","Los Angeles battles huge wildfires."],R={data:function(){return{data:M}}},P=Object(l.a)(R,O,[],!1,null,null,null);P.options.__file="components/list/demo/simple.md";var F=P.exports,X=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n  <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">\n    <div slot="footer"><b>ant design vue</b> footer part</div>\n    <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">\n      <template slot="actions" v-for="{type, text} in actions">\n        <span :key="type">\n          <a-icon :type="type" style="margin-right: 8px"/>\n          {{text}}\n        </span>\n      </template>\n      <img slot="extra" width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"/>\n      <a-list-item-meta :description="item.description">\n        <a slot="title" :href="item.href">{{item.title}}</a>\n        <a-avatar slot="avatar" :src="item.avatar"/>\n      </a-list-item-meta>\n      {{item.content}}\n    </a-list-item>\n  </a-list>\n',script:"\n  const listData = [];\n  for (let i = 0; i < 23; i++) {\n    listData.push({\n      href: 'https://www.antdv.com/',\n      title: `ant design vue part ${i}`,\n      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',\n      description:\n        'Ant Design, a design language for background applications, is refined by Ant UED Team.',\n      content:\n        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',\n    });\n  }\n\n  export default {\n    data() {\n      return {\n        listData,\n        pagination: {\n          onChange: page => {\n            console.log(page);\n          },\n          pageSize: 3,\n        },\n        actions: [\n          { type: 'star-o', text: '156' },\n          { type: 'like-o', text: '156' },\n          { type: 'message', text: '2' },\n        ],\n      };\n    },\n  };\n",style:"",us:"\n#### Vertical\nSetting `itemLayout` property with `vertical` to create a vertical list.\n",cn:"\n#### 竖排列表样式\n通过设置 `itemLayout` 属性为 `vertical` 可实现竖排列表样式。\n",sourceCode:'<template>\n  <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">\n    <div slot="footer"><b>ant design vue</b> footer part</div>\n    <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">\n      <template slot="actions" v-for="{type, text} in actions">\n        <span :key="type">\n          <a-icon :type="type" style="margin-right: 8px" />\n          {{text}}\n        </span>\n      </template>\n      <img\n        slot="extra"\n        width="272"\n        alt="logo"\n        src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"\n      />\n      <a-list-item-meta :description="item.description">\n        <a slot="title" :href="item.href">{{item.title}}</a>\n        <a-avatar slot="avatar" :src="item.avatar" />\n      </a-list-item-meta>\n      {{item.content}}\n    </a-list-item>\n  </a-list>\n</template>\n<script>\n  const listData = [];\n  for (let i = 0; i < 23; i++) {\n    listData.push({\n      href: \'https://www.antdv.com/\',\n      title: `ant design vue part ${i}`,\n      avatar: \'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\',\n      description:\n        \'Ant Design, a design language for background applications, is refined by Ant UED Team.\',\n      content:\n        \'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.\',\n    });\n  }\n\n  export default {\n    data() {\n      return {\n        listData,\n        pagination: {\n          onChange: page => {\n            console.log(page);\n          },\n          pageSize: 3,\n        },\n        actions: [\n          { type: \'star-o\', text: \'156\' },\n          { type: \'like-o\', text: \'156\' },\n          { type: \'message\', text: \'2\' },\n        ],\n      };\n    },\n  };\n<\/script>\n<style></style>\n'}}},[e("template",{slot:"component"},[e("a-list",{attrs:{itemLayout:"vertical",size:"large",pagination:t.pagination,dataSource:t.listData},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return e("a-list-item",{key:"item.title"},[t._l(t.actions,(function(s){var n=s.type,a=s.text;return e("template",{slot:"actions"},[e("span",{key:n},[e("a-icon",{staticStyle:{"margin-right":"8px"},attrs:{type:n}}),t._v("\n          "+t._s(a)+"\n        ")],1)])})),t._v(" "),e("img",{attrs:{slot:"extra",width:"272",alt:"logo",src:"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"},slot:"extra"}),t._v(" "),e("a-list-item-meta",{attrs:{description:s.description}},[e("a",{attrs:{slot:"title",href:s.href},slot:"title"},[t._v(t._s(s.title))]),t._v(" "),e("a-avatar",{attrs:{slot:"avatar",src:s.avatar},slot:"avatar"})],1),t._v("\n      "+t._s(s.content)+"\n    ")],2)}}])},[e("div",{attrs:{slot:"footer"},slot:"footer"},[e("b",[t._v("ant design vue")]),t._v(" footer part")])])],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"竖排列表样式"}},[t._v("竖排列表样式 "),e("a",{staticClass:"anchor",attrs:{href:"#竖排列表样式"}},[t._v("#")])]),t._v(" "),e("p",[t._v("通过设置 "),e("code",[t._v("itemLayout")]),t._v(" 属性为 "),e("code",[t._v("vertical")]),t._v(" 可实现竖排列表样式。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Vertical"}},[t._v("Vertical "),e("a",{staticClass:"anchor",attrs:{href:"#Vertical"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Setting "),e("code",[t._v("itemLayout")]),t._v(" property with "),e("code",[t._v("vertical")]),t._v(" to create a vertical list.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("itemLayout")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"vertical"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"large"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":pagination")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"pagination"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"listData"')]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"footer"')]),t._v(">")]),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("b")]),t._v(">")]),t._v("ant design vue"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("b")]),t._v(">")]),t._v(" footer part"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.title"')]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"actions"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"{type, text} in actions"')]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"type"')]),t._v(">")]),t._v("\n          "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"type"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"margin-right: 8px"')]),t._v(" />")]),t._v("\n          "),e("span",[t._v("{{")]),t._v("text"),e("span",[t._v("}}")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("img")]),t._v("\n        "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"extra"')]),t._v("\n        "),e("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"272"')]),t._v("\n        "),e("span",{staticClass:"hljs-attr"},[t._v("alt")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"logo"')]),t._v("\n        "),e("span",{staticClass:"hljs-attr"},[t._v("src")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"')]),t._v("\n      />")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":description")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.description"')]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":href")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.href"')]),t._v(">")]),e("span",[t._v("{{")]),t._v("item.title"),e("span",[t._v("}}")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n        "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-avatar")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"avatar"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":src")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item.avatar"')]),t._v(" />")]),t._v("\n      "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(">")]),t._v("\n      "),e("span",[t._v("{{")]),t._v("item.content"),e("span",[t._v("}}")]),t._v("\n    "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n  "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" listData = [];\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),e("span",{staticClass:"hljs-number"},[t._v("23")]),t._v("; i++) {\n    listData.push({\n      "),e("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'https://www.antdv.com/'")]),t._v(",\n      "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`ant design vue part "),e("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n      "),e("span",{staticClass:"hljs-attr"},[t._v("avatar")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'")]),t._v(",\n      "),e("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(":\n        "),e("span",{staticClass:"hljs-string"},[t._v("'Ant Design, a design language for background applications, is refined by Ant UED Team.'")]),t._v(",\n      "),e("span",{staticClass:"hljs-attr"},[t._v("content")]),t._v(":\n        "),e("span",{staticClass:"hljs-string"},[t._v("'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'")]),t._v(",\n    });\n  }\n\n  "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n    data() {\n      "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n        listData,\n        "),e("span",{staticClass:"hljs-attr"},[t._v("pagination")]),t._v(": {\n          "),e("span",{staticClass:"hljs-attr"},[t._v("onChange")]),t._v(": "),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("page")]),t._v(" =>")]),t._v(" {\n            "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(page);\n          },\n          "),e("span",{staticClass:"hljs-attr"},[t._v("pageSize")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("3")]),t._v(",\n        },\n        "),e("span",{staticClass:"hljs-attr"},[t._v("actions")]),t._v(": [\n          { "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'star-o'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'156'")]),t._v(" },\n          { "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'like-o'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'156'")]),t._v(" },\n          { "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'message'")]),t._v(", "),e("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(" },\n        ],\n      };\n    },\n  };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};X._withStripped=!0;for(var B=[],N=0;N<23;N++)B.push({href:"https://www.antdv.com/",title:"ant design vue part "+N,avatar:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",description:"Ant Design, a design language for background applications, is refined by Ant UED Team.",content:"We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently."});var U={data:function(){return{listData:B,pagination:{onChange:function(t){console.log(t)},pageSize:3},actions:[{type:"star-o",text:"156"},{type:"like-o",text:"156"},{type:"message",text:"2"}]}}},Y=Object(l.a)(U,X,[],!1,null,null,null);Y.options.__file="components/list/demo/vertical.md";var W=Y.exports,K=function(){var t=this.$createElement;this._self._c;return this._m(0)};K._withStripped=!0;var G=Object(l.a)({},K,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("h3",{attrs:{id:"List"}},[t._v("List "),e("a",{staticClass:"anchor",attrs:{href:"#List"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("bordered")]),t._v(" "),e("td",[t._v("是否展示边框")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("footer")]),t._v(" "),e("td",[t._v("列表底部")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("grid")]),t._v(" "),e("td",[t._v("列表栅格配置")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("header")]),t._v(" "),e("td",[t._v("列表头部")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("itemLayout")]),t._v(" "),e("td",[t._v("设置 "),e("code",{pre:!0},[t._v("List.Item")]),t._v(" 布局, 设置成 "),e("code",{pre:!0},[t._v("vertical")]),t._v(" 则竖直样式显示, 默认横排")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("loading")]),t._v(" "),e("td",[t._v("当卡片内容还在加载中时，可以用 "),e("code",{pre:!0},[t._v("loading")]),t._v(" 展示一个占位")]),t._v(" "),e("td",[t._v("boolean|"),e("a",{attrs:{href:"https://www.antdv.com/components/spin-cn/#API"}},[t._v("object")])]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("loadMore")]),t._v(" "),e("td",[t._v("加载更多")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("locale")]),t._v(" "),e("td",[t._v("默认文案设置，目前包括空数据文案")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("emptyText: '暂无数据'")])]),t._v(" "),e("tr",[e("td",[t._v("pagination")]),t._v(" "),e("td",[t._v("对应的 "),e("code",{pre:!0},[t._v("pagination")]),t._v(" "),e("a",{attrs:{href:"https://www.antdv.com/components/pagination-cn/#API"}},[t._v("配置")]),t._v(", 设置 "),e("code",{pre:!0},[t._v("false")]),t._v(" 不显示")]),t._v(" "),e("td",[t._v("boolean|object")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("size")]),t._v(" "),e("td",[t._v("list 的尺寸")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("default")]),t._v(" | "),e("code",{pre:!0},[t._v("middle")]),t._v(" | "),e("code",{pre:!0},[t._v("small")])]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("default")])])]),t._v(" "),e("tr",[e("td",[t._v("split")]),t._v(" "),e("td",[t._v("是否展示分割线")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("renderItem")]),t._v(" "),e("td",[t._v("自定义"),e("code",{pre:!0},[t._v("Item")]),t._v('函数，也可使用 slot="renderItem" 和 slot-scope="item, index"')]),t._v(" "),e("td",[t._v("(item, index) => vNode")]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("rowKey")]),t._v(" "),e("td",[t._v("各项 key 的取值，可以是字符串或一个函数")]),t._v(" "),e("td",[t._v("item => string|number")]),t._v(" "),e("td")])])]),t._v(" "),e("h3",{attrs:{id:"pagination"}},[t._v("pagination "),e("a",{staticClass:"anchor",attrs:{href:"#pagination"}},[t._v("#")])]),t._v(" "),e("p",[t._v("分页的配置项。")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("position")]),t._v(" "),e("td",[t._v("指定分页显示的位置")]),t._v(" "),e("td",[t._v("'top' | 'bottom' | 'both'")]),t._v(" "),e("td",[t._v("'bottom'")])])])]),t._v(" "),e("p",[t._v("更多配置项，请查看 "),e("a",{attrs:{href:"https://www.antdv.com/components/pagination-cn/#API"}},[e("code",{pre:!0},[t._v("Pagination")])]),t._v("。")]),t._v(" "),e("h3",{attrs:{id:"List-grid-props"}},[t._v("List grid props "),e("a",{staticClass:"anchor",attrs:{href:"#List-grid-props"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("column")]),t._v(" "),e("td",[t._v("列数")]),t._v(" "),e("td",[t._v("number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("gutter")]),t._v(" "),e("td",[t._v("栅格间隔")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("0")])]),t._v(" "),e("tr",[e("td",[t._v("xs")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("<576px")]),t._v(" 展示的列数")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("sm")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥576px")]),t._v(" 展示的列数")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("md")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥768px")]),t._v(" 展示的列数")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("lg")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥992px")]),t._v(" 展示的列数")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("xl")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥1200px")]),t._v(" 展示的列数")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("xxl")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥1600px")]),t._v(" 展示的列数")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"List.Item"}},[t._v("List.Item "),e("a",{staticClass:"anchor",attrs:{href:"#List.Item"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("actions")]),t._v(" "),e("td",[t._v("列表操作组，根据 "),e("code",{pre:!0},[t._v("itemLayout")]),t._v(" 的不同, 位置在卡片底部或者最右侧")]),t._v(" "),e("td",[t._v("Array<vNode>/")]),t._v(" "),e("td",[t._v("slot")])]),t._v(" "),e("tr",[e("td",[t._v("extra")]),t._v(" "),e("td",[t._v("额外内容, 通常用在 "),e("code",{pre:!0},[t._v("itemLayout")]),t._v(" 为 "),e("code",{pre:!0},[t._v("vertical")]),t._v(" 的情况下, 展示右侧内容; "),e("code",{pre:!0},[t._v("horizontal")]),t._v(" 展示在列表元素最右侧")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"List.Item.Meta"}},[t._v("List.Item.Meta "),e("a",{staticClass:"anchor",attrs:{href:"#List.Item.Meta"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("avatar")]),t._v(" "),e("td",[t._v("列表元素的图标")]),t._v(" "),e("td",[t._v("slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("description")]),t._v(" "),e("td",[t._v("列表元素的描述内容")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("title")]),t._v(" "),e("td",[t._v("列表元素的标题")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])])])])])}],!1,null,null,null);G.options.__file="components/list/index.zh-CN.md";var J=G.exports,Q=function(){var t=this.$createElement;this._self._c;return this._m(0)};Q._withStripped=!0;var Z=Object(l.a)({},Q,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("h3",{attrs:{id:"List"}},[t._v("List "),e("a",{staticClass:"anchor",attrs:{href:"#List"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("bordered")]),t._v(" "),e("td",[t._v("Toggles rendering of the border around the list")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("footer")]),t._v(" "),e("td",[t._v("List footer renderer")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("grid")]),t._v(" "),e("td",[t._v("The grid type of list. You can set grid to something like {gutter: 16, column: 4}")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("header")]),t._v(" "),e("td",[t._v("List header renderer")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("itemLayout")]),t._v(" "),e("td",[t._v("The layout of list, default is "),e("code",{pre:!0},[t._v("horizontal")]),t._v(", If a vertical list is desired, set the itemLayout property to "),e("code",{pre:!0},[t._v("vertical")])]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("rowKey")]),t._v(" "),e("td",[t._v("Item's unique key, could be a string or function that returns a string")]),t._v(" "),e("td",[t._v("string|Function(record):string")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("key")])])]),t._v(" "),e("tr",[e("td",[t._v("loading")]),t._v(" "),e("td",[t._v("Shows a loading indicator while the contents of the list are being fetched")]),t._v(" "),e("td",[t._v("boolean|"),e("a",{attrs:{href:"https://www.antdv.com/components/spin/#API"}},[t._v("object")])]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("loadMore")]),t._v(" "),e("td",[t._v("Shows a load more content")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("locale")]),t._v(" "),e("td",[t._v("i18n text including empty text")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[t._v("emptyText: 'No Data' "),e("br")])]),t._v(" "),e("tr",[e("td",[t._v("pagination")]),t._v(" "),e("td",[t._v("Pagination "),e("a",{attrs:{href:"https://www.antdv.com/components/pagination/#API"}},[t._v("config")]),t._v(", hide it by setting it to false")]),t._v(" "),e("td",[t._v("boolean | object")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("split")]),t._v(" "),e("td",[t._v("Toggles rendering of the split under the list item")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("true")])]),t._v(" "),e("tr",[e("td",[t._v("renderItem")]),t._v(" "),e("td",[t._v('Custom item renderer, slot="renderItem" and slot-scope="item, index"')]),t._v(" "),e("td",[t._v("(item, index) => vNode")]),t._v(" "),e("td")])])]),t._v(" "),e("h3",{attrs:{id:"pagination"}},[t._v("pagination "),e("a",{staticClass:"anchor",attrs:{href:"#pagination"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Properties for pagination.")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("position")]),t._v(" "),e("td",[t._v("specify the position of "),e("code",{pre:!0},[t._v("Pagination")])]),t._v(" "),e("td",[t._v("'top' | 'bottom' | 'both'")]),t._v(" "),e("td",[t._v("'bottom'")])])])]),t._v(" "),e("p",[t._v("More about pagination, please check "),e("a",{attrs:{href:"https://www.antdv.com/components/pagination/#API"}},[e("code",{pre:!0},[t._v("Pagination")])]),t._v(".")]),t._v(" "),e("h3",{attrs:{id:"List-grid-props"}},[t._v("List grid props "),e("a",{staticClass:"anchor",attrs:{href:"#List-grid-props"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("column")]),t._v(" "),e("td",[t._v("column of grid")]),t._v(" "),e("td",[t._v("number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("gutter")]),t._v(" "),e("td",[t._v("spacing between grid")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("0")])]),t._v(" "),e("tr",[e("td",[t._v("size")]),t._v(" "),e("td",[t._v("Size of list")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("default")]),t._v(" | "),e("code",{pre:!0},[t._v("middle")]),t._v(" | "),e("code",{pre:!0},[t._v("small")])]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("default")])])]),t._v(" "),e("tr",[e("td",[t._v("xs")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("<576px")]),t._v(" column of grid")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("sm")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥576px")]),t._v(" column of grid")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("md")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥768px")]),t._v(" column of grid")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("lg")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥992px")]),t._v(" column of grid")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("xl")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥1200px")]),t._v(" column of grid")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("xxl")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("≥1600px")]),t._v(" column of grid")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"List.Item"}},[t._v("List.Item "),e("a",{staticClass:"anchor",attrs:{href:"#List.Item"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("actions")]),t._v(" "),e("td",[t._v("The actions content of list item. If "),e("code",{pre:!0},[t._v("itemLayout")]),t._v(" is "),e("code",{pre:!0},[t._v("vertical")]),t._v(", shows the content on bottom, otherwise shows content on the far right.")]),t._v(" "),e("td",[t._v("Array<vNode>|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("extra")]),t._v(" "),e("td",[t._v("The extra content of list item. If "),e("code",{pre:!0},[t._v("itemLayout")]),t._v(" is "),e("code",{pre:!0},[t._v("vertical")]),t._v(", shows the content on right, otherwise shows content on the far right.")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"List.Item.Meta"}},[t._v("List.Item.Meta "),e("a",{staticClass:"anchor",attrs:{href:"#List.Item.Meta"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("avatar")]),t._v(" "),e("td",[t._v("The avatar of list item")]),t._v(" "),e("td",[t._v("slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("description")]),t._v(" "),e("td",[t._v("The description of list item")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("title")]),t._v(" "),e("td",[t._v("The title of list item")]),t._v(" "),e("td",[t._v("string|slot")]),t._v(" "),e("td",[t._v("-")])])])])])}],!1,null,null,null);Z.options.__file="components/list/index.en-US.md";var tt=Z.exports,st="# 列表\n  通用列表。\n## 何时使用\n最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。\n        ## 代码演示",et="# List\n  Simple List.\n\n## When To Use\n\nA list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.\n  ## Examples\n  ",nt={category:"Components",type:"Data Display",title:"List",subtitle:"列表",cols:1,render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:st,us:et}}),t(o),t(p),t(L),t(V),t(F),t(W),t(y),t(T),t("api",[t("template",{slot:"cn"},[t(J)]),t(tt)])])}},at=Object(l.a)(nt,void 0,void 0,!1,null,null,null);at.options.__file="components/list/demo/index.vue";s.default=at.exports}}]);