- 博客(57)
- 收藏
- 关注
RSS订阅原创 react 导航菜单选中项高亮 和 刷新保持打开状态栏
getOpenKey 通过传入当前路径索引 和 dom数组 遍历dom数组 存在子路由时 进行判断 数据源 当传入索引等于子路由索引 时 存入此时 打开的索引 openKey。最近在写一个react demo 其中有个场景需求是 实现 导航菜单 路径匹配时选中项高亮 存在 打开子菜单项时 页面刷新 保持打开状态栏。最终返回 openKey 再赋值给 menu的 defaultOpenKeys 属性 保持页面打开时 仍存储打开栏状态。代码实现颇有意思 记录一下。
2024-03-26 10:55:25
415
原创 Uniapp 和Vue3 小程序 获取页面dom 方法
sm]:2306 TypeError: Cannot read property ‘使用ref获取自定义组件实例： 如果你需要获取的是自定义组件的实例，你可以在自定义组件上使用ref属性，然后在父组件的setup函数中通过ref来获取。由于小程序环境的限制，不能直接在setup函数内部使用ref来获取DOM元素，因为小程序的视图层是由小程序框架管理的，而不是浏览器的DOM。恰好有个需求是要 获取小程序页面dom 结构 用常见的vue3获取dom 结构不起效。
2024-03-05 19:45:43
3452
1
原创 ref, toRef, toRefs,defineComponent, computed, unref, reactive, toRaw, watchEffect, onUpdated 前端API总结
是 Vue 3 中用于将一个响应式对象中的所有属性都转换成 ref 对象的 API，它接受一个响应式对象作为参数，返回一个新的对象，新对象的每个属性都是一个 ref 对象。是 Vue 3 中用于获取 ref 对象的值的 API，它可以接受任意类型的参数，如果参数是 ref 对象，则返回其 value 属性的值，否则返回参数本身。是 Vue 3 中用于获取一个响应式对象的原始对象的 API，它接受一个响应式对象作为参数，返回其对应的原始对象 toRaw返回对象的原始值 不做处理。都会执行其中的回调函数。
2024-02-19 17:31:39
1100
原创 记录时间计算bug getDay()的一个坑
getDay() 方法返回的是当前日期是星期几，其中星期日对应的值是 0，星期一是 1，以此类推。因此，使用 getDay() 方法获取到的是星期几的值。对 getDate() 方法和 getDay() 方法的处理进行调整。在修正后的代码中，计算currentDay时 通过 currentDay.value === 0 判断当前是否为星期天，如果是则在计算 startDate 时向后推移两天（从下周的星期一开始），否则向后推移一天。最近在使用时间计算展示当天所在这一周的数据 不免要获取当前时间所在周。
2023-07-30 10:23:02
760
原创 Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图最近沉迷P社的钢4，断断续续几天才做好效果预览echart拿来做这种动态图还是不错的官网百度的echarts仓库地址链接: link.https://gitee.com/lyh1999/first-experience-of-ecarts...
2021-04-09 08:55:16
168
原创 记录Vue v-for渲染两个tr渲染不出来，将之加到tbody上
<tbody id="historical" v-for="hisList in hisList"> <tr class="list-tr"> <td> <span class="career-title">{{hisList.ltrTitle}}</span> .
2021-03-21 10:33:12
1002
原创 vue tag=“li“ 和event原有样式渲染不出来
vue2以前这样写router-link 加上tag标签，router-link就会渲染成原有的li标签<ul> <router-link tag="li" to="/movie"> <i class="iconfont icon-dianying"></i> <p>电影</p> </router-link>
2021-03-07 22:14:54
618
原创 eclipse总是运行上一个程序结果
1勾选project>Build Automatically2格式书写正确public static void main(String[] args){}这里的static，main,String[] args都不能错
2021-03-01 14:23:43
2147
原创 基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-02-27 19:48:44
1054
1
原创 接口分享
随机笑话链接: link.https://autumnfish.cn/api/joke城市天气查询http://wthrcdn.etouch.cn/weather_mini?city=后面+城市名，自由选择
2021-02-27 13:43:02
332
原创 vue+axios天气查询——天知道效果展示及源码分析
使用vue制作城市的天气查询<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-02-27 13:31:03
476
原创 基于Vue的记事本todos效果展示及源码分享
前些天做了个使用vuex制作的记事本todos，这次使用vue做一个todos记事本show code<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
2021-02-26 22:12:23
483
原创 手把手教你制作油管上30万播放的动态登录页面效果
毕设要做个登录页面，想着做个漂亮点的页面，就找到了youtube上的一个，自己敲代码也做出来了，效果展示油管视频地址 https://www.youtube.com/watch?v=ZvU57lTnNgoAnimated Login Form Using HTML & CSS & JQurey可以翻墙的可以看看这个大佬代码主要两部分html,css,一点jquery.算是用比较少的代码量实现一个漂亮的动态登录页面<!DOCTYPE html><html la
2021-02-13 21:02:20
723
1
原创 基于vue和vuex的todos效果展示及源码分享
todos,待做项目经常被以各种方式来实现，js,node,这里分享一个基于vue和vuex的todos主要有三部分代码main.js,index.js,App.vueimport Vue from 'vue'import App from './App.vue'// 1. 导入 ant-design-vue 组件库import Antd from 'ant-design-vue'// 2. 导入组件库的样式表import 'ant-design-vue/dist/antd.css'im
2021-02-12 19:33:06
274
原创 vue新版本和旧版本关闭eslint总结
一般创建vue项目时候，会遇见选择eslint，对于新手来说无疑是个麻烦，一不小心点了是一堆报错。这时候就要关了它。vue旧版本关闭eslint指vue cli3以前版本找到build文件夹—>webpack.base.conf.js—>module—rules网上随便找的图，大致能看清。将这里关于eslint的代码注释掉就可以了vue新版本即vue cli3以后的构建环境时没有build文件夹一种办法重建个vue2的，当然不推荐了第二种建个vue.config.js，放在当
2021-02-11 23:27:53
515
原创 花费一天时间基于Vue创建的epub小说阅读器效果展示及源码分享
明天出个视频演示github源码地址：https://github.com/lyh-create/vue-epub-readergitee源码地址：https://gitee.com/lyh1999/epub-reader感兴趣的不妨下载试试觉得不错的不妨点个star(_)一 前言epub是用于小说，漫画等常见的一种格式，相较于txt格式，增加了插画，链接等，更趋于沉浸式阅读二 实现功能：翻页浏览，字体大小设置， 主题颜色切换，菜单管理跳转三 效果展示先到这了...
2020-12-08 22:37:25
2420
1
原创 css常用样式汇总记录
div盒子样式居中position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
2020-12-05 09:51:56
200
原创 mongoose Warning:Server Discovery and Monitoring engine is deprecated
mongoose 警告服务器发现和引擎已弃用在connect里添加提示 useNewUrlParser: true, useUnifiedTopology: true }const mongoose = require('mongoose')mongoose.connect('mongodb://localhost/blog', { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => { cons
2020-11-21 15:38:33
278
原创 Vue项目报错记录解决Property or method “item“ is not defined on the instance
这里要实现显示一个Tabbar栏的效果，v-for=“item in titles”数据传输过去了，但没有展示，报错信息Property or method “item” is not defined on the instance but referenced during render.原因使用了item项，却没有在data()中定义，这里item和index是遍历titles数组的固有属性，不用在data()里再次定义了解v-for循环数据，当用for来更新已经被渲染的元素时，vue的“就地
2020-11-13 16:15:15
12262
1
原创 Vue组件多次点击报错Avoided redundant navigation to current location: “/profile“.
报错提示profile组件避免了到当前位置的冗余导航。在VueRouter后添加const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}解决报错...
2020-11-04 22:53:44
232
1
原创 奇偶校验 带你看懂之简析校验码
奇偶校验是一种校验代码传输正确性的方法。根据被传输的一组二进制代码的数位中“1”的个数是奇数或偶数来进行校验。采用奇数的称为奇校验，反之，称为偶校验。通常专门设置一个奇偶校验位，用它使这组代码中“1”的个数为奇数或偶数。如求1001101的奇校验码和偶校验码设校验位在后面方法：奇校验，若1的个数为奇数，则校验位为0，若1的个数为偶数，则校验位为1.偶校验，若1的个数为奇数，则校验位为1，若1的个数为偶数，则校验位为0.（ 原理是：当数据被传输过去，通过1的个数来判断数据传输是否出错。
2020-11-04 09:02:10
4181
原创 记录webpack使用问题，使用报错“UnhandledPromiseRejectionWarning，file-loader图片过大，无法加载图片，打包html文件报错TypeError
记录webpack使用报错运行npm run build“UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function”原因是css-loader版本过高，修改package.json中的css-loader版本值修改css-loader版本值为2.0.2运行npm install 重新安装再次运行npm run build成功webpack打包成功不得不吐槽，高版本反而支持不了...
2020-10-21 21:51:40
804
原创 省市区联动三级下拉列表实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框输入文字自动提示</title> <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css"> <style type="text/css">
2020-09-08 10:42:41
322
原创 搜索框内容自动提示bootstrap && ajax
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框输入文字自动提示</title> <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css"> <style type="text/css">
2020-09-08 09:48:05
715
原创 记录前端浏览器常见错误SyntaxErro或GET http://xxx/xxx (Not Found)等
不期望的标识符，一般是代码书写不规范，如缺少逗号，或符号使用错误
2020-09-04 21:28:51
537
原创 记录MongoDB启动报错MongoDB not running on the provided host and port
Error1,未启动MongoDB数据库创立文件夹db，路径为D:\db\MongoDBwin+r打开cmd命令行，cd到D:\Program Files\MongoDB\Server\4.1\binMongoDB安装目录下mongod.exe --dbpath D:\db\MongoDB浏览器输入localhost:27017或127.0.0.1:27017打开页面显示It looks like you are trying to access MongoDB over HTTP on th
2020-08-30 14:45:57
643
原创 记录gulp报错The following tasks did not complete: cssmin或类似任务
原代码gulp.task('cssmin', () => { gulp.src('./src/*.less') .pipe(less()) .pipe(gulp.dest('dest/css')); })修改后的代码//添加一个callback回调函数gulp.task('cssmin', (cb) => { gulp.src('./src/*.less') .pipe(less()) .pipe
2020-08-28 16:41:52
267
原创 记录注册页面实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title> <!-- 初始化css --> <link rel="stylesheet" href="css/base.css"> <!-- register css文件 --> <link r
2020-08-26 10:21:39
408
原创 记录商品查询案例
<div class="search"> 按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro
2020-08-18 20:50:05
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人