前端
沁染流年
可以关注下我的个人知识库 语雀
https://www.yuque.com/wuhaizhongdemanyouzhe
展开
-
el-container 各个组件源码
在elemenui 官网上 el-container 是多个组件一起使用的所以这里就一起来分析下。原创 2023-06-20 14:47:17 · 219 阅读 · 0 评论 -
el-col 源码解析
【代码】el-col 源码解析。原创 2023-06-20 14:44:39 · 198 阅读 · 0 评论 -
Vue中使用mockjs ,自动注册mock服务,代理请求
这样以后所有的mock服务都写在这个mock目录下,一个拦截是一个文件。创建index.js文件 , 目录位置如下图。下图就是拦截的数据,具体的格式可以自定义。把这个文件导入到main.js注册下。比如上面的job.js中的代码如下。index.js代码如下。原创 2022-11-28 23:22:00 · 248 阅读 · 0 评论 -
el-menu 递归组件封装
2.子组件主要是依靠 el-submenu 和 el-menu-item ,真正能够使用index作为路由跳转的其实是el-menu-item。注意: 在template标签上使用v-for,:key="index"不能写在template标签上,因为其标签不会被渲染,会引起循环错误。为了实现多级菜单的递归调用,这样的话就不限制于层级。1.父组件调用,提供一个menu 用来递归。使用的menu的层级格式如下。所以这里是写在下一级的标签上。父组件调用 mymenu。mymenu组件如下。原创 2022-11-28 22:49:56 · 296 阅读 · 0 评论 -
动态计算 rem
ss原创 2022-11-23 11:03:09 · 39 阅读 · 0 评论 -
【】qiankun - 基座 vue2 + 子应用1 vue2
1.使用的挂载方法是手动挂载。下面是子应用vue2的配置。原创 2022-11-23 10:56:06 · 168 阅读 · 0 评论 -
el-select 组件在动态给改变 多选单选的功能时候报错 <transition-group> children must be keyed: <ElTag>
第一种.在 el-select 组件上 设置key 在切换mult 为 true false的时候一起变化。从单选切换到多选 , v-model 确实是初始化为了[] , 但是input依旧显示之前选择的值。这里要注意顺序 以及使用$nextrick 才会生效。第二种.在每次切换状态前。先把之前的数据清空一遍。不一定这种,只要能变化就好。原创 2022-11-16 18:15:03 · 330 阅读 · 0 评论 -
el-autocomplete 的 fetchSuggestions获取到了数据。但是在获取焦点的情况下点击 clearabl 。 清空input 内容后 不显示问题
bug原创 2022-10-31 10:32:57 · 655 阅读 · 1 评论 -
小的项目效果
1 . 拓展卡片(类似手风琴)原创 2022-08-08 20:42:43 · 93 阅读 · 0 评论 -
Vite 初体验
Vite 初体验。原创 2022-08-07 20:37:11 · 63 阅读 · 0 评论 -
前端常用的几种设计模式
设计模式原创 2022-08-06 20:40:30 · 369 阅读 · 0 评论 -
文件上传 切片与断点续传
文件上传原创 2022-08-02 10:12:43 · 999 阅读 · 1 评论 -
axios 中 get请求,出现特殊字符 比如[ ],出现请求错误,比如说路径找不到
axios请求出错原创 2022-08-01 10:09:30 · 1264 阅读 · 0 评论 -
轮播图原生
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { width:原创 2022-04-17 08:55:47 · 87 阅读 · 0 评论 -
后端给一个菜单的全数组,组合成树类型的菜单
根据pid来确定父级,顶级菜单pid为null<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-04-14 14:30:45 · 504 阅读 · 0 评论 -
手写Promise(1)
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="./1.js"></script&g原创 2022-04-13 22:18:40 · 56 阅读 · 0 评论 -
一些网络的东西
从左往右查找原创 2022-04-10 11:45:19 · 66 阅读 · 0 评论 -
封装防抖函数以及防抖的两种情况
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button原创 2022-04-09 16:19:03 · 298 阅读 · 0 评论 -
js动态加载数据瀑布流
实现的功能1.每次下拉到底部会自动加载下一页的数据2.图片逐渐显示首先html<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>原创 2022-04-08 22:46:38 · 584 阅读 · 0 评论 -
判断文档或者说浏览器有没有滚动到最底部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2022-04-07 20:18:59 · 313 阅读 · 0 评论 -
瀑布流实现方法和注意事项
<template> <div class="container"> <div class="wf_item" v-for="(item, index) in list" :key="index"> <img :src="item.thumbURL" alt="" /> </div> </div></template><script>export default {原创 2022-04-07 00:49:18 · 363 阅读 · 0 评论 -
惰性函数的介绍已经dom绑定事件兼容
let getTime = () => { var time = Date.now() getTime = () => { return time } return getTime()}console.log(getTime());console.log(getTime());console.log(getTime());上面的代码固然可以通过闭包啥的来解决但是这里表示一个思想惰性函数是在第一次运行时根据不同的分支 再次修改函数自身下次运行的时候就不需原创 2022-04-06 20:28:18 · 209 阅读 · 0 评论 -
前端一键换肤换肤简单探索
效果图默认蓝白方法一。如果要控制的范围不多很小的话使用控制类名的切换<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</titl原创 2022-04-05 21:33:21 · 686 阅读 · 0 评论 -
vue中使用事件代理并且获取一些参数
<template> <div @click="log($event)"> <ul> <li v-for="(item, index) in list" :key="index" :data-val="item.value"> {{ item.label }} </li> </ul> </div></template><script>原创 2022-04-05 20:28:17 · 1077 阅读 · 0 评论 -
自定义指令实现tab选项卡切换
<template> <div class="home"> <!-- 简单tab --> <!-- .active_s --> <div id="tab" v-cTab="{ activeIndex, activeName: 'active_s' }" > <span v-for="(item, index) i原创 2022-04-05 19:22:41 · 294 阅读 · 0 评论 -
使用mixin做到混入自定义的ui组件(简单版)
1.自定义一个组件叫做mybutton.vue注意两点:1.文字使用插槽2.类名使用动态props都是为了让用户自定义<template> <button type="button" class="mybtn" :class="[d_name]"> <!-- BUTTON --> <!-- 这里的文字需要使用插槽,让用户自定义 --> <slot></slot> </button>&l原创 2022-04-05 18:53:56 · 429 阅读 · 0 评论 -
面向对象计算器(简单版)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl原创 2022-04-03 16:38:34 · 316 阅读 · 0 评论 -
原生axajx以及类jquery的简单封装
1.原生<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生ajax原创 2022-04-03 12:35:26 · 401 阅读 · 0 评论 -
手动改变路由的值,页面不刷新 Avoided redundant navigation to current location
1.功能需求一个列表点击不同的项,请求不同的数据,同时会改变页面路由的参数,这样手动刷新的时候就可以直接从路由取值了2.方法使用的是路由的replace 或者 push ,把路由设置为当前路由querty为没次改变的参数但是这样会在控制台保一个错误Avoided redundant navigation to current location首先这个错误不会影响你的功能使用,因为这个表示你又导航到当前理由了如果项解决的话可以用一下方法const originalPush = VueRou原创 2022-03-17 20:26:37 · 389 阅读 · 0 评论 -
前端使用收集
个人收集原创 2021-12-24 11:36:09 · 192 阅读 · 0 评论 -
在使用v-show的来切换两个独立的echarts的时候会出现显示不全的问题,也就是宽度只有100px
<template> <div id="app"> <div v-show="fl" id="myChart" :style="{width: '100%', height: '300px'}"></div> <div v-show="!fl" id="myChart2" :style="{width: '100%', height: '300px'}"></div> <button @click="chan原创 2021-07-07 18:41:25 · 1295 阅读 · 2 评论 -
vue项目部署到服务器上,使用history路由模式引起二级路由页面丢失的问题解决方法
路由配置第一次可以出现,再划线就丢失1.首先如果想要在前端使用hisroty模式的时候需要后端的配置后盾配置一般固定下面是我们后端的配置,仅供参考其中有关history刷新丢失的问题,在于划线的try file再看前端设置1.切换路由模式,这个省略2.需要在vue.config.js中配置publicPath如图所示如果想要在开发和生产的时候都用history模式就按照上面的判断环境变量设置这里注意 在开发的时候,如果你的项目没有做特殊的处理那么想要使用history就的设.原创 2021-05-21 11:10:48 · 3345 阅读 · 4 评论 -
vue中导出后端的zip文件。zip文件的数据是以流的形式传递。后端返回的类型为application/octet-stream
后端返回的类型为首先前端设置axios里面要设置一个responseType为blob```javascript/*导出excel和json的工具函数*/import dayjs from 'dayjs'const downloadFiles = (data) => { // data为流数据 let blob = new Blob([data], { type: 'application/zip' }) let url = window.URL.createObjec原创 2021-05-19 17:20:37 · 1996 阅读 · 0 评论 -
Vue+Element-ui<根据相同字段合并表格>
今天项目上遇到一个需求就是还用elemtui 做的表格让后让你把表格上根据某一列中相同的字段去合并起来比如类别 名字 杀人回忆电影 无双 一代宗师 小星星音乐 两个老虎 东方红首先你需要把整个的按照类别的字段来排序类别 名字电影 杀人回忆电影 无双电影 一代宗师 音乐 小星星音乐 两个老虎音乐 东方红<template> <div class="app-conten原创 2021-04-27 16:12:45 · 1514 阅读 · 0 评论 -
element-ui中的表格el-table滚动条样式修改
这是修改了全局的滚动风格::-webkit-scrollbar { width: 6px; height: 8px; background-color: #ebeef5;}::-webkit-scrollbar-thumb { // border-radius:2px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); back.原创 2021-04-21 10:34:25 · 3214 阅读 · 0 评论 -
elemenu中cellClassName不生效
今天遇到一个问题就是给elemenui中使用DateTimePicker 日期时间选择器想给特定的日期添加样式使用了组件提供的这个属性。但是并没有生效最后使用了在全局添加类名解决了样式添加不上的问题开始的时候是在组件内部使用的样式。所以以后如果发现组件样式添加不上去,可以换到全局中添加...原创 2021-04-20 13:55:25 · 947 阅读 · 0 评论 -
给组件的的特定事件中传递默认的参数
打个比方使用elementui 的 select 组件该组件有一个方法这里可以获取到选中的值比如我们绑定为@change="handle"handle(val){console.log(val) // 这里只能接受䘝形参如果你邪恶了hadle('另一个'),那么会出现覆盖}那么怎样传递除了默认参数之外的值呢,我们需要使用立即执行函数@change="(event)=>{handle(event,value) // 这个value就是第二个字,加入你使用了循环啥的就可以获取到原创 2021-03-29 16:55:23 · 155 阅读 · 0 评论 -
elementui 中 el-dropdown-menu__item加点击事件无效
在element中有些组件,你直接加点击事件无效比如这里这个handle事件不会触发这时候我们需要加修饰符.native这样就可以正常点击触发了如果遇到别的同样的情况,可以首先考虑这个原创 2020-12-10 17:43:02 · 2130 阅读 · 0 评论 -
利用nodejs搭建一个基础的服务器。基础到尘埃的那种
首先创建两个js文件。分别是app.js和router.js把这两个文件放在同一个目录下。最好不要有中文路径app.js// 导入express模块,第三方const express = require('express') // 创建服务器实例const app = express()// 配置跨域中间件 第三发插件const cors = require('cors')app.use(cors)// 配置解析表单的中间件// 注意如果要获取url-encoded格式的请求原创 2020-12-02 09:32:47 · 175 阅读 · 0 评论