疯狂日记
笔记
react 添加 less 配置
1、npm run eject
释放webpack配置文件
如果 npm run eject 报错，执行下面的命令：
npm add .
npm commit -m “eject”
npm run eject
执行成功后，会在根目录下生成新的文件夹：config 和 script.
2、修改webpack配置
打开 config /webpack.config.js
修改
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 下面为新添加的
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;`
// 添加样式
if (!(preProcessor === "less-loader")) {
loaders.push({
loader: require.resolve(preProcessor),
options: {sourceMap: isEnvProduction && shouldUseSourceMap,},
});
}else{
loaders.push({
loader:require.resolve(preProcessor),
options:{
sourceMap: isEnvProduction && shouldUseSourceMap,
javascriptEnabled: true,
modifyVars:{
// 修改 antd 主题
"@primary-color":"0fff",
}
}
})
}
Ｒeact antd
npm install antd
npm install babel-plugin-import
{
"plugins": [
["import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}
]
]
}
npm run eject (注意：如果报git错误，就执行git add * 和git commit操作即可)
引入antd样式：import 'antd/dist/antd.css';
import DatePicker from 'antd/es/date-picker'; // 加载 JS
import 'antd/es/date-picker/style/css'; // 加载 CSS
// import 'antd/es/date-picker/style'; // 加载 LESS
Typore语言编辑
html
<div>
<p style="color:red">
明天的你一定会感谢现在拼命的自己！
</p>
</div>
div{
color:red;
border: 1px solid #0fff;
p{
background-color:#f4e342;
}
}
Webstorm 配置 sass
1，安装Ruby；
2，配置webstorm中sass的解析路径。
详见网页资料，很多的
自定义对象排序函数
// 传入数组中对象元素中含有 value值为数值时
//（其实数字字符串照样可以排序 转换一下喽） 嘿嘿哈哈
function(data){
let arr= [];
arr.push(data[0]);
for (let i = 1; i < data.length; i++) {
let len = arr.length;
if (data[i].value >= arr[0].value) {
arr.splice(0, 0, data[i]);
continue;
}
if (data[i].value < arr[len - 1].value) {
arr.push(data[i]);
continue;
}
for (let j = 0; j < arr.length - 1; j++) {
if(data[i].value<arr[j].value && data[i].value>=arr[j + 1].value) {
arr.splice(j + 1, 0, data[i]);
}
}
}
}
// 奶奶个腿 用两次才把这个完善
对对象中含有数字字段的对象进行排序
ES6
ES6
http://es6.ruanyifeng.com/
Set 集合
http://es6.ruanyifeng.com/#docs/set-map
let arr = new Set();
arr.size
arr.add
arr.remove
.....
* map方法
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
用法
array.map(function(currentValue,index,arr), thisValue)
let data = [
{name:'kankan',fruit:'apple'},
{name:'Fanny',fruit:'banana'},
{name:'Kavin',fruit:'oringe'},
];
let out= data.map((item,i) =>(
<li key={i} value={item.name}>{item.name}</li>
)
* forEach 方法
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
返回值: undefined
用法
function(currentValue, index, arr)
* 元素在数组中的位置
indexOf方法
该方法返回 string对象内第一次出现子字符串的字符位置。
语法：public indexOf(string str)
说明：str为必选参数。在 String对象中搜索的子字符串。
语法：public indexOf(string str, int startIndex)
说明：参数 str为必选参数。在 String对象中搜索的子字符串。参数 startIndex代表的整数值
指定在 string对象内开始搜索的索引。若省略此参数，则搜索从字符串的起始处开始。
说明：
indexOf 方法返回一个整数值，该值指示String 对象内子字符串的起始位置。如果未找到子
符串，则返回-1。如果startIndex 为负，则将startIndex 视为零。如果它比最大字符位置索
还大，则将它视为可能的最大索引，搜索将从左向右执行；否则，此方法与lastIndexOf 相同。
React for 循环
let item = [];
const data = [
{name:"诸葛亮",age:23},
{name:"孙尚香",age:20},
{name:"孙权",age:22},
{name:"刘备",age:27},
];
for(let i=0;i<data.length;i++){
item.push(<Option key="data[i].name" value="data[i].name">{data[i].name}</Option>);
}
<Select>{item}</Select>
造数据
姓名： 百家姓 + 常用名字 均为随机生成
省市：省会 + 地级市
HTMlL + CSS3
// 爱的魔力转圈圈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #000;
}
.out-box{
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 200px;
}
.box{
position: absolute;
transform: rotateX(-10deg);
color: #0ff;
transform-style: preserve-3d;
}
.out{
position: absolute;
transform-style: preserve-3d;
width: 200px;
height: 200px;
transform: translateZ(200px);
animation: linear 20s kan infinite;
}
@keyframes kan {
0%{
transform: rotateY(360deg);
}
100%{
transform: rotateY(0deg);
}
}
.item{
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
box-shadow: 0 0 20px #0ff inset;
font-size: 22px;
/*color: #0ff;*/
}
.item:hover{
color: red;
background-color: black;
}
.item:nth-child(1){transform: rotateY(45deg) translateZ(236px);}
.item:nth-child(2){transform: rotateY(90deg) translateZ(236px);}
.item:nth-child(3){transform: rotateY(135deg) translateZ(236px);}
.item:nth-child(4){transform: rotateY(180deg) translateZ(236px);}
.item:nth-child(5){transform: rotateY(225deg) translateZ(236px);}
.item:nth-child(6){transform: rotateY(270deg) translateZ(236px);}
.item:nth-child(7){transform: rotateY(315deg) translateZ(236px);}
.item:nth-child(8){transform: rotateY(360deg) translateZ(236px);}
</style>
</head>
<body>
<div class="out-box">
<div class="box">
<div class="out">
<div class="item">加油</div>
<div class="item">你是最棒的</div>
<div class="item">你很厉害哟</div>
<div class="item">要开心哟</div>
<div class="item">我喜欢你哟</div>
<div class="item">我爱你哟</div>
<div class="item">我喜欢你啊</div>
<div class="item">你喜欢我吗？</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
<!---
Created by kankan on 2019/8/11.
E-mail: lidainzhong@gl-data.com
To: More pain, more gain.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
background-image: url("../assets/bg1.webp");
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
width: 250px;
height:80px;
position: relative;
left: -4px;
top: -40px;
vertical-align: middle;
line-height: 40px;
font-weight: bold;
color: #0ff;
text-align: center;
}
.bg>span{
font-family: myThirdFont,Arial,serif;
font-size: 36px;
}
.bg> span{
text-align: center;
display: inline-block;
padding-top: 38px;
}
.bg> span>span{
font-size: 18px;
vertical-align: middle;
}
body{
background-color: #f00;
}
.g{
margin: 0 auto;
display: inline-block;
padding: 8px 2px 2px 4px;
position: relative;
background-color: #021d30;
height: 66px;
}
.hei{
height: 670px;
background-color: #fff;
padding: 20px;
}
.pic>img:nth-child(1){
width: 200px;
}
.pic>img:nth-child(2){
width: 200px;
}
</style>
</head>
<body>
<div class="hei">
<svg x="0" y="0" width="600" height="600" class="image-svg-svg">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0.14634323120117188 0.34535980224609375 99.65884399414062 99.65540313720703" enable-background="new 0 0 101 100" xml:space="preserve">
<path fill="#0000FF" d="M61.76,97.58c33.57,6.97,42.44-16.43,36.18-41.75c-3.42,10.02-10.23,18.91-18.72,26.1
C76.91,90.79,71.3,96.89,61.76,97.58L61.76,97.58z M95.74,48.54c-0.08-0.23-0.17-0.47-0.25-0.7c-4.12,5.95-9.47,11.28-15.53,15.84
c0.53,4.2,0.65,8.22,0.32,11.95C88.12,68.03,93.9,58.79,95.74,48.54L95.74,48.54z M93.69,43.36C84.04,21.21,63.88,1.19,39.71,2.72
c20.71,9.46,35.36,34.52,39.53,56.51C85.02,54.63,90.02,49.3,93.69,43.36L93.69,43.36z"></path>
<path fill="#00FF00" d="M2.57,61.95c-6.98,33.62,16.5,42.47,41.86,36.16c-9.99-3.41-18.85-10.19-26.03-18.65
C9.45,77.18,3.27,71.57,2.57,61.95L2.57,61.95z M51.69,95.9l0.71-0.26c-5.94-4.12-11.26-9.46-15.82-15.51
c-4.18,0.54-8.2,0.66-11.92,0.35C32.26,88.3,41.48,94.06,51.69,95.9L51.69,95.9z M56.88,93.84C79,84.17,98.96,64.04,97.43,39.9
c-9.45,20.67-34.42,35.31-56.39,39.51C45.63,85.18,50.96,90.17,56.88,93.84L56.88,93.84z"></path>
<path fill="#00FFFF" d="M38.2,2.76C4.7-4.2-4.21,19.1,1.97,44.35c3.46-9.98,10.28-18.84,18.78-26C23.07,9.53,28.67,3.46,38.2,2.76
L38.2,2.76z M4.14,51.6c0.1,0.27,0.2,0.55,0.3,0.82c4.13-5.94,9.49-11.25,15.55-15.8c-0.53-4.21-0.64-8.25-0.31-11.98
C11.84,32.21,6.04,41.41,4.14,51.6L4.14,51.6z M6.24,56.91c9.64,22.18,29.81,42.25,54.01,40.72C39.53,88.15,24.87,63.08,20.7,41.08
C14.92,45.66,9.92,50.98,6.24,56.91L6.24,56.91z"></path>
<path fill="#6FA8DC" d="M97.39,38.39C104.35,4.89,81.05-4.01,55.8,2.17c9.98,3.46,18.84,10.28,25.99,18.78
C90.62,23.26,96.69,28.86,97.39,38.39L97.39,38.39z M48.55,4.34c-0.27,0.1-0.55,0.2-0.82,0.3c5.94,4.13,11.25,9.49,15.8,15.55
c4.21-0.53,8.25-0.64,11.98-0.31C67.94,12.04,58.74,6.24,48.55,4.34L48.55,4.34z M43.24,6.43C21.06,16.07,0.99,36.24,2.52,60.44
c9.47-20.72,34.54-35.38,56.54-39.54C54.48,15.12,49.17,10.11,43.24,6.43L43.24,6.43z"></path>
<path fill="#0000FF" d="M91.82,39.35C81.58,18.85,62.41,1.28,39.71,2.72c14.57,6.66,26.14,21.04,33.17,36.63H91.82L91.82,39.35z"></path>
</svg>
<!-- <g transform="translate(67.00000381469727,12.588945388793945)"><g class="tp-name iconsvg-namesvg"><g><path d="M3.82 2.79L9.45 1.21L9.45-12.96L4.18-12.96L4.18-16.52L18.27-16.52L18.27-12.96L13.00-12.96L13.00 0.22L17.68-1.08L18.68 2.29L4.77 6.21L3.82 2.79ZM39.33 2.29L39.33-0.09L42.88-0.09L42.88 2.29Q42.88 3.96 41.71 5.15Q40.55 6.34 38.84 6.34L38.84 6.34L34.38 6.34L34.38-12.55L24.84-12.55L24.84-5.94Q24.84-3.92 24.14-1.71Q23.45 0.49 22.61 2.34Q21.78 4.18 21.04 5.42Q20.29 6.66 20.25 6.75L20.25 6.75L18.77 5.80L17.28 4.86Q17.28 4.86 17.59 4.37Q17.91 3.87 18.34 3.04Q18.77 2.21 19.28 1.10Q19.80 0 20.25-1.19Q20.70-2.38 20.99-3.60Q21.29-4.81 21.29-5.94L21.29-5.94L21.29-16.11L34.38-16.11L34.38-16.74L37.93-16.74L37.93 2.79L38.84 2.79Q39.33 2.79 39.33 2.29L39.33 2.29ZM33.39-0.22L30.15 1.13L25.74-9.54L28.98-10.89L33.39-0.22ZM12.33-21.73L8.23-21.73Q6.97-20.11 5.98-19.01Q5.00-17.91 4.91-17.82L4.91-17.82L2.38-20.29Q2.38-20.29 3.08-21.06Q3.78-21.82 4.72-22.99Q5.67-24.16 6.66-25.61Q7.65-27.04 8.32-28.44L8.32-28.44L11.52-26.95Q11.16-26.10 10.62-25.29L10.62-25.29L22.09-25.29L22.09-21.73L16.74-21.73L18.22-19.71L15.39-17.59L12.33-21.73ZM42.43-25.29L42.43-21.73L37.03-21.73L38.56-19.71L35.68-17.59L32.63-21.73L28.57-21.73Q27.31-20.11 26.32-19.01Q25.33-17.91 25.24-17.82L25.24-17.82L22.68-20.29Q22.68-20.29 23.38-21.06Q24.07-21.82 25.02-22.99Q25.96-24.16 26.98-25.61Q27.99-27.04 28.66-28.44L28.66-28.44L31.86-26.95Q31.41-26.10 30.96-25.29L30.96-25.29L42.43-25.29ZM48.69 6.30L48.69-27.18L82.89-27.18L82.89-28.17L86.40-28.17L86.40 2.43Q86.40 4.14 85.23 5.31Q84.06 6.48 82.35 6.48L82.35 6.48L77.81 6.48L77.81 2.92L82.35 2.92Q82.57 2.92 82.73 2.79Q82.89 2.65 82.89 2.43L82.89 2.43L82.89-23.67L52.20-23.67L52.20 6.30L48.69 6.30ZM55.71 1.13L52.88-0.99Q54.45-3.15 55.87-5.42Q57.28-7.69 58.50-9.95L58.50-9.95L53.19-19.98L56.30-21.64L60.44-13.81Q61.25-15.48 61.88-16.92Q62.50-18.36 62.93-19.42Q63.36-20.47 63.61-21.08Q63.86-21.69 63.86-21.69L63.86-21.69L67.19-20.47Q67.14-20.34 66.80-19.48Q66.47-18.63 65.86-17.21Q65.25-15.79 64.39-13.93Q63.54-12.06 62.46-9.95L62.46-9.95L67.50-0.45L64.35 1.21L60.44-6.21Q59.40-4.32 58.21-2.48Q57.02-0.63 55.71 1.13L55.71 1.13ZM70.56 1.13L67.72-0.99Q69.30-3.15 70.72-5.42Q72.13-7.69 73.31-9.95L73.31-9.95L68.00-19.98L71.14-21.64L75.28-13.81Q76.09-15.48 76.70-16.92Q77.31-18.36 77.76-19.42Q78.21-20.47 78.44-21.08Q78.66-21.69 78.66-21.69L78.66-21.69L81.99-20.47Q81.94-20.34 81.63-19.48Q81.31-18.63 80.71-17.21Q80.10-15.79 79.25-13.93Q78.39-12.06 77.31-9.95L77.31-9.95L82.31-0.45L79.20 1.21L75.28-6.21Q73.13-2.43 70.56 1.13L70.56 1.13ZM115.25-13.00L112.55-11.16L109.80-13.00L109.80-15.62L112.55-17.50L115.25-15.62L115.25-13.00Z" transform="translate(-2.385, 29.07)"></path></g> <!––> <!––> <!––> <!––> <!––> <!––> <g fill="#3D85C6" transform="translate(115.87000274658203,0)"><path d="M42.34-24.03L35.19-24.03L35.19-19.30L38.43-19.30L38.43-20.07L41.98-20.07L41.98 2.16Q41.98 3.87 40.79 5.04Q39.60 6.21 37.93 6.21L37.93 6.21L19.13 6.21L19.13-19.30L25.70-19.30L25.70-24.03L18.54-24.03L18.54-27.54L42.34-27.54L42.34-24.03ZM25.70-15.75L22.68-15.75L22.68-4.77Q22.99-5.22 23.51-6.03Q24.03-6.84 24.50-7.85Q24.97-8.87 25.33-10.06Q25.70-11.25 25.70-12.42L25.70-12.42L25.70-15.75ZM22.68 2.70L37.93 2.70Q38.16 2.70 38.30 2.54Q38.43 2.38 38.43 2.16L38.43 2.16L38.43-2.88L31.63-2.88L31.63-15.75L29.25-15.75L29.25-12.42Q29.25-10.48 28.62-8.66Q27.99-6.84 27.25-5.42Q26.50-4.00 25.83-3.10Q25.15-2.21 25.11-2.11L25.11-2.11L22.68-4.09L22.68 2.70ZM38.43-15.75L35.19-15.75L35.19-6.39L38.43-6.39L38.43-15.75ZM31.63-19.30L31.63-24.03L29.25-24.03L29.25-19.30L31.63-19.30ZM8.46-20.29L8.01-20.29Q7.92-18.31 7.74-15.05Q7.56-11.79 7.25-8.03Q6.93-4.27 6.50-0.49Q6.08 3.28 5.49 6.30L5.49 6.30L2.02 5.63Q2.38 3.73 2.70 1.44Q3.01-0.85 3.26-3.31Q3.51-5.76 3.71-8.21Q3.92-10.66 4.07-12.91Q4.23-15.16 4.32-17.08Q4.41-18.99 4.50-20.29L4.50-20.29L2.79-20.29L2.79-23.85L8.46-23.85L8.46-28.17L12.01-28.17L12.01-23.85L17.64-23.85L17.64-20.29L12.01-20.29L12.01 6.43L8.46 6.43L8.46-20.29ZM12.64-17.64L16.16-17.95L18.36 5.80L14.85 6.12L12.64-17.64ZM60.12-29.07L63.31-27.49L62.28-25.47L81.13-25.47L81.13-26.14L84.69-26.14L84.69-9.99Q84.69-8.28 83.52-7.11Q82.35-5.94 80.64-5.94L80.64-5.94L51.44-5.94L51.44-25.47L58.37-25.47L60.12-29.07ZM54.99-16.65L54.99-14.89L81.13-14.89L81.13-16.65L54.99-16.65ZM54.99-9.45L80.64-9.45Q81.13-9.45 81.13-9.99L81.13-9.99L81.13-11.38L54.99-11.38L54.99-9.45ZM81.13-20.20L81.13-21.91L54.99-21.91L54.99-20.20L81.13-20.20ZM83.07-4.05L87.21 4.63L84.02 6.17L79.88-2.56L83.07-4.05ZM52.06-4.05L55.26-2.56L51.12 6.17L47.92 4.63L52.06-4.05ZM80.10 2.61L80.10 6.17L57.06 6.17L57.06-2.92L60.62-2.92L60.62 2.61L80.10 2.61ZM73.53 2.29L63.63-2.43L65.20-5.63L75.06-0.85L73.53 2.29ZM106.34 2.38L93.42 6.39L92.39 3.01L97.33 1.44L97.33-17.46L92.79-17.46L92.79-20.97L97.33-20.97L97.33-25.92L100.89-25.92L100.89-20.97L105.44-20.97L105.44-17.46L100.89-17.46L100.89 0.36L105.25-1.03L106.34 2.38ZM129.15 2.56L129.15-0.77L132.70-0.77L132.70 2.56Q132.70 4.27 131.53 5.44Q130.37 6.61 128.66 6.61L128.66 6.61L109.22 6.61L109.22-15.39L106.47-14.98L105.97-18.50L109.22-18.95L109.22-25.52L112.77-25.52L112.77-19.48L118.35-20.29L118.35-28.17L121.91-28.17L121.91-20.79L131.31-22.14L131.31-6.88Q131.31-5.22 130.12-4.03Q128.93-2.83 127.26-2.83L127.26-2.83L124.34-2.83L124.34-6.39L127.26-6.39Q127.75-6.39 127.75-6.88L127.75-6.88L127.75-18.04L121.91-17.19L121.91-1.75L118.35-1.75L118.35-16.70L112.77-15.88L112.77 3.10L128.66 3.10Q128.88 3.10 129.01 2.95Q129.15 2.79 129.15 2.56L129.15 2.56Z" transform="translate(-2.025, 29.07)"></path></g></g> <!––></g>-->
</svg>
</div>
<div class="g">
<svg x="0" y="0" width="200" height="200" class="image-svg-svg">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0.14634323120117188 0.34535980224609375 99.65884399414062 99.65540313720703" enable-background="new 0 0 101 100" xml:space="preserve">
<path fill="#0000FF" d="M61.76,97.58c33.57,6.97,42.44-16.43,36.18-41.75c-3.42,10.02-10.23,18.91-18.72,26.1
C76.91,90.79,71.3,96.89,61.76,97.58L61.76,97.58z M95.74,48.54c-0.08-0.23-0.17-0.47-0.25-0.7c-4.12,5.95-9.47,11.28-15.53,15.84
c0.53,4.2,0.65,8.22,0.32,11.95C88.12,68.03,93.9,58.79,95.74,48.54L95.74,48.54z M93.69,43.36C84.04,21.21,63.88,1.19,39.71,2.72
c20.71,9.46,35.36,34.52,39.53,56.51C85.02,54.63,90.02,49.3,93.69,43.36L93.69,43.36z"></path>
<path fill="#00FF00" d="M2.57,61.95c-6.98,33.62,16.5,42.47,41.86,36.16c-9.99-3.41-18.85-10.19-26.03-18.65
C9.45,77.18,3.27,71.57,2.57,61.95L2.57,61.95z M51.69,95.9l0.71-0.26c-5.94-4.12-11.26-9.46-15.82-15.51
c-4.18,0.54-8.2,0.66-11.92,0.35C32.26,88.3,41.48,94.06,51.69,95.9L51.69,95.9z M56.88,93.84C79,84.17,98.96,64.04,97.43,39.9
c-9.45,20.67-34.42,35.31-56.39,39.51C45.63,85.18,50.96,90.17,56.88,93.84L56.88,93.84z"></path>
<path fill="#00FFFF" d="M38.2,2.76C4.7-4.2-4.21,19.1,1.97,44.35c3.46-9.98,10.28-18.84,18.78-26C23.07,9.53,28.67,3.46,38.2,2.76
L38.2,2.76z M4.14,51.6c0.1,0.27,0.2,0.55,0.3,0.82c4.13-5.94,9.49-11.25,15.55-15.8c-0.53-4.21-0.64-8.25-0.31-11.98
C11.84,32.21,6.04,41.41,4.14,51.6L4.14,51.6z M6.24,56.91c9.64,22.18,29.81,42.25,54.01,40.72C39.53,88.15,24.87,63.08,20.7,41.08
C14.92,45.66,9.92,50.98,6.24,56.91L6.24,56.91z"></path>
<path fill="#6FA8DC" d="M97.39,38.39C104.35,4.89,81.05-4.01,55.8,2.17c9.98,3.46,18.84,10.28,25.99,18.78
C90.62,23.26,96.69,28.86,97.39,38.39L97.39,38.39z M48.55,4.34c-0.27,0.1-0.55,0.2-0.82,0.3c5.94,4.13,11.25,9.49,15.8,15.55
c4.21-0.53,8.25-0.64,11.98-0.31C67.94,12.04,58.74,6.24,48.55,4.34L48.55,4.34z M43.24,6.43C21.06,16.07,0.99,36.24,2.52,60.44
c9.47-20.72,34.54-35.38,56.54-39.54C54.48,15.12,49.17,10.11,43.24,6.43L43.24,6.43z"></path>
<path fill="#0000FF" d="M91.82,39.35C81.58,18.85,62.41,1.28,39.71,2.72c14.57,6.66,26.14,21.04,33.17,36.63H91.82L91.82,39.35z"></path>
</svg>
<g transform="translate(67.00000381469727,12.588945388793945)"><g class="tp-name iconsvg-namesvg"><g><path d="M3.82 2.79L9.45 1.21L9.45-12.96L4.18-12.96L4.18-16.52L18.27-16.52L18.27-12.96L13.00-12.96L13.00 0.22L17.68-1.08L18.68 2.29L4.77 6.21L3.82 2.79ZM39.33 2.29L39.33-0.09L42.88-0.09L42.88 2.29Q42.88 3.96 41.71 5.15Q40.55 6.34 38.84 6.34L38.84 6.34L34.38 6.34L34.38-12.55L24.84-12.55L24.84-5.94Q24.84-3.92 24.14-1.71Q23.45 0.49 22.61 2.34Q21.78 4.18 21.04 5.42Q20.29 6.66 20.25 6.75L20.25 6.75L18.77 5.80L17.28 4.86Q17.28 4.86 17.59 4.37Q17.91 3.87 18.34 3.04Q18.77 2.21 19.28 1.10Q19.80 0 20.25-1.19Q20.70-2.38 20.99-3.60Q21.29-4.81 21.29-5.94L21.29-5.94L21.29-16.11L34.38-16.11L34.38-16.74L37.93-16.74L37.93 2.79L38.84 2.79Q39.33 2.79 39.33 2.29L39.33 2.29ZM33.39-0.22L30.15 1.13L25.74-9.54L28.98-10.89L33.39-0.22ZM12.33-21.73L8.23-21.73Q6.97-20.11 5.98-19.01Q5.00-17.91 4.91-17.82L4.91-17.82L2.38-20.29Q2.38-20.29 3.08-21.06Q3.78-21.82 4.72-22.99Q5.67-24.16 6.66-25.61Q7.65-27.04 8.32-28.44L8.32-28.44L11.52-26.95Q11.16-26.10 10.62-25.29L10.62-25.29L22.09-25.29L22.09-21.73L16.74-21.73L18.22-19.71L15.39-17.59L12.33-21.73ZM42.43-25.29L42.43-21.73L37.03-21.73L38.56-19.71L35.68-17.59L32.63-21.73L28.57-21.73Q27.31-20.11 26.32-19.01Q25.33-17.91 25.24-17.82L25.24-17.82L22.68-20.29Q22.68-20.29 23.38-21.06Q24.07-21.82 25.02-22.99Q25.96-24.16 26.98-25.61Q27.99-27.04 28.66-28.44L28.66-28.44L31.86-26.95Q31.41-26.10 30.96-25.29L30.96-25.29L42.43-25.29ZM48.69 6.30L48.69-27.18L82.89-27.18L82.89-28.17L86.40-28.17L86.40 2.43Q86.40 4.14 85.23 5.31Q84.06 6.48 82.35 6.48L82.35 6.48L77.81 6.48L77.81 2.92L82.35 2.92Q82.57 2.92 82.73 2.79Q82.89 2.65 82.89 2.43L82.89 2.43L82.89-23.67L52.20-23.67L52.20 6.30L48.69 6.30ZM55.71 1.13L52.88-0.99Q54.45-3.15 55.87-5.42Q57.28-7.69 58.50-9.95L58.50-9.95L53.19-19.98L56.30-21.64L60.44-13.81Q61.25-15.48 61.88-16.92Q62.50-18.36 62.93-19.42Q63.36-20.47 63.61-21.08Q63.86-21.69 63.86-21.69L63.86-21.69L67.19-20.47Q67.14-20.34 66.80-19.48Q66.47-18.63 65.86-17.21Q65.25-15.79 64.39-13.93Q63.54-12.06 62.46-9.95L62.46-9.95L67.50-0.45L64.35 1.21L60.44-6.21Q59.40-4.32 58.21-2.48Q57.02-0.63 55.71 1.13L55.71 1.13ZM70.56 1.13L67.72-0.99Q69.30-3.15 70.72-5.42Q72.13-7.69 73.31-9.95L73.31-9.95L68.00-19.98L71.14-21.64L75.28-13.81Q76.09-15.48 76.70-16.92Q77.31-18.36 77.76-19.42Q78.21-20.47 78.44-21.08Q78.66-21.69 78.66-21.69L78.66-21.69L81.99-20.47Q81.94-20.34 81.63-19.48Q81.31-18.63 80.71-17.21Q80.10-15.79 79.25-13.93Q78.39-12.06 77.31-9.95L77.31-9.95L82.31-0.45L79.20 1.21L75.28-6.21Q73.13-2.43 70.56 1.13L70.56 1.13ZM115.25-13.00L112.55-11.16L109.80-13.00L109.80-15.62L112.55-17.50L115.25-15.62L115.25-13.00Z" transform="translate(-2.385, 29.07)"></path></g> <!----> <!----> <!----> <!----> <!----> <!----> <g fill="#3D85C6" transform="translate(115.87000274658203,0)"><path d="M42.34-24.03L35.19-24.03L35.19-19.30L38.43-19.30L38.43-20.07L41.98-20.07L41.98 2.16Q41.98 3.87 40.79 5.04Q39.60 6.21 37.93 6.21L37.93 6.21L19.13 6.21L19.13-19.30L25.70-19.30L25.70-24.03L18.54-24.03L18.54-27.54L42.34-27.54L42.34-24.03ZM25.70-15.75L22.68-15.75L22.68-4.77Q22.99-5.22 23.51-6.03Q24.03-6.84 24.50-7.85Q24.97-8.87 25.33-10.06Q25.70-11.25 25.70-12.42L25.70-12.42L25.70-15.75ZM22.68 2.70L37.93 2.70Q38.16 2.70 38.30 2.54Q38.43 2.38 38.43 2.16L38.43 2.16L38.43-2.88L31.63-2.88L31.63-15.75L29.25-15.75L29.25-12.42Q29.25-10.48 28.62-8.66Q27.99-6.84 27.25-5.42Q26.50-4.00 25.83-3.10Q25.15-2.21 25.11-2.11L25.11-2.11L22.68-4.09L22.68 2.70ZM38.43-15.75L35.19-15.75L35.19-6.39L38.43-6.39L38.43-15.75ZM31.63-19.30L31.63-24.03L29.25-24.03L29.25-19.30L31.63-19.30ZM8.46-20.29L8.01-20.29Q7.92-18.31 7.74-15.05Q7.56-11.79 7.25-8.03Q6.93-4.27 6.50-0.49Q6.08 3.28 5.49 6.30L5.49 6.30L2.02 5.63Q2.38 3.73 2.70 1.44Q3.01-0.85 3.26-3.31Q3.51-5.76 3.71-8.21Q3.92-10.66 4.07-12.91Q4.23-15.16 4.32-17.08Q4.41-18.99 4.50-20.29L4.50-20.29L2.79-20.29L2.79-23.85L8.46-23.85L8.46-28.17L12.01-28.17L12.01-23.85L17.64-23.85L17.64-20.29L12.01-20.29L12.01 6.43L8.46 6.43L8.46-20.29ZM12.64-17.64L16.16-17.95L18.36 5.80L14.85 6.12L12.64-17.64ZM60.12-29.07L63.31-27.49L62.28-25.47L81.13-25.47L81.13-26.14L84.69-26.14L84.69-9.99Q84.69-8.28 83.52-7.11Q82.35-5.94 80.64-5.94L80.64-5.94L51.44-5.94L51.44-25.47L58.37-25.47L60.12-29.07ZM54.99-16.65L54.99-14.89L81.13-14.89L81.13-16.65L54.99-16.65ZM54.99-9.45L80.64-9.45Q81.13-9.45 81.13-9.99L81.13-9.99L81.13-11.38L54.99-11.38L54.99-9.45ZM81.13-20.20L81.13-21.91L54.99-21.91L54.99-20.20L81.13-20.20ZM83.07-4.05L87.21 4.63L84.02 6.17L79.88-2.56L83.07-4.05ZM52.06-4.05L55.26-2.56L51.12 6.17L47.92 4.63L52.06-4.05ZM80.10 2.61L80.10 6.17L57.06 6.17L57.06-2.92L60.62-2.92L60.62 2.61L80.10 2.61ZM73.53 2.29L63.63-2.43L65.20-5.63L75.06-0.85L73.53 2.29ZM106.34 2.38L93.42 6.39L92.39 3.01L97.33 1.44L97.33-17.46L92.79-17.46L92.79-20.97L97.33-20.97L97.33-25.92L100.89-25.92L100.89-20.97L105.44-20.97L105.44-17.46L100.89-17.46L100.89 0.36L105.25-1.03L106.34 2.38ZM129.15 2.56L129.15-0.77L132.70-0.77L132.70 2.56Q132.70 4.27 131.53 5.44Q130.37 6.61 128.66 6.61L128.66 6.61L109.22 6.61L109.22-15.39L106.47-14.98L105.97-18.50L109.22-18.95L109.22-25.52L112.77-25.52L112.77-19.48L118.35-20.29L118.35-28.17L121.91-28.17L121.91-20.79L131.31-22.14L131.31-6.88Q131.31-5.22 130.12-4.03Q128.93-2.83 127.26-2.83L127.26-2.83L124.34-2.83L124.34-6.39L127.26-6.39Q127.75-6.39 127.75-6.88L127.75-6.88L127.75-18.04L121.91-17.19L121.91-1.75L118.35-1.75L118.35-16.70L112.77-15.88L112.77 3.10L128.66 3.10Q128.88 3.10 129.01 2.95Q129.15 2.79 129.15 2.56L129.15 2.56Z" transform="translate(-2.025, 29.07)"></path></g></g> <!----></g>
</svg>
<span class="bg">
<!---->
<span> 筑网 <span>•</span> 栖息地</span>
</span>
</div>
<div class="pic">
<img src="../assets/biao.png" alt="">
<img src="../assets/big.png" alt="">
<p>黄河，</p>
</div>
</body>
</html>
<!---
Created by kankan on 2019/7/31.
E-mail: lidainzhong@gl-data.com
To: More pain, more gain.
-->
代码着色
<div>
</div>
{
data:[],
message:true,
}
div{
color:red
}
WebSocket is closed before the connection is established.
TypeError: this.$set is not a function
报错原因：这里的this指向的不是VueModel,
解决方法1:在执行函数中定义指向Model的变量 let vm = this ,用该变量替代this
解决方法2:函数改为箭头函数的写法，里面的this其实是指向VueModel的，再用this就不会报错了
Error: Component series. not exists. Load it first.
JS获取当前毫秒数(时间戳)汇总
方法1: Date.now()
Date对象的内置方法
let a = Date.now();
console.log(a); //1523619204809
方法2: getTime()
创建一个日期对象，调用该对象的getTime()方法
console.log(d); //152361920480
方法3: valueOf()
基于Date类型的valueOf()方法，不会返回一个字符串，而是返回日期的毫秒表示
let c = new Date().valueOf();
console.log(c); //1523619204809
另外，基于Date类型valueOf()的特征，我们可以对两个日期进行比较大小：
let a = new Date('2000-02');
let b = new Date('2010-02');
console.log(b > a); //true
这里的b > a中的关系操作符> , b 和 a是对象,调用对象的valueOf()方法，而Date类型的valueOf()会返回对应的毫秒数，所以可以进行比较。
具体的有关大小比较的转化规则，之前博客有写到，JS中大于、小于的不同比较规则
方法4: +new Date()
let b = +new Date();
console.log(b); //1523619204809
+new Date()结果为什么是毫秒数?
其实这个涉及到JS中另外一个知识点，一元操作符（+或者-）对 非数值 的转换。
如果 +号 应用于对象之前，会首先调用找个对象的valueOf()和toString().
我们看一个例子:
let n = {
valueOf: function(){
return -1;
}
}
console.log(+n) // -1
+n调用了对象的valueOf()，结果是 -1
所以+new Date()这个方法又回到了方法3中的valueOf()，所以执行结果是相同的
vue + iview 分页
<!---
Created by kankan on 2019/8/23.
email: lidainzhong@gl-data.com
-->
<template>
<div class="pages">
<Table border stripe ref="selection" :columns="columns" :data="nowData"></Table>
<Page
:total="dataCount"
:page-size="pageSize"
@on-change="changePage"
@on-page-size-change="_nowPageSize"
show-total show-sizer show-elevator
/>
</div>
</template>
<script>
export default {
name: "pages",
data(){
return{
columns:[
{
title:'姓名',
key:'name'
},
{
title:'状态',
key:'state'
},
{
title:'球类',
key:'sports'
},
],
data:[],
//分页
pageSize: 10,//每页显示多少条
dataCount: 0,//总条数
pageCurrent: 1,//当前页
nowData:[],
}
},
mounted(){
this._getData();
},
methods:{
_getData() {
this.data = [];
for (let i = 0; i < 100; i++) {
let a = {
id: i,
name: 'kankan' + i,
sports:'篮球',
state: '活跃',
};
this.data.push(a);
}
this.dataCount = this.data.length;
this.$set(this,"dataCount",this.data.length);
this.$set(this,"nowData",this.data);
this.changePage(1);
},
changePage(index) {
//需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
let _start = (index - 1) * this.pageSize;
//需要显示结束数据的index
let _end = index * this.pageSize;
//截取需要显示的数据
this.nowData = this.data.slice(_start, _end);
//储存当前页
this.pageCurrent = index;
},
_nowPageSize(index) {
//实时获取当前需要显示的条数
this.pageSize = index;
},
}
}
</script>
<style scoped lang="less">
.pages{
background-color: white;
}
</style>
react 传递参数
资料参考：https://www.jianshu.com/p/eba2b76b290b
版本React: 16.9.0
父组件 传递给子组件 孙子组件
一直 this.props 到底即可
子组件传递给父组件
通过父组件中的函数 子组件调用父组件函数来改变父组件中的数据
越组件传递值
react的类型检查PropTypes自React v15.5起已弃用，请使用prop-types
npm install prop-types
import PropTypes from 'prop-types'
实际上，除了实例的context属性(this.context)，React组件还有很多个地方可以直接访问父组件提供的Context。比如构造方法：
constructor(props, context)
比如生命周期：
componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(nextProps, nextState, nextContext)
componetWillUpdate(nextProps, nextState, nextContext)
对于面向函数的无状态组件，可以通过函数的参数直接访问组件的Context。
越级传递
// 父组件
import React from 'react';
import ChildTwo from './childTwo'
import PropTypes from 'prop-types'
class Parents extends React.Component{
static childContextTypes = {
color: PropTypes.string,
};
getChildContext () {
return {
color: "red",
}
};
render(){
return <ChildTwo />;
}
}
export default Parents;
// 子组件
import React from 'react';
import ChildThree from './childThree'
class childTwo extends React.Component {
render() {
return <ChildThree/>;
}
}
export default childTwo;
// 孙子组件
import React from 'react';
import PropTypes from 'prop-types'
class childThree extends React.Component {
static contextTypes = {
color: PropTypes.string
};
constructor(props,context){
super(props);
this.state= {
data:props,
context:context,
}
}
render() {
console.log(this.state);
return <h1 style={this.state.context}>越组件传值</h1>
}
}
export default childThree;
持续更新中。。。。。。
明天的你一定会感谢现在拼命的自己！
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
