@tarojs/components
Version:
1 lines • 11.1 kB
JavaScript
import{__spreadArray}from"tslib";import{h,r as registerInstance,c as createEvent,H as Host,g as getElement}from"./index-ab3c86da.js";import{stripSuffix,stripBasename,addLeadingSlash,getCurrentPage}from"@tarojs/runtime";import Taro from"@tarojs/taro";import{c as classnames}from"./index-c3e4004b.js";import resolvePathname from"resolve-pathname";import{a as isVisible}from"./index-a00a7418.js";var splitUrl=function(e){var t=e||"";var a;var r={path:null,query:null,fragment:null};a=t.indexOf("#");if(a>-1){r.fragment=t.substring(a+1);t=t.substring(0,a)}a=t.indexOf("?");if(a>-1){r.query=t.substring(a+1);t=t.substring(0,a)}r.path=t;return r};var TabbarItem=function(e){var t=e.index,a=e.isSelected,r=a===void 0?false:a,o=e.textColor,i=e.iconPath,n=e.badgeText,s=e.showRedDot,l=s===void 0?false:s,b=e.pagePath,d=e.text,c=e.onSelect;var f=classnames("weui-tabbar__item",{"weui-bar__item_on":r});var u={position:"absolute",top:"-2px",right:"-13px"};var g={position:"absolute",top:"0",right:"-6px"};function m(){var e=Taro.getCurrentPages().shift();if(typeof(e===null||e===void 0?void 0:e.onTabItemTap)==="function"&&isVisible(this)){e.onTabItemTap({index:t,pagePath:b,text:d})}c(t)}return h("a",{key:t,href:"javascript:;",class:f,onClick:m},h("span",{style:{display:"inline-block",position:"relative"}},h("img",{src:i,alt:"",class:"weui-tabbar__icon"}),!!n&&h("span",{class:"weui-badge taro-tabbar-badge",style:u},n),l&&h("span",{class:"weui-badge weui-badge_dot",style:g})),h("p",{class:"weui-tabbar__label",style:{color:o}},d))};var indexCss='.weui-tabbar{z-index:500;background-color:#f7f7fa;-ms-flex-align:center;align-items:center;width:100%;display:-ms-flexbox;display:flex;position:absolute;bottom:0}.weui-tabbar:before{content:" ";color:#c0bfc4;-webkit-transform-origin:0 0;transform-origin:0 0;border-top:1px solid #c0bfc4;height:1px;position:absolute;top:0;left:0;right:0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-tabbar__item{padding:5px 0;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);color:#999;text-align:center;-webkit-tap-highlight-color:transparent;-ms-flex:1;flex:1;font-size:0;display:block}.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{color:#09bb07}.weui-tabbar__icon{width:27px;height:27px;display:inline-block}.weui-tabbar__icon img{width:100%;height:100%}i.weui-tabbar__icon,.weui-tabbar__icon>i{color:#999;font-size:24px}.weui-tabbar__label{text-align:center;color:#999;font-size:10px;line-height:1.8}.weui-badge{color:#fff;text-align:center;vertical-align:middle;background-color:#f43530;border-radius:18px;min-width:8px;padding:.15em .4em;font-size:12px;line-height:1.2;display:inline-block}.weui-badge_dot{min-width:0;padding:.4em}html,body{height:100%}:root{--taro-tabbar-height:50px}#app{height:100%}.taro-tabbar__border-white:before{border-top-color:#fff!important}.taro-tabbar__container{-ms-flex-direction:column;flex-direction:column;height:100%;display:-ms-flexbox;display:flex;overflow:hidden}.taro-tabbar__panel{-webkit-overflow-scrolling:auto;-ms-flex:1;flex:1;position:relative;overflow:auto}.taro-tabbar__tabbar{height:var(--taro-tabbar-height);width:100%;-webkit-transition:bottom .2s,top .2s;transition:bottom .2s,top .2s;position:relative}.taro-tabbar__tabbar-top{top:0}.taro-tabbar__tabbar-bottom{margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom);bottom:0}.taro-tabbar__tabbar-hide{display:none}.taro-tabbar__tabbar-slideout{-ms-flex:0 0;flex:0 0;top:-52px}.taro-tabbar__panel+.taro-tabbar__tabbar-slideout{top:auto;bottom:-52px}';var STATUS_SHOW=0;var STATUS_HIDE=1;var STATUS_SLIDEOUT=2;var basicTabBarClassName="taro-tabbar__tabbar";var hideTabBarClassName="taro-tabbar__tabbar-hide";var hideTabBarWithAnimationClassName="taro-tabbar__tabbar-slideout";var Tabbar=function(){function e(e){var t=this;registerInstance(this,e);this.onLongPress=createEvent(this,"longpress",7);this.homePage="";this.customRoutes=[];this.tabbarPos="bottom";this.getOriginUrl=function(e){var a=t.customRoutes.filter((function(t){var a=t[1];var r=splitUrl(a).path;var o=splitUrl(e).path;return r===o}));return stripSuffix(a.length?a[0][0]:e,".html")};this.getSelectedIndex=function(e){var a=-1;t.list.forEach((function(t,r){var o=t.pagePath;var i=splitUrl(e).path;var n=splitUrl(o).path;if(i===n){a=r}}));return a};this.switchTab=function(e){t.selectedIndex=e;Taro.switchTab({url:t.list[e].pagePath})};this.switchTabHandler=function(e){var a=e.url,r=e.successHandler,o=e.errorHandler;var i=t.getOriginUrl(t.getCurrentUrl()||t.homePage);var n=resolvePathname(a,i);var s=t.getSelectedIndex(n);if(s>-1){t.switchTab(s);r({errMsg:"switchTab:ok"})}else{o({errMsg:'switchTab:fail page "'.concat(n,'" is not found')})}};this.routerChangeHandler=function(e){var a;var r=(a=e===null||e===void 0?void 0:e.toLocation)===null||a===void 0?void 0:a.path;var o;if(typeof r==="string"){var i=t.conf.basename||"/";o=stripBasename(addLeadingSlash(r||t.homePage),i)||"/"}else{o=t.getCurrentUrl()}t.selectedIndex=t.getSelectedIndex(t.getOriginUrl(o))};this.setTabBarBadgeHandler=function(e){var a=e.index,r=e.text,o=e.successHandler,i=e.errorHandler;var n=__spreadArray([],t.list,true);if(a in n){n[a].showRedDot=false;n[a].badgeText=r;o({errMsg:"setTabBarBadge:ok"})}else{i({errMsg:"setTabBarBadge:fail tabbar item not found"})}t.list=n};this.removeTabBarBadgeHandler=function(e){var a=e.index,r=e.successHandler,o=e.errorHandler;var i=__spreadArray([],t.list,true);if(a in i){i[a].badgeText=null;i[a].badgeText=null;r({errMsg:"removeTabBarBadge:ok"})}else{o({errMsg:"removeTabBarBadge:fail tabbar item not found"})}t.list=i};this.showTabBarRedDotHandler=function(e){var a=e.index,r=e.successHandler,o=e.errorHandler;var i=__spreadArray([],t.list,true);if(a in i){i[a].badgeText=null;i[a].showRedDot=true;r({errMsg:"showTabBarRedDot:ok"})}else{o({errMsg:"showTabBarRedDot:fail tabbar item not found"})}t.list=i};this.hideTabBarRedDotHandler=function(e){var a=e.index,r=e.successHandler,o=e.errorHandler;var i=__spreadArray([],t.list,true);if(a in i){i[a].showRedDot=false;r({errMsg:"hideTabBarRedDot:ok"})}else{o({errMsg:"hideTabBarRedDot:fail tabbar item not found"})}t.list=i};this.showTabBarHandler=function(e){var a=e.successHandler;t.status=STATUS_SHOW;a({errMsg:"showTabBar:ok"})};this.hideTabBarHandler=function(e){var a=e.animation,r=e.successHandler;t.status=a?STATUS_SLIDEOUT:STATUS_HIDE;r({errMsg:"hideTabBar:ok"})};this.setTabBarStyleHandler=function(e){var a=e.color,r=e.selectedColor,o=e.backgroundColor,i=e.borderStyle,n=e.successHandler;if(o)t.backgroundColor=o;if(i)t.borderStyle=i;if(a)t.color=a;if(r)t.selectedColor=r;n({errMsg:"setTabBarStyle:ok"})};this.setTabBarItemHandler=function(e){var a=e.index,r=e.iconPath,o=e.selectedIconPath,i=e.text,n=e.successHandler,s=e.errorHandler;var l=__spreadArray([],t.list,true);if(a in l){if(r)l[a].iconPath=r;if(o)l[a].selectedIconPath=o;if(i)l[a].text=i;n({errMsg:"setTabBarItem:ok"})}else{s({errMsg:"setTabBarItem:fail tabbar item not found"})}t.list=l};this.conf=undefined;this.list=undefined;this.borderStyle=undefined;this.backgroundColor=undefined;this.color=undefined;this.selectedColor=undefined;this.selectedIndex=-1;this.status=STATUS_SHOW}e.prototype.componentWillLoad=function(){var e,t;var a=((e=this.conf)===null||e===void 0?void 0:e.list)||[];var r=((t=this.conf)===null||t===void 0?void 0:t.customRoutes)||{};if(Object.prototype.toString.call(a)!=="[object Array]"||a.length<2||a.length>5){throw new Error("tabBar 配置错误")}this.homePage=addLeadingSlash(this.conf.homePage);var o=function(e){var t;var a=r[e];e=addLeadingSlash(e);if(typeof a==="string"){i.customRoutes.push([e,addLeadingSlash(a)])}else if((a===null||a===void 0?void 0:a.length)>0){(t=i.customRoutes).push.apply(t,a.map((function(t){return[e,addLeadingSlash(t)]})))}};var i=this;for(var n in r){o(n)}a.forEach((function(e){if(e.pagePath.indexOf("/")!==0){e.pagePath="/"+e.pagePath}}));this.list=a;this.borderStyle=this.conf.borderStyle;this.backgroundColor=this.conf.backgroundColor;this.color=this.conf.color;this.selectedColor=this.conf.selectedColor};e.prototype.getCurrentUrl=function(){var e=getCurrentPage(this.conf.mode,this.conf.basename);return decodeURI(e==="/"?this.homePage:e)};e.prototype.bindEvent=function(){Taro.eventCenter.on("__taroRouterChange",this.routerChangeHandler);Taro.eventCenter.on("__taroSwitchTab",this.switchTabHandler);Taro.eventCenter.on("__taroSetTabBarBadge",this.setTabBarBadgeHandler);Taro.eventCenter.on("__taroRemoveTabBarBadge",this.removeTabBarBadgeHandler);Taro.eventCenter.on("__taroShowTabBarRedDotHandler",this.showTabBarRedDotHandler);Taro.eventCenter.on("__taroHideTabBarRedDotHandler",this.hideTabBarRedDotHandler);Taro.eventCenter.on("__taroShowTabBar",this.showTabBarHandler);Taro.eventCenter.on("__taroHideTabBar",this.hideTabBarHandler);Taro.eventCenter.on("__taroSetTabBarStyle",this.setTabBarStyleHandler);Taro.eventCenter.on("__taroSetTabBarItem",this.setTabBarItemHandler)};e.prototype.removeEvent=function(){Taro.eventCenter.off("__taroRouterChange",this.routerChangeHandler);Taro.eventCenter.off("__taroSwitchTab",this.switchTabHandler);Taro.eventCenter.off("__taroSetTabBarBadge",this.setTabBarBadgeHandler);Taro.eventCenter.off("__taroRemoveTabBarBadge",this.removeTabBarBadgeHandler);Taro.eventCenter.off("__taroShowTabBarRedDotHandler",this.showTabBarRedDotHandler);Taro.eventCenter.off("__taroHideTabBarRedDotHandler",this.hideTabBarRedDotHandler);Taro.eventCenter.off("__taroShowTabBar",this.showTabBarHandler);Taro.eventCenter.off("__taroHideTabBar",this.hideTabBarHandler);Taro.eventCenter.off("__taroSetTabBarStyle",this.setTabBarStyleHandler);Taro.eventCenter.off("__taroSetTabBarItem",this.setTabBarItemHandler)};e.prototype.componentDidLoad=function(){this.tabbarPos=this.tabbar.nextElementSibling?"top":"bottom";this.bindEvent();this.routerChangeHandler()};e.prototype.disconnectedCallback=function(){this.removeEvent()};e.prototype.render=function(){var e,t;var a=this;var r=this.tabbarPos,o=r===void 0?"bottom":r;var i=this.status;var n=classnames("weui-tabbar",(e={},e["taro-tabbar__border-".concat(this.borderStyle||"black")]=true,e));var s=this.selectedIndex===-1||i===STATUS_HIDE;var l=i===STATUS_SLIDEOUT;return h(Host,{class:classnames(basicTabBarClassName,"".concat(basicTabBarClassName,"-").concat(o),(t={},t[hideTabBarClassName]=s,t[hideTabBarWithAnimationClassName]=l,t))},h("div",{class:n,style:{backgroundColor:this.backgroundColor||"",height:"inherit"}},this.list.map((function(e,t){var r=a.selectedIndex===t;var o;var i;if(r){o=a.selectedColor||"";i=e.selectedIconPath}else{o=a.color||"";i=e.iconPath}return h(TabbarItem,{index:t,onSelect:a.switchTab.bind(a),isSelected:r,textColor:o,iconPath:i,pagePath:e.pagePath,text:e.text,badgeText:e.badgeText,showRedDot:e.showRedDot})}))))};Object.defineProperty(e.prototype,"tabbar",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();Tabbar.style=indexCss;export{Tabbar as taro_tabbar};