大大大大雪哥-CSDN博客

原创浅谈react hook （自定义hook）

importReact,{useState}from"react";importReactDOMfrom"react-dom";import"./index.css";//自定义hookconstuseAdd=(val,num)=>{let[count,setCount]=useState(val)constadd=()=>{setCount(count+num)}...

2021-06-26 18:17:52 172 2

原创浅谈react hook （ useImperativeHandle）

importReact,{forwardRef,useRef,useImperativeHandle,useState}from"react";importReactDOMfrom"react-dom";import"./index.css";//useImperativeHandle可以让你在使用ref时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用ref这样的命令式代码。useImperativeHandle应当与forward...

2021-06-20 12:20:00 379

原创浅谈react hook （forwardRef）

importReact,{forwardRef,useRef}from"react";importReactDOMfrom"react-dom";import"./index.css";//forwardRef获取子组件的DomconstForward=forwardRef((props,ref)=>{return(<div><divref={ref}>富婆的快乐你不...

2021-06-20 12:19:34 1202

原创浅谈react hook （useMemo()）

importReact,{useMemo,useState}from"react";importReactDOMfrom"react-dom";import"./index.css";//　useMemo()的出现，避免渲染过程中重复渲染类似shouldComponentUpdate//一个组件重新重新渲染，一般三种情况：//要么是组件自己的状态改变//要么是父组件重新渲染，导致子组件重新渲染，但是父组件的props没有改变//要么是父组...

2021-06-20 12:19:07 162

原创浅谈react hook （useContext()）

importReact,{createContext,useContext}from"react";importReactDOMfrom"react-dom";import"./index.css";//　useContext()的出现，方便了我们在组件之间的状态共享。//不需要多层porps传参//第一步创建createContextconstAppContext=createContext()//组件使用useContext...

2021-06-20 12:18:37 100

原创浅谈react hook （ ref）

importReact,{useRef,useState,PureComponent}from"react";importReactDOMfrom"react-dom";import"./index.css";//使用ref子组件必须是类组件----------------useRef//useRef在使用的时候，可以传入默认值来指定默认值，//需要使用的时候，访问ref.current即可访问到组件实例：classChildrenextends...

2021-06-20 12:18:00 669

原创浅谈react hook （useEffect ）

importReact,{useState,useEffect}from"react";importReactDOMfrom"react-dom";import"./index.css";//useEffect//1，componentDidMountcomponeDidUpdatacomponetWillUnmount//2.副作用(Dom操作数据请求组件更新)//3.useEffect在组件内使用可以获取props和stats采用...

2021-06-20 12:17:17 116

原创浅谈react hook （useState hook）

importReact,{useState}from"react";importReactDOMfrom"react-dom";import"./index.css";//useStatehookfunctionApp(){const[count,set]=useState(0)const[obj,setObj]=useState({name:'翠花'})const[arr,setArr]=useS...

2021-06-20 12:16:48 86

原创浅谈react hook （父子传参）

importReactfrom"react";importReactDOMfrom"react-dom";import"./index.css";//1.父子间传参classSonextendsReact.Component{constructor(props){super(props);this.state={}}componentDidMount(){...

2021-06-20 12:16:09 664 2

原创浅谈react hook （方法的使用）

importReactfrom"react";importReactDOMfrom"react-dom";import"./index.css";//1.React组件的发展//一，函数组件功能组件也叫无状态组件，一般只负责渲染结构functionWelcome(props){return<h1>你好呀,{props.name}</h1>;}//二，类组件也是有状态组件，也可以叫容器组件。一般有交互逻辑和业务逻辑。...

2021-06-20 12:15:31 135

原创浅谈react hook （组件）

importReactfrom"react";importReactDOMfrom"react-dom";import"./index.css";//1.React组件的发展//一，函数组件功能组件也叫无状态组件，一般只负责渲染结构functionWelcome(props){return<h1>你好呀,{props.name}</h1>;}//二，类组件也是有状态组件，也可以叫容器组件。一般有交互逻辑和业务逻辑。...

2021-06-20 12:14:44 168

原创 vue大屏项目中实现循环滚动

一，导入组件importBannerfrom'@/components/banner'components:{banner},二在作为标签内使用 <banner:isHover="true":list="bikeList":timeSpace="3000":showCount="count":length="bikeList.length"v-if="bikeList.length>0"class="warp">...

2021-06-15 23:13:38 1430

原创 css流光样式

2021-06-09 15:34:46 441 1

原创 border边框渐变

.item{ width:2.5rem; height:0.48rem; border-right: 2px solid;border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;border-image: -moz-linear-gradient(-180d...

2021-06-05 11:27:22 375

原创 vue全局挂载组件当做标签使用

一创建组件title1.vue统一导出二 plugin.jsimportTitle1from'@/components/business/title1'importTitle2from'@/components/business/title2'importTitle3from'@/components/business/title3'importNumberChainfrom'@/components/business/numberChain'im...

2021-05-09 22:37:32 388

原创 echarts 饼状图legend 显示比例

formatter:function(name){//获取legend显示内容letdata=option.series[0].data;lettotal=0;lettarValue=0;for(leti=0,l=data.length;i<l;i++){total+=data...

2021-05-09 22:36:07 403

原创 three.js 基础展示

npm i three -------------------------------------------- <template> <div id="t-container"> <div class="title">基础示例</div> </div> </template> <script> import * as THREE from 'three' let camera, scen...

2021-05-09 22:32:28 135

原创设置浏览器默认滚动条样式

.mian { width: 238px !important; background-color: #fff; border: 1px solid #eaeaea; ::-webkit-scrollbar { /* 这里的宽是指竖向滚动条的宽，高是指横向滚动条的高*/ width: 7px; height: 8px; background: pink; } /* 滚动条凹槽，还可以设置边框属...

2021-03-14 20:29:08 355

原创其他页面调用接口后刷新当前页面

根组件<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div></template><script>export default { name: 'App', provide (){ return { reload:this.reload } }...

2021-03-10 22:18:06 627

原创基于ElementUI自定义上传附件

<el-upload style="display: inline-block" :limit="6" class="upload-demo" action="#" ref="upload" multiple :file-list="fileList" :on-change="handleChange" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" :http-request="uploadS...

2021-03-10 22:05:19 469

原创在后端没有定义数据的格式的情况下附件下载，定义了数据流的格式请看下一篇文档

// 附件下载filesLoad(item) {console.log(item)attachDownload({ id: item.id }).then((res) => {console.log(res)if (res) {let blob = new Blob([res.data], { type: ‘application/vnd.ms-excel;charset=utf-8’ })if (window.navigator.msSaveBlob) {window, naviga

2021-03-10 21:46:19 85 1

原创 vue3.0 上手体验

第一步，安装 vue-cli： npm install -g @vue/cli 第二步，安装成功后，我们即可使用 vue 命令，测试方法： $ vue -V@vue/cli 4.5.9 第二步，初始化 vue 项目： vue create vue-text 第三步，输入命令后，会出现命令行交互窗口，这里我们选择 Manually select features： Vue CLI v4.5.9? Please pick a preset: ..

2021-02-13 21:20:01 165 1

原创 axios结合ElementUi结合封装

import { getCookie, delCookie } from ‘@/utils/cookie’import router from ‘@/router’import store from ‘@/store/index’import { Message, MessageBox } from ‘element-ui’const axios = require(‘axios’)axios.default.withCredentials = true// const url = ‘http:

2021-02-13 19:52:34 213 1

原创在页面中实现全屏操作

/*全屏展示*/allScreen1(){letelement=document.documentElementif(!this.allScreen){if(document.exitFullscreen){document.exitFullscreen()}elseif(documen...

2021-02-12 23:39:24 124

原创 websocket的封装和服务器断线重连

import{Message}from'element-ui'exportconstconnectSocket=(userId)=>{if(!userId){return;}letlockReconnect=false;//避免重复连接//判断当前浏览器是否支持WebSocketfunctioncreateWebSocket(){try{...

2021-02-06 15:05:53 229 1

原创 eslint配置

//https://eslint.org/docs/user-guide/configuringmodule.exports={root:true,parserOptions:{ecmaFeatures:{experimentalObjectRestSpread:true},ecmaVersion:6,sourceType:'module'...

2021-02-06 15:02:35 122 1

原创 vue.config.js 配置

constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPluginconstpath=require('path')constwebpack=require('webpack')//constAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')constos=require('os')//con...

2021-02-06 15:01:09 643

原创格式化时间

exportfunctionformatTime(date,fmt='yyyy-MM-dd'){if(!date)returndateif(typeofdate==='number'&&!isNaN(date)){date=newDate(date)}varo={'M+':date.getMonth()+1,'d+':date....

2020-12-22 16:46:01 108

原创 Cookie的创建和获取删除

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息":当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。Cookie 以名/值对形式存储，如下所示:username=LimisJavaScript 可以使用document.cookie属性来创..

2020-12-21 11:44:31 312

原创简易sessionStorage&&localStorage封装

//简易localStorage封装import{stringify,parse}from'./index'constls=window.localStorageconstss=window.sessionStorageexportdefault{//def作为后备内容get(key,def){letval//无论什么key，都会在session和local中寻找;(val=ls...

2020-12-21 09:41:23 129

原创 vue3.0 实战滚动案例

<template><divclass="home"><divclass="all"><ul><liv-for="(item,index)innum":key="index":class="[index===IndexActive?'active':'']">{{item}}</li></ul></div...

2020-12-21 09:34:39 389

原创组件的封装

1.父组件传值到子组件（props）2.子组件传值到父组件（$emit）3.插槽使用（slot）。对于一个独立的组件，props是用来为组件内部注入核心内容；$emit用来使这个组件通过一些操作来融入其它组件中。1.首先，可以看到前端工程下有一个components目录，在components下新建一个文件夹xx-button，再在xx-button下创建一个index.vue文件2.然后在index.vue中写自己的代码。为了规范，注意代码中的name命名XxButton，以后使用的组件就是.

2020-10-21 15:23:00 1006

原创 vue axios 文件下载

接口的封装import{baseRequest}from'@/API/load.js'exportfunctiongetLoadTable(query){returnbaseRequest({url:'/catalog/dataOpen/dataExport',method:'GET',params:query,responseType:'blob'})}拿到...

2020-10-14 16:24:35 499

原创 axios 项目配置

importaxiosfrom'axios'importVuefrom'vue'letbaseURLif(process.env.NODE_ENV==='development'){baseURL='http://36.26.8.99:9080'}elseif(process.env.NODE_ENV==='production'){baseURL='http://36.26.8.99:9080'}constSUCCE...

2020-09-14 16:49:56 150

原创 Vue 上线优化

项目优化--进度条添加安装nprogress，ui界面依赖安装依赖，搜索nprogress进行安装即可在main中导入进度条组件 //导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css' 利用NProgress.start()显示进度条 NProgress.start() 利用NProgress.done()隐藏进度条 NProgres

2020-08-25 21:00:13 124

snowXZZ的博客