qing_小诺-优快云博客

原创【CSS】关于文字的换行问题

那么如何让div中的文字不超出呢？这就涉及到 word-break 和 line-break 属性。

2024-03-06 14:00:06 457

原创【CSS】解决height = line-height 文字不垂直居中（偏上、偏下）的问题

查看 font-family 属性，确认是否是因为字体而导致的不垂直居中问题。line-height 属性设置的行高也就是定义的两行文字基线之间的距离!基线就是小写x字母的下边缘(线) 就是我们常说的。

2024-01-15 15:47:03 2938

原创【CSS】设置0.5px的边框宽度

直接写border:0.5px solid #ccc;总结：目前推荐的是伪元素+tranform缩放的方法，相对灵活一点，可以针对不同元素进行设置。

2024-01-04 09:27:05 1842

原创【Antd】DatePicker日期选择框设置disabledDate不可选择的日期

需要先引入moment。

2023-08-14 13:57:31 2344

原创【React】Antd Select选择器多选设置最多只能选3个

起初是想在Select的onchange事件中判断values的数量，数量大于三个的时候来重新setFieldsValue。后来发现在Antd3X版本中 setFieldsValue方法不起作用，Select的值还是会一直增加。亲测好用，方法如下：就是在 onChange 事件中判断选中值的数量，如果大于3，则调用。应用场景描述：Antd3X版本，想要实现form中的 Select 多选最多只能选3个。3、方案3：validator（适用Antd3X、4X版本）

2023-01-13 15:58:35 3428

原创【React】react-beautiful-dnd 拖拽排序功能的实现

如果 react 项目中需要用到拖拽功能，可以使用 react-beautiful-dnd 插件。点上图中的“All the examples!index.js代码如下：稍加改造就能直接用到项目中啦~~~

2023-01-11 13:27:50 1273

转载【git】将多个提交合并为一个commit

我们这里需要将add4、add3、add2,合并到add1中，因为add1是最靠近上一个commit_id的，因此这里选择将add4，add3，add2合并到add1中。这里的commit_id是待合并的多个commit之前的那个commit ID，这里也就是上图中add1下面的那个commit ID。从上图中，可以看到，我这里已经将add1、add2、add3、add4这4个commit合并成1个新的commit。修改完成后，按esc键，冒号，输入wq进行保存。Successfully表示操作成功。

2022-10-24 10:21:27 8538

原创 chrome安装react-devtools开发工具

在网上找的 react-devtools 离线包乱七八糟、各色各样，放在浏览器中工具展示的并不清晰。那就根据官网自己编译一个用吧，下面记录下怎么编译的，不想编译的，可以直接下载这个文件，然后直接跳到最后一步的安装扩展程序即可。）把上面README中写的翻译过来就是：此项目已迁移到扩展的v3的源代码可以在v3分支中找到。要从源代码构建v3浏览器扩展：（需要执行下面的命令）

2022-08-19 16:20:24 3830 1

原创【ts】基础知识要点

构造函数 constructor继承 extends抽象类 abstract//父类//添加abstract，表示抽象类，只是不能用来创建实例对象，它专门用来被继承//抽象类中可以添加抽象方法//构造函数console.log("Animal--构造函数---");// }// 抽象方法,该方法没有方法体，子类必须对抽象方法进行重写// const animal=new Animal()//报错//子类const dog = new Dog('旺财', 2);

2022-08-09 17:10:09 584

原创【git】git merge 合并分支时遇上refusing to merge unrelated histories的解决方案

原因：由于两个分支拥有不相关的提交历史，所以是拒绝合并的，如果确实需要合并，则可以在执行merge命令时指定一个 --allow-unrelated-histories 的参数，会允许合并不相关的历史。即可成功合并，确认没有问题之后提交分支。...

2022-08-05 09:28:57 1206

原创【git】解决Failed to connect to github.com port 443: Timed out

今天在提交代码的时候，提示下面的错误: 这个错误大致是说连接到github的时候超时了。那么该怎么解决呢？很简单，这个超时了无非就是你的代理出了点问题，不过好在git上用几个命令就能够很快搞定：然后就可以提交啦，亲测好用！...

2022-08-04 09:28:11 2167

原创【React】基础知识要点

react基础知识要点

2022-07-11 22:26:39 198

原创【Vue】基础知识要点

vue基础知识要点

2022-06-30 22:02:13 373

原创【git】OpenSSL SSL_read: Connection was reset, errno 10054 的解决办法

今天在提交代码的时候,提示下面的错误:产生原因：一般是这是因为服务器的SSL证书没有经过第三方机构的签署，所以才报错。参考网上解决办法：解除ssl验证后，再次git即可在终端执行下面的命令：git config --global http.sslVerify "false"...

2022-05-03 09:48:59 1714

原创 react 使用antd后ie11不能正常访问的解决办法

step1：安装 react-app-polyfill【npm i --save react-app-polyfill】step2：修改 package.json 文件，在指定位置添加 "ie 11"，如下图：step3：在入口文件index.js文件的头部添加两行代码（貌似不加也行）：import 'react-app-polyfill/ie11'import 'react-app-polyfill/stable' 然后重启项目，在ie中访问即可看到页面。...

2021-04-30 10:43:56 1535

原创【React】使用脚手架搭建的项目使用less文件

使用create-react-app脚手架工具搭建的项目中，使用less文件运行不会报错，但是样式会无效。原因：create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式，其构建的项目默认是不支持less的，需要我们手动集成。解决：step1：安装less和less-loader插件包：【npm install less less-loader --save-dev】step2：新建项目一般默认不显示config目录的，需要执行：【npm.

2020-08-11 15:20:18 877 1

原创【Vue教程十一】监听属性watch 和计算属性computed

一、监听属性watch1、使用这个属性可以监听data中指定数据的变化，然后触发这个watch对应的function函数：<template> <div> <input type="text" v-model="firstName" /> + <input type="text" v-model="lastName" /> = <input type="text" v-model="fullName" />

2020-07-20 16:47:32 392

原创【Android】用Android Studio创建第一个应用的初始化设置

step1：安装Android Studio到官网（https://developer.android.google.cn/studio/）下载开发工具并安装：安装Android Studio之后，不用像之前还得配置环境变量啥的了哈，挺方便的。step2：下载Android SDK在工具的右上角的位置，可以看到下载sdk的入口，step3：Gradle手动下载和安装新建完第一个项目后，我们发现他一直在下载gradle-6.1.1-all.zip。如下图，...

2020-07-20 15:19:14 970

原创【Vue教程十】过渡和动画

待续

2020-04-20 17:15:46 521

原创【React】父组件获取子组件的值或方法

先来说下从哪获取的启发，想要从父组件获取子组件的值或方法。。。一次写代码的时候，用 Antd 中的 Modal 包裹了一个子组件，子组件中包含 input 输入框，想要在点击对话框上面确定按钮时（即Modal 自带的onOk方法），拿到其中输入的值，，，，下面用一个父组件（Father.js）和子组件（Hearder.js）来演示如何能拿到值和方法：方法一：给子组件添加属性...

2020-04-03 16:33:20 13936

原创【Vue】移动端和PC端 UI框架

自从Vue成为前端的主流框架之后，各家UI框架也越来越多，今天重点聊一聊那些框架吧，以下排名不分先后，开发过程中根据自己的具体业务需求来做选择。一、移动端UI框架：1、vonic中文文档：https://wangdahoo.github.io/vonic-documents/#/在线预览：https://wangdahoo.github.io/vonic/docs/#/home...

2020-04-02 18:19:06 3661 1

原创【JS】用js控制css样式加 !important 无效的解决方法

问题的发现：众所周知，用下面的方式可以成功地设置高度：$("#test").css("height", "300px");偶然间需要把属性添加 important ，于是乎像下面这样子写：$("#test").css("height", "300px !important");然鹅发现并不生效！！！解决办法：下面这样写就ok啦：$("#test").css(...

2020-04-02 16:40:11 2242 1

原创【JS】window.getSelection()获取input中选中的值，兼容ie

先来描述一下问题：想要用户在触发复制事件的时候，获取选中的值，所以在script中加入了如下代码：(function () { function addEventListener(eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if (document.addEventListener) { ...

2020-03-24 18:17:06 3387

原创【React】Antd实现表格序号递增

直接上代码：const columns = [ { title: '序号', dataIndex: 'index', render:(text,record,index)=>`${index+1}`, }, //...];原文地址：https://www.cnblogs.com/shenyi/p/11983918.html...

2020-03-10 20:20:45 2389 1

原创【React】开箱即用的中后台前端 - Ant Design Pro

官方文档：https://pro.ant.design/index-cn用Ant Design Pro可以快速搭建一个后台前端页面。搭建步骤：step1：新建项目文件夹，cd到项目下，然后执行【yarn create umi】或者【npm create umi】，按下两次回车键，依次是选择Ant Design Pro和选择语言，如下图：step2：安装依赖：【npm i...

2019-09-26 14:39:45 745

原创【CSS】修改滚动条样式

原生的滚动条有点儿丑，如下代码实现简单的滚动条：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...

2019-09-23 10:07:46 237

原创【CSS、JS】修改单选框样式，监听单选框

懒了懒了，废话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...

2019-09-20 18:04:14 1257

原创【jquery】给元素addClass并绑定点击事件，点击事件不生效的解决办法

问题还原：现有一个div，我们在点击时，把原来class给去掉，并给它添加一个新的class，然后监听这个新的class的点击事件，但是没生效。代码如下：<body> <div class="open">展开</div> <script> $(".open").click(function () {//展...

2019-09-19 14:35:15 4145 2

原创【Vue教程九】获取服务器api接口数据

获取服务器api接口数据有下面几种方法：方法1：axios（https://github.com/axios/axios）看文档使用，与react引用方式相同。方法2：vue-resource （https://github.com/pagekit/vue-resource/blob/develop/docs/http.md）使用实例如下：<!DOCTYPE ......

2019-09-11 10:33:42 10098

原创【Vue教程八】生命周期

由于官方版本生命周期图示有点儿大，拉过来会不清晰，图示直接点击链接吧：生命周期图示下面我们将结合代码去看看钩子函数的执行：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...

2019-09-10 10:15:53 218

原创【Vue教程七】自定义指令、钩子函数

一、钩子函数先来看一个场景，有一个input框，我们想让页面加载完成后，给输入框自动获得焦点，那应该怎么做呢？其实很简单，现在让我们用全局自定义指令来实现这个功能：<body> <div id="app"> <input v-focus /> </div> <script> ......

2019-09-09 16:51:24 3744

原创【CSS】一个div宽度或高度固定，另一个div铺满剩余空间

如果我们想实现下图的效果（一行中放两个div，左边的一个div宽度固定，右边的div横向铺满）：首先我们先写三个div：父div包裹两个div。<body> <div class="content"> <div class="left">left</div> <div class="righ...

2019-08-30 16:33:08 17278 1

原创【CSS】让div在另一个div中垂直居中

垂直居中是布局中十分常见的效果之一，如果我们想实现下图的效果：首先我们写两个div：（下面的介绍中，我们称外层div为父div，里面的div为子div）。<body> <div class="content"> <div>我是需要垂直居中的div</div> </div></b...

2019-08-27 15:02:44 8571

原创【JS】实现全屏效果

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。主要代码如下：显示全屏：var docElm = document.documentElement;if (docElm.requestFullscreen) {//W3C docElm.requestFullscreen();} else if (docElm.msRequestFullscr...

2019-08-26 15:13:34 594

原创【git】修改已经push了的commit信息

如题，本条仅适用于修改已经push过了的最近一次的commit注释信息，确保本地文件的最新的。step1：使用【git commit --amend】命令，会进入到vim编辑器。step2：输入【i】，即进入编辑模式，此时编辑提交信息。step3：编辑好之后，输入【:wq】，即保存和退出。step4：输入【git push -f】强制提交。操作完之后，再看提交记录，即可看到修改...

2019-08-06 15:27:17 12939 4

原创 Iconfont字体图标的使用

1、进入阿里矢量图标库（https://www.iconfont.cn/），可以看到首页有许多小图标资源，也可以搜索自己需要的资源。2、选择需要的图标，把鼠标悬浮上去，可以看到3个按钮：添加入库、收藏和直接下载。可以根据自己的实际情况来选择相应操作，这里选择“添加入库”，操作完可以看到图标已经添加进右上角的购物车里了，如下图：3、点击右上角的购物车，可以看到如下页面：这儿也...

2019-07-16 18:15:15 1470

原创【Vue教程六】插槽

1、插槽内容我们经常需要向一个组件传递内容，可以用 Vue 自定义的 <slot>元素：<body> <div id="app"> <alert-box> Something bad happened. </alert-box> </div> ...............

2019-07-15 18:03:15 1406

原创【Vue教程五】创建和使用组件、父子组件传值、自定义输入框、prop详解和验证

一、创建和使用组件1、全局注册：注册一个全局组件语法格式如下：Vue.component('my-component-name', { /* ... */ })第一个参数‘my-component-name’为组件名2、定义组件名的方式有两种：2.1、使用 kebab-case：（短横线分隔命名的形式）Vue.component('my-component-nam.........

2019-07-15 14:22:02 1138

原创【Vue教程四】条件渲染、列表渲染、数组更新

一、条件渲染：【v-if】【v-show】1、v-if 指令用于条件性地渲染一块内容。1.1、在元素中使用 v-if 指令：<body> <div id="app"> <h1 v-if="seen">Hello qing!</h1> <div v-if="type === 'A'">.........

2019-07-11 15:48:48 1977