6 lines
171 KiB
JavaScript
6 lines
171 KiB
JavaScript
(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}}]); |