- 博客(263)
- 资源 (15)
- 问答 (7)
- 收藏
- 关注
RSS订阅原创 vue中动态引入图片为什么要是require，不用会怎么样
1. src引入的资源是静态引入时，vue会自动编译解析src的资源，因此打包过后的图片地址和资源地址一致，图片可显示；2. 使用v-bind引入src资源时，src时作为动态资源引入的，使用时需要使用打包编译后的路径，动态打包地址和默认打包地址不一致，访问不到图片地址。
2023-02-24 13:50:05
198
原创 一个视频说清整个英语语法体系(重塑你的语法认知框架)
绝大多数句子：什么 怎么样几乎所有的英语句子：主语+谓语广义 “动作”：语法上的“动词”主语(人或物) + 谓语(“动作”发生了什么事情)
2023-02-17 11:08:22
490
原创 由手机号正则引发的思考，正则属性 lastIndex
这个正则我们平时用来验证手机号的，好像也看不出什么毛病，把正则放到浏览器控制台，简单代入，可以对手机号正确验证。，regs.lastIndex 为 4 ，因为匹配到了1，所以从2开始，这里的2索引为4。，regs.lastIndex 为 1 ，因为匹配到了1，所以从2开始，2的索引为1。，regs.lastIndex为0，因为没有匹配到1，索引从0开始。1.把提前打印的去处即可，但这种方法发生bug 的概率还是挺高的。才对，为什么我输入了11位手机号却提示。根据文档我们在写个类似的demo看。
2022-12-26 11:39:21
729
原创 vue纯手写思维导图，拒绝插件(cv即用)
左侧A盒子，右侧F盒子用flex布局B/C/D竖着排列，右侧3个div分别用伪元素分别做3根横线，F盒子设置。竖线，这样一拼接就感觉像是一个思维导图了，理论先这样，但是还没有想到B盒子的左侧横线和F盒子竖线交叉之后，上面圆圈多余的部分怎么去除。有这么个需求，按照层级关系，把表格放在思维导图上，我第一时间想到用插件，但是找了好久都没有找到比较合适的插件，决定自己手写一个。模拟数据 带有层级关系的格式，id是唯一的，这样做为了后期可能操作表格的时候方便找到唯一的表格。刚开始的做法是直接设置子集的。
2022-12-02 12:43:35
3586
3
原创 vue自定义指令 v-longpress长按触发方法
新建一个vue2项目，在components里面新建一个longpress.vue文件设置按钮 指令，3000是毫秒参数-- 单位毫秒 : 3000 -- > < button v - longpress : 3000 = "longpress" > 长按 < / button > < / div > < / template > < script > export default {return {};console . log("长按指令生效--" , e);
2022-12-02 09:58:30
571
原创 vue自定义指令 v-debounce 防抖
使用场景：点击查询按钮 或者 点击提交保存按钮 的时候点击次数过多，会多次提交，为了避免这种情况发生，我们可以做个防抖，点击一次后 第二次需要间隔一定的时间才能再次点击。新建一个vue2项目，以下代码cv即可使用< template > < div > < button v - debounce = "debounceClick(1000)" > 防抖 < / button > < / div > < / template > < script > export default {
2022-11-30 23:58:11
883
原创 vue自定义指令 v-copy 复制
新建一个项目 按照以下方式把对应的文件改造下就可以了 (cv即食)在vue 的项目里 当我们想直接在标签上加入。把自定义指令引入到main.js里面。就可以复制想要复制的内容该怎么做？vue自定义指令 copy。
2022-11-30 23:49:23
686
原创 使用element-ui el-select 做下拉 全选+搜索 功能
有时候，需要用到下拉列表 全选和搜索，并且鼠标放入的时候有下拉列表展示，以前的做法是 check + el-input搜索结合做个组件，现在这个方法直接使用el-select 就能做到这个需求功能：有搜索+有全选+有取消+有确认请求+有鼠标移入自动展示功能。使用element-ui el-select 做下拉 全选+搜索 功能。
2022-11-01 16:58:25
2984
原创 element table表头太宽 更新数据后 跳转到 滑动前的 原始位置
element table表格表头太宽了，我们处理好数据后要是直接赋值的话，有时候表格不渲染最新数据。我们用doLayout()后能正常渲染最新数据，但是表格会跳到最左边，此时就需要用到一下的功能了，
2022-11-01 15:09:38
100
原创 输入内容后，输入框宽度根据内容自动撑开contenteditable=“true“
实在想不到怎么做了，终极大招：百度一下，结果还整知道了方法使用 contenteditable=“true”，但是百度找到的方法只能输入内容后宽度自动变宽，这个需求还不够用，我自己还得加入清空方法。1.使用element-ui 的el-input宽度设置auto (不可行)2.使用input输入框宽度设置 auto (不可行)产品需求：输入内容后，输入框宽度根据内容自动撑开。不需要内容的时候把内容清空掉。...............
2022-08-06 17:13:41
1261
1
原创 点击某个dom元素,让dom元素全屏显示
产品的需求里有个全屏的功能，我在网上找了一下这种全屏的方法，还真有，不过下载新版本的。尽量下载这个版本，最新版本可能会报错或者不成功。好像用的有些问题，版本降低到。
2022-07-26 20:54:48
739
原创 前端vue项目导出表格
项目里经常用到表格导出，但是表格导出一般都是后台写的接口，今天后台想偷懒不想写表格接口了，于是我想了下看我们自己前端能不能做个导出的功能，在网上搜了一下，还真有这种插件。以下是代码示例，要是导出不成功，按照我这边的版本下载试下。于是照葫芦画瓢把网上的方法搬下来用在项目里。...
2022-07-26 20:34:59
846
2
原创 sortablejs拖动排序组件 使用方法
sortablejs拖动排序组件 使用方法，拖动排序后得到的值是唯一值数组['(','4','-','1',')','*','3']这样也可以做简易计算器拼接好了后使用join(“”)拼接起来。然后使用eval把值代入进去计算。
2022-07-25 21:39:48
501
原创 Element-ui的date日期时间组件的bug 报错 prop‘s value. Prop being mutated: “placement“
今天本来想用下Element-ui的date日期时间组件，居然发现使用date组件后一直报错，大概意思是和props相关，但是我的页面组件也没有props，我去看了一下源码发了问题所在，先看报错吧 很重要的一段：`use a data or computed property based on the prop's value. Prop being mutated: "placement" `...
2022-07-17 20:44:26
1719
3
原创 Vue项目中封装过axios
Vue项目中封装过axios通过.then、.catch()处理这块需要跟服务端约定接口响应全局码，从而统一处理登录校验失败，无权限，成功等结果比如有些服务端对于登录校验失败，无权限，成功等返回的响应码都是200，在响应体内返回的状态码分别是20001，20002，10000，在then()中处理......
2022-07-17 00:08:57
188
原创 vue项目里 使用Element table 把多个表格合并追加到右侧，更简洁版本(cv即食)
vue项目里 使用Element table 把多个表格合并追加到右侧，更简洁版本
2022-07-16 23:36:57
544
原创 element ui dropdown下拉 复选框+全选+搜索功能 组件 (开箱即食)
dropdown下拉 复选框+全选+搜索功能 组件可以传入默认值默认选中可以全选可以搜索点击确定把选中的值抛出
2022-07-12 15:29:41
2536
原创 vue项目 element表格数据行转列数据互转
后台返回的格式一个人名里面带有这个人的所有信息，我们需要数据转化(俗称行转列 ) 这个平时可以用在时间日期上比较多，这个案例只是把这个写法记录下来
2022-07-01 01:11:16
1567
原创 js数字处理：保留几位小数,最大值,最小值
js数字处理：保留几位小数,最大值,最小值function checkDigit(val) { // 调用案例 checkDigit({ number: " 1f发1,a.g5.1A62ag84", max: 100, min: -1 ,len: 2 }) let { number: number = "", // 需要校验的数字； len: len = "all", // 保留小数点后几位( 都保留传'all' ) max: max = 9999999, // 最大值
2022-05-19 19:18:20
761
1
原创 element-ui upload 组件 上传多个文件，只调用一次接口
element-ui upload 组件 上传多个文件，只调用一次接口element-ui upload 组件 要是一次上传多个文件，会自动请求多次，而现在想要上传多个文件放在一个请求里，可以把多个文件 fileList 合并在一个FormData里面，利用防抖策略，上传多个文件后，只调用最后一次debounce() 去调用上传接口<template> <div> <div class="dragUpload"> <el-upload
2022-05-19 10:56:30
2771
原创 js sleep 休眠延迟程序
js sleep 休眠延迟程序当我们请求数据后台返回的太快，loading效果一点看不出来可以试试弄个休眠延迟程序试试方法一：这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。 function sleep (delay) { var start = (new Date()).getTime(); while ((new Date()).getTime() - start < delay) {
2022-04-26 15:54:16
795
原创 vue项目 数字自动增加 并转化成带有分号的数字
<template> <div class="headers"> <CountTo :startVal="0" :endVal="传入数字" /> </div></template><script>import CountTo from "@/components/CountTo/CountTo.vue";components: { CountTo,}</script>s
2022-04-18 15:39:15
747
原创 Ant Design Vue 使用table 设置 Tooltip 提示文字
Ant Design Vue 使用table 设置 Tooltip 提示文字tepmlate部分<Tooltip> <template #title> <div style="width: 120px; color: #ffffff"> 提示内容 </div> </template> <div style="cursor: pointer; width: 100%"> 分数<qu
2022-04-14 20:31:07
1706
原创 vue 输入框输入任意内容返回数字
vue 输入框输入任意内容返回数字输入任意内容只返回数字<!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.
2022-03-29 20:16:58
943
原创 vue项目路由拦截守卫 拦截后一直死循环问题 解决思路
vue项目路由拦截bug 解决思路今天把接口对接完了，查看了一下项目的文件，发现了一个漏洞，我们是根据权限来返回员工的菜单列表嘛，但是权限等级较低的员工 有了高权限的路由还是能跳过去，只是没数据。按理说权限等级低的员工不能访问。于是在路由拦截守卫里找原因，条件判断有token 路由不是login，这种情况是正常通行的。如果这个即将跳转的路由不是在菜单里面的话就不让它跳转过去，于是把即将跳转的路由获取到to.path。把菜单列表路由获取到，因为带有children 所以要扁平化成一维数组silderLis
2022-03-15 23:29:05
1191
原创 如何取消请求
main.js// 在路由拦截里面设置：路由切换的时候，当前页面的请求还未请求完 全部中断请求router.beforeEach(async (to, from, next) => { window.GlobalCancelReq = function (val = false) { if (!val) { if (window._axiosPromiseArr === undefined) { window._axiosPromiseArr = []
2022-01-05 23:40:26
632
原创 Promise 存在的意义：
Promise 存在的意义：异步问题同步化解决方案 只是顺便解决了回调地狱问题 <script> let p = new Promise((resolve, reject) => { setTimeout(() => { console.log('晚上好2'); }) }) p.then((res) => { console.log(res); }) console.
2021-12-17 00:31:08
210
原创 vue 里面 new Blob 流文件下载 完整步骤 直接享用
流文件下载 封装成方法，在utils文件夹下：后期使用直接 引入就可以直接使用@/utils/stream.js export default function ({ url, // 请求地址 method, // 请求类型 data, // 请求参数 fileName, // 请求名字 suffix // 文件后缀 }) { // axios请求 axios({ url, method,
2021-12-14 14:29:31
1185
原创 vue 路由 使用 require.context 一行代码 自动导入 所有路由文件
项目router路由引入js文件数目太多怎么办？可以使用 require.context 优化项目代码在 component 文件夹下 N个路由文件src/router/component/about.jsexport default [xxxx] // 用 export default 导出在router文件里引入自动导入方法src/router/index.js// 自动引入路由 方法import { importAllFn } from "@/utils/importAll
2021-12-05 16:43:31
911
原创 对象里根据value排序？
问：对象里根据value排序？ let obj = { 小明: 60, 小红: 48, 大白: 59, 小李: 70, 大王: 80, 小吴: 78 } →→→ 展开答案 let obj = { 小明: 60, 小红: 48, 大白: 59, 小李: 70, 大王: 80, 小吴: 78 } obj.arr = [] // 不增加新变量了，直接在obj里面加个 arr数组
2021-12-03 17:59:49
404
原创 js 数据填充 排序
问题描述：后台返回给前端的时间(ywDate)是无序的，有的营销部门周 可能是断断断续续的需求：1.本部门没有的日期(snDate) 但在其他部门有，就需要把其他部门的时间日期(ywDate) 填充到这个部门 并设置(sale)为 02.在部门里面 按照时间 从小到大的顺序排序// 后台返回的代码var obj = { 营销一部: [ { ywDate: '2020年 第1周', sale: 50 }, { ywDate: '2021年 第14周',
2021-12-03 12:13:56
228
原创 简单粗暴地理解js原型链--js面向对象编程
简单粗暴地理解js原型链–js面向对象编程原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看，效果极好。不要纠结于那一堆术语了，那除了让你脑筋拧成麻花，真的不能帮你什么。简单粗暴点看原型链吧，想点与代码无关的事，比如人、妖以及人妖。1）人是人他妈生的，妖是妖他妈生的。人和妖都是对象实例，而人他妈和妖他妈就是原型。原型也是对象，叫原型对象。2）人他妈和人他爸啪啪啪能生出一堆人宝宝、妖他妈和妖他爸啪啪啪能生出一堆妖宝宝，啪啪啪就是构造函数，俗称造人。3）
2021-11-16 16:37:09
51
原创 前端工作中的一些解决问题的方法，可以参考一下
(转自网路，方便实用)1、名称为纯英文数字等不换行问题span { word-wrap: break-word; word-break: break-all;} 2、各浏览器关于渐变色的适配.main { background: linear-gradient(left, #055798, #01b1f8); background: -webkit-linear-gradient(left, #055798, #01b1f8); background: -ms-lin
2021-11-07 16:05:28
1455
原创 Node模块化加载机制,干货版
Node.js模块化机制，使用npm下的第三方包，我们在项目中引入第三方包：let x= require(“包名”) ，那么require方法加载第三方包的原理是什么呢？1.require(“包名”) 优先在加载该包的模块的同级目录node_modules中找第三方包举例jquery：let $ = require("jquery")引入 jquery,去node_modules目录下找 jquery找到后，在jquery目录下找 package.json在 package.json里找mai
2021-10-25 00:46:36
70
原创 exports 和 module.exports 你要了解一些概念和为什么
默认导出空对象：在没有任何内容导出的时候，默认会导出 module.exports 一个空对象 “{}”require获取文件路径时，可以不加后缀名，默认的后缀名是"js"exports 和 module.exports 相等原因系统默认设置：exports = module.exports ，把exports 的内存地址指向module.exports的内存地址这两个导出都是在同一个对象里面，说明 exports 和 module.exports 指向的是同一个对象修改导出的值,
2021-10-25 00:08:59
306
原创 Element-UI 两个 日期选择器 联动选择日期
Element-UI 两个 日期选择器 联动选择日期<template> <div> <div class="timesel"> <span>开始时间：</span> <el-date-picker v-model="formL.startTime" type="date" placeholder="选择日期" :pickerOptions=
2021-10-21 16:35:43
975
原创 宏任务 微任务 同步任务 setTimeout，setInterval，promise.then和process.nextTick()的执行顺序。
1.关于javaScript的单线程：应用场景决定了javascript的单线程的特性，假如javascript是多线程，同时进行：一个线程对某一个dom进行添加属性操作，另一个线程对该线程进行删除操作，那么浏览器该听哪一个。这就决定javascript必须是单线程。web worker:是一个多线程。它出现的目的是当浏览器有大量密集的计算时候或者响应时间很长的运算时候，页面出现卡顿，可以起一个worker子线程，主线程和worker线程互不干预，这样页面就可以进行点击之类的操作，但这个子线程不能操作D
2021-10-20 17:37:27
1098
原创 vue-element-admin 有时候克隆失败 安装失败 启动不起来 报错咋办？
vue-element-admin 安装的时候失败 提示 tui-editor，可以试试这样做，在package.json里面 把 “tui-editor”: “1.3.3”, 删掉，在npm install，其他的都安装好了 在单独安装这个： “tui-editor”: “1.3.3”，亲测有效...
2021-10-19 23:00:18
1847
电脑标签clover 3.5.2.计算机页面打开呈现浏览器样式 (仅供学习使用)
2020-03-29
vue项目里面：vite配置和webpack配置 用大白话说 有啥不一样的吗？
2021-11-05
vue项目里面：vite配置和webpack配置 用大白话说 有啥不一样的吗？
2021-10-17
要弄个前端vue新项目，我怎么知道webpack配置哪些东西？
2021-10-17
我怎么知道webpack需要配置哪些东西？
2021-10-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人