怠惰Zsj-CSDN博客

原创几种登录模式

1. 正常登录收集用户信息、校验、请求接口后台校验得到token2. 委托登录初始登录模式相同，中间加了一层，初始登录请求来主账号信息（含token）及委托人数组，再使用委托人信息登录（委托人token）或者跳过（主账号token）。验证码通过transform、rotato实现。3. 验证码登录点击发送验证码将对应手机号发送到第三方，第三方会将验证码转发给手机及相应后台，点击登陆验证对应手机号及验证码信息。4. 扫码登录二维码登录原理主要基于token的认证机制+二维码状态变化

2022-03-25 11:23:14 2572

原创简易 Vue 构建--终

简易 Dep/Watcher<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g

2021-09-20 15:46:50 146

原创 vue icon

icon组件<template> <i :class="`iconfont icon-${type}`" :style="styles" @click="handleClick"></i></template><script>export default { name: 'Icons', props: { type: { type: String, default:'' }, .

2021-08-04 17:11:43 246

原创 vue NoData

NoData组件<template> <div class="panel-noData" v-if="shown"> <i class="iconfont icon-zanmeishuju" :style="istyle"></i> <span>暂无数据</span> </div></template><script>export default { name.

2021-08-04 14:17:21 259

原创 vue面板卡片

vue卡片组件封装layout<template> <div class="bs-layout"> <slot></slot> </div></template><script>export default { name: "layout", components: {}, props: {}, data() { return .

2021-07-26 19:51:30 1334

原创 form提交表单（下载）且不跳转

var temp_form = document.createElement('form')var temp_ifr = document.createElement('iframe')// 设置form属性temp_form.action = url + '&scope=' + scopetemp_form.target = 'form_iframe'temp_form.method = 'post'temp_form.style.display = 'none'temp_ifr.

2021-07-26 19:46:07 531

原创 echarts组件封装

<template> <div :id="id" :ref="id" class="my-echart"></div></template><script>import echarts from 'echarts'import elementResizeDetectorMaker from 'element-resize-detector'export default { name: 'MyEchart', pr

2021-07-20 16:42:18 166 2

原创 drag拖拽事件

标签属性draggable 打开拖拽功能拖拽事件 // 用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点 dragHandler(event) { event = event || window.event || arguments.callee.caller.arguments[0]; event.stopPropagation(); //拖动起手 this.grid.removeNodeData = this.

2021-07-01 20:09:20 407

原创 Vue父子组件生命周期触发顺序

父子组件钩子函数执行顺序父 beforeCreate父 created父 beforeMount子 beforeCreate子 created子 beforeMount子 mounted父 mounted子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子父 beforeUpdate子 beforeUpdate子 updated父 updated父组件更新顺序父 beforeUpdate子 deactivated父 updated销毁过程父 b

2021-06-18 11:43:19 203

原创 SVG实现loading

SVG实现loading<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-sc

2021-06-18 11:23:16 257

原创简易 Vue 构建--篇四

data数据响应式<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

2021-04-07 19:17:58 92

原创数据对象实现响应式

响应式数据的实现原理<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />.

2021-04-06 22:00:09 225 1

原创函数柯里化

柯里化的作用：缓存部分性能。科里化: 一个函数原本有多个参数, 之传入一个参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构.偏函数: 一个函数原本有多个参数, 之传入一部分参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构.高阶函数: 一个函数参数是一个函数, 该函数对参数这个函数进行加工, 得到一个函数, 这个加工用的函数就是高阶函数.问题：已知一组标签名 tags=[‘div’,‘p’,‘a’,‘img’,‘ul’,‘li’]，判断后续标签名是否属于该组标签。

2021-04-02 20:05:53 85

原创函数扩展（函数拦截）

这个就是在函数原有的基础上增加额外的操作: 函数的拦截1. 使用一个临时的函数名存储函数2. 重新定义原来的函数（直接将地址重新指向新区域）3. 定义扩展的功能4. 调用临时的那个函数 function func() { console.log('原始的功能') } // #1 let _tmpFn = func // #2 指针重指 func = function () { // #4 .

2021-04-02 19:17:40 186

原创简易 Vue 构建--篇三

模拟真实DOM转换成虚拟DOM（省略了AST语法树过程）；VNode数据替换过程；VNode转换为真实DOM，更新到视图过程。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport.

2021-04-02 16:04:32 177 1

原创 vue 中 Excel 的导入导出

一、Excel 导入1. 初始导入vue-element-admin 的源代码仓库已经提供了组件源码，通过修改template和style来进行样式更改。组件地址 Excel 导入组件(UploadExcel)该组件需要配合安装 xlsx 插件，即：$ npm i xlsxExcel 导入组件(UploadExcel)源代码34行的 this.onSuccess 的参数获得的结果，即为{ header, results }对象。header是实际Excel表格的表头信息组成的数组，res

2021-03-25 19:29:44 421 1

原创简易 Vue 构建--篇二

1、将 HTML DOM 转换成 js 对象2、将 js 对象转换成 HTML DOM<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=devi.

2021-03-24 21:56:38 89

原创简易 Vue 构建--篇一

真实 DOM 中的模板数据替换<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&

2021-03-24 21:43:00 93 1

原创数据处理

列表转树形结构直接上代码// ! 列表转树形结构export function listToTree (list, rootId) { const arr = [] list.forEach(item => { // 根节点 if (item.pid === rootId) { // 寻亲 const children = listToTree(list, item.id) // 如果没有儿子，儿子返回的arr就为空，就不添加chi

2021-03-21 20:03:12 105

转载 vue 使用注意点

1. vue 中阻止修改 data 中数据Object.freeze()，这会阻止修改现有的property，也意味着响应系统无法再追踪变化。var obj = { foo: 'bar'}Object.freeze(obj)new Vue({ el: '#app', data: obj})2. 绑定动态属性/动态事件<a v-bind:[attributeName]="url"> ... </a><a v-on:[eventName]="

2021-03-17 20:07:04 236

原创 vuex中各属性的使用

vuex状态管理模式state：共享数据源；mutations：修改数据（state中的数据）；actions：异步请求；getters：对共享数据进行包装（类似计算属性）；modules: 模块化代码vuex代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count: 0, arr: [1, 3, 6,

2021-03-16 20:57:20 144

原创封装instanceof

递归实现 instanceof 功能// 封装 instanceoffunction myInstanceof(obj, type) { if (obj === null || !type) return false else if (obj.constructor.name === type.name) return true let l = obj.__proto__ return myInstanceof(l, type)}// 验证const arr =.

2021-03-08 17:03:14 152

原创 vue-router中hash模式、history模式原理

利用a连接的跳转及监听window的hashchange事件拿到跳转的hash，借助于vue的component组件，实现组件跳转。<div id="app">  <a href="#/zhuye">主页</a> <a href="#/caijing">财经</a> <a href="#/tiyu">体育</a> <a .

2021-03-08 16:54:17 454

原创 Vue组件通信

1. 父传子、子传父props、$emit 触发父亲的自定义事件2. 状态（数据）提升实际上是子传父、父传子的结合：利用父组件做中转站<div id="app"> <test-com1 :pmsg="msg"></test-com1> <test-com2 @mod-msg="handler"></test-com2></div><script src="https://cdn.jsd

2021-03-08 13:09:25 144 1

原创图片裁剪（cropperjs）

这里写自定义目录标题一、img预览框拿到blob图片信息二、cropperjs使用1、安装cropperjs2、引入css、js3、在mounted中初始化4.配置cropperjs5.裁切的两种方式5.1 服务端（1）获取cropper实例(2) 给确定注册点击事件，在事件函数中获取参数5.2 客户端一、img预览框拿到blob图片信息这里只有主要代码<input type="file" hidden ref="inputFile" @change="updateImg" />c

2021-03-08 10:49:31 335 1

原创 js原生实现贪吃蛇（解决连续键盘事件）

分析把贪吃蛇这个游戏当做一个对象,他又由一下部分组成: 1.食物; Food （宽，高，颜色，坐标xy） 2.小蛇; Snake （宽，高，颜色，坐标xy，小蛇移动） 3.游戏规则；Game(地图map) （游戏结束和胜利，用户键盘控制，解决连续键盘事件）我们将这三部分也当做三个对象,逐个分析,对它们添加自己的属性和方法,因为地图比较简单只需要设置样式即可,就不做分析,分析顺序按照难度从易到难来分析;(形参皆为游戏对象后期传进去的属性)声明：本文有借助CSDN博主id:那个方的思路(

2020-12-20 14:22:31 5200 10

classOurself的博客