Question

我想设置我的自定义标记最小和最大边距。我怎么能这样做？

我正在使用角度2并使用插件角度分割。在那里，我有一个指令分裂排水沟。为此我需要设置最小和最大边距 - 左边。

Plunker遵循

https://plnkr.co/edit/w8O2I3bD4bdXp0QsL35L?p=preview

我想将光标移动（分割2个面板）限制为50％到70％。意思是，我想将最大和最小边距设置为光标。

HTML

<split direction="horizontal" style="position:relative;">
     <split-area size="70" >
          <p style="position:absolute;top:0;left:0;width:50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            <input type="button" value="Button" (click)="buttonClicked()">      

    </split-area>
    <split-area size="30" style="position:relative;">
            <p style="position:absolute;top:0;left:0;width:100%;z-index:1;background:red;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </split-area>
</split>

Answer 1

插件中没有内置机制来限制区域的大小。

您可以做的是听取发出的dragProgress事件并检查一个区域的大小属性：

<split direction="horizontal" (dragProgress)="onDragProgress($event)">
    <split-area size="30">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </split-area>
    <split-area size="70">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </split-area>
</split>

您必须参考班级中的区域并收听活动：

@ViewChildren(SplitAreaDirective) areasEl: QueryList<SplitAreaDirective>

onDragProgress(event) {
   if (event.sizes[0] < 30) {
       this.areasEl._results[0].size = 30
   }

   if (event.sizes[0] > 50) {
       this.areasEl._results[0].size = 50
   }
}

See live Plunkr

如何设置最小和最大保证金？

1 个答案: