JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉
0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉。原创 2024-04-10 14:16:06 · 484 阅读 · 0 评论 -
在TypeScript项目中导入JavaScript文件包提示无法找到模块“@/api/xxx”的声明文件-解决声明文件报错问题
ts项目中导入自定义js文件提示 无法找到模块“@/api/xxx”的声明文件当 import 一个没有类型声明的第三方库时,TypeScript 不知道 import 进来的东西是什么类型,只能,这也就是我们常说的。所有正常的前端项目都会禁止 implicit any 出现,所以就报错了。这些方法,因为这样一来我们就远离了 TypeScript 给我们的保护。原创 2024-04-01 10:31:32 · 704 阅读 · 0 评论 -
GIT克隆项目后代码更新了如何同步下来-案例
这样,你就将别人的更新合并到了你的分支中。如果有冲突,你需要手动解决冲突。解决冲突后,提交更新。git 克隆了别人的项目,我自己又创建了一个代码仓库去修改拉下来的项目代码。如果你想在将别人的更新合并到你的分支之前先查看更新的差异,你可以使用。当别人的代码更新后,我如何将他修改的部分和我自己的合并。original_repo_url 克隆的仓库地址。原创 2024-03-25 11:20:03 · 248 阅读 · 0 评论 -
VSCode创建用户代码片段-案例demo
1为最后光标所在位置。按tab健依次到$2,3,4..............跳转到指定位置到同时选中默认文本,方便修改。快捷提示窗对该代码片段对描述。触发快捷提示的字符串前缀。原创 2024-03-18 10:36:35 · 320 阅读 · 0 评论 -
JavaScript实现将Map数据key:value数据转换成数组对象格式
JavaScript实现将Map数据key:value数据转换成数组对象格式。原创 2024-05-13 10:29:23 · 244 阅读 · 0 评论 -
JS常用代码片段2-值得收藏
DOM检查一个元素是否被聚焦const hasFocus = (ele) => ele === document.activeElement获取一个元素的所有兄弟元素const siblings = (ele) => .slice.call(ele.parentNode.children).filter((child) => child !== ele);获取选中文本const getSelectedText = () => window.ge原创 2021-10-21 09:00:00 · 315 阅读 · 1 评论 -
JavaScript判断对象是否包含特定属性和Map,Set,Array,Object之间的相互转换-案例
hasOwnPropertyObject的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性判断自身属性是否存在var o = new Object();o.prop = 'exists';function changeO() { o.newprop = o.prop; delete o.prop;}o.hasOwnProperty('prop'); // truechangeO();o.hasOwnProperty('.原创 2021-09-22 10:28:49 · 652 阅读 · 1 评论 -
vue中修改数据页面不更新的原因-解决方案
在vue2中通过Object.defineProperty实现数据响应式,组件初始化时,对data中的item进行递归遍历,对item的每一个属性进行劫持,添加set,get方法。后来新加的newProperty属性,并没有通过Object.defineProperty设置成响应式数据,修改后不会视图更新解决一Vue.set()Vue.set( target, propertyName/index, value )或this.$set(target, propertyName/in..原创 2021-08-30 12:24:22 · 1511 阅读 · 2 评论 -
vue-router路由传参的几种方式-案例
说明点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据刷新页面参数丢失编程式导航方法一:通过 params 传参路由配置如下{ path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail }通过 $router.push 中 path 携带参数的方式// 列表中的传参goDetail(row) { this.$router..原创 2021-08-25 12:35:52 · 4001 阅读 · 18 评论 -
JavaScript中开发常用方法-总结-持续更新
数组的常用方法lengthlength 是一个可读可写的属性,用来表示数组的长度(即数组元素个数)。通过访问 length 属性,可以获取数组长度;而通过修改 length 的值,可以增加或减少数组元素,甚至可以完全清空数组元素。length 属性的读、写操作示例如下:var arr = [1,2,3];alert(arr.length);//读取数组长度,结果为3arr.length = 1;//修改数组长度为1,此时数组只剩第一个元素arr.length = 0;//快速清空原创 2021-08-17 13:13:17 · 1567 阅读 · 4 评论 -
JS常用代码片段-127个常用罗列-值得收藏
1、all如果数组所有元素满足函数条件,则返回true。调用时,如果省略第二个参数,则默认传递布尔值。const all = (arr, fn = Boolean) => arr.every(fn);all([4, 2, 3], x => x > 1); // trueall([1, 2, 3]); // true2、allEqual判断数组中的元素是否都相等const allEqual = arr => arr.every(val => val原创 2021-08-17 10:32:34 · 1539 阅读 · 3 评论 -
css制作逐帧动画-案例
网页动画图像、Flash 动画和 JavaScript 实现的效果图片,我们用最基础的CSS也能实现。制作一个简单的gif动画图,上图就是效果图。用CSS3制作动画图,你需要了解两个css属性。其一是 @keyframes因为它限定了CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。浏览器兼容的时候需要在keyframes上加前缀,-webkit-, -ms- 或 -moz- 。keyframes中有两个属性,from和to,from里面的内容定义动画开始的状态,to记录动画结束的原创 2021-10-04 12:45:00 · 2064 阅读 · 7 评论 -
CSS中文本对齐方式-文本处理案例
文本对齐方式CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也是非常的简单p{ text-align: center; text-align: left; text-align: right;}但是两端对齐你有用过吗?只需要添加text-align-last:justify样式即可<div class="justify-text"> <div class="li">账号</div> <div clas原创 2021-08-16 14:22:19 · 2862 阅读 · 1 评论 -
Vue中使用v-if判断某个元素满足多个条件的简约写法-案例
v-if判断active满足0的时候写法是:v-if="active === 0"那如果active同时要满足0,1,2三个值的时候,如果在v-if里用 || 并列写如:v-if="active === 0 || active === 1 || active === 2"写法很明了,但是很不简介一:最简便的写法就是//[ ]里可以放字符串,数值等v-if="[0,1,2].includes(active) "普通写法v-if=" type==1 || type==2 |..原创 2021-08-23 15:41:34 · 5799 阅读 · 1 评论 -
Scrollbar浏览器滚动条样式美化-知识点-案例
滚动条样式一/* 样式一 *//*滚动条整体样式 body:: 只给body加样式 ::给全部*/::-webkit-scrollbar { width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}/*滚动条里面小方块*/::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:原创 2021-07-21 14:34:52 · 2263 阅读 · 1 评论 -
Vue3中对router-links二次封装支持内外链接跳转-案例
<router-link>标签是用于在Vue不同页面之间跳转,但它不是跳转到外部链接,相反,我们一般使用<a>标签跳转到外部链接。扩展<router-link>组件非常简单,只需将它包装到我们自己的定制组件中。Ok,我们需要构建一个AppLink组件来处理链接,无论是外部的还是内部的。AppLink组件AppLink组件的 props 要包含router-link的所有props。为什么?因为这样我们组件的“接口”就可以模仿 Router...原创 2021-08-16 14:22:38 · 2027 阅读 · 1 评论 -
Vue中常用的开发小技巧-让开发更便捷快速-总结
1. 将一个 prop 限制在一个类型的列表中使用 prop 定义中的validator选项,可以将一个 prop 类型限制在一组特定的值中。export default { name: 'Image', props: { src: { type: String, }, style: { type: String, validator: s => ['square', 'rounded'].includes(s) ..原创 2021-09-01 12:21:25 · 1309 阅读 · 1 评论 -
Vue中按钮组中多个按钮状态控制-同个按钮二次点击取消选中效果-案例
效果图主要代码// 结构<a v-for="(item, index) in optWkList" :key="item.id" :class="{ active: item.isBtn }" @click="optBtn(item, index)"> {{ item.name }}</a>// 数据optWkBtn: '',//默认optWkList: [ { name: 可复刻, isBtn: false,.原创 2021-09-28 07:48:27 · 802 阅读 · 2 评论 -
Vue项目中如何快速上手Vuex状态管理--使用心得-值得珍藏
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,...原创 2021-05-18 10:50:37 · 1818 阅读 · 27 评论 -
Vue中v-model的多种使用方式-妙用小技巧
v-model<div id="app"> <input type="text" v-model="num"> <input type="text" :value="num" v-on:input="num=$event.target.value"> <h2>{{num}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/v原创 2022-01-17 10:23:02 · 1735 阅读 · 0 评论 -
CSS实现优惠券特殊样式的技巧
Web 开发过程中,总会遇到各种各样的布局,比如下面的各种“优惠券”,一起来看看吧一、最佳实现方式首先,碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩,可以看一下CSS3 Mask 安利报告。这里简单介绍一下基本语法很简单,和background的语法基本一致.content{ -webkit-mask: '遮罩图片' ;}/*完整语法*/.content{ -webkit-mask: '遮罩图片' [position] / [size] ;}...原创 2021-03-24 10:12:32 · 3303 阅读 · 2 评论 -
foo([‘a‘, ‘b‘, ‘a‘, ‘a‘]); //实现函数foo,返回一个新数组[‘a-1‘, ‘b-1‘, ‘a-2‘, ‘a-3‘]
foo2(['a', 'b', 'a', 'a']);//实现函数foo,返回一个新数组['a-1', 'b-1', 'a-2', 'a-3']let arrd = ['a', 'b', 'a', 'a'];let newArray = [];//统计字符在数组里面的次数function countIndex(arr, value) { return arr.reduce((a, v) => v.split('-')[0] === value ? a + 1 : a, 1)}..原创 2021-02-04 13:20:38 · 538 阅读 · 0 评论 -
实现函数传入person_first_name返回驼峰personFirstName
下划线转驼峰函数封装let testStr = 'name_firstname_secondname'function toUp(str) { let newStr = '' let arr = str.split('_') //先用字符串分割成数组 arr.forEach((item, index) => { if (index > 0) { return newStr += item.replace(item[0], item[0].toUpperCase())原创 2021-02-04 13:18:15 · 369 阅读 · 0 评论 -
js封装字母大小写转换升级版
函数封装//字符串大小写转换var changeCase=function(str, type) { // 字符串大小写转换 type: 1:首字母大写 2:首页母小写 3:大小写转换 4:全部大写 5:全部小写 type = type || 4 switch (type) { case 1: return str.replace(/\b\w+\b/g, function(word) { return word.substring(0, 1).原创 2021-01-29 11:20:34 · 397 阅读 · 2 评论 -
js本地存储函数封装基于localStorage本地存储
函数封装//基于localStorage本地存储var store={ set:function(name, value, day) { // 设置 let d = new Date() let time = 0 day = (typeof(day) === 'undefined' || !day) ? 1 : day // 时间,默认存储1天 time = d.setHours(d.getHours() + (24 * day)) // 毫秒 local原创 2021-01-29 10:55:31 · 1020 阅读 · 0 评论 -
js封装cookie相关操作函数
函数封装//cookie相关操作var cookie={ set:function(name, value, day) { let oDate = new Date() oDate.setDate(oDate.getDate() + (day || 30)) document.cookie = name + '=' + value + ';expires=' + oDate + "; path=/;" }, get:function(name) { let原创 2021-01-29 11:04:07 · 335 阅读 · 0 评论 -
js自己封装trim()函数去除空格升级版
函数封装//去除字符串空格var trim=function(str, type) { // 去除空格, type: 1-所有空格 2-前后空格 3-前空格 4-后空格 type = type || 1 switch (type) { case 1: return str.replace(/\s+/g, '') case 2: return str.replace(/(^\s*)|(\s*$)/g, '') case 3: r原创 2021-01-29 11:16:30 · 503 阅读 · 0 评论 -
vue项目中请求网络接口返回的图片url报错403解决方法
网络接口都是有请求限制的,特别是图片字段值是绝对路径的情况,请求的时候就会报错403 forbidden,这个时候应该使用缓存的方式拿到请求图片的地址进行缓存,只要在请求到的图片链接前面加上https://images.weserv.nl/?url=图片url即可(这是一个专门缓存图片的网址)getImages( _url ){ if( _url !== undefined ){ let _u = _url.substring( 7 ); ret...原创 2020-11-25 14:26:00 · 4012 阅读 · 0 评论 -
hover小技巧 利用filter改变滤镜值实现效果
vue网站下面的赞助商模块做的很好玩,当鼠标悬停的时候,图片会“改变”。看过它的代码之后才发现并不是修改了图片路径,只是通过img:hover更改了图片的属性img { filter: grayscale(100%); opacity: 0.66; width: 160px; }img:hover { filter: none; opacity: 1; }CSS的灰度滤镜上...原创 2020-11-17 10:10:33 · 535 阅读 · 1 评论 -
图片在div盒子中垂直水平居中显示-flex
使用弹性盒布局-flex,巧妙的实现图片垂直水平居中效果图示例代码<div class="cp bgcolor"> <img class="img01" src="../assets/images/coop/yl.png" alt="图" /></div>.cp { width: 269px; height: 182px; // 给父标签设置 display: flex; justify-content: center; a..原创 2020-11-02 10:47:03 · 1042 阅读 · 0 评论 -
html前端数据加载的loading效果
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div><style type="text/css"> * { padding: 0; margin: 0; } .loading...原创 2020-08-17 18:22:24 · 3662 阅读 · 2 评论 -
js用for循环将小方块摆成到V(A)型方法四--小技巧
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ position: relative; } #box>div{ ...原创 2020-03-27 21:54:36 · 362 阅读 · 0 评论 -
js之左右移动的动画的函数封装
function move(ele,end,step){ //var step = 10 //先清除定时器,从而防止定时器的叠加 clearInterval(timer); //设置定时器 //1.获取起点 var start = parseInt(getStyle(ele,'left'));//1000 //2.处理步长 if(e...原创 2020-03-27 21:38:46 · 404 阅读 · 0 评论 -
js获取任意元素的样式(兼容ie)插件
//获取任意元素的非行内样式var getStyle = function(ele,attr){ //1.将主要功能代码写入函数中 if(ele.currentStyle==undefined){ //证明当前浏览器是标准浏览器 var bg = getComputedStyle(ele)[attr]; return bg; ...原创 2020-03-27 21:37:54 · 550 阅读 · 0 评论 -
js用for循环将小方块摆成V型方法四--小技巧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-25 12:39:19 · 628 阅读 · 0 评论 -
js用for循环将小方块摆成V型方法三--小技巧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-03-21 13:35:56 · 390 阅读 · 0 评论 -
js用for循环将小方块摆成V型方法二--小技巧
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2020-03-20 09:25:00 · 388 阅读 · 0 评论 -
js用for循环将小方块摆成V型方法一--小技巧
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #list { position: relative; list-style: none;...原创 2020-03-19 22:02:24 · 537 阅读 · 0 评论 -
js-2种方法输出1000以内所有的“水仙花数”--小技巧
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //输出所有的“水仙花数” window.onload = function() {...原创 2020-03-19 21:40:06 · 1259 阅读 · 0 评论 -
js编写类似购物车checkbox全选反选案例--小技巧
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function() { var btn1 = do...原创 2020-03-19 21:36:15 · 383 阅读 · 0 评论