![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
23朵毒蘑菇
这个作者很懒,什么都没留下…
展开
-
毒蘑菇变量管理,前端变量管理。
我公司需要使用地图,需要定义几个地图的key,key变了就需要重新部署,也可以后端提供一个接口,我觉得没必要,有人可能会觉得这样不安全,这样key不就暴露了吗,我想说的是前端没有绝对的安全,key只要在前端就会被找出来,存到我们网站js里和您自己的js里完全没区别。不一定是在线网站,您写的html本地页面也可以使用,比如说您给家人写了个导航级别的小网站好让家人方便浏览网页,您去上班了却又觉得页面需要改一下,使用本网站吧,让你不用服务器也能修改本地网页。原创 2023-01-22 16:08:53 · 96 阅读 · 0 评论 -
vue3异步组件怎么获取ref,获取组件实例?曲线救国的方式。
目前的思路是把defineAsyncComponent包装一层,获取import后的promise就行。原创 2022-10-12 15:03:46 · 1318 阅读 · 0 评论 -
js事件委托子元素层级多级的情况。
看了很多文章,事件委托的做法都是只有一级子元素 <ul id="p"> <li data-index="1"> 1 </li> <li>2</li> <li>3</li> <li>4</li> </ul>这样直接判断事件的target是否是li标签就行了,但很多情况都不是这样的。万一我的li标签里还原创 2022-03-29 17:33:30 · 978 阅读 · 0 评论 -
vue的一个简单的树形结构展示组件
效果图源码<template><div class="cp_container" :style="{ '--right-border':isLeft?'blok':'none', '--left-border':isRight?'blok':'none', '--center-border':(!isRight && !isLeft)?'blok':'none', '--contain原创 2021-08-09 16:36:41 · 1063 阅读 · 0 评论 -
storagex-js 1.4.1文档
storagex-js 1.4.1首先需要安装引入 storagex-js//使用npm安装npm install storagex-js//导入 需要什么就导入什么 所有方法皆是同步方法import { removeStorageItem, storageX, StorageX, localStorageX, LocalStorageX, sessionStorageX, SessionStorageX, uniStorageX.转载 2021-05-27 10:40:53 · 119 阅读 · 0 评论 -
解决vue-router跳转后元素内嵌滚动条自动回到顶部的问题。
该路由已经使用了缓存的前提下<keep-alive> <router-view></router-view></keep-alive>当页面跳转,点击返回按钮后发现之前页面里的一个列表元素的滚动条自动回到顶部了,因为该元素设置了固定的宽高并且css设置overflow: scroll; 这样的话,滚动条不是页面级别的,并没有被记录下来,但是该组件又没有发生改变,所以封装个组件记录滚动条位置,页面发生改变就设置会以前的位置就行了。自定义组件.原创 2021-05-25 10:04:18 · 1273 阅读 · 0 评论 -
vue-router使用keep-alive动态缓存页面。
首先,在配置router的地方配置meta。const routes = [ { path: '/', //首页 name: 'index', component: Index, meta: { title: '首页', myKeepAlive:true, //表示该组件缓存 }, },]然后在含有router的路由出口文件中<template&原创 2021-05-25 10:03:28 · 565 阅读 · 0 评论 -
StorageX,一个前端对象化存储的最简单的工具。
StorageX 1.3,对象化操作本地数据,超好用哟!。//使用npm安装npm install storagex-js//导入import {localStorageX,sessionStorageX} from "storagex-js";然后就可以使用了,使用方法只有两种1:只是对键值进行操作(不会深度修改)//对对象属性进行修改后本地储存相应更新const localStorage= localStorageX();localStorage.a = {b:1}; //键 .原创 2021-04-19 20:01:53 · 253 阅读 · 0 评论 -
毒蘑菇导航,感觉不像是毒蘑菇,更像是个树莓了。
毒蘑菇导航一个很好用很特别的导航 毒蘑菇导航毒蘑菇导航,毒蘑菇搜索新加了导航的功能。注册了毒蘑菇搜索账号,会根据自己添加的网站生成一个导航,每个人都可以使用,但是只允许用户本人进行修改。也就是说,只要访问 https://search.dumogu.top/navigate/123456 这个链接就可以看到导航了,那个123456表示的是该导航的用户账号为123456,以后毒蘑菇导航会生成很多相应的导航(跟站搜搜差不多),会有免费视频导航,程序员导航,二次元导航,优秀的个人导航也可以加到推荐导航中原创 2021-04-13 20:38:41 · 1419 阅读 · 1 评论 -
storageX 1.1,细节和性能优化,用起来更加得心应手。
storageX 1.1 ,用法和之前差不多,只是有一点区别。性能等方面进行了优化。修复BUG1:储存的是数组时,取出来重新赋值会丢失map,filter等自带的方法。原因:json化数据时触发了代理的set属性,会调用clone方法,因为当时考虑到数据的储存简单clone一下就行,现在删除了clone。bug解决。2:直接调用localStorageX()生成对象从而控制键值,以及更深层次的值,我认为这样不好。解决:取消深层代理。使用方法。1:只是对键值进行操作const localSto.原创 2021-03-30 10:41:49 · 183 阅读 · 0 评论 -
sessionStorageX,js本地储存对象化,操作简单,结合vuex可以更好的数据持久化。
js源码文件(目前只有操作sessionStorage的,其他的照猫画虎就行)function stringToObject(value) { try { return JSON.parse(value) } catch(e) { return value }}function deepProxy(target, setFn) { for (let index in target) { if (target[index] instanceof Object) { target原创 2021-03-24 15:42:37 · 190 阅读 · 0 评论 -
js从开始位置滚动到结束位置,固定时间下匀速滚动和变速滚动。
从开始位置滚动到结束位置,距离固定已知,时间固定已知,那么就只是一个简单的两个方程式,一个斜率固定(直线方程),一个斜率不固定(一元二次方程,抛物线)。斜率也就是速度斜率固定,也就是速度固定//从开始的位置移动到结束的位置(匀速)function startRollToEnd(end=0,time = 100){ let timer; //获取当前毫秒数 let startTime = +new Date(); let start = document.document原创 2021-03-19 10:59:16 · 616 阅读 · 0 评论 -
用vue2写的登陆页面如何阻止浏览器记住密码,自动填充
网上看了很多方法,基本就是动态改变input的类型。只要类型不是password的input输入框就行了嘛,然后实现输入后把明文变成特殊符号不就行了吗?参考源码原创 2020-12-28 14:42:48 · 816 阅读 · 0 评论 -
关于JavaScript前端图片懒加载最简单的两种方法
图片懒加载的实现思路:当后端返回给前端图片的链接后,将正确的链接放在img标签的一个隐藏属性里,当img标签可见时赋予正确的属性,这时才开始加载图片。当所展示的列表数据过多时,这种方法很有效。方法一:把正确的链接设置到一个隐藏的属性里,可见时转换当元素可见时,将 data-src 里的数据写到 src 里(可利用 DataSet API 实现)<img data-src="dumogu.jpg">img.src = img.datset.src;判断元素是否可见也有很多解决方法原创 2020-12-28 14:26:39 · 239 阅读 · 0 评论 -
js正则匹配markdown里的图片标签
其实前端后端需要将markdown文本转换为html文本都有相应的库,几句代码就ok,但有时我们又必须获取到markdown里的某个标签来进行相应的转换,有几种办法,可以从已经转换好的html文本里获取,还有的就是直接从markdown文本里获取,这里说的是第二种。1. 一个markdown里只有一个图片的情况const str = "asddsad![标题](url)asdasddasd"; //一段markdown文本,包含一个图片"![标题](url)"let result = str.matc原创 2020-12-17 12:42:05 · 1772 阅读 · 1 评论 -
vue2 角度选择器组件,鼠标拖动旋转选择角度
vue角度选择器组件实现代码实现一个超简单的角度选择器组件<template> <div ref="setup_angle" class="setup_angle" @mousedown="mousedown = true" @mouseup="mousedown = false" @mousemove="on_mousemove" @mouseleave="mousedown=原创 2020-11-13 09:57:02 · 1506 阅读 · 0 评论 -
(vue-cli4)electron-vue项目选择文件对话框的坑
最近写的一个基于vue的项目需要打包成桌面应用程序,并且需要点击下载时选择文件夹进行保存,于是用了electron-vue来打包,然后就是各种坑了,我只说几个大坑1:安装electron-vue时的坑因为electron-vue可以和写好的vue项目融合的很方便所以选择用它安装的问题看了这篇文章后解决了一大半点击查看2:调用dialog的问题(一定要分清楚哪里是主进程和渲染进程)//在主进程和渲染进程中都可以调用//主进程const dialog = require('electron').原创 2020-11-04 11:06:56 · 1246 阅读 · 0 评论 -
解决vue项目打包后index.html标签属性没有双引号的问题
记录一个vue项目打包时的大坑,因为需要在index.html里加入一些自定义的东西,结果打包后相关属性都没有双引号,最后各种百度谷歌终于解决了,哈哈(我用的vue-cli4)vue-cli4配置和低于4的配置有些不同,4只用一个vue.config.js基本就行了1.百度上搜索的有些人这么解决的(vue-cli4以下)找到webpack.prod.conf.js文件,加上removeAttributeQuotes: false;new HtmlWebpackPlugin({ filen原创 2020-11-01 12:23:06 · 2522 阅读 · 0 评论 -
elementUI Checkbox,单选框,复选框等隐藏label
elementUI Checkbox,单选框,复选框等隐藏label的办法其他的组件也可以参考这种做法哟,官方没有直接隐藏的方法,只好出此下策<el-checkbox :label="item.id"> <br> //隔这儿加个占位的就行</el-checkbox>...原创 2020-10-15 09:41:57 · 4122 阅读 · 13 评论