自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(42)
  • 收藏
  • 关注

原创 vue安装与脚手架搭建

Vue2前端项目模板介绍前端项目模板是基于 Vue2+ElementUI 创建的。提供了网络请求、状态管理、路由等基础功能。1.功能 集成网络请求 Axios 集成数据模拟 Mock 集成状态管理 Vuex 集成路由管理 Router Element UI 组件 实现前后端项目数据联动 提供 Demo 页面(表格、表单、目录树,下拉框)2.技术栈3.安装脚手架3.1.前提条件安装node,版本不应太新,否则安装报错 ;然后node –v npm –v查看是否安装成

2022-04-21 18:00:43 730 1

原创 引入弹窗组件两种写法v-if || ¥refs

第一种:v-if方法index.vue<template> <div class="twoProcessTagContainer"> <el-row style="background: #ffffff; padding: 20px 10px 0px"> <el-col :span="24"> <el-button type="primary" size="mini" @click="handleMoreRew

2022-03-15 17:34:08 921 1

原创 el-tree懒加载数据量太大的解决方案

一、找到路径:node_modules => element-ui => packages => tree ,然后把tree这个文件夹拷贝下来,放到自己项目文件价里,比如,我放到了components文件夹里。二、打开node.js文件,找到doCreateChildren方法,把这段代码加上if (array && array.length > 2000) { let arr = array.splice(60, array.length - 6

2022-03-03 14:50:13 1909 4

原创 删除对象数组中,其中一列为空的数据

const list = [ { VALUE_DATE: "滴滴出行", F1_01464: "1", F3_01464: "", F2_01464: "", }, { VALUE_DATE: "滴滴出1行", F1_01464: "", F3_01464: "", F2_01464: "4", }, {

2021-12-31 10:51:48 260

原创 循环添加el-form表单,并加校验

<template> <div> <el-form :model="formData" :inline="true" ref="formData" label-width="65px" size="medium" > <el-row v-for="(item, index) in formData.loopFormList" :key="ite

2021-12-09 13:59:44 854

原创 el-table可编辑,加校验

一、点击保存对整个table校验<template> <div> <el-button type="success" @click="handleAdd()">添加一条数据</el-button> <el-form :model="ruleForm" ref="ruleForm"> <el-table :data="ruleForm.tableData" style="width: 100%">

2021-12-08 11:12:30 3012

原创 复制excel里的数据,渲染到el-table中

案例一、<template> <div class="book"> <el-input type="text" v-model="paster" @paste.native="pasteMe" placeholder="请输入粘贴的内容" /> <el-table :data="tableData" border stripe> <el-table-column

2021-12-02 17:19:26 346

原创 webpack

webpack是什么webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。webpack五个核心概念1.Entry入口(Entry)指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。2.Output输出(Output)指示webpack打包后的资源bundles输出到哪里去,

2021-09-24 17:59:06 40

翻译 js数组怎么把多个对象合并成一个对象[{},{},{}]-[{}]

let arrOne = [{ name: "xiaoming",happy:"玩",color:"red" },{ age: 18,font:"pingfang" },]var newArr = arrOne.reduce(function (result, current) { for (var key in current) { if (current.hasOwnProperty(key)) { result[key] = current[key]; } }

2021-07-13 17:38:58 1741 1

原创 vue高度或表格自适应屏幕一屏显示

一、el-card自动适配屏幕高度//template部分<el-card class="box-card card-height" :style="conheight"></el-card>//script部分data(){ return{ conheight: { height: "", }, }}//created部分created() { window.addEventListener("resize", thi

2021-07-05 14:39:22 751

原创 微信小程序-如何访问未备案的 API | 云开发

一、在cloudfunctions里右键新建search文件夹 =》Node.js云函数,右键在终端打开,安装gotnpm install --save got@9二、在index.js里编写接口代码const got = require('got')// 云函数入口函数exports.main = async (event, context) => { const response = await got(`http://1.101.100.211/xxx/xxx?query=${

2021-06-22 11:07:57 361

原创 el-table-column行拖拽列拖拽

一、代码<template> <div style="width: 800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop

2021-06-08 14:55:43 691

原创 vue全局防抖实现

一,在utils文件夹下export function debounce(fn, delay) { let timer = null return function(){ let content = this; let args = arguments; if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fn.apply(content,args) }, delay) }}二、在页面中

2021-05-28 17:59:45 236 1

原创 Fork使用

1.先把代码提交到本地2.pull一下代码3.push到远程分支

2021-05-28 11:19:02 580

原创 vue前端用计算属性实现搜索功能

一、template部分<template> <div id="app"> <input v-model="search" /> <el-table :data="searchData" height="300" highlight-current-row> <el-table-column label="值"> <template slot-scope="scope">

2021-05-27 17:32:06 314

翻译 JavaScript知识点

一、语法1.语句:每一行就是一个语句。2.变量**2.1概念:**例:var a = 1;a是变量,1为数值,把1赋值给a;2.2变量提升:JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造 成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。console.log(a); //undefined 表示变量已经声明,但还未赋值var a = 1;相当于如下代码var a;conso

2021-05-21 15:49:14 24

原创 Vue + Element tree树形控件的懒加载使用

一、效果展示二、视图<el-tree accordion lazy :load="loadNode" :props="props" @node-click="handleNodeClick" ></el-tree>三、data定义props: { label: "nodeCname", children: "zones",},四、script方法//懒加载 loadNode(node, resolve) {

2021-05-20 13:52:54 626

原创 vue 子传父、父传子、ref、bus事件总线(两个组件传参)、后代传值privide和inject、Vue父子组件间传值 之$parent/$children

##父传子父组件定义一个mytitle=“首页”,子组件用props:[“mytitle”]接收,子组件接受:第一种方式:props:[“mutitle”]第二种方式:props:{mytitle:{type:String,//类型default:“默认值”//如果传了就显示传了的值,没传就显示default默认值}}父组件:子组件:##子传父先在父组件中自定义一个@jieshouHandle事件,然后绑定一个函数,函数里的data值就是子组件传过来的参数,在子组件里用this

2021-02-25 16:55:23 514

原创 ajax获取header里的参数

$.ajax({ url: '/api/market_login', type: 'post', contentType: "application/json", complete: function (xmlHttpRequest) { setLocalStorage('token', xmlHttpRequest.getResponseHeader('token')); }, data:

2021-02-19 17:47:58 747

原创 C端或B端怎么用rem

在public-index文件夹下定义适配规则,代码如下:<script> function changeFontSize(width) { // 区分设备和浏览器 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS.

2021-02-03 14:21:57 288

原创 普通文件上传&&表格里的文件上传

普通文件上传template部分:<a-upload-dragger name="file" :multiple="false" //是否支持一次上传多个文件 :accept="accept" //接受上传的文件类型 :data="fileData" //上传所需参数或返回上传参数的方法 :before-upload="beforeUpload" //上传之前的处理 @change="handleFile" //上传文件改变时的状态 :file-list="fileLi

2021-02-03 13:56:05 306

原创 echarts X轴显示不全 显示完全以及换行

echarts X轴显示不全 如下图:如何处理 设置 interval: 0,代码如下:xAxis: { type: "category", axisLabel: { show: true,//x轴文字的配置 interval: 0,//使x轴文字显示全 }}效果图如下:明显重叠解决:使用formatter 换行显示,处理如下:axisLabel: { //x轴文字的配置 show: true, interval: 0,//使x轴文字显示全

2021-02-02 11:10:01 543 1

原创 Ant Design 表格a-table怎么加事件?

antd的表格点击表格整行添加点击或者鼠标划过事件需要给table表格增加一个customRow属性<a-table :columns="columns" id="mySpecialTable" :data-source="data" :pagination="pagination" @change="handleTableChange" :customRow="rowClick"></a-table>methods: { rowClick(recor

2021-01-13 11:08:49 906

原创 浏览器的记住密码,autocomplete= “new-password“解决

例:直接加autocomplete= “new-password”<a-form-model-item prop="userPassword" class="explain-long"> <a-input-password v-model="form.userPassword" autocomplete="new-password" :maxLength="20" placeholder="请输入密码" :style="styleO

2021-01-08 15:11:07 1603 1

原创 事件监听、事件委托

一、事件监听1、可以根据事件监听实现捕获或冒泡现象2、可以为同一个元素添加多次同样的事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ height: 1000px; } </style> <b

2020-12-31 15:37:28 198

原创 拖拽

参考网站https://github.com/gorkys/vue-draggable-resizable-gorkys一、安装引入1.安装$ npm install --save vue-draggable-resizable-gorkys2.在main.js中引入//main.jsimport Vue from 'vue'import vdr from 'vue-draggable-resizable-gorkys'// 导入默认样式import 'vue-draggable-re

2020-12-30 13:28:47 266 4

原创 VUEX

state第一种方法:this.$store.state.count接收数据;第二种方法:1.引入import { mapState } from ‘vuex’ ; 2.映射到当前组件的计算属性中…mapState([ ‘count’ ]MutationMutation用于变更Store中的数据,state是state中的数据,step是参数;第一种方法:this.$store.commit(‘add’,2)接收数据;第二种方法:1.引入import { mapMutations

2020-11-30 15:06:23 67

原创 父传子,子传父

1.父传子2.子传父子传父:顾名思义子组件向父组件传值,它属于 事件传值 。我们来边看代码边注释:先看一下,子组件 -》注释:如图中所示,我们点击button这个按钮,触发了buttonDianji()这个事件,this.$emit() 该机制会向父组件传一个事件helloButton,其内容为逗号之后。并且去父组件-》找这个事件。下面,看一下父组件:到此,子传父,就完成了。:)...

2020-11-30 14:49:27 805

原创 正则

手机号:let patternTel = /^1[3456789]\d{9}$/;patternMob.exec(value)或:phoneReg = /^1(3|4|5|7|8|9)\d{9}$/;邮箱:let patternEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;patternEmail.exec(value)ip地址,多个地址使用于鉴权使用半角逗号’,'分割:let

2020-11-23 13:53:04 69

原创 git操作指南

1、安装安装包下载网址https://github.com/git-for-windows/git/releases/download/v2.14.1.windows.1/Git-2.14.1-64-bit.exe可参照此链接进行安装 http://www.cnblogs.com/tuhooo/p/7497233.html(建议安装在 C 盘)点开安装包点 next 之后安装路径保持默认选项,然后继续下一步点击下一步提示你创建开始菜单,我们继续下一步上图默认的是第二项,但是我

2020-10-30 18:03:50 178

原创 git提交代码、拉取代码

注:git冲突解决办法(只有一个分支master)1.先git add .(先把文件存到暂存区)2.git commit -m ‘第一次提交’(先提交自己的代码)3.git push origin master (提交自己的代码,如果冲突的会报错,不冲突就直接push上去了不用问)4.git pull origin master(拉下最新代码):wq5.git status(查看一下哪个文件冲突了)---------然后在编辑器里解决冲突6.git add .(把解决好的冲突再提交到暂存区)

2020-10-30 17:27:39 354

原创 md5、rsa前端加密

md5加密md5加密最大的特点是不能逆解析,就是数据经过md5加密后,传给后台,后台不可以解密//md5安装npm install --save js-md5//或import md5 from 'js-md5';//md5使用:md5('holle') // bcecb35d0a12baad472fbe0392bcc043rsa加密1.安装:或者直接去jsencrypt下载链接去下载js文件npm i jsencrypt2.main.js引入:import JsEncryp

2020-10-30 16:36:16 141

原创 git代码统计

统计该项目的每个人的代码量:git log --since='XXXX-XX-XX' --until='XXXX-XX-XX' --format='%aN' | sort -u | while read name; do echo -en "$name\t"; git log --author="$name" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added li

2020-10-30 16:13:01 69

原创 严格模式

"use strict"说明:写在哪个作用域下,在哪个作用域下生效;注意:尽量注意不要严格模式写在全局用了严格模式,会有什么变量:1.全局变量声明时,必须加var;2.this无法指向全局对象;3.函数内重名属性;4.arguments对象不允许被动态改变;5.新增保留字:implements,interface,let,package,private,protected,public,static,yield;...

2020-10-27 17:28:48 34

原创 函数

格式:function print(n){ for(var i=0; i<n; i++){ document.write("hellow word") }} print(2)调用函数:格式:函数名(实参1,实参2…)传参:用实参给形参赋值。【注】return关键字:1.return后面写什么的表达式,函数调用的结果就是return后面表达式的值。2.函数运行的时候,如果遇到returrn关键字,整个函数会终止。【注】arguments,系统内置的1.属性:argumen

2020-10-27 17:26:37 42

原创 常量、变量、数据类型转换、运算符

向页面中输出内容:1.document.write('这是一些内容');2.alert('这是一些内容');在页面上弹出警告框;3.console.log('这是一些内容'); 在浏览器调试面板控制台输出内容;关键字typeof格式:typeof 常量/变量 例:alert(typeof 100);功能:输出当前常量或者变量的数据类型;常量和变量:常量------值不可以改变的叫做常量;变量------值可以被修改的叫做变量;常量数据类型:一、基本数据类型:1.数字

2020-10-27 17:24:19 94

原创 冒泡排序、选择排序

冒泡排序规则:前后两个数两两进行比较,如果符合交换条件就交换两个数位置;规律:冒泡排序每一轮排序,都可以找出一个较大的数,放在正确的位置;分析:比较轮数 =数组长度-1;每一轮比较的次数=数组长度-当前的轮数;//冒泡排序代码(从小到大):var arr = [9, 8, 7, 6, 5, 4]; for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length

2020-10-27 17:16:10 44

原创 递归

什么是递归:一、函数自己调用自己;二、一般情况有参数;三、一般情况下有return;写递归的方法:1.首先去找临界值,即无需计算,获得的值;2.找这一次和上一次的关系;3.假设当前函数已经可以使用,调用自身计算上一次;//例:计算1~n的和function sum(n){if(n == 1){ return 1;} return sum(n-1) + n;}alert(sum(100)) //5050...

2020-10-27 17:11:37 40

原创 CSS基础知识点

<一>样式<div style="width:'10px' height:'10px' background:'pink'"></div> //行内样式<style> a{text-decoration:none; color:red;} </style> //内部样式text-aligin:center //让容器内部元素水平居中margin:auto //让容器本身水平居中padding:0px 20px 20px 10px

2020-10-27 17:03:23 87

原创 HTML基础知识点

<一>基本标签注意:超链接不能嵌套超链接;p标签不能嵌套p标签;标题标签h1…h6也不能互相嵌套;<h1></h1> ~ <h6></h6> //1-6标题标签;<p></p> //段落标签;<p></p> //段落标签;<i></i> //斜体;<b></b> //加粗;<br> //换行;<h

2020-10-27 16:33:02 74

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除