前端
文章平均质量分 53
管小姐的斐波那契
今天的你,是昨天和前天的积累所得,就像斐波那契数列一样。
展开
-
elementUI 自定义下拉选择框展示单选框、银行图片及文字等选项
最近遇到一个需求,如下图,如果用下拉框实现的话,没有插槽可用,就换了个方案,用饿了么组件库中的下拉菜单组合一个输入框来实现。<template> <div class="component-wrap"> <el-form ref="form" :model="form" label-width="80px"> <section style="display: flex; align-items: center; margin-bottom原创 2022-03-11 13:56:01 · 6294 阅读 · 2 评论 -
有关webpack的面试题
(一)打包原理:根据文件间的依赖关系对其进行静态分析,将这些模块按指定规则生成静态资源,当 webpack处理程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,将所有这些模块打包成一个或多个bundle。(二)打包流程Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:1.初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;2.开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法原创 2021-09-01 14:32:42 · 157 阅读 · 0 评论 -
JS实现网页截图的三种方案
实现方式一.canvas html2canvas过程或者原理(如何将dom转换成canvas图片?) 梳理了其大致的思路:递归取出目标模版的所有DOM节点,填充到一个rederList,并附加是否为顶层元素/包含内容的容器 等信息通过z-index ,postion, float等css属性和元素的层级信息将rederList排序,计算出一个canvas的renderQueue遍历renderQueue,将css样式转为setFillStyle可识别的参数,依据nodeType调用相对应ca原创 2021-06-28 16:24:07 · 15361 阅读 · 1 评论 -
【微信小程序】微信开发者工具调试PC端小程序报错wx.getUserProfile is not a function解决方案
在开发者工具中调试微信小程序,报错wx.getUserProfile is not a function,但是真机调试或者手机预览就不报错,别着急,是调试基础库的问题。能使用这个方法的,要满足两个条件1.开发者工具版本不低于 1.05.21030222.基础库版本不低于 2.10.4我直接升了版本库到2.16.0了,这下,开发者工具也可以调试了......原创 2021-04-20 17:50:02 · 3803 阅读 · 2 评论 -
CSS 实现文本的单行和多行溢出省略效果
单行文本.text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} overflow: hidden(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap(设置文字在一行显示,不能换行) text-overflow: ellipsis(规定当文本溢出时,显示省略符号来代表被修剪的文本) 多行文本(css).text { displa转载 2021-04-17 10:58:51 · 134 阅读 · 0 评论 -
vscode不显示git的远程分支
git上已经新建了远程的新的分支,但是vscode依旧显示原来的分支,新建的找不到,使用这个命令即可显示git remote update origin --prune原创 2021-03-25 11:21:40 · 3604 阅读 · 0 评论 -
Vue-element表单 type=“daterange“首次验证通过重置后,验证规则失效(验证依旧通过)
<el-form ref="form" :model="form" size="medium" label-width="120px" :rules="rules" > <el-form-item label="业务起止日期" prop="selectDate"> <el-date-picker v-model="form.selectDate" ..原创 2021-01-05 15:11:51 · 2232 阅读 · 3 评论 -
vue-cli中简洁版日历节假日设置功能
效果图和数据结构如上两图所示,简单总结一下需求1.后台会将本年度的节假日数据提前录入,在页面初始化时,请求回的列表就是上图图2所示,并渲染到页面,holidayName为1,工作日,0为节假日2.点击某天,可以设置节假日或工作日3.设置节假日或工作日时,备注为非必填输入项,展现在日期下面的文字就是holidayName父组件view/holiday/index.vue<template> <div class="container"> <div clas原创 2020-12-01 16:01:29 · 9794 阅读 · 25 评论 -
vue-element日历calendar组件个性化改造(备忘录圆点、点击事件)
需求如图,总结如下1.根据后台返回的数据,判断有备忘录的给出标注,memoLevel为紧急程度 1为紧急(红色),2一般(蓝色),3不重要(绿色),显示小圆点,2.如果同一天出现很多条备忘录,根据第一条紧急程度显示圆点颜色,3.点击每一天请求数据,显示当天的备忘录,4.页面初始化显示当月数据5.点击上个月、当天、下个月请求对应日期的数据废话不说,上代码html <el-col :lg="10" :xl="10" class="col2"> <d.原创 2020-11-30 17:59:49 · 10774 阅读 · 13 评论 -
【ES6学习】字符串的一些扩展方法(一)(冷门的一些知识点)
1.at()S5 对字符串对象提供了 charAt 方法 ,返回字符串给定位置的字符。该方法不能识别码点大于 OxFFFF 的字符。目前,有 一个提案提出字符串实例的 at 方法 可以识 Unicode 编号大于 Ox FF FF 的字符,返回正确的字符。2.normalize()这两种表示方法在视觉和语义上都等价 ,但是 JavaScript 无法识别。'\u01D1 ' === '\ u004F\u030C ' //false '\u01D1 '.length // 1 '\u004F\u0原创 2020-09-21 10:55:36 · 130 阅读 · 0 评论 -
Vue element-UI级联选择器动态加载
官网API先看一下我这个是地区的三级联动,撸代码拉HTML <el-form-item label="所属地区" prop="stAgentCode" ref="stAgentCode" style="width: 100%;"> <el-col :span="18"> <el-cascader @change='changeStAgentCode' v-model="ruleForm.stAgentCode" style="width:原创 2020-09-15 11:11:11 · 1470 阅读 · 0 评论 -
【ES6学习】解构赋值的用途
变量的解构赋值用途很多。1.交换变量的值let x = 1; let y = 2 ; [x, y] = [y , x];上面的代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。2.从函数返回多个值函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。//返回一个数纽function example() { return [1, 2 , 3] ; let [a, b, c] =example() ; }//返原创 2020-09-10 16:27:18 · 163 阅读 · 0 评论 -
【ES6学习】字符串、布尔、数值及函数参数的解构赋值和圆括号问题
1.字符串的解构赋值字符串也可以解构赋值。这是因为此时字符串被转换成了一个类似数组的对象。const [a , b, c , d , e] = ' hello '; a // ” h ” b // ” e ” c // ” l ” d // ” l ” e //'0'类似数组的对象都有一个 length 属性, 因此还可以对这个属性进行解构赋值let {length : len} =' hello '; len //52.数值和布尔值的解构赋值解构赋值时, 如果等号右边是数值和布原创 2020-09-10 15:52:39 · 162 阅读 · 0 评论 -
Windows系统提交的Vue项目在Mac ox系统拉下来后nodemodules报错
家有MacBook Pro和Windows本本各一个,不得不说,两个系统维护同一个项目,真的是太费劲了,尤其Mac系统项目拉下来,npm install后各种问题,各种运行不起来。简单记录下遇到的各种问题,以期能为大家提供一丢丢的参考。1.npm install安装不成功这种跟网速有关,解决方案无非就是换个网速好的网,或者cnpm install,再或者,从使用相同系统的......原创 2020-09-10 14:14:44 · 1380 阅读 · 0 评论 -
【ES6学习】对象的解构赋值
解构不仅可以用于数组,还可以用于对象。let { foo , bar } = { foo :”aaa ”, bar :”bbb ” } ; too // ” aaa ” bar // "bbb” 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的:而对象的属性没有次序,变量必须与属性同名才能取到正确的值。let { bar, foo } = { foo: "aaa ", bar :"bbb"}; too // ” aaa ” bar // ” bbb”原创 2020-09-02 10:25:20 · 555 阅读 · 0 评论 -
【ES6学习】数组的解构赋值
1 基本用法ES6 允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构( estructuring )。以前,为变量赋值只能直接指定值。let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样。let [a, b, c] = [1, 2 , 3]; 上面的代码表示,可以从数组中提取值,按照对应位置对变量赋值。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。原创 2020-08-22 17:16:43 · 185 阅读 · 0 评论 -
微信开发者工具打不开一直黑屏需要重装系统?No!
我的笔记本是老爷本升级了一下,重装的系统,其他的vscode,上网什么的一直没问题,今天下载了微信开发者工具,一直都是黑屏的状态,连登陆扫码的页面都没有,这可郁闷死我了,我以为是电脑垃圾、需要重装系统等等,知道查阅了各种资料,各方尝试,终于搞好了。我回忆了下,可能跟我以下操作有关,才解决了。1、电脑是64位系统,我下载了32位的可以看下这篇文章,当时我也是抱着试一试的态度,下载了32位的,并没有什么变化,还是没法打开,然后我就抱着最后一丝希望进行了下面的步骤2.下载文件放到指定位置黑屏问题麻烦打开C原创 2020-08-15 16:04:02 · 347 阅读 · 0 评论 -
mac os系统上传到Git上的Vue项目在Windows系统拉下来后无法运行(无法安装nodemodules依赖)
周五的时候在公司用Mac上传到Git上一个项目,想着周末回家继续,然鹅,回家后家里的Windows拉下来al代码后,npm install 不成功,试了好几遍,以为是网速的问题。终于找到答案了。原来是Mac上push,Windows下pull文件模式发生了变化。1.git config core.filemode false也可以直接修改代码仓库 .git 目录里的 config 文件的 filemode (在 [core] 段中)字段,将其改为 false。2.git config --globa原创 2020-08-15 11:34:18 · 1673 阅读 · 0 评论 -
【es6学习】let与const的那些事儿(二)
3 canst 命令3.1 基本用法const 声明 一个只读的常量。一 旦声明,常量的值就不能改变。const PI = 3.1415 ; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.上面的代码表明改变常量的值会报错。const 声明的常量不得改变值。这意味着, const 一旦声明常量,就必须立即初始化,不能留到以后赋值。const foo; // SyntaxError : Missing原创 2020-08-14 15:53:25 · 131 阅读 · 0 评论 -
【es6学习】let与const的那些事儿(一)
1.let命令1.1基本用法let 命令,用于声明变量。其用法类似于 var ,但是所声明的变量只在 let命令所在的代码块内有效。{let a = 10; var b = 1; }a // ReferenceError: a is not defined. b // 1上面的代码在代码块中分别用 let和 var 声明了两个变量。然后在代码块之外调用这两个变量,结果 let 声明的变量报错, var 声明的变量返回了正确的值。这表明, let 声明的变量只在其所在代码块内有效。for原创 2020-08-14 10:15:55 · 175 阅读 · 0 评论 -
【es6学习】Babel 转码器详解
持续更新1.6 Babel 转码器Babel ( babeljs.io/)是 个广为使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在浏览器或其他环境执行 这意味着,可以用 ES6 的方式编写程序,而不用担心现有环境是否支持。下面是一个例子。//转码前input .map(item =>item+ l) ;// 转码后input.map(function (item) { return item + l; })上面的原始代码用了箭头函数, Babel 将其原创 2020-08-13 11:19:18 · 523 阅读 · 0 评论 -
【JavaScript算法】时间复杂度速查表
A.1 数据结构下表是常用数据结构的插入、删除和搜索操作的时间复杂度:A.2 图下表分别列出了两种表示图的方式时,图的存储空间大小,及其增加顶点、增加边、删除顶点、删除边、查找顶点的时间复杂度:A.3 排序算法排序算法,以下是它们在最好、一般和最差的情况下的时间复杂度:A.4 搜索算法搜索算法的时间复杂度,包括图的遍历算法:...原创 2020-08-13 09:43:51 · 275 阅读 · 0 评论 -
vue/vue-elementUI双花括号插值将时间戳格式化转换成日期的两种方法
1.在elementUI的table中ele的table的el-table-column的Table-column Attributes有个formatter的API<el-table-column prop="gmtCreate" :formatter="timestampToTime" label="时间" width="180"></el-table-column>methods: { timestampToTime(row, column) { var原创 2020-08-11 15:09:33 · 2134 阅读 · 1 评论 -
element/element-admin利用js-xlsx插件导出Excel/多级表头(一篇涵盖四种导出的博客)
项目是基于Vue-element-adminVue-element-admin中导出表格,有自身的api,点击查看如何导出普通Excel,但是多级表头的表格,就需要合并单元格了。需求导出表格如图代码html<el-button @click=“exportData” data-type=“01” class=“detail”>导出数据js<script>import { exportGzbs } from "@/api/county";import Moment f原创 2020-08-10 16:24:21 · 3827 阅读 · 1 评论 -
Vue-element上传图片el-upload组件改造(可放大和删除蒙版、限制格式大小)
先看需求吧。看到动图就知道了,在elementUI官网里⬅️,没有完全符合我的需求的api,需要自己加工下。同时,http-request这个方法,也是自定义的。话不多说,撸代码吧。HTML <el-col :span="24"> <el-col :span="5" v-for="(item,index) in [1,2,3]" :key="index"> <el-form-item v-if="index<3" :la原创 2020-07-27 15:04:24 · 8748 阅读 · 4 评论 -
Vue-element tab选项卡二级页面返回缓存选中页签
需求 我的项目里,有个页面是两个选项卡,两个页签里稍有不同,用的组件,然后各个选项卡都有二级详情页,需求就是从二级详情页返回的时候,要返回上次选中的选项卡页签。思路 在elementUI中,有一个默认选中的api它就是value / v-model,[点击可以查看官网api](https://element.eleme.cn/#/zh-CN/component/tabs)方案 我是方案就是换成你,在离开本页的时候,存到cookie里,进入本页,获取cookie,我感觉还挺简单的,也很原创 2020-07-25 11:53:35 · 2503 阅读 · 0 评论 -
移动端官网折叠导航效果实现(三条横线变❌)
前几天,和同事写了个官网,官网大家都知道的,简单嘛,不过麻烦的就是移动端的适配问题,我负责的是移动端H5版的。有个折叠导航的动效,参考的 这个网站的效果 https://mdnf.qq.com/cp/a20191217yyzm/index.shtml?order_mdnf=1&adtag=gw写出的山寨版效果图通过效果图,可以看出来,我只是山寨了一下三条横线的动效,不过从上至下渐入的效果也就没什么难度了。思路大概就是,第二条线消失,第一条线往左下角45度,第三条线向左上角45度,用到的都是c原创 2020-07-24 17:49:05 · 2583 阅读 · 0 评论 -
Vue-elementUI中table表头样式根据该列数据动态个性化处理(动态标红)
element中就有设置table表头的api,也可以参考这位码友的文章 elementui更改el-table表头背景颜色和字体颜色前段时间,项目里遇到了这么一个需求,发现网上并找不到一个全面的讲解,现在给大家分享一下。一、需求简单说下需求,相信看到图片就大概知道了。这个数据呢,会有一个新值,一个旧值,如果新旧值相等,说明没有变化,如果不等,说明有增加,新值是累计增加后的值,需要标红,同时,这种情况下,表头也要标红显示。话不多说,上代码。二、代码方案先看下数据结构这个数据结构里,每个对象就原创 2020-07-23 10:07:46 · 3432 阅读 · 0 评论 -
vue-cli3.0以上打包后index.html打开是空白的不显示解决方案
**vue-cli3.0以上打包后index.html打开是空白的不显示解决方案**昨天,写了一个简单的项目官网,本来挺简单的一个项目,结果打包的时候出问题了。项目是同事搭建的,她是Vue3.0以上的版本,而我的是2.9的版本。我们打包都不成功。#2.0版本在2.X版本以前,项目都是有个config文件夹的,在index.js里修改build下面修改下静态资源的路径,assetsPublicPath加个点。如图##3.0以上那么3.0以上怎么办,也简单,分两步走1.在router的inde原创 2020-07-16 09:31:22 · 2257 阅读 · 0 评论