vue 封装dialog_Vue 弹出框组件的完整封装过程

2021-8-16    前端达人 前端及开发文章及欣赏

引言

因为项目搬砖需要,笔者从 2019 年 11 月份开始学习 Vue.js,在完整地敲了一遍 vue-admin 框架中的用户管理 Demo 、断点跟踪前端调用流程、并摸清楚了 Vue.js 的开发套路后,总算可以出师了。

写作本文有两个原因,一是对这段时间学习 Vue.js 的过程做一个总结;另外就是完成自己 2019 下半年在 GitChat 的写作目标,8 月份曾在一个知识星球公布了下半年写两篇 Chat 的目标,迟迟没有完成。

以上就是本文产生的背景了,再说回到 Vue.js。笔者年初也弄了一阵儿 Angular.js,虽然都是前端框架,感觉 Vue.js 入门更简单一些,其数据驱动的设计理念跟 Java 面向对象编程的思维模式相似,所以学起来更轻松。

之所以选择弹框组件这个话题,是因为笔者参与的新产品中,很多地方都涉及到弹出页面,所以仔细研究了一下弹框组件的封装原理,解决了弹出页面封装的技术问题后,笔者这半路前端也能够应付一阵子开发工作了!

环境准备

Vue 开发相关的工具及其关系回顾,这里先回忆一下跟 Vue 项目开发有关的概念:

名词

解释

作用

Vue.js

一个前端框架

用于构建用户界面的渐进式框架

*.vue 文件

一种文件类型

以类 HTML 语法描述一个 Vue 组件

vue-cli

Vue 官方脚手架

对单个 *.vue 文件进行快速原型开发

eslint

前端代码检查工具

编写高质量前端代码的利器,类似 findbugs

webpack

模块打包器

类似 maven,将前端项目打包成静态资源文件

IDEA Vue.js 插件

IDEA 插件

使 IDEA 能够支持 Vue 项目开发

我们在使用 IDEA 开发 Vue 项目时,只需要安装 Vue.js 插件就可以了,不需要使用 vue-cli 脚手架;引入 ESLint 是为了编写高质量的前端代码,也可以不用,而且 IDEA 的快速修正功能很强大,不需要完全了解 ESLint 规范;至于打包工具 webpack,初学完全可以先忽略它。

GitHub 上有一个 Vue 的半成品项目 vueAdmin-template,可以基于它来学习或者二次开发,本文也是在它基础上完成一个弹框组件学习案例的。这里使用 IDEA 作为开发工具,相关准备工作如下:

IDEA 安装 Vue.js 插件;

IDEA 安装 eslint 插件;

IDEA 添加 .vue 文件模板;

IDEA 导入 vueAdmin-template,项目地址。

常见的几种弹出框类型

Web 开发过程中常用的弹框,归纳起来,主要有三类:

消息提示框,即 alert,不需要进行操作;

操作确认框,即 confirm,包含“确定”和“取消”按钮;

页面弹出框,即 openwindow,弹出一个完整的页面,用户输入信息后,通过“确定”或“取消”提交信息。

第一、二类弹出框,ElementUI 都有封装,拿来用即可;第三类弹出框,可以结合 el-dialog 组件完成。 在笔者参与的项目中,弹出页面的特点在于,父组件弹出子组件后,用户需要在弹出页面配置信息、点击“确定”按钮提交。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档