![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
23朵毒蘑菇
这个作者很懒,什么都没留下…
展开
-
我一人全干!之二,vue3后台管理系统树形目录的实现。
因为此组件不是树形结构的,所以需要封装成系统需要的树形结构组件。可以使用vue的递归组件。因为使用的是element-plus的ui库,所以首选el-menu组件,一个完整的后台管理系统需要一个树形结构的目录,方便用户切换页面。其中子组件MenuItem.vue代码如下。这样就可以实现一个树形结构的系统目录了。menu.vue代码如下。原创 2023-12-06 17:00:47 · 374 阅读 · 1 评论 -
vue3+vite实现一个后台管理框架,毒蘑菇后台管理。
写后台管理的项目写了很多个了,虽说用的别人的模板,自己专注于自己的业务,保证自己的业务不出错就行了,但是自定义配置又不好去配置,大家用的模板都差不多,用模板自带的业务功能呢后台又得是模板自带的,或者要兼容模板的数据格式,我就想要一个架子模板,其他业务都是我自己来,那么就是这个毒蘑菇 - 管理啦。原创 2023-11-01 10:12:33 · 468 阅读 · 0 评论 -
完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
为什么要这么写,因为主要原因就是改个name的嘛,component.type放的是该组件对象,不能直接改,两个component.type所指向的对象是同一个,所以用一个新对象来。以为解决了,结果报错,报啥错就不说了,我觉得应该是vue用那个弱引用map把组件对象当作key,存了一个其他数据,对象变了就取不到该数据了。其中 visitedViewPaths 是你自己的需要缓存的name列表,现在组件名字由你控制了,就已经解决了。以为没法解决了,结果百度到了一个方法完美解决。总算是解决了这个疑难问题哇。原创 2023-05-26 16:46:38 · 2931 阅读 · 9 评论 -
vue3异步组件怎么获取ref,获取组件实例?曲线救国的方式。
目前的思路是把defineAsyncComponent包装一层,获取import后的promise就行。原创 2022-10-12 15:03:46 · 1264 阅读 · 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 · 629 阅读 · 0 评论 -
解决vue-router跳转后元素内嵌滚动条自动回到顶部的问题。
该路由已经使用了缓存的前提下<keep-alive> <router-view></router-view></keep-alive>当页面跳转,点击返回按钮后发现之前页面里的一个列表元素的滚动条自动回到顶部了,因为该元素设置了固定的宽高并且css设置overflow: scroll; 这样的话,滚动条不是页面级别的,并没有被记录下来,但是该组件又没有发生改变,所以封装个组件记录滚动条位置,页面发生改变就设置会以前的位置就行了。自定义组件.原创 2021-05-25 10:04:18 · 1244 阅读 · 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 · 559 阅读 · 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 · 249 阅读 · 0 评论 -
毒蘑菇导航,感觉不像是毒蘑菇,更像是个树莓了。
毒蘑菇导航一个很好用很特别的导航 毒蘑菇导航毒蘑菇导航,毒蘑菇搜索新加了导航的功能。注册了毒蘑菇搜索账号,会根据自己添加的网站生成一个导航,每个人都可以使用,但是只允许用户本人进行修改。也就是说,只要访问 https://search.dumogu.top/navigate/123456 这个链接就可以看到导航了,那个123456表示的是该导航的用户账号为123456,以后毒蘑菇导航会生成很多相应的导航(跟站搜搜差不多),会有免费视频导航,程序员导航,二次元导航,优秀的个人导航也可以加到推荐导航中原创 2021-04-13 20:38:41 · 1351 阅读 · 1 评论 -
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 · 186 阅读 · 0 评论 -
vue2自定义密码输入框组件,防止浏览器自动填充以及记住密码
做后台管理系统时,登陆后浏览器会弹框提示是否记住密码,而且它记住密码后下次输密码会自动填充,很烦,这里做一个密码输入框的组件,防止浏览器记住密码因为浏览器会对带有text="password"的input进行记住密码,而这里自定义的input不会带有这个属性,而是把输入的密码转换为特殊字符,所以可以解决这个问题。第一步,创建一个PwInput.vue的文件当作组件,里面代码如下<template> <!-- 这里使用了elemntUI的类名,如果没有安装elmentUI则原创 2020-12-24 17:06:29 · 1223 阅读 · 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 · 1488 阅读 · 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 · 1237 阅读 · 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 · 2496 阅读 · 0 评论