沁染流年-优快云博客

原创 el-container 各个组件源码

在elemenui 官网上 el-container 是多个组件一起使用的所以这里就一起来分析下。

2023-06-20 14:47:17 284

原创 el-row 源码解析

elemenrui 的 el-row 源码解析

2023-06-20 14:43:49 257

原创根据某个节点的数据，向上查找所有的父级

【代码】根据某个节点的数据，向上查找所有的父级。

2023-03-20 16:28:26 147

原创 Vue中使用mockjs ，自动注册mock服务，代理请求

这样以后所有的mock服务都写在这个mock目录下，一个拦截是一个文件。创建index.js文件 , 目录位置如下图。下图就是拦截的数据，具体的格式可以自定义。把这个文件导入到main.js注册下。比如上面的job.js中的代码如下。index.js代码如下。

2022-11-28 23:22:00 358

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 412

原创动态计算 rem

ss

2022-11-23 11:03:09 88

原创【】qiankun - 基座 vue2 + 子应用1 vue2

1.使用的挂载方法是手动挂载。下面是子应用vue2的配置。

2022-11-23 10:56:06 240

原创 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 481

原创 el-autocomplete 的 fetchSuggestions获取到了数据。但是在获取焦点的情况下点击 clearabl 。清空input 内容后不显示问题

bug

2022-10-31 10:32:57 798

原创小的项目效果

1 . 拓展卡片（类似手风琴）

2022-08-08 20:42:43 142

原创 Vite 初体验

Vite 初体验。

2022-08-07 20:37:11 100

原创前端常用的几种设计模式

设计模式

2022-08-06 20:40:30 432

原创文件上传切片与断点续传

文件上传

2022-08-02 10:12:43 1126 1

原创 axios 中 get请求，出现特殊字符比如[ ]，出现请求错误，比如说路径找不到

axios请求出错

2022-08-01 10:09:30 1471

原创轮播图原生

<!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 144

原创后端给一个菜单的全数组，组合成树类型的菜单

根据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 530

原创手写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 110

原创一些网络的东西

从左往右查找

2022-04-10 11:45:19 92

原创封装防抖函数以及防抖的两种情况

<!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 342

原创 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 624

原创判断文档或者说浏览器有没有滚动到最底部

<!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 397

原创瀑布流实现方法和注意事项

<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 401

原创惰性函数的介绍已经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 265

原创 js对象的一些操作介绍

<!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&lt

2022-04-06 18:59:46 283

原创前端一键换肤换肤简单探索

效果图默认蓝白方法一。如果要控制的范围不多很小的话使用控制类名的切换<!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 728

原创 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&gt

2022-04-05 20:28:17 1162

原创自定义指令实现tab选项卡切换

<template> <div class="home">   <div id="tab" v-cTab="{ activeIndex, activeName: 'active_s' }" > <span v-for="(item, index) i

2022-04-05 19:22:41 351

原创使用mixin做到混入自定义的ui组件(简单版)

1.自定义一个组件叫做mybutton.vue注意两点：1.文字使用插槽2.类名使用动态props都是为了让用户自定义<template> <button type="button" class="mybtn" :class="[d_name]">   <slot></slot> </button>&l

2022-04-05 18:53:56 490

原创面向对象计算器（简单版）

<!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 365

原创原生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 445

原创手动改变路由的值，页面不刷新 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 455

原创前端使用收集

个人收集

2021-12-24 11:36:09 229

原创在使用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 1471 2

原创 vue项目部署到服务器上，使用history路由模式引起二级路由页面丢失的问题解决方法

路由配置第一次可以出现，再划线就丢失1.首先如果想要在前端使用hisroty模式的时候需要后端的配置后盾配置一般固定下面是我们后端的配置，仅供参考其中有关history刷新丢失的问题,在于划线的try file再看前端设置1.切换路由模式，这个省略2.需要在vue.config.js中配置publicPath如图所示如果想要在开发和生产的时候都用history模式就按照上面的判断环境变量设置这里注意在开发的时候，如果你的项目没有做特殊的处理那么想要使用history就的设.

2021-05-21 11:10:48 3718 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 2103

原创 Vue+Element-ui＜根据相同字段合并表格＞

今天项目上遇到一个需求就是还用elemtui 做的表格让后让你把表格上根据某一列中相同的字段去合并起来比如类别名字杀人回忆电影无双一代宗师小星星音乐两个老虎东方红首先你需要把整个的按照类别的字段来排序类别名字电影杀人回忆电影无双电影一代宗师音乐小星星音乐两个老虎音乐东方红<template> <div class="app-conten

2021-04-27 16:12:45 1588

原创 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 3273

原创 elemenu中cellClassName不生效

今天遇到一个问题就是给elemenui中使用DateTimePicker 日期时间选择器想给特定的日期添加样式使用了组件提供的这个属性。但是并没有生效最后使用了在全局添加类名解决了样式添加不上的问题开始的时候是在组件内部使用的样式。所以以后如果发现组件样式添加不上去，可以换到全局中添加...

2021-04-20 13:55:25 1089

空空如也

空空如也