我就是李白-CSDN博客

原创使用react hook来手写个简单轮播图

话不多说，直接上代码import React, { useEffect, useState } from "react";import "./index.css";import list from "./config";import { ListProps } from "./interface";const Carousel = () => { const [count, setCount] = useState(0); useEffect(() => { cons

2022-03-25 18:17:22 1753

原创 react 路由优先级及 switch作用

此文主要介绍下react路由的优先级和switch的作用。export default function App(props) { return ( <div className="app"> <Router> <Link to="/">首页</Link> <Link to="/user">用户中心</Link> <Link to="/login">登

2022-02-21 15:51:18 899

原创前端使用js来获取ip起始和结束地址

为了下次找的方便，写个文章记录下ip起始地址function getLowAddr (ip, netMask) { let lowAddr = ''; const ipArray = []; const netMaskArray = []; // I参数不正确 if (ip.split('.').length !== 4 || netMask === '') { return ''; } for (let i = 0; i < 4; i += 1) {

2021-11-11 15:37:14 1684

原创多页面打包通用方案

首先，我们需要新建一个webpack.mpa.config.js文件；其次，准备好对应的多个页面和对应的js,为了方便可以这样放置总体思路是，通过借助glob，来匹配到我们文件的对应的js的地址（绝对路径），然后匹配到我们的文件名，循环形成entry和htmlWebpackPlugins。上代码const path = require("path");const miniCssExtractPlugin = require("mini-css-extract-plugin");const htm

2021-08-26 14:52:40 325

原创 react + typescript 项目配置别名

react + typescript 项目配置别名第一步首先需要生成一个配置文件npm run eject第二步然后在config文件下面的webpack.config.js 中找到resolve 下面的 alias,写入"@": path.resolve(__dirname, '../src')，我这里默认配置文件路径在config目录下，跟src平级，所以使用…/src。第三步找到tsconfig.json文件，修改experimentalDecorators为true,然后在co

2021-05-12 15:48:24 478

原创 el-select嵌套el-tree实现多选或者单选

实现单选有两种方法方法一html片段<el-select v-model="treeData" placeholder="请选择..." style="width: 16rem"> <el-option :value="treeDataValue" style="height: auto"> <el-tree ref="tree" :data="data" default-expand

2021-01-28 11:11:54 3958 4

原创 vue cli4 sass文件中引入背景图报错的问题

今天在做项目的时候，发现在sass中引入背景图报错，然后去查了查，找到了解决方案，分享一下。在sass文件中应该这样用：background: url(~@/assets/images/apple.png);在.vue文件引用时：<style lang="scss" scoped> @import '~@/assets/css/style.scss';</style>不用添加任何配置文件是借助webpack的前缀@ 是vue里webpack默认的项目代号

2020-11-11 17:16:18 1084

原创 vue element table封装

对vue element table二次封装最近公司要做一个后台管理系统，框架用vue + element,很多模块要用到table组件，基于此现状，对table进行了简单的封装，可以支持自定义搜索选项，可设置是否选择checkbox，增加了对特殊选项的支持，自定义操作栏。以下是代码：table组件<template>  <div> <div class="

2020-11-06 16:48:52 2092 1

原创实现一个简单的装饰器

装饰器是什么装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。下面实现一个简单的装饰器方法一定义一个classclass Log { print(msg) { console.log(msg); }}写一个装饰器const dec = (target, proper

2020-09-07 18:42:46 360

原创 compose合成函数

compose函数如果一个值要经过多个函数，才能变成另外一个值，就可以把所有中间步骤合并成一个函数，这叫做"函数的合成"(compose)。下面介绍两种合成函数。第一种、通过reduce实现function f1(arg) { console.log("f1", arg); return arg;}function f2(arg) { console.log("f2", arg); return arg;}function f3(arg) { console.log("

2020-08-27 12:25:29 410

原创 vscode装饰器报错以及解决方案

解决react中装饰器@编译和警告的问题第一步如果使用的编辑器是vscode,可以打开设置，搜索Experimental Decorators，启用，编辑器将不会报错。该步骤解决编辑器波浪线警告，如果设置了jsconfig.json或者tsconfig.json文件，将覆盖此设置。第二步解决项目编译的报错(1)安装 @babel/plugin-proposal-decorators;npm i @babel/plugin-proposal-decorators 或者 yarn add @babe

2020-07-27 14:10:02 2554

原创 vue动态引入src不生效的问题

html {{item.name}} js tabList:[ {name:'景区VR',url:require("../assets/images/tab-one.png")}...

2019-03-16 13:49:21 1510

weixin_44763349的博客