@xysfe/actui/es/IndexList/index.js

A fantastic mobile ui lib implement by Vue

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("@xysfe/actui/es/assets/utils/create/index.js"),require("@xysfe/actui/es/assets/mixins/visible.js")):"function"==typeof define&&define.amd?define(["@xysfe/actui/es/assets/utils/create/index.js","@xysfe/actui/es/assets/mixins/visible.js"],e):"object"==typeof exports?exports.IndexList=e(require("@xysfe/actui/es/assets/utils/create/index.js"),require("@xysfe/actui/es/assets/mixins/visible.js")):t.IndexList=e(t["@xysfe/actui/es/assets/utils/create/index.js"],t["@xysfe/actui/es/assets/mixins/visible.js"])}("undefined"!=typeof self?self:this,function(t,e){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="../es",e(e.s=1860)}({1182:function(t,e,n){"use strict";var i=n(40),s=n.n(i);e.a={name:"ActIndexList",mixins:[s.a],props:{zIndex:{type:Number,default:200},brandColor:{type:String,default:"#8c7fee"},listData:{type:Array,default:function(){return[]}}},data:function(){return{currentIndex:0,moving:!1,currentIndicator:""}},watch:{isVisible:function(t){var e=this;t&&this.$nextTick(function(){e._calculateHeight()})},currentIndex:function(t){var e=this;clearTimeout(this.timer),this.currentIndicator=this.indexList[this.currentIndex],this.moving=!0,this.timer=setTimeout(function(){e.moving=!1},1e3)}},computed:{indexList:function(){return this.listData.map(function(t){return t.title.substring(0,1)})}},created:function(){this.listHeight=[],this.timer=null,this.scrollTimer=null},methods:{_calculateHeight:function(){this.listHeight=[];var t=this.$refs.indexGroup,e=0;if(this.listHeight.push(e),t.length)for(var n=0;n<t.length;n++){var i=t[n];e+=i.clientHeight,this.listHeight.push(e)}},_onTouchStartIndex:function(t){this.currentIndex=t,this.$refs.indexWrap.scrollTop=this.listHeight[t]},_onTouchMoveIndex:function(t){var e=t.targetTouches[0],n=document.elementFromPoint(e.pageX,e.pageY),i=n.dataset&&n.dataset.index||void 0;i&&(this.currentIndex=i,this.$refs.indexWrap.scrollTop=this.listHeight[i])},clickItem:function(t){this.$emit("choose",t),this.hide()},onListWrapScroll:function(t){var e=this;clearTimeout(this.scrollTimer),this.scrollTimer=setTimeout(function(){for(var t=e.$refs.indexWrap.scrollTop,n=e.listHeight,i=0;i<n.length-1;i++)if(t<=n[i+1]-30&&t>=n[i])return void(e.currentIndex=i)},20)}},destroyed:function(){clearTimeout(this.timer),clearTimeout(this.scrollTimer)}}},1860:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(26),s=n.n(i),r=n(1861);r.a.install=function(t){t.component(r.a.name,r.a),t.prototype.$createIndexList=s()(r.a,t)},e.default=r.a},1861:function(t,e,n){"use strict";function i(t){a||n(1862)}var s=n(1182),r=n(1863),o=n(7),a=!1,c=i,u=Object(o.a)(s.a,r.a,r.b,!1,c,"data-v-7b7684a4",null);u.options.__file="src\\components\\IndexList\\src\\index.vue",e.a=u.exports},1862:function(t,e){},1863:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return s});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:t.isVisible,expression:"isVisible"}],staticClass:"index-list",style:"z-index: "+t.zIndex},[n("ul",{ref:"indexWrap",staticClass:"index-list-wrap",on:{scroll:function(e){return e.preventDefault(),t.onListWrapScroll.apply(null,arguments)}}},t._l(t.listData,function(e,i){return n("li",{key:i,ref:"indexGroup",refInFor:!0,staticClass:"index-group"},[n("h3",{staticClass:"index-group-title"},[t._v("\n        "+t._s(e.title)+"\n      ")]),t._v(" "),n("ul",t._l(e.items,function(e,i){return n("li",{key:i,staticClass:"index-group-item",on:{click:function(n){return t.clickItem(e)}}},[n("img",{directives:[{name:"show",rawName:"v-show",value:e.avatar,expression:"item.avatar"}],staticClass:"avatar",attrs:{src:e.avatar,alt:""}}),t._v(" "),n("span",{staticClass:"name"},[t._v("\n            "+t._s(e.name)+"\n          ")])])}),0)])}),0),t._v(" "),n("div",{staticClass:"index-nav",style:"z-index: "+(t.zIndex+1)},[n("ul",t._l(t.indexList,function(e,i){return n("li",{key:i,staticClass:"nav-item",class:{active:t.currentIndex===i},style:"background: "+(t.currentIndex===i?t.brandColor:""),attrs:{"data-index":i},on:{touchmove:function(e){return e.preventDefault(),t._onTouchMoveIndex.apply(null,arguments)},touchstart:function(e){return e.preventDefault(),t._onTouchStartIndex(i)}}},[t._v("\n        "+t._s(e)+"\n      ")])}),0)]),t._v(" "),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.moving,expression:"moving"}],staticClass:"index-indicator"},[t._v("\n      "+t._s(t.currentIndicator)+"\n    ")])])],1)},s=[];i._withStripped=!0},26:function(e,n){e.exports=t},40:function(t,n){t.exports=e},7:function(t,e,n){"use strict";function i(t,e,n,i,s,r,o,a){t=t||{};var c=typeof t.default;"object"!==c&&"function"!==c||(t=t.default);var u="function"==typeof t?t.options:t;e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),i&&(u.functional=!0),r&&(u._scopeId=r);var l;if(o?(l=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=l):s&&(l=a?function(){s.call(this,this.$root.$options.shadowRoot)}:s),l)if(u.functional){u._injectStyles=l;var d=u.render;u.render=function(t,e){return l.call(e),d(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,l):[l]}return{exports:t,options:u}}e.a=i}})});