工作日志 2020-02-26
工作日志 2020 年 2 月 26 日
第1工时
区间时间控件调整
同时,引用两个单时间控件,会使两个控件不协调
第2工时
时间控件 需要 最大值 最小值
涉及时分秒3个滚轮联动. 时的极值会导致分的值域变化.分秒同理.
但是设计时忽视这个问题. 导致现在得联动效果无法根据时分秒 分割开.
暂时没有有效的解决方法
第3工时
控件暂时调整到这.
FORM TABLE 布局时今天的重点.
控件大中小迷你 4档 其中 中档对应高度35px 属于常规的高度设置.
TABLE 控件的SCSS 调整 和功能还不知道是否完备 ,需要进一步确认.
FORM 的布局 主要有 田式 日式 一式
第4工时
FORM 四种尺寸调整 default / medium/ small / mini
吸取以前的经验: 要细心的调整各个控件的构成;而不是统一一个类来泛泛的管理所有控件;
否则,在脱离FORM 后 ,单独控件的SIZE会产生意想不到的后果;
将SASS 文件设置统一 尺寸类 以统一管理
$default-height: 40px;
$medium-height: 35px;
$small-height: 32px;
$mini-height: 28px;
$default-fs: 14px;
$medium-fs: 14px;
$small-fs: 13px;
$mini-fs: 12px;
下一步,逐个控件尺寸控制调整;
第5工时
INPUT TEXT-AREA 尺寸调整.
意外发现 清空按钮会因为尺寸变化 上下位置不固定.通过跟随总尺寸,高度也变化;
同时,将清空按钮的方法抽出共通;
SELECT 改了一半;
第6工时
SELECT 改动后 赋值出现问题
清空按钮需要的参数 与 SELECT 提供的值不符.
增加多个类型区别$.type() 统一进出的值
set value(value) {
if (value === '' || value === undefined) {
this.value = []
} else if ($.type(value) === 'array') {
this._value = value
this.update(value)
} else if ($.type(value) === 'string') {
if (value.includes(',')) {
this.value = value.split(',')
} else {
this.value = []
}
} else if ($.type(value) === 'number') {
this.value = [value]
}
}
第7工时
SELECT 多选 / 单选 改正完
上下弹框根据 父级高度会 选择上下弹.
多选的input高度会随 TAGS变多而增高
TAGS 的容器宽度 需要根据 INPUT长度变化而变化,主要把清空按钮的位置给让出来
第8工时
日期控件调整完毕. 没遇到什么困难;
input .find('.lt-input') input和lt-input 同级时 应该使用filter()
双日期控件 改动较大 没改完 需要加新得CASS
Sass 中的$代号 可以进行运算
.input-size--medium {
font-size: $medium-fs;
.input__inner {
height: $medium-height;
line-height: $medium-height;
}
.input__icon {
line-height: $medium-height;
}
&.range-editor {
&.input__inner {
height: $medium-height;
line-height: $medium-height;
.range-input {
font-size: $medium-fs;
}
.range__icon,
.range-separator {
line-height: $medium-height - 8px;
}
}
}
}
第9工时
时间控件/双时间控件 样式调试完毕. 和 日期类似
radio/checkbox 控件 样式调整
在使用中 有个两难现象: radio控件的 name 在有2个组同名 一个隐藏一个显示 来回切换的时候
会使2组认为是1个
之前的处理是: 在一组radio外面套层
