亦洁的前端之路-CSDN博客

原创封装 Antd中Modal对话框内提交表单组件，开发效率翻倍

业务背景：在业务管理系统的项目中，几乎每个页面都会出现增、删、改、提交等对话框，如下图所示：如果每个弹出的对话框，都去拷贝a-tree-select、a-select、a-input、a-radio-group等表单项代码片段，重写add()、edit()、submit()、close()等方法；这会导致开发效率很低，因此，本次文档将描述如何封装常用的表单对话框，以备下次开发复用，极大提高工作效率，尽早下班。1、首先引入对话框Modal的代码框架该适合基本使用的代码框架包含两个部分：HTML代码块

2021-04-27 22:07:29 1885

原创 Element-UI 实现增加表单项和删除表单项

项目需求：最近在实际项目中碰到了一个需求，用户可以修改列表项的返回值，由于考虑到列表项比较多的情况，为了更好的用户体验，本次方案采用了弹出对话框，对话框内增加要修改的列表项，也可以删除掉误增加的表单项，实现过程如下：1、打开Element-UI界面，将Dialog 对话框的基本代码拷贝至项目2、在对话框的内容部分将表单组件中的动态增减表单项的代码拷贝进来3、修改表单字段名，修改按钮样式，增加接口调用详细代码如下：<template> <div> <el

2021-04-26 23:27:24 2350 1

原创检测当前浏览器版本并弹出提示框

项目需求：由于客户使用的浏览器版本不同，在项目中使用了Vue和ES6等较新的框架和语法时，就会导致网站不能正常打开，因此需要增加浏览器版本提示，并建议用户使用适配版本。下午在各大网站上搜索一圈代码后，整理出一版可使用的JS程序，方便参考，以节省下次使用时间。<script type="text/javascript"> // var chars=navigator.userAgent; //浏览器的用户代理字符串 var ua = navigator.us

2021-04-25 19:15:28 852

原创 antd组件封装可输入可下拉框选择的＜a-select＞组件

背景提要最近项目有一个需求，在选择地址时，可供下拉选择的地址不全，用户可以手动输入没有枚举的地址，并且可将这次输入地址增加到字典中。1、找到a-select组件，在此基础上改造在antd组件中，与之功能最接近的UI组件是组件，因此在此组件基础上进行修改，因为带搜索框的选择器可以输入内容，因此增加show-search，filter-option，@search=“handleSearch” 等属性和事件，当用户输入内容时则触发查询事件handleSearch，在查询事件中讲输入值赋值给选择器的valu

2021-04-23 23:06:16 3556

原创 vue3.0使用sass入门教程

vue3.0使用sass步骤1、使用npm安装sass包使用npm 安装 node-sass，sass-loader，安装使用–save-dev，在开发环境使用即可，安装具体版本如下："node-sass": "^4.14.1","sass-loader": "^9.0.3"2、新建scss文件scss代码片段如下：_variables.scss// colors$colors: ( "primary": #00E5FF, "purple": #9e6fef, "light

2021-04-22 23:09:40 1628 1

原创 Javascript实现加减乘除

Javascript实现加减乘除加减乘除加减乘除代码如下// 加减乘除export function plus(num1, num2) { const num1Digits = (num1.toString().split('.')[1] || '').length const num2Digits = (num2.toString().split('.')[1] || '').length const baseNum = Math.pow(10, Math.max(num1Digits

2021-04-20 15:48:52 2851

原创使用Flask和Vue.js实现前后端分离的全栈开发

使用Flask和Vue.js实现前后端分离的全栈开发在工作中，我使用Vue.js有一年多了，因为Vue.js文档完善，上手简单，打包方便等诸多优势，所以是目前很流行的前端框架，本项目也选择Vue.js作为前端框架。对于后端，这里选择的是比较好上手、轻量级的python后台框架–Flask。前前后后花了大概两周的时间，踩了很多坑，参考了很多博客，最终使用Flask + Vue.js + Vuetify-UI 实现了一个比较新颖的喵星君大大四柱八字排盘系统，这篇文章接下来会将开发的步骤和代码一一展示出来

2020-08-18 23:19:36 4565 3

原创如何快速在一个系统的所有页面添加表单验证？

最近忙于实现一个主打查询功能的单页面后台管理系统，其中有二十多个页面有共有的查询条件以及表单验证，这些表单验证有数字验证、车牌验证、拦截特殊字符验证等。实现步骤如下：1、首先建立一个mixin.js文件（1）在文件中声明queryParam对象，并列举出这二十几个页面涉及的属性值。因为属性值共享，会出现冗余且为空的属性值，可以采用filterObj(param)方法:export const filterObj = obj => { if (!(typeof obj === 'objec

2020-06-03 17:50:47 267

原创 VScode设置Eslint规则并在保存时自动修复，让编程如丝般顺滑

不管是多人合作还是个人项目，代码规范是很重要的。使用Eslint规则来规范代码风格不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue。平时常用的ESLint规则参考如下，并将文件保存至.eslintrc.js文件：ESLint规则.首先在Vscode安装Eslint、Prettier-Code、formatter、Vetur插件。接着点开VScode的文件—>首选项—>设置处选择setting，根据个

2020-05-28 17:17:01 6448 1

Web编程少女