Pengsl's Blog - to share technology

Pengsl's Blog


  • 首页

  • 标签

  • 归档

react-Popup-Component

发表于 2020-11-11 | 更新于 2020-11-16

Popup 使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Popup from '@/components'

export default () => {
const [show, setShow] = useState(false);
const openPopup = () => {
setShow(true);
};
return (
<div className="App">
<div>
<Popup onClose={() => setShow(false)} show={show}>
<div>
<p>这里是 Popup 的内容</p>
<p>这里是 Popup 的内容</p>
<p>这里是 Popup 的内容</p>
<p>这里是 Popup 的内容</p>
</div>
</Popup>
</div>
</div>
);
}

Popup 实现

Popup dom 组成

  • 弹窗容器 container
  • 弹窗蒙层 mask
  • 弹窗内容 content
    阅读全文 »

how to write a react checkbox component

发表于 2020-10-25

预期的 Checkbox 使用方法



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Checkbox from '@/components'
const { CheckboxItem } = Checkbox

export default () => {
const onChange = (values) => {
console.log(values)
}
return (
<Checkbox onChange={onChange}>
<CheckboxItem label="angular" />
<CheckboxItem label="react" />
<CheckboxItem label="vue" />
</Checkbox>
)
}


两种实现方式

通过 React.cloneElement

1
2
3
4
5
React.cloneElement(
element,
[props],
[...children]
)
阅读全文 »

promise

发表于 2020-05-08 | 更新于 2020-05-09

参考 Promises/A+, 实现一个Promise

定义状态

1
2
3
4
// define three states
const PENDING = 0
const RESOLVED = 1
const REJECTED = 2

version#0 (resolve/reject时变更状态)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MyPromise {
constructor(executor) {
const resolve = () => {
this.state = RESOLVED
}
const reject = () => {
this.state = REJECTED
}

this.state = PENDING
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
}
阅读全文 »

emoji 存储及展示 前端完美解决方案

发表于 2020-04-27

遇到的问题

最近在做一个论坛功能,发帖和评论输入都需要保存到数据库。
而测试测了emoji保存是有问题的,查了数据库是没存进去,google查了一下,emoji是4个字节的,需要将
MySql数据库字符集改由utf8改为utf8mb4,于是把找到的帖子给DBA,DBA看了说不能改,可能会影响现有的数据。

那就只好自己动手,丰衣足食了。
(如果下面的emoji没有正常展示请使用最新版的火狐浏览器)

emoji 存储及展示 前端解决思路

既然直接存储emoji有问题,就改为存储emoji的转换结果。
于是沿着这个思路,首先想到的是 charCodeAt/fromCharCode

阅读全文 »

create-k8s-cluster-with-minikube

发表于 2019-12-27 | 更新于 2020-01-07

安装 kubectl & minikube

  • 如何安装 kubectl
  • 如何安装 minikube

集群运行

查看 minikube 版本

1
$ minikube version

启动集群

1
$ minikube start
阅读全文 »

install-docker-winodws

发表于 2019-11-11 | 更新于 2020-01-09

winodws 下载 docker

如果电脑满足以下条件可以直接下载 docker desktop:

系统要求

  • Windows 10 64-bit: Pro, Enterprise, or Education (Build 15063 or later).
  • Hyper-V and Containers Windows features must be enabled.
  • 64 bit processor with Second Level Address Translation (SLAT)
  • 4GB system RAM
  • BIOS-level hardware virtualization support must be enabled in the BIOS settings

下载安装地址

docker-for-windows

docker Toolbox 安装

如果不满足上述条件则需要通过下载 Toolbox 来安装
Toobox 下载地址
下载最新版本的 .exe进行安装

阅读全文 »

go-vscode

发表于 2019-11-06 | 更新于 2020-12-11

Go下载

Go下载地址:https://golang.google.cn/dl/

vscode 配置 go 插件

在vscode EXRENSION 商店 搜索 go,第一个就是微软官方提供的go插件,装上它就可以愉快的撸 Go 啦!
或者新建一个 .go 文件,vscode 也会推荐安装相关的插件!
go-extension

阅读全文 »

mobile-web-border

发表于 2019-09-11 | 更新于 2020-01-09

解决移动端 1px 边框问题

主要思路是将 HTML元素border设置为0,再通过伪类::before 或 ::after 去放大、旋转实现。
我的习惯是将 scss 变量存放在 vars.scss; scss mixin 存放在 mixin.scss.

vars.scss

1
2
3
4
$border-colors: (
'main': #dddddd,
'active': #0088ff,
);
阅读全文 »

centos 重启自动运行脚本

发表于 2019-08-13 | 更新于 2020-01-09

在一个 shell 脚本中执行另一个 shell 脚本的3种方法

1
2
3
./bar.sh fork
./bar.sh exec
./bar.sh source

编辑启动脚本 /etc/init.d/autorun.sh

脚本前三行如下:

1
2
3
#!/bin/sh
#chkconfig: 2345 80 90
#description:auto_run

阅读全文 »

定时检测 jenkins 并自动重启

发表于 2019-08-08 | 更新于 2020-01-09

服务器安装 jenkins 持续集成,jenkins 常常会挂掉,那么就需要想办法让jenkins 在挂掉后自动重启。
本文采用 shell脚本 + crontab 来定时检测 jenkins 运行状态,如果挂掉了就重启

先了解一些预备知识

linux 清空文件内容的方法

1
2
3
4
5
$ : > filename 
$ > filename
$ echo "" > filename
$ echo > filename
$ cat /dev/null > filename

linux 判断文件行数的方法

1
2
$ cat test1.sh |wc -l
$ wc -l test1.sh

Linux crontab命令

阅读全文 »
12…4

pengsl

一个前端的技术博客,主要分享web等编程技术; A front-end technology blog to share technology;

31 日志
32 标签
GitHub E-Mail Google
© 2018-2020 pengsl
粤ICP备16086950号
由 Hexo 强力驱动 v3.7.1
|
主题 — NexT.Muse v6.3.0