自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(95)
  • 收藏
  • 关注

原创 css focus-within

css focus-within 用法

2022-12-06 14:49:34 22

原创 css 元素 垂直居中方法

css 垂直居中方法

2022-11-02 15:22:30 8

原创 vue 异步加载 main.js 入口方法

vue 异步加载 main.js

2022-10-29 11:50:31 14

原创 html js做的进度条

html5的进度条

2022-09-22 16:29:48 53

原创 vue触发模拟点击效果功能

vue模拟点击功能

2022-09-08 11:09:29 1015

原创 css table-layout用法

css table-layout 使用方法

2022-08-31 16:12:39 51

原创 vue 关于 element ui confirm返回 Promise true false 异步处理

vue element ui confirm Promise boolean 处理

2022-08-31 10:38:11 326

原创 vue 项目 html2canvas,JSZip,FileSaver 下载图片

vue项目截图下载功能

2022-08-26 09:44:58 37

原创 vscode vue 项目部分高级语法用不了类似at

处理高级vscode js语法

2022-08-06 09:48:34 105

原创 vue/vite项目 打包后本地快速启动

vite/vue 打包后本地启动项目快速方法

2022-08-05 11:32:33 330

原创 ts/js 函数传参带函数写法

处理函数的函数回调传参

2022-08-03 17:14:15 405

原创 vue/html input 读取 json数据

使用input读取文件流拿到json数据转JavaScript对象

2022-08-02 10:28:28 229

原创 git 忽略文件不提交方法 .gitignore

git项目忽略文件方法

2022-07-26 10:10:38 104

原创 js 数组移动位置算法

js移动数组位置算法

2022-07-04 16:50:00 1011

原创 vuex typescript + vuex-module-decorators 面向对象写法

vuex+typescript+vuex-module-decorators 处理面向对象配置

2022-06-15 16:08:42 111 1

原创 react 别名路径@使用方法

react 别名路径@使用方法

2022-06-15 10:38:49 530

原创 cavans制作水印 html

使用cavans制作水印图

2022-06-09 10:42:20 78

原创 复制对象相同属性的方法

处理复制相同属性对象

2022-06-02 15:49:01 157

原创 css 扩大点击范围或者hover范围

.dom { position: relative; } .dom ::after { content: ''; position: absolute; top: -6rpx; right: -30rpx; bottom: -6rpx; left: -20rpx; }

2022-05-20 15:33:43 429

原创 es6 Array.at(index) 方法

Array.at()返回数组对应的索引对象const list = ['apple','boy','cat']const apple = list.at(0) // appleconst boy = list.at(1) // boyconst cat = list.at(2) // cat// 也可以使用负数表示倒数第几个const apple = list.at(-1) // appleconst boy = list.at(-2) // boyconst cat = list.at(

2022-05-07 15:48:28 251

原创 node其他版本下载

官方镜像地址

2022-05-05 10:06:45 603

原创 vue简化事件处理 委托事件

委托事件简单来说就是用父类元素进行绑定事件处理,通过将参赛绑定到子属性上进行事件交互先看看原始方法<template> <div> <ul > <li v-for="item in list" :key="item.value" @click="handleClick(item)"> </li> </ul> </div></template><s

2022-04-27 17:04:59 465

原创 获取浏览器信息版本设备数据

代码直接上navigator.userAgent

2022-04-27 16:50:17 91

原创 获取浏览器信息版本设备数据

代码直接上navigator.userAgent

2022-04-27 15:11:14 104

原创 css position: sticky 使用方法

效果图代码<section> <h2>I am sticky</h2> <p>Blood, Sweat And Tears Winston Churchill May 13, 1940 On Friday evening last I received from His Majesty the mission to form a new administration. It was the evident will of Parl

2022-04-21 09:42:25 436

原创 html css满屏滚动效果 scroll-snap-type

效果图代码<div class="parent"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div></div><style> body { margin: 0; padding: 0; }.parent { width: 100vw;

2022-04-20 16:25:39 416

原创 nginx代理多前端个项目 关于root使用方法

1.root 设置端口号8090假如我们现在要代理2个项目1.第一个开头是要·localhost:8090/abc 开头项目2.第二个开头是要 localhost:8090/efg 开头项目第一个项目nginx配置 location /abc { root E:/web/project/dist; index index.html; try_files $uri $uri/ /index.ht

2022-04-16 14:31:25 3102

原创 过渡动画css3 效果+实现思路 -3

效果图项目demo链接实习思路<button onclick="start()">again</button><p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p><style> body { display: flex; flex-direction: column; height: 1

2022-03-29 16:44:13 263

原创 element ui 组件阻止冒泡行为

代码<el-table @row-click="handleRowClick"> <el-table-column align="center" label="数量" > <template slot-scope="scope"> <div @click.stop> <el-input-number v-model="scope.row.

2022-03-28 14:08:59 1585 1

原创 element ui vue 上传附件 封装

这里详细说一下el-upload属性name 主要用来保存文件字段,我下面的字段name = filedata 用来传其他参数 下面我用定义 paramsFileauto-upload 自动上传,意思是选择完文件就自动帮你提交,我这边选择false自定义提交方法(this.$refs.upload as ElUpload).submit();详情参数官网查看<template> <el-dialog class="m-inspection-report-uplo

2022-03-25 08:41:43 408

原创 js 数组元素交换位置

方法1const array = [ { name: 'james', number: 1, }, { name: 'json', number: 2, }, { name: 'kobe', number: 3, },];function changeIndex(array: Array<any>, index1: number, index2: number) { [array[index1], array[i

2022-02-28 15:09:22 3760

原创 Promise手写 使用class方法

原来使用Promise用法不再多说,只是展示比较跟我下面写的使用方法var p = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve(4) }, 0)})p.then((res)=>{ //4 res console.log(res, 'res')})手写Promise创建一个class 对象 新增构建函数class MyPromise { resol

2022-02-24 09:48:58 475

原创 过渡动画css3 效果+实现思路 -2

效果图项目demo链接实习思路<div> <div class="demo"></div> <div class="btn" onclick="reload()">again</div></div><style> @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); body { dis

2022-02-21 15:41:30 89

原创 过渡动画css3 效果+实现思路

效果图项目demo链接思路实现/** 这里是用scss 写的 *//** 这里让主模块高度拉满,模块占垂直水平居中 */body { display: flex; height: 100vh; justify-content: center; align-items: center; background: #222;}.loading {/** 颜色变量的 */ $colors: #7ef9ff, #89cff0, #4682b4, #0f52ba, #000

2022-02-11 16:30:53 146

原创 nodejs package.json 的版本号 ^ 和 ~

package.json "devDependencies": { "babel-loader": "~8.1.0", "concurrently": "^5.2.0", "eslint": "7.5.0", }可以看到依赖包对应的版本号"eslint": "7.5.0" 这里就是下载 7.5.0 版本"concurrently": "^5.2.0" 这里就会下载 5.x.x最新版本,简单来说会下载 5开头最新版本,假如有个6.x.x版本出现,不会更新到6.x.x.

2022-02-11 11:36:12 554

原创 js数组 foreach 源码解析

const list = ['a', 'b', 'c', 'd'];// 注意不能使用 => (fn) {...} 写法,因为this会找不到对象的Array.prototype.newForEach = function (fn: (item: any, index: number) => void) { console.log(this); // 这里的this会指向 list - ['a', 'b', 'c', 'd'] const len = this.length; f

2022-01-20 16:15:37 1130

原创 css3 last-child 和 last-of-type 区别

看看官网是不是有点蒙蔽?,下面简单说明一下last-of-type// 指的是 父元素的最后一个元素.test .test:last-of-type{background:#ff0000;}因为 下面的 第三元素不是父元素的最后一个,所以不会变颜色因为最后一个元素是.test所以就选中如果最后一个元素不是跟.test 类同一个元素也可以选中,比如我这里是p元素是.test 类,最后一个元素是span 也可以选中,这个是跟last-child最大的区别假如父类有2种元素,一种

2022-01-19 10:09:12 393

原创 vue封装回到顶部组件

<!-- * @Description: 滑动到顶部 * @Date: 2022-01-12 13:56:33 * @LastEditTime: 2022-01-12 16:10:12--><template> <div class="m-scroll-top module"> <transition name="fade"> <div class="m__container" :style="style" @click

2022-01-12 16:12:13 194

原创 vue项目 接口代理处理 简单易懂

vue.config.jsmodule.exports = { devServer: { '/abc': { target: 'http://192.168.166.27:8025/', // 测试环境 changeOrigin: true }, }}假如有接口调用的时候写的url是:aixos.get('/abc/api/save')实际调用地址是 http://192.168.166.27:8025/abc/api/savepat

2022-01-12 10:53:11 495

原创 vite 路径别名 @ 配置

vite.config.ts官方配置详情resolve.alias 配置const path = require('path');import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], resolve: { // 配置路径别名

2022-01-03 15:09:36 9293 3

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除