如何设置最小和最大剩余边距？ [关闭]答案

【问题标题】：How to set minimum and maximum margin left? [closed]如何设置最小和最大剩余边距？ [关闭]
【发布时间】：2018-01-21 18:05:44
【问题描述】：

我想设置我的自定义标签最小和最大边距。我该怎么做？

我正在使用 angular 2 并使用插件 angular-split。那里我有一个指令拆分排水沟。为此，我需要设置 min 和 max margin-left。

Plunker 跟随

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

我想将光标移动（拆分 2 个面板）限制为 50% 到 70%。意思是，我想将 max 和 min margin-left 设置为光标。

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>

【问题讨论】：

标签： javascript angular typescript events

【解决方案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

【讨论】：