该项目位于 ，是一个基于 Vue.js、Element UI 和 FastAPI 的现代化后台管理系统模板。它旨在为开发人员提供一个快速启动新项目的平台，帮助节省时间和精力，以便专注于业务逻辑和创新。项目简介Vue-Element-Admin-FastAPI 结合了前端 Vue.js 框架与后端 FastAPI 的高性能特性，利用 Element UI 提供美观易用的组件库。它的核心功能包括用户认
Element-UI登录页实现src/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 f
转载
2024-07-26 09:35:42
64阅读
1.添加工具类：dialogDrag.js import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind (el, binding, vnode, oldVnode) { const dialogHead ...
转载
2021-09-29 10:03:00
98阅读
2评论
目录前言一、新建首页页面1.新建首页二、引入路由1.引入vue-router2.全局引入router3.运行页面总结前言 随着框架的流行，越来越多的开发者喜欢用框架开发项目，以vue、react等居主流，国内比较常用的就是vue进行项目的搭建，本系列文章主要使用vue+webpack进行项目的搭建，其中使用了elementUI进行了扩展，增加到后台系统的布局和路由相关知识，有兴趣就往下看吧~一、新
转载
2024-03-07 16:29:37
140阅读
当对话框的“×号”和 取消按钮都想调用同个消息提示关闭函数时，使用@close出现错误问题会出现，你点取消后触发一次消息提示，然后你点确定关闭后，会再次触发对话框的close事件，这样你就会两次有消息提示了。原因由于你点取消的时候出现消息提示后，点击“确定”，即会关闭弹窗，所以会触发@close事件解决方式可以通过这样解决：<el-dialog
title="修改摄像
转载
2024-05-05 17:48:52
265阅读
Vue学习笔记 – Vue的响应式原理今天通过王红元老师的教学视频和一些博主的技术分享，学习了Vue的响应式原理，话不多说直接进入正题这是Vue官网中提供的响应式原理示意图，总结起来我们最常见到的响应式原理的答案就是：使用Object.defineProperty将所有属性使用setter和getter进行劫持，在读取数据和写入数据时进行拦截处理这是我自己总结的响应式流程：然而这只是响应式原理中的
同事给到我一个新的需求，其中包括一个上传的图片列表的顺序调整功能，还需要通过拖拽图片实现调序，简单实现这个功能，并做一个记录环境：Vue3 + element-ui，在组件el-upload中的多文件上传列表中实现，先上运行图，动图演示功能符合你的需求，你就接着往下看，不符合也节约你的时间直接上源码吧，先是上布局部分<el-upload
v-model:file-list="fi
前言：本篇博客主要介绍了前端页面的一些消息提示框，均是element-ui中的组件，查找起来比较方便。详细文档可以查看element-ui官网：Element-uiMessage消息提示框用来显示不同状态的提示框(不可手动点击关闭)// 显示成功的操作
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'succe
转载
2024-03-22 15:38:18
712阅读
讲解 组件.vue 使用组件
原创
2022-09-01 17:09:32
335阅读
问题：Element-UI 作为当前较为成熟的 Vue 框架的 UI 组件，能有效的提高特异性不强的项目的界面开发。但是，作为一个要兼备处理多方面问题的第三方库，Element-UI 也存在着一些问题。比如 <el-dialog>。在引用 <el-dialog> 时，尤其是将其作为编辑弹窗时，常常会有一个问题，便是在使用鼠标滑动选取弹窗中做文本选择时，若不注意将光标滑到弹窗
转载
2024-05-03 19:51:49
1284阅读
修改style样式 但是由于scope只能修改当前组件样式，所以去掉scope<style>
.el-dialog__header {
background: #002a52;
text-align: center;
}
.el-dialog__title {
color: aliceblue;
}
</style>我们可以F12 
转载
2024-02-24 07:43:56
535阅读
移动端导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：1px 问题UI 图完美适配方案iPhoneX 适配方案高清屏图片模糊问题…接下来我们从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理一、英寸一般用英寸描述屏幕的物理大小，如电脑的 13、16，手机显示器的 4.8、5.7 等使用的单位都是英寸。需要注意，上面的尺寸都是屏幕对角线的长度： 英寸(i
element ui 对话框el-dialog关闭事件详解通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了在标签中加入@close='closeDialog'mothods中加入//关闭弹框的事件closeDialog(){this.xxx = '';//清空数据},以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一
转载
2024-04-25 23:05:51
601阅读
目录1. Layout 布局 2. Container 布局容器 3. Color 色彩 4. Typography 字体 5. Icon 图标 6. Button 按钮汇总LayoutRow Attributes：参数说明类型可选值默认值gutter栅格间隔number—0type布局模式，可选 flex，现代浏览器下有效string——justifyflex 布局下的水平排列方式strings
转载
2024-03-22 12:34:25
205阅读
1、问题描述：在弹框里，有个table，我本意是想着在拿到数据渲染table后，利用setCurrentRow()方法让第一行为默认选中高亮状态，这就需要操作dom，然而这个dom在这里根本拿不到，即使是加了this.$nextTick(()=>{})。 2、但是根据以往的经验，我一般关闭dialo
原创
2021-07-13 17:21:59
818阅读
文章目录目标代码0.创建组件1.按钮2.头像下拉框3.去除左右缝隙4.点击按钮折叠导航栏：Vuex5.折叠标题和Header效果总代码CommonHeader.vuestore的index.jsstore的tab.js效果参考 案例链接【前端】Vue+Element UI案例：通用后台管理系统-导航栏（视频p1-16）【前端】Vue+Element UI案例：通用后台管理系统-Header+导航
转载
2024-05-11 20:01:09
346阅读
<el-dialog
v-if="showDialog"
style='position:relative'
v-dialogDrag //在组件上加上该指令
title="双击标题栏切换全屏）"
:visible.sync="showDialog"
转载
2024-03-19 21:23:15
2114阅读
Vue.js似乎成了一种潮流。UI框架element-ui也跟着成了一种潮流，不过得承认，至少我个人还是非常认可的，element-ui做的是真不错。用到element-ui，那么在dialog中搭配form就必不可少。<el-dialog
:visible.sync="visible"
title="弹窗"
:before-close="beforeClose"
转载
2024-02-19 09:53:25
93阅读
最终效果图有数据时： 无数据时：常见情况-有数据时代码：<el-select v-model="devType" style="width:100%">
<el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-option&g
转载
2024-03-26 09:55:59
99阅读
原理是 利用vue 的自定义指令功能 自定义一个指令 官方文档 下面是指令内容export default {
bind(el, binding, vnode, oldVnode) {
let resizeEvent = new CustomEvent('drag-resize',{detail:'尺寸变化',bubbles:false});
//初始化不最大化
el.
转载
2024-04-19 20:27:23
679阅读
