工作日志 2020-02-26

Posted 2020-11-28 sirenvoid

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了工作日志 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;
      }
    }
  }
}