前端
文章平均质量分 50
一路追求匠人精神
一个人如果没有梦想,那和咸鱼有什么区别。
展开
-
eslint+stylelint+prettier全流程配置
stylelintrc.cjs,具体文件内容如下。执行一次npx prettier . --write,格式化一次code,如果是使用的Vscode编辑器,格式化代码的时候选取prettier相关的格式方法。三.vite.config.ts引入。二.创建以下5个文件放在项目顶层。原创 2023-10-27 17:11:51 · 1644 阅读 · 0 评论 -
微信点金计划(服务商角度)
引入的头部文件,除了./jsapiResult/cssFiles/jsapiResult.css这个文件外,其他直接去网上扒拉资源就好,我这里都是自己下载下来放置为静态文件调用,这个样式文件如下。②“商家小票”调试工具里面的,“从业机构商户号”是银行/服务商的商户号,底部的2个单号,可以在微信支付的“账单”里面点进去查询到。三.因为微信的前端回调没有跳转小程序的方法,所以设置了一个空白页面,先跳转到空白页面,空白页面再跳转到小程序,空白页面代码如下。这个文件,我目前是放置在index.html里面。原创 2023-02-17 15:43:45 · 930 阅读 · 3 评论 -
pc/移动端前端思路
pc/移动端前端思路原创 2023-01-10 16:05:10 · 155 阅读 · 0 评论 -
vue3+ts+vite踩坑小记
vue3+ts+vite踩坑小记原创 2023-01-10 15:41:50 · 307 阅读 · 0 评论 -
vue动态生成路由菜单
①router文件夹下放2个文件:index. js(放置基础的路由信息)和roleRoute. js(放置需要权限分配的路由)②index.js文件如下:import Vue from ‘vue’import Router from ‘vue-router’Vue.use(Router)export const routerMap=[{path:’/’,name:‘root’,redirect:‘login’},{path:‘login’,name:‘login’,component:原创 2021-11-23 17:06:18 · 3261 阅读 · 0 评论 -
前端好看的几组颜色值
一.echarts柱状图,折线图,饼状图几组颜色值。二.几组好看的渐变色。原创 2022-11-04 17:19:47 · 835 阅读 · 0 评论 -
vue下echarts的地图配置(3d悬浮效果)
2.series数据格式为:[{name:'四川省',amount:'123456'},{name:'海南省,amount:'456'}]1. zoomSize设置值为1.4。toolTip配置js文件如下。图片上面的水印是公司软件自带的。五.其他配置数据说明。原创 2022-11-04 15:33:07 · 5367 阅读 · 1 评论 -
前端微信支付代码(公众号支付)
其他商户跳转到我们支付页面,传入参数openId,fromTradeType,订单号,流水号,借由我们页面进行微信支付。具体在小程序后台如何配置,见微信官方文档。满足1.是在微信内核进入。2.传入了openId。三.控制微信支付按钮显示隐藏的代码。引入lodash主要使用防抖功能。五.进行微信搭桥,进行环境处理。一.场景 (完成代码见附录)四.点击微信支付后的流程代码。六.环境准备好后,拉起支付。原创 2022-11-04 13:59:42 · 2114 阅读 · 0 评论 -
vue使用甘特图(实现树形结构/一条数据显示双时间轴)
1.引用甘特图:impot gantt from “dhtmlx-gantt”这里引用7.0.7版本本2.在mounted里面initGanttConfig()〈初始化配置数据〉和getGanttData()〈放入数据〉3.initGanttConfig为:原创 2021-08-17 09:24:30 · 5718 阅读 · 6 评论 -
发票自动识别功能前端开发(多表单动态生成)
多发票识别功能原创 2022-10-14 10:47:49 · 2267 阅读 · 2 评论 -
el-dialog的再封装(头部,尾部)
dialog封装原创 2022-09-23 17:08:16 · 2126 阅读 · 0 评论 -
el-select的remote方式的组件封装(大数据下的下拉筛选)
【代码】el-select的remote方式的组件封装(大数据下的下拉筛选)原创 2022-09-23 10:19:15 · 1399 阅读 · 0 评论 -
el-table组件的再封装(传入columns和data生成el-table)
动态配置el-table数据,在columns里面可配置button,动态设置column颜色等,塞入data动态赋予数据。原创 2022-08-19 18:38:41 · 946 阅读 · 0 评论 -
.call .bind .apply区别
call([thisObj[,arg1[, arg2[, [,.argN]]]]])apply([thisObj[,argArray]])bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入bind()方法的第一个参数作为this,传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。栗子:varobj = {x: 81,};varfoo = {getX...原创 2022-03-28 21:52:20 · 174 阅读 · 0 评论 -
defer和async的区别
在页面渲染过程中defer和async的作用区别原创 2022-03-28 21:09:00 · 140 阅读 · 0 评论 -
使用JSON.stringify会导致的问题
1.undefined,Symbol,函数都会转变为undefined这个时候如果用JSON.parse进行处理,会报错2.布尔值、数字、字符串的包装对象会转换成原始值3.NaN、Infinity 和 null 都会变成 null4.Date日期会变成字符串5.使用JSON.parse的时候,类似undefined,Symbol等会在转变途中丢失掉...原创 2022-03-26 23:50:49 · 2343 阅读 · 2 评论 -
.vue文件引入.html文件
html页面引入vue组件需要在页面引入http-vue-loader.js注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html‘’1.创建my-component.vue<template> <div class="hello">Hello {{who}}</div></template&原创 2021-05-13 22:50:36 · 3339 阅读 · 1 评论 -
idea导入类快捷键
鼠标移动上去按Alt+enter原创 2021-05-13 22:46:15 · 1822 阅读 · 0 评论 -
无视浏览器让滑动条隐藏仍能滑动的一个方法
思路:父div设置了宽高且设置overflow:hidden,子div宽/高=100%+浏览器自带滑动条宽/高eg:.fatherDiv{ width:100px;height:100px;overflow:hidden }.sonDiv{ overflow:scroll}这里需要用到一个方法去获取浏览器的滑动条宽高function getScrollbarWidth() { var odiv = document.createElement('div'),//创建一个div sty..原创 2020-06-30 22:39:35 · 623 阅读 · 0 评论 -
前端tree只获取全勾选最顶级父节点和已勾选子节点的算法
使用工具:miniui tree需要使用到js方法(miniui tree里面封装好的):isLeaf(node):判断是否叶子节点 + 通过当前的node能拿到所有的子节点 + 能够拿到当前节点的是否选中状态(如果能拿到半选状态,该算法可以优化)算法如下,每一步都备注得很详细var nodeList=[]; //最后放入的节点集合 function getNodes(node,tree){ var ifLeaf=tree.isL...原创 2020-06-27 17:09:50 · 1063 阅读 · 0 评论 -
滚动条mCustomScrollbar的使用
1.引入下列css文件和js文件mCustomScrollbar.css,jquery.min.js,jquery-ui.min.js,mousewheel.min.js,mCustomSrollbar.js4个文件,js文件顺序需要和以上一致。2.需要引入滑动条的div给上id或者class供调用。3.在当前页面的脚本中加上(function(){ $(window).load(function(){ $('.table').mCus...原创 2020-06-27 16:44:22 · 1278 阅读 · 0 评论 -
require.js在html中的运用
1.在html的<script>中引入require.js2.新建一个commen.js,在里面对require的一些基础进行配置eg:在commen.js中require.config({ 'baseUrl':"../../" , //根据实际的项目路径来写 'paths':{ 'jquery':'commen/jquery.min', 'commenAlert':'coponenet/commenAlert' }...原创 2020-06-10 23:22:51 · 5690 阅读 · 1 评论 -
echarts饼/柱状图相关技巧
1.数据格式均为x轴为数组,即分类,y轴为相应的数组对象。eg:letx=['name','age']; let y=[{name:'name',value:'yellow'},{name:'age',value:'12'}];2. 修改鼠标移动上去后显示的数据的格式tooltp:{trigger:'item'.formatter:'{a}<br/>{b}:{c}({d}%)'}3.将左侧的title修改为垂直显示legend:{orient:"vertica...原创 2020-06-09 23:46:34 · 421 阅读 · 0 评论 -
页面适配屏幕方法之一:设置最小宽高
思想:设置屏幕最小宽高,当浏览器过小时不允许页面继续缩小。实现:1.html,body{ height:100%; }2.在html页面包裹一个main-body,其class样式如下:.main-body{ width:100%;height:100%;overflow:auto;min-width:1300px;min-height:950px;max-width:1600px;}...原创 2020-05-30 12:37:40 · 1737 阅读 · 0 评论 -
bootstrap-table基础实现
1.引入jq.js,bootstrap.js+bootstrap.css,bootstrap-table.js共4个文件2.html架子<thead id="table1" data-ajax="requestData" class="table"> <tr> <th data-checkbox="true"></th> <th data-filed="na...原创 2020-05-29 23:07:15 · 323 阅读 · 0 评论 -
点击空白部分将中间弹框隐藏方法(转载)
var pop = $('.pop');$('.btn-pop').on('click', function(e){ e.stopPropagation(); pop.show();});$('.close').on('click', function(){ pop.hide();});$(document).click(function(e){ // 方法1 // if($(':not(.pop)')){ // pop.hide(); // .转载 2020-05-12 21:54:28 · 238 阅读 · 0 评论 -
css好看的背景收集
1.一个彩色泡泡的背景:background:radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,2.原创 2020-05-11 22:58:58 · 2341 阅读 · 0 评论 -
console.log能打印出对象,但是取不到对象属性
总结可能产生的原因有2个:1.后台返回的是json字符串,需要用JSON.parse()转换为对象才能取到值。2.有时候ajax异步/其他异步取到的值能在console.log中打印出来,但在程序的console.log处并没有值,这时可以用Object.assign()将对象进行一次拷贝,然后便可以取到了。eg:dataList取不到值。let newList=Object.assi...原创 2020-05-01 22:35:03 · 9723 阅读 · 3 评论 -
从无到有创建vue项目(利用图像化界面)
1.安装node。网上搜索“node.js安装教程”,跟着走完即可安装(记得加环境变量)。记得检查node是否安装好,cmd里面输入node -v检查是否装成功。2.安装web-pack利用node里面的npm工具,cmd里面输入npm install -g webpack将webpack安装上。3.安装vue-clicmd输入npm install ...原创 2020-04-12 21:46:03 · 318 阅读 · 0 评论 -
对两个数组对象求某一个属性的交集
需求:let lines=[{name:'网络1',ip:"36-10"},{name:'网络2',ip:'36-11'},{name:'网络3',ip:'36-12'}];let canChoose=[{name:'网络2',ip:'36-10'},{name:'网络2',ip:'36-11'},{name:'网络2',ip:'36-12'}];对上述的canChoose进行筛选,筛...原创 2020-04-07 23:48:53 · 696 阅读 · 0 评论 -
vue的input等与父组件间的相互传值
一.将点击事件由子组件传递到父组件子组件:@click="success"success(){ this.$emit("success//父组件接受的click事件//",data//data是通过子组件向父组件的传值//)}父组件:在父组件里面import组件后,在调用的标签中写@success="fatherMethod//父组件自己的方法//",而fatherMethod(d...原创 2020-03-15 18:24:24 · 1082 阅读 · 0 评论 -
promise对于多个请求情况的处理
先实例化三个promise:let p1=new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(`这个是p1的成功回调`); },500); }) let p2=new Promise((res...原创 2020-03-08 17:24:04 · 1952 阅读 · 0 评论 -
为promise部署complete方法
思想:在promise的prototype上新增该方法Promise.prototype.complete=function(callback){ let p=this.constructor; return this.then( value=>p.resolve(callback()).then(()=&g...原创 2020-03-08 16:32:15 · 2735 阅读 · 3 评论 -
js设置类的私有属性
//主要通过将getName等的方法写在class外,实现私有 let animal=class{ getName(userName){ return _getName.call(this,userName); } setName(animalName){ ...原创 2020-03-08 16:05:04 · 531 阅读 · 0 评论 -
前端已封装好的一些常用函数整理(filter,find,findIndex,each,forEach...etc)
1.forEach方法let arr=[4,5,6]arr.forEach((value(第一个值是数组的取值,对应上面的4.5.6,index(第二个值是下标)))=>{})说明2点:①直接修改上面的value值对原数组没有影响②如果想要对对象和dom节点进行操作,需要使用jq封装的$.each方法2.$.each方法A.对数组的遍历let arr=[4,5,6...原创 2020-03-08 00:30:57 · 379 阅读 · 0 评论 -
es6的class思想的基础实现
//先定义一个人的类,通过assign在该类的方法下再加载一些新的方法,具体实例化后,可以通过assign在实例下面加载一个个性化的参数以及方法。let man=class{ constructor(name,age,sex){ this.name=name; this.age=age;...原创 2020-03-08 00:06:30 · 101 阅读 · 0 评论 -
利用promise对ajax进行基本的封装
//传参:1.url 2.type 3.data--如果type为POST时进行的传参 //.then方法进行成功后进行的操作,.catch方法里面进行失败后的方法 let globalAjax=function(url,type,data){ return new Promise((resolve,reject)=>{ ...原创 2020-03-05 23:04:52 · 459 阅读 · 1 评论 -
利用define处理面向对象的方法
//利用require处理 面向对象的方法 //需要引入define.js和jq.js //文件A // define(function(){ // let man =function(con){ // let that=this; // config={ ...原创 2020-03-05 22:49:05 · 130 阅读 · 0 评论 -
数组对象的去重方法(每一个对象有唯一标志符,id或者其他)
//去重方法一 let list=[{"id":1},{"id":2},{"id":1}]; let obj =[]; //用于标志某一位是否已经存在 let result=[]; //存储最后结果 list.forEach((value,index)=>{ if(!obj[value.id]){...原创 2020-03-05 22:35:15 · 466 阅读 · 0 评论 -
promise处理图片的异步加载
//传值:url(图片加载的url)//函数直接调用,在.then中进行成功的操作,在.catch中进行失败的各种操作.let imageAsync=(url)=>{ return new Promise((resolve,reject)=>{ let img = new Image(); ...原创 2020-03-05 22:28:30 · 383 阅读 · 0 评论