posthtml components下载 - posthtml components源代码下载

poSthtml组件

PoSthtml的Laravel Blade启发的组件

安装

npm i -D posthtml-component

介绍

该Postthtml插件提供了一种适合HTML友好的语法，用于使用HTML模板中的组件。如果您熟悉刀片，反应，vue或类似内容，则会发现该语法很熟悉，因为此插件受到它们的启发。

另请参阅使用此插件的第一个Postthtml Bootstrap UI，并在此处检查启动模板。

选项

姓名	类型	默认	描述
根	`String`	`'./'`	根路径在哪里寻找组件。
文件夹	`String[]`	`['']`	相对于`options.root`路径数组。根或定义的名称空间。
fileextension	`String\|String[]`	`'html'`	要查找的组件文件扩展名。
tagprefix	`String`	`'x-'`	标签前缀。
标签	`String\|Boolean`	`false`	组件标签。与`options.attribute`一起使用。布尔只有`false` 。
属性	`String`	`'src'`	用于定义组件文件路径的属性。
名称空间	`String[]`	`[]`	名称空间根路径，后备路径和自定义覆盖路径的数组。
namespaceseparator	`String`	`'::'`	标签名称的名称空间分隔符。
屈服	`String`	`'yield'`	注入主要组件内容的标签名称。
投币口	`String`	`'slot'`	插槽的标签名称
充满	`String`	`'fill'`	填充插槽的标签名称。
Slotseparator	`String`	`':'`	`<slot>`和`<fill>`标签的名称分离器。
堆	`String`	`'stack'`	`<stack>`的标签名称。
推	`String`	`'push'`	`<push>`的标签名称。
PropsScriptAttribute	`String`	`'props'`	`<script props>`用于检索组件道具。
PropScontext	`String`	`'props'`	脚本中的对象的名称用于处理道具。
PropSattribute	`String`	`'props'`	将名称定义为组件标签上的JSON。
PropsSlot	`String`	`'props'`	用于通过`$slots.slotName.props`检索传递给插槽的道具。
分类	`Object`	`{recognizeSelfClosing: true}`	将选项传递给`posthtml-parser` 。
表达	`Object`	`{}`	将选项传递给`posthtml-expressions` 。
插件	`Array`	`[]`	PoSthtml插件将应用于每个解析的组件。
匹配器	`Object`	`[{tag: options.tagPrefix}]`	用于匹配标签的对象数组。
attrsparserrules	`Object`	`{}`	属性解析器插件的其他规则。
严格的	`Boolean`	`true`	切换异常投掷。
MergeCustomizer	`Function`	`function`	lodash `mergeWith`以合并`options.expressions.locals`的回调。
公用事业	`Object`	`{merge: _.mergeWith, template: _.template}`	实用方法传递给`<script props>` 。
元素	`Object`	`{}`	具有`valid-attributes.js`的标签名称和功能修饰符的对象。
SAFELISTATTRIBUTES	`String[]`	`['data-*']`	属性名称的数组添加到默认有效属性。
排名截图	`String[]`	`[]`	属性名称的数组以从默认有效属性中删除。

基本示例

创建组件：

 <!-- src/button.html -->
< button type =" button " class =" btn " >
  < yield > </ yield >
</ button >

使用它：

 <!-- src/index.html -->
< html >
< body >
  < x-button type =" submit " class =" btn-primary " > Submit </ x-button >
</ body >
</ html >

init poSthtml：

 // index.js
const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )
const { readFileSync , writeFileSync } = require ( 'node:fs' )

posthtml ( [
  components ( { root : './src' } )
] )
  . process ( readFileSync ( 'src/index.html' , 'utf8' ) )
  . then ( result => writeFileSync ( 'dist/index.html' , result . html , 'utf8' ) )

结果：

 <!-- dist/index.html -->
< html >
< body >
  < button type =" submit " class =" btn btn-primary " > Submit </ button >
</ body >
</ html >

您可能已经注意到src/button.html组件包含type和class属性，并且当我们在src/index.html中使用时，我们也传递了这些属性。

结果是该type被覆盖， class合并。

默认情况下，合并了class和style属性，而其他所有属性被覆盖。您还可以通过预先override:到类属性来覆盖class和style属性。

例如：

 < x-button override:class =" btn-custom " > Submit </ x-button >

<!-- Output -->
< button type =" button " class =" btn-custom " > Submit </ button >

您传递给组件的所有属性都将添加到组件的第一个节点或带有属性attributes的节点的第一个节点，只有当它们未通过<script props>定义为props或不是“已知属性”时（请参阅有效的attributes.js）。

您还可以通过插件的选项来定义哪些属性被认为是有效的。

有关此属性部分的更多详细信息。

屈服

<yield>标签是您传递给组件的内容的位置。

该插件配置了posttml解析器以识别自关闭标签，因此您也可以写入为<yield /> 。

简而言之，我们将在示例中使用自关闭标签。

fileextension

默认情况下，插件查找具有.html扩展名的组件。您可以通过将扩展名数组传递给fileExtension选项来更改此操作。

当使用数组时，如果两个具有相同名称的文件匹配两个扩展名，则将使用与数组中第一个扩展程序匹配的文件。

 const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )

posthtml ( [
  components ( { 
    root : './src' , // contains layout.html and layout.md
    fileExtension : [ 'html' , 'md' ]
  } )
] )
  . process ( `<x-layout />` )
  . then ( result => console . log ( result . html ) ) // layout.html content

特征

标签名称和X标签

您可以以多种方式使用组件，也可以使用它们的组合。

如果要将组件使用为“ Include”，则可以定义标签和src属性名称。

使用上一个按钮组件示例，我们可以定义标签和属性名称，然后以这样的方式使用它：

 <!-- src/index.html -->
< html >
  < body >
    < component src = " button.html " >Submit</ component >
  </ body >
</ html >

init poSthtml：

 // index.js

require ( 'posthtml' ) (
  require ( 'posthtml-component' ) ( { 
    root : './src' , 
    tag : 'component' , 
    attribute : 'src' 
  } ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

如果您需要对标签匹配的更多控制权，则可以通过options.matcher传递匹配器或单个对象的数组。

 // index.js
const options = { 
  root : './src' , 
  matcher : [
    { tag : 'a-tag' } , 
    { tag : 'another-one' } , 
    { tag : new RegExp ( `^app-` , 'i' ) } ,
  ] 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

使用posthtml-components当您使用x-tag-name语法时，无需指定路径名。

设置poSthtml：

 // index.js
const options = { 
  root : './src' , 
  tagPrefix : 'x-'
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

使用：

 <!-- src/index.html -->
< html >
< body >
  < x-button > Submit </ x-button >
</ body >
</ html >

如果您的组件在子文件夹中，则可以使用dot访问它：

 <!-- src/components/forms/button.html -->
< x-forms .button > Submit </ x-forms .button >

如果您的组件位于带有多个文件的子文件夹中，则为了避免写出主文件名，您可以使用index.html而无需指定。

这是一个例子：

 <!-- src/components/modals/index.html -->
< x-modal .index > Submit </ x-modal .index >

<!-- You may omit "index" part since the file is named "index.html" -->
< x-modal > Submit </ x-modal >

解析器选项

您可以通过options.parserOptions将选项传递给posthtml-parser 。

 // index.js
const options = { 
  root : './src' , 
  parserOptions : { decodeEntities : true } 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( 'some HTML' , options . parserOptions )
  . then ( /* ... */ )

重要的

您将传递给插件的parserOptions也必须在代码中的process方法中传递，否则您的poSthtml构建将使用posthtml-parser默认值，并将覆盖您传递给posthtml-component任何内容。

自关闭标签

该插件默认情况下支持自关闭标签，但是您需要确保在代码中的process方法中启用它们，通过传递recognizeSelfClosing: true ：

 // index.js
require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( { root : './src' } ) )
  . process ( 'your HTML...' , { recognizeSelfClosing : true } )
  . then ( /* ... */ )

如果您不将其添加到process中，则PoSthtml将使用posthtml-parser默认值，并且不支持自关闭组件标签。这将在未输出的自关闭标签后导致所有内容。

多个文件夹

您可以完全控制组件文件的存在。设置组件的基本根路径后，您可以设置多个文件夹。

./src/layouts ，如果您的根为./src ./src/components则有几个文件夹，例如。

 // index.js
const options = { 
  root : './src' , 
  folders : [ 'components' , 'layouts' ] 
} ;

require ( 'posthtml' ) ( require ( 'posthtml-component' ) ( options ) )
  . process ( /* ... */ )
  . then ( /* ... */ )

名称空间

使用名称空间，您可以定义组件的顶层根路径。

它对于处理自定义主题可能很有用，在该定义主题中，您可以在未找到组件的情况下定义特定的顶级根部，并以后备根为单位，以及用于覆盖的自定义根。

这使得创建这样的文件夹结构是可能的：

src （根文件夹）
- components （用于模态，按钮等组件的文件夹）
- layouts （用于布局组件的文件夹，例如基本布局，标头，页脚等）
- theme-dark （主题黑暗的名称空间文件夹）
  - components （主题黑暗组件的文件夹）
  - layouts （用于黑暗主题的布局组件的文件夹）
- theme-light （主题光的名称空间文件夹）
  - components （用于光主题的组件的文件夹）
  - layouts （用于黑暗主题的布局组件的文件夹）
- custom （用于覆盖您的名称空间主题的自定义文件夹）
  - theme-dark （用于覆盖黑暗主题的自定义文件夹）
    - components （用于主题黑暗组成部分的文件夹）
    - layouts （用于深色主题的覆盖布局组件的文件夹）
  - theme-light （用于覆盖光主题的自定义文件夹）
    - components （用于主题黑暗组成部分的文件夹）
    - layouts （用于深色主题的覆盖布局组件的文件夹）

选项就像：

 // index.js
const options = {
  // Root for component without namespace
  root : './src' ,
  // Folders is always appended in 'root' or any defined namespace's folders (base, fallback or custom)
  folders : [ 'components' , 'layouts' ] ,
  namespaces : [ {
    // Namespace name will be prepended to tag name (example <x-theme-dark::button>)
    name : 'theme-dark' ,
    // Root of the namespace
    root : './src/theme-dark' ,
    // Fallback root when a component is not found in namespace
    fallback : './src' ,
    // Custom root for overriding, the lookup happens here first
    custom : './src/custom/theme-dark'
  } , {
    // Light theme
    name : 'theme-light' ,
    root : './src/theme-light' ,
    fallback : './src' ,
    custom : './src/custom/theme-light'
  } , {
    /* ... */
  } ]
} ;

使用组件名称空间：

 <!-- src/index.html -->
< html >
< body >
  < x-theme-dark : :button >Submit</ theme-dark : :button >
  < x-theme-light : :button >Submit</ theme-light : :button >
</ body >
</ html >

老虎机

组件可以定义可以在使用时填充内容的插槽。

例如：

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header />
  </ div >
  < div class = " modal-body " >
    < slot : body />
  </ div >
  < div class = " modal-footer " >
    < slot : footer />
  </ div >
</ div >

使用组件：

 <!-- src/index.html -->
< x-modal >
  < fill : header >Header content</ fill : header >
  < fill : body >Body content</ fill : body >
  < fill : footer >Footer content</ fill : footer >
</ x-modal >

结果：

 <!-- dist/index.html -->
< div class =" modal " >
  < div class =" modal-header " >
    Header content
  </ div >
  < div class =" modal-body " >
    Body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >

默认情况下，替换了插槽内容，但是您还可以预处理或附加内容，或通过不填充插槽来保留默认内容。

在组件中添加一些默认内容：

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header >Default header</ slot : header >
  </ div >
  < div class = " modal-body " >
    < slot : body >content</ slot : body >
  </ div >
  < div class = " modal-footer " >
    < slot : footer >Footer</ slot : footer >
  </ div >
</ div >

 <!-- src/index.html -->
< x-modal >
  < fill : body prepend>Prepend body</ fill : body >
  < fill : footer append>content</ fill : footer >
</ x-modal >

结果：

 <!-- dist/index.html -->
< div class =" modal " >
  < div class =" modal-header " >
    Default header
  </ div >
  < div class =" modal-body " >
    Prepend body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >

堆栈

您可以将内容推向命名的堆栈，这些堆栈可以在其他地方（例如其他组件中）呈现。这对于指定组件所需的任何JavaScript或CSS特别有用。

首先，将<stack>标签添加到您的html：

<!-- src/index.html -->
<html>
  <head>
+    <stack name="styles" />
  </head>
<body>
  <x-modal>
    <fill:header>Header content</fill:header>
    <fill:body>Body content</fill:body>
    <fill:footer>Footer content</fill:footer>
  </x-modal>
  
+  <stack name="scripts" />
</body>
</html>

然后，在模态组件或任何其他儿童组件中，您可以将内容推入此堆栈：

 <!-- src/modal.html -->
< div class = " modal " >
  < div class = " modal-header " >
    < slot : header />
  </ div >
  < div class = " modal-body " >
    < slot : body />
  </ div >
  < div class = " modal-footer " >
    < slot : footer />
  </ div >
</ div >

< push name = " styles " >
  < link href = " https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel = " stylesheet " >
</ push >

< push name = " scripts " >
  < script src = " https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " ></ script >
</ push >

输出将是：

 <!-- dist/index.html -->
< html >
< head >
  < link href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel =" stylesheet " >
</ head >
< body >
< div class =" modal " >
  < div class =" modal-header " >
    Header content
  </ div >
  < div class =" modal-body " >
    Body content
  </ div >
  < div class =" modal-footer " >
    Footer content
  </ div >
</ div >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " > </ script >
</ body >
</ html >

once属性允许您每个渲染周期仅推出一次内容。

例如，如果您要在循环中渲染给定的组件，则可能只希望按JavaScript并首次渲染组件时CSS。

例子。

 <!-- src/modal.html -->
< div class =" modal " >
  <!-- ... -->
</ div >

<!-- The push content will be pushed only once in the stack -->

< push name =" styles " once >
  < link href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " rel =" stylesheet " >
</ push >

< push name =" scripts " once >
  < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " > </ script >
</ push >

默认情况下，将内容按给定顺序推入堆栈中。如果您想在堆栈的开头上进行预定内容，则可以使用prepend属性：

 < push name =" scripts " >
  <!-- This will be second -->
  < script src =" /example.js " > </ script >
</ push >

<!-- Later... -->
< push name =" scripts " prepend >
  <!-- This will be first -->
  < script src =" /example-2.js " > </ script >
</ push >

道具

props可以将其传递给HTML属性中的组件。要在组件中使用它们，必须在组件的<script props>标签中定义它们。

例如：

 <!-- src/alert.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  {{ title }}
</ div >

使用：

 < x-alert title =" Hello world! " />

输出将是：

 < div >
  Hello world!
</ div >

如果没有将title属性传递给组件，则将使用默认值。

 < x-my-alert />

输出将是：

 < div >
  Default title
</ div >

内部<script props>您可以通过名为props的对象访问传递的道具。

这是您可以处理的示例：

 <!-- src/modal.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title' , 
    size : props . size ? `modal- ${ props . size } ` : '' , 
    items : Array . isArray ( props . items ) ? props . items . concat ( [ 'first' , 'second' ] ) : [ 'first' , 'second' ]
  }
</ script >
< div class =" modal {{ size }} " >
  < div class =" modal-header " >
    {{ title }}
  </ div >
  < div class =" modal-body " >
    < each loop =" item in items " > < span > {{ item }} </ span > </ each >
  </ div >
</ div >

使用：

 < x-modal 
  size =" xl " 
  title =" My modal title " 
  items =' ["third", "fourth"] ' 
  class =" modal-custom " 
/>

输出将是：

 < div class =" modal modal-custom modal-xl " >
  < div class =" modal-header " >
    My modal title
  </ div >
  < div class =" modal-body " >
    < span > first </ span >
    < span > second </ span >
    < span > third </ span >
    < span > fourth </ span >
  </ div >
</ div >

请注意，我们传递给组件的class属性是如何将其内部第一个节点的class属性值合并的。

您可以通过通过回调函数来更改属性与通过选项定义的全局道具合并的方式。

默认情况下，所有道具都范围为组件，并且嵌套组件无法使用。但是，您可以根据需要进行相应的更改。

创建一个组件：

 <!-- src/child.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  Prop in child: {{ title }}
</ div >

创建一个使用<x-parent> <x-child>组件：

 <!-- src/parent.html -->
< script props >
  module . exports = {
    title : props . title || 'Default title'
  }
</ script >
< div >
  Prop in parent: {{ title }}
  < x-child />
</ div >

使用它：

 < x-parent title =" My title " />

输出将是：

 < div >
  Prop in parent: My title
  < div >
    Prop in child: Default title
  </ div >
</ div >

如您所见， <x-child>组件中的title呈现默认值，而不是通过<x-parent>集合。

要更改此操作，我们必须对此表示aware:属性名称才能将道具传递给嵌套组件。

 < x-parent aware:title =" My title " />

现在的输出将是：

 < div >
  Prop in parent: My title
  < div >
    Prop in child: My title
  </ div >
</ div >

属性

您可以将任何属性传递到组件中，它们将被添加到组件的第一个节点，或带有带有属性attributes的节点。

如果您熟悉vue.js，则与所谓的秋季属性相同。或者，使用Laravel刀片，是组件属性。

默认情况下， class和style与现有class和style属性合并。默认情况下，所有其他属性被覆盖。

如果将定义为prop定义的属性传递，则不会将其添加到组件的节点。

这是一个例子：

 <!-- src/button.html -->
< script props >
  module . exports = {
    label : props . label || 'A button'
  }
</ script >
< button type =" button " class =" btn " >
  {{ label }}
</ button >

使用组件：

 <!-- src/index.html -->
< x-button type =" submit " class =" btn-primary " label =" My button " />

结果：

 <!-- dist/index.html -->
< button type =" submit " class =" btn btn-primary " > My button </ button >

如果您需要覆盖class和style属性值（而不是合并它们），则只需预先override:到属性名称：

 <!-- src/index.html -->
< x-button type =" submit " override:class =" btn-custom " label =" My button " />

结果：

 <!-- dist/index.html -->
< button type =" submit " class =" btn-custom " > My button </ button >

如果您希望将属性传递到某个节点，请使用attributes属性：

 <!-- src/my-component.html -->
< div class =" first-node " >
  < div class =" second-node " attributes >
    Hello world!
  </ div >
</ div >

使用组件：

 <!-- src/index.html -->
< x-my-component class =" my-class " />

结果：

 <!-- dist/index.html -->
< div class =" first-node " >
  < div class =" second-node my-class " >
    Hello world!
  </ div >
</ div >

您可以添加自定义规则以定义属性的解析方式 - 我们使用postml-attrs-parser来处理它们。

高级属性配置

如果有效属性的默认配置不适合您，则可以将它们配置为如下所述。

 // index.js
const { readFileSync , writeFileSync } = require ( 'fs' )

const posthtml = require ( 'posthtml' )
const components = require ( 'posthtml-component' )

const options = {
  root : './src' ,  
  // Add attributes to specific tag or override defaults
  elementAttributes : {
    DIV : ( defaultAttributes ) => {
      /* Add new one */
      defaultAttributes . push ( 'custom-attribute-name' ) ;

      return defaultAttributes ;
    } ,
    DIV : ( defaultAttributes ) => {
      /* Override all */
      defaultAttributes = [ 'custom-attribute-name' , 'another-one' ] ;

      return defaultAttributes ;
    } ,
  } ,
  
  // Add attributes to all tags, use '*' as wildcard for attribute name that starts with
  safelistAttributes : [
    'custom-attribute-name' ,
    'attribute-name-start-with-*'
  ] ,

  // Remove attributes from all tags that support it
  blocklistAttributes : [
    'role'
  ]
}

posthtml ( components ( options ) )
  . process ( readFileSync ( 'src/index.html' , 'utf8' ) )
  . then ( result => writeFileSync ( 'dist/index.html' , result . html , 'utf8' ) )

例子

您可以使用<slot>和<fill>使用，也可以为组件的每个块创建组件，也可以支持它们。

您可以找到此Inside docs-src/components/modal的示例。以下是两种方法的简短解释。

使用插槽

我们假设我们要为Bootstrap模式创建一个组件。

所需的代码是：

 <!-- Modal HTML -->
< div class =" modal fade " id =" exampleModal " tabindex =" -1 " aria-labelledby =" exampleModalLabel " aria-hidden =" true " >
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < div class =" modal-header " >
        < h1 class =" modal-title fs-5 " id =" exampleModalLabel " > Modal title </ h1 >
        < button type =" button " class =" btn-close " data-bs-dismiss =" modal " aria-label =" Close " > </ button >
      </ div >
      < div class =" modal-body " >
        ...
      </ div >
      < div class =" modal-footer " >
        < button type =" button " class =" btn btn-secondary " data-bs-dismiss =" modal " > Close </ button >
        < button type =" button " class =" btn btn-primary " > Save changes </ button >
      </ div >
    </ div >
  </ div >
</ div >

代码几乎有三个块：标题，车身和页脚。

因此，我们可以创建一个具有三个插槽的组件：

<!-- Modal component -->
<div class="modal fade" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
-        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+        <slot:header />
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
+        <slot:body />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <slot:footer />
-        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

然后，我们可以这样使用它：

 < x-modal
  id =" exampleModal "
  aria-labelledby =" exampleModalLabel "
>
  < slot:header >
    < h5 class =" modal-title " id =" exampleModalLabel " > My modal </ h5 >
  </ slot:header >

  < slot:body >
    Modal body content goes here...
  </ slot:body >

  < slot:footer close =" false " >
    < button type =" button " class =" btn btn-primary " > Confirm </ button >
  </ slot:footer >
</ x-modal >

小组件中的分裂组件

另一种方法是将组件分成较小的组件，将属性传递给每个组件。

因此，我们创建一个主组件，然后创建三个不同的较小组件：

 <!-- Main modal component -->
< div class =" modal fade " tabindex =" -1 " aria-hidden =" true " >
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < yield />
    </ div >
  </ div >
</ div >

 <!-- Header modal component -->
< div class =" modal-header " >
  < yield />
</ div >

 <!-- Body modal component -->
< div class =" modal-body " >
  < yield />
</ div >

 <!-- Footer modal component -->
< div class =" modal-footer " >
  < yield />
</ div >

然后，您可以这样使用：

 < x-modal
  id =" exampleModal "
  aria-labelledby =" exampleModalLabel "
>
  < x-modal .header >
    < h5 class =" modal-title " id =" exampleModalLabel " > My modal </ h5 >
  </ x-modal .header >

  < x-modal .body >
    Modal body content goes here...
  </ x-modal .body >

  < x-modal .footer >
    < button type =" button " class =" btn btn-primary " > Confirm </ button >
  </ x-modal .footer >
</ x-modal >

如所说，您可以将属性传递给每个属性，而无需定义道具。

结合插槽和小组件

您也可以将这两种方法结合在一起，然后将它们与插槽或小组件一起使用：

 <!-- Modal -->
< div
  class =" modal fade "
  tabindex =" -1 "
  aria-hidden =" true "
  aria-modal =" true "
  role =" dialog "
>
  < div class =" modal-dialog " >
    < div class =" modal-content " >
      < if condition =" $slots.header?.filled " >
          < x-modal .header >
            < slot:header />
          </ x-modal .header >
      </ if >
      < if condition =" $slots.body?.filled " >
          < x-modal .body >
              < slot:body />
          </ x-modal .body >
      </ if >
      < if condition =" $slots.footer?.filled " >
          < x-modal .footer close =" {{ $slots.footer?.props.close }} " >
              < slot:footer />
          </ x-modal .footer >
      </ if >
      < yield />
    </ div >
  </ div > <!-- /.modal-dialog -->
</ div > <!-- /.modal -->