Yomuki-CSDN博客

原创又又又是axios封装，顺便复习下ts

useServer处理请求和响应拦截。响应拦截中会处理通用的http错误。响应拦截一旦被拦截就会进入reject状态。

2022-07-28 16:30:19 286 1

原创【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案

我也不知道为什么会不明确.....随手一下，方便下次抄需求：大屏需铺满屏幕，不能出现滚动条，白边，布局错乱等问题。设计稿为1920*1080方案1：利用transform的scale直接缩放。整一个缩放组件<template> <div class="screen-adapter" id="screenAdapter" :style="style"> <slot /> </div></template>&

2022-05-10 14:59:42 371

原创 Pinia笔记

什么是Pinia?vue的状态管理。Pinia特点ts支持轻量级 1kb+ 没有mutations。 actions 支持同步和异步没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；无需手动添加 store，store 一旦创建便会自动添加；引用自新一代状态管理工具，Pinia.js 上手指南 - 掘金开发支持时间旅行追踪actions dev工具支持热模块更新在不重新加载页面的情况下修改存储在开发过程中.

2022-02-09 13:34:32 959

原创【class】接口使用类封装

/* * @Desc: 接口使用类 * @Author: Yomuki * @Date: 2021-08-25 11:14:00 * @LastEditors: 曾茹菁 * @LastEditTime: 2021-08-25 11:43:24 */// 接口类生成对象const apiClassObj = { post: function () {}, get: function () {},};// 用户信息(vuex)const user = {};export .

2021-08-25 11:44:13 287

原创附件列图片获取改为PromiseAll

情况：后端传过来的附件信息与其他表单信息放在了一个对象里。附件信息的值不是图片而是图片id字符串（多个图片会有,分割）我需要做的：提取出所有的代表附件的参数。通过id走图片接口获取到图片地址。图片和前端参数对应。以前采用的是非常简单有效但很慢的循环+await。真的太太太慢了，所以决定改为PromiseAll。建立前端属性名和后端参数名的对应配置对象。export const apiName = { 前端属性名: "后端参数名", backCard: "bank_ca

2021-07-23 11:47:26 103

原创 2021-07-21 replaceAll

2021-07-21 16:08:28 81

原创【兼容性】new Date 出现 Invalid Date

pc端new Date("2020-02-02 10:00:00")正常，移动端出现Invalid Date。翻了下MDN ，发现这句话之前偷懒直接全用了字符串构造。改函数吧QAQ改前：改后：（格式判断暂无，日期写死在前端里了）/** * @description: 时间区域判断 * @param {*} checkArr * @return {*} */export function checkDateTimeBetween(checkAr...

2021-07-15 11:37:20 1098

原创【utils】日期/时间

/** * @description: 获取日期 yy-mm-dd * @param {*} date * @param {*} separate * @return {*} */export function getDateStr(date = new Date(), separate = "-") { if (!(date instanceof Date)) return; let yy = date.getFullYear(); let mm = padStartDay(da.

2021-03-25 09:43:10 138

原创【utils】提取url中的参数/手机号验证/身份证验证/护照验证

/** * @description: 获取url中的参数 * @param {*} * @return {*} */export function getUrlParams(name) { const reg = new RegExp("[?|&]" + name + "=([^&]*)(&|$)", "i"); const res = window.location.href.match(reg); // console.log(res); if (r.

2021-03-25 09:36:34 190

原创【Webpack】webpack配置

step 1 安装依赖webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy less-loader css-loader style-loader postcss-loader.

2021-03-16 22:41:07 110

原创【tailwind】黑暗模式

官方文档 https://tailwindcss.com/docs/dark-mode默认情况下，Tailwind不启用暗模式。启用黑暗模式tailwind.config.js// tailwind.config.jsmodule.exports = { // media 根据系统自动切 class 手动切 darkMode: 'media', // ...}使用黑暗模式自动模式 media 下<div class="bg-white dark:bg

2021-03-01 11:45:45 1149

原创【ERROR】tailwindcss安装踩坑记录

按照官网步骤走下来出现postcss版本过低的问题？PostCSS plugin tailwindcss requires PostCSS 8.解决方法：https://tailwindcss.com/docs/installation#post-css-7-compatibility-buildnpm uninstall tailwindcss postcss autoprefixernpm install -D tailwindcss@npm:@tailwindcss/postcss

2021-02-27 21:25:10 1667

原创【JS】原生实现拖拽上传

源视频：华峰前端工程师<!DOCTYPE html><html lang="en"> <head> <meta cha

2021-02-23 21:59:31 385

原创【utils】防抖和节流

节流function throttle(callback, wait = 300) { let start = 0; return function (e) { let now = Date.now(); if (now - start >= wait) { callback.call(this, e); start = now; } };}防抖function debounce(callback, time = 300)

2021-02-21 16:17:16 245

原创【ERROR】部分引入element-p引发的问题

.libraryName is not a valid Plugin property按照手册配置部分引入时发生的错误。修改如下：外层加个[]module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ "import", { libraryName: "element-plus", customStyleName: (name)

2021-02-19 20:55:53 397

原创【CSS】条纹背景

代码地址横条纹<div class="container tiaowen1"></div>.container { width:100%; height:100vh;}.tiaowen1 { background:linear-gradient(pink 50%,#000 50%); background-size:100% 20%;}竖条纹<div class="container tiaowen2"></div

2021-02-16 11:00:27 244 1

原创【CSS】单元素实现边框内圆角

通过outline,box-shadow实现单元素内圆角。<div class="contaniner"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde placeat, repudiandae dolore amet praesentium, fuga a eos id, provident deleniti minima sequi voluptates rem. Sint, nesci

2021-02-16 10:35:06 154

原创【CSS】多重边框

代码地址box-shadow方案box-shadow支持逗号分隔法，可以创建任意数量的投影。注意点：投影不会影响布局。外投影创造出来的假边框不会响应元素鼠标事件。如果需要响应事件，应转为内投影（inset），同时需要增加额外的内边距来腾出空隙。<div class="container one" onclick="console.log('click')" > box-shadow</div><div class="container two"

2021-02-16 10:25:59 137

原创【CSS】实现毛玻璃的两种方法

伪元素法在需要显示毛玻璃的div后插入伪元素，伪元素采用绝对定位（即div需要relative）,背景图与毛玻璃下的图相同。注意点：为了解决该方法产生的中心模糊边缘清晰的问题，需要将伪元素进行margin负值处理，div需要添加overflow:hidden；<!-- * @Desc: * @Author: Yomuki * @Date: 2021-02-14 22:18:10 * @LastEditors: Yomuki * @LastEditTime: 2021-02

2021-02-14 22:47:28 1048

原创【utils】Proxy应用：通过obj.attr直接获取深层属性值

/** * @description: 获取对象属性值（同名取第一个的值） * @param {*} obj * @param {string} attrName * @return {*} any */export function getObjectAttrValue(obj, attrName: string | number | symbol): any { if (!(typeof obj === 'object')) return undefined if (obj.

2021-02-13 10:11:26 273

原创【Fetch】笔记

更加简单的数据获取方式，功能更强大，灵活，xhr的升级版基于Promise实现文档请求参数常用配置选项method(string) HTTP请求方法，默认GET(GET,POST,PTU,DELETE) body(string) HTTP请求参数 headers(obj) HTTP请求头，默认{}...

2021-02-13 09:59:52 105

原创【VUE3】refs笔记

refref （文档）对我们的值创建了一个响应式引用。接受一个内部值并返回一个响应式且可变的 ref 对象。常用于定义基本类型的响应式数据import { ref } from 'vue'const myName = ref<string>('yomuki')console.log(myName)操作数据的值使用 RefImpl.value<template> <h1>Ref</h1> <h2>{{ my

2021-01-13 15:48:22 1940

原创【ES6】spread运算符

MDN语法函数调用 fn(...iterableObj) const arrNumber = [3,2,4] function getSum(a,b,c,y){ console.log(a+b+c+y) return a+b+c+y } getSum(...arrNumber,4)字面量数组构造或字符串 // 字面量数组构造或字符串 const arr2

2021-01-12 14:10:36 128

原创【ERROE记录】Router Maximum call stack size exceeded vuerouter

Router Maximum call stack size exceeded vuerouter源代码router.beforeEach((to, from, next) => { if (!window.sessionStorage.getItem('token')) { next('/login') } else { next() } })访问路径xxx.com/login后出现错误提示Maximum call

2020-12-31 16:55:07 100

原创【ES6】generator 笔记

ruanyifengMDN看上去像一个函数，但可以返回多次。 Generator 函数会返回一个遍历器对象。 function* gen() { yield 'Hello'; yield 'Hi'; return 'return'; } console.log(gen())Generator.prototype.next() function* ge

2020-12-27 14:15:22 48

原创 ES6——Promise笔记

可以避免多层异步调用嵌套问题 Promise 对象提供了简介的API , 值得控制异步操作更容易

2020-12-26 16:44:45 126

原创 ES6笔记 —— let / 块级作用域 /const

letlet 在块级作用域有效 { var a = '123'; let b = '456'; } console.log(a); // 123 console.log(b); // Uncaught ReferenceError: b is not defined var a = []; for (var i = 0; i < 10; i++) {

2020-12-21 14:17:12 210

原创【utils】数组扁平化

数组扁平化就是把多维数组转化成一维数组。1、flatarr.flat([depth]) 创建一个新的阵列的所有子阵元件连接到它递归到指定的深度。不改变原数组。【ES6】在浏览器支持的情况下最好用这个。 //var newArray = arr.flat([depth]); //depth : 深入水平 var arr_ = ['a',['a','b',['c','d',['1','3']],'e'],'f',['g',['h']]];

2020-12-19 22:46:05 77

原创 JQ记录 —— currentTarget / delegateTarget / this

$("#parent").on('click',{foo: "bar"},fn); function fn (e) { console.log(e.currentTarget) // parent console.log(this) // parent console.log(e.delegateTarget) // parent } $("#parent").on(...

2020-12-17 16:16:30 133

原创 JS应用 —— 鼠标点击后跟随移动

功能鼠标点击后，box跟随鼠标移动，再次点击后，停止跟随并停留在当前位置。实现点击后添加mousemove监听和移动样式。再次点击后移除mousemove监听和移动样式。相关属性和方法element.classList 获取class列, add添加, remove移除 element.addEventListener() 添加监听当回调函数为匿名函数时无法被移除 element.removeEventListener() 移除监听 element.getAttribute()

2020-12-14 13:07:11 1422

原创 DOM笔记——元素内容插入/获取合集

方法 or 属性是否覆盖原居民获取的内容浏览器 element.insertAdjacentElement(position, element) 方法不覆盖 / 单次 x element.insertAdjacentHTML(position, text) 方法不覆盖 x element.insertAdjacentText(position, element) 方法不覆盖 x ...

2020-12-12 17:01:39 324 1

原创 DOM事件笔记——焦点 blur / focus / focusout / focusin

目标对象事件是否支持冒泡是否可取消默认行为支持注册方式 blur element 失去焦点否否 on / 监听 focus element 获得焦点否否 on / 监听 focusout element 失去焦点是否 IE9+ 监听 focusin element 获得焦点是否 IE9+ 监听四者...

2020-12-12 15:30:56 565

原创 DOM基础笔记——事件流

事件流指的是页面中接收事件的顺序。事件发生时，会在元素节点间按照规定顺序传播。事件流分为三阶段：捕获阶段从document -> html -> body -> 父元素 -> 子元素，由外向内传播。当前目标阶段冒泡阶段从当前目标由内向外传播。 <style> .father { overflow: hidden; width: 300px; h...

2020-12-12 14:52:09 69

原创 DOM基础笔记——element 插入元素方法

element.insertAdjacentElement(position, element)将元素移动到指定元素的指定位置上。positionbeforebegin 指定元素之前 afterend 指定元素之后 afterbegin 指定元素的第一个子元素之前 beforeend 指定元素的最后一个子元素之后element要移动的元素返回值插入成功，返回插入的元素插入失败，返回nulelement.insertAdjacentHTML(position...

2020-12-12 14:24:45 1308

原创 DOM基础笔记——Element(属性)

element.clientWidth / clientHeight只读元素的内部宽度/高度。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。element.clientTop / clientLeft只读top : 元素顶部边框的宽度。left : 元素左边边框的宽度。如果元素的文本方向是从右向左（RTL, right-to-left），并

2020-12-12 13:30:32 240

原创 DOM基础笔记——getBoundingClientRect() / getClientRects()

getBoundingClientRect()返回元素的大小及其相对于视口的位置。返回的是DOMRect对象.width / height content-box : width + padding + border border-box : width IE9+ x 左边到视口的距离 IE不支持 y 上边到视口的距离 IE不支持 top 上边到视口的距离 bottom 下边到视口的距离 ri...

2020-12-12 13:26:35 354

原创 DOM基础笔记——DOMTokenList

目录1、什么是DOMTokenList？2、属性3、方法1、什么是DOMTokenList？表示一组空格分隔的标记（tokens）由 Element.classList 等返回的一组值。2、属性DOMTokenList.length 值的个数 DOMTokenList.value 以DOMString 的形式返回 DOMTokenList列表的值。（DOMString映射String）3、方法DOMTokenList.item(index) 根据传入的...

2020-12-11 14:36:13 2810

原创 DOM基础笔记——元素大小和偏移

1、.offsetParent只读属性，返回一个指向最近的带有定位或者为（table,td,th,body）的父元素。它返回的是一个元素对象。parentObj = element.offsetParent;2、.offsetLeft是一个只读属性，返回当前元素左上角相对于.offsetParent节点的左边界偏移的像素值。即元素左边距离.offsetParent元素左边的距离。父绝子相，子left-20px效果：5、.offsetTop返回当前元素相对于其.offse

2020-12-11 13:53:17 218

原创 JS基础笔记——事件对象(属性/方法)

目录属性e.targete.currentTargete.type方法e.preventDefault()e.stopPropagation()属性e.target返回触发事件的对象e.currentTarget返回事件绑定的对象 ie678不支持，开发用this <ul> <li>abc</li> <li>abc</li> &lt.

2020-12-10 14:26:57 99

空空如也

空空如也