- 博客(35)
- 收藏
- 关注
原创 浅谈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 175 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 383
原创 浅谈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 1205
原创 浅谈react hook (useMemo())
importReact,{useMemo,useState}from"react";importReactDOMfrom"react-dom";import"./index.css";// useMemo()的出现,避免渲染过程中重复渲染类似shouldComponentUpdate//一个组件重新重新渲染,一般三种情况://要么是组件自己的状态改变//要么是父组件重新渲染,导致子组件重新渲染,但是父组件的props没有改变//要么是父组...
2021-06-20 12:19:07 165
原创 浅谈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 673
原创 浅谈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 120
原创 浅谈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 667 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 136
原创 浅谈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 169
原创 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 1441
原创 css流光样式
<style> .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-height: 90px; text-align: center; color: #fff; font-size: 25px; text-tr...
2021-06-09 15:34:46 447 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 377
原创 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 390
原创 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 404
原创 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 359
原创 其他页面调用接口后刷新当前页面
根组件<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 629
原创 基于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 471
原创 在后端没有定义数据的格式的情况下附件下载,定义了数据流的格式请看下一篇文档
// 附件下载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 214 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 232 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 123 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 652
原创 格式化时间
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 313
原创 简易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 1009
原创 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 151
原创 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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人