You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
13 KiB
1 lines
13 KiB
{"version":3,"sources":["webpack:////Users/jj/xuan-pay-cweb/components/quick-skeleton.vue?1ee5","webpack:////Users/jj/xuan-pay-cweb/components/quick-skeleton.vue?2610","webpack:////Users/jj/xuan-pay-cweb/components/quick-skeleton.vue?fc40","webpack:////Users/jj/xuan-pay-cweb/components/quick-skeleton.vue?dd28","uni-app:///components/quick-skeleton.vue","webpack:////Users/jj/xuan-pay-cweb/components/quick-skeleton.vue?dc2d","webpack:////Users/jj/xuan-pay-cweb/components/quick-skeleton.vue?1911"],"names":[],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA2H;AAC3H;AACkE;AACL;AACa;;;AAG1E;AACuM;AACvM,gBAAgB,iNAAU;AAC1B,EAAE,oFAAM;AACR,EAAE,yFAAM;AACR,EAAE,kGAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,6FAAU;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;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACRA;AAAA;AAAA;AAAA;AAA+xB,CAAgB,4yBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;ACanzB;AACA,wBADA;AAEA;AACA;AACA,kBADA;AAEA,mBAFA,EADA;;AAKA;AACA,kBADA;AAEA,uBAFA,EALA;;AASA;AACA,kBADA;AAEA,mBAFA,EATA;;AAaA;AACA,mBADA;AAEA,kBAFA,EAbA;;AAiBA;AACA,kBADA;AAEA,kBAFA;AAGA;AApBA,GAFA;AAwBA,MAxBA,kBAwBA;AACA;AACA,yCADA;AAEA,oBAFA;AAGA,2BAHA;AAIA,6BAJA;;AAMA,GA/BA;AAgCA;AACA,WADA,mBACA,GADA,EACA;AACA;AACA,KAHA,EAhCA;;AAqCA,SArCA,qBAqCA;AACA;AACA,GAvCA;AAwCA;AACA;AACA;AACA;AACA;AACA,qCADA;AAEA,uCAFA;;AAIA;AACA,KATA;AAUA;AACA;AACA;AACA;AACA;AACA,OAFA;;AAIA;AACA;;AAEA;AACA;AACA,KAtBA;AAuBA;AACA;;AAEA;AACA;AACA;AACA,OAFA;;AAIA,KA/BA;AAgCA,gBAhCA,0BAgCA;AACA;;AAEA;AACA;AACA,OAFA;AAGA,KAtCA,EAxCA,E;;;;;;;;;;;;;ACbA;AAAA;AAAA;AAAA;AAA0nC,CAAgB,ymCAAG,EAAC,C;;;;;;;;;;;ACA9oC;AACA,OAAO,KAAU,EAAE,kBAKd","file":"components/quick-skeleton.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./quick-skeleton.vue?vue&type=template&id=33aabfa8&\"\nvar renderjs\nimport script from \"./quick-skeleton.vue?vue&type=script&lang=js&\"\nexport * from \"./quick-skeleton.vue?vue&type=script&lang=js&\"\nimport style0 from \"./quick-skeleton.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../Applications/HBuilderX.app/Contents/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 = \"components/quick-skeleton.vue\"\nexport default component.exports","export * from \"-!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--16-0!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./quick-skeleton.vue?vue&type=template&id=33aabfa8&\"","var components\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./quick-skeleton.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./quick-skeleton.vue?vue&type=script&lang=js&\"","<template>\n <view v-if=\"show\" :style=\"{width: systemInfo.width + 'px', height: systemInfo.height + 'px', backgroundColor: bgcolor, position: 'absolute', left: 0, top: 0, zIndex: 9998, overflow: 'hidden'}\">\n <view v-for=\"(item,rect_idx) in skeletonRectLists\" :key=\"rect_idx + 'rect'\" :class=\"[loading == 'chiaroscuro' ? 'chiaroscuro' : '']\"\n :style=\"{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}\"></view>\n <view v-for=\"(item,circle_idx) in skeletonCircleLists\" :key=\"circle_idx + 'circle'\" :class=\"loading == 'chiaroscuro' ? 'chiaroscuro' : ''\"\n :style=\"{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', borderRadius: item.width + 'px', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}\"></view>\n <view class=\"spinbox\" v-if=\"loading == 'spin'\">\n <view class=\"spin\"></view>\n </view>\n </view>\n</template>\n\n<script>\n export default {\n name: \"quick-skeleton\",\n props: {\n bgcolor: {\n type: String,\n value: '#FFF'\n },\n selector: {\n type: String,\n value: 'skeleton'\n },\n loading: {\n type: String,\n value: 'spin'\n },\n show: {\n type: Boolean,\n value: false\n },\n isNodes: {\n type: Number,\n value: false\n } //控制什么时候开始抓取元素节点,只要数值改变就重新抓取\n },\n data() {\n return {\n loadingAni: ['spin', 'chiaroscuro'],\n systemInfo: {},\n skeletonRectLists: [],\n skeletonCircleLists: []\n }\n },\n watch: {\n isNodes (val) {\n this.readyAction();\n }\n },\n mounted() {\n this.attachedAction();\n },\n methods: {\n attachedAction: function(){\n //默认的首屏宽高，防止内容闪现\n const systemInfo = uni.getSystemInfoSync();\n this.systemInfo = {\n width: systemInfo.windowWidth,\n height: systemInfo.windowHeight\n };\n this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin';\n },\n readyAction: function(){\n const that = this;\n //绘制背景\n uni.createSelectorQuery().selectAll(`.${this.selector}`).boundingClientRect().exec(function(res){\n that.systemInfo.height = res[0][0].height + res[0][0].top;\n });\n\n //绘制矩形\n this.rectHandle();\n\n //绘制圆形\n this.radiusHandle();\n },\n rectHandle: function(){\n const that = this;\n\n //绘制不带样式的节点\n uni.createSelectorQuery().selectAll(`.${this.selector}-rect`).boundingClientRect().exec(function(res){\n that.skeletonRectLists = res[0];\n });\n\n },\n radiusHandle(){\n const that = this;\n\n uni.createSelectorQuery().selectAll(`.${this.selector}-radius`).boundingClientRect().exec(function(res){\n that.skeletonCircleLists = res[0];\n });\n }\n }\n }\n</script>\n\n<style>\n.spinbox{\n position: fixed;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n z-index: 9999\n}\n.spin {\n display: inline-block;\n width: 64rpx;\n height: 64rpx;\n}\n.spin:after {\n content: \" \";\n display: block;\n width: 46rpx;\n height: 46rpx;\n margin: 1rpx;\n border-radius: 50%;\n border: 5rpx solid #409eff;\n border-color: #409eff transparent #409eff transparent;\n animation: spin 1.2s linear infinite;\n}\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.chiaroscuro{\n width: 100%;\n height: 100%;\n background: rgb(194, 207, 214);\n animation-duration: 2s;\n animation-name: blink;\n animation-iteration-count: infinite;\n}\n\n@keyframes blink {\n 0% {\n opacity: .4;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: .4;\n }\n}\n\n@keyframes flush {\n 0% {\n left: -100%;\n }\n 50% {\n left: 0;\n }\n 100% {\n left: 100%;\n }\n}\n.shine {\n animation: flush 2s linear infinite;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 100%;\n background: linear-gradient(to left,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, .85) 50%,\n rgba(255, 255, 255, 0) 100%\n )\n}\n</style>","import mod from \"-!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--6-oneOf-1-2!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./quick-skeleton.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--6-oneOf-1-2!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./quick-skeleton.vue?vue&type=style&index=0&lang=css&\"","// extracted by mini-css-extract-plugin\n if(module.hot) {\n // 1640240847365\n var cssReload = require(\"/Applications/HBuilderX.app/Contents/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":""} |