showlotus's blog

归档 · 全部

首页

归档

关于

ivu-select-union <W6>

ivu-extendsivu-selectViewDesign

有这样一个场景,多个下拉框共用同一个下拉列表,如果有一个下拉框选中了某一项,那么该项不能被其他下拉框选中,也就是选中项不能重复。同时每个下拉框的下拉列表也是动态的,会根据已选中的值的变化而变化(看下图)。 方案一(外部实现)用一个「列表」记录当前所有下拉框已选中的值,每个下拉框的下拉列表都会根据已选中值和当前下拉框的值的变化而变化,前提是 Option 是采用 v-for 渲染 ...

v-set-title-attr <W5>

Vue 指令

有个需求,下拉框里的选项分组后,因为组名可能会很长,于是就想添加一个文本超出时显示省略号的样式,这个用 CSS 就能做到,小意思。不过,如果文本超出后,我还想有一个能展示当前文字所有信息的提示。因为本身就是一个浮层了,再添加一个浮层就感觉很怪(说实话也不好加 😂),于是就想用原生的 title 实现(先看效果,如下图所示)。 思路首先可能会想到,把 OptionGroup 上 ...

一周年啦!

年度总结

封面的图用的还是去年这个时候的必应每日一图,就当做是一种传承吧 🤭。 去年的这个时候,在我那小房间里研究怎么搭建博客,弄了一下午,晚上的时候才给搭好。转眼间,晃晃悠悠一年过去了,好快啊。回顾这一年,满打满算才写了 12 篇,差不多一个月一篇。今年有几个月都没写过,都是最近这两个月,开始坚持【每周一篇】系列,才给顶上来了,今后还要坚持 ✊。 想想去年的自己,偶尔上班还迟到 😂,下 ...

this、闭包和高阶函数 <W4>

JavaScriptJavaScript 设计模式与开发实践

这周没遇到什么比较有意思的地方,就拿这篇读书笔记凑数吧,写了也挺久的了,从 9.11 开始写,9.24 才结束,太能拖啦~ thisthis 的指向大致分为四种: 作为对象的方法调用当函数作为对象的方法调用时,this 指向该对象。 const obj = &#123; name: "Tom", getName() &#123; console.log(this.n ...

v-scroll-to <W3>

Vue 指令

实现的功能:将当前容器或子容器的滚动条移动到底部或顶部。主要源于,某个弹窗里有一个按钮可以将当前表格新增一行,如果弹窗内容过长,就会出现滚动条,然后测试说,点了新增后,是不是滚动条需要滚动到底部。这个效果,之前在另一个弹窗里实现过,怕不是他看到了,感觉这样更合理,然后给我提需求,算是自己埋了个坑。不过,也还好,想着如果用之前的代码,直接 CV 过来,太 low 了,打算写个指令,高端 ...

InputNumberUnit <W2·中秋节不打烊>

ivu-extendsivu-input-numberViewDesign

需求说,要把设置字体大小的数字输入框,添加一个字体的单位,px 或者是 em。这其实也没啥,ViewDesign 的 InputNumber 提供的有单位这个设置,不过:这个单位是通过格式化当前输入框中的内容得到的,也就是它和整个输入框的内容是一体的,也能删除,不过删除后,组件内部会给它重新加上。总感觉这个交互很诡异,不知道官方当时设计的时候,出于哪种考虑没把单位专门分离出来。既然他 ...

ColorPicker 扩展指令 v-modify-opacity <W1>

ivu-color-pickerivu-extendsViewDesignVue 指令

产品提了个意见:颜色选择器的颜色能不能不要默认为透明,选完颜色后,就立马确认了,容易忘记设置不透明度(如下图所示)。由于这个颜色是和所有组件的背景色绑定的,设为透明是为了组件更好的展示,改默认颜色固然不可行。其实每当选中颜色的时候,上方的色块会显示当前的颜色,如果用的多,看到这个颜色没变,大概也能知道缺了啥。不过对于用户而言,这确实是个不好的体验,于是,就有了一个想法:如果当前颜色的 ...

正则学习笔记 + 案例

JavaScriptJavaScript 正则表达式迷你书

「JavaScript 正则表达式迷你书.pdf」https://www.aliyundrive.com/s/i77Fq6HocdT 匹配 16 进制颜色 匹配 6 位的 16 进制 const regex = /#[0-9a-fA-F]{6}/ 颜色也有可能是 3 位的,由于管道符也是贪婪匹配,所以需要先匹配 6 位再匹配 3 位 const regex = /#[0-9a ...

Windows 终端美化 + 使用 Code 命令用 VSCode 打开文件夹

Dev Tools

在终端使用 Code 命令垂涎 Mac 的终端,能直接用 Code . 然后在 VSCode 中打开当前文件夹,作为一个 Windows 的开发者羡慕不已。直到前几天,在网上冲浪,发现了某个视频博主在 Windows 下,居然能也能用 Code . 命令,于是顺藤摸瓜,找到了下面这个(链接指路): 点击标注的那个下载链接,然后傻瓜式安装即可。安装完毕后,就能在终端中使用 Code ...

原型和原型链

JavaScriptJavaScript 设计模式与开发实践

最近在看 JavaScript 设计模式与开发实践 ,虽然是 15 年出版的书,但书中所讲的东西对我这个小白来说,还是很前沿的。书中在正式开始讲设计模式之前,先将 JavaScript 里高级基础知识: 原型 、this、call、apply 、闭包 详细介绍了一遍,对我来说简直就是福音,打算把这些挨个写篇笔记,记录一下。 原型模式一种用以创建对象的模式,如果要想创建一个对象,一种 ...

1234567