// index.js
import Backtop from "./src/backtop"; // 引入組件

// 配置安裝方法
/* istanbul ignore next */
Backtop.install = function (Vue) {
? Vue.component(Backtop.name, Backtop);
};

// 導(dǎo)出模塊
export default Backtop;

<template>
?<!-- xl-backtop樣式名，需要自己在樣式文件中定義這個(gè)樣式內(nèi)容 -->
? <div
? ? v-if="visible"
? ? @click.stop="handleClick"
? ? :style="{
? ? ? right: styleRight,
? ? ? bottom: styleBottom,
? ? }"
? ? class="xl-backtop"
? >
? ? <slot>
? ? <!-- 這里是返回頂部的圖標(biāo) -->
? ? ? <van-icon name="arrow-up" />
? ? </slot>
? </div>
</template>

<script>
// 這里引入了節(jié)流函數(shù)
import { _throttle } from "@/utils";

const cubic = (value) => Math.pow(value, 3);
const easeInOutCubic = (value) =>
? value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;

export default {
? name: "XlBacktop",

? props: {
? ? visibilityHeight: {
? ? ? type: Number,
? ? ? default: 200,
? ? },
? ? target: [String],
? ? right: {
? ? ? type: Number,
? ? ? default: 40,
? ? },
? ? bottom: {
? ? ? type: Number,
? ? ? default: 40,
? ? },
? },

? data() {
? ? return {
? ? ? el: null,
? ? ? container: null,
? ? ? visible: false,
? ? };
? },

? computed: {
? ? styleBottom() {
? ? ? return `${this.bottom}px`;
? ? },
? ? styleRight() {
? ? ? return `${this.right}px`;
? ? },
? },

? mounted() {
? ? this.init();
? ? this.throttledScrollHandler = _throttle(this.onScroll, 300);
? ? this.container.addEventListener("scroll", this.throttledScrollHandler);
? },

? methods: {
? ? init() {
? ? ? this.container = document;
? ? ? this.el = document.documentElement;
? ? ? if (this.target) {
? ? ? ? this.el = document.querySelector(this.target);
? ? ? ? if (!this.el) {
? ? ? ? ? throw new Error(`target is not existed: ${this.target}`);
? ? ? ? }
? ? ? ? this.container = this.el;
? ? ? }
? ? },
? ? onScroll() {
? ? ? const scrollTop = this.el.scrollTop;
? ? ? this.visible = scrollTop >= this.visibilityHeight;
? ? },
? ? handleClick(e) {
? ? ? this.scrollToTop();
? ? ? this.$emit("click", e);
? ? },
? ? scrollToTop() {
? ? ? const el = this.el;
? ? ? const beginTime = Date.now();
? ? ? const beginValue = el.scrollTop;
? ? ? const rAF =
? ? ? ? window.requestAnimationFrame || ((func) => setTimeout(func, 16));
? ? ? const frameFunc = () => {
? ? ? ? const progress = (Date.now() - beginTime) / 500;
? ? ? ? if (progress < 1) {
? ? ? ? ? el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
? ? ? ? ? rAF(frameFunc);
? ? ? ? } else {
? ? ? ? ? el.scrollTop = 0;
? ? ? ? }
? ? ? };
? ? ? rAF(frameFunc);
? ? },
? },

? beforeDestroy() {
? ? this.container.removeEventListener("scroll", this.throttledScrollHandler);
? },
};
</script>

// 返回頂部
.xl-backtop {
? ?position: fixed;
? width: 40px;
? height: 40px;
? display: flex;
? justify-content: center;
? align-items: center;
? font-size: 20px;
? cursor: pointer;
? box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
? border-radius: 50%;
? z-index: 5;
}

// components/index.js
import BackTop from "./backtop"; // 引入我們的返回頂部組件。其他的類似的一起寫(xiě)在這里
const components = [BackTop]; // 其他的組件以數(shù)組形式繼續(xù)寫(xiě)
const install = function (Vue, opts = {}) {
? components.map((component) => {
? ? Vue.component(component.name, component);
? });
};
/* istanbul ignore if */
if (typeof window !== "undefined" && window.Vue) {
? install(window.Vue);
}
// 組合導(dǎo)出安裝方法
const exportsResult = {
? version: "1.0.0",
? install,
};
Object.assign(exportsResult, components);

export default exportsResult;

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import store from "./store";
import router from "./router";


// 自己封裝的公共安裝組件
import XlComponent from "@/components";
Vue.use(XlComponent);


import "@/styles/index.less"; // 全局 css

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
? el: "#app",
? router,
? store,
? components: { App },
? template: "<App/>",
});

<template>
? <transition name="van-fade">
? ? <div
? ? ? v-if="visible"
? ? ? @click.stop="handleClick"
? ? ? :style="{
? ? ? ? right: styleRight,
? ? ? ? bottom: styleBottom,
? ? ? }"
? ? ? class="xl-backtop"
? ? >
? ? ? <slot>
? ? ? ? <van-icon name="arrow-up" color="#13b7f6" />
? ? ? </slot>
? ? </div>
? </transition>
</template>

<script>
import { _throttle } from "@/utils";

const cubic = (value) => Math.pow(value, 3);
const easeInOutCubic = (value) =>
? value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;

export default {
? name: "XlBacktop",

? props: {
? ? visibilityHeight: {
? ? ? type: Number,
? ? ? default: 200,
? ? },
? ? target: [String],
? ? right: {
? ? ? type: Number,
? ? ? default: 40,
? ? },
? ? bottom: {
? ? ? type: Number,
? ? ? default: 40,
? ? },
? },

? data() {
? ? return {
? ? ? el: null,
? ? ? container: null,
? ? ? visible: false,
? ? };
? },

? computed: {
? ? styleBottom() {
? ? ? return `${this.bottom}px`;
? ? },
? ? styleRight() {
? ? ? return `${this.right}px`;
? ? },
? },

? mounted() {
? ? this.init();
? ? this.throttledScrollHandler = _throttle(this.onScroll, 300);
? ? this.container.addEventListener("scroll", this.throttledScrollHandler);
? },

? methods: {
? ? init() {
? ? ? this.container = document;
? ? ? this.el = document.documentElement;
? ? ? if (this.target) {
? ? ? ? this.el = document.querySelector(this.target);
? ? ? ? if (!this.el) {
? ? ? ? ? throw new Error(`target is not existed: ${this.target}`);
? ? ? ? }
? ? ? ? this.container = this.el;
? ? ? }
? ? },
? ? onScroll() {
? ? // 這里，如果document.documentElement.scrollTop 的值為0，就獲取document.body.scrollTop
? ? ? const scrollTop = this.el.scrollTop || document.body.scrollTop;
? ? ? this.visible = scrollTop >= this.visibilityHeight;
? ? },
? ? handleClick(e) {
? ? ? this.scrollToTop();
? ? ? this.$emit("click", e);
? ? },
? ? scrollToTop() {
? ? // 還有這里，如果document.documentElement.scrollTop 的值為0，就獲取document.body元素
? ? ? const el = this.el.scrollTop? this.el : document.body;
? ? ? const beginTime = Date.now();
? ? ? const beginValue = el.scrollTop;
? ? ? const rAF =
? ? ? ? window.requestAnimationFrame || ((func) => setTimeout(func, 16));
? ? ? const frameFunc = () => {
? ? ? ? const progress = (Date.now() - beginTime) / 500;
? ? ? ? if (progress < 1) {
? ? ? ? ? el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
? ? ? ? ? rAF(frameFunc);
? ? ? ? } else {
? ? ? ? ? el.scrollTop = 0;
? ? ? ? }
? ? ? };
? ? ? rAF(frameFunc);
? ? },
? },

? beforeDestroy() {
? ? this.container.removeEventListener("scroll", this.throttledScrollHandler);
? ? this.el = null;
? },
};
</script>