- 博客(37)
- 收藏
- 关注
RSS订阅原创 前端必须掌握的package.json文件中各字段的解说
中，安装的时候都会安装，打包的时候都会被打进去的，区分依赖只是为了让项目看起来更加清晰。除非你的项目也依赖了lodash并且版本一致，那么项目的。而 moment，则无论如何也不会出现在你的项目中。文件夹中的（如果你的项目本身没有这个依赖），而。至于一般的项目，不管你是安装在dev还是。如果你的项目是发布到npm的一个包，中的依赖是会被下载下来到这个包的。我发布了一个组件A，它有。，里面会有lodash。除了字面的含义的区别，
2024-02-22 10:39:55
589
原创 js循环遍历的方法总结
循环遍历是指通过重复执行一段代码来遍历（访问）一个数据集合中的每个元素。可用于处理数组、对象或者其它可迭代的数据结构。：可迭代（iterable）是指一种数据结构，它可以被迭代（遍历）访问其元素。当我们说一个数据结构是可迭代的，意味着我们可以总而言之，可迭代的数据结构提供了一种方式来访问它们的元素，通常是通过循环遍历的方式。在循环遍历过程中，我们可以使用不同的控制结构（如for循环、while循环）来遍历可迭代的数据结构，以便于处理每个元素。
2023-12-19 11:06:35
950
原创 NPM包的发布
正式版的版本号是1.0.0，在原版本上新增了功能之后，需要发布一个测试版本进行测试。或者可以通过npm config set registry。安装 nrm：npm i nrm --seve。测试版本的格式可以是：1.0.0-beta.0。打开windows命令行，查看npm镜像信息。运行自定义npm包 ： npm link。其中name和version字段是必需的。运行项目： npm link 报名。小提示：输入密码时不会显示出来。首先我们需要在npm官网。
2023-08-24 11:06:36
171
原创 element table 点击按钮实现展开效果
先给展示一下效果在这块实现点击开关按钮实现展开收起，使用到了官网提供的toggleRowExpansion方法来实现， <el-table-column width="180"> <template slot-scope="scope"> <el-switch v-model="scope.row.isSwitch @chan.
2022-02-16 15:12:29
2463
2
原创 element-ui table某些行展开某些行不展开
element ui table中，可否做到根据行数据信息来设置当前行是否有展开功能？<el-table-column type="expand"></el-table-column>看源码觉得这个属性不可控，求高人相助···回复：最终要实现的目的是这种的，现在实现的方式是从css上解决：html<el-table :data="tableData5" style="width: 100%" :row-class-name="setClas..
2022-02-16 14:41:56
2004
转载 VUE.$bus事件总线——非父子组件信息传递
$bus主要作用是进行非父子组件信息传递，使用方法如下：第一步：在main.js中将$bus绑定到vue原型上Vue.prototype.$bus=new Vue()第二步：在需要传递信息的组件上将一个方法发射出去，并需要在某个条件激活这个方法<div @click="busclick"> </div>methods(){busclick(){this.$bus.$emit('busfunction')}}第三步：在组件的创建时created中接收em
2021-12-08 15:37:08
318
转载 ElementUI 级联选择器的el-cascader校验
<el-form-item label="类别" prop="number"> <el-cascader v-model="newData.number" :options="typeChoose" :props="{ expandTrigger: 'hover', checkStrictly: true,value: 'id', label: 'name'}" > </el-cascader&g.
2021-12-03 10:01:43
2161
原创 input 金额限制
产品经理在下需求的时候经常就会有进入输入限制，比如只能输入两位小数，最多输入多少位等，下面这个方法就是限制了金额输入input 框的类型必须是text... value：输入框传输的值.. before：指定小数点前面的位数.. after：指定小数点后面的位数.. state：是否可以输入小数点, 默认为true,可以输入小数点. / false, 不能输入小数点.Mixin_limitInputNum(value, bef...
2021-12-02 15:46:07
692
原创 a标签下载文件
问题记录：点击时打开了文件，不管是pdf还是jpg，不管target是blank还是self，想要实现点击时直接在当前页面下载文件。解决方案：在href后拼接"?response-content-type=application/octet-stream"，添加download属性。例：<a style="color:#0286DF;" rel="nofollow noopener noreferrer" :href="地址+'?response-content-type=appl
2021-12-02 14:36:51
255
转载 window.open()和target= blank存在安全漏洞
我们经常使用 HTML target="_blank" 或 window.open() 在新窗口中打开页面。// in html<a href="www.google.com" target="_blank">open google</a>// in javascriptwindow.open("www.google.com")复制代码但是，当新打开的页面指向一个我们不知道的网站时，我们就会被暴露在钓鱼网站的漏洞中。新页面通过 window.opener对象获得了
2021-10-22 17:46:24
2828
原创 ES7 Array.prototype.includes()详解
includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false.1.基本用法['a', 'b', 'c'].includes('a') // true['a', 'b', 'c'].includes('d') // false2.接收俩个参数：要搜索的值和搜索的开始索引['a', 'b', 'c', 'd'].includes('b') // true['a', 'b', 'c', 'd'].includes('b',
2021-09-28 10:49:50
249
原创 vue+element 实现图片上传和截取功能
今天分享一个图片上传和截取功能，需求要求固定尺寸的截取，按照自己的需求进行配置，实现效果如下：首先参考element的上传参考地址：Element - The world's most popular Vue UI framework，截取的部分主要用到了vue-cropper第一步：安装 npm install vue-cropper第二步：1.全局使用main.jsimport VueCropper from 'vue-cropper'Vue.use(Vue...
2021-09-18 18:00:23
2051
原创 element 手写提示框（类似title属性）
本来是用title属性来展示提示，但是ui觉得太丑了 需要该样式 ，没找到合适的方法改title属性的样式，然后自己就手写了一个：直接上代码:<template> <div> <span v-on:mousemove="dataDetails($event)" v-on:mouseleave="hiddenDetail($event)">分批付款</span> <!-- 提示框 --> <di...
2021-09-18 14:31:34
500
原创 vue组件组件层级弹出框dialog显示问题
Element 使用dialog框是内容框和遮罩层的层级不对 出现这种情况只要在弹出框架的属性上加上 append-to-body完美解决。
2021-09-18 10:28:26
1136
原创 vue 项目运行Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误问题解决方案
在项目中运行的时候出现报错，错误为Module build failed (from ./node_modules/babel-loader/lib/index.js)解决方案：控制台输入 npm install @babel/core @babel/preset-env 命令就可以完美的运行了
2021-09-17 15:16:00
1902
原创 element 图片上传限制尺寸大小（像素）
今天刚接了一个新需求，上传图片需要限制图片的宽高，容差在是像素。这块是上传的大小不合适就提示：请准确上传广告图，像素要求是380px*100px，1200px*158px，所以我就直接写死了。看下我上传图像的尺寸：具体代码如下：<el-upload class="heightCredential" :action="action" :file-list="list" :show-file-list="isList" :on-succes..
2021-09-17 14:47:33
3351
原创 vue2 全局配置具体解释以及用法
1.Vue.config.silent： 取消 Vue 所有的日志与警告。地址：Vue.config.silent 取消 Vue 所有的日志与警告。 - 简书2.Vue.config.optionMergeStrategies ：合并策略Vue.config.optionMergeStrategies 用法分析_苦糖zym的博客-优快云博客3.Vue.config.devtools：配置是否允许 vue-devtools 检查代码地址：Vue.config.devtools配置是...
2021-09-16 15:51:47
664
转载 VSCode 安装GitLens插件不生效问题
前言：前端开发人数多的时候就需要了，这样能看见是谁修改或者提价的代码，方便问题定位git相信开发者都有安装吧，就直接跳过安装git了步骤:1、直接在应用商店里面搜索‘GitLens’,然后点击安装2、在vs的左下角有一个设置的图标，直接搜索 settings.json，进去编辑，加上 "git.path":"D:/ProgramFiles/Git/mingw64/bin/git.exe",//你gi安装的地址 "editor.renameOnType":true,...
2021-09-16 11:01:01
3058
转载 v-model.trim用法及其他修饰符
v-model的修饰符v-model.lazy 只有在input输入框发生一个blur时才触发v-model.trim 将用户输入的前后的空格去掉v-model.number 将用户输入的字符串转换成number在input textarea select中使用在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹...
2021-09-15 17:16:22
15352
转载 Vue 基础知识之 Vue.extend
Vue.extend属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的Vue.component写法使用extend步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend+$mount这对组合是我们需要去关注的。官方文档学习开始之前我们先来看一下官方文档是怎么描述的。Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个...
2021-09-15 11:45:37
140
转载 vue-router 实现动态路由加载，权限管理
import Vue from 'vue'import Router from 'vue-router'import store from '@/store/index'import NProgress from 'nprogress'import 'nprogress/nprogress.css'import gatewayHomeRouter from './gatewayHome'Vue.use(Router)//不需要权限的路由export const constantRoutes.
2021-09-14 15:29:00
982
原创 nvm 实现node多版本安装与切换
nvm是什么？nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。下面列出下载、安装及使用方法。nvm下载下载地址：https://github.com/coreybutler/nvm-windows/releases;版本两个：nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。nvm-setup.zip：安装版，推荐使用安装安装默认地址，并记录安装地址，打开安装.
2021-08-12 11:00:41
133
原创 vue中使用echarts 动态生成多个折线图
刚接了一个新需求，需要同时生成多个折线图，例如：lineList 是后台请求过来的数据，为一个数组，我们循环这个数组循环调用drawLineOne方法，具体实现代码如下<template v-for="(item,index) in lineList" > <div :key="index" :id="'myChart'+index" :style="{'height': '400px','margin-top':'20px'}"></div>..
2021-08-12 10:16:26
5707
1
原创 js数组常用方法.map()、.filter()、.forEach()、.reduce() .find()等
Array.prototype.map()创建一个新的数组，其结果是该数组中每个元素都调用一个提供的函数后返回的结果。语法：var newArray = arr.map(function callback(currentValue, index, array){//对每个元素的处理})参数callback:用来生成新数组用的函数。callback的参数：currentValue：当然正在处理的元素index:正在处理元素的索引array:调用map方法的数组（就是.map()前面的也就
2021-07-27 10:38:33
853
原创 ECharts折线图堆叠设置为不堆叠的方法
今天拿到一个多条线的折线图，但是官网的源码示例是这样的，当我把搜索引擎的周二数据设置为0是并没有在y轴为0上，而是跟上一条线重合了，ECharts折线图是堆叠的，折线图堆叠的意思就是：第二条线的数值=本身的数值+第一条线的数值，第三条的数值=第二条线图上的数值+本身的数值，以此类推......设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可。option = { title: { text: '折线图堆叠' ..
2021-07-08 16:54:15
8452
3
原创 vue 自定义生成表格 并且可以输入
自定义输入表格的行和列，让后生成表格，请看效果：<div> <el-input v-model="initdata.rows" type="number" size="small" placeholder="请输入行" :maxlength="2" style="width:100px" /> <span class="margin-left">行</span> <el-input v-model=
2021-06-25 09:50:29
2588
4
原创 elementUi日期选择器开始时间至结束时间限制
开始时间不能大于结束时间；结束时间不能小于开始时间<el-date-picker v-model="startTime" size="small" style="width:200px" :picker-options="pickerBeginDate" type="date" clearable placeholder="开始时间" format="yyyy年MM月dd日" value-format="
2021-06-24 15:05:09
901
转载 object-fit:cover；在小程序中不起作用，小程序图片变形了如何处理
前几天写了一篇文章css防止图片变形 object-fit: cover;使用object-fit: cover;来防止图片变形，说巧也巧，这两天自己开发玩玩的zblog小程序“污污情话”封面刚好被挤压变形，于是，就给图片添加了这个css属性。what？但是添加了并没有任何卵用，刚开始我还以为我自己记错拼写了，还特意复制过来试了下，还是没有任何作用......截图小程序页面先看看对比效果吧，左侧的轮播图是被挤压变形了，而右侧轮播图是没有被挤压变形，保留原始尺寸，多余的被裁剪，很明显右侧的..
2021-06-23 16:05:23
1508
原创 js数组、字符串常用方法，以及数组与字符串的相互转换
我们经常会用到数组的方法，以及字符串的方法，以及相互转换，偶尔会突然想不起来，今天就总结一下：一、数组的常用方法：1、splice（）(参数1，参数2,参数3):返回一个由删除元素组成的新数组参数1:开始索引参数2:删除元素的位移参数3:插入的新元素，当然也可以写多个var a = [11,22,33,44,55];var b = a.splice(1,3,7,8,9);2、push（）方法向数组的末尾添加一个或多个元素，并返回新的长度。尾插 var arr1=[.
2021-03-26 17:24:30
182
原创 小程序与H5相互跳转
我们在写小程序的时候往往会遇见跳转h5页面的情况，下面就来整理一下：1、小程序跳转h5小程序跳转h5时，需要用到小程序的web-view，官方文档链接<view class="page-body"> <web-view src="https://xxx.com/index.html"></web-view></view>这里需要注意：必须是https的协议。2、h5跳转小程序...
2021-02-20 09:44:18
405
3
原创 vue table表格自定义
刚接了一个新需求 ，自定义表格的行和列，没有想到好的实现方法，就用原生table写了一个，直接上代码：先给大家展示一下效果：下面直接上代码：<el-button style="margin-left: 10px; float: right;" size="small" @click="refresh">重置</el-button><table> <template v-for="(item,index) in tableProD...
2021-02-20 09:18:17
3504
原创 日期封装本季 本月 本周 上周 （iview演示）
这里主要用的是moment .js(JavaScript 日期处理类库），安装npm install moment --save下来正式开始了。。。。1.新建 filter.jsimport moment from 'moment';/** * 获取本周，本月，本季度时间 */export const obtainDataTime = (timeData) => { if ( timeData === 'thisWeekTime' ) { return getThi.
2020-12-16 11:32:25
207
原创 iView 日期选择器开始时间至结束时间限制（以及固定时间之前的日期不能选）
1.开始时间不能大于结束时间结束时间不能小于开始时间 <DatePicker type="date" placeholder="选择开始时间" :options="startOption" v-model="startTime" style="width: 120px;" ></DatePicker> <DatePic
2020-12-15 11:13:42
3500
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人