HaierUI Plus

Appearance

Return to top
On this page

ndialog 对话框（齐思博）

对话窗。

基础用法

ndialog 弹出一个对话框，组件的内容可以是任意的。

需要设置show属性，它接收Boolean，当为true时显示 ndialog。ndialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。 
<template>
  <div>
    <el-button @click="showDialog">点击打开ndialog</el-button>
    <h-ndialog
      :title="'提示'"
      :show="asubmitDialog"
      :width="'400px'"
      @hclose="asubmitDialog = false"
      @hconfirm="asubmitDialog = false">
      <div>这是一段信息</div>
    </h-ndialog>
  </div>
</template>
<script setup>
import {
  ref
} from 'vue';
const asubmitDialog = ref(false)
const showDialog = () => {
  asubmitDialog.value = true
}
</script>

自定义

ndialog 支持自定义头部。

<template>
  <div>
    <el-button @click="showDialog">点击打开ndialog</el-button>
    <h-ndialog
      :title="'提示'"
      :show="asubmitDialog"
      :width="'400px'"
      @hclose="asubmitDialog = false"
      @hconfirm="asubmitDialog = false">
      <template slot="title">自定义头部<i class="el-icon-edit"></i></template>
      <div>这是一段信息</div>
    </h-ndialog>
  </div>
</template>
<script setup>
import {
  ref
} from 'vue';
const asubmitDialog = ref(false)
const showDialog = () => {
  asubmitDialog.value = true
}
</script>

Attributes（支持element-Dialog对话框所有配置）

参数说明类型可选值默认值
title标题string——
show是否显示 Dialogboolean—false
cancelText取消按钮文字，如果是916则不展示该按钮string—取消
confirmText确定按钮文字，如果是916则不展示该按钮string—确定
width弹窗宽度string—750px
isShowBtn是否展示底部按钮区域boolean—true
isDisabled确定按钮是否禁用状态boolean—false
isCloseOnClickModal是否可以通过点击 modal 关闭 Dialogboolean—false

Slot

name说明
—内容区
title标题区内容

Events

方法名说明参数
hconfirm底部确定按钮回调-
hclose关闭的回调如果为cancel标识是点击的下方取消按钮