vue開發(fā)公共組件之返回頂部

更新時(shí)間：2022年01月06日 09:52:32 作者：一鍵寫代碼

這篇文章主要為大家詳細(xì)介紹了vue開發(fā)公共組件之返回頂部，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue開發(fā)公共組件之返回頂部的具體代碼，供大家參考，具體內(nèi)容如下

記錄一下開發(fā)公共組件的流程。

背景：pc端使用element-ui框架，本身是有返回頂部的組件的。現(xiàn)在需要在移動(dòng)端使用。照著葫蘆畫瓢弄一個(gè)。
記錄如何將公共組件通過install的方式，注冊(cè)為全局的組件使用。

components目錄下，新建bacttop文件夾，內(nèi)部包含一個(gè)index.js文件和一個(gè)src文件夾。
src文件夾內(nèi)放backtop.vue組件文件。

|--components
|--index.js
|-- backtop
|--index.js
|--src
|--backtop.vue

backtop下的index.js負(fù)責(zé)安裝，backtop.vue內(nèi)部寫具體的組件代碼

index.js文件內(nèi)容：

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

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

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

backtop.vue文件內(nèi)容：

<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>

返回頂部的樣式內(nèi)容：

// 返回頂部
.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;
}

為了一次性注冊(cè)多個(gè)自己寫的功能組件，我們?cè)赾omponents文件夾下面寫一個(gè)index.js

components下的index負(fù)責(zé)一次性組合多個(gè)

// components/index.js
import BackTop from "./backtop"; // 引入我們的返回頂部組件。其他的類似的一起寫在這里
const components = [BackTop]; // 其他的組件以數(shù)組形式繼續(xù)寫
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;

最后在項(xiàng)目的main.js安裝

// 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/>",
});

補(bǔ)充：上述方法在安卓端會(huì)失效

原因是document.documentElement.scrollTop在安卓端始終是0；只有pc端和IOS端才是正常的。

改寫backtop組件中的代碼，完成兼容。

<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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: