dialogPackage

基于ElementUI el-dialog二次封装的弹窗组件

前端使用方式

安装依赖

npm install dialogpackage --registry=http://192.28.4.1:6880/nexus/content/groups/npm-all/

Vue脚手架全局引用

//main.js中
import dialogPackage from 'dialog0ackage'
Vue.use(dialogPackage)

使用参数说明

1.visible：是否显示 Dialog 2.width：Dialog 的宽度，默认为50% 3.title：Dialog 的标题 4.top：Dialog CSS 中的 margin-top 值，默认15vh 5.fullscreen：是否为全屏 Dialog，默认false 6.modal：是否需要遮罩层，默认true 7.showBtnFlag：是否显示操作按钮，默认true 8.appendToBody：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true，默认false 9.modalAppendToBody：遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至Dialog的父元素上，默认true 10.lockScroll：是否在 Dialog 出现时将 body 滚动锁定，默认true 11.closeOnClickModal：是否可以通过点击 modal 关闭 Dialog，默认false 12.closeOnPressEscape：是否可以通过按下 ESC 关闭 Dialog，默认false 13.showClose：是否显示关闭按钮，默认true 14.submit：确认按钮的回调函数 15.closed：取消按钮及关闭弹窗的回调函数 16.opened：Dialog 打开动画结束时的回调方法 17.submitBtn：确认按钮显示的中文，默认显示“确认” 18.cancelBtn：取消按钮显示的中文，默认显示“取消”

使用举例

配置分类编码值发送到后台获取数据

<template>
  <div>
   <dialogPackage
      :visible="dialogVisible"
      title="编辑"
      :submitFunc="submit"
      :cancelFunc="cancel"
      :openFunc="open"
      submitBtn="OK"
    >
      <div slot="dialogBody">弹窗内容</div>
    </dialogPackage>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      dialogVisible:false
    }
  },
  methods:{
   submit() {
      alert("提交");
    },
    cancel() {
      this.dialogVisible = false;
      alert("取消");
    },
    open() {
      this.dialogVisible = true;
      alert("打开");
    }
  }
}
</script>