1

我正在做一个小型的 ui 项目。所以我开发了'form-accordion'标签，它以下列方式使用：

<form-accordion>
    <panel label='panel 1'>
    ...
    </panel>
    <panel label='panel 2'>
    ...
    </panel>
</form-accordion>

现在我想定义另一个我想以下列方式使用的标签'form-tabs'：

<form-tabs>
    <panel label='panel 1'>
    ...
    </panel>
    <panel label='panel 2'>
    ...
    </panel>
</form-tabs>

我的问题是：如何定义两个不同的标签“面板”，它们将在不同的父标签下呈现不同的方式。

4

2 回答 2

1

我认为有不同的方法可以做到这一点，但基本上你会在你的子标签中定义一个脚本，并且该脚本会收到指示更改的内容，之后，panel.tag 的脚本将处理你的内容。编写该代码的一种方法：

文件：panel.tag

<panel>
  <div>
    Your HTML here
  </div>
  
  <script>
    this.on('mount', function(){
      //write your code to handle content here
      if(opts.type == 1)
      {
         // do something
      }
      else if(opts.type == 2)
      {
         // do something else
      }
    });
  </script>

  <style>
    /* CSS class of that tag */
  </style>
</panel>

因此，当您调用该标签时，您会发送一些内容来更改您的内容，例如属性：

文件：form-accordion.tag

<form-accordion>
  <panel type="1">
  </panel>
</form-accordion>

文件：form-tabs.tag

<form-tabs>
  <panel type="2">
  </panel>
</form-tabs>

另一种方法是使用更好的防暴功能，例如：

文件：panel.tag

<panel>
  <div>
     <div if={opts.type == 1}>
       Panel 1
     </div>
     <div if={opts.type == 2}>
       Panel 2
     </div>
  </div>
  
  <script>
    // 
  </script>

  <style>
    /* CSS class of that tag */
  </style>
</panel>

编辑

我再次阅读了您的问题，也许简单的方法更适合您的需求，该代码只需将您的标签写在 panel.tag 的 HTML 上：

文件：panel.tag

<panel>
  <div>
     { opts.label }
  </div>
</panel>

于 2017-06-28T17:43:28.850 回答
0

嘿，我想优化你的代码，而不是多次调用面板标签（取决于你想看到的面板标签的数量），你可以使用 riot 的each关键字创建一个简单的循环来创建你想要使用的面板数量。 .. 如下所示的form-accordion&form-tabs标签。我们可以将panelNum循环中的 in 作为标签opts数组的一部分传递给您调用的 arglabel

<form-accordion>
    <div each={panelNum in NumOfPanelsNeeded}>
        <panel label={panelNum}> ... </panel>
    </div>
</form-accordion>

<form-tabs>
    <div each={panelNum in NumOfPanelsNeeded}>
        <panel label={panelNum}> ... </panel>
    </div>
</form-tabs>

然后，在著名的panel标签中，我们可以label从opts数组中检索这个 arg，然后最终将其显示在标签 html 中。

<panel>
    <div>panel { label }</div>

    <script>
        this.label = opts.label
    </script>
</panel>

就那么简单！;) 如果您需要帮助弄清楚如何在 javascript 中将事件处理程序从子级添加到父级，请告诉我。

于 2017-11-10T19:08:13.087 回答