showlotus's blog

标签 · ivu-extends

首页

归档

ivu-input-number-union <W7>

ivu-extendsivu-input-numberViewDesign

最近朋友问我,多个数字输入框联动怎么做?他遇到一个需求,表格里的某一列是输入数字输入框,有多行,而最后一行是这些数字的总和。要达到的效果是,当输入框中的数字和超出总和时,清空所有输入框;如果未超出最大值,且还剩一个输入框未输入时,自动对最后一个输入框赋值。刚好前一段时间,做了一个下拉框联动的,两者的大体思路是相同的。首先是采用指令去实现,过程稍稍有点复杂,于是最后又实现了一个二次封装 ...

ivu-select-union <W6>

ivu-extendsivu-selectViewDesign

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

InputNumberUnit <W2·中秋节不打烊>

ivu-extendsivu-input-numberViewDesign

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

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

ivu-color-pickerivu-extendsViewDesignVue 指令

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