vue-banner-better
Version:
better banner component for vue.js, easy to use
1 lines • 15.8 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueBanner=e():t.VueBanner=e()}(self,(function(){return function(){var t={38:function(t,e,n){"use strict";n.r(e);var i=n(645),o=n.n(i)()((function(t){return t[1]}));o.push([t.id,"[v-cloak][data-v-a2fea148] {\n display: none;\n}\n.b-bordered[data-v-a2fea148] {\n outline: 1px solid black;\n}\n.b-wrapper[data-v-a2fea148] {\n position: relative;\n margin: 10px auto;\n box-sizing: border-box;\n overflow: hidden;\n padding: 0;\n}\n.b-wrapper:hover .b-nav[data-v-a2fea148] {\n opacity: 1;\n}\n.b-wrapper .b-banner[data-v-a2fea148] {\n position: relative;\n height: 100%;\n display: flex;\n flex-direction: row;\n transform: translateX(0);\n transition: all ease-in;\n}\n.b-wrapper .b-banner .b-slide[data-v-a2fea148] {\n height: 100%;\n flex: 1;\n}\n.b-wrapper .b-pagination[data-v-a2fea148] {\n display: flex;\n align-items: center;\n width: 100%;\n position: absolute;\n bottom: 8px;\n}\n.b-wrapper .b-pagination .b-indicators[data-v-a2fea148] {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n padding-left: 10px;\n padding-right: 10px;\n}\n.b-wrapper .b-pagination .b-indicators .b-indicator[data-v-a2fea148] {\n flex: 1;\n flex-wrap: nowrap;\n height: 15px;\n width: 15px;\n margin: 4px;\n font-size: 50%;\n box-sizing: border-box;\n border: none;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.b-wrapper .b-pagination .b-indicators .b-indicator.b-square[data-v-a2fea148] {\n border: none;\n}\n.b-wrapper .b-pagination .b-indicators .b-indicator.b-circle[data-v-a2fea148] {\n border-radius: 50%;\n}\n.b-wrapper .b-pagination .b-indicators .b-indicator.b-bar[data-v-a2fea148] {\n width: 25px;\n height: 5px;\n}\n.b-wrapper .b-pagination .b-indicators .b-indicator.b-pill[data-v-a2fea148] {\n width: 25px;\n height: 5px;\n border-radius: 5px;\n}\n.b-wrapper .b-pagination .b-indicators .b-indicator.b-pointer[data-v-a2fea148] {\n cursor: pointer;\n}\n.b-wrapper .b-nav[data-v-a2fea148] {\n position: absolute;\n text-align: center;\n width: 30px;\n height: 45px;\n top: 50%;\n opacity: 0;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.5s ease-in;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 30px;\n font-weight: bold;\n color: rgba(255, 255, 255, 0.6);\n}\n.b-wrapper .b-nav[data-v-a2fea148]::-moz-selection {\n background: none;\n}\n.b-wrapper .b-nav[data-v-a2fea148]::selection {\n background: none;\n}\n.b-wrapper .b-nav.b-left-arrow[data-v-a2fea148] {\n left: 0;\n transform: translate(15%, -50%);\n}\n.b-wrapper .b-nav.b-right-arrow[data-v-a2fea148] {\n right: 0;\n transform: translate(-15%, -50%);\n}\n",""]),e.default=o},302:function(t,e,n){"use strict";n.r(e);var i=n(645),o=n.n(i)()((function(t){return t[1]}));o.push([t.id,".b-slide[data-v-81662d9e] :first-child {\n width: 100%;\n height: 100%;\n}\n",""]),e.default=o},645:function(t){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=t(e);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,i){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(i)for(var r=0;r<this.length;r++){var a=this[r][0];null!=a&&(o[a]=!0)}for(var s=0;s<t.length;s++){var d=[].concat(t[s]);i&&o[d[0]]||(n&&(d[2]?d[2]="".concat(n," and ").concat(d[2]):d[2]=n),e.push(d))}},e}},206:function(t,e,n){var i=n(38);i.__esModule&&(i=i.default),"string"==typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);(0,n(346).Z)("8b5a48a2",i,!1,{})},136:function(t,e,n){var i=n(302);i.__esModule&&(i=i.default),"string"==typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);(0,n(346).Z)("672ed75c",i,!1,{})},346:function(t,e,n){"use strict";function i(t,e){for(var n=[],i={},o=0;o<e.length;o++){var r=e[o],a=r[0],s={id:t+":"+o,css:r[1],media:r[2],sourceMap:r[3]};i[a]?i[a].parts.push(s):n.push(i[a]={id:a,parts:[s]})}return n}n.d(e,{Z:function(){return h}});var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var r={},a=o&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,l=!1,c=function(){},u=null,p="data-vue-ssr-id",f="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(t,e,n,o){l=n,u=o||{};var a=i(t,e);return v(a),function(e){for(var n=[],o=0;o<a.length;o++){var s=a[o];(d=r[s.id]).refs--,n.push(d)}e?v(a=i(t,e)):a=[];for(o=0;o<n.length;o++){var d;if(0===(d=n[o]).refs){for(var l=0;l<d.parts.length;l++)d.parts[l]();delete r[d.id]}}}}function v(t){for(var e=0;e<t.length;e++){var n=t[e],i=r[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(g(n.parts[o]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var a=[];for(o=0;o<n.parts.length;o++)a.push(g(n.parts[o]));r[n.id]={id:n.id,refs:1,parts:a}}}}function b(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function g(t){var e,n,i=document.querySelector("style["+p+'~="'+t.id+'"]');if(i){if(l)return c;i.parentNode.removeChild(i)}if(f){var o=d++;i=s||(s=b()),e=y.bind(null,i,o,!1),n=y.bind(null,i,o,!0)}else i=b(),e=w.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var m,x=(m=[],function(t,e){return m[t]=e,m.filter(Boolean).join("\n")});function y(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=x(e,o);else{var r=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(r,a[e]):t.appendChild(r)}}function w(t,e){var n=e.css,i=e.media,o=e.sourceMap;if(i&&t.setAttribute("media",i),u.ssrId&&t.setAttribute(p,e.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}}},e={};function n(i){var o=e[i];if(void 0!==o)return o.exports;var r=e[i]={id:i,exports:{}};return t[i](r,r.exports,n),r.exports}n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,{a:e}),e},n.d=function(t,e){for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return function(){"use strict";n.r(i),n.d(i,{Banner:function(){return l},Slide:function(){return f},default:function(){return h}});var t=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["b-wrapper",t.bordered?"b-bordered":""],style:{width:t.width,height:t.height},on:{mouseover:function(e){t.disableOnHover&&t.over(e)},mouseout:function(e){t.disableOnHover&&t.out()}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:!t.didOk,expression:"!didOk"}],staticClass:"b-layout-placeholder"}),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.didOk,expression:"didOk"}],ref:"banner",staticClass:"b-banner",style:{width:t.wraperWidth+"px",transform:"translateX("+t.offset+"px)","transition-duration":t.stopTransition?"0s":"500ms"}},[t._t("default")],2),t._v(" "),t.PAGINATION.align&&t.slideCount?n("div",{staticClass:"b-pagination",style:{"justify-content":"center"!=t.PAGINATION.align?"flex-"+t.PAGINATION.align:"center"},on:{mouseover:function(e){return t.overPagenation(e)}}},[n("ul",{staticClass:"b-indicators"},t._l(Array("loop"==t.mode?t.slideCount-2>0?t.slideCount-2:1:t.slideCount),(function(e,i){return n("li",{key:i,class:["b-indicator",t.PAGINATION.clickable?"b-pointer":"","b-"+t.PAGINATION.type],style:{backgroundColor:i==t.cur-1?t.PAGINATION.activeColor:t.PAGINATION.color,color:i==t.cur-1?t.PAGINATION.activeTextColor:t.PAGINATION.textColor},on:{click:function(e){t.PAGINATION.clickable&&("loop"==t.mode?t.goLoop(i+1):t.go(i))}}},[t._v(t._s(t.PAGINATION.showCounter?i+1:""))])})),0)]):t._e(),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:!!t.showNavigation&&("loop"==t.mode||0!=t.activeIndex),expression:"\n showNavigation ? (mode != 'loop' ? activeIndex != 0 : true) : false\n "}],staticClass:"b-nav b-left-arrow",on:{click:function(e){"loop"==t.mode?t.debouncedPrevLoop():t.prev()}}},[t._v("<")]),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:!!t.showNavigation&&("loop"==t.mode||t.activeIndex!=t.slideCount-1),expression:"\n showNavigation\n ? mode != 'loop'\n ? activeIndex != slideCount - 1\n : true\n : false\n "}],staticClass:"b-nav b-right-arrow",on:{click:function(e){"loop"==t.mode?t.debouncedNextLoop():t.next()}}},[t._v(">")])])};t._withStripped=!0;var e={align:"center",clickable:!0,type:"bar",color:"rgba(255,255,255,0.6)",activeColor:"rgba(0,0,0,0.3)",textColor:"#000",activeTextColor:"rgba(255,255,255,0.6)",showCounter:!1};function o(t,e,n){var i=(new Date).getTime();return function(){var o=(new Date).getTime();if(o-i>e){var r=Array.prototype.slice.call(arguments);t.apply(n,r),i=o}}}function r(t){return(r="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})(t)}var a={name:"Banner",data:function(){return{containerWidth:600,activeIndex:0,timer:null,slideCount:20,flag:!0,loopcurindex:1,stopTransition:!1,PAGINATION:{},shouldPause:!1,didOk:!1}},beforeMount:function(){var t=this.$props.indicator;"object"===r(t)?this.PAGINATION=Object.assign({},e,t):"boolean"==typeof t&&t&&(this.PAGINATION=e)},props:{width:{type:String,default:"800px"},height:{type:String,default:"400px"},bordered:{type:Boolean,default:!1},mode:{type:String,default:"loop",validator:function(t){if(!["alternate","loop"].includes(t))throw new TypeError("invalid prop value for 'mode', expects 'alternate' or 'loop' but received '".concat(t,"'"));return!0}},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicator:{type:[Object,Boolean],validator:function(t){var e="object"===r(t);if(!e&&!("boolean"==typeof t))throw new TypeError("invalid prop type for 'indicator'");if(e){if(t.type&&!["bar","circle","square","pill"].includes(t.type))throw new TypeError("invalid prop value for 'indicator.type'");if(t.align&&!["center","start","end"].includes(t.align))throw new TypeError("invalid prop value for 'indicator.align'")}return!0}},"show-navigation":{type:Boolean,default:!0},"disable-on-hover":{type:Boolean,default:!0}},computed:{offset:function(){return-this.activeIndex*this.containerWidth},wraperWidth:function(){return this.containerWidth*this.slideCount},cur:function(){return this.slideCount>1?"loop"==this.$props.mode?this.loopcurindex:this.activeIndex+1:1}},mounted:function(){var t=this.$refs.banner;this.containerWidth=t.parentNode.offsetWidth;var e=t.children;if(0==e.length)throw new Error("The banner component must contain at least one slide component");if(Array.prototype.slice.call(e).some((function(t){return!t.classList.contains("b-slide")})))throw new Error("The direct child element of Banner component can only be Slide component");"loop"==this.mode&&(e.length>1&&(t.appendChild(e[0].cloneNode(!0)),t.insertBefore(e[e.length-2].cloneNode(!0),e[0]),this.activeIndex=1),this.debouncedPrevLoop=o(this.prevLoop,500,this),this.debouncedNextLoop=o(this.nextLoop,500,this),t.addEventListener("transitionend",this.TREnd,!1)),this.didOk=!0,1==this.autoplay&&e.length>1&&this.start(),this.slideCount=t.children.length},beforeDestroy:function(){this.cancel(),this.$refs.banner.removeEventListener("transitionend",this.TREnd,!1)},methods:{start:function(){this.cancel(),this.shouldPause||(this.timer=setInterval(this.move.bind(this),this.interval))},cancel:function(){clearInterval(this.timer)},over:function(t){this.slideCount<2||(t.target.classList.contains("b-nav")||this.cancel())},out:function(){this.slideCount<2||1==this.autoplay&&this.start()},move:function(){if(!this.shouldPause)switch(this.mode){case"loop":this.nextLoop();break;case"alternate":this.alternate();break;default:throw new TypeError("unknow option ".concat(this.mode," for 'mode'!"))}},next:function(){if(!(this.slideCount<2)){var t=this.activeIndex+1;this.go(t)}},nextLoop:function(){var t=this;if(!(this.slideCount<2)){this.shouldPause=!0,this.cancel(),1==this.activeIndex&&(this.stopTransition=!1),this.activeIndex==this.slideCount-2&&(this.stopTransition=!1);var e=this.activeIndex+1;e>=this.slideCount&&(e=1),this.go(e),this.loopcurindex=e,e==this.slideCount-1&&(this.loopcurindex=1),this.autoplay&&this.$nextTick((function(){t.shouldPause=!1,t.start()}))}},TREnd:function(){this.activeIndex==this.slideCount-1?(this.stopTransition=!0,this.activeIndex=1):0==this.activeIndex&&(this.stopTransition=!0,this.activeIndex=this.slideCount-2)},prevLoop:function(){var t=this;if(!(this.slideCount<2)){this.shouldPause=!0,this.cancel(),this.activeIndex==this.slideCount-2&&(this.stopTransition=!1),1==this.activeIndex&&(this.stopTransition=!1);var e=this.activeIndex-1;e<=-1&&(e=this.slideCount-2),this.go(e),this.loopcurindex=e,e<=0&&(this.loopcurindex=this.slideCount-2),this.autoplay&&this.$nextTick((function(){t.shouldPause=!1,t.start()}))}},prev:function(){if(!(this.slideCount<2)){var t=this.activeIndex-1;this.go(t)}},alternate:function(){if(!(this.slideCount<2)){var t=this.activeIndex;this.flag?++t>=this.slideCount&&(this.flag=!1,t-=2):--t<=-1&&(this.flag=!0,t+=2),this.activeIndex=t}},go:function(t){var e=this;this.slideCount<2||(this.cancel(),this.activeIndex=t,1==this.autoplay&&this.$nextTick((function(){e.start()})))},goLoop:function(t){var e=this;this.slideCount<2||(this.cancel(),this.activeIndex=t,this.loopcurindex=t,2!=this.activeIndex&&this.activeIndex!=this.slideCount-2||(this.stopTransition=!1),1==this.autoplay&&this.$nextTick((function(){e.start()})))},overPagenation:function(t){t.stopPropagation(),t.preventDefault()}}};n(206);function s(t,e,n,i,o,r,a,s){var d,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),r&&(l._scopeId="data-v-"+r),a?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=d):o&&(d=s?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),d)if(l.functional){l._injectStyles=d;var c=l.render;l.render=function(t,e){return d.call(e),c(t,e)}}else{var u=l.beforeCreate;l.beforeCreate=u?[].concat(u,d):[d]}return{exports:t,options:l}}var d=s(a,t,[],!1,null,"a2fea148",null);d.options.__file="src/components/Banner.vue";var l=d.exports,c=function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"b-slide"},[t._t("default")],2)};c._withStripped=!0;var u={name:"Slide",parent:l},p=(n(136),s(u,c,[],!1,null,"81662d9e",null));p.options.__file="src/components/Slide.vue";var f=p.exports,h={install:function(t){t.component(l.name,l),t.component(f.name,f)}}}(),i}()}));