- 博客(49)
- 收藏
- 关注
RSS订阅原创 微信小程序模拟ppt效果的公司介绍分步骤流程(主要使用Animation)。使用时间轴介绍以及swiper
微信小程序动画，微信小程序时间轴，微信小程序上下滑动，微信小程序swiper中间放大
2022-08-12 13:54:45
1358
原创 vue3+vite+pinia+element-plus+vi18n生成框架记录。
基础语法import {useRouter,useRoute,} from"vue-router";const router = useRouter();const route = useRoute();//计算属性使用。const keepAliveList = computed<[]>(() => { return tabsStore.keepAliveList;});// 数组重置allMenus.length = 0;allMenus.push(...[...
2022-05-24 16:42:49
9176
4
原创 Vue3升级Vuex，使用Pinia鉴权
Pinia.js是新一代的状态管理器，即Vux5.x特点：1.完整的ts支持。2.轻量，压缩后只有1.6kb。3.去除mutations，只有state，getters，actions4.actions支持同步和异步。5.没有模块嵌套，只有store的概念，store之间可以自由使用。6.无需手动添加store，store一旦常见便会自动添加。安装yarn add pinia -Syarn add pinia-plugin-persist -S 数据持久化工具。由于理念为更好的支.
2022-05-16 16:57:59
756
原创 Vue3+Vite+TypeScript打包时报类型错误，dev启动不报错
yarn dev——项目正常运行yarn build ——抛出error原因：vue-tsc的问题，把对应的命令给删掉：vue-tsc:非必要的依赖，主要是用来约束<script setup lang="ts">这种写法，并且应用在vscode-Volar的插件中使用.{ "scripts": { "dev": "vite", "build": "vite build", // 剔除了 vue-tsc --noEmit &&
2022-05-12 16:18:27
2881
原创 vue2/vue3自定义指令——鉴权
vue2:src/directives/index.tsimport Vue from 'vue';import store from '@/store';export default function directive() { Vue.directive('auth', { inserted: (el, binding) => { if (!store.state.buttons.has(binding.value)) {
2022-05-09 17:34:33
984
1
原创 vue3使用keep-alive缓存已打开过的菜单，使用el-tabs展示面包屑路由。
vuex参考vue2版本。点击查看vuexcomponent/CommonTab.vue<template> <div class="tabs"> <el-tabs v-model="currentName" type="card" editable @tab-remove="handleTabsEdit" @tab-click="handleTabClick" > <
2022-05-09 17:29:17
1369
原创 vue2使用keep-alive缓存已打开过的菜单，使用el-tabs展示面包屑路由。
需求：点击左侧菜单栏，面包屑实时更新，如果所点击菜单在面包屑中存在，需要缓存，不存在重新加载，面包屑tab切换需要缓存，关闭one-tab更新tabslist。keepalive只支持二级路由，多级路由需要扁平化处理。使用vuex，vue-class-component类组件封装，自行转换。面包屑tabs组件components/CommonTab.vue<template> <div class="tabs" ref="tags"> <
2022-05-09 17:22:37
1664
原创 Webpack打包报错RangeError: Maximum call stack size exceeded
报错信息： RangeError: Maximum call stack size exceeded - Array.join - loader.js:228 Function.Module._findPath internal/modules/cjs/loader.js:228:56 - loader.js:591 Function.Module._resolveFilename internal/modules/cjs/loader.js:591:25 - lo
2022-05-09 16:53:25
1977
原创 页面从输入URL到渲染都发生了什么
DNS解析TCP连接发送HTTP请求服务器处理请求并返回结果浏览器解析并渲染页面DNS解析全称 Domain Name System 域名系统
2022-04-07 15:43:23
207
原创 js深入之从原型到原型链，prototype，_proto_，constructor
先使用构造函数创建一个对象：function Person(){ }var person = new Person();person.name = 'Kevin';console.log(person.name)//Kevin在这个例子中，Person就是一个构造函数，我们使用new创建了一个实例对象personprototype每个函数都有一个prototype属性，比如function Person(){}//prototype是函数才会有的属性Person.prototyp
2022-04-06 15:22:58
739
1
原创 git对commit的一些指令操作。
将不该提交的内容commit了，想改回只能再commit一遍，多了一条黑历史git reset --soft HEAD^已经push的commt，也可以使用该命令，不过再次push的时候，由于远程分支和本地分支有区别，需要强制推送git push -f 来覆盖reset的commit在reset --soft 指定commit 号，会将该commit 到最近一次commit的所有修改内容全部恢复，而不是只针对该commit...
2022-03-14 16:57:09
680
原创 git切换分支时的工作目录缓存
在feature分支开发时，需要切到master上改bug，因为当前有文件更改，需要提交commit保持工作区干净才能切分支。命令使用git stash这个命令是代码被存起来了，当修复完master的问题，切回到featrue分支，想恢复代码只需要git stash apply相关命令保存当前未commit的命令git stash保存当前未commit的代码并添加备注git stash save "备注的内容"列出stash的所有记录git stash list 删除s.
2022-03-14 11:03:58
601
原创 Promise.all和Promise.race
一、Promise.all的使用Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。let p1 = new Promise((resolve,reject)=>{ resolve('成功')})let p2 = new Promise((resolve,reject)=>{ resolve('success')})let p3
2022-03-10 15:29:15
153
原创 cookie、localstorage、sessionstorage、session
localStorage和sessionStorage共同点：1.存储大小为5M左右2.都有同源策略限制3.仅在客户端中保存，不参与和服务器的通信。不同点：1.生命周期localstorage:永久性的，除非用户人为删除否则会一直存在。sessionstorage:与存储数据的脚本所在的标签页的有效期是相同的。一旦窗口或者标签页被关闭，那么所有通过session storage存储的数据也会被删除。2.作用域-谁拥有数据的访问权localstorage：在同一个浏览器中，同源文档之间共
2022-03-10 11:53:09
349
原创 XSS和CSRF
XSSXSS：跨站脚本（Cross-site scripting）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。他允许恶意用户将代码注入到网页中，其他用户在观看网页时就会受到影响，这类攻击通常包含了HTML以及用户端脚本语言。XSS攻击的类型：1.反射型（非持久型）反射型XSS把用户输入的数据反射给浏览器，这种攻击的方式需要攻击者诱骗用户点击一个恶意链接或者提交一个表单，或者进入一个恶意网站时，将恶意脚本注入攻击者的网站，当用户点击恶意链接时，页面跳转到攻击者预先准备的页面，会发现在攻击者的
2022-03-07 16:18:49
311
原创 this指向详解
this是js语言的一个关键字，是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用函数的不同使用场合，this有不同的值，总的来说，this就是函数运行时所在的环境对象。call,apply作用之一就是用来修改函数中的this指向为第一个参数的，第一个参数是undefined或null，非严格模式下，是指向window。严格模式下，就是指向第一个参数。Function.prototype.call()call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数.
2022-03-07 14:45:49
64
原创 vue路由携带参数刷新页面，参数数据消失问题（query，params）
1.刷新页面后丢失携带参数，但是参数在url中不显示this.$router.push({ name:'page', params:{ param1:this.param1 }})接收参数时用this.$route.params.param12.刷新页面后保留参数，但是参数在url中显示//但是，携带参数时用query，跳转后，url上会拼接参数，刷新页面后参数不会丢失，依然是那个带参数的urlthis.$router.push({ name: "page1", query
2022-02-09 17:06:03
3733
原创 vue+element路由标签使用tag动态显示隐藏以及跳转实现(使用vuex)
效果图：点击tab可以跳转到导航对应页面。代码：<store>state:{ currentMenu:null, menu:[], tabsList:[ { path:'/', name:'首页', icon:'home' } ]},mutations:{//选择标签 selectMenu(state,val){ if(val.path === '/'){ this.currentMenu = null; } else { s
2022-01-27 17:00:18
2350
原创 vue+elementui的输入框表单验证动态样式-含引入fontawesome图标字体
效果：<el-form class="editForm-class" size="mini" :mo
2022-01-12 16:50:50
584
原创 vue+elementui的表单验证-手动调用触发验证
因为后端字段类型设置要求，搜索输入框只能输入正整数，不然调用接口会报错，输入框手动删除内容会重新触发表单验证方法，但是如果@clear事件不会再触发一次新的表单校验，在事件中触发。触发整个表单的校验：this.$refs.queryForm.validate();触发对表单部分字段的校验：this.$refs.queryForm.validateField('propname');<el-input clearable @clear="handleClear('queryForm','pr.
2022-01-12 16:36:04
7641
原创 vue调用GoogleMap绘制车辆行驶路线以及坐标点标记
配置1.使用google map api v3版本，v3取消了marker的label方法，所以要自己定义叠加层来使用带文字标签的标注，但是自定义非常繁琐，故引用现成的markerwidthlabel.js即可实现对标注添加label。
2021-12-31 15:01:24
1777
2
原创 google map api v3使用的markerwithlabel.js代码
/** * @name MarkerWithLabel for V3 * @version 1.1.10 [April 8, 2014] * @author Gary Little (inspired by code from Marc Ridey of Google). * @copyright Copyright 2012 Gary Little [gary at luxcentral.com] * @fileoverview MarkerWithLabel extends the Googl
2021-12-09 10:35:04
217
原创 vue使用moment.js中文格式化
在引入页面引入：import moment from 'moment';import 'moment/locale/zh-cn';使用：this.baseTime = moment().format('L') + ' ' + moment().format('dddd') + ' ' + moment().format('LTS');效果：
2021-12-08 16:28:43
1009
原创 git修改分支命名
本地分支重新命名（没有推送到远程git branch -m oldName newName远程分支重命名1.重命名远程分支对应的本地分支git branch -m oldName newName2.删除远程分支git push --delete origin oldName3.上传新命名的本地分支git push origin newName4.把修改后的本地分支与运程分支关联git branch --set-upstream-to origin/newName...
2021-11-02 09:11:04
207
原创 常用的git指令汇总
分支操作显示所有本地分支：git branch显示所有远程分支：git branch -r显示所有本地分支和远程分支：git branch -a新建一个分支：git branch branchName新建一个分支，同时切换到这个新的分支上：git checkout -b develop切换到指定的分支上 $git checkout develop切换到上一个分支 $git checkout -合并指定分支到当前分支上 $git merge develop删除分支 $ git branch
2021-10-28 15:08:41
68
原创 解析package.json文件
通常情况下，我们的项目会依赖一个或者多个外部的依赖包，根据依赖包的不同用途，可以将他们配置在下面的五个属性下：dependencies、devDependencies、peerDependencies、bundledDependencies、optionalDependencies。1.dependenciesdependencies字段中声明的是项目的生产环境中所必须的依赖包。当使用 npm 或 yarn 安装npm包时，该npm包会被自动插入到此配置项中：当在安装依赖时使用–save参数，.
2021-10-27 16:31:48
299
原创 ES6的解构赋值
管理平台的修改功能常用。例如接口返回const obj = { a:1,b:2,c:3 }需要给页面内绑定的form表单赋值一般写法： form.a = obj.a form.b = obj.b form.c = obj.cES6解构：form = {...obj}单赋值：const {a,b,c} = obj;想创建的变量名和对象的属性名不一致，可以这么写：const {a:a1} = obj;a1 === obj.aES6的解构赋值虽然好用。但是要注意解构的对象不
2021-10-26 10:56:12
119
原创 谷歌浏览器chrome中input输入框删除记住密码的默认样式
浏览器有时候会自动帮助我们记住账号密码，然后记住之后，input就被动的添加了一个颜色。（什么颜色不固定，我的是蓝色）利用box-shadow为input添加内阴影input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important;}input:-webkit-autofill { transition: background-color 5000s ease-in-out 0
2021-10-18 16:46:02
1007
原创 nodejs提取文件中特定内容
const path = require('path');const fs = require('fs');var iconv = require('iconv-lite');// node执行路径const dirPath = process.cwd();// 判断是文件夹还是文件const fileRead = filedir => { return new Promise((resolve, reject) => { fs.stat(filedir, functi
2021-10-15 10:44:38
1211
1
原创 ES8语法：Object.values() Object.entries()——对象的key和value转化
Object.values()Object.values()是一个与Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。假设我们要遍历如下对象obj的所有值：const obj = {a: 1, b: 2, c: 3};不使用Object.values() :ES7const vals=Object.keys(obj).map(key=>obj[key]);console.log(vals);//[1, 2, 3]使用Object.valu
2021-10-15 10:28:54
752
原创 webpack打包使用修改环境变量方法打包不同文件
通过环境变量传参，在不修改任务代码的情况下执行不同的逻辑。（打包命令也只需要yarn build）只需要一个.env文件//默认一个环境变量VUE_APP_SITE = one在终端执行修改环境变量命令export VUE_APP_SITE = two在main.js中根据不同的环境变量做出相应配置Vue.config.productionTip = false;if (process.env.VUE_APP_SITE === 'one') { console.log('生产环
2021-09-24 14:16:55
1504
原创 vue的i18n语言包简易提取方法
语言包在vue文件使用方法：t(key: string): string { return Utils.i18nt('user', key); }所以在dom中 是t(‘user’),js中this.t(‘user’)system % grep -r "this.t(" ./ > t.txt在sytem文件夹中读取所有的子文件含有this.t(的行，写在t.txt中...
2021-09-24 11:05:14
965
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人