全局挂载vue3 对全局挂载做了调整，对全局挂载的方法增加的命名空间，用于独立存放，所以原先通过原型挂载的方式不推荐使用了。import { createApp } from "vue"; const app = createApp({}) app.config.globalProperties.$http = () => {}组件内调用最麻烦的<script lang="ts"> import { defineComponent,getCurrentInstance } from "vue"; ex...
fonts.less@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap'); .box { font-family: "Roboto"; }如果你再less文件中这么引入，那么一定是会报错的，这个报错要从两方面去理解：原生@import 语法被less占用less不支持在线css虽然less官方说如果你使用@import引入一个css文件，是会按照css原生语法去解析它的，但是它并没有说它支持一个在线链接，并且如果...
promise如果没有指定状态，那么就一直会处于pending中，如果长时间不处理，那么这个东西会一直存在于内存中，显然是不合理的。如果是一个超多请求项目，那么我们就需要考虑下性能问题了。promise中有一个rece方法，它接收一个promise作为值的数组，它的特性就是：哪个promise先执行，他就处理那一个，不管是resolve还是reject；在then中，他也只有一个值，不同于Promise.all方法返回的是一个数组，rece返回的值是最快完成的那个promise的返回值。利用这个特性，我们可以制作一个超时处理。function delayPromise(promise, ...
因为贫穷，所以在小黄鱼收了一个35包邮的E8820V2，但是默认的系统版本是v2.0.3；巨难用，想刷机，发现这个机器基本上都被人拿来做ap（桥接模式），要么就是升级了内存，用编码器直接刷的不死，但是本人没有这个条件，所以，只能找找看有没有官方的固件提供下载。找遍全网，只看到两个，一个是我目前用的官改固件，版本是：V2.0.8；还挺新，还有一个是原版固件，没有刷过，有兴趣可以尝试。这两个固件，除了原版我没有测试，官改的是可以直接用原装系统升级上去的，所以，实在是太棒了。感受官改的应该是精简了，反正感觉还可以，比之前的好很多。因为资源太少，所以我就分享一下吧，给和我一样的穷人一点希望。下载...
当项目需要和其他项目进行沟通的时候，往往常见的做法就是，我在a网站点击一个按钮，在链接中携带query参数啥的，然后去访问b网站页面。此时可能会有两种情况：跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板，跳板会对参数做一些操作，然后进行重定向。两种做法都各有优势：第一种省事简单，但是如果以后b网站链接层级发生变化，那么就会导致链接不可能，到时候还需要进行修改，很痛苦。第二种的话，我们需要写一个跳板页面，但是通过一些参数要求，甚至自身加上一些逻辑处理，那么他的功能性会更强一些。那么，在vue中，做一个重定向页面，怎么做？思路思路1利用路由守卫，当链接上存在某个参数的时候，...
发现公司的项目，不管是vue2还是vue3，不管是新创建的还是旧项目，启动后Network永远是unavailable；就很离谱，导致每次想要局域网测试，只能手动在devServer中配置public属性，设置一个固定的本地ip地址。但是，你的ip地址并不是别人的ip地址，那么就会导致如果不小心上传了vue.config.js；那么同事一拉，哦吼，不懂得就说，哎呀，我的项目怎么启动不了了。这就很蛋疼了，所以我分析了一下这个问题的原因。首先，我的电脑的环境是没有问题的，网卡也是没有问题的，vue cli早就支持多个网卡了，所以多网卡问题就可以忽略。其实主要原因是因为一个不合法的ipv4地址...
前言作为一个刚入行没多久的前端菜鸡，对于自动化部署真的非常依赖啊，因为现在的开发更新都是很频繁的，代码更迭速度都很快，但是代码的部署却一直没有太大变化，总是需要自己将打包好的代码通过ftp等方式进行上传，非常的不方便，上传完，比如node后端服务，还需要手动安装对应的依赖，十分不便。当一个人要做前后端开发的时候，可能会导致大量的时候花费在这个繁琐而且没啥能力提升的事情上，做得多了还是影响开发的心情，幸福感大大降低。如果有一个功能，能自动监听我上传的代码，自动更新服务端的代码，并且安装依赖啥的都能自动完成，那么就非常方便了，毕竟现在大部分代码开发都依赖于git仓库管理。于是乎ci工具就诞生...
从uikit官方站点复制抽屉的代码本地运行，你会发现，它的抽屉默认居然是黑色的，根本不是官网上那种白色的样式。查询了好久，再github上issue上看到一些解释（ OffCanvas only Dark），大概释义如下：官方的抽屉只有dark模式，不支持白色模式，也不支持反色的class（uk-light和uk-dark）；而且官方对这个抽屉复写样式特别多，多到离谱，你能用上的元素，他都复写了，导致你就算把背景色复写成白色，你元素的字体颜色还是白色，而且nav组件的icon也被复写成白色svg了，这某种程度上复写样式基本无解了。唯一的解决办法就是不用官方的uk-offcanvas-ba...
简单说明externals这个属性，常用来做cdn的功能，在打包的时候不打包指定的库，比如vue，jquery，然后在html文件部分，手动引入库的cdn链接，但是，你在开发的时候，你还是需要npm或者yarn安装这个库，import引入使用，只是打包的时候会自动剔除。简单示例webpack.config.jsmodule.exports = { externals: { uikit: "UIkit", } }可以看到，externals是一个对象，对象里面有key和value，其中key的值就是package.json里面，安装的包的名字。而valu...
node的bash命令其实是有对应的指令字符的，但是，这个指令只能再linux，mac上才有生效，再windows是无效的，所以了解一下就行。命令说明&&顺序执行多条命令，当碰到执行出错的命令后将不执行后面的命令&并行执行多条命令||顺序执行多条命令，当碰到执行正确的命令后将不执行后面的命令|管道符windows上进行多命令"scripts": { "dev": "cross-env NODE_ENV=development webpack --env development --progress -...
找了很久，现有的库有两个：1. Mergenpm地址： Merge用法：import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3...
自己去注册吧，提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
有时候我们在vue中进行for循环，就会涉及到绑定唯一值key的问题，但是并不是任何时候都会存在所谓的唯一值，使用index下标明显是不合适的，官方也不推荐，除非你for循环出来的列表不用变化。所以一般常用的做法就是给for循环的对象添加一个属性，属性的值是随机的uuid或者时间戳。这样前端问题解决了，如果遍历的数据还需要提交到后端，那么不就多了一个属性，这个属性后端不需要的。所以，我们需要在提交数据前，对数据进行过滤。过滤又得for循环删除？那怎么行，有没有那种通用的，简单的方法。过滤方法/** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 * @para...
资源github：vue.draggable中文文档：vue.draggable中文文档api参考文档：sortablejsvue.draggable是基于sortablejs的vue封装，所有有些api官方并不会有过多的解释，可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时，页面滚动就是一个必然的需求，但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性：scroll，如果为true时就能触发滚动，但是默认属性就是true；所以这个配置可以说是无效的。解决方案：cannot set scrollSensitivity19年的时候就有提...
在elment的table多选中增加单选逻辑，这个也不能说产品的问题，单选和多选应该算是比较基础的应用，但是，element并没有对单选做支持。于是我有了一个偷懒思路！前提由于table的一键全选按钮无法进行细致化操作，无法控制点击时选中的数量，只能在选中后的回调里面处理，所以，我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消，其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...
不允许循环引用的深拷贝function deepCopy(data) { const weakMap = new WeakMap(); function copy(data) { if (weakMap.has(data)) return null; //打断施法 const copyData = data instanceof Array ? [] : {}; weakMap.set(data, true); for (let [key, value] of Object.entries(data))...
前言经常是一个input表单需要输入数字和小数，那么如果仅仅是要求数据格式，我们可以通过表单校验的方式对输入的值进行限制，具体的做法，我之前就写过文章：《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式，基本涵盖了日常需求。但是，仅仅就只能这样吗？？？no，如果后端要求你输入的数字，提交给他的时候也必须是数字类型呢？要知道，即便我们做了表单校验，校验它输入的必须是数字格式，但是input本身就是一个string类型的值，即便你设置type="number"也无法改变它值的类型。有人说用.number；其实这个问题之前就聊过了，这个修饰符...
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法，该方法会为每个格子运行一次。比如，有一个3行的表格，每行4个格子，那么span-method就会运行：3*4=12；共计12次。有时候我们并不需要每个格子都运行一次，在上面的需求上，我们只需要每行运行一次就行了，所以我们可以通过span-method的参数中，解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...
# 以下使用socks5代理 git config --global http.proxy socks5://127.0.0.1:1086 git config --global https.proxy socks5://127.0.0.1:1086 # 以下使用http代理 git config --global http.proxy http://127.0.0.1:1087 git config --global https.proxy https://127.0.0.1:1087 # 取消代理 git config --global --unset http.proxy gi...
效果图思路分析tab切换在vue中，tab的切换只需要改动tab组件的active属性即可，所以，我们只需要对点击的元素，点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计，比如html元素可以使用data属性。聚焦聚焦就很简单了，input元素有focus方法，运行就会聚焦。滑动定位利用scrollIntoView方法，可以达到定位的效果，配置属性，就会有动画。element.scrollIntoView({behavior:"smooth"})MDN：Element.scrollIntoView()点击这个元素，从data属性上获取要滚动的元...
前言js有一个31k多的star的开源复制库：clipboard.js；但是一些简单复制并不想安装一个库来解决，所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分，通过toString()方法可以获取被选中的文本内容，以及js操作选中。MDN文档：SelectionexecCommand 对象用于以命令的形式来操作网页的内容，说白了就是用它来实现复制文本操作，复制的是选中的文本MDN文档：execCommand 需要注意的是，execCommand在未来将会被遗弃，因为这个api本身是从ie浏览器那边继承的，久而久之各大浏览器都对其做了兼容，虽然...
最近评论