个人工作总结(前两周)(个人,个人!!!)

1、comments要认真整理,不要漏掉,非常严重,不要糊弄,最好完成点resovle,然后就会显示outdated

每次comments完,重新提交会有罗列

2、使用v-model来完成组件化

最佳实践:

样式在父组件和page级别,用样式穿透去做,

组件负责具体数据层的实现,(类似于非受控?)

让父组件在使用的时候可以不关心内部方法,只传入相关数据即可。

比如说,对于一个accordion组件(内嵌自己的collapse组件),accordion 可控制是否多选,并传给collapse,在collapse状态改变的时候多选则额外处理将数据改成只有一个checked; 而collapse完成最基础的展开和收起功能,同时若有accordion,则上浮告诉accordion 一下(类似于去告诉accordion)
3、比较优的实践:

对于一块区域内前后有分割线,我的做法:

(1)将分割线封装起来--》

  粒度太细,而且没有交互纯UI,,封装为上分割线➕文字➕下分割线 ===》

  事实证明分割线算是导出bug,只使用一个view节点,使用::before ::after来装入两条分割线。

  (组件化后也可以使用穿透的方式加before after完成上下设置)

  【注意】before after 必须要设置content :‘ ’

  【注意】before after 是块级元素,但是不要设置为inline-block,否则宽度和边距不好控制(似乎是会额外留出一条给文字部分?总之会有奇怪的边距bug,而且不好查)

4、background属性

  对于上文提到的before   ( & 就是直接指代上一层层级)

  &::before {
    content: "";
    position: relative;
    margin-bottom: 14rpx;
    width: 100%;
    height: 16rpx;
    background: url("~@/xxxx");
    background-size: 100% auto, contain;
  }

  这里似乎height不用定义也没关系。

  background-size值分别为, 表现为怎样的

为了设定超过一张以上的图片尺寸时,需要提供多项数值,它们通过逗号分隔。

background-size: 50% 25%, contain, 3em;

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size

 

posted @ 2022-12-04 22:40  send/me/a/cat  阅读(22)  评论(0编辑  收藏  举报