{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\components\\BackToTop\\index.vue?vue&type=style&index=0&id=787a82f6&scoped=true&lang=css&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\components\\BackToTop\\index.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5iYWNrLXRvLWNlaWxpbmcgewogIHBvc2l0aW9uOiBmaXhlZDsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGN1cnNvcjogcG9pbnRlcjsKfQoKLmJhY2stdG8tY2VpbGluZzpob3ZlciB7CiAgYmFja2dyb3VuZDogI2Q1ZGJlNzsKfQoKLmZhZGUtZW50ZXItYWN0aXZlLAouZmFkZS1sZWF2ZS1hY3RpdmUgewogIHRyYW5zaXRpb246IG9wYWNpdHkgLjVzOwp9CgouZmFkZS1lbnRlciwKLmZhZGUtbGVhdmUtdG8gewogIG9wYWNpdHk6IDAKfQoKLmJhY2stdG8tY2VpbGluZyAuSWNvbiB7CiAgZmlsbDogIzlhYWFiZjsKICBiYWNrZ3JvdW5kOiBub25lOwp9Cg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/BackToTop","sourcesContent":["<template>\n <transition :name=\"transitionName\">\n <div v-show=\"visible\" :style=\"customStyle\" class=\"back-to-ceiling\" @click=\"backToTop\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 17 17\" xmlns=\"http://www.w3.org/2000/svg\" class=\"Icon Icon--backToTopArrow\" aria-hidden=\"true\" style=\"height:16px;width:16px\"><path d=\"M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z\" /></svg>\n </div>\n </transition>\n</template>\n\n<script>\nexport default {\n name: 'BackToTop',\n props: {\n visibilityHeight: {\n type: Number,\n default: 400\n },\n backPosition: {\n type: Number,\n default: 0\n },\n customStyle: {\n type: Object,\n default: function() {\n return {\n right: '50px',\n bottom: '50px',\n width: '40px',\n height: '40px',\n 'border-radius': '4px',\n 'line-height': '45px',\n background: '#e7eaf1'\n }\n }\n },\n transitionName: {\n type: String,\n default: 'fade'\n }\n },\n data() {\n return {\n visible: false,\n interval: null,\n isMoving: false\n }\n },\n mounted() {\n window.addEventListener('scroll', this.handleScroll)\n },\n beforeDestroy() {\n window.removeEventListener('scroll', this.handleScroll)\n if (this.interval) {\n clearInterval(this.interval)\n }\n },\n methods: {\n handleScroll() {\n this.visible = window.pageYOffset > this.visibilityHeight\n },\n backToTop() {\n if (this.isMoving) return\n const start = window.pageYOffset\n let i = 0\n this.isMoving = true\n this.interval = setInterval(() => {\n const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))\n if (next <= this.backPosition) {\n window.scrollTo(0, this.backPosition)\n clearInterval(this.interval)\n this.isMoving = false\n } else {\n window.scrollTo(0, next)\n }\n i++\n }, 16.7)\n },\n easeInOutQuad(t, b, c, d) {\n if ((t /= d / 2) < 1) return c / 2 * t * t + b\n return -c / 2 * (--t * (t - 2) - 1) + b\n }\n }\n}\n</script>\n\n<style scoped>\n.back-to-ceiling {\n position: fixed;\n display: inline-block;\n text-align: center;\n cursor: pointer;\n}\n\n.back-to-ceiling:hover {\n background: #d5dbe7;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n transition: opacity .5s;\n}\n\n.fade-enter,\n.fade-leave-to {\n opacity: 0\n}\n\n.back-to-ceiling .Icon {\n fill: #9aaabf;\n background: none;\n}\n</style>\n"]}]}
|
