ndialog 对话框（齐思博）

UI改版后的对话窗。

基础用法

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>
export default {
  data() {
    return {
      asubmitDialog: false
    }
  },
  methods: {
    showDialog() {
      this.asubmitDialog = 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>
export default {
  data() {
    return {
      asubmitDialog: false
    }
  },
  methods: {
    showDialog() {
      this.asubmitDialog = true
    }
  },
}
</script>

显示代码

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

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

Slot

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

Events

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