1 line
30 KiB
Plaintext
1 line
30 KiB
Plaintext
{"version":3,"sources":["webpack:///E:/云商会/云商会/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?143f","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?3337","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?4b9f","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?7faa","uni-app:///tuniao-ui/components/tn-tabbar/tn-tabbar.vue","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?ee8b","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-tabbar/tn-tabbar.vue?8359"],"names":["name","props","value","type","default","show","list","height","outHeight","bgColor","iconSize","fontSize","activeColor","inactiveColor","activeIconColor","inactiveIconColor","activeStyle","shadow","animation","animationMode","fixed","safeAreaInsetBottom","beforeSwitch","computed","elColor","color","elIconColor","elIcon","itemButtonClass","clazz","itemButtonStyle","console","style","isImage","data","outItemLeft","outItemIndex","tabbatItemInfo","watch","created","mounted","methods","getTabbarItem","query","size","rect","setTimeout","left","width","getOutItemIndex","clickItemHandler","switchTab","updateOutItemLeft"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAkI;AAClI;AAC6D;AACL;AACsC;;;AAG9F;AAC+L;AAC/L,gBAAgB,wMAAU;AAC1B,EAAE,+EAAM;AACR,EAAE,gGAAM;AACR,EAAE,yGAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,oGAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACvBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA,aAAa,4QAEN;AACP,KAAK;AACL;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,4BAA4B;AAC5B;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AC/EA;AAAA;AAAA;AAAA;AAAquB,CAAgB,0vBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBCkEzvB;EACAA;EACAC;IACA;IACAC;MACAC;MACAC;IACA;IACA;IACAC;MACAF;MACAC;IACA;IACA;IACAE;MACAH;MACAC;QACA;MACA;IACA;IACA;IACAG;MACAJ;MACAC;IACA;IACA;IACAI;MACAL;MACAC;IACA;IACA;IACAK;MACAN;MACAC;IACA;IACA;IACAM;MACAP;MACAC;IACA;IACA;IACAO;MACAR;MACAC;IACA;IACA;IACAQ;MACAT;MACAC;IACA;IACA;IACAS;MACAV;MACAC;IACA;IACA;IACAU;MACAX;MACAC;IACA;IACA;IACAW;MACAZ;MACAC;IACA;IACA;IACAY;MACAb;MACAC;QACA;MACA;IACA;IACA;IACAa;MACAd;MACAC;IACA;IACA;IACAc;MACAf;MACAC;IACA;IACA;IACAe;MACAhB;MACAC;IACA;IACA;IACAgB;MACAjB;MACAC;IACA;IACA;IACAiB;MACAlB;MACAC;IACA;IACA;IACAkB;MACAnB;MACAC;IACA;EACA;EACAmB;IACA;IACAC;MAAA;MACA;QAAA;QACA;QACA;QACA;UACAC;QACA;UACAA;QACA;QACA;QACA;UACA;YACA;UACA;YACA;UACA;QACA;UACA;YACA;UACA;YACA;UACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QAAA;QACA;QACA;QACA;UACAD;QACA;UACAA;QACA;QACA;QACA;UACA;YACA;UACA;YACA;UACA;QACA;UACA;YACA;UACA;YACA;UACA;QACA;MACA;IACA;IACA;IACAE;MAAA;MACA;QACA;QACA;UACA;QACA;UACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;QACA;UACAC;UACA;YACAA;UACA;UACA;YACAA;UACA;QACA;UACAA;UACA;YACAA;UACA;QACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;QACAC;QACA;UACA;YACA;YACA;cACAC;YACA;cACAA;YACA;UACA;UACAA;UACAA;UACAA;UAEA;QACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;QACA;QACA;MACA;IACA;EACA;EACAC;IACA;MACA;MACAC;MACA;MACAC;MACA;MACAC;IACA;EACA;EACAC,QAEA;EACAC;IACA;EACA;EACAC;IAAA;IACA;MACA;IACA;EACA;EACAC;IACA;IACAC;MAAA;MACA;MACA;MACA;QACAC;UACAC;UACAC;QACA;MACA;MACAF;QACA;UACAG;YACA;UACA;UACA;QACA;QACA;UACA;YACAC;YACAC;UACA;QACA;QACA;MACA;IACA;IACA;IACAC;MACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MAAA;QAAA;QAAA;UAAA;YAAA;cAAA;gBAAA,MACA;kBAAA;kBAAA;gBAAA;gBACA;gBACA;gBACA;gBACA5B,iFACA;gBAAA,MACA;kBAAA;kBAAA;gBAAA;gBAAA;gBAAA,OACAA;kBACA;kBACA;gBACA,yBAEA;cAAA;gBAAA;gBAAA;cAAA;gBACA;kBACA;gBACA;cAAA;gBAAA;gBAAA;cAAA;gBAEA;cAAA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA;IAEA;IACA;IACA6B;MACA;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;QACA;MACA;MACA;QACA;MACA;IACA;EACA;AACA;AAAA,4B;;;;;;;;;;;;;AC3XA;AAAA;AAAA;AAAA;AAAg5C,CAAgB,62CAAG,EAAC,C;;;;;;;;;;;ACAp6C;AACA,OAAO,KAAU,EAAE,kBAKd","file":"tuniao-ui/components/tn-tabbar/tn-tabbar.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-tabbar.vue?vue&type=template&id=3972e4a0&scoped=true&\"\nvar renderjs\nimport script from \"./tn-tabbar.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-tabbar.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-tabbar.vue?vue&type=style&index=0&id=3972e4a0&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\runtime\\\\componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"3972e4a0\",\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-tabbar/tn-tabbar.vue\"\nexport default component.exports","export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\templateLoader.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--17-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\template.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-uni-app-loader\\\\page-meta.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-tabbar.vue?vue&type=template&id=3972e4a0&scoped=true&\"","var components\ntry {\n components = {\n tnBadge: function () {\n return import(\n /* webpackChunkName: \"tuniao-ui/components/tn-badge/tn-badge\" */ \"@/tuniao-ui/components/tn-badge/tn-badge.vue\"\n )\n },\n }\n} catch (e) {\n if (\n e.message.indexOf(\"Cannot find module\") !== -1 &&\n e.message.indexOf(\".vue\") !== -1\n ) {\n console.error(e.message)\n console.error(\"1. 排查组件名称拼写是否正确\")\n console.error(\n \"2. 排查组件是否符合 easycom 规范，文档：https://uniapp.dcloud.net.cn/collocation/pages?id=easycom\"\n )\n console.error(\n \"3. 若组件不符合 easycom 规范，需手动引入，并在 components 中注册该组件\"\n )\n } else {\n throw e\n }\n}\nvar render = function () {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n var l0 = _vm.show\n ? _vm.__map(_vm.list, function (item, index) {\n var $orig = _vm.__get_orig(item)\n var s0 = _vm.__get_style([_vm.itemButtonStyle(index)])\n var m0 = _vm.itemButtonClass(index)\n var m1 = _vm.isImage(index)\n var m2 = m1 ? _vm.elIcon(index) : null\n var m3 = !m1 ? _vm.elIcon(index) : null\n var m4 = !m1 ? _vm.elIconColor(index, false) : null\n var m5 = !m1 ? _vm.elIconColor(index) : null\n var g0 =\n !item.out && (item.count || item.dot)\n ? _vm.$tn.number.formatNumberString(item.count)\n : null\n var m6 = _vm.elColor(index, false)\n var m7 = _vm.elColor(index)\n return {\n $orig: $orig,\n s0: s0,\n m0: m0,\n m1: m1,\n m2: m2,\n m3: m3,\n m4: m4,\n m5: m5,\n g0: g0,\n m6: m6,\n m7: m7,\n }\n })\n : null\n if (!_vm._isMounted) {\n _vm.e0 = function ($event) {\n $event.stopPropagation()\n $event.preventDefault()\n return (function () {})($event)\n }\n }\n _vm.$mp.data = Object.assign(\n {},\n {\n $root: {\n l0: l0,\n },\n }\n )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--13-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-tabbar.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--13-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-tabbar.vue?vue&type=script&lang=js&\"","<template>\r\n\t<view v-if=\"show\" class=\"tn-tabbar-class tn-tabbar\" @touchmove.stop.prevent=\"() => {}\">\r\n\t\t<!-- tabbar 内容-->\r\n\t\t<view class=\"tn-tabbar__content\" :class=\"{\r\n 'tn-tabbar--fixed': fixed,\r\n 'tn-safe-area-inset-bottom': safeAreaInsetBottom,\r\n 'tn-tabbar--shadow': shadow\r\n }\" :style=\"{\r\n height: height + 'rpx',\r\n backgroundColor: bgColor\r\n }\">\r\n\t\t\t<!-- tabbar item -->\r\n\t\t\t<view v-for=\"(item, index) in list\" :key=\"index\" class=\"tn-tabbar__content__item\"\r\n\t\t\t\t:id=\"`tabbar_item_${index}`\" :class=\"{'tn-tabbar__content__item--out': item.out}\" :style=\"{\r\n backgroundColor: bgColor\r\n }\" @tap.stop=\"clickItemHandler(index)\">\r\n\t\t\t\t<!-- tabbar item的图片或者icon-->\r\n\t\t\t\t<view :class=\"[itemButtonClass(index)]\" :style=\"[itemButtonStyle(index)]\">\r\n\t\t\t\t\t<image v-if=\"isImage(index)\" :src=\"elIcon(index)\" mode=\"scaleToFill\"\r\n\t\t\t\t\t\tclass=\"tn-tabbar__content__item__image\" :style=\"{\r\n width: `${item.iconSize || iconSize}rpx`,\r\n height: `${item.iconSize || iconSize}rpx`\r\n }\"></image>\r\n\t\t\t\t\t<view v-else class=\"tn-tabbar__content__item__icon\"\r\n\t\t\t\t\t\t:class=\"[`tn-icon-${elIcon(index)}`,elIconColor(index, false)]\" :style=\"{\r\n fontSize: `${item.iconSize || iconSize}rpx`,\r\n color: elIconColor(index)\r\n }\"></view>\r\n\r\n\t\t\t\t\t<!-- 角标-->\r\n\t\t\t\t\t<tn-badge v-if=\"!item.out && (item.count || item.dot)\" :dot=\"item.dot || false\"\r\n\t\t\t\t\t\tbackgroundColor=\"tn-bg-red\" fontColor=\"#FFFFFF\" :radius=\"item.dot ? 14 : 0\" :fontSize=\"14\"\r\n\t\t\t\t\t\tpadding=\"2rpx 4rpx\" :absolute=\"true\" :top=\"2\">\r\n\t\t\t\t\t\t{{ $tn.number.formatNumberString(item.count) }}\r\n\t\t\t\t\t</tn-badge>\r\n\t\t\t\t</view>\r\n\r\n\t\t\t\t<!-- tabbar item的文字-->\r\n\t\t\t\t<view class=\"tn-tabbar__content__item__text\" :class=\"[elColor(index, false)]\" :style=\"{\r\n color: elColor(index),\r\n fontSize: `${fontSize}rpx`\r\n }\">\r\n\t\t\t\t\t<text class=\"tn-text-ellipsis\">{{ item.title }}</text>\r\n\t\t\t\t</view>\r\n\t\t\t</view>\r\n\r\n\t\t\t<!-- item 突起部分 -->\r\n\t\t\t<view v-if=\"outItemIndex !== -1\" class=\"tn-tabbar__content__out\" :class=\"[{\r\n 'tn-tabbar__content__out--shadow': shadow\r\n }, animation && value === outItemIndex ? `tn-tabbar__content__out--animation--${animationMode}` : '']\" :style=\"{\r\n backgroundColor: `transparent`,\r\n left: outItemLeft,\r\n width: `${outHeight}rpx`,\r\n height: `${outHeight}rpx`,\r\n top: `-${outHeight * 0.3}rpx`\r\n }\" @tap.stop=\"clickItemHandler(outItemIndex)\"></view>\r\n\t\t</view>\r\n\r\n\t\t<!-- 防止tabbar塌陷 -->\r\n\t\t<view class=\"tn-tabbar__placeholder\" :class=\"{'tn-safe-area-inset-bottom': safeAreaInsetBottom}\" :style=\"{\r\n height: `calc(${height}rpx)`\r\n }\"></view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tname: 'tn-tabbar',\r\n\t\tprops: {\r\n\t\t\t// 绑定当前被选中的current值\r\n\t\t\tvalue: {\r\n\t\t\t\ttype: [String, Number],\r\n\t\t\t\tdefault: 0\r\n\t\t\t},\r\n\t\t\t// 是否显示\r\n\t\t\tshow: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: true\r\n\t\t\t},\r\n\t\t\t// 图标列表\r\n\t\t\tlist: {\r\n\t\t\t\ttype: Array,\r\n\t\t\t\tdefault () {\r\n\t\t\t\t\treturn []\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 高度，单位rpx\r\n\t\t\theight: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 100\r\n\t\t\t},\r\n\t\t\t// 突起的高度\r\n\t\t\toutHeight: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 100\r\n\t\t\t},\r\n\t\t\t// 背景颜色\r\n\t\t\tbgColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#FFFFFF'\r\n\t\t\t},\r\n\t\t\t// 图标大小\r\n\t\t\ticonSize: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 40\r\n\t\t\t},\r\n\t\t\t// 字体大小\r\n\t\t\tfontSize: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 24\r\n\t\t\t},\r\n\t\t\t// 激活时的颜色\r\n\t\t\tactiveColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#01BEFF'\r\n\t\t\t},\r\n\t\t\t// 非激活时的颜色\r\n\t\t\tinactiveColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#AAAAAA'\r\n\t\t\t},\r\n\t\t\t// 激活时图标的颜色\r\n\t\t\tactiveIconColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#01BEFF'\r\n\t\t\t},\r\n\t\t\t// 非激活时图标的颜色\r\n\t\t\tinactiveIconColor: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '#AAAAAA'\r\n\t\t\t},\r\n\t\t\t// 激活时的自定义样式\r\n\t\t\tactiveStyle: {\r\n\t\t\t\ttype: Object,\r\n\t\t\t\tdefault () {\r\n\t\t\t\t\treturn {}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 是否显示阴影\r\n\t\t\tshadow: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: true\r\n\t\t\t},\r\n\t\t\t// 点击时是否有动画\r\n\t\t\tanimation: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: false\r\n\t\t\t},\r\n\t\t\t// 点击时的动画模式\r\n\t\t\tanimationMode: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: 'scale'\r\n\t\t\t},\r\n\t\t\t// 是否固定在底部\r\n\t\t\tfixed: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: true\r\n\t\t\t},\r\n\t\t\t// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距\r\n\t\t\tsafeAreaInsetBottom: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: false\r\n\t\t\t},\r\n\t\t\t// 切换前回调\r\n\t\t\tbeforeSwitch: {\r\n\t\t\t\ttype: Function,\r\n\t\t\t\tdefault: null\r\n\t\t\t}\r\n\t\t},\r\n\t\tcomputed: {\r\n\t\t\t// 当前字体的颜色\r\n\t\t\telColor() {\r\n\t\t\t\treturn (index, style = true) => {\r\n\t\t\t\t\tlet currentItem = this.list[index]\r\n\t\t\t\t\tlet color = ''\r\n\t\t\t\t\tif (index === this.value) {\r\n\t\t\t\t\t\tcolor = currentItem['activeColor'] || this.activeColor\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tcolor = currentItem['inactiveColor'] || this.inactiveColor\r\n\t\t\t\t\t}\r\n\t\t\t\t\t// 判断是否获取内部样式\r\n\t\t\t\t\tif (style) {\r\n\t\t\t\t\t\tif (this.$tn.color.getFontColorStyle(color) !== '') {\r\n\t\t\t\t\t\t\treturn color\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\treturn ''\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tif (this.$tn.color.getFontColorStyle(color) === '') {\r\n\t\t\t\t\t\t\treturn color\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\treturn ''\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 当前图标的颜色\r\n\t\t\telIconColor() {\r\n\t\t\t\treturn (index, style = true) => {\r\n\t\t\t\t\tlet currentItem = this.list[index]\r\n\t\t\t\t\tlet color = ''\r\n\t\t\t\t\tif (index === this.value) {\r\n\t\t\t\t\t\tcolor = currentItem['activeIconColor'] || this.activeIconColor\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tcolor = currentItem['inactiveIconColor'] || this.inactiveIconColor\r\n\t\t\t\t\t}\r\n\t\t\t\t\t// 判断是否获取内部样式\r\n\t\t\t\t\tif (style) {\r\n\t\t\t\t\t\tif (this.$tn.color.getFontColorStyle(color) !== '') {\r\n\t\t\t\t\t\t\treturn color\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\treturn ''\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tif (this.$tn.color.getFontColorStyle(color) === '') {\r\n\t\t\t\t\t\t\treturn color + ' tn-tabbar__content__item__icon--clip'\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\treturn ''\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 当前的图标\r\n\t\t\telIcon() {\r\n\t\t\t\treturn (index) => {\r\n\t\t\t\t\tlet currentItem = this.list[index]\r\n\t\t\t\t\tif (index === this.value) {\r\n\t\t\t\t\t\treturn currentItem['activeIcon']\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\treturn currentItem['inactiveIcon']\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 突起部分item button对应的类\r\n\t\t\titemButtonClass() {\r\n\t\t\t\treturn (index) => {\r\n\t\t\t\t\tlet clazz = ''\r\n\t\t\t\t\tif (this.list[index]['out']) {\r\n\t\t\t\t\t\tclazz += 'tn-tabbar__content__item__button--out'\r\n\t\t\t\t\t\tif (this.$tn.color.getFontColorStyle(this.activeIconColor) === '') {\r\n\t\t\t\t\t\t\tclazz += ` ${this.activeIconColor}`\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif (this.value === index) {\r\n\t\t\t\t\t\t\tclazz += ` tn-tabbar__content__item__button--out--animation--${this.animationMode}`\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tclazz += 'tn-tabbar__content__item__button'\r\n\t\t\t\t\t\tif (this.value === index) {\r\n\t\t\t\t\t\t\tclazz += ` tn-tabbar__content__item__button--animation--${this.animationMode}`\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn clazz\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 突起部分item button样式\r\n\t\t\titemButtonStyle() {\r\n\t\t\t\treturn (index) => {\r\n\t\t\t\t\tlet style = {}\r\n\t\t\t\t\tconsole.log();\r\n\t\t\t\t\tif (this.list[index]['out']) {\r\n\t\t\t\t\t\tif (this.$tn.color.getFontColorStyle(this.activeIconColor) !== '') {\r\n\t\t\t\t\t\t\t//style.backgroundColor = this.activeIconColor\r\n\t\t\t\t\t\t\tif (this.value == 2) {\r\n\t\t\t\t\t\t\t\tstyle.backgroundColor = '#ffffff'\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\tstyle.backgroundColor = '#ffffff'\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tstyle.width = `${this.outHeight - 20}rpx`\r\n\t\t\t\t\t\tstyle.height = `${this.outHeight - 20}rpx`\r\n\t\t\t\t\t\tstyle.top = `-${this.outHeight * 0.3}rpx`\r\n\r\n\t\t\t\t\t\treturn style\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn style\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 判断图标是否为图片\r\n\t\t\tisImage() {\r\n\t\t\t\treturn (index) => {\r\n\t\t\t\t\tconst icon = this.list[index]['activeIcon']\r\n\t\t\t\t\t// 只有包含了'/'就认为是图片\r\n\t\t\t\t\treturn icon.indexOf('/') !== -1\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\t// 当前突起的位置\r\n\t\t\t\toutItemLeft: '50%',\r\n\t\t\t\t// 当前设置了突起按钮的index\r\n\t\t\t\toutItemIndex: -1,\r\n\t\t\t\t// 每一个item的信息\r\n\t\t\t\ttabbatItemInfo: []\r\n\t\t\t}\r\n\t\t},\r\n\t\twatch: {\r\n\r\n\t\t},\r\n\t\tcreated() {\r\n\t\t\tthis.getOutItemIndex()\r\n\t\t},\r\n\t\tmounted() {\r\n\t\t\tthis.$nextTick(() => {\r\n\t\t\t\tthis.getTabbarItem()\r\n\t\t\t})\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\t// 获取每一个item的信息\r\n\t\t\tgetTabbarItem() {\r\n\t\t\t\tlet query = uni.createSelectorQuery().in(this)\r\n\t\t\t\t// 遍历获取信息\r\n\t\t\t\tfor (let i = 0; i < this.list.length; i++) {\r\n\t\t\t\t\tquery.select(`#tabbar_item_${i}`).fields({\r\n\t\t\t\t\t\tsize: true,\r\n\t\t\t\t\t\trect: true\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t\tquery.exec(res => {\r\n\t\t\t\t\tif (!res) {\r\n\t\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\t\tthis.getTabbarItem()\r\n\t\t\t\t\t\t}, 10)\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\t\t\t\t\tthis.tabbatItemInfo = res.map((item) => {\r\n\t\t\t\t\t\treturn {\r\n\t\t\t\t\t\t\tleft: item.left,\r\n\t\t\t\t\t\t\twidth: item.width\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t})\r\n\t\t\t\t\tthis.updateOutItemLeft()\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\t// 获取突起Item所在的index(如果存在)\r\n\t\t\tgetOutItemIndex() {\r\n\t\t\t\tthis.outItemIndex = this.list.findIndex((item) => {\r\n\t\t\t\t\treturn item.hasOwnProperty('out') && item.out\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\t// 点击底部菜单时触发\r\n\t\t\tasync clickItemHandler(index) {\r\n\t\t\t\tif (this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {\r\n\t\t\t\t\t// 执行回调，同时传入索引当作参数\r\n\t\t\t\t\t// 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this\r\n\t\t\t\t\t// 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文\r\n\t\t\t\t\tlet beforeSwitch = this.beforeSwitch.bind(this.$tn.$parent.call(this))(index)\r\n\t\t\t\t\t// 判断是否返回了Promise\r\n\t\t\t\t\tif (!!beforeSwitch && typeof beforeSwitch.then === 'function') {\r\n\t\t\t\t\t\tawait beforeSwitch.then(res => {\r\n\t\t\t\t\t\t\t// Promise返回成功\r\n\t\t\t\t\t\t\tthis.switchTab(index)\r\n\t\t\t\t\t\t}).catch(err => {\r\n\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t} else if (beforeSwitch === true) {\r\n\t\t\t\t\t\tthis.switchTab(index)\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.switchTab(index)\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 切换tab\r\n\t\t\tswitchTab(index) {\r\n\t\t\t\t// 发出事件和修改v-model绑定的值\r\n\t\t\t\tthis.$emit('change', index)\r\n\t\t\t\tthis.$emit('input', index)\r\n\t\t\t},\r\n\t\t\t// 设置突起的位置\r\n\t\t\tupdateOutItemLeft() {\r\n\t\t\t\t// 查找出需要突起的元素\r\n\t\t\t\tconst index = this.list.findIndex((item) => {\r\n\t\t\t\t\treturn item.out\r\n\t\t\t\t})\r\n\t\t\t\tif (index !== -1) {\r\n\t\t\t\t\tthis.outItemLeft = this.tabbatItemInfo[index].left + (this.tabbatItemInfo[index].width / 2) + 'px'\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n\t.tn-tabbar {\r\n\r\n\t\t&__content {\r\n\t\t\tbox-sizing: content-box;\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: row;\r\n\t\t\talign-items: center;\r\n\t\t\tposition: relative;\r\n\t\t\twidth: 100%;\r\n\t\t\tz-index: 1024;\r\n\r\n\t\t\t&__out {\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\tz-index: 4;\r\n\t\t\t\tborder-radius: 100%;\r\n\t\t\t\tleft: 50%;\r\n\t\t\t\ttransform: translateX(-50%);\r\n\r\n\t\t\t\t&--shadow {\r\n\t\t\t\t\t// box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);\r\n\r\n\t\t\t\t\t&::before {\r\n\t\t\t\t\t\tcontent: \" \";\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\t\theight: 50rpx;\r\n\t\t\t\t\t\tbottom: 0;\r\n\t\t\t\t\t\tleft: 0;\r\n\t\t\t\t\t\tright: 0;\r\n\t\t\t\t\t\tmargin: auto;\r\n\t\t\t\t\t\tbackground-color: inherit;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&--animation {\r\n\t\t\t\t\t&--scale {\r\n\t\t\t\t\t\ttransform-origin: 50% 100%;\r\n\t\t\t\t\t\tanimation: tabbar-content-out-click 0.2s forwards 1 ease-in-out;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t&__item {\r\n\t\t\t\tflex: 1;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tflex-direction: column;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\tposition: relative;\r\n\t\t\t\talign-items: center;\r\n\r\n\t\t\t\t&__button {\r\n\t\t\t\t\tmargin-bottom: 10rpx;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\tposition: relative;\r\n\r\n\t\t\t\t\t&--out {\r\n\t\t\t\t\t\tmargin-bottom: 10rpx;\r\n\t\t\t\t\t\tborder-radius: 50%;\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\tz-index: 6;\r\n\r\n\t\t\t\t\t\t&--animation {\r\n\t\t\t\t\t\t\t&--scale {\r\n\t\t\t\t\t\t\t\ttransform-origin: 50% 100%;\r\n\t\t\t\t\t\t\t\tanimation: tabbar-item-button-out-click 0.2s forwards 1;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t&--animation {\r\n\t\t\t\t\t\t&--scale {\r\n\r\n\t\t\t\t\t\t\t.tn-tabbar__content__item__icon,\r\n\t\t\t\t\t\t\t.tn-tabbar__content__item__image {\r\n\t\t\t\t\t\t\t\ttransform-origin: 50% 100%;\r\n\t\t\t\t\t\t\t\tanimation: tabbar-item-button-click 0.2s forwards 1;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&__icon {\r\n\r\n\t\t\t\t\t&--clip {\r\n\t\t\t\t\t\t-webkit-background-clip: text;\r\n\t\t\t\t\t\tcolor: transparent !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&__text {\r\n\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\tfont-size: 26rpx;\r\n\t\t\t\t\tline-height: 28rpx;\r\n\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\tmargin-bottom: 10rpx;\r\n\t\t\t\t\tz-index: 10;\r\n\t\t\t\t\ttransition: all 0.2s ease-in-out;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&--out {\r\n\t\t\t\t\theight: calc(100% - 1px);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&--fixed {\r\n\t\t\tposition: fixed;\r\n\t\t\tbottom: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t}\r\n\r\n\t\t&--shadow {\r\n\t\t\tbox-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);\r\n\t\t}\r\n\t}\r\n\r\n\t/* 点击动画 start */\r\n\r\n\t@keyframes tabbar-item-button-click {\r\n\t\tfrom {\r\n\t\t\ttransform: scale(0.8);\r\n\t\t}\r\n\r\n\t\tto {\r\n\t\t\ttransform: scale(1);\r\n\t\t}\r\n\t}\r\n\r\n\t@keyframes tabbar-item-button-out-click {\r\n\t\t0% {\r\n\t\t\ttransform: translateY(0) scale(1);\r\n\t\t}\r\n\r\n\t\t50% {\r\n\t\t\ttransform: translateY(-10rpx) scale(1.2);\r\n\t\t}\r\n\r\n\t\t100% {\r\n\t\t\ttransform: translateY(0) scale(1);\r\n\t\t}\r\n\t}\r\n\r\n\t@keyframes tabbar-content-out-click {\r\n\t\t0% {\r\n\t\t\ttransform: translateX(-50%) translateY(0) scale(1);\r\n\t\t}\r\n\r\n\t\t50% {\r\n\t\t\ttransform: translateX(-50%) translateY(-10rpx) scale(1.1);\r\n\t\t}\r\n\r\n\t\t100% {\r\n\t\t\ttransform: translateX(-50%) translateY(0) scale(1);\r\n\t\t}\r\n\t}\r\n\r\n\t/* 点击动画 end */\r\n</style>","import mod from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-tabbar.vue?vue&type=style&index=0&id=3972e4a0&lang=scss&scoped=true&\"; export default mod; export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-tabbar.vue?vue&type=style&index=0&id=3972e4a0&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\n if(module.hot) {\n // 1705988260066\n var cssReload = require(\"F:/HBuilderX.3.5.3.20220729/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\")(module.id, {\"hmr\":true,\"publicPath\":\"../../\",\"locals\":false});\n module.hot.dispose(cssReload);\n module.hot.accept(undefined, cssReload);\n }\n "],"sourceRoot":""} |