![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
23朵毒蘑菇
这个作者很懒,什么都没留下…
展开
-
我一人全干!之二,vue3后台管理系统树形目录的实现。
因为此组件不是树形结构的,所以需要封装成系统需要的树形结构组件。可以使用vue的递归组件。因为使用的是element-plus的ui库,所以首选el-menu组件,一个完整的后台管理系统需要一个树形结构的目录,方便用户切换页面。其中子组件MenuItem.vue代码如下。这样就可以实现一个树形结构的系统目录了。menu.vue代码如下。原创 2023-12-06 17:00:47 · 453 阅读 · 1 评论 -
vue3+vite实现一个后台管理框架,毒蘑菇后台管理。
写后台管理的项目写了很多个了,虽说用的别人的模板,自己专注于自己的业务,保证自己的业务不出错就行了,但是自定义配置又不好去配置,大家用的模板都差不多,用模板自带的业务功能呢后台又得是模板自带的,或者要兼容模板的数据格式,我就想要一个架子模板,其他业务都是我自己来,那么就是这个毒蘑菇 - 管理啦。原创 2023-11-01 10:12:33 · 528 阅读 · 0 评论 -
完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
为什么要这么写,因为主要原因就是改个name的嘛,component.type放的是该组件对象,不能直接改,两个component.type所指向的对象是同一个,所以用一个新对象来。以为解决了,结果报错,报啥错就不说了,我觉得应该是vue用那个弱引用map把组件对象当作key,存了一个其他数据,对象变了就取不到该数据了。其中 visitedViewPaths 是你自己的需要缓存的name列表,现在组件名字由你控制了,就已经解决了。以为没法解决了,结果百度到了一个方法完美解决。总算是解决了这个疑难问题哇。原创 2023-05-26 16:46:38 · 3210 阅读 · 9 评论 -
毒蘑菇变量管理,前端变量管理。
我公司需要使用地图,需要定义几个地图的key,key变了就需要重新部署,也可以后端提供一个接口,我觉得没必要,有人可能会觉得这样不安全,这样key不就暴露了吗,我想说的是前端没有绝对的安全,key只要在前端就会被找出来,存到我们网站js里和您自己的js里完全没区别。不一定是在线网站,您写的html本地页面也可以使用,比如说您给家人写了个导航级别的小网站好让家人方便浏览网页,您去上班了却又觉得页面需要改一下,使用本网站吧,让你不用服务器也能修改本地网页。原创 2023-01-22 16:08:53 · 107 阅读 · 0 评论 -
vue3异步组件怎么获取ref,获取组件实例?曲线救国的方式。
目前的思路是把defineAsyncComponent包装一层,获取import后的promise就行。原创 2022-10-12 15:03:46 · 1372 阅读 · 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 · 993 阅读 · 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 · 1098 阅读 · 0 评论 -
vue滑动切换tab组件,鼠标按住滑动切换,不到200行代码,超级轻量。
因为自己的小站首页需要一个可以滑动切换的显示内容的功能,本来是用的swiper,但是坑,BUG实在是太多了,实在是搞不明白了,就这么个小功能还是决定自己写一个组件。直接贴代码,基本都含有注释<template><div class="touch_tab_container" ref="TabContainerEl" :style="{ height:height+'px', }" @touchmove="(e)=>{原创 2021-08-05 14:35:58 · 646 阅读 · 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 · 132 阅读 · 0 评论 -
用vue2写的登陆页面如何阻止浏览器记住密码,自动填充
网上看了很多方法,基本就是动态改变input的类型。只要类型不是password的input输入框就行了嘛,然后实现输入后把明文变成特殊符号不就行了吗?参考源码原创 2020-12-28 14:42:48 · 835 阅读 · 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 · 245 阅读 · 0 评论 -
vue2自定义密码输入框组件,防止浏览器自动填充以及记住密码
做后台管理系统时,登陆后浏览器会弹框提示是否记住密码,而且它记住密码后下次输密码会自动填充,很烦,这里做一个密码输入框的组件,防止浏览器记住密码因为浏览器会对带有text="password"的input进行记住密码,而这里自定义的input不会带有这个属性,而是把输入的密码转换为特殊字符,所以可以解决这个问题。第一步,创建一个PwInput.vue的文件当作组件,里面代码如下<template> <!-- 这里使用了elemntUI的类名,如果没有安装elmentUI则原创 2020-12-24 17:06:29 · 1260 阅读 · 1 评论 -
谷歌浏览器里部分字体变模糊的问题。
之前也说过这个问题,在一篇文字上阅读短文时发现有点吃力,但是看其他的网站就有瞬间变清晰了的感觉,仔细对比原来是字体在谷歌浏览器里变模糊了,很奇怪,实在不清楚是什么原因。没模糊时是这样的(电脑上截图那个颜色选择器就没了,就只好照了个照片)模糊后是这样的根据我一段一段删除CSS后才发现删除了这句css后backdrop-filter: blur(3px);会变得正常不在模糊,以前解决时是删除的position: sticky; top: 0;这两句,你说position: sticky; top: 0;原创 2020-12-22 09:41:41 · 1885 阅读 · 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 · 1846 阅读 · 1 评论 -
CSS字体容器高度比字体大,这是有字体行高的问题
在写css时,有时给字体大小设置为12px,可是文字所处的容器高度却比12px高,这是因为行高的问题,默认的行高一般都大于字体大小。解决办法如下://给字体所在的容器添加如下cssline-height: 1; //1表示行高为字体大小的一倍,这样就行了推荐一个配色网站 毒蘑菇配色最后附上问题已解决小站 一篇文字...原创 2020-12-17 09:49:15 · 1089 阅读 · 0 评论 -
HTML中img标签会出现下边距,底部距离下一个元素会有一小段距离
有时做网页的时候会遇到一个小坑:img图片会有一个下边距。//CSS这样设置都不管用padding:0;margin:0;参考了一些文章,是这么解释的图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。解决方法如下://给img添加如下cssvertical-align: middle; //在IE6中大原创 2020-12-17 09:30:27 · 1650 阅读 · 0 评论 -
国产配色网站,简单好用,包含在线图片取色工具
之前在网上找配色的网站,基本全是国外的,包括配色,渐变色之类的,花了一两周的时间自己做了个配色网站,本着自己用,结果还不错,现在已经上线好几个月了,分享给大家。毒蘑菇配色...原创 2020-12-16 14:48:49 · 15617 阅读 · 0 评论 -
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 · 1533 阅读 · 0 评论