title: 模态框 Dialog

模态框 Dialog

保留当前页面，弹出一个对话框，告知用户并承载相关操作。

:::tip 组件特性

• 支持开放函数 :::

模态框类型

模态框可通过设置type属性为alert或者confirm来控制模态框的类型为 提示框 和 确认框 ，不设置则显示状态默认为alert。

示例代码

<!-- 提示框 -->
<l-dialog 
  show="{{true}}"
  type="alert"     
  title="标题"
  content="这个是提示框" />
<!--确认框 -->
<l-dialog 
  show="{{true}}"
  type="confirm"     
  title="标题"
  content="这个是确认框" />

:::img :::

无标题的模态弹框

模态框可以通过设置 show-title 属性为true、false来控制组件标题的显示和隐藏，不设置则显示状态默认为true。

示例代码

<!-- 无标题提示框 -->
<l-dialog 
  show="{{true}}"
  type="alert"  
  show-title="{{false}}"
  title="标题"
  content="这个是无标题提示框" />
<!-- 无标题确认框 -->
<l-dialog 
  show="{{true}}"
  type="confirm"  
  show-title="{{false}}"
  title="标题"
  content="这个是无标题确认框" />

:::img :::

修改按钮文字和颜色

模态框的按钮支持 文本内容 和 字体颜色 的修改， 设置 confirm-text 和 cancel-text 可以更改模态框两个按钮的文本， confirm-color 和 cancel-color 则可以更改他们的字体颜色。

::: tip 注意事项

• 提示框只需设置 confirm-text和 confirm-color。 :::

示例代码

<l-dialog 
  show="{{true}}"
  type="confirm"  
  title="提问"
  content="PHP是最好的语言吗？"
  confirm-text="yes"
  confirm-color="#f60"
  cancel-text="no~"
  cancel-color="#999" />

:::img :::

设置子节点

我们在使用的组件的时候，可以根据使用场景,自由的在遮罩层组件内插入 image、 view、 text 等子节点，当然，你也可以在其中插入 自定义组件 。

::: tip 注意事项

• 不建议在组件中传入多个子节点。
• 子节点默认是垂直居中显示。 :::

示例代码

<l-dialog 
  show="{{true}}"
  type="confirm"  
  show-title="{{false}}"
  title="标题"
>
  <image class='dio-img' src='/path/to/example.gif'></image>
</l-dialog>

:::img :::

锁定

模态框设置 locked 属性为 false 时，点击背景可隐藏模态框组件，默认为 true ， 即点击背景无法关闭该组件。

示例代码

<l-dialog 
  show="{{true}}"
  type="alert"  
  show-title="{{false}}"
  locked="{{locked}}"
  title="标题"
  content="这个是提示框" 
>
  </l-dialog>

模态框参数

模态框外部样式类

模态框事件

开放函数