u-tabs.js.map 24.6 KB

原文件审查历史永久链接



1


{"version":3,"sources":["webpack:///C:/Users/15121/Desktop/44444/node_modules/uview-ui/components/u-tabs/u-tabs.vue?d1e7","webpack:///C:/Users/15121/Desktop/44444/node_modules/uview-ui/components/u-tabs/u-tabs.vue?2400","webpack:///C:/Users/15121/Desktop/44444/node_modules/uview-ui/components/u-tabs/u-tabs.vue?d90a","webpack:///C:/Users/15121/Desktop/44444/node_modules/uview-ui/components/u-tabs/u-tabs.vue?f551","uni-app:///node_modules/uview-ui/components/u-tabs/u-tabs.vue","webpack:///C:/Users/15121/Desktop/44444/node_modules/uview-ui/components/u-tabs/u-tabs.vue?b31f","webpack:///C:/Users/15121/Desktop/44444/node_modules/uview-ui/components/u-tabs/u-tabs.vue?5a5e"],"names":[],"mappings":"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","file":"node-modules/uview-ui/components/u-tabs/u-tabs.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./u-tabs.vue?vue&type=template&id=0de61367&scoped=true&\"\nvar renderjs\nimport script from \"./u-tabs.vue?vue&type=script&lang=js&\"\nexport * from \"./u-tabs.vue?vue&type=script&lang=js&\"\nimport style0 from \"./u-tabs.vue?vue&type=style&index=0&id=0de61367&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../../../Program Files/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  \"0de61367\",\n  null,\n  false,\n  components,\n  renderjs\n)\n\ncomponent.options.__file = \"node_modules/uview-ui/components/u-tabs/u-tabs.vue\"\nexport default component.exports","export * from \"-!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--16-0!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./u-tabs.vue?vue&type=template&id=0de61367&scoped=true&\"","var components\ntry {\n  components = {\n    uBadge: function() {\n      return import(\n        /* webpackChunkName: \"node-modules/uview-ui/components/u-badge/u-badge\" */ \"uview-ui/components/u-badge/u-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 s0 = _vm.__get_style([\n    _vm.$u.addStyle(_vm.itemStyle),\n    {\n      flex: _vm.scrollable ? \"\" : 1\n    }\n  ])\n\n  var l0 = _vm.__map(_vm.list, function(item, index) {\n    var $orig = _vm.__get_orig(item)\n\n    var s1 = _vm.__get_style([_vm.textStyle(index)])\n\n    return {\n      $orig: $orig,\n      s1: s1\n    }\n  })\n\n  var g0 = _vm.$u.addUnit(_vm.lineWidth)\n  var g1 = _vm.$u.addUnit(_vm.lineHeight)\n  _vm.$mp.data = Object.assign(\n    {},\n    {\n      $root: {\n        s0: s0,\n        l0: l0,\n        g0: g0,\n        g1: g1\n      }\n    }\n  )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./u-tabs.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./u-tabs.vue?vue&type=script&lang=js&\"","<template>\r\n\t<view class=\"u-tabs\">\r\n\t\t<view class=\"u-tabs__wrapper\">\r\n\t\t\t<slot name=\"left\" />\r\n\t\t\t<view class=\"u-tabs__wrapper__scroll-view-wrapper\">\r\n\t\t\t\t<scroll-view\r\n\t\t\t\t\t:scroll-x=\"scrollable\"\r\n\t\t\t\t\t:scroll-left=\"scrollLeft\"\r\n\t\t\t\t\tscroll-with-animation\r\n\t\t\t\t\tclass=\"u-tabs__wrapper__scroll-view\"\r\n\t\t\t\t\t:show-scrollbar=\"false\"\r\n\t\t\t\t\tref=\"u-tabs__wrapper__scroll-view\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<view\r\n\t\t\t\t\t\tclass=\"u-tabs__wrapper__nav\"\r\n\t\t\t\t\t\tref=\"u-tabs__wrapper__nav\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<view\r\n\t\t\t\t\t\t\tclass=\"u-tabs__wrapper__nav__item\"\r\n\t\t\t\t\t\t\tv-for=\"(item, index) in list\"\r\n\t\t\t\t\t\t\t:key=\"index\"\r\n\t\t\t\t\t\t\t@tap=\"clickHandler(item, index)\"\r\n\t\t\t\t\t\t\t:ref=\"`u-tabs__wrapper__nav__item-${index}`\"\r\n\t\t\t\t\t\t\t:style=\"[$u.addStyle(itemStyle), {flex: scrollable ? '' : 1}]\"\r\n\t\t\t\t\t\t\t:class=\"[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<text\r\n\t\t\t\t\t\t\t\t:class=\"[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']\"\r\n\t\t\t\t\t\t\t\tclass=\"u-tabs__wrapper__nav__item__text\"\r\n\t\t\t\t\t\t\t\t:style=\"[textStyle(index)]\"\r\n\t\t\t\t\t\t\t>{{ item[keyName] }}</text>\r\n\t\t\t\t\t\t\t<u-badge\r\n\t\t\t\t\t\t\t\t:show=\"!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))\"\r\n\t\t\t\t\t\t\t\t:isDot=\"item.badge && item.badge.isDot || propsBadge.isDot\"\r\n\t\t\t\t\t\t\t\t:value=\"item.badge && item.badge.value || propsBadge.value\"\r\n\t\t\t\t\t\t\t\t:max=\"item.badge && item.badge.max || propsBadge.max\"\r\n\t\t\t\t\t\t\t\t:type=\"item.badge && item.badge.type || propsBadge.type\"\r\n\t\t\t\t\t\t\t\t:showZero=\"item.badge && item.badge.showZero || propsBadge.showZero\"\r\n\t\t\t\t\t\t\t\t:bgColor=\"item.badge && item.badge.bgColor || propsBadge.bgColor\"\r\n\t\t\t\t\t\t\t\t:color=\"item.badge && item.badge.color || propsBadge.color\"\r\n\t\t\t\t\t\t\t\t:shape=\"item.badge && item.badge.shape || propsBadge.shape\"\r\n\t\t\t\t\t\t\t\t:numberType=\"item.badge && item.badge.numberType || propsBadge.numberType\"\r\n\t\t\t\t\t\t\t\t:inverted=\"item.badge && item.badge.inverted || propsBadge.inverted\"\r\n\t\t\t\t\t\t\t\tcustomStyle=\"margin-left: 4px;\"\r\n\t\t\t\t\t\t\t></u-badge>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t<!-- #ifdef APP-NVUE -->\r\n\t\t\t\t\t\t<view\r\n\t\t\t\t\t\t\tclass=\"u-tabs__wrapper__nav__line\"\r\n\t\t\t\t\t\t\tref=\"u-tabs__wrapper__nav__line\"\r\n\t\t\t\t\t\t\t:style=\"[{\r\n\t\t\t\t\t\t\t\t\twidth: $u.addUnit(lineWidth),\r\n\t\t\t\t\t\t\t\t\theight: $u.addUnit(lineHeight),\r\n\t\t\t\t\t\t\t\t\tbackground: lineColor,\r\n\t\t\t\t\t\t\t\t\tbackgroundSize: lineBgSize,\r\n\t\t\t\t\t\t\t\t}]\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<!-- #endif -->\r\n\t\t\t\t\t\t\t<!-- #ifndef APP-NVUE -->\r\n\t\t\t\t\t\t\t<view\r\n\t\t\t\t\t\t\t\tclass=\"u-tabs__wrapper__nav__line\"\r\n\t\t\t\t\t\t\t\tref=\"u-tabs__wrapper__nav__line\"\r\n\t\t\t\t\t\t\t\t:style=\"[{\r\n\t\t\t\t\t\t\t\t\t\twidth: $u.addUnit(lineWidth),\r\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(${lineOffsetLeft}px)`,\r\n\t\t\t\t\t\t\t\t\t\ttransitionDuration: `${firstTime ? 0 : duration}ms`,\r\n\t\t\t\t\t\t\t\t\t\theight: $u.addUnit(lineHeight),\r\n\t\t\t\t\t\t\t\t\t\tbackground: lineColor,\r\n\t\t\t\t\t\t\t\t\t\tbackgroundSize: lineBgSize,\r\n\t\t\t\t\t\t\t\t\t}]\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<!-- #endif -->\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t</scroll-view>\r\n\t\t\t</view>\r\n\t\t\t<slot name=\"right\" />\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\t// #ifdef APP-NVUE\r\n\tconst animation = uni.requireNativePlugin('animation')\r\n\tconst dom = uni.requireNativePlugin('dom')\r\n\t// #endif\r\n\timport props from './props.js';\r\n\t/**\r\n\t * Tabs 标签\r\n\t * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。\r\n\t * @tutorial https://www.uviewui.com/components/tabs.html\r\n\t * @property {String | Number}\tduration\t\t\t滑块移动一次所需的时间，单位秒（默认 200 ）\r\n\t * @property {String | Number}\tswierWidth\t\t\tswiper的宽度（默认 '750rpx' ）\r\n\t * @property {String}\tkeyName\t 从`list`元素对象中读取的键名（默认 'name' ）\r\n\t * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始\r\n\t * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始\r\n\t * @example <u-tabs :list=\"list\" :is-scroll=\"false\" :current=\"current\" @change=\"change\"></u-tabs>\r\n\t */\r\n\texport default {\r\n\t\tname: 'u-tabs',\r\n\t\tmixins: [uni.$u.mpMixin, uni.$u.mixin, props],\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tfirstTime: true,\r\n\t\t\t\tscrollLeft: 0,\r\n\t\t\t\tscrollViewWidth: 0,\r\n\t\t\t\tlineOffsetLeft: 0,\r\n\t\t\t\ttabsRect: {\r\n\t\t\t\t\tleft: 0\r\n\t\t\t\t},\r\n\t\t\t\tinnerCurrent: 0,\r\n\t\t\t\tmoving: false,\r\n\t\t\t}\r\n\t\t},\r\n\t\twatch: {\r\n\t\t\tcurrent: {\r\n\t\t\t\timmediate: true,\r\n\t\t\t\thandler (newValue, oldValue) {\r\n\t\t\t\t\t// 内外部值不相等时，才尝试移动滑块\r\n\t\t\t\t\tif (newValue !== this.innerCurrent) {\r\n\t\t\t\t\t\tthis.innerCurrent = newValue\r\n\t\t\t\t\t\tthis.$nextTick(() => {\r\n\t\t\t\t\t\t\tthis.resize()\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// list变化时，重新渲染list各项信息\r\n\t\t\tlist() {\r\n\t\t\t\tthis.$nextTick(() => {\r\n\t\t\t\t\tthis.resize()\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t},\r\n\t\tcomputed: {\r\n\t\t\ttextStyle() {\r\n\t\t\t\treturn index => {\r\n\t\t\t\t\tconst style = {}\r\n\t\t\t\t\t// 取当期是否激活的样式\r\n\t\t\t\t\tconst customeStyle = index === this.innerCurrent ? uni.$u.addStyle(this.activeStyle) : uni.$u\r\n\t\t\t\t\t\t.addStyle(\r\n\t\t\t\t\t\t\tthis.inactiveStyle)\r\n\t\t\t\t\t// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式\r\n\t\t\t\t\tif (this.list[index].disabled) {\r\n\t\t\t\t\t\tstyle.color = '#c8c9cc'\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn uni.$u.deepMerge(customeStyle, style)\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tpropsBadge() {\r\n\t\t\t\treturn uni.$u.props.badge\r\n\t\t\t}\r\n\t\t},\r\n\t\tasync mounted() {\r\n\t\t\tthis.init()\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tsetLineLeft() {\r\n\t\t\t\tconst tabItem = this.list[this.innerCurrent];\r\n\t\t\t\tif (!tabItem) {\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\t// 获取滑块该移动的位置\r\n\t\t\t\tlet lineOffsetLeft = this.list\r\n\t\t\t\t\t.slice(0, this.innerCurrent)\r\n\t\t\t\t\t.reduce((total, curr) => total + curr.rect.width, 0);\r\n                // 获取下划线的数值px表示法\r\n\t\t\t\tconst lineWidth = uni.$u.getPx(this.lineWidth);\r\n\t\t\t\tthis.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2\r\n\t\t\t\t// #ifdef APP-NVUE\r\n\t\t\t\t// 第一次移动滑块，无需过渡时间\r\n\t\t\t\tthis.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))\r\n\t\t\t\t// #endif\r\n\r\n\t\t\t\t// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间\r\n\t\t\t\t// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)\r\n\t\t\t\tif (this.firstTime) {\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tthis.firstTime = false\r\n\t\t\t\t\t}, 10);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// nvue下设置滑块的位置\r\n\t\t\tanimation(x, duration = 0) {\r\n\t\t\t\t// #ifdef APP-NVUE\r\n\t\t\t\tconst ref = this.$refs['u-tabs__wrapper__nav__line']\r\n\t\t\t\tanimation.transition(ref, {\r\n\t\t\t\t\tstyles: {\r\n\t\t\t\t\t\ttransform: `translateX(${x}px)`\r\n\t\t\t\t\t},\r\n\t\t\t\t\tduration\r\n\t\t\t\t})\r\n\t\t\t\t// #endif\r\n\t\t\t},\r\n\t\t\t// 点击某一个标签\r\n\t\t\tclickHandler(item, index) {\r\n\t\t\t\t// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出\r\n\t\t\t\tthis.$emit('click', {\r\n\t\t\t\t\t...item,\r\n\t\t\t\t\tindex\r\n\t\t\t\t})\r\n\t\t\t\t// 如果disabled状态，返回\r\n\t\t\t\tif (item.disabled) return\r\n\t\t\t\tthis.innerCurrent = index\r\n\t\t\t\tthis.resize()\r\n\t\t\t\tthis.$emit('change', {\r\n\t\t\t\t\t...item,\r\n\t\t\t\t\tindex\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\tinit() {\r\n\t\t\t\tuni.$u.sleep().then(() => {\r\n\t\t\t\t\tthis.resize()\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\tsetScrollLeft() {\r\n\t\t\t\t// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息\r\n\t\t\t\tconst tabRect = this.list[this.innerCurrent]\r\n\t\t\t\t// 累加得到当前item到左边的距离\r\n\t\t\t\tconst offsetLeft = this.list\r\n\t\t\t\t\t.slice(0, this.innerCurrent)\r\n\t\t\t\t\t.reduce((total, curr) => {\r\n\t\t\t\t\t\treturn total + curr.rect.width\r\n\t\t\t\t\t}, 0)\r\n\t\t\t\t// 此处为屏幕宽度\r\n\t\t\t\tconst windowWidth = uni.$u.sys().windowWidth\r\n\t\t\t\t// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动\r\n\t\t\t\tlet scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect\r\n\t\t\t\t\t.right) / 2 + this.tabsRect.left / 2\r\n\t\t\t\t// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度\r\n\t\t\t\tscrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)\r\n\t\t\t\tthis.scrollLeft = Math.max(0, scrollLeft)\r\n\t\t\t},\r\n\t\t\t// 获取所有标签的尺寸\r\n\t\t\tresize() {\r\n\t\t\t\t// 如果不存在list，则不处理\r\n\t\t\t\tif(this.list.length === 0) {\r\n\t\t\t\t\treturn\r\n\t\t\t\t}\r\n\t\t\t\tPromise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {\r\n\t\t\t\t\tthis.tabsRect = tabsRect\r\n\t\t\t\t\tthis.scrollViewWidth = 0\r\n\t\t\t\t\titemRect.map((item, index) => {\r\n\t\t\t\t\t\t// 计算scroll-view的宽度，这里\r\n\t\t\t\t\t\tthis.scrollViewWidth += item.width\r\n\t\t\t\t\t\t// 另外计算每一个item的中心点X轴坐标\r\n\t\t\t\t\t\tthis.list[index].rect = item\r\n\t\t\t\t\t})\r\n\t\t\t\t\t// 获取了tabs的尺寸之后，设置滑块的位置\r\n\t\t\t\t\tthis.setLineLeft()\r\n\t\t\t\t\tthis.setScrollLeft()\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\t// 获取导航菜单的尺寸\r\n\t\t\tgetTabsRect() {\r\n\t\t\t\treturn new Promise(resolve => {\r\n\t\t\t\t\tthis.queryRect('u-tabs__wrapper__scroll-view').then(size => resolve(size))\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\t// 获取所有标签的尺寸\r\n\t\t\tgetAllItemRect() {\r\n\t\t\t\treturn new Promise(resolve => {\r\n\t\t\t\t\tconst promiseAllArr = this.list.map((item, index) => this.queryRect(\r\n\t\t\t\t\t\t`u-tabs__wrapper__nav__item-${index}`, true))\r\n\t\t\t\t\tPromise.all(promiseAllArr).then(sizes => resolve(sizes))\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\t// 获取各个标签的尺寸\r\n\t\t\tqueryRect(el, item) {\r\n\t\t\t\t// #ifndef APP-NVUE\r\n\t\t\t\t// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html\r\n\t\t\t\t// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同\r\n\t\t\t\treturn new Promise(resolve => {\r\n\t\t\t\t\tthis.$uGetRect(`.${el}`).then(size => {\r\n\t\t\t\t\t\tresolve(size)\r\n\t\t\t\t\t})\r\n\t\t\t\t})\r\n\t\t\t\t// #endif\r\n\r\n\t\t\t\t// #ifdef APP-NVUE\r\n\t\t\t\t// nvue下，使用dom模块查询元素高度\r\n\t\t\t\t// 返回一个promise，让调用此方法的主体能使用then回调\r\n\t\t\t\treturn new Promise(resolve => {\r\n\t\t\t\t\tdom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {\r\n\t\t\t\t\t\tresolve(res.size)\r\n\t\t\t\t\t})\r\n\t\t\t\t})\r\n\t\t\t\t// #endif\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@import \"../../libs/css/components.scss\";\r\n\r\n\t.u-tabs {\r\n\r\n\t\t&__wrapper {\r\n\t\t\t@include flex;\r\n\t\t\talign-items: center;\r\n\r\n\t\t\t&__scroll-view-wrapper {\r\n\t\t\t\tflex: 1;\r\n\t\t\t\t/* #ifndef APP-NVUE */\r\n\t\t\t\toverflow: auto hidden;\r\n\t\t\t\t/* #endif */\r\n\t\t\t}\r\n\r\n\t\t\t&__scroll-view {\r\n\t\t\t\t@include flex;\r\n\t\t\t\tflex: 1;\r\n\t\t\t}\r\n\r\n\t\t\t&__nav {\r\n\t\t\t\t@include flex;\r\n\t\t\t\tposition: relative;\r\n\r\n\t\t\t\t&__item {\r\n\t\t\t\t\tpadding: 0 11px;\r\n\t\t\t\t\t@include flex;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tjustify-content: center;\r\n\r\n\t\t\t\t\t&--disabled {\r\n\t\t\t\t\t\t/* #ifndef APP-NVUE */\r\n\t\t\t\t\t\tcursor: not-allowed;\r\n\t\t\t\t\t\t/* #endif */\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t&__text {\r\n\t\t\t\t\t\tfont-size: 15px;\r\n\t\t\t\t\t\tcolor: $u-content-color;\r\n\r\n\t\t\t\t\t\t&--disabled {\r\n\t\t\t\t\t\t\tcolor: $u-disabled-color !important;\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&__line {\r\n\t\t\t\t\theight: 3px;\r\n\t\t\t\t\tbackground: $u-primary;\r\n\t\t\t\t\twidth: 30px;\r\n\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\tbottom: 2px;\r\n\t\t\t\t\tborder-radius: 100px;\r\n\t\t\t\t\ttransition-property: transform;\r\n\t\t\t\t\ttransition-duration: 300ms;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</style>\r\n","import mod from \"-!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./u-tabs.vue?vue&type=style&index=0&id=0de61367&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../../../Program Files/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./u-tabs.vue?vue&type=style&index=0&id=0de61367&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\n    if(module.hot) {\n      // 1669299178780\n      var cssReload = require(\"C:/Program Files/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":""}