- 博客(53)
- 收藏
- 关注
RSS订阅原创 Vue中使用mockjs ，自动注册mock服务，代理请求
这样以后所有的mock服务都写在这个mock目录下，一个拦截是一个文件。创建index.js文件 , 目录位置如下图。下图就是拦截的数据，具体的格式可以自定义。把这个文件导入到main.js注册下。比如上面的job.js中的代码如下。index.js代码如下。
2022-11-28 23:22:00
248
原创 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
原创 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
原创 el-autocomplete 的 fetchSuggestions获取到了数据。但是在获取焦点的情况下点击 clearabl 。 清空input 内容后 不显示问题
bug
2022-10-31 10:32:57
655
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> <style> .container { width:
2022-04-17 08:55:47
87
原创 后端给一个菜单的全数组，组合成树类型的菜单
根据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
原创 手写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
原创 封装防抖函数以及防抖的两种情况
<!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
原创 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
原创 判断文档或者说浏览器有没有滚动到最底部
<!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
原创 瀑布流实现方法和注意事项
<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
原创 惰性函数的介绍已经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
原创 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<
2022-04-06 18:59:46
220
原创 前端一键换肤换肤简单探索
效果图默认蓝白方法一。如果要控制的范围不多很小的话使用控制类名的切换<!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
原创 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
原创 自定义指令实现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
原创 使用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
原创 面向对象计算器（简单版）
<!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
原创 原生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
原创 手动改变路由的值，页面不刷新 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
原创 在使用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
原创 Vue+Element-ui＜根据相同字段合并表格＞
今天项目上遇到一个需求就是还用elemtui 做的表格让后让你把表格上根据某一列中相同的字段去合并起来比如类别 名字 杀人回忆电影 无双 一代宗师 小星星音乐 两个老虎 东方红首先你需要把整个的按照类别的字段来排序类别 名字电影 杀人回忆电影 无双电影 一代宗师 音乐 小星星音乐 两个老虎音乐 东方红<template> <div class="app-conten
2021-04-27 16:12:45
1514
原创 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
原创 elemenu中cellClassName不生效
今天遇到一个问题就是给elemenui中使用DateTimePicker 日期时间选择器想给特定的日期添加样式使用了组件提供的这个属性。但是并没有生效最后使用了在全局添加类名解决了样式添加不上的问题开始的时候是在组件内部使用的样式。所以以后如果发现组件样式添加不上去，可以换到全局中添加...
2021-04-20 13:55:25
947
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人