352328759-优快云博客

原创 js 装饰器

// 装饰器function fun1() { console.log(arguments[0]); return arguments[0] * 2}function fun2(fun) { return function () { let res = fun(...arguments) return res }}fun1 = fun2(fun1)/* */console.log(fun1(1));end

2022-04-30 20:20:42 398

原创 el dialog 重复提交修复方案

element 虽好用, 但使用不当也容易导致一些奇怪的问题今天讲讲 “模态框中重复提交表单” 的问题问题描述有个模态框, 框里有个异步提交按钮没加锁可用重复点击加了锁 :loading=“queryParamsLock”在模态框消失前还能点击因为 “消失” 是一个动画网络上建议在 el-dialog.open 事件里解锁请求结束前, 重新打开模态框能点击解决方法把加锁条件改成这样:loading=“queryParamsLock || !dialogVisible”

2021-12-07 17:14:28 867

原创 el image-viewer 图片预览组件

Element UI(2.15.6) 的 el-image 组件有一个图片预览功能这个功能其实是调用内部组件 ImageViewer 实现的一般情况直接用 el-image 里的预览足够了但有一种情况, el-image 不能简单实现那就是 :src 展示的地址, 不在 :preview-src-list 预览图片列表里( src 是缩略图, preview-src-list 是原图)这个情况下, preview-src-list 中找不到当前图片地址, 就会从第0张开始预览不能从指定图片开始预

2021-11-04 10:52:16 1992

原创 css object-fit, object-position img 标签适应宽高

在弹性布局泛滥成灾的今天, "未知比例图片, 适应未知比例盒子"的需求已经屡见不鲜常用的方法常用的方法是用 css 的背景图div { width: 500px; height: 600px; background-image: url(cat.jpg); background-size: cover; background-position: 50% 50%;}background-size: cover; 让图片大小自适应background-position: 50% 5

2021-10-27 16:38:15 440

原创 css :nth-child(an + b) 的坑

css 的 nth-child 已经不是什么新概念了作用就是匹配其父元素的"某个"子元素注: 第一个子元素的序号为 1其实它还可以匹配"某些"子元素, 如::nth-child(odd) { /* 序号为奇数的子元素 */ }:nth-child(even) { /* 序号为偶数的子元素 */ }再拓展一下, 可以控制周长和偏移, 如:p:nth-child(an + b){...}使用公式 (an + b)。描述：a 表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。注

2021-10-21 17:26:37 258

原创 textarea 标签内换行

3个方法
回车<textarea>文字文字
文字
文字文字</textarea>用 js 获取 textarea 的内容,换行是 “\n”document.querySelectorAll("textarea")[0].value// '文字\n文字\n文字\n文字\n文字'重新用于 HTML 的话, 要把 “\n” 替换成 <br />doc

2021-10-21 16:32:47 1049

原创魔方4格滚动加载动画

啥也不说先上效果图完整代码<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-sca

2021-10-09 17:41:16 261 1

原创 js complete 是否完成图像加载

document.getElementById("compman").completecomplete 属性可返回浏览器是否已完成对图像的加载如果加载完成，则返回 true，否则返回 fasle判断图片是否加载完以下任意一条为true则认为图片完全加载完成：未指定 src 或 srcset 属性srcset 属性不存在且 src 属性为空图像资源已完全获取，并已排队进行渲染/合成image 元素先前已确定该映像完全可用并可供使用图像已“损坏”；即，由于错误或图像加载被禁用，图像加载失败

2021-09-30 11:58:13 841

原创 $.mouseenter(), $.mouseleave()

mouseover,mouseout 是 js 原生的鼠标移入移出事件mouseenter,mouseleave 是 jq 提供的鼠标移入移出事件它们的区别在于mouseover,mouseout:受子节点影响mouseenter,mouseleave:不受子节点影响定义和用法当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。注意：与 mouseover

2021-09-03 15:47:04 241

原创 Vue router 正则表达式限制路由传参

今天梅子问我Vue router 里 path: “/redirect/:path(.*)” 是什么意思?认真看了下, 有 “path:” 和 “/:” 应该是动态路由可 (.*) 是什么东西?哎呀, 这个我不知道呀!被梅子发现我这么无知, 面子都不要了, 此时此刻必须冷静并保持英俊“这个嘛, 我研究一下”根据经验, 有 “.” 和 “*” 这两个符号, 很大机会是正则表达式于是上 Vue router 官网搜 “正则”果然在 “高级匹配模式” 篇找到了相关资料正文路由传参时,

2021-07-15 13:27:49 4168

原创 $.tmpl 简单 demo

jquery.tmpl.js 其实已经是很老旧的东西了, 奈何项目用得到, 最近又重新捡起来用其实老东西也没什么不好, 起码引入即用; 功能单一也是功能明确最近用到 {{tmpl}}, 顺理成章也涉及到传值, 作用域等问题. 遂写下点笔记, 便于以后使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery.tmpl 简单 demo</title&

2021-07-13 16:01:39 275

原创 $._data 获取某元素通过jQuery 注册的事件

$._data 用于获取元素上注册的事件用法传入: 目标节点(原生 js 那种格式), 字符串 “events”返回: 一个记录操作名的对象, 操作下是该操作对应的事件详情, 包括方法(handler)$._data(element, "events")//var events = $._data($('#swq')[0], 'events');var events2 = $._data(document, 'events');demo'use strict';function fu

2021-06-28 11:40:59 459

原创 ES6 Proxy

今天无意中接触到 Proxy 对象简单查阅过资料后, 作一下记录按我粗浅的理解, Proxy 是用来监听对象属性值的变化的用法const p = new Proxy(target, handler)target 类似于初始对象handler 里设置 get 和 setdemolet products = new Proxy({ a: 1, b: 2, c: 3}, { get: function (obj, prop) { console.log(obj, prop)

2021-05-07 17:41:46 88

原创 js 类数组转数组

对 js 稍有了解的朋友应该知道, js 里有一种叫做"类数组"的东西如字面意思, 是一些类似数组的数据类型为什么用"一些"呢?因为类数组不是一种数据类型, 是好几种类型的统称, 如:NodeList, Set, Arguments 都是类数组类数组有数组的一部分特性, 而不是全部特性, 如 Set 是没有 length 属性的var set = new Set([1, 2, 3, 4])console.log(set.length) // undefined如果要把类数组当数组用, 那就需

2021-04-22 16:55:53 173 1

原创 css 自定义属性

css 中使用自定义属性必须通过 --x 的格式申明用 var(x) 调用:root{} 下是全局声明块下是局域/* -- 是不能少的 */:root { --swq: red;}h1 { color: var(--swq);}js 中使用css 的自定义属性可以通过 js 的 setProperty 控制要注意自定义属性名仍然要以 “–” 开头// 无效document.documentElement.style.setProperty("defg", "3px"

2021-04-19 16:44:32 247 2

原创 Vue extends 传入构造函数

今天同事问我"官网上说 extends 可以传构造函数, 知不知道怎么写?"查阅了一下官网, 发现对此的介绍仅限于"可以是一个构造函数", 此外并没有案例于是在此写下 demo, 减轻同事摸脑壳的烦恼官网介绍允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)。这主要是为了便于扩展单文件组件。extends 用于扩展组件, 用法与 mixins 相似, 都是在一个组件中传入扩展的内容而 extends 与 mixins 的差别在于extends 只能传入 1 个扩展内容(mi

2021-03-31 14:08:17 394

原创 vue3 迁移 - 公共组件挂载顺序

一般来说, 挂载公共组件要在 Vue 实例挂载到 DOM 元素前完成// vue2Vue.component("c1", c1);Vue.component("c2", c2);Vue.component("c3", c3);// 有 el 自动挂载; 没有则用 vu.$mount() 手动挂载var vu = new Vue({ el: "#"});这一点在 vue3 中并没有改变不过 vue3 的公共组件不再挂载在全局对象 Vue 上而是挂载在 createApp 创建的应用实

2021-03-29 17:37:52 441

原创 antdv Modal(对话框)指定挂载节点 demo

今日需求antdv Modal 挂载到指定位置分析antdv 的 Modal 默认是挂载在 body 上的这就导致组件样式不能作用在 Modal 上, 解决办法就是把 Modal 挂载到组件以内的位置上有问题找文档果然, antdv 早就考虑到这种可能性, 并提供了指定挂载位置的 apigetContainer 指定 Modal 挂载的 HTML 节点奈何文档并没有提供 demo但根据解释的类型和默认值, 可以知道 getContainer 需要传入一个 function, 并 re

2021-03-25 18:07:36 8523

原创 vue3 迁移 - data 选项接收值类型和合并方式

data 组件选项声明不再接收纯 JavaScript object，而需要 function 声明就是 vue2 的 data 可以是 object 或 function, vue3 的 data 只可以是 function// vue2data: { s: 2},// 这种写法作废在 data 改变了的还有 Mixin 行为举例var c1 = { data: function() { return { u: { c1: "c1-1", c2: "c1.

2021-03-24 18:00:11 539

原创 vue3 迁移 - createApp 创建应用实例

迁移到 vue3, 笔者第一个遇到的改变就是 createApp 了// vue2import Vue from "vue"new Vue({})new Vue 的写法已经不再支持, 取而代之的是调用 createApp 创建一个应用实例的方式// vue3import { createApp } from "vue"// 同效果// import Vue from "vue"// const createApp = Vue.createAppvar app = createApp

2021-03-24 17:58:24 4567 4

原创 js function.length 函数的长度

length 属性JavaScript length 属性可设置或返回数组中元素的数目, 就算是新手程序员也知道这事一般只是用于获取数组, 字符串长度"字符串".length["数", "组"].length或清空数组var a = ["数", "组"]a.length = 0a // []此外没什么地方能用到 length 属性function.length作为一个老码农, 我一直是这么认为的可今天发现, length 属性还有一个很少用的功能返回函数的长度什么是"函数的

2021-03-19 18:04:16 2526 5

原创 SVG 的 getTotalLength(), getPointAtLength() 方法简介

getTotalLengthSVG路径对象.getTotalLength()该方法返回用户代理对路径总长度(以用户单位为单位)的计算值var a = SVGPathElement.getTotalLength()getPointAtLengthSVG路径对象.getPointAtLength(len)该方法返回路径上指定距离的点的坐标len0~SVGPathElement.getTotalLength() 的浮点数, 超出范围会换算成最大值或最小值var p = SVGPathElem

2021-03-01 17:42:51 4363

原创变量提升, 函数提升之我见

最近刷面试题, 经常提到变量提升, 所以今天就这个主题整理一下思绪注: 本文所有内容基于"严格模式"(“use strict”)变量提升console.log(a) // undefinedvar a = 1代码上先输出, 后声明, 应该输出 “a is not defined”但实际上输出 a 时, a 没有报 “a is not defined”说明 a 已经被声明, 未被赋值这种声明位置被提升到作用域最高的现象, 就是所谓的变量提升同时还告诉我们一个重要信息声明和赋值

2021-02-05 16:38:33 144 2

原创 js 插入公共 css, 异步加载 css

一般样式代码会在文档开头引入, 随文档加载时同步加载无论用户该次操作是否用得到, 样式代码都会全部加载进来但是想要异步加载 css, 或者插入一段新生成的 css, 也是有办法可以实现的插入公共 css 代码块用 createElement 一个 style 节点用 innerHTML 进需要的css代码用 body.appendChild 插入 head 中即可var new_element = document.createElement("style");new_element.i

2021-02-03 15:32:45 319 1

原创 setTimeout 浏览器进入后台时不被冷却的方法

出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停待用户回到浏览器时, 才会重新激活定时任务说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异在 Chrome 中运行一下代码var t = new Date() * 1function fun1() { var _t = new Date() * 1 console.log(_t - t) t = _t setTimeout(fun

2021-01-19 17:52:25 3937

原创 Vue router 3.x 实现路由规则增删

vue 项目的权限限制功能, 有一种实现方案是这样的进入项目只设置没有权限要求的路由向后台提供当前用户的权限后台根据用户权限, 返回该用户可以用的路由信息将路由信息翻译成 “符合 routes 选项要求的数组”用 router.addRoutes(routes) 方法把 “符合 routes 选项要求的数组” 添加到路由这个方案涉及到两个问题:怎么添加路由规则怎么删除路由规则路由规则首先明确一下什么叫路由规则?下例的 { path: ‘/foo’, component: F

2021-01-15 17:16:37 3502 7

原创 Vue router components 多层命名视图如何操作

独生政策的时候, 只有一个后代, 叫"孩子"肯定没错但开放多胎之后, 就不止一个后代了, 如果对着所有后代喊"孩子", 谁都分不清是谁这个时候就需要给后代命名同理, 在路由中一个视图套一个视图时, 还能相安无事, 因为它们都叫 default但一个视图套多个视图时, 就应该给视图加上 name 属性<router-view></router-view><router-view name="a"></router-view><router-v

2021-01-14 13:41:38 3878

原创 Vue router 重定向 redirect 如何传值

配置 vue_router 时, 很经常就用到重定向(redirect)功能例如:没登录重定向到登录页面(导航卫士拦截也是高效的登录检查方法)index, home, house 重定向到首页等这些不需要传参的情况, 直接设置为目标地址的字符串就可以{ path: "/assets", component: layout, redirect: "/assets/assetsIndex",}如果你遇到的需求需要传值的话, 可以参考下面的方法重定向 redirect 可接受的值字

2021-01-12 18:01:23 14868 2

原创 javascript 中时区知识的整理 UTC GMT

GMT, UTC 是什么?GMT: 格林尼治时间UTC: 协调世界时GMT 与 UTC 不完全相同, 但都是指 0 时区时间, 一般情况可以视作同义作为 javascript 程序, 是不是对 GMT 很眼熟?其实 GMT 就是我们调用 new Date(); 时, 返回的字符串 “Wed Jan 06 2021 17:48:30 GMT+0800 (中国标准时间)” 中的 GMTGMT+0800: 中国是东8区, 所以是格林尼治时间 + 0800 (东正西负; +0800 即是 +08:0

2021-01-07 02:52:28 1462

原创一行代码实现 if 判断, 多结果判断

JavaScript 中判断运算是最常见的运算之一, 最常规的当然就是 if但最常用, 最灵活的却另有其"人"与运算符利用了与运算符的特性, 第一项为 false 时, 不执行后面直接返回第一项结果用法: statement1 && statement2注意: statement1 需要 return 一个布尔值, 否则会认为 undefinedconsole.log(_true && true_fun());// 执行 true_fun()// 返回 tru

2020-12-31 22:21:14 2373 1

原创 css text-stroke 文字描边

text-stroke 不是标准的 css 属性, 所以本篇读者可以视为娱乐text-stroke 是复合属性, 包括 text-stroke-width, text-stroke-color因为不是标准属性, 大多数情况要加上前缀text-stroke-width 指描边的宽度, 该属性的描边风格是居住描边(内边, 外边各占一半), 且只有居中描边一种结合 absolute 定位, 用未描边的内容, 遮盖已描边的内容, 可以实现只描外边的效果demo<!DOCTYPE html>

2020-12-22 16:06:57 3449

原创 css 利用 position + margin 实现固定盒子横向纵向居中

margin:auto; + position: absolute; 上下左右:0一看 demo 就懂的啦<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scal

2020-12-22 10:02:31 769

原创 css 利用 position + transform 实现弹性盒子横向纵向居中

前端常有"横竖居中"的需求, 固定宽高的还好办遇到宽高不确定的情况, 我向大家推荐下面这个方法原理其实就两点position: absolute; 的百分百参照父元素transform: translate(-50%, -50%); 的百分百参照当前元素position 和 transform 合起来的效果就是把父元素和当前元素的中点对齐, 从而达到居中的效果demo<html><head> <meta http-equiv="Content-Type"

2020-12-18 17:18:40 1522 1

原创关于页面获焦的小技巧

document.activeElement返回文档中当前获得焦点的元素, 属性只读与明确的元素比较, 可以知道目标元素是否获焦document.activeElement === document.getElementById("a")没有元素获焦时, 指向 bodyelement.focus()设置目标获焦如进入表单页面后, 主动让第一个 input 获焦document.getElementById("a").focus()利用 input 获焦的特性, 结合 cs

2020-12-18 14:54:59 1252

原创 Vue .sync 修饰符简单实例

vue 中子传父是常有的需求, 一般我们用 $on + $emit 就能实现有时候从子组件传回来的值, 不需要再计算, 只是用来覆盖原值这时候用 $on + $emit 方法, 会占用一个事件名和一个方法名, 属于典型的资源浪费, 也增加了代码量对于传回值只用于覆盖原值的情况, 我们可以用 .sync 修饰符来简化<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text

2020-12-17 15:52:14 1018

原创当 el-upload 遇上 v-for 时应该注意的问题

虽然 element-ui 现在几乎不更新了, 但不能否认它的优秀而今天要讲的就是这个优秀的框架中优秀的组件 el-upload有过 element-ui 使用经验的小伙伴大概都用过它的上传组件(el-upload)单独使用 el-upload 的文档已经很全面, 操作起来也很好用, 没毛病但当 el-upload 遇上 v-for 时, 要面临的问题就多得多了笔者就曾遇到过, 特意写下此文注: 文末附完整 demo有一次, 我遇到了这样的需求:有一个数量可增可减的数组数组每项有上传图

2020-12-15 17:14:37 2813 7

原创利用 JSON.parse, JSON.stringify 深度克隆json 对象

parse()用于从一个字符串中解析出json对象(字符转对象)注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常// 正确用法JSON.parse('{"aa":11}')// 报错JSON.parse('{aa:11}')stringify()用于从一个对象解析出字符串(对象转字符)利用JSON.parse(JSON.stringify()) 可以深度克隆json 对象var dataEdit = JSON.parse(JSON.stringify(data))/

2020-12-15 13:57:15 1841

原创 $.extend 简单实例

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。如果多个对象具有相同的属性，则后者会覆盖前者的属性值。如需要保留原数据,第一个 object 使用空对象 {}语法:$.extend( target [, object1 ] [, objectN ] )$.extend( [deep ],

2020-12-14 17:47:41 1246 1

原创 Vue.set 简单实例

vue 的一大特性就是修改数据后, 系统能自动更新到界面上但这一特性并不是所有情况下都能实现, 就比如在数组中在数组中, 用数组的下标直接修改数组的值, 系统并不会把这次修改更新到界面上[直接修改 arr[0], 界面上不能自动更新]而是把这次修改, 拖延到下一次同组件的界面更新时, 才更新[直接修改 arr[0], 界面上不能自动更新] -> [修改一个无关值 boo]也就是说, 子组件的更新还不足以触发数组的数据更新[直接修改 arr[0], 界面上不能自动更新] -&gt

2020-12-14 11:22:50 1256 1

原创 js oninput 移动端替代 keyup

在移动端, keyup 事件可能失效这时可以用 oninput 事件$('#xxx').bind('input propertychange', function() {})//document.getElementById("swq").addEventListener("input", fn, false)参考资料:总结oninput、onchange与onpropertychange事件的用法和区别//end...

2020-12-14 09:46:57 1485

字体设计与创意

空空如也