- 博客(47)
- 收藏
- 关注
RSS订阅原创 flex布局导致overflow属性失效问题
最近在项目中遇到一个需求，需要动态展示tab，并可手动添加tab，tab超出页面宽度时滚动加载。利用弹性布局这样布局发现overflow-x并不生效给子元素（tab-item）加上 flex: 0 0 auto;flex属性：flex是flex-grow,flex-shrink,flex-basis个属性结合在一起的缩写形式,后两个属性可选写flex-grow：当子元素的空间加起来小于父元素的空间，怎么处理剩下的空间：默认为0表示不占有剩余的空间；为1时标识平均分配剩下的空间；某个子元素为2其他子
2022-06-01 16:19:42
2617
原创 github 自动安装依赖包
原项目网址 https://github.com + ....1. 在 github.com 前加上 gitpod.io/#/ 变成https://gitpod.io/#/github.com2. 点击 Open in Browser3. 自动下载依赖项
2022-05-24 20:00:43
962
原创 react 项目降版本
react最近不是出18了吗但问题是很多的库都还不支持而且工作中不会使用特别新的技术但用create-react-app创建的项目默认为react18版本1. 命令npm install react@17.x react-dom@17.x --save2. 报错：无法解析模块“react-dom在index.js文件中更改为以下内容：import React from 'react';import ReactDOM from 'react-dom';import '.
2022-05-07 17:12:46
732
1
原创 JS 当前日期且增加多少天的
Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表.
2022-04-22 09:46:20
288
原创 可选链操作符 ?.
可选链操作符 ?. 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。此方法不兼容IE浏览器一、语法obj?.prop // 对象属性是否存在obj?.[expr] // 同上arr?.[index] // 数组元素是否存在func?.(...args) // 函数或对象方法是否存在二、基本用法1. 查找一个深度嵌套的可能不存在的子属性时let nestedProp = obj.first && obj.first.second;// 代.
2022-04-20 14:38:54
1019
原创 TS报错：对一个对象定义object类型，无法访问对象属性
这是因为TypeScript并不知道某一个object类型上面就有一个name的属性。方法1：但是如果我们让它是类型推断的，就可以正常的访问这是因为推导出来的类型，是如下的类型：方法2：使用接口interface interface info { name: string; age: number; height:number } const myInfo:info={ name:"why", age:20, h..
2022-04-18 15:45:24
5218
原创 引用css和js链接地址中带的问号
问号是网址（标准叫法是url）中主体部分（文件路径）与参数部分的分割符，一般用于给动态网页传递参数。css和js链接地址中的问号，作用则主要是为了“骗”浏览器的。我们都知道，浏览器肯定都有缓存文件的，当再次访问一个相同的网址时（包括htm、css、js以及各种图片），浏览器会首先去提取缓存文件，尤其是手机上的浏览器，由于涉及流量（每一秒都是钱啊），所以缓存文件的优先级更高，网站上的文件发生变化后，手机上可能过很久都仍然是更新前的页面（有的甚至要过24小时才会生效）。这种做法，虽然可以节省手机流量，但是对
2022-04-18 15:24:51
610
原创 react 中的闭包陷阱
在函数组件中，如果我们在回调函数中使用了 state 的值，那么闭包就会产生。闭包在函数创建时产生，他会缓存创建时的 state 的值。import { useState } from 'react';export default function Counter() { const [count, setCount] = useState(0) function handle() { setCount(count + 1) // 当 setTimeout 执行时，
2022-04-18 10:18:48
1630
原创 input选择输入历史后样式改变
*chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性/* 选择历史记录的文字颜色和背景颜色 */input:-webkit-autofill { -webkit-animation: autofill-fix 1s infinite!important; /* 选择历史记录的文字颜色*/ -webkit-text-fill-color: #666;
2022-04-14 17:25:10
563
原创 组件有默认参数的情况下，传递自定义参数
onMenuItemClick函数的第一个参数{}传递默认的参数，第二参数{}传递其他参数function xx({},{id, title}) { this.h=function(key) { console.log(key); } } const content = (node) => { const { key:id, title } = node.dataRef; return ( // 第一个参数{}传递.
2022-04-13 15:37:02
410
原创 如何处理图片变形
<div class="father"> <img src="xxxxx.jpg"/></div><style>.father{ width: 300px; height: 300px; overflow: hidden; /* position: relative;*/}.father img{ display: block; width: 300px; /* 如果需要图片居中的话.
2022-04-06 10:22:14
201
原创 查看自己电脑的ip地址 ，本地运行项目其他电脑也可以查看
1. 快捷键 Windows+R 打开windows系统的运行窗口2. 输入cmd3. 输入 ipconfig4. 将IP地址放localhost链接前http://localhost:9527/oa/manage/info==> ip地址:9527/oa/manage/info
2022-03-29 15:20:27
847
原创 第五节 函数的 rest 参数
概述：ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；参考文章：https://www.jianshu.com/p/50bcb376a419// ES5获取实参的方式function data(){ console.log(arguments); }data("大哥","二哥","三哥","四哥");// ES6的rest参数...args，rest参数必须放在最后面 function data(a,b,...args){ .
2022-03-25 09:44:49
313
原创 第四节 函数参数的默认值
概述：ES允许给函数的参数赋初始值； 1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)function add(a,b,c=10) { return a + b + c; }let result = add(1,2); console.log(result); // 132. 与解构赋值结合 // 注意这里参数是一个对象 function connect({host="127.0.0.1", username,password, port}){ .
2022-03-23 10:06:07
59
原创 第三节 对象的简化写法
ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法 // 变量和函数let name = "訾博";let change = function(){console.log("活着就是为了改变世界！");//创建对象const school = { // 完整写法 // name:name, // change:change // 简化写法 name, change, // 声明方法的简化 say(){
2022-03-22 15:56:44
285
原创 第二节 数组和对象的解构赋值
* 解构赋值 ：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值* 常用应用场景：频繁使用对象方法、数组元素，就可以使用解构赋值形式；数组的解构const F4 = ["大哥","二哥","三哥","四哥"]; let [a,b,c,d] = F4; // 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥" console.log(a + b + c + d); // 大哥二哥三哥四哥对象的解构const F3 = {
2022-03-22 15:38:08
54
原创 第一节 let ，const 变量声明
一、let1. 不能重复声明let a=100let a=200 // 报错2. 块级作用域{const B="UUUTTT"}console.log(B) // 报错3.不存在变量提升console.log(b) //报错let b=100;4.不影响作用域链let c= "uut"{ function fn(){ console.log( c ) }}fn()二、const1.一定要赋初始值const A； //报错
2022-03-22 15:23:35
98
原创 acro autoExpandParent在Tree组件内不生效
原因：1. autoExpandParent 仅在 Tree 第一次挂载的时候生效。如果数据是从远程获取，可以在数据获取完成后，再去渲染 Tree 组件 。2. Tree组件在子组件内，数据是从父组件获取的解决方法：const [treeData, setTreeData] = useState(null);const isShow = treeData != null;render(){ return (<div> { isShow &&
2022-02-11 16:23:46
1947
原创 取出对象的某个值（数组），数组的可迭代特性消失
const memberInfo= { id: '1-1-1-1', name: '张四', position: '运营', department: ['1-1', '1-2-1'], phoneNumber: '18872632514', identity: 1, manageDepartment: ['1-1-1'], mail: '11722222@qq.com', state: '正常', operate: [['编辑.
2022-01-21 09:54:56
261
原创 redux 教程 --- 基础概念
一、redux 包含以下部分的自包含应用程序state：驱动应用的真实数据源头 view：基于当前状态的 UI 声明性描述 actions：根据用户输入在应用程序中发生的事件，并触发状态更新二、单向数据流用 state 来描述应用程序在特定时间点的状况 基于 state 来渲染出 View 当发生某些事情时（例如用户单击按钮），state 会根据发生的事情进行更新，生成新的 state 基于新的 state 重新渲染 View三、不可变性 ImmutabilityJavaS
2021-12-29 17:36:15
522
原创 react .jsx文件无法格式化
下载Prettier Code formatter extensionVSCode 插件在setting.json文件中配置 "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
2021-12-23 18:52:43
766
原创 字符串indexof方法
给出作为参数传递的当前字符串中字符串首次出现的位置。 如果找不到该字符串，则返回-1。'JavaScript'.indexOf('Script') //4'JavaScript'.indexOf('JavaScript') //0'JavaScript'.indexOf('aSc') //3'JavaScript'.indexOf('C++') //-1您可以传递第二个参数来设置起点：'a nice string'.indexOf('nice') !== -1 //true
2021-12-23 10:25:00
312
原创 react 快速创建组件
参考 ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio Marketplace1. 下载ES7 React/Redux/GraphQL/React-Native snippets2. 再.jsx 或 .js 文件中填入前缀函数式组件的前缀 rfce class组件的前缀 rcc
2021-12-22 17:14:09
617
原创 在 react 中使用 windicss
参考官方文档Webpack 集成 {#integration-for-webpack} | Windi CSSreact 支持craco框架windicss有什么不理解的可以参考Tailwind CSS 中文文档1. 安装 windicss架构yarn add windicss-webpack-plugin -D# npm i windicss-webpack-plugin -D2. 安装craconpm install @craco/craco3. 根目录下创..
2021-12-10 11:48:47
1988
原创 在react脚手架中使用Tailwind CSS （入门）
参考教程 Build a Website with React and Tailwind CSS - SitePoint本文翻译外网，主要自用1. 安装 Tailwind CSS 所需的依赖项npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9我们正在安装具有 PostCSS 7 兼容性版本的 Tailwind CSS，因为在撰写本文时，Create React App.
2021-12-09 15:27:13
3936
原创 react样式模块化
1. 将 .css后缀 文件夹改为 .module.css 后缀的文件夹2. 所有<hello>组件相关的样式都保存在Css中import React, { Component } from "react";import Css from './index.module.css'export default class Hello extends Component { render() { return ( <h1 c.
2021-12-03 15:38:50
571
原创 react脚手架初始化失败
1. 把yarn的安装包删除2. 命令 npm install3. 命令npx create-react-app my-app
2021-11-30 09:19:42
284
原创 vue 中$router和$route的区别和使用
this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。<script setup>import { useRouter } from 'vue-router'const router = useRouter()// 路由跳转function to.
2021-11-22 17:16:50
881
原创 Webpack 和 Vite 区别
Webpack 的工作原理，Webpack 要把所有路由的依赖打包后，才能开始调试。Vite 的工作原理，一开始就可以准备联调，然后根据首页的依赖模块，再去按需加载，这样启动调试所需要的资源会大大减少。...
2021-11-19 18:04:33
1079
原创 vue3 绑定Class (对象和数组语法）
官方文档 Class 与 Style 绑定 | Vue.js对象语法我们可以传给:class(v-bind:class的简写) 一个或多个对象，以动态地切换 class，:class指令也可以与普通的class共存。当有如下模板：<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div><script>data() { ...
2021-11-19 17:56:06
2268
原创 vue3 中使用element UI 的图片组件＜el-image＞
官方文档 环境配置 vue3 中使用 element UI 3 （vite 和 webpack）_qq_48557089的博客-CSDN博客加载失败可通过slot = error可自定义加载失败内容<script setup>// This starter template is using Vue 3 <script setup> SFCs// Check out https://v3.vuejs.org/api/sfc-script-setup.ht...
2021-11-19 17:00:49
2219
原创 vue3 中使用 element UI 3 （vite 和 webpack）
Element Plus官方文档一、安装npm i element-plus然后修改项目入口文件，引入 Element Plus 库和相关样式文件二、完整引入// main.jsimport { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'createApp(App)..
2021-11-19 15:53:54
1351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人