JackieDYH的博客

defaultExpandAllRows这个属性仅仅是用来设置默认值的，只在第一次渲染的时候起作用，后续再去改变，无法实现响应式。

截流函数（throttle）和防抖函数（debounce）都是用于解决函数触发频率过高的问题，可以提升页面性能，减少不必要的计算，优化用户体验。

根据需求实现当前两列数据中有相同数据时，合并列单元格。

0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉。

ts项目中导入自定义js文件提示 无法找到模块“@/api/xxx”的声明文件当 import 一个没有类型声明的第三方库时，TypeScript 不知道 import 进来的东西是什么类型，只能，这也就是我们常说的。所有正常的前端项目都会禁止 implicit any 出现，所以就报错了。这些方法，因为这样一来我们就远离了 TypeScript 给我们的保护。

是一个常见的别名，用于表示主远程仓库。你可以使用其他别名来命名其他的远程仓库，例如。现在，你的本地 Git 仓库已经配置了多个上传仓库地址。命令时，Git 会将代码推送到所有配置的远程仓库。

这样，你就将别人的更新合并到了你的分支中。如果有冲突，你需要手动解决冲突。解决冲突后，提交更新。git 克隆了别人的项目，我自己又创建了一个代码仓库去修改拉下来的项目代码。如果你想在将别人的更新合并到你的分支之前先查看更新的差异，你可以使用。当别人的代码更新后，我如何将他修改的部分和我自己的合并。original_repo_url 克隆的仓库地址。

1为最后光标所在位置。按tab健依次到$2,3,4..............跳转到指定位置到同时选中默认文本，方便修改。快捷提示窗对该代码片段对描述。触发快捷提示的字符串前缀。

JavaScript实现将Map数据key:value数据转换成数组对象格式。

CSS的scroll-snap-type和scroll-snap-align参数可以实现滚动吸附效果，让滚动操作更加流畅自然。下面是关于这两个参数的详细说明以及使用教程。

DOM检查一个元素是否被聚焦const hasFocus = (ele) => ele === document.activeElement获取一个元素的所有兄弟元素const siblings = (ele) => .slice.call(ele.parentNode.children).filter((child) => child !== ele);获取选中文本const getSelectedText = () => window.ge

hasOwnPropertyObject的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性判断自身属性是否存在var o = new Object();o.prop = 'exists';function changeO() { o.newprop = o.prop; delete o.prop;}o.hasOwnProperty('prop'); // truechangeO();o.hasOwnProperty('.

在vue2中通过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新解决一Vue.set()Vue.set( target, propertyName/index, value )或this.$set(target, propertyName/in..

说明点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据刷新页面参数丢失编程式导航方法一：通过 params 传参路由配置如下{ path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail }通过 $router.push 中 path 携带参数的方式// 列表中的传参goDetail(row) { this.$router..

数组的常用方法lengthlength 是一个可读可写的属性，用来表示数组的长度（即数组元素个数）。通过访问 length 属性，可以获取数组长度；而通过修改 length 的值，可以增加或减少数组元素，甚至可以完全清空数组元素。length 属性的读、写操作示例如下：var arr = [1,2,3];alert(arr.length);//读取数组长度,结果为3arr.length = 1;//修改数组长度为1，此时数组只剩第一个元素arr.length = 0;//快速清空

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

网页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gif动画图，上图就是效果图。用CSS3制作动画图，你需要了解两个css属性。其一是 @keyframes因为它限定了CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。浏览器兼容的时候需要在keyframes上加前缀，-webkit-, -ms- 或 -moz- 。keyframes中有两个属性，from和to，from里面的内容定义动画开始的状态，to记录动画结束的

文本对齐方式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

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 |..

滚动条样式一/* 样式一 *//*滚动条整体样式 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:

<router-link>标签是用于在Vue不同页面之间跳转，但它不是跳转到外部链接，相反，我们一般使用<a>标签跳转到外部链接。扩展<router-link>组件非常简单，只需将它包装到我们自己的定制组件中。Ok，我们需要构建一个AppLink组件来处理链接，无论是外部的还是内部的。AppLink组件AppLink组件的 props 要包含router-link的所有props。为什么？因为这样我们组件的“接口”就可以模仿 Router...

1. 将一个 prop 限制在一个类型的列表中使用 prop 定义中的validator选项，可以将一个 prop 类型限制在一组特定的值中。export default { name: 'Image', props: { src: { type: String, }, style: { type: String, validator: s => ['square', 'rounded'].includes(s) ..

效果图主要代码// 结构<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,.

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，...

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

Web 开发过程中，总会遇到各种各样的布局，比如下面的各种“优惠券”，一起来看看吧一、最佳实现方式首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下基本语法很简单，和background的语法基本一致.content{ -webkit-mask: '遮罩图片' ;}/*完整语法*/.content{ -webkit-mask: '遮罩图片' [position] / [size] ;}...

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)}..

下划线转驼峰函数封装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())

函数封装//字符串大小写转换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).

函数封装//基于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

函数封装//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

函数封装//去除字符串空格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

网络接口都是有请求限制的，特别是图片字段值是绝对路径的情况，请求的时候就会报错403 forbidden，这个时候应该使用缓存的方式拿到请求图片的地址进行缓存，只要在请求到的图片链接前面加上https://images.weserv.nl/?url=图片url即可（这是一个专门缓存图片的网址）getImages( _url ){ if( _url !== undefined ){ let _u = _url.substring( 7 ); ret...

vue网站下面的赞助商模块做的很好玩，当鼠标悬停的时候，图片会“改变”。看过它的代码之后才发现并不是修改了图片路径，只是通过img:hover更改了图片的属性img { filter: grayscale(100%); opacity: 0.66; width: 160px; }img:hover { filter: none; opacity: 1; }CSS的灰度滤镜上...

使用弹性盒布局-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..

<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div><style type="text/css"> * { padding: 0; margin: 0; } .loading...

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ position: relative; } #box>div{ ...

function move(ele,end,step){ //var step = 10 //先清除定时器，从而防止定时器的叠加 clearInterval(timer); //设置定时器 //1.获取起点 var start = parseInt(getStyle(ele,'left'));//1000 //2.处理步长 if(e...

//获取任意元素的非行内样式var getStyle = function(ele,attr){ //1.将主要功能代码写入函数中 if(ele.currentStyle==undefined){ //证明当前浏览器是标准浏览器 var bg = getComputedStyle(ele)[attr]; return bg; ...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...