给 ViewDesign 加个主题换肤💖 <W16>
最近要做主题换肤的功能，项目用的 UI 框架是 ViewDesign ，只支持定制主题，不支持动态主题。查了好多资料，比如：用 less 变量更换、预设几种主题的 CSS 的文件，再动态切换 link 标签的引入资源路径等等。这些方案的应用场景是，对项目中完全自主开发的模块的颜色进行切换。也即，你自己开发了一个导航栏（Menu）和顶部（Header），这俩你是完全控制的，用上述提到的 ...
Vue 中如何取消 ViewDesign 中组件内部的指令 <W13>
最近需要做这样一个功能：当展开下拉框或者日期选择器的浮层面板后，点击某个区域，不会让浮层消失。如果有了解过组件库内部源码的话，这种浮层的点击外部后隐藏，大多数组件内部都是通过一个 clickOutside 的指令来实现，而目标功能就是需要实现一块 “禁区”，当点击 “禁区” 时不会触发 clickOutside。本文就是基于该功能的实现对这个指令进行探索，记录自己实现这个功能的全过程 ...
ivu-input-number-union <W7>
最近朋友问我，多个数字输入框联动怎么做？他遇到一个需求，表格里的某一列是输入数字输入框，有多行，而最后一行是这些数字的总和。要达到的效果是，当输入框中的数字和超出总和时，清空所有输入框；如果未超出最大值，且还剩一个输入框未输入时，自动对最后一个输入框赋值。刚好前一段时间，做了一个下拉框联动的，两者的大体思路是相同的。首先是采用指令去实现，过程稍稍有点复杂，于是最后又实现了一个二次封装 ...
ivu-select-union <W6>
有这样一个场景，多个下拉框共用同一个下拉列表，如果有一个下拉框选中了某一项，那么该项不能被其他下拉框选中，也就是选中项不能重复。同时每个下拉框的下拉列表也是动态的，会根据已选中的值的变化而变化（看下图）。 方案一（外部实现）用一个「列表」记录当前所有下拉框已选中的值，每个下拉框的下拉列表都会根据已选中值和当前下拉框的值的变化而变化，前提是 Option 是采用 v-for 渲染 ...
InputNumberUnit <W2·中秋节不打烊>
需求说，要把设置字体大小的数字输入框，添加一个字体的单位，px 或者是 em。这其实也没啥，ViewDesign 的 InputNumber 提供的有单位这个设置，不过：这个单位是通过格式化当前输入框中的内容得到的，也就是它和整个输入框的内容是一体的，也能删除，不过删除后，组件内部会给它重新加上。总感觉这个交互很诡异，不知道官方当时设计的时候，出于哪种考虑没把单位专门分离出来。既然他 ...
ColorPicker 扩展指令 v-modify-opacity <W1>
产品提了个意见：颜色选择器的颜色能不能不要默认为透明，选完颜色后，就立马确认了，容易忘记设置不透明度（如下图所示）。由于这个颜色是和所有组件的背景色绑定的，设为透明是为了组件更好的展示，改默认颜色固然不可行。其实每当选中颜色的时候，上方的色块会显示当前的颜色，如果用的多，看到这个颜色没变，大概也能知道缺了啥。不过对于用户而言，这确实是个不好的体验，于是，就有了一个想法：如果当前颜色的 ...