在移动端页面开发中，经常会去封装一个遮罩层（全屏弹窗），遮罩层（全屏弹窗），遮罩层（全屏弹窗）的组件，但是如果是固定定位的position：fixed；在弹出的时候会遇到一些小坑，之前搜索了一下，网上的博客也好评论也罢，总是有点缺陷或者累赘代码太多。就比如今天的主题，如何防止遮罩层（全屏弹窗）下方body内容继续滚动呢？移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案首先，pc的肯定直接就给bod
转载
2024-10-22 07:15:25
203阅读
vue3 antd项目实战——Modal弹窗自定义遮罩 maskStyle知识回调场景复现关于mask遮罩的API属性利用maskStyle属性自定义遮罩样式 知识回调文章内容文章链接vue3 antd ts实战——ant-design-vue组件库引入本文沿用ant design vue组件库，上述文章可快速上手???场景复现在后台管理系统的项目开发中，弹窗组件用到的地方很多。由于自带的默认样
转载
2024-04-08 13:31:08
2226阅读
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。v-if 是直接删除dom节点, 就是这个div就不存在了v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在;实现如下maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它有
转载
2024-07-29 17:47:43
122阅读
本文主要介绍：1、什么是服务端渲染、与客户端渲染的区别是什么？ 2、为什么需要服务端渲染，服务端渲染的利弊 3、服务端渲染的原理及技术实现一、客户端渲染（CSR）VS服务端渲染(SSR)CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。SSR是Server Side Render简称；页面上的内容是
前言：vue的slot主要分三种，默认插槽，具名插槽，作用域插槽；使用插槽是在存在父子关系的组件中使用，我们可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息，下边简单说下vue这三种插槽如何使用。 准备工作： 很简单，就创建父组件testSlot.vue，子组件children.vue，并在
Vue路由实现、路由导航、路由模式
1.$router和$route区别 router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，和router-link跳转一样,this.$router.push会往history栈中添加一个新的记录。 route相当于当前正在跳转的路由对象,可
vue 项目 openlayers 点击弹窗这个写的稍微简单一点就行了，其实呢，这个不是很难，主要是知道原理就可以了。 我想实现的内容是什么意思呢？就是说页面上有很多坐标点，点击坐标点的时候在相应的位置弹出一个框，然后框里显示出这个坐标点的相关数据。解释这个内容的其实就是添加一个弹窗图层，然后在点击的时候让他显示出来罢了。编写弹窗首先一点，我们这个弹窗需要自己写一下，具体的样式，展示的内容之类的，
转载
2024-09-22 15:24:44
295阅读
前言在采用Element-plus UI做界面开发时，遇到一个通用的问题，那就是对话框的写法。最基本的例子，主界面是一个Grid, 涉及增删改查，新增一个对象时，要弹出对话框输入一些内容，那我们一般要在Grid所在的主界面vue中定义该对话框，如下所示：<template>
<el-button text @click="dialogVisible = true"
&
一 在vue3项目里 如何使用element-plus组件库 1 下载element-plus插件npm i element-plus 2 main.tsimport { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
转载
2024-07-09 10:58:01
137阅读
最近完成了我的后台管理系统权限功能的实现，同时觉得后台系统所有的菜单都左置，会限制菜单的扩展，因此我改进了三级菜单的显示。效果演示地址github地址权限功能的实现权限路由思路： 根据用户登录的roles信息与路由中配置的roles信息进行比较过滤，生成可以访问的路由表，并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表，从而实现左侧
Vue中使用 Aplayer 和 Metingjs 添加音乐插件1、Aplayer和Metingjs 的文档2、使用方式3、完整API4、总结5、最后的话 1、Aplayer和Metingjs 的文档 Aplayer官网文档Metingjs官网文档2、使用方式在 public 目录下的 index.html 中引入核心依赖<link rel="stylesheet" href="http:
对于后台管理系统，有很多弹框的功能，这时候，我们就可以将弹框封装成一个公共组件进行复用。1. 新建
弹窗组件页在公共组件文件夹（components）下建一个弹框组件文件夹（EditboxForm）<template>
<div>
<transition name="slide">
<div class="editBoxFrom" v-show=
转载
2024-04-11 14:33:44
3232阅读
<script setup lang="ts"> import { useDraggable, useMouseInElement } from '@vueuse/core'; import type { CSSProperties } from 'vue'; interface Props { i
在
Vue3 中封装一个
弹窗组件是一个常见的需求，下面我将提供一个完整的
弹窗组件封装方案，包括组件实现、使用方法和最佳实践。基础
弹窗组件实现首先创建一个基础的
弹窗组件 BaseModal.
vue：<template>
<transition name="modal">
<div v-if="isVisible" class="modal-overlay"
前言最近刚刚结束项目，感觉收益颇多，因此记录一下，希望可以帮助到大家（我踩过的坑，大家就踩着我过去就行）背景本人java后端开发，公司临时需求需要弄一套权限管理系统，后端肯定没有问题，前端根据之前我使用的HTML,CSS感觉特别的繁琐和丑陋（主要本人不是专业前端），因此通过浏览相关资料，发现了vue+element+Admin(完美的后台前端解决方案)，它基于vue+elementui 实现，详细
转载
2024-04-16 11:13:16
155阅读
下载element-admin框架点击该地址：https://github.com/PanJiaChen/vue-element-admin用git clone https://github.com/PanJiaChen/vue-element-admin或者直接下载压缩包都可以 2.安装依赖打开项目根目录，在根目录
转载
2024-03-04 15:16:17
2287阅读
在前端项目的 components 文件夹下新建 pullRefreshView 文件夹，在其中新建组件 index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新）首先需要编写下拉刷新组件的 template，这里用到 ，代码如下：上面代码中，最外层使用了一个 div 用来包裹，作为事件绑定的容器，同时新建一个圆形 icon 的 div .circl
动态组件有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况一、component组件component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件1.1 v-if或v-show实现选项卡切换使用v-if频繁切换会频繁创建和销毁组件，消耗内存；且不会记住组件里的一些已
转载
2024-09-12 13:59:03
473阅读
VUE&Element今日目标：能够使用VUE中常用指令和插值表达式能够使用VUE生命周期函数 mounted能够进行简单的 Element 页面修改能够完成查询所有功能能够完成添加功能1，VUE1.1 概述接下来我们学习一款前端的框架，就是 VUE。Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。我们之前也学习过后端的框架 Mybatis ，Mybatis
初始化项目脚手架用的是vue-cli,vite还不太稳定，很多第三方库也存在兼容问题，为了能正常在实际项目中使用，还是选择了vue-cli。如果不是最新的脚手架，就需要重新安装一下了：npm install -g @vue/cli
# OR
yarn global add @vue/cli创建项目：vue create vue3-ts-template
// 选择Manually select
