chunchun1230-CSDN博客

转载 ant-design pro导出表格数据为Excel文件

环境React+Ant Design一.安装插件js-export-excel1.yarn安装-记得以管理员身份执行yarn add js-export-excelnpm安装npm install js-export-excel2.代码示例：页面先引入安装的插件import ExportJsonExcel from 'js-export-excel';导出按钮：return（<div><Button type="primary" onClick={

2022-05-17 09:10:06 5067

转载 JS / 常用高阶函数

map()map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。注意：map() 不会对空数组进行检测。注意：map() 不会改变原始数组。/** * @param currentValue 必须。当前元素的值 * @param index 可选。当前元素的索引值 * @param arr 可选。当前元素属于的数组对象 * @param thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "

2021-03-31 23:41:41 4067

转载 Mac下全局安装yarn

sudo -snpm install -g yarn react-native-cli

2021-03-08 12:33:58 5198

转载 react组件引用less样式失效问题记录

在react项目中使用了less来预处理css,但是在项目中却遇到了引用样式不生效的问题，现记录如下：页面代码：import React, { Component } from 'react'import { connect } from 'react-redux'import './index.less';class PriceProtection extends Component { render() { return ( <div cla

2021-01-19 10:16:53 5340

转载 React 点击按钮显示div与隐藏div

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>React 点击按钮显示div与隐藏div</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="htt...

2021-01-07 16:14:03 1660 1

转载 2020-12-24

minix 是个什么东西，就是混合，把你混合给我浅显表述就是你说： ‘我叫李四’，我说： ‘我叫张三’，然后把你混合给我，就成了我说： ‘我叫张三我叫李四’，所有解说都在例子里，如下：// minix.jsexport default { data () { return { name: 'minix', minixName: 'minixObj', ...

2020-12-24 09:52:18 137

转载 Vue中的异步组件

使用过vue 的小伙伴都知道Vue自定义组件，和组件引入方式。今天笔者要记录并介绍vue 组件的三种引入方式。传统引入方式，即最常见的引入方式 import leftLine from "@/views/admanage/components/stepline";components: { leftLine },这是使用本地注册的方式将组件引入，在项目初始加载时，组件就被引入、使用、加载当项目越来越大的时候，就需要考虑速度性能的问题，显然上面的方法是不合理的，这就需要..

2020-12-23 14:10:53 182

转载 Vue—组件实例之$nextTick

一、概述DOM更新循环结束后，执行延迟回调。二、详解$nextTick有两个使用场景。场景一钩子函数created中进行的DOM操作一定要放在$nextTick的回调函数中。因为created执行时，DOM并未进行任何渲染，无法操作DOM。与之对应的钩子函数mounted中可以进行任何DOM操作，因为该钩子执行时，已完成DOM渲染。<script>export default { created() { this.$nextTick(() => {

2020-12-22 22:54:29 207 1

转载 vue 兄弟组件之间的传值

一. 子传父，父传子。二.1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。实例如下：我们可以创建一个单独的js文件eventVue.js,内容

2020-12-22 10:06:02 478

转载 vue中的事件修饰符

（１）. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）　　　　　　点击内层div的结果：　　　　　　点击外层div的结果：　　　　　　修改代码，为内层点击事件添加事件".stop"修饰符：　　　　　　再次点击内层div的结果如下：　　　　。（２）. prevent：阻止默认事件的发生　　默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件

2020-12-21 15:36:47 226

转载 Vue如何自定义一个过滤器

html代码：<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }}</div>js代码：var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!

2020-12-18 12:56:28 518

转载 React中key属性的作用及原理解析

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Test`. See https://fb.me/react-warning-keys for more information.相信在react的使用过程中，大家或多或少都会遇到过这样的警告，这个警告是提醒开发者，需要对渲染的组件添加key属性，那么，这个key属性的作用到底是什么呢？我们先

2020-12-14 10:35:00 306

转载 2020-12-02

一安装Vue cli#使用淘宝npm仓库加速npm config set registry https://registry.npm.taobao.org#安装Vue clinpm install -g @vue/cli二创建UniAppvue create -p dcloudio/uni-preset-vue 你的项目名选择模板使用方向键,选定后按ENTER;三进入项目目录并编译cd 你的项目名称npm run serve四打开浏览器...

2020-12-02 14:44:21 154

转载请描述一下cookies，sessionStorage和localStorage的区别？

⒈localStorage长期存储数据，浏览器关闭数据后不丢失；⒉sessionStorage数据在浏览器关闭后自动删除；⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session storage和local storage不会自动把数据发给服务器，仅在本地保存；⒋存储大小：cookie数据大小不会超过4K，session storag...

2020-12-01 11:51:55 349

转载 Promise.all和Promise.race的区别

Promise.all()可以将多个实例组装个成一个新实例，成功的时候返回一个成功的数组；失败的时候则返回最先被reject失败状态的值。适用场景：比如当一个页面需要在很多个模块的数据都返回回来时才正常显示，否则loading。promise.all中的子任务是并发执行的，适用于前后没有依赖关系的。let wake=(time)=>{ return new Promise(function (resolve,reject){ setTimeout(()=>{

2020-11-12 17:54:28 881

转载数组的扩展运算符应用（十个随机数）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //扩展运算符,可以将一个数组转为用逗号分隔的参数序列. //完成:随机产生十.

2020-11-12 10:44:48 267

转载 ES6 入门——变量的解构赋值

1.ES6 声明变量的六种方法ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。2.数组的解构赋值ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应

2020-11-11 12:55:51 403

转载 JS中使用typeof能得到哪些类型

typeof用于判断数据类型，返回值有6个字符串：string、number、undefined、boolean、object、functionarray、object、null、函数实例（new + 函数）通过typeof判断都为objectArray、Object、function(){}、(()=>{})、Function通过typeof判断都为functionconsole.log(typeof 'aa') // stringconsole.log(typeof 4) // .

2020-11-06 14:22:54 790

转载 js值类型和引用类型的区别

js值类型和引用类型的区别1.javascript中变量类型分为值类型（基本数据类型）和引用类型(1)值类型：String(字符串)，Number(数值)，Boolean(布尔值)，Undefined，Null(2)引用类型：Array(数组)，Object(对象)，Function(函数)2.值类型和引用类型的区别(1)存储位置不一样①值类型的变量会保存在栈内存中，如果在一个函数中声明一个值类型的变量，那么这个变量当函数执行结束之后会自动销毁②引用类型的变量...

2020-11-06 14:01:34 424

转载 js 中 !!的用法

!!是将表达式强制转化为bool值的运算，运算结果为true或false，表达式是什么值，结果就是对应的bool值，不再取非。不是取非再取非的意思！！！!!false=false; 要注意false和“false” 的区别！！！！！!!"false"=true;!!true=true;!!(NaN || undefined || null || 0 || ' ')=false;...

2020-10-29 15:11:50 265

转载 dangerouslySetInnerHTML属性

dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容import React from 'react';class SetHtml extends React.Component { constructor(){ super(); this.state = { content:'<h1>标题名称</h1>' } } render() { return ( <div&g

2020-10-27 14:12:28 626

原创 package.json中“private”属性的用途是什么？

private如果你在你的package.json中设置了“private”：true，那么npm将拒绝发布它。这是防止私人存储库意外发布的一种方法。

2020-10-14 17:40:40 1318

转载 vue——@click的事件命令以及修饰符

1、@click.stop 阻止事件冒泡//只弹出“noclick”<div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", .

2020-09-29 13:51:41 17390 1

原创 vue星级评分组件

<template> <div class="Rating-gray"> <i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i> </div></template><script>//星星长度const LENGTH =5;//星星对应的classconst CLS_ON = ".

2020-09-22 13:53:57 290

转载算法:JS对象数组根据某属性分组方法

1、需要进行分组的数据,根据 StEntId 进行分组letListData=[{StEntId:1,StEntName:'企业名称企业名称',EsGrade:1,OrderDt:'2019-12-01'},{StEntId:1,StEntName:'企业名称企业名称',EsGrade:4,OrderDt:'2019-12-02'},{StEntId:2,StEntName:'企业名称企业名称',EsGrade:5,OrderDt:'201...

2020-09-09 18:24:55 2601

转载 Vue-组件参数校验与非props特性

1.组件参数校验——父组件向子组件传递一些内容，子组件有权对接收的内容进行一些约束（即组件接收的参数是有规则可定义的），这些约束就是组件参数校验。子组件通过props接收传递参数，并说明传递参数的属性：type——参数类型 required——是否必传 default ——默认传的值 validator——自定义校验器，要求字符串长度等2.props特性——子组件里声明了对父组件传递的属性的接收（父子组件之间有对应关系）（1）传递的属性不会在控制台的dom标签上显示（2）子组件模板可以通

2020-09-08 11:52:45 120

转载 vue-cli4.0更新后怎样将eslint关闭

昨天新起了个项目，刚开始就报一长串错误，百度了一下发现是eslint的原因，但是我根本就没安装那个包，然后继续百度，发现是vue-cli升级了，eslint成了默认选项的必选包了；如何解决呢？1、在新建项目时不勾选：　你会法现，eslint是默认的，选中它空格就好了，然后选择自己需要的内容就好了2、如果你不知道自己需要什么内容，就选择默认的；虽然里面也有eslint；建完项目后将他关闭就好了；在新建好的项目根目录下新建文件vue.config.js...

2020-09-07 18:17:01 704 1

转载微信小程序怎么获取当前页面的url

使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。var pages = getCurrentPages() //获取加载的页面var currentPage = pages[pages.length-1] //获取当前页面的对象var url = currentPage.route //当前页面urlvar options = currentPage.options //如果要获取url中所带的参数可以查看op.

2020-09-04 13:15:44 4475

原创执行build命令期间移除所有的console

利用babel-plugin-transform-remove-console插件在执行build命令期间移除所有的console地址：https://www.babeljs.cn/docs/babel-plugin-transform-remove-console1.执行命令行安装此插件npm install babel-plugin-transform-remove-console --save-dev2.在babel.config.js引入此插件module.exports =

2020-09-03 15:21:18 257

转载 JS - 获取文件后缀，判断文件类型（比如是否为图片格式）

http://www.hangge.com/blog/cache/detail_1754.html

2020-08-14 13:43:00 367

转载 padStart()方法,padEnd()方法

padStart()和padEnd()方法的使用用法（官方）：　　padStart() 方法用另一个字符串填充当前字符串（重复，如果需要的话），以便产生的字符串达到给定的长度。填充从当前字符串的开始（左侧）应用的。padEnd() 填充从当前字符串的末尾（右侧）应用的。　　理解：ES2017引入了字符创补全长度的功能。如果某个字符串不够指定长度，会在头部或者尾部补全。padStart() 用于头部补全，padEnd() 用于尾部补全。语法：　　str.padStart(tar..

2020-08-13 11:51:37 3614

转载动态修改JS对象的值及React setState

一、在JS里使用(非ES6)实现场景: 给一个空对象填充某一指定数组内的值并随机生成数量const fruit = ['apple', 'banana', 'orange']let fruitInfo = {}fruitInfo = fruit.map(item => { return { [item]: Math.floor(Math.random() * 10) }})console.log(fruitInfo)输出:[{apple: .

2020-08-04 16:56:24 516

转载 antd 父组件获取子组件中form表单的值

子组件import React, { Component } from 'react';import { Form, Input } from 'antd';const FormItem = Form.Item;class Forms extends Component{ getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据） const valus= this.props.form.getFieldsV

2020-07-24 15:57:32 6843 1

转载 react之withRouter的作用

withRouter的作用：把不是通过路由切换过来的组件,将react-router的history、location和match三个对象传入到props对象上；默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push('/detail')跳转到对应路由的页面然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时

2020-07-10 11:43:37 1848

空空如也

空空如也