| 1 |
- {"version":3,"sources":["webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-sticky/tn-sticky.vue?f794","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-sticky/tn-sticky.vue?9309","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-sticky/tn-sticky.vue?c87e","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-sticky/tn-sticky.vue?c82d","uni-app:///tuniao-ui/components/tn-sticky/tn-sticky.vue"],"names":["name","props","offsetTop","type","default","h5NavHeight","customNavHeight","enabled","backgroundColor","zIndex","index","computed","elZIndex","backgroundColorStyle","backgroundColorClass","stickyClass","clazz","stickyStyle","style","data","stickyObserverName","elClass","fixed","height","width","stickyTop","left","watch","mounted","methods","initObserver","connectObserver","thresholds","contentObserver","top","setFixed","disconnectObserver","observer"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAsH;AACtH;AAC6D;AACL;;;AAGxD;AAC8M;AAC9M,gBAAgB,qNAAU;AAC1B,EAAE,+EAAM;AACR,EAAE,oFAAM;AACR,EAAE,6FAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,wFAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACtBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACjBA;AAAA;AAAA;AAAA;AAA6zB,CAAgB,2zBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eCwBj1B;EACAA;EACAC;IACA;IACA;IACAC;MACAC;MACAC;IACA;IACA;IACAC;MACAF;MACAC;IACA;IACA;IACAE;MACAH;MACAC;IACA;IACA;IACAG;MACAJ;MACAC;IACA;IACA;IACAI;MACAL;MACAC;IACA;IACA;IACAK;MACAN;MACAC;IACA;IACA;IACAM;MACAP;MACAC;IACA;EACA;EACAO;IACAC;MACA;IACA;IACAC;MACA;IACA;IACAC;MACA;IACA;IACAC;MACA;MACAC;MACA;QACAA;MACA;MACA;IACA;IACAC;MACA;MACAC;MACA;QACAA;MACA;MACA;QACAA;MACA;MACA;IACA;EACA;EACAC;IACA;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACA;MACAC;IACA;EACA;EACAC;IACAzB;MACA;IACA;IACAK;MACA;QACA;QACA;MACA;QACA;MACA;IACA;IACAD;MACA;IACA;EACA;EACAsB;IACA;EACA;EACAC;IACA;IACAC;MAAA;MACA;MAKA;MAGA;MACA;QACA;QACA;QACA;QACA;UACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;MACA;QACAC;MACA;MACAC;QACAC;MACA;MACAD;QACA;QACA;MACA;MACA;IACA;IACA;IACAE;MACA;MACA,gDACA;MACA;IACA;IACA;IACAC;MACA;MACAC;IACA;EACA;AACA;AAAA,2B","file":"tuniao-ui/components/tn-sticky/tn-sticky.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-sticky.vue?vue&type=template&id=95c76a14&\"\nvar renderjs\nimport script from \"./tn-sticky.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-sticky.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../self software/HBuilderX.3.99.2023122611/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 null,\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-sticky/tn-sticky.vue\"\nexport default component.exports","export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--17-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-sticky.vue?vue&type=template&id=95c76a14&\"","var components\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([_vm.stickyStyle])\n _vm.$mp.data = Object.assign(\n {},\n {\n $root: {\n s0: s0,\n },\n }\n )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-sticky.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-sticky.vue?vue&type=script&lang=js&\"","<template>\r\n <view class=\"tn-sticky-class\">\r\n <view\r\n class=\"tn-sticky__wrap\"\r\n :class=\"[stickyClass]\"\r\n :style=\"[stickyStyle]\"\r\n >\r\n <view\r\n class=\"tn-sticky__item\"\r\n :style=\"{\r\n position: fixed ? 'fixed' : 'static',\r\n top: stickyTop + 'px',\r\n left: left + 'px',\r\n width: width === 'auto' ? 'auto' : width + 'px',\r\n zIndex: elZIndex\r\n }\"\r\n >\r\n <slot></slot>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n name: 'tn-sticky',\r\n props: {\r\n // 吸顶容器到顶部某个距离的时候进行吸顶\r\n // 在H5中，customNavBar的高度为45px\r\n offsetTop: {\r\n type: Number,\r\n default: 0\r\n },\r\n // H5顶部导航栏的高度\r\n h5NavHeight: {\r\n type: Number,\r\n default: 45\r\n },\r\n // 自定义顶部导航栏高度\r\n customNavHeight: {\r\n type: Number,\r\n default: 0\r\n },\r\n // 是否开启吸顶\r\n enabled: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 吸顶容器的背景颜色\r\n backgroundColor: {\r\n type: String,\r\n default: '#FFFFFF'\r\n },\r\n // z-index\r\n zIndex: {\r\n type: Number,\r\n default: 0\r\n },\r\n // 索引值，区分不同的吸顶组件\r\n index: {\r\n type: [String, Number],\r\n default: ''\r\n }\r\n },\r\n computed: {\r\n elZIndex() {\r\n return this.zIndex ? this.zIndex : this.$t.zIndex.sticky\r\n },\r\n backgroundColorStyle() {\r\n return this.$t.color.getBackgroundColorStyle(this.backgroundColor)\r\n },\r\n backgroundColorClass() {\r\n return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)\r\n },\r\n stickyClass() {\r\n let clazz = ''\r\n clazz += this.elClass\r\n if (this.backgroundColorClass) {\r\n clazz += ` ${this.backgroundColorClass}`\r\n }\r\n return clazz\r\n },\r\n stickyStyle() {\r\n let style = {}\r\n style.height = this.fixed ? this.height + 'px' : 'auto'\r\n if (this.backgroundColorStyle) {\r\n style.color = this.backgroundColorStyle\r\n }\r\n if (this.elZIndex) {\r\n style.zIndex = this.elZIndex\r\n }\r\n return style\r\n }\r\n },\r\n data() {\r\n return {\r\n // 监听组件别名\r\n stickyObserverName: 'tnStickyObserver',\r\n // 组件的唯一编号\r\n elClass: this.$t.uuid(),\r\n // 是否固定\r\n fixed: false,\r\n // 高度\r\n height: 'auto',\r\n // 宽度\r\n width: 'auto',\r\n // 距离顶部的距离\r\n stickyTop: 0,\r\n // 左边距离\r\n left: 0\r\n }\r\n },\r\n watch: {\r\n offsetTop(val) {\r\n this.initObserver()\r\n },\r\n enabled(val) {\r\n if (val === false) {\r\n this.fixed = false\r\n this.disconnectObserver(this.stickyObserverName)\r\n } else {\r\n this.initObserver()\r\n }\r\n },\r\n customNavHeight(val) {\r\n this.initObserver()\r\n }\r\n },\r\n mounted() {\r\n this.initObserver()\r\n },\r\n methods: {\r\n // 初始化监听组件的布局状态\r\n initObserver() {\r\n if (!this.enabled) return\r\n // #ifdef H5\r\n this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight\r\n // #endif\r\n // #ifndef H5\r\n this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.customNavHeight : this.customNavHeight\r\n // #endif\r\n \r\n this.disconnectObserver(this.stickyObserverName)\r\n this._tGetRect('.' + this.elClass).then((res) => {\r\n this.height = res.height\r\n this.left = res.left\r\n this.width = res.width\r\n this.$nextTick(() => {\r\n this.connectObserver()\r\n })\r\n })\r\n },\r\n // 监听组件的布局状态\r\n connectObserver() {\r\n this.disconnectObserver(this.stickyObserverName)\r\n // 组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver\r\n const contentObserver = this.createIntersectionObserver({\r\n thresholds: [0.95, 0.98, 1]\r\n })\r\n contentObserver.relativeToViewport({\r\n top: -this.stickyTop\r\n })\r\n contentObserver.observe('.' + this.elClass, res => {\r\n if (!this.enabled) return\r\n this.setFixed(res.boundingClientRect.top)\r\n })\r\n this[this.stickyObserverName] = contentObserver\r\n },\r\n // 设置是否固定\r\n setFixed(top) {\r\n const fixed = top < this.stickyTop\r\n if (fixed) this.$emit('fixed', this.index)\r\n else if (this.fixed) this.$emit('unfixed', this.index)\r\n this.fixed = fixed\r\n },\r\n // 停止监听组件的布局状态\r\n disconnectObserver(observerName) {\r\n const observer = this[observerName]\r\n observer && observer.disconnect()\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n</style>\r\n"],"sourceRoot":""}
|
