Welkin_qing的博客

【代码】页面无滚动条，里面div各自有滚动条。

文章目录一、设置文字以冒号分割右对齐二、设置文字以冒号分割左对齐一、设置文字以冒号分割右对齐类似下面这种情况代码：const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 7 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 17 }, },};二、设置文字以冒号分割左对齐结构如下：代码：const formIt

文章目录一、两个标签区别（1）含义（2）显示区别，上面是pre，下面是code二、使用white-space 进行样式控制一、两个标签区别字符如下： const str = "[{'return_data': 'response', 'return_data_type': 'com.xiaoju.uemc.modules.support.common.Response'}]";（1）含义均来自w3cpre：可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的cod

文章目录一、Antd3二、Antd41. 首先声明form，并且挂载在form元素上2. 根据a值控制b筛选条件是否显示一、Antd3在antd3中可以使用getFieldDecorator去控制表单的显示和隐藏import { Form, Select } from 'antd';const { getFieldDecorator, setFieldsValue } = form; {getFieldDecorator('bizCode')&&(<p>xxxx<

文章目录一、函数中设置数据回显，使用useForm（1）使用useForm（2）在form表单中定义form二、不使用useFormantd4摒弃了antd3的getFieldDecorator，initialValue一、函数中设置数据回显，使用useForm操作如下：https://blog.youkuaiyun.com/Welkin_qing/article/details/110004969（1）使用useForm使用form可以使用antd的setFieldsValueconst [form] =

文章目录一、使用Antd-mobile（1）下载antd-mobile（2）使用二、修改配置颜色（1）安装包（2）修改package.json（3）根目录新建config-overrides.js法一：直接在modifyVars修改法二：根目录下新建antd-theme.json文件注意：一、使用Antd-mobile（1）下载antd-mobile$ npm install antd-mobile --save（2）使用找到react 项目下的public文件夹下的index.html文件修

文章目录一、插件介绍二、代码封装（1）子组件封装（2）父组件调用三、react-viewer插件api一、插件介绍该插件是根据viewJs封装的react可以使用：github: https://github.com/infeng/react-viewernpm: https://www.npmjs.com/package/react-viewer在线演示：https://infeng.github.io/react-viewer/viewJs：github: https://githu

文章目录一、一、

文章目录一、checkbox使用方法：二、解决办法一、checkbox使用方法：<Item label={'信息勾选'}> {getFieldDecorator('xxx')(<Checkbox onChange={handleDeptChange}>xxx</Checkbox>)}</Item>使用之后就会出现如下报错：二、解决办法使用valuePropName来声明：<Item label={'信息勾选'}> {get

文章目录一、antd组件引用默认为英文二、设置为中文1. 引入ConfigProvider，zh_CN2. 对需要设置为中文的组件进行包裹一、antd组件引用默认为英文比如说我这边引用了一个range 时间选择器，显示结果如下所示：二、设置为中文1. 引入ConfigProvider，zh_CNimport { ConfigProvider } from 'antd';import zh_CN from 'antd/lib/locale-provider/zh_CN';import 'mom

文章目录一、position实现图片自适应二、padding补偿法三、图片以正方形显示原图如下：在开发中，想在固定的高度和宽度中显示不一样的图片时，就会出现压缩，导致图片最后显示不好看，以下提供几种方法进行调整：一、position实现图片自适应<div class="father1"> <img src="../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg" alt=""> </div>css

文章目录一、安装ECharts二、折线图三、折线面积图一、安装EChartsyarn add -D echarts-for-reactyarn add -D echarts二、折线图纵坐标和tootip带有百分比，使用了formatter函数进行转换import React, { FC } from 'react';import ReactEcharts from 'echarts-for-react';import styles from './lineChart.module.scss

文章目录一、问题介绍二、如何去掉`*`号一、问题介绍在使用from表单时，当我们设置他的规则relus时，会发现，表单的label左边会出现一个*号代码如下：import React, { FC, useCallback } from 'react'import { Form, Input, Checkbox, Button } from 'antd'import styles from './login.module.scss'interface Props {}const Login:

文章目录一、问题详情二、解决办法一、问题详情今天重构一个项目时，发现，下载了antd的包但是antd的样式没有用上在render函数中输出一个样式const Login: FC<Props> = (): JSX.Element => { const handleOnFinish = useCallback((value: any) => { console.log(value) }, []) return ( <div className={

文章目录一、开发样式介绍二、代码一、开发样式介绍最近开发中，需要用到勾选框，类似下面这种选中样式：选中如下：因为是移动端开发项目，所以需要根据屏幕大小进行缩放使用antd的也可以，只需要覆盖原有样式即可，但是当屏幕变大的时候，勾选框的大小是固定的，同时，阿里的勾选框样式有用到js函数，还是比较麻烦的，所以思来想去还是决定自己手写二、代码react开发环境下，使用的是scss <input name="checkbox"

文章目录1. 安装插件2. 修改package.json文件3. 项目根目录下新建config-overrides.js文件1. 安装插件yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader2. 修改package.json文件将scripts中的start，build，test"scripts": { "start": "react-scripts start", "b

css一般有三大特性 层叠性，继承性，优先级，但是还是存在其他的特性，今天我便将其全部总结一、特殊性关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，...

文档流在这里我们首先介绍文档流 normal flow这个单词还翻译为普通流，标准流CSS的定位机制有3种：普通流（标准流）、浮动和定位。文档流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做文档流布局。一、浮动浮动最早是用来控制图片，以便达到其他元素（特别是...

HTML5新标签与特性兼容性问题 （ie9 以上的版本）文档类型设定documentHTML: sublime 输入 html:4sXHTML: sublime 输入 html:xtHTML5 sublime 输入 html:5 字符设定：HTML与XHTML中建议这样去写：HTML5的标签中建议这样去写...

一、渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变1. linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果a) 语法：linear-gradient( [&amp;amp;lt;point&amp;amp;gt; || &amp;amp;lt;angle&amp;amp;gt;,]? &amp;amp;lt;stop&a

一、2D转换：通过 CSS3 transform转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸.1. 2D移动：translate()。使用translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点语法： translate(tx) | translate(tx,ty)tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值...

文章目录1. 圣杯布局2. 双飞翼布局3. flex弹性盒布局1. 圣杯布局我对header和footer没有设置宽度对left 和right 有设置固定宽度对left，right 和 middle 有设置高度对middle 宽度设置为100%使用定位和margin值将left 和 right 元素进行布局代码上附有步骤：<!DOCTYPE html><...

文章目录一、文档流1. 什么是文档流？2. 什么是脱离文档流二、怎么脱离文档流1. float2. positiona. position：absoluteb. position：fixedc. position：relative三、怎么恢复文档流一、文档流1. 什么是文档流？将窗体自上而下 分成一行一行，并在每行中按照从左到右依次排放元素，称为文档流（normal stream又称普通流）...

文章目录一、flex布局是什么？二、基本概念flex 容器三、容器的属性1. flex-direction属性决定主轴的方向（即项目的排列方向）2. flex-wrap属性定义如果一条轴线排不下，如何换行。3. flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap4. justify-content属性定义了项目在主轴上的对齐方式...

文章目录一、字体格式二、字体图标1. 字体图标优点2. 字体图标使用流程设计字体图标上传生成字体包一、字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。1、TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Oper...

文章目录Js：一、什么是闭包？（要理解闭包的原理）1. 闭包的原理：2. 作用域链3. 创建常见闭包的方式4. 闭包中的this指向问题5. 闭包带来的问题二、什么是原型链，什么是工厂模式1. 工厂模式2. 构造模式2. 原型模式三、如何实现继承1. 实现继承的基本思想2. 原型链3. 原型系统4. 操作原型的方法5. 默认的原型（数组方法是哪来的？）6. 继承a.使用构造器继承b.使用类实现继承...

文章目录1. 自我介绍？2. 问最近做过哪些项目，项目中遇到哪些问题？怎么解决的？解决方案为什么会使用iframe标签？页面是怎么将图片显示在页面上的?iframe的作用和缺点(参考面经)优点：缺点3.你用到了Flex，请问flex怎么设置垂直水平居中？4. css有哪些垂直水平居中方式？5. css选择器有哪些？选择器的优先级？6. position的值有哪些？文档流是什么7. 只允许使用css...

文章目录1. 解决bootstrap tooltip出现问题2. 弹出文字（两种方法）1. 纯css2. 使用popper.js1. 解决bootstrap tooltip出现问题在直接引用bootstrap tooltip 组件时，确定引入bootstrap.js 时还会弹出错误，如下所示：没有引入 popper.js进入官网：https://github.com/FezVrasta/...

一、css 样式CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。...