---

前言

在项目中，我们经常会遇到弹窗功能，当弹框弹出时，背后的页面禁止滚动，且模糊处理。

---

一、效果图

没添加模糊的效果

添加模糊后的效果

二、使用步骤

1.下载@studio-freight/lenis

下载控制页面滚动的插件@studio-freight/lenis，可以使用插件的start()方法控制页面开始滚动，stop()方法控制页面禁止滚动。

npm i @studio-freight/lenis@^1.0.27

2.使用@studio-freight/lenis

首先，初始化lenis

在main.js中

// 引入插件lenis
import Lenis from '@studio-freight/lenis'// 初始化lenisconst lenis = new Lenis()function raf(time) {lenis.raf(time)requestAnimationFrame(raf)}requestAnimationFrame(raf)Vue.prototype.$lenis = lenis;

在需要使用的组件中调用

// 禁止页面滚动
this.$lenis.stop();// 允许页面滚动
this.$lenis.start();

三、下载 gsap在编写页面动画

1. 下载gsap

npm i gsap

2.引入gsap

在需要使用的组件中引入

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);export default {data() {return {appTl: gsap.timeline({reversed: true, paused: true, }),}},methods: {// 定义页面模糊的方法initAppFilterTl() {// #app为id="app"的元素，在vue中就是整个项目了，一般默认情况下，app.vue的的最外层div的id为app。// filter:css属性，用来给页面增加模糊效果，blur(0)中的值越大，模糊效果越明显// duration: 做动画所需要的时间this.appTl.fromTo("#app", {filter: "blur(0)"}, {filter: "blur(5px)", duration: .1});},}
}

3.调用gsap的方法，让页面模糊

调用gsap的play()方法是页面模糊，reverse()是页面还原清晰度。

// 页面模糊
this.appTl.play();
// 页面清晰度还原
this.appTl.reverse();

---

总结

这里总结了当弹框弹出时，给弹框的背景模糊处理，禁止滚动的方法，使用插件来实现，不是用纯js写的。