- 博客(85)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 git-错误合并或错误删除文件并推送如何回退
备份本地库没提交推送的代码新建分支并推送到备份分支切换到master分支，查询本地库git日志，找到需要回退的目标版本idgit log回退到目标版本git reset --hard c3f54af20d6a472363c94fb14022d9bb713f97be，hard后接目标版本id将回退后的本地库推送到远端git push origin master -f...
2022-05-13 10:49:00
556
1
原创 Vue——组件间数据访问方式与通信方式的一点总结思考
目录常态数据访问方式props适用场景优点缺点Demo$attrs适用场景优点缺点Demoprovide/inject适用场景优缺点$refs适用场景优缺点$parent, $children适用场景优缺点vuex适用场景优缺点事件通信$emit适用场景优缺点$listener适用场景优缺点EventBus适用场景优缺点常态数据访问方式props将数据以变量参数形式传递给子组件中定义的props适用场景父组件将数据向子组件同步优点父组件数据变化会向下传递，子组件中的数据也会跟随变化复杂数据
2022-04-27 12:00:00
362
原创 使用图片做背景并设置充满固定屏幕
需要使用2个css属性，background-size和background-attachment，只需要如下两个设置即可实现：body { background: url(./login_bg.jpg) no-repeat center center; background-size: contain; background-attachment: fixed;}background-size指定背景图像的尺寸可选值width，height：设置固定宽高，只写一个值时，第二个
2022-04-26 12:04:29
324
原创 请求正常执行但是js语法报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)
开发过程中发现前端请求正常执行，接口功能正常且正常返回数据，但是js仍然报语法错误Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)原因：自定义拦截器后导出方法时忘记把promise对象return出去如下：正确处理方式应该将promise对象requestreturn出去，调用方法的位置才会是异步执行，就不会提示语法错误了...
2022-04-24 16:39:42
23572
转载 windows注册表自定义添加右键菜单
以IDEA为例，安装2018后发现并没有把右键打开写入注册表，于是自己打开regedit添加目录选中文件夹的右键菜单添加用IDEA打开第一步——win + R，输入regedit，打开注册表第二步——找到路径`计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\shell`第三步——IDEA下新建项command，修改值为idea64.exe文件路径+%1，如`"D:\Program Files\JetBrains\IntelliJ IDEA 2018.2.
2022-02-10 11:57:42
3169
原创 Vue之依赖注入——provide/inject的使用
常规使用静态数据，非响应式父组件 provide: { name: 'zs', age: 65, gender: '男' }子组件 inject: ['name', 'age', 'gender'], created () { console.log(this.name) // => "zs" }响应式数据数据变化从上往下流动注意：注入数据为对象才能实现，当为Number,String，Boolean等基本类型时变化无法向下流动
2022-01-22 17:35:15
566
原创 Element——tooltip无效和自定义内容
tooltip无效使用中发现，当tooltip内部元素内容为空，导致dom元素的wdth或height为0时，无法捕捉到鼠标悬浮动作，所以会失效使用注意tooltip中需要有html元素如果希望始终有tooltip内容，要给内部html元素设置默认宽高，使其可以被鼠标hover动作捕捉自定义内容使用v-html和函数协作<el-tooltip effect="dark" placement="right"> <div slot="content" v-h
2021-12-14 10:22:04
3868
原创 Element——给el-table表头添加*
文档配置使用<el-table-column :render-header="addRedStar"></el-table-column>addRedStar(h, { column }) { return [ h("span", { style: "color: red" }, "*"), h("span", " " + column.label), ]; },
2021-12-13 17:56:20
975
原创 Vue——插槽语法
报错Unexpected mixed usage of different slot syntaxesv-slot和slot-scope新旧插槽语法混用时出现的错误旧语法声明插槽<slot name="demo" :props="data"></slot>使用插槽<template slot="demo" slot-scope="props"></template>新语法声明插槽同上使用插槽<template v-slot:d
2021-12-13 16:48:46
574
原创 Element——el-table设置单元格间距
场景需要给el-table的单元格设置间距，但是发现gei单元格添加margin无效解决方法使用css中表格专用属性border-collapse和border-spacing这两个属性控制“规定是否合并表格边框”以及“ 规定相邻单元格边框之间的距离”.cell-space /deep/ .el-table .el-table__body-wrapper .el-table__body { border-collapse: separate; border-spacing: 5px;}
2021-12-13 15:28:01
8746
原创 文字居于div底部的方式
CSS中的text-align属性只能控制文字在水平方向的左对齐（left），右对齐（right），居中（center）,控制不了垂直方向的文字位置，对此有以下解决方案在div内部塞占位符标签，把文字挤到下方(不推荐)<div class="div"> <div class="place"></div> 我是祖父: 下面是爸爸</div><style>.div { height: 100px; }.pl
2021-12-13 14:30:39
13796
转载 JS代码优化技巧——持续更新
使前端代码更优雅的优化技巧，持续更新，转载自Hhua.多个条件的判断——数组的include方法//Badif (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') { //code... }//Goodif (['iphoneX', 'iphone11', 'iphone12'].includes(x)) { //code...}简单条件判断——三目运算符(可嵌套)// Badlet test= boolean;
2021-12-13 10:40:13
147
原创 Vue——$attrs和$listeners
$attrsVue2官方文档的解释如下：作用简单来说就是 组件向下传递数据 的，是props通信的补充方案，避免了组件中props过多的窘境。使用祖父组件GrandPa如下：传给Parent组件的数据有name，age， gender<template> <div> 我是祖父: 下面是爸爸 <Parent v-bind="$attrs" :name="'佩奇爸爸'" :age="age" :sex="sex" />
2021-12-10 14:28:32
532
原创 Vue——子组件中引入父组件
场景因为特殊情况，开发中子组件又需要引入父组件，即子组件中再创建一个父组件的Vue实例。比如一个展示组件Rack，内部有一个子组件RackDialog，然后RackDialog里又需要引入Rack组件问题使用常用的组件引入注册方式在RackDialog组件中引入Rackimport Rack from "Rack.vue"export default { components: { Rack }}上面的方式运行时会报错组件未注册解决方案使用异步组件引入方式，即在RackDia
2021-12-07 17:31:14
1438
3
转载 /deep/和 ＞＞＞以及 ::v-deep 三者的区别
>>>深度作用选择器的简写形式只作用于css，不支持css预加载器（less/scss）是/deep/的简写形式,适用于Vue2.x版本，Vue3.x版本使用会报错/deep/Vue2.x的深度作用选择器正式写法仅适用于Vue2.x版本支持css预加载器::v-deepVue3.x的深度作用选择器正式写法...
2021-12-07 17:00:49
1249
原创 分支开发模式Git常用操作
分支开发模式新功能开发/bug修复时从主分支创建新分支，开发完成后合入主分支并删除开发分支可能出现的一些情况码仓新建分支后，本地同步更新分支git fetch将远端仓库所有分支同步到本地远端仓库删除分之后本地仍残留git fetch -p将远端没有，本地记录里有的origin/分支清理掉删除origin/同名的本地分支例如：使用git fetch -p后，vscode的git插件管理中 origin/front-fix-1206分支被删掉了，但是本地编码使用的front-fix-
2021-12-07 16:49:23
103
原创 Element——el-table单元格无法设置外边距，只能通过border-width实现间隔效果
场景开发中有需求使用el-table实现如下展示效果：问题内部使用的el-table实现效果，但是设置单元格自检的灰色间距时发现cell-style中设置margin没有效果解决方案通过设置border-width，加大边框宽度实现间距效果优化使用v-for双循环和div自定义效果是最简单的实现方法，同时样式的把控和事件的处理也比较容易，el-table对数据格式有要求，且事件处理，样式分场景覆写都会有压力，...
2021-12-07 16:38:50
2505
原创 使用ElementUI开发的情况下，多使用Layout布局
行/列<el-row></el-row><el-col></el-col>行属性ex:<el-row :gutter="20" type="flex" justify="center" align="center"></el-row>列属性ex：<el-col :span="24"></el-col>栅格布局<template> <el-container>
2021-12-07 15:49:40
1100
原创 Element——el-table给所有的row和column数据加上索引
问题场景开发中发现el-table在使用cell-style时无法获取row，column的索引信息解决思路在其他可以获取到行列索引的方法中对行列数据添加索引属性解决方法利用el-table的cell-class-name配置，以及数据浅拷贝的特性<el-table :data="tableData" :cell-class-name="tableCellClassName"></el-table>export default { methods: { table
2021-12-06 17:11:57
2755
转载 pull/push时提示The requested URL returned error: 403
问题原因通常是因为账号鉴权不对，即远端仓库所属账号和本地缓存的git账号不一致查看本地管理的git账号并修改win+r 运行cmd，输入以下命令执行rundll32.exe keymgr.dll,KRShowKeyMgr出现windows管理的账户密码界面选中目标网址，点击右侧编辑按钮修改账号密码修改一致后，pull/push即可通过git账号鉴权，使用正常...
2021-11-30 09:51:26
828
转载 git----暂存变更和恢复暂存的变更
git commit提交文件，服务器返回本地文件有修改。1、git stash :暂存本地代码2、git pull origin develop : 获取远程分支代码3、git stash pop:恢复之前暂存的文件git 误删文件和恢复指令1、git fsck --lost -found :查看最近移除的文件.2、git show ‘误删编号’：查看删除文件内容3、git merge ‘误删编号’： 本地合并误删的文件内容...
2021-11-15 18:24:53
1091
原创 Object.assign()方法合并两个js对象
MDN文档对该方法的描述如下即形如Object.assign(obj1, obj2)的语法中，会将obj1和obj2的所有属性合并，并返回新的对象。手写测试<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></te
2021-09-09 15:31:10
643
原创 vscode使用F5启动vue项目调试
完成该配置在启动调试时就无须在终端敲npm命令或者找package.json文件去点击script上的三角按钮了，非常方便在debug项添加launch.json文件选择Node.js环境删除program配置这个是启动项目识别的入口文件，默认把当前聚焦的文件作为入口，项目整体启动调试的话不需要该配置添加运行命令与执行器配置可以通过修改命令配置使F5自动运行其他脚本，如 npm run serve"runtimeArgs": [ "run",
2021-09-08 10:37:14
2176
原创 JS的foreach方法修改值的问题
问题描述最近开发过程中，向数组动态插入内容后vue渲染器报错如下：一般可能认为是v-for的key设置有问题可能重复了，但是检查数据过后发现的问题在于插入后没有对后续的索引值进行更新（不是数组默认索引，而是引用类型内部人工添加的索引字段）解决方法1.把v-for中使用人工添加的索引字段值修改成系统默认的数组索引，可避免潜在的更新错误，但是无法修正数据中人工添加的索引字段重复事实，后续还用仍然可能造成问题2.在插入逻辑后增加手动修改索引字段的逻辑思考使用foreach遍历数组时，修改eleme
2021-09-06 11:58:33
1855
原创 （超简单）使用vuepress搭建自己的博客并部署到github pages上
本地新建博客项目根目录全局安装vuepressnpm install -g vuepress在MyBlogs下初始化项目npm init -y按照如下结构创建目录与文件MyBlogs├─── docs│ ├── README.md│ └── .vuepress│ ├── public│ └── config.js└── package.json配置@/docs/.vuepress/config.js文件module.exports = {
2021-09-06 11:14:53
258
转载 Element——el-input自动聚焦
问题描述开发过程中有如下用户体验优化需求：可编辑文本最开始以文本形式展示点击文本后切换输入控件输入控件显示后自动聚焦，开始输入输入完成，输入控件失去焦点时自动隐藏并切换会文本显示遇到的坑思路就是通过点击事件进行显隐的切换，并是输入框获取焦点。于是有如下代码：<template> <div @dblclick="ondbclick"> <div v-show="!isEdit"></div> <div v-show="isEd
2021-09-03 14:53:24
6311
2
原创 Element——Module parse failed: Unexpected character ‘‘ (1:4)-Element UI安装报错
问题与现象在项目安装element-ui后在main.js引入包并引入样式文件，如下：随后执行npm run dev运行项目时报错，如下：原因该项目为vue组件封装项目，使用了webpack-simple模板，所有有webpack的分包操作，但是webpack的loader配置中并没有可以对woff文件进行分包的加载器，所以有如上报错解决方法在webpack.config.js文件中加入对应的加载器处理配置项即可：结果element-ui的样式正常加载...
2021-09-01 19:52:54
1542
原创 vue组件进行npm打包时生成的目录结构问题
问题开发过程中发现，自己打包出来的组件目录把App.vue，等文件全都打包进去了，如下但是实际使用其实只需要编译生成的dist目录即可，干净清爽的包应该是如下的结构原因在打包时，package.json文件中没有设置files项，默认将整个项目目录作为打包目标了。解决方法如下配置即可，将需要添加打包的目录个文件写入数组，package.json和readme文档是默认加入的。...
2021-09-01 19:01:04
1121
原创 自己封装的vue组件在新项目中使用时无法通过包名引入
问题组件封装上传到npm后，在新项目下载依赖，只能如下使用绝对路径引入使用无法像element-ui一样简单的使用包名引入原因在组件打包的时候webpack配置有问题，没有配置output下的library项。在新项目中使用时必须用该项设置的包名才能便捷引入package.json文件中没有设置main参数，main没有设置的话打包时就没有设置入口的js文件，就无法用包名引入使用结果上面两项设置后，就可以使用包名引入了...
2021-09-01 18:33:54
652
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人