UNPKG

nutui-by-zchuhyy

Version:

一套轻量级移动端Vue组件库

7 lines 11.3 kB
/*! * nutui-by-zchuhyy v0.0.16 - range.js, 7c15ab32fbfb9d26339f, Wed Mar 17 2021 16:52:20 GMT+0800 (GMT+08:00) * (c) 2017-2020 JDC * Released under the MIT License. */ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("range",[],e):"object"==typeof exports?exports.range=e():t.range=e()}("undefined"!=typeof self?self:this,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="./",n(n.s=154)}({0:function(t,e,n){"use strict";function i(t,e,n,i,r,o,a,s){var l,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),i&&(u.functional=!0),o&&(u._scopeId="data-v-"+o),a?(l=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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=l):r&&(l=s?function(){r.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(t,e){return l.call(e),c(t,e)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,l):[l]}return{exports:t,options:u}}n.d(e,"a",(function(){return i}))},154:function(t,e,n){"use strict";n.r(e);var i=n(53),r=n.n(i),o=n(3),a=n.n(o),s=n(52),l={name:"nut-range-bar",props:{direction:{type:String,default:"left"},range:{type:Array,validator:function(t){return 2===t.length&&t[1]>t[0]},default:function(){return[0,10]}},values:{type:Array,validator:function(t){return 2===t.length&&t[1]>=t[0]},default:function(){return[0,0]}},initLeft:{type:Number,default:0},showLabelAlways:{type:Boolean,default:!1},showLabel:{type:Boolean,default:!1},current:{type:Number,default:0},stage:{type:Number,default:0},ani:Boolean,mainColor:String,subColor:String},data:function(){return{box:null,posi:0,scheduledAnimationFrame:!1}},watch:{initLeft:function(t){this.posi=this.initLeft}},computed:{total:function(){return this.range[1]-this.range[0]}},methods:{onTouchStart:function(t){t.cancelable&&t.preventDefault(),this.$emit("update:ani",!0)},onTouchMove:function(t){var e=this;t.cancelable&&t.preventDefault(),this.scheduledAnimationFrame||(this.scheduledAnimationFrame=!0,Object(s.a)((function(){e.scheduledAnimationFrame=!1;var n=t.touches[0],i=document.documentElement.scrollLeft||document.body.scrollLeft;e.boxLeft=e.box.getBoundingClientRect().left;var r=n.pageX-e.boxLeft-i;e.setPosi(r,!1)})))},setPosi:function(t,e){t<0&&(t=0),t>this.box.clientWidth&&(t=this.box.clientWidth);var n=r()(this.values,2),i=n[0],o=n[1],a=r()(this.range,2),s=a[0];a[1];if("left"===this.direction){var l=o-s-1;t/this.box.clientWidth>=l/this.total?this.posi=l*(this.box.clientWidth/this.total):this.posi=t}if("right"===this.direction){var u=i-s+1;t/this.box.clientWidth<=u/this.total?this.posi=u*(this.box.clientWidth/this.total):this.posi=t}this.$emit("getPos",this.posi,e)},onTouchEnd:function(t){var e=this;t.preventDefault();var n=t.changedTouches[0],i=document.documentElement.scrollLeft||document.body.scrollLeft;this.boxLeft=this.box.getBoundingClientRect().left;var r=n.pageX-this.boxLeft-i;setTimeout((function(){e.setPosi(r,!0),e.$emit("update:ani",!1)}),50)},onClick:function(t){t.preventDefault();var e=document.documentElement.scrollLeft||document.body.scrollLeft;this.boxLeft=this.box.getBoundingClientRect().left;var n=t.pageX-this.boxLeft-e;this.posi=n,this.$emit("getPos",n)}},mounted:function(){this.box=this.$el.parentNode}},u=n(0),c=Object(u.a)(l,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["nut-range-Handle",{"nut-range-ani":t.ani}],style:{left:t.posi+"px",borderColor:t.mainColor,boxShadow:t.ani?"0 0 0 4px "+t.subColor:""},on:{touchstart:t.onTouchStart,touchmove:t.onTouchMove,touchend:t.onTouchEnd,click:t.onTouchEnd}},[t.showLabel?n("span",{class:["nut-range-label",{"nut-range-label-always":t.showLabelAlways}],style:{background:t.mainColor}},[n("span",{staticClass:"nut-range-after",style:{color:t.mainColor}},[t._v("▼")]),t._v("\n "+t._s(t.current)+"\n ")]):t._e()])}),[],!1,null,null,null).exports;function h(t,e){var n=/(rgb)(\(\d+,\s*\d+,\s*\d+)(\))/;return n.test(t)?t.replace(n,"$1"+(e?"a":"")+"$2"+(e?","+e:"")+"$3"):/^#[0-9a-f]+/.test(t)&&(4===t.length&&(t=t.replace(/^#(\d)(\d)(\d)/,"#$1$1$2$2$3$3")),7===t.length)?h("rgb("+parseInt(t.slice(1,3),16)+", "+parseInt(t.slice(3,5),16)+", "+parseInt(t.slice(5,7),16)+")",e):h("#ff0000",e)}var f={name:"nut-range",components:a()({},c.name,c),props:{rangeValues:{type:Array,validator:function(t){return 2===t.length&&t[1]>=t[0]},default:function(){return[0,0]}},color:String,showLabel:{type:Boolean,default:!1},showLabelAlways:{type:Boolean,default:!1},showRangeTxt:{type:Boolean,default:!1},range:{type:Array,validator:function(t){return 2===t.length&&t[1]>t[0]},default:function(){return[0,10]}},stage:{type:Number,default:1}},data:function(){return{box:null,boxLeft:0,initLeft1:0,initLeft2:0,currentLeft:0,currentRight:0,barleft1:0,barleft2:0,level:null,ani:!1,prevValues:[]}},watch:{range:function(){this.init()},rangeValues:function(){this.init()},ani:function(t){t&&(this.prevValues=this.rangeValues)}},computed:{total:function(){return this.range[1]-this.range[0]},cell:function(){return this.total/this.level},mainColor:function(){return this.color?h(this.color):""},boxColor:function(){return this.color?h(this.color,.3):""},subColor:function(){return this.color?h(this.color,.5):""}},methods:{init:function(){this.box=this.$el.querySelector(".nut-range-box"),this.propInit()},updateRangeValues:function(){var t=[this.currentLeft,this.currentRight];this.$emit("update:rangeValues",t)},getPosLeft:function(t,e){this.barleft1=t;var n=this.setCurrent(t),i=r()(this.prevValues,2),o=i[0];i[1];if(e)if(this.stage){var a=0;a=n>o?Math.ceil(n/this.stage):Math.floor(n/this.stage),this.currentLeft=a*this.stage}else this.currentLeft=n;else this.currentLeft=n;e&&this.updateRangeValues()},getPosRight:function(t,e){this.barleft2=t;var n=this.setCurrent(t),i=r()(this.prevValues,2),o=(i[0],i[1]);if(e)if(this.stage){var a=0;a=n>o?Math.ceil(n/this.stage):Math.floor(n/this.stage),this.currentRight=a*this.stage}else this.currentRight=n;else this.currentRight=n;e&&this.updateRangeValues()},setCurrent:function(t){var e=t/this.box.clientWidth*this.total/this.cell*this.cell+this.range[0];return e>this.range[1]-1?this.range[1]:e<this.range[0]+1?this.range[0]:Math.round(e)},setVal:function(t){var e=t/this.box.clientWidth*this.total;this.current=Math.round(e/this.cell)*this.cell+this.range[0],this.$emit("update:value",this.current)},valToPosi:function(t){return(t-this.range[0])*(this.box.clientWidth/this.total)},setPosi:function(t){t<0||t>this.box.clientWidth||(this.posi=t,this.setVal(t))},onClick:function(t){t.preventDefault();var e=document.documentElement.scrollLeft||document.body.scrollLeft;this.boxLeft=this.box.getBoundingClientRect().left;var n=t.pageX-this.boxLeft-e;this.setVal(n),this.posi=this.valToPosi()},propInit:function(){!this.stage||this.stage>this.range[1]-this.range[0]?this.level=this.range[1]-this.range[0]:this.level=this.stage,this.currentLeft=Math.max(this.rangeValues[0],this.range[0]),this.currentRight=Math.max(this.currentLeft,Math.min(this.rangeValues[1],this.range[1])),this.initLeft1=this.valToPosi(this.currentLeft),this.initLeft2=this.valToPosi(this.currentRight),this.barleft1=this.initLeft1,this.barleft2=this.initLeft2}},mounted:function(){var t=this;this.$nextTick((function(){t.init()}))}},d=Object(u.a)(f,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"nut-range"},[t.showRangeTxt?n("div",{staticClass:"nut-range-left-text"},[t._v(t._s(t.range[0]))]):t._e(),t._v(" "),n("div",{staticClass:"nut-range-box",style:{background:t.boxColor},on:{click:t.onClick}},[n("div",{staticClass:"nut-range-area",style:{width:Math.abs(t.barleft2-t.barleft1)+"px",left:Math.min(t.barleft2,t.barleft1)+"px",background:t.mainColor}}),t._v(" "),n("nut-range-bar",{attrs:{direction:"left",stage:t.stage,range:t.range,values:t.rangeValues,initLeft:t.initLeft1,showLabelAlways:t.showLabelAlways,showLabel:t.showLabel,current:t.currentLeft,ani:t.ani,mainColor:t.mainColor},on:{getPos:t.getPosLeft,"update:ani":function(e){t.ani=e}}}),t._v(" "),n("nut-range-bar",{attrs:{direction:"right",stage:t.stage,range:t.range,values:t.rangeValues,initLeft:t.initLeft2,showLabelAlways:t.showLabelAlways,showLabel:t.showLabel,current:t.currentRight,ani:t.ani,mainColor:t.mainColor},on:{getPos:t.getPosRight,"update:ani":function(e){t.ani=e}}})],1),t._v(" "),t.showRangeTxt?n("div",{staticClass:"nut-range-right-text"},[t._v(t._s(t.range[1]))]):t._e()])}),[],!1,null,null,null).exports;n(92);d.install=function(t){t.component(d.name,d)};e.default=d},3:function(t,e){t.exports=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}},44:function(t,e,n){var i=n(9);t.exports=function(t,e){if(t){if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}},52:function(t,e,n){"use strict";e.a="undefined"!=typeof window?window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}:function(t){setTimeout(t,1e3/60)}},53:function(t,e,n){var i=n(67),r=n(68),o=n(44),a=n(69);t.exports=function(t,e){return i(t)||r(t,e)||o(t,e)||a()}},67:function(t,e){t.exports=function(t){if(Array.isArray(t))return t}},68:function(t,e){t.exports=function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var n=[],i=!0,r=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);i=!0);}catch(t){r=!0,o=t}finally{try{i||null==s.return||s.return()}finally{if(r)throw o}}return n}}},69:function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}},9:function(t,e){t.exports=function(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}},92:function(t,e,n){}})})); //# sourceMappingURL=range.js.map