vue中v-for 使用i 指定了唯一key,且v-for的组件内部又嵌套了v-for的组件,id会有重复的问题,
这里分享个小技巧,加前缀防止相同的id
<div v-for="(item, i) in items" :key="i"></div>
<div v-for="(item, i) in items2" :key="`A-${i}`"></div>
<div v-for="(item, i) in items3" :key="`B-${i}`"></div>
进程通信分为异步和同步通信
官网有例子https://electronjs.org/docs/api/ipc-main,稍作解析
Continue reading…
可能有的童鞋看过我之前推荐的另一款老牌的vpn:Green VPN, 但是这一款好用的vpn已经被封锁了,然后笔者就只能另寻他路了.
github上不断有大神贡献好用的开源项目,常常关注github热榜的童鞋应该比较熟悉这个搜索资源的方式
直接github免费下载VPN
https://github.com/bannedbook/fanqiang https://github.com/killgcd/chromego https://github.com/YoulianBoshi/lantern-vpn
原生的checkbox样式很单一，常常需要自定义样式
使用label关联input[checkbox],input隐藏，label覆盖input显示，设置label选中前后的样式即可。
HTML:
<div class="cbk-tubiao-con">
<input id="pro-1" class="cbk-tubiao" type="checkbox" />
<label for="pro-1"></label>
</div>
CSS:
/*自定义checkbox*/
.cbk-tubiao-con>label:before {
margin-top:-2px;
}
.cbk-tubiao-con {
height:20px;
position:relative;
}
.cbk-tubiao-con>label {
line-height:20px;
}
.cbk-tubiao-con>label:before {
box-sizing:border-box;
display:inline-block;
content:"";
width:24px;
height:24px;
border-radius:50%;
background:url("http://p31rkzyhv.bkt.clouddn.com/unchoose.png") no-repeat;
background-size:100%;
position:absolute;
top:0;
left:0;
}
input.cbk-tubiao {
width:24px;
height:24px;
visibility:hidden;
vertical-align:middle;
}
.cbk-tubiao-con input.cbk-tubiao:checked + label:before {
content:"";
background:url("http://p31rkzyhv.bkt.clouddn.com/choose.png") no-repeat;
text-align: center;
}
把css中的background换成自己的图片即可
我们用react演示
tsx组件
import React, { useState } from "react";
import styles from "./Checkbox.module.css";
interface Props {
className?: string;
onChange?: (state: boolean) => void;
style?: React.CSSProperties;
children?: React.ReactNode;
checked?: boolean;
}
export const Checkbox: React.FC<Props> = ({
className,
onChange,
children,
style = {},
checked,
}) => {
let [checkedState, setCheckedState] = useState(checked || false);
const handleChange = () => {
onChange(!checkedState);
setCheckedState(!checkedState);
};
return (
<label className={styles.container}>
{children}
<input type="checkbox" onChange={handleChange} checked={checkedState} />
<span className={styles.checkmark}></span>
</label>
);
};
对应的样式
/* The container */
.container {
position: relative;
padding: 0 1em 0 1.4em;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 1.1em;
width: 1.1em;
background-color: gray;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: lightgary;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196f3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 0.4em;
top: 0.1em;
width: 0.3em;
height: 0.7em;
border: solid white;
border-width: 0 0.1em 0.1em 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
Step1:指定目录下开启cmd ,假设改目录下有一个py文件: index.py
Step2:cmd中输入: python index.py
Step1: 打开https://bootstrap.pypa.io/get-pip.py
Step2: 右击页面–另存为–保存到任何地方
Step3: 执行 python get-pip.py
即安装成功！
请开始愉快的使用pip安装你想要的库吧！
Step1: cmd 管理员运行
Step2: 输入 pip install packageName , 国内慢的话,使用豆瓣源: pip install packagename -i https://pypi.doubanio.com/simple
https://appsoftea.com/zh/how-to-install-pip/
本文参考自https://pip.pypa.io/en/stable/installing/
codepen上的一个爱心 ❤ 代码
See the Pen
Css beating heart by Greg DiPietro (@gjdipietro)
on CodePen.