- 博客(59)
- 收藏
- 关注
RSS订阅原创 前端 mockjs模拟数据
mockjs文档：Mock.js1.下载mockjsnpm install mockjs --save //开发环境2.在src下新建mock文件并导入index.jsimport Mock from "mockjs";const { newsList } = Mock.mock({ "newsList|75": [ { id: "@increment", title: "@ctitle()", content: "@cpara...
2022-02-05 13:45:27
634
原创 vue实现 修改密码
1.定义一个对话框并绑定数据<el-dialog title="重置密码" :visible.sync="ResetPwdDialogVisible" width="40%" @close="resetForm('pwdForm')"> <el-form :model="resetPwdForm" status-icon :rules="resetPwdRules
2022-02-05 08:14:15
4919
1
原创 vue实现 文件重命名
1.定义一个弹框 <el-dialog title="文件重命名" :visible.sync="RenameDialogVisible" width="40%" @close="resetForm('FileFormRef')" :close-on-click-modal="false"
2022-02-03 17:26:01
2232
原创 markdown编辑器
//markdown编辑器<template> <div> <div class="edit"> <mavon-editor v-model="model.content" :placeholder="'Edit ···'" ref="md" @imgAdd="imgAdd" @imgDel="im.
2022-02-03 17:04:13
686
原创 vue中 excel 导入导出方法二
导入1.定义可以拖拽上传组件<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragente.
2022-02-03 16:42:38
1220
1
原创 上传并下载excel表格
一、excel的上传1.先定义el-upload<template> <div class="uploadBox"> <!-- 返回主页 --> <div class="homeBox"> <router-link to="/"> <el-tooltip content="返回列表页面" placement="top"> <i class="el-ico
2022-02-01 19:38:08
777
原创 Element-UI中给el-button加上防抖
为啥我要加上防抖在项目中常常会遇到这种问题当我点击确定或者保存按钮时，如果请求时间过长或加上快速双击就会出现多次请求，造成意想不到的结果解决方法：给按钮加上一个全局指令 noMoreClick 来限制在n的时间内为 disabled//在main.js中// 提交以后禁用按钮一段时间，防止重复提交import Vue from 'vue'Vue.directive('noMoreClick', { inserted(el, binding) { el.a..
2021-12-28 12:49:15
3761
1
原创 element-ui中处理el-table固定列时最后一行被遮挡
1.定义js文件中自定义 fixtable 方法import Vue from 'vue';let setHeightFun = (el) => { // 外层表格dom let eltableDom = el;//'el'即'el-table' let bodyDom = el.querySelector('.el-table__body-wrapper');//滚动轴dom // 固定列表格dom let fixedDom = el.querySelector('.
2021-12-28 11:55:20
1681
1
原创 element-ui中el-button搜索时 带波纹 的按钮
看下效果1.先在js文件中自定义全局组件import './waves.css';//导入样式const vueWaves = {};vueWaves.install = (Vue, options = {}) => { Vue.directive('waves', { bind(el, binding) { el.addEventListener('click', e => { const customOpts = Objec..
2021-12-28 10:54:56
658
原创 程序员必备基础 ：今天推出一款产品JSEncrypt
如何安全传输存储用户密码？需要借助一款插件，JSEncrypt 前端js加密库1.jsencryptimport JSEncrypt from 'jsencrypt'; //导入Vue.prototype.$getCode = function(pass, pubkey) { //挂载到vue原型上 let encryptor = new JSEncrypt(); encryptor.setPublicKey(pubkey); let rsaPassWord = encrypt..
2021-12-28 08:47:09
5065
原创 封装上个月&&最近6个月日期
1.定义上个月、最近6个月日期方法 // 获取上个月 export function getLastMonth(split = '-') { let nowTime = new Date(); let year = nowTime.getFullYear(); let month = nowTime.getMonth() + 1; if (month < 2) { month = 12; year = year - 1; }
2021-12-23 20:19:00
376
原创 封装日期格式化方法
简简单单~~~只需三步1.首先定义日期格式化 dateFormat 方法/* * @param {string} fmt 例: YYYY-mm-dd HH:MM 表示 2019-06-06 19:45 * @param {date} date */ export function dateFormat(fmt, date) { if (typeof date == 'string') { if (fm...
2021-12-23 19:30:50
212
原创 el-input自定义封装 ( 输入框只能输入数字 )
/** 自定义指令 - 输入框限制 只能输入数字（可限制最大、最小、小数点后保留的位数）* 使用方法* 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；* 给el-input加上v-onlynumber即可。* 指令参数 max 限制最大输入（可选） min 限制最小输入（可选） precision 保留小数点位数（可选，默认为0位）* 例：* 无参数 <el-input v-onlynumber>* 有...
2021-12-23 18:42:18
1222
原创 element-ui 中Dialog自定义封装弹窗拖拽+水平方向伸缩
三步就可以实现~~~好了上代码1.在工具包utils中定义 initDialogHeight 方法/** * @方法名称: initDialogHeight * @功能描述: 判断当电脑的缩放大小不一致时弹框的高度 */export function initDialogHeight() { let h = initLayoutInfo().height; let devicePixelRatio = window.devicePixelRatio...
2021-12-22 11:47:04
1066
1
原创 前端文件流转成图片格式显示
来看一下文件流呵~~原来长这样，我们处理也就很简单，大概4步，1.在方法中添加responseType:'arraybuffer'export function downloadFile(query) { return fetch({ url: '/apiv2/websiteadmin-service/files/downloadFile', method: 'get', params: query, respo...
2021-12-22 08:57:48
3405
1
原创 前端工具包utils封装方法大全
import { Message } from 'element-ui'import moment from './moment'import settings from '@/settings'// 请求urlconst baseURL = settings.baseUrl// 通用下载方法export function download(fileName) { window.location.href = baseURL + '/common/download?fileName='.
2021-12-22 08:41:44
689
原创 自定义校验封装方法大全（ 数字、身份证、手机、电话、办公电话、传真、邮编、邮箱、银行账号、企业信用代码...）
这里给大家展示一系列的校验封装方法，欢迎大家来阅读，如有那些不足的地方可以指出 ^_^^_^^_^~~~ 数字、身份证、手机、电话、办公电话、传真、邮编、邮箱、银行账号、企业信用代码等校验//检验数字1export function isNumber(value) { let s = trim(value); var patrn = /^(-)?\d+(\.\d+)?$/; if (patrn.exec(s) == null || s == "") { ...
2021-12-17 11:45:08
433
原创 element-ui中Dialog 弹框组件高度适配方案
1.在工具包中添加以下代码export function initDialogHeight() { let h = initLayoutInfo().height; let devicePixelRatio = window.devicePixelRatio; let jResolutionHeight = window.screen.height; if (devicePixelRatio == 1) { if (jResolutionHeight
2021-12-16 18:13:05
2537
原创 vue实现PC端分辨率适配
简单的几步~~~这里讲二种方式：1.借助插件实现，2.利用css3媒体查询实现方法一：下载两个插件1.安装lib-flexible和px2rem-loader 两个插件npm i lib-flexible -S //生成npm i px2rem-loader -D //开发2.在项目的入口文件 main.js 里引入 lib-flexible// main.jsimport 'lib-flexible' 3.找到文件 node_...
2021-12-16 12:53:20
1419
原创 git在项目中使用 && git报错及总结
以我的分支my为例：先查看分支： git branch再把本地添加到临时仓库 ：git add .检测是否添加成功git status如果由红变成绿表示添加成功，在执行git commit -m （描述）接着查看一下是否提交到仓库git log切换到develop分支拉取最新： git checkout develop git pull 切换到自己分支： git checkout my git rebase d......
2021-12-07 13:00:51
536
原创 node安装到脚手架创建（vue2 + vue3）
1.下载Node.jsnode官网 https://nodejs.org/zh-cn/download/ 2.系统环境变量的配置
2021-12-04 14:48:38
856
原创 js中数组方法
增:push() 在数组末尾追加的数组元素，数量不限unshift()在数组开头添加的数组元素concat()⾸先会创建⼀个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组删:pop() ⽤于删除数组的最后⼀项shift() ⽅法⽤于删除数组的第⼀项splice()传⼊两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组slice() ⽤于创建⼀个包含原有数组中⼀个或多个元素的新数组，不会影响原始数组改:splic
2021-10-28 20:24:40
100
原创 js中数组排序（冒泡、插队）
1.es6新增sort方法比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数 记住： sort中接收两个参数，如果想要第一个参数在前，我们就返回-1实现： goods.sort((a,b)=>{ if (this.sort==1) { return...
2021-10-28 20:05:29
359
原创 vue中diff算法
一、什么是diff算法diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁有两个特点比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较场景： 在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 Diff算法的步骤：1.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中2.当状态变更的时...
2021-10-28 19:35:28
118
1
原创 vue中的插槽（slot）
什么是插槽？插槽有哪些？如何定义插槽？如何向插槽中传值？概念：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。插槽分为三种: 默认插槽、具名插槽、作用域插槽一、 默认插槽：默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填...
2021-10-28 11:46:27
748
原创 vue2与vue3区别
setup (props, { attrs, slots, emit }) { // 属性 插槽 事件 const login = () => { emit('login', { username: state.username, password: state.password }) }}1.vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用ES5 ...
2021-10-27 23:28:20
292
原创 vue项目优化
一、代码优化 ：1. 使用keep-alive缓存不活动的组件二. 使用路由懒加载：三：图片懒加载四、 使用节流防抖函数(性能优化)五、v-for 遍历必须为 item 添加 key，且避免同时使用 v-if六、v-if 和 v-show 区分使用场景七、computed 和 watch 区分使用场景八. 长列表性能优化九. 事件的销毁十、第三方插件的按需引入十一、webpack打包优化...
2021-10-27 23:00:25
199
原创 react基础（jsx，组件，react-dom，react-router-dom，red ux，脚手架安装+新旧生命周期+通信...）
概念：react 是目前最流行的框架;其中是采用 mvvm 的思想，让我们把所有的只关注视图层和逻辑层react 的创始人：Facebook； js 的创始人：布兰登 艾奇；react由：(jsx，组件，react-dom)，和他的全家桶技术（react-router-dom，redux） jsx：用于将jsx转化js语法 react-router-dom：路由 react-dom：虚拟dom redux：管理数...
2021-10-25 11:59:58
545
原创 函数防抖与函数节流（性能优化）
概念：函数防抖(debounce) ：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。函数节流(throttle) ：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。区别：相同点：都是防止某一时间频繁触发，不同点：函数防抖是某一段时间内只执行一次，函数防抖尤其是优化搜索框,防止恶意点击;而函数节流是间隔时间执行。场景： 函数防抖1、search搜索联想，用户在不断输入值时，用防抖来节约请求资源。2、window触..
2021-10-22 15:13:13
230
原创 vue2与vue3数据双向绑定的区别
Vue2双向数据绑定存在的问题： 关于对象：Vue 无法检测property的添加或移除。 关于数组：不能利用索引直接设置一个数组项,也不能修改数组的长度。Vue2.0 原理：使用Object.defineProperty对象以及对象属性的劫持+发布订阅模式，只要数据 发生变化直接通知变化 并驱动视图更新。语法：Object.def...
2021-10-21 16:09:03
466
原创 小程序的三种生命周期
小程序有3种生命周期 分别是：全局级别，页面级别、组件级别在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面，通过Component()来注册一个组件。1.全局生命周期(App)有5种：App({ onLaunch() { console.log('onLaunch监听小程的初始化，全局只触发一次') }, onShow(){ console.log('onShow监听小程序的显示') }, onHide(){ cons.
2021-10-21 15:05:23
4217
原创 vue3 + typescript + axios封装（附带loading效果，...并携带跨域处理，...element-plus按需引入）
简单的4步即可完成：首先.在根目录创建vue.config.js里面配置跨域处理,然后在src下新建service目录，在目录中新建两个ts文件，一个为request.ts 另一个为api.ts1.对vue.config.js进行一系列配置module.exports = { // 别名 configureWebpack: { resolve: { alias: { views: '@/views', com: '@/comp..
2021-10-17 12:03:02
2835
1
原创 vue3 中ref、reactive、toRef、toRefs的区别
一、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。获取数据值的时候直接获取，不需要加.value参数只能传入对象类型import { reactive } from 'vue'// 响应式状态const state = reactive({ count: 0})// 打印count的值console.log(state.count)123456789二、refref 用于为数据添加响应式状.
2021-10-17 11:21:27
1291
原创 vue3双向数据绑定原理
1.1 通过ref起别名,通过$refs获取实例、 绑定input事件、将值定义在响应数据rective中<input type="text" ref="reftxt" @input="getValue" :value="txt">1.2 导入需要的钩子 reactive(响应数据)、toRefs（将响应数据转结果对象）、 getCurrentInstance(获取实例，相当于this)import {reactive,toRefs,getCurrentInstance}...
2021-10-12 15:54:03
484
原创 typescript (简写Ts)
1.在终端下载2个包ts包： npm install -g typescript ts-node包：npm install -g ts-node安装好这个两个包之后，使用 ts-node 命令运行文件可能会报错，无法执行需要安装 npm install -D tslib @types/node2.使用 执行tsc 作用就是把ts编译成js...
2021-10-11 20:46:33
646
原创 自定义拖拽
1.在data中定义name,和一个空数组 data(){ return{ name:"",//数据绑定 list:[],//接收数据 } },2.在模板中显示位置 <input type="text" v-model="name" @keyup.enter="add"> <div class=
2021-10-07 09:34:13
105
原创 dom操作
概念：dom为文档对象模型，有【文档(html)、元素（标签）、节点（元素上的节点）】 本质为dom树：树是由dom元素和属性节点组成操作：1.创建新节点 （document调用）createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2. 添加、移除、替换、插入 （父元素调用）appendChild() //添加removeChild() /..
2021-10-06 15:09:20
102
原创 打包优化 （pc端）-------- （添加进度条、将main.js拆分，生成打包报告、解决跨域问题、去除console、CDN引入外部资源、路由懒加载）
1.在根目录下(即：项目下)创建vue.config.js2.在vue.config.js中进行需要的配置1.1基础配置publicPath:'./', (为了加载我们的资源)module.exports={ //配置 publicPath: './', //1、 静态资源路径（默认/，打包后会白屏）}...
2021-10-05 15:09:25
577
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人