雨中

雨中 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

雨中 回答了问题 · 10月20日

请问这2个css效果是怎样实现的?有没有demo呢?

粉色的圆圈可以f12 查看main.js 的CirCleProgress 这个方法看
image.png
箭头也可以f12查看css 样式,animation动画+图片
image.png

用el-carousel来做的话,我觉得无论是改还是隐藏放上去都不是很好处理(我没改过,个人觉得可以自己写一个)

关注 5 回答 4

雨中 赞了回答 · 10月19日

怎么用flex实现这种布局?

.parent{
  display:flex;
  justify-content: start;
  flex-wrap: wrap;
}
.child{
    flex:33.33%
    flex-grow:0;
    width:10px;
}

不知道符不符合你的需求

关注 6 回答 5

雨中 赞了回答 · 10月19日

怎么用flex实现这种布局?

直接上代码~

// 包裹盒子
.out-contain{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
// 里面盒子
.inner-contain{
    width:calc(100% / 3);
    height:20px; // 自定
    display: flex;
    justify-content: center;
    align-items: center;
    .btn-item{
        // 里面再写btn样式
        width:10px;
    }
}

关注 6 回答 5

雨中 回答了问题 · 10月17日

如何动态渲染element-ui的表格展开行?

不是太明白‘当 isShow 从 true 切换为 false 时,里面的内容会自动的跑出来是什么’意思
如果是展开问题的可以参考这两个属性image.png

如果是显示隐藏左边箭头,尝试了下可以通过isShow显示隐藏,并没什么问题

关注 3 回答 2

雨中 回答了问题 · 10月17日

怎么用flex实现这种布局?

使用space-between可以在最后一行补充空白的标签(设置visibility: hidden;),和前面的数量对齐

关注 6 回答 5

雨中 赞了回答 · 10月16日

解决toFixed不精准问题的解决办法

Number.prototype.toFixed=function(s) {//重写toFixed
  const adjust = this >= 0 ? 0.5 : -0.5;
  return (parseInt(this * Math.pow( 10, s ) + adjust)/ Math.pow( 10, s )).toString();
}

关注 2 回答 1

雨中 收藏了文章 · 10月16日

electron打包踩过的坑总结

vue-electron 执行npm run build时,在build的时候会因为下载远程打包所需文件而超时,然后根据错误一步一步就行手动安装相应的文件。
虽然在网上参考了很多相关方法,最终还是失败,然后屡次尝试后,终于成功了。
附上elelctron相关的淘宝镜像地址:https://npm.taobao.org/mirror...

  • step1:npm run build后,第一次报错需要下载 electron-v2.0.18-win32-x64.zip(我这里是需要该版本的文件,根据自己的错误信息,来选择对应的版本下载即可),在镜像中选取该版本号 2.0.18,点击进入,并选择下载 electron-v2.0.18-win32-x64.zipSHASUMS256.txt, 下载完成后,将SHASUMS256.txt文件改成 SHASUMS256.txt-2.0.18,然后将两个文件拷入如图位置:没有路径的,需要自己该创建路径
  • step2:完成step1后,继续npm run build,发现又有文件下载失败 winCodeSign-2.4.0(我这里是需要该版本的文件,根据自己的错误信息,来选择对应的版本下载即可),然后自己手动下载https://github.com/electron-u...,这里下载的是Source code(zip),速度快,下载完成后解压,拷贝如图位置所有文件:
    拷贝winCodeSign所有文件
    拷贝至如图位置:
    没有路径的,需要自己该创建路径
  • step3:完成step2后,继续npm run build,发现又有文件下载失败 nsis-3.0.3.2(同上),然后自己手动下载https://github.com/electron-u...,同上,下载完成后解压,拷贝如图位置所有文件:拷贝nsis里所有文件
    拷贝至如图位置:
    没有路径的,需要自己该创建路径
  • step4:完成step3后,继续npm run build,发现又有文件下载失败 nsis-resources-3.3.0,但是按照上面的方法操作,最后还是会报错,然后我尝试,用step3中下载解压后的这个nsis-3.0.3.2版本试试,拷贝如图位置所有文件:
    拷贝nsis-resources所有文件
    拷贝至如图位置:
    没有路径的,需要自己该创建路径

至此,我们一共进行了四次拷贝操作,完成以上四步操作后,运行npm run build,不一会儿就能打包成功,得到你的第一个exe版本。

查看原文

雨中 赞了文章 · 10月16日

electron打包踩过的坑总结

vue-electron 执行npm run build时,在build的时候会因为下载远程打包所需文件而超时,然后根据错误一步一步就行手动安装相应的文件。
虽然在网上参考了很多相关方法,最终还是失败,然后屡次尝试后,终于成功了。
附上elelctron相关的淘宝镜像地址:https://npm.taobao.org/mirror...

  • step1:npm run build后,第一次报错需要下载 electron-v2.0.18-win32-x64.zip(我这里是需要该版本的文件,根据自己的错误信息,来选择对应的版本下载即可),在镜像中选取该版本号 2.0.18,点击进入,并选择下载 electron-v2.0.18-win32-x64.zipSHASUMS256.txt, 下载完成后,将SHASUMS256.txt文件改成 SHASUMS256.txt-2.0.18,然后将两个文件拷入如图位置:没有路径的,需要自己该创建路径
  • step2:完成step1后,继续npm run build,发现又有文件下载失败 winCodeSign-2.4.0(我这里是需要该版本的文件,根据自己的错误信息,来选择对应的版本下载即可),然后自己手动下载https://github.com/electron-u...,这里下载的是Source code(zip),速度快,下载完成后解压,拷贝如图位置所有文件:
    拷贝winCodeSign所有文件
    拷贝至如图位置:
    没有路径的,需要自己该创建路径
  • step3:完成step2后,继续npm run build,发现又有文件下载失败 nsis-3.0.3.2(同上),然后自己手动下载https://github.com/electron-u...,同上,下载完成后解压,拷贝如图位置所有文件:拷贝nsis里所有文件
    拷贝至如图位置:
    没有路径的,需要自己该创建路径
  • step4:完成step3后,继续npm run build,发现又有文件下载失败 nsis-resources-3.3.0,但是按照上面的方法操作,最后还是会报错,然后我尝试,用step3中下载解压后的这个nsis-3.0.3.2版本试试,拷贝如图位置所有文件:
    拷贝nsis-resources所有文件
    拷贝至如图位置:
    没有路径的,需要自己该创建路径

至此,我们一共进行了四次拷贝操作,完成以上四步操作后,运行npm run build,不一会儿就能打包成功,得到你的第一个exe版本。

查看原文

赞 21 收藏 15 评论 10

雨中 收藏了文章 · 10月15日

JS双等号比较符(“==”)作用细节

本文发布于https://wintc.top/article/50,转载请注明

都知道JS里”==“和”===“的区别,在于非同类型变量的比较中,”===“会直接返回false,而”==“则会先将两个比较值先转换为同一类型,再进行比较。然而,这里”先转换为同一类型“是什么样的规则呢?

一、容易忽视的比较细节

一直都没有在意”比较中的隐式类型转换“这个问题,因为常见的情况都太简单了:

"1" ==  1;            // true
1 == "1";             // true
0 == false;           // true

很简单, 很直观,直觉就是如此。直到我看见下面的比较:

![] == [] // true

看到这个比较前,我不知到没有特殊处理(非劫持、代理等)的a值能使得 a == a && a == !a 会返回true,然而现在它就在这里:

> a = []
[]
> a == a && a == !a
true

是时候该彻底掌握”比较中的隐式类型转换“了。许多教程、书本都建议应该使用”===“,避免使用”==“,以避免代码中的不确定性以及”===“速度会更快(因为没有类型转换)。经典书籍《你不知道的Javascript》一书中的观点却非如此,我比较赞同书中的观点,书中认为:存在”==“就应该搞清楚它的作用原理并且在代码中合理使用它,而不是一味避之。对我而言,我极少使用”===“,并且在编码时避免在不同类型变量之间进行比较。

二、”==“作用规则

a == b,如果a、b类型相同,那很简单,值相同即为true,不同即为false。所以这里只讨论a、b类型不同的情况——虽然应该避免不同类型变量相比较,但是弄明白”比较中的隐式类型转换“却非常必要。

参照MDN文档梳理了一下不同类型的的值比较的规则:

  • 当数字与字符串进行比较时,会尝试将字符串转换为数字值。
  • 如果操作数之一是Boolean,则将布尔操作数转换为1或0。
  • 如果操作数之一是对象,另一个是数字或字符串,会尝试使用对象的valueOf()toString()方法将对象转换为数字或字符串。
  • null == undefined为true,此外通常情况下null和undefined与其它对象都不相等。

可以看到,前三条规则中,都是试图转变为字符串和数字进行比较,在比较中,可以把布尔值当成数字。回到刚才的问题,”![] == []“就比较容易理解了,相当于"false == []",有Boolean操作数,先转为数字,相当于比较”0 == []“,而”[]“转为数字是0,所以返回true。

三、对象的valueOf和toString,转换的时候到底用哪个?

        Object对象在隐式转换的时候,会尝试调用valueOf和toString函数,向字符串或者数字转换。那优先会采用哪一个函数的值呢?

        测试后发现:如果valueOf或者toString返回原始值(”String“、”Number“、”Boolean“、”null“、”undefined“),按valueOf > toString的优先级取得返回值,若返回值是”null“或者”undefined“,比较返回false,否则根据另一个比较值转为字符串或者数字进行比较;如果valueOf和toString均不返回原始值,则比较操作将会报错!

const a = {}
a.valueOf = () => 1
a.toString = () => 2
console.log(a == 1, a == 2) // true, false

const b = {}
b.valueOf = () => null // 优先级高于toString,比较直接返回false
b.toString = () => '1'
console.log(b == 'null', b == 1, b == '1') // false, false, false

const c = {}
c.valueOf = () => ([]) // 返回非基本值,将尝试取toString比较
c.toString = () => '1'
console.log(c == 'undefined', c == '1') // false, true

const d = {}
d.valueOf = () => ([]) // 返回非基本值
d.toString = () => ([])
console.log(d == 'undefined', d == '1') // 比较报错:不能转为原始值

很明显,根据valueOf > toString的优先级可以看到,objA == 'abc' 的比较并不同于简单地将objA显式转换为字符串进行比较,即:objA == 'abc' 与 String(objeA) == 'abc' 结果并不一定相同(显式转换直接走toString):

const e = {}
e.valueOf = () => 1
e.toString = () => '2'
console.log(e == 1, e == '1', String(e) == '1',  String(e) == '2') // true, true, false, true

四、更高优先级的转换函数:ES6对象的Symbol.toPrimitive属性

除了valueOf、toString函数外,ES6规范提出了Symbol.toPrimitive作为对象属性名,其值是一个函数,函数定义了对象转为字符串、数字等原始值的返回值,其优先级要高于valueOf、toString。

**Symbol.toPrimitive** 是一个内置的 Symbol 值,它是作为对象的函数值属性存在的,当一个对象转换为对应的原始值时,会调用此函数。该函数被调用时,会被传递一个字符串参数 hint ,表示要转换到的原始值的预期类型。 hint 参数的取值是 "number""string" 和 "default" 中的任意一个。对于”==“操作符,hint传递的值是”default“。

const a = {}
a[Symbol.toPrimitive] = (hint) => {
    if (hint == 'number') return 1
    if (hint == 'string') return 2
    return 3
}
a.valueOf = () => 4
a.toString = () => 5
console.log(a == 1, a == 2, a == 3, a == 4, a == 5) // false, false, true, false, false

如果使用Number或者String强制转换a,则传入的”hint“会是”number“或者”string“。

五、总结

隐式类型转换确实是比较容易忽略的问题,毕竟通常很少用得到。本文介绍的valueOf、toString、Symbol.toPrimitive等函数,都可以干涉到类型转换的结果。想起以前网上见到的一道面试题:如何让a == 1 && a == 2 && a == 3同时成立?使用上述几个函数应该很简单就可以解答这个问题。

查看原文

雨中 赞了文章 · 10月15日

JS双等号比较符(“==”)作用细节

本文发布于https://wintc.top/article/50,转载请注明

都知道JS里”==“和”===“的区别,在于非同类型变量的比较中,”===“会直接返回false,而”==“则会先将两个比较值先转换为同一类型,再进行比较。然而,这里”先转换为同一类型“是什么样的规则呢?

一、容易忽视的比较细节

一直都没有在意”比较中的隐式类型转换“这个问题,因为常见的情况都太简单了:

"1" ==  1;            // true
1 == "1";             // true
0 == false;           // true

很简单, 很直观,直觉就是如此。直到我看见下面的比较:

![] == [] // true

看到这个比较前,我不知到没有特殊处理(非劫持、代理等)的a值能使得 a == a && a == !a 会返回true,然而现在它就在这里:

> a = []
[]
> a == a && a == !a
true

是时候该彻底掌握”比较中的隐式类型转换“了。许多教程、书本都建议应该使用”===“,避免使用”==“,以避免代码中的不确定性以及”===“速度会更快(因为没有类型转换)。经典书籍《你不知道的Javascript》一书中的观点却非如此,我比较赞同书中的观点,书中认为:存在”==“就应该搞清楚它的作用原理并且在代码中合理使用它,而不是一味避之。对我而言,我极少使用”===“,并且在编码时避免在不同类型变量之间进行比较。

二、”==“作用规则

a == b,如果a、b类型相同,那很简单,值相同即为true,不同即为false。所以这里只讨论a、b类型不同的情况——虽然应该避免不同类型变量相比较,但是弄明白”比较中的隐式类型转换“却非常必要。

参照MDN文档梳理了一下不同类型的的值比较的规则:

  • 当数字与字符串进行比较时,会尝试将字符串转换为数字值。
  • 如果操作数之一是Boolean,则将布尔操作数转换为1或0。
  • 如果操作数之一是对象,另一个是数字或字符串,会尝试使用对象的valueOf()toString()方法将对象转换为数字或字符串。
  • null == undefined为true,此外通常情况下null和undefined与其它对象都不相等。

可以看到,前三条规则中,都是试图转变为字符串和数字进行比较,在比较中,可以把布尔值当成数字。回到刚才的问题,”![] == []“就比较容易理解了,相当于"false == []",有Boolean操作数,先转为数字,相当于比较”0 == []“,而”[]“转为数字是0,所以返回true。

三、对象的valueOf和toString,转换的时候到底用哪个?

        Object对象在隐式转换的时候,会尝试调用valueOf和toString函数,向字符串或者数字转换。那优先会采用哪一个函数的值呢?

        测试后发现:如果valueOf或者toString返回原始值(”String“、”Number“、”Boolean“、”null“、”undefined“),按valueOf > toString的优先级取得返回值,若返回值是”null“或者”undefined“,比较返回false,否则根据另一个比较值转为字符串或者数字进行比较;如果valueOf和toString均不返回原始值,则比较操作将会报错!

const a = {}
a.valueOf = () => 1
a.toString = () => 2
console.log(a == 1, a == 2) // true, false

const b = {}
b.valueOf = () => null // 优先级高于toString,比较直接返回false
b.toString = () => '1'
console.log(b == 'null', b == 1, b == '1') // false, false, false

const c = {}
c.valueOf = () => ([]) // 返回非基本值,将尝试取toString比较
c.toString = () => '1'
console.log(c == 'undefined', c == '1') // false, true

const d = {}
d.valueOf = () => ([]) // 返回非基本值
d.toString = () => ([])
console.log(d == 'undefined', d == '1') // 比较报错:不能转为原始值

很明显,根据valueOf > toString的优先级可以看到,objA == 'abc' 的比较并不同于简单地将objA显式转换为字符串进行比较,即:objA == 'abc' 与 String(objeA) == 'abc' 结果并不一定相同(显式转换直接走toString):

const e = {}
e.valueOf = () => 1
e.toString = () => '2'
console.log(e == 1, e == '1', String(e) == '1',  String(e) == '2') // true, true, false, true

四、更高优先级的转换函数:ES6对象的Symbol.toPrimitive属性

除了valueOf、toString函数外,ES6规范提出了Symbol.toPrimitive作为对象属性名,其值是一个函数,函数定义了对象转为字符串、数字等原始值的返回值,其优先级要高于valueOf、toString。

**Symbol.toPrimitive** 是一个内置的 Symbol 值,它是作为对象的函数值属性存在的,当一个对象转换为对应的原始值时,会调用此函数。该函数被调用时,会被传递一个字符串参数 hint ,表示要转换到的原始值的预期类型。 hint 参数的取值是 "number""string" 和 "default" 中的任意一个。对于”==“操作符,hint传递的值是”default“。

const a = {}
a[Symbol.toPrimitive] = (hint) => {
    if (hint == 'number') return 1
    if (hint == 'string') return 2
    return 3
}
a.valueOf = () => 4
a.toString = () => 5
console.log(a == 1, a == 2, a == 3, a == 4, a == 5) // false, false, true, false, false

如果使用Number或者String强制转换a,则传入的”hint“会是”number“或者”string“。

五、总结

隐式类型转换确实是比较容易忽略的问题,毕竟通常很少用得到。本文介绍的valueOf、toString、Symbol.toPrimitive等函数,都可以干涉到类型转换的结果。想起以前网上见到的一道面试题:如何让a == 1 && a == 2 && a == 3同时成立?使用上述几个函数应该很简单就可以解答这个问题。

查看原文

赞 14 收藏 12 评论 1

认证与成就

  • 获得 2 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 9月17日
个人主页被 111 人浏览