弹窗组件

2019/09/17 css

手写弹窗组件

现在 ui 库写到太好,太成熟了,刚刚入职场的我就是拿着 ui 库写遍代码,最后的就是本来不是特别熟的 css html 忘记完了。庆幸的是现在工作要手写很多东西,好好补补基础;

弹窗组件布局

用第三方用多了,然后自己都不会写了。第一次写的很糟糕,直接出 bug 了,第二次参照同事的代码,实现了没有问题,只是很多无用代码。第三次看同事代码,完美实现了,很满意;

1.第二次代码: 子组件里面代码

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  margin-bottom: 49px;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: 0.5);
}
  .dialog {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    padding: 15px;
    font-family: PingFangSC;
    font-weight: 300;
  }

然后我在父组件里面又写了

  .popup-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
  }

enennen 这个看着有点恶心,啰里八嗦的,我是看不下去了

第三版代码 只在子元素里面写,父元素不写

.wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: 0.5);
}
.dialog {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #fff;
  padding: 15px;
  font-family: PingFangSC;
  font-weight: 300;
}

温馨小提示:不管是公共组件还是基础组件,样式尽量是组件内部控制,父元素不做任何处理。基础组件,组件里面不要有任何逻辑处理,都抛出给父元素处理

写了两次组件之后,成长了不少,以前没有头绪,不知道怎么写的组件,现在觉得其实都不难,先静态页面布局,然后通过隐藏显示,定位或者用一些标识符去实现。多写多练,慢慢都觉得不难了。曾经看着头疼的布局和样式现在发现就那么回事没啥难的

如何书写组件??

后来发现,写组件其实并没有我想象那么难,布局也不难,慢慢的想清楚思路,先布局好,然后通过 javaScript 去判断状态。慢慢来思路好了,就清晰了


一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents