![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
项目记一笔
前端酱紫
这个作者很懒,什么都没留下…
展开
-
前端项目文件夹字母大小写改变后,git 监听不到
需要注意的是,如果你的代码库已经有多个开发者在使用,修改 Git 配置可能会导致一些问题,因为其他开发者可能已经依赖了文件夹大小写不敏感的行为。Git 默认是不会监听文件夹字母大小写的改变的,因为在大多数操作系统中,文件夹的大小写是不敏感的。我们在开发前端项目的时候,刚开始用的首字母大写About,后期象改成小写about,发现文件夹首字母改成小写后,git没有监听到,没有提示发生了改变。这样 Git 就会重新识别文件夹大小写了。这样 Git 就会对文件夹大小写敏感了。原创 2023-06-21 13:07:30 · 514 阅读 · 0 评论 -
vue自定义指令 v-debounce 防抖
使用场景:点击查询按钮 或者 点击提交保存按钮 的时候点击次数过多,会多次提交,为了避免这种情况发生,我们可以做个防抖,点击一次后 第二次需要间隔一定的时间才能再次点击。新建一个vue2项目,以下代码cv即可使用< template > < div > < button v - debounce = "debounceClick(1000)" > 防抖 < / button > < / div > < / template > < script > export default {原创 2022-11-30 23:58:11 · 2728 阅读 · 0 评论 -
点击某个dom元素,让dom元素全屏显示
产品的需求里有个全屏的功能,我在网上找了一下这种全屏的方法,还真有,不过下载新版本的。尽量下载这个版本,最新版本可能会报错或者不成功。好像用的有些问题,版本降低到。原创 2022-07-26 20:54:48 · 1545 阅读 · 0 评论 -
前端vue项目导出表格
项目里经常用到表格导出,但是表格导出一般都是后台写的接口,今天后台想偷懒不想写表格接口了,于是我想了下看我们自己前端能不能做个导出的功能,在网上搜了一下,还真有这种插件。以下是代码示例,要是导出不成功,按照我这边的版本下载试下。于是照葫芦画瓢把网上的方法搬下来用在项目里。...原创 2022-07-26 20:34:59 · 1416 阅读 · 3 评论 -
sortablejs拖动排序组件 使用方法
sortablejs拖动排序组件 使用方法,拖动排序后得到的值是唯一值数组['(','4','-','1',')','*','3']这样也可以做简易计算器拼接好了后使用join(“”)拼接起来。然后使用eval把值代入进去计算。原创 2022-07-25 21:39:48 · 1051 阅读 · 0 评论 -
Vue项目中封装过axios
Vue项目中封装过axios通过.then、.catch()处理这块需要跟服务端约定接口响应全局码,从而统一处理登录校验失败,无权限,成功等结果比如有些服务端对于登录校验失败,无权限,成功等返回的响应码都是200,在响应体内返回的状态码分别是20001,20002,10000,在then()中处理......原创 2022-07-17 00:08:57 · 294 阅读 · 0 评论 -
element ui dropdown下拉 复选框+全选+搜索功能 组件 (开箱即食)
dropdown下拉 复选框+全选+搜索功能 组件可以传入默认值默认选中可以全选可以搜索点击确定把选中的值抛出原创 2022-07-12 15:29:41 · 6942 阅读 · 1 评论 -
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 · 1334 阅读 · 1 评论 -
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 · 1561 阅读 · 0 评论 -
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 · 2707 阅读 · 0 评论 -
vue项目路由拦截守卫 拦截后一直死循环问题 解决思路
vue项目路由拦截bug 解决思路今天把接口对接完了,查看了一下项目的文件,发现了一个漏洞,我们是根据权限来返回员工的菜单列表嘛,但是权限等级较低的员工 有了高权限的路由还是能跳过去,只是没数据。按理说权限等级低的员工不能访问。于是在路由拦截守卫里找原因,条件判断有token 路由不是login,这种情况是正常通行的。如果这个即将跳转的路由不是在菜单里面的话就不让它跳转过去,于是把即将跳转的路由获取到to.path。把菜单列表路由获取到,因为带有children 所以要扁平化成一维数组silderLis原创 2022-03-15 23:29:05 · 1718 阅读 · 0 评论 -
如何取消请求
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 · 757 阅读 · 0 评论 -
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 · 1406 阅读 · 0 评论 -
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 · 1098 阅读 · 0 评论 -
js 数据填充 排序
问题描述:后台返回给前端的时间(ywDate)是无序的,有的营销部门周 可能是断断断续续的需求:1.本部门没有的日期(snDate) 但在其他部门有,就需要把其他部门的时间日期(ywDate) 填充到这个部门 并设置(sale)为 02.在部门里面 按照时间 从小到大的顺序排序// 后台返回的代码var obj = { 营销一部: [ { ywDate: '2020年 第1周', sale: 50 }, { ywDate: '2021年 第14周',原创 2021-12-03 12:13:56 · 317 阅读 · 0 评论 -
前端工作中的一些解决问题的方法,可以参考一下
(转自网路,方便实用)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 · 1780 阅读 · 0 评论 -
腾讯轻量云服务器 安装宝塔登录 教程
腾讯清凉云服务器 安装宝塔登录 教程买了一个轻量云服务器 练手的,安装了一个宝塔面板 操作方便些进入服务器,点击更多 管理重置一下系统的密码:充值完密码后 点击登录弹出 远程登录命令窗口 ,输入命令:su root输入刚刚重置的密码安装宝塔:命令:yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.原创 2021-09-23 14:39:40 · 681 阅读 · 0 评论 -
只允许输入正常数字,过滤多个小数点和字符,去除第二个小数点
输入框输入数字过滤多个小数点,去除第二个小数点,获取正常数字使用场景:在input输入数字的时候,可以使用这个方法限制用户只能输入正常数字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-08-26 03:33:54 · 624 阅读 · 0 评论 -
设计稿750px 配置rem
设计稿750px 配置rem获取设备宽度750 等于750<320 等于320设置字体大小 设备宽度/7.5 1rem=100像素// 设计稿是750px// 设置1半的宽度,就是375px// 1rem == 100px的设计稿宽度// 整个屏幕750px宽度7.5rem,屏幕一半的宽度375px就是3.75rem,100px等于1rem调用window.onresize = function(){ 调用 }function remSize() {原创 2021-08-01 10:40:59 · 3385 阅读 · 0 评论 -
commonJs规范,ES6规范 exports require import 使用
commonJs规范,ES6规范 区别 和使用commonJs规范:exports module.exportsrequire()ES6规范:export export default {}import xxx from './components'import { xxx } from './components'@import " "原创 2021-05-25 17:14:09 · 526 阅读 · 0 评论 -
购物车选中商品优化
购物车选中商品优化原来:点击选中后,会发送请求,请求成功才会选中打钩。结果:选中速度慢,用户体验不友好现在:点击后,直接选中,把点击之前的结果保存一份,若请求成功,还是选中,可以不管,若请求失败,恢复保存之前的状态。结果:用户选中速度快,体验较好...原创 2021-05-07 13:55:02 · 121 阅读 · 0 评论 -
小程序页面跳转bug优化记录,getCurrentPages 奇迹妙用解决问题
团餐地址跳转bug优化记录需求描述:我同事A做的是团餐页面,我做的是团餐地址管理页面,在团餐页面点击收货地址 进入我的地址管理列表页面选择地址后把地址信息address带到团餐页面,点击返回 回到首页。过程1:我和A说我想把带过去的数据存到localstorage里面去,在使用 wx.navigateTo 跳转到团餐页面,在团餐页面onShow 里定义一个方法去检查 localstorage里面有没有我存的数据 address,有的话读取localstorage的address 重新给收货地址赋值,没原创 2021-04-22 20:00:21 · 643 阅读 · 0 评论 -
vue 瀑布流 页面写法思路
vue 瀑布流 页面写法思路请求到数据后把数据按照奇数偶数分成A,B两列,A列放在左边盒子,B列放在右边盒子,分页请求到新数据后,重新按照这个思路分成两列放在左右就行了。可能会遇到某一边多出一项,此时就要做一个判断了分页完了后,两边高度相减要是大于一项的高度,就把最后一项放在另一边...原创 2021-04-01 09:17:38 · 230 阅读 · 0 评论 -
商品浏览记录分页,相同日期商品数据合并 demo
商品浏览记录分页,相同日期商品数据合并 demo。用户在商城浏览过的商品都会被记录下来,进入浏览记录可以看到浏览过的商品,浏览记录是分页的,而在分页之后要把新情求的数,根据相同日期和之前的数据做个对比相同日期的数据要放在以前符合用户浏览习惯。下方有代码demo和结果代码: <script> let arr1 = [{ // 第一页数据 date: '2021年03月30日', browseRecords: [原创 2021-03-31 21:02:48 · 206 阅读 · 0 评论 -
vue横屏分页加载 vue 分页 左右滑动分页 横着分页
vue横屏分页加载<template > <!-- 5.钢化膜 --> <div class="steelfilm"> <div class="steelfilm-top"> <div class="title"> <img src="@/assets/img/nl-member-privilege/title-left.png" alt=""原创 2021-02-27 23:00:55 · 1904 阅读 · 2 评论 -
vue小程序项目 pdf下载解决方案
vue小程序项目 pdf下载解决方案,过程:先说结果:直接把pdf下载链接给到用户就行了,小程序里面下载真心不好下载,京东微信小程序 也不能下载只能查看和发送邮箱1.iframe标签,未配置域名无法打开非业务域名的地址,让后端配置 小程序下载域名,2.配置域名后 ios可以看 安卓只能下载不能看3.pdfjs-dist插件 也是 ios可以看 安卓只能下载不能看4.pdf-vue插件还不能渲染5.在h5通过navigateTo跳转传pdf链接 带到小程序里面,小程序页面加载的时候使用小程原创 2020-12-29 23:45:31 · 787 阅读 · 0 评论 -
element-ui 表格 修改后, 表格里面的数据 页面不实时更新问题 完美解
vue 项目 element-ui 表格 修改 表格里面的数据后 页面不更新问题 完美解决方案想要达到的效果:点击"更多"后,"更多"隐藏,删除和补仓显示;(有时间可全部看完,没时间直接看做法5)例如:自己用 this.show、在百度上找的方法 set 都没能成功最下面有代码demo页面初始化:目标效果做法1:给"更多"绑定一个 v-show='show' 把 this.show 设置为true ,点击"更多"按钮后 在点击事件里面把this.show 设置为false原创 2020-06-10 02:15:28 · 31801 阅读 · 16 评论 -
vue 事件总线 eventbus 你学会了吗?
vue 事件总线 eventbus前言vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件;子传父通过$emit发送事件,并携带数据给父组件。而有时两个组件之间毫无关系,或者他们之间的结构复杂,如何传递数据呢?这时就要用到 vue 中的事件总线 EventBus的概念正文EventBus的简介EventBus又称事件总线,相当于一个全局的仓库...原创 2020-05-21 15:32:47 · 205 阅读 · 0 评论 -
底部标签,点击标签 通过类名切换背景图
html:原本标签:<div :class="{'active_':!aActive}" >现在标签:<div :class="{'active_':!aActive,'active__new':aActive}" >通过类名切换不同标签里面的背景图css:.active_ { //第一张背景图 z-index:100; background: ur...原创 2020-04-06 12:06:22 · 131 阅读 · 0 评论 -
导入图片用require 不能直接导入这下不会弄错了
导入图片用require img: [ //错误导入 { img:"../../assets/pice11.png" title: "是图片1" }, //正确导入 { img: require("../../assets/pice11.png"), ...原创 2020-08-03 16:43:41 · 340 阅读 · 0 评论 -
导入图片用require 不能直接导入
导入图片用require img: [ //错误导入 { img:"../../assets/pice11.png" title: "是图片1" }, //正确导入 { img: require("../../assets/pice11.png"), ...原创 2020-04-06 11:58:45 · 1079 阅读 · 0 评论 -
导出包 需要做两项设置
修改ip:修改包名地址(这里将会成为地址的一级目录) :原创 2020-04-06 11:59:09 · 64 阅读 · 0 评论 -
右侧上下 滑块
右侧上下滑动 [要有父子两个标签,把下面的代码放在子标签样式里面] // 上下滑块 &::-webkit-scrollbar { width: 15px; } &::-webkit-scrollbar-track { border-radius: 7.5px; background-color: rgba(2, 2, 29, 0.4); ...原创 2020-04-06 11:59:19 · 229 阅读 · 0 评论 -
使用 element 写轮播图
html <div class="lunbo-box"> <el-carousel indicator-position="none"> <el-carousel-item class="lunbo-box-item" v-for="(item,index) in abc_img" :key="...原创 2020-04-06 11:59:30 · 1052 阅读 · 0 评论 -
{技术操作} v-for循环 直接设置图片路径图片不显示如何解决?
v-for循环 直接设置图片路径图片不显示如何解决?循环的时候这是设置src值为item.preview 是显示不出图片的,需要在src前面加个冒号 {或者是在data里面的img路径前面加 require(‘imgUrl’) }...原创 2020-04-06 12:00:24 · 587 阅读 · 0 评论 -
{技术操作} element 表单验证
###html:rules=“rules” ref=“ruleForm” 这两个很重要然后在每个 el-form-item 里面设置prop属性为 ruleForm的值 例:prop=“shenqingID” <el-form :model="ruleForm" :rules="rules" ref="ruleForm"...原创 2019-11-09 00:59:00 · 140 阅读 · 0 评论 -
{项目解决问题} float元素浮动后高度不一致导致错位的解决办方法
当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象。但是当高度不一致时,就需要想别的办法来解决了:1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top;ul{ margin:0; padding:0; list-style-type:non...原创 2019-11-08 22:59:20 · 1211 阅读 · 0 评论 -
{技术操作} input框 单选框 边框 背景设置
input框 单选框 边框 背景设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> input[type="checkbox"] + label::b...原创 2019-11-08 22:50:03 · 527 阅读 · 0 评论 -
{项目解决问题} vue-cli 打包 背景图片丢失问题及修改打包图片上限
Vue 打包后背景图片不显示问题build/utils.js增加function generateLoaders (options) {if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',// 写改css中的路径publicPath: '....原创 2019-11-08 22:49:31 · 389 阅读 · 0 评论 -
{项目解决问题} tab栏 切换 内容样式改变
tab栏 切换 内容样式(字体换行)改变 原因:对应的tab内容里面样式未加 white-space: nowrap;解决:在对应的 加入 white-space: nowrap; 后 变一行,正常了原创 2019-11-08 22:48:49 · 504 阅读 · 0 评论