- 博客(53)
- 收藏
- 关注
RSS订阅原创 videojs实现监控摄像头界面及数量切换，及遇到的问题
遇到的问题：1.页面跳转进来有时候不会自动播放2.在切换数量的时候有的设备头不会显示解决方案：定位到的问题是在页面没有手动刷新时，dom用过的id再次使用的时候就不能正长播放，目前的解决方案是每次生成dom的时候取当前的时间戳作为dom的ID，这样无论是第一次进入页面还是切换数量的时候都可以保证ID是最新的也是唯一的需求：需实现显示摄像头数量切换代码： <div class="main-mid"> <div class="hand">
2022-04-27 10:47:42
1150
原创 vite+vue3 icon图标组件批量封装
之前写过一个element-plus icon组件的批量注册（element-plus/icons 批量注册，菜单路由icon图标设置_失岸的博客-CSDN博客_element菜单图标），但项目中往往还需要一些其他的图标，该方法可以在引入svg文件时通过传入icon名字即可直接渲染1.新建icon文件夹2.新建一个SvgIcon.vue 和一个js文件index.vue<template> <svg :class="svgClass" ...
2022-04-19 09:46:09
2015
原创 vue3多语言配置，文件批量处理
1.安装yarn add vue-i18n@next2.src新建文件夹en/router/home.jsen/common.jslang/index.js// 批量引入英文const modulesFilesEn = import.meta.globEager('./en/**/*.js')const modulesEn = {}for (const path in modulesFilesEn) { const moduleName = path.r
2022-04-14 16:52:53
1459
原创 vue3打包部署nginx刷新404，nginx.conf文件配置
1.找到nginx,conf文件，编辑2.添加配置server { listen 2000; server_name localhost; index index.html; root ../../wwwroot/www.vite-vue3-temptale.com; // 项目目录 location / { try_files $uri $uri/ /index.html; }}...
2022-04-13 17:10:58
4041
原创 vite-vue3-template，一套极简vue3项目模板
主要功能：1.layout布局2.router，vuex，axios，封装3.element-ui plus 部分组件二次封装其他功能不定时更新...线上地址：Vite AppGitHub：https://github.com/jimoruyan/vite-vue3-templategitee:windmoon/vite-vue3-temptale...
2021-12-22 16:31:08
6913
1
原创 vue3+element-ui--plus，table组件二次封装
vue3+element-ui--plus，table组件二次封装单选，全选，操作列，翻页
2021-12-20 10:53:20
1222
2
原创 element-plus/icons 批量注册，菜单路由icon图标设置
之前使用class的方式设置菜单图标，element plus 后面替换svg icon后不支持font icon，文档没有批量引入的方法，只能用一个引入一个，下面一次将所有的icon引入，批量注册后可直接在页面的任何地方使用。
2021-11-19 16:52:16
1738
原创 数字改变滑动动画，element table数据更新动画
数字在更新时，有一个向上滑动的动画 使用vue watch监听，有一个新值和一个旧值 两个值纵向排列 ，使用定位将该div向上移动 watch监听对象时，新旧值相等，需要搭配计算属性一起使用 <div class="animation"> <span>{{ oldInfo.alarm}}</span> <span>{{ info.alarm}}</span></div> data() { r
2021-02-22 20:57:46
1820
原创 uniapp+微信小程序云函数获取微信openId
1.uniapp中App.vue文件中写获取openId的方法 onLaunch: function() { console.log('App Launch'); // 第一步：初始化微信云函数 wx.cloud.init({ env: 'test-2gt0mbv78a4941aa', // 打开微信云开发控制平台，右上角点击[设置] - [环境设置] traceUser: true }), // 第二步：获取用户的openid wx.clo
2020-10-20 20:27:32
2001
1
原创 blob，token验证文件下载方法封装
项目中遇到需要文件下载的功能，使用window.open方式在新页面打开链接下载，但是新页面无法传递token信息，于是让后台关闭token验证。const exportUserUrl = `${_baseUrl}/sys/user/exportUser`;export const exportUserApi = function (json) { let data = `?areaId=${json.areaId}&areaType=${json.areaType}&id=$.
2020-10-09 14:35:37
426
原创 el-cascader级联选择，点击名字选中，并且关闭下拉框
<el-cascader ref='ownArea' popper-class="selectArea" @change="selectArea" :options="formSelectData.office"> </el-cascader>将radio的宽高填满，这样点击文字也...
2020-09-25 11:54:22
2750
原创 js switch case 范围表示
function test(item) { switch (true) { case item>= 0 && item<= 24: return 1 case item>= 25 && item<= 49: return 2 case item>= 50 && item<= 74: return ...
2020-08-24 16:23:55
4266
1
原创 Vue2.x源码调试
1.下载源码https://github.com/vuejs/vue2.安装npm包npm i3.安装rollup打包工具npm i rollup -g4.修改package dev命令，添加sourcemap5.npm run dev，dis目录会生成vue.js文件6.源码中有一些调试的例子，将vue.min.js文件修改成vue.js，然后再浏览器打开，看见src目录及配置成功7.断点调试...
2020-07-28 16:15:10
1090
原创 js节流与防抖
//防抖 function debounce(fn, delay) { let timer = null; return function () { if (timer) { clearInterval(timer) } timer = setTimeout(fn, delay) } } //节流 function throttle(fn, delay) { let flag = true; return function () { if (!f.
2020-07-22 09:19:19
136
原创 Vue+Koa2+MongoDB实现登录注册信息管理DEMO
线上地址：http://67.216.222.247:2002/前端github地址：https://github.com/jimoruyan/Sign-up接口github地址：https://github.com/jimoruyan/koa-interface1.MongoDB官网注册一个账号，创建一个数据库https://account.mongodb.com/2.将接口代码数据库替换成自己的地址3.修改axios的baseURL和代理地址4.上传接口至
2020-07-14 11:01:12
366
原创 给定一个整数数组 nums ，找出数组中乘积最大的连续子数组，并返回该子数组所对应的乘积。
示例1:输入:[2,3,-2,4]输出:6解释:子数组[2,3]有最大乘积6。示例2:输入:[-2,0,-1]输出:0解释:结果不能为2,因为[-2,-1]不是子数组。var maxProduct = (nums) => { let res = nums[0] let...
2020-07-09 09:42:04
2421
原创 node.js接口上传到heroku服务器
1.注册heroku账号（谷歌邮箱）https://dashboard.heroku.com/2.下载heroku-clihttps://devcenter.heroku.com/articles/heroku-cli#download-and-install安装完重启编辑器或CMD 输入heroku 出现以下内容则安装完成3.接口文件夹新增.gitigonre文件忽视不上传的文件或文件夹4.输入heroku login 按下任何键登录，q是取消，登录后会显示logg..
2020-07-08 16:11:34
282
原创 定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素
示例1:输入:[2,2,1]输出:1示例2:输入:[4,1,2,1,2]输出:4 var singleNumber = function (nums) { let ans = 0; for (const num of nums) { ans ^= num; console.log(...
2020-07-08 09:33:58
966
原创 Vue动画卡顿，动画帧数优化
项目中需要在地图中做一个风场粒子动画，原生js方法绘制的动画非常流畅，但是一放到Vue中就会变得很卡顿，帧数大概只有原来的30%，最终发现是因为map变量放在了date中重写了变量的getter/setter，导致获取某个属性或者改写某个属性的时间变长，对于动画来说，影响就非常大了。解决方案：将map在方法内部定义，或者深拷贝data中的值复制给map，由于一个map变量可能在多个方法内使用，也可以将map放在data和方法的外部去定义<script type="module">
2020-07-07 14:45:08
3629
原创 斐波那契数列，动态规划，爬楼梯
假设你正在爬楼梯。需要n阶你才能到达楼顶。每次你可以爬1或2个台阶。你有多少种不同的方法可以爬到楼顶呢？注意：给定n是一个正整数。 // 第一种思路 // 如果观察数学规律，可知本题是斐波那契数列，那么用斐波那契数列的公式即可解决问题 var climbStairs = function (n) { const sqrt_5 = Math.sqrt(5); ...
2020-07-03 11:42:53
252
原创 div转图片，转base64
使用html2canvas工具地址：http://html2canvas.hertzen.com/1.安装html2canvasnpm install --save html2canvasyarn add html2canvas或者引入html2canvas.js文件2.引入方法后，直接调用html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChi
2020-06-30 16:09:34
1763
转载 空间复杂度和时间复杂度详细解析
一、什么是算法算法： 一个有限指令集 接受一些输入(有些情况下不需要收入) 产生输出 一定在有限步骤之后终止 每一条指令必须： 有充分明确的目标，不可以有歧义 计算机能处理的范围之内 描述应不依赖于任何一种计算机语言以及具体的实现手段 其实说白了，算法就是一个计算过程解决问题的方法。我们现在已经知道数据结构表示数据是怎么存储的，而“程序=数据结构+算法”，数据结构是静态的，算法是动态的，它们加起来就是程序。对算法来说
2020-06-28 09:31:44
1859
原创 Vue代码规范，原理，性能优化，面试题
1.Vue代码规范https://juejin.im/post/5b67e49551882508603d1431https://cn.vuejs.org/v2/style-guide/index.html2.Vue原理https://zhuanlan.zhihu.com/p/1381144293.Vue性能优化https://mp.weixin.qq.com/s/Q7YPgruUsJX_IQATAysQDA4.Vue面试题https://zhuanlan.zhihu.com/
2020-06-23 11:13:29
399
原创 使用leaflet画椭圆，弧线，根据起点经纬度，速度，时间，方向，计算终点经纬度。
源码地址：https://github.com/jimoruyan/leetcode/blob/master/demo/%E6%B1%A1%E6%9F%93%E6%89%A9%E6%95%A3%E7%AE%97%E6%B3%95.html算法背景：公司需要一个模型，求污染扩散的面积，给出起始的经纬度坐标，风速，风向，时间，根据这四个参数画出一个椭圆扩散的图形，起点到中间位置为重污染红色，中间位置到3/4位置为中污染黄色，3/4位置到终点为轻污染绿色。效果图：总体思路 destinati
2020-06-19 10:36:47
3119
原创 Webpack入门，优化，面试，原理
1.入门Webpack，看这篇就够了https://www.jianshu.com/p/42e11515c10f#2.Webpack面试题https://zhuanlan.zhihu.com/p/444388443.webpack性能优化https://segmentfault.com/a/11900000158833784.webpack原理https://www.cnblogs.com/chengxs/p/11022842.htmlhttps://segmentfault
2020-06-17 16:25:39
255
转载 javascript——原型与原型链,constructor
一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。例如：function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(perso
2020-06-10 17:29:50
1150
1
原创 javascript函数式编程（函数柯里化，惰性函数，递归，纯函数）
1.传递给函数一部分参数来调用它，让他返回一个函数去处理剩下的函数。//柯里化之前 function add(x, y) { return x + y } add(1, 2)//3//柯里化之后 function addX(y) { return function (x) { return x + y } }
2020-06-03 17:20:25
370
原创 vue刷新页面store数据丢失，localStorage/sessionStorage存储。
刷新页面vue实例重新加载，store被重置，可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。根据自己的需求可以选择合适的储存方法。import { SITE, FACTOR } ...
2020-05-06 10:52:09
2087
原创 Vue3.0快速使用 vite创建Vue3.0
vue3.0 API文档地址：https://vue-composition-api-rfc.netlify.app/1.vue/cli 3以上2.新建一个项目 vue create vue3-2020-4-17（该项目仍然是2.0）3.使用vue add vue-next命令，将项目升级为3.0（如果报错可以尝试将vuecli升级到最新版本）...
2020-04-17 22:43:45
3134
原创 CSS滚动条不显示，但是可以滚动
解决方法，在外层嵌套一个div设置overflow:hidden，内部滚动部分设置overflow-y:scroll，并且宽度略宽与外层，这样滚动条就被隐藏起来了。.contacts { width: 200px; height: 330px; overflow: hidden; .tree{ width: 11...
2020-04-15 14:06:05
4375
原创 vue 中使用 echart 绘制世界地图中国地图省地图
1.在页面内引入需要使用的地图js文件node_modules/echarts/map/jseg:import'echarts/map/js/china';2.如果选用省份，需要用汉字eg:options.geo.map='河南';3.属性参考官网：https://www.echartsjs.com/zh/option.html#geo4.其他一些实例参考：https://...
2020-03-31 18:11:38
1635
原创 table表头固定，内容滚动条，table滚动条对齐
<template> <table> <thead> <tr> <th v-for="(item,index) in 10" :key="index">表头</th> </tr> </thead> <tbody> <tr v-f...
2020-03-06 20:53:45
895
原创 Vue 通过for循环出来的标签，只改变其中的某一个样式
场景:项目中点击表格的某一个内容，按照该内容的属性进行排序，排序时需要改变排序的样式<tr> <th v-for="(item,i) in tableHeadData" @click="decChange(item.value,i)" ref="decChange" class="sortable both" :value='item.value' :key="...
2020-03-03 15:55:14
6561
原创 audio标签播放网易云歌曲
1.打开网页版网易云音乐，随便选择一首歌曲。2.找到对应歌曲的ID，如下图3.替换该地址ID：http://music.163.com/song/media/outer/url?id=16439857.mp34：添加对应src即可<audio loop="loop"autoplay="autoplay"><source:s...
2020-02-13 22:31:36
929
1
原创 前端常见的浏览器兼容性问题（css）
1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同解决方案： css 里增加通配符 * { margin: 0; padding: 0; }2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题解决方案：设置display:inline;3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的...
2020-01-20 10:30:43
738
转载 前端性能优化
本文主要考虑客户端性能、服务器端和网络性能，内容框架来自Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容。主流技术的内容前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条...
2020-01-19 19:52:32
321
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人