weixin_60508127的博客

原创 element-ui表格多选,每次只能选中一个并获取数据

摘抄csdn上面的，实际可用，所以做笔记

原创 element ui 搜索案例记录

无

原创 form表单中数组的校验

form表单里面数组的验证

原创 隐藏上传图片的

十点多

原创 手机号码验证和数字验证

data() { var checkphone = (rule, value, callback) => { // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/; if (value === "") { callback(new Error("请输入手机号")); } else if (!this.isCellPhone(value)) { // 引入meth..

原创 vue-elementui省市区三级选择器

1.vue使用elementui的el-cascadernpm install element-china-area-data -S //安装//regionData 是省市区三级联动数据（不带“全部”选项）//CodeToText 是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市//TextToCode 后台省市区显示再页面转code，//TextToCode['广东省'].code， TextToCode['广东省']['深圳市'].

原创 表单提交验证

submitForm() { console.log(this.$refs["ruleForm"]); this.$refs["ruleForm"].validate((valid) => { if (valid) { addList(this.form).then((response) => { this.reset(); }); } }); },..

原创 vue生成二维码

npm iqrcodejs2 --save安装 引入import QRCode from "qrcodejs2"; <el-table-column label="家庭二维码" prop="roleSort" align="center"> <template slot-scope="scope"> <el-button type="text" @click="qrCodeGeneration(scope.row)" ...

原创 清除rules验证

this.resetForm("form");//在reset函数里面加入下面代码，注意两个ruleForm要对应 this.$nextTick(() => { this.$refs["ruleForm"].resetFields(); //清空所有的验证规则 });

原创 vue3安装element ui的方式

命令：npm install element-plus --savemain.js中代码import { createApp } from 'vue';import App from './App.vue';import router from './router';import store from './store';import ElementPlus from 'element-plus';import 'element-plus/dist/index.css';create

原创 安装element ui时报错

原因npm版本太高，解决办法：npm install --legacy-peer-deps element-ui --save

原创 element ui 表格 selection-change函数获取选中项，以数组形式，

<el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> <el-table-column type="selection" width="55" align="center" /> <el-ta.

原创 vue3中静态json文件要放在public中才能请求到

axios.get("/jsons/amap.json").then((res) => { this.homeList = this.homeList.filter((item) => { res.data.find((element) => { if (element.code == item.geoName) { item.geoName = element...

原创 原型与原型链（链式查找）

//（1）每个函数都有一个prototype属性，它默认指向一个object空对象（原型对象） //（2）prototype（显示原型或原型对象）和__proto__（隐式原型）都有一个constructor指回函数对象 //（3）每个函数都有个prototype，即显示原型 //（4）每个实例对象都有个__proto__,即隐式原型 function Scan() { }//创建函数时，内部做了this.prototype={} ...

原创 class类的基本知识

// (1)定义类，首字母大写 //（2）constructor它是类的构造函数，实例化时会自动调用constructor构造函数，类里面面的this指向实例对象。 //（3）使用new关键字实例化创建对象 //（4）类里面的方法放在constructor中调用，实例化时会调用。 class Person {//类里面的函数不用加function constructor(name, age, fro...

原创 react中children类似于vue中的slot（插槽），父给子留位置

App中只引入Father组件，并只渲染它import React, { useState, useEffect, useCallback } from 'react'import Father from './components/Father'export default function App() { return ( <div className='App'> <Father /> </div> )}

原创 数组中的元素是对象，要修改对象属性的方法map()

//map()数组方法，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。//arr.map(function(){})数组中的每个元素都会执行map里面的这个函数 let person = [ { id: "01", name: "再毛", age: "22", height: "173cm" }, { id: "02", name: "真瑛", age: "24", height: "158cm" },

原创 根据id删除数组中对应的对象

todoList=todoList.filter((list) => list.id !== id)//filter过滤出来满足条件的元素组成新数组

原创 字符串转对象时报错 Uncaught SyntaxError: Unexpected token o in JSON at position 1

JSON相关的出错误：Uncaught SyntaxError: Unexpected token o in JSON at position 1分析： JSON格式问题解决：JSON中setItem用双引号，不是单引号

原创 原生js实现无缝轮播图

（1）布局<div id="rotation"> <ol id="dot"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <ul id="rotateFat...

原创 setState()执行是同步，改变里面的值是异步，后面函数参数才能获取到最新值

import React, { Component } from 'react'export default class Demo extends Component { state={count:0} add=()=>{ const {count}=this.state this.setState({count:count+10},()=>{ console.log(this.state.count);//这里面才能.

原创 redux和react-redux

（3）昨天学了redux，今天以登录案例再打了一遍，笔记做好，先来张图（2）布局配置：actions文件夹负责所有的action.js，reducers文件夹负责所有的reducer.js）（3）定义一个contant.js,该模块是用于定义action对象中type类型的常量值(4) 在actions里面定义专门为Login组件生成action对象:目的只有一个，便于管理的同时防止程序员单词写错import {USER_TOKEN} from '../contant'//同

原创 react-redux的reducer必须是纯函数

reducer必须是纯函数：（1）一类特别的函数：只要同样的输入（实参），必须得到同样的输出（返回）（2）必须遵守以下一些约束：1.不得改写参数数据2.不会产生任何副作用，例如网络请求，输入输出设备3.不能调用Date.new()或者Math.random()等不纯的方法...

原创 react路由的基本使用

前端路由v5的使用方式npm install --save react-router-dom@5（1）明确好界面中的导航区、展示区：import { Link, Route } from 'react-router-dom'（2）导航区的a标签改为Link标签<Link to="/home">Home组件</Link><Link to="/about">About组件</Link>（3）展示用route路由标签路径的匹配 ...

原创 fetch数据请求

优化 search = async () => { const { keywordElement: { value: searchName } } = this//连续解构+重命名 //使用fetch发送网络请求 优化 try { const response = await fetch(`/api/search/users?q=${searchName}`) const dat...

原创 react组件传参：pubsub发布订阅机制

订阅和发布消息： npm install pubsub-js --save 或yarn add pubsub-js先订阅，再发布订阅方：import Pubsub from 'pubsub-js'componentDidMount(){const token=Pubsub.subscribe('subscribeMessage',(_,data)=>{//第一个参数是消息名，一定要接或者_占位console.log(data);})}.要在组件的componetnt

原创 代理跨域------------------

（1）只能配置一个：package.json配置 ："proxy":"http://localhost:5000"的跨域：http://localhost:3000/search/users?q=${searchName}`（2）yarn add http-proxy-middleware --save 或 npm install http-proxy-middleware --save安装在src目录下新建setupProxy.js文件：文件中加入const {createProxyMiddl

原创 JQ无缝滑动轮播图

(1)html布局： <div id="rotation"> <ul> <li><img src="imgs/6.png"></li> <li><img src="imgs/1.png"></li> <li><img src="imgs/2.png"></li> ...

原创 数组降维为一维数组

// 数组降维const oldArr = [1, 2, [3, 4,5,6,[10,20,30,[100,1000,200,2000]]]]; const newArr = oldArr.flat(Infinity);//参数为要降的维数，不知道可以放infinityconsole.log(newArr);// [1, 2, 3, 4, 5, 6, 10, 20, 30, 100, 1000, 200, 2000]//递归降维，判断是不是数组 const oldArr ...

原创 es6的reduce用于求数组总和

var arr = [10,20,30,40,50,60] var countAdd = arr.reduce(function (addcount, currentval, index, array) { //数组reduce方法，参数一是个回调（回调：参数1是累计回调的返回值，参数2是数组中正常处理的元素，参数3是正在处理元素的下标，参数4是原数组arr）； //参数2可选，作为第一次调用回调时的第一个参数；在没有初始值的空数组...

原创 拖动事件--------

（1） var div = document.getElementById('box'); var X, Y; function Move(e) { console.log(e); X = e.clientX - 50 Y = e.clientY - 50 div.style.top = Y + 'px' div.style.left = X ...

原创 overflow-x: auto左右滚动只能移动端；overflow-y: scrool；auto*上下pc端也行

div { width: 650px; height: 520px; /* overflow: auto; */ position: relative; margin: auto; overflow: hidden; } body::-webkit-scrollbar { ...

原创 删除数组中的某一个元素

（1）var array = [1,5,2,3,2,5,4,5,5,10,5,5,5]let flag=truewhile(flag){if(array.indexOf(5)>=0){array.splice(array.indexOf(5),1)}else{flag=false;}}console.log(array);（2）var array = [1,5,2,3,2,5,4,5,5,10,5,5,5] var newArry=new Se...

原创 深拷贝的几种方法

(1):递归 function deepClone(obj) { let objClone = Array.isArray(obj) ? [] : {}; if (obj && typeof obj === "object") { for (key in obj) { if (obj.hasOwnProperty(key)) { ...

原创 master合并分支dev，遇到Already up to date问题？

合并分支dev$ git merge devAlready up to date.$ git reset --hard devHEAD is now at bfe6a9b 2019-11-01 针对服务器迁移做出调整

原创 vue 回调函数中，this指向的是undefined(没有用箭头函数)

一图：vue中的回调中的this指向的不是实例，this.不能直接调用data里面的数据，除非用箭头函数；二图：（1）git add . 添加到暂存区，（2）git commit -m""提交到本地 ，git commit -am是提交是包括git add . 的，且不能有新的文件夹，（3）git push origin master 提交到master...

原创 react （旧）生命周期解析

（1）挂载时（2） state状态更新后的流程（3）forceUpdate强制更新（4）父组件从新render之后子组件生命周期

原创 高阶函数和函数柯里化，和react表单双向控制

原创 函数组件中使用ref ，调用useRef()方法

转载 extends和implements区别

extends和implements区别1、在类的声明中，通过关键字extends来创建一个类的子类。一个类通过关键字implements声明自己使用一个或者多个接口。extends 是继承某个类, ****继承之后可以使用父类的方法, 也可以重写父类的方法****;implements 是实现多个接口, *接口的方法一般为空的, 必须重写才能使用*2、extends是继承父类，只要那个类不是声明为final或者那个类定义为abstract的就能继承Java中不支持多重继承，但是可以