本文首发于个人技术网站

艾特网 - 程序员导航站

之前用伪元素before和after实现了一版组件对齐辅助线，组件的拖拽缩放用的是这个库 Github直达
实现的功能为：点击组件的时候，组件高亮并且辅助线在左上角显示。如下图

image

.guide-leftTop {
    left: -502px;
    top: -502px;
    border: 1px dashed #2ab1e8;
    border-top: none;
    border-left: none;
}

右上角div样式如下，将右、上边框置为none。

.guide-rightTop {
  right: -502px;
  top: -502px;
  border: 1px dashed #2ab1e8;
  border-top: none;
  border-right: none;
}

左下角div样式如下，将左、下边框置为none。

.guide-leftBottom {
  left: -502px;
  bottom: -502px;
  border: 1px dashed #2ab1e8;
  border-bottom: none;
  border-left: none;
}

右下角div样式如下，将右、下边框置为none。

.guide-rightBottom {
  right: -502px;
  bottom: -502px;
  border: 1px dashed #2ab1e8;
  border-right: none;
  border-bottom: none;
}

可以打开浏览器测试一番了，出来之后的样式酱紫的：
激活：

image

image

我去，这竟然......好难看的样子!
说好的只在拖拽情况下显示呢？？？眼角流出的泪水，是我对生活的无奈！
又开始挠起了头发，摸一摸这日益增高的发际线......
嗯想了想 貌似可以通过拖拽的时候给添加动态class名去实现呀。
我激动不已，仿佛在我20多年的人生道路上又重新看到了希望，苍天有眼呐！
组件的class名为mw-widget，创建一个包裹所有辅助线div的class名mw-widget-show-guide，把它们紧紧的裹起来，放到和mw-widget的class名平级的地方，层级顺序在less或者scss下是酱紫的：

.mw-widget{
    //...
}
.mw-widget-show-guide{
    .guide-leftTop{
        //...
    }
    .guide-rightTop{}
    .guide-leftBottom{}
    .guide-rightBottom{}
}

之后，在我们拖拽组件mousedown的过程中，给当前组件动态添加class名mw-widget-show-guide，再在其mouseup的时候，移除掉class名mw-widget-show-guide，效果是下面这样：

image