javascript - 如何设置最小和最大剩余边距？

Question

我想设置自定义标签的最小和最大边距。我怎样才能做到这一点？

我正在使用 Angular 2 并使用插件 Angular-Split。那里有一个指令性的分隔线。为此，我需要设置最小和最大边距。

笨蛋跟随

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>

您必须引用类(class)中的区域并聆听事件:

@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