Dialog 对话框

对话框

基本用法

<template>
    <dn-page>       
      <dn-form ref="formRef" v-bind="formOptions"></dn-form>       
    </dn-page>   
  </template>
  
  <script lang="jsx">
  import {ref,defineComponent} from "vue";
  import { useForm } from "@sdevnet/devnet-form";
  import {dn} from "@sdevnet/devnet-form";

  //表单组件
  import dialogform from "./dialogform.vue";
  
  const formRef = ref();
  const formOptions = ref();
  function createFormOptions() {
    const { buildFormOptions } = useForm();
    return buildFormOptions({
      columns: {         
        fn1:{
            title:' ',
            type:'button',
            form:{
                col:{span:24},   
                component:{
                  type:'primary',
                  text:'弹出对话框',
                  onClick:()=>{                 
                    dn.openDialog({
                                    title:'表单组件',   
                                    width:'1000px',
                                    height:'600px',                 
                                    formComponent:dialogform,
                                    formProps:{data:{fid:0,fn1:'这是传过来的参数值'}},
                                    onBeforeClose:(e)=>{
                                      console.log(e);
                                     // return false; 取消关闭
                                    },     
                                    onClosed:(e)=>{
                                      console.log(e);
                                      dn.notification.success('弹框关闭了');
                                    }
                                  });         
                  }
                } 
            }
        },
        fn2:{
            title:' ',
            type:'button',
            form:{
                col:{span:24},   
                component:{
                  type:'warning',
                  text:'Drawer弹页面',
                  onClick:()=>{
                    dn.openDialog({
                                    title:'表单组件',    
                                    dialogMode:'drawer',
                                    width:'60%',                               
                                    formComponent:dialogform,
                                    formProps:{data:{fid:0,fn1:'这是传过来的参数值'}},
                                    onBeforeClose:(e)=>{
                                      console.log(e);
                                    },     
                                    onClosed:(e)=>{
                                      console.log(e);
                                      dn.notification.success('弹框关闭了');
                                    }
                                  });         
                  }
                } 
            }
        },
      },
      form: {
        labelWidth: "20px",
        'labelPosition':'left',
      }
    });
  }
  
  function initFormOptions() { 
    formOptions.value = createFormOptions();
    return {
      formOptions,   
      formRef     
    };
  }
  
  export default defineComponent({
    setup() {
      return {
        ...initFormOptions()
      };
    }
  });
  </script>

Dialog API

PropsName	Description	Type	Default
title	对话框标题	string
dialogMode	弹框模式 空 drawer	string	空
width	弹框宽度，小于0 则用页面宽度减去width drawer模式则为百分比	number string
height	弹框高度，小于0 则用页面高度减去height	number string
fullscreen	是否全屏	boolean
formComponent	对话框里的自定义表单组件	object
formProps	传给表单的参数,表单里自定义props接收	any
onBeforeClose	关闭弹框前，返回false则不关闭	func
onClosed	关闭弹框后	func
key	参考原生组件属性	json

Dialog 示例

  import { defineComponent} from "vue";
  import { dn } from "@sdevnet/devnet-form";
  //自定义的表单组件
  import dialogform from "./dialogform.vue";

  dn.openDialog({
                    title:'表单组件',        
                    width:'1000px',
                    height:'600px',                              
                    formComponent:dialogform,                   
                    formProps:{
                        data:{
                            fid:0,
                            fn1:'传值过去'
                        }
                    },
                    onBeforeClose:(e)=>{
                        console.log(e);
                        // return false; 取消关闭
                    },     
                    onClosed:(e)=>{
                        console.log(e);
                        dn.notification.success('弹框关闭了');
                    }
                }); 

  export default defineComponent({
    setup() {    
      return {
        
      };
    }
  });