JS增强弹窗显示自定义组件

概述

用于在列表页面中使用 JS 增强(通常是定义一个自定义按钮)弹窗打开一个 online 模块或者自定义组件

配置

  • 首先配置一个自定义按钮,然后在 JS 增强中定义对应的方法
  • 在 JS 增强中, 调用 that.openCustomModal 方法, 传递对应参数 配置1 配置2

openCustomModal 方法参数介绍

const {
  title = "", // 弹窗标题
  code = "", // online表单编码
  onlineCode, // online表单编码
  param = {}, // 传递给弹窗内部组件的属性
  width = 700, // 弹窗宽度
  fullscreen = false, // 默认全屏
  onOk, // 弹窗事件
  onCancel, // 弹窗事件
  modalProps = {}, // 弹窗属性  ant-design-vue 的 Modal 组件的属性
  componentProps = {}, // 传递给path组件的属性, 组件可以用props接收或者$attrs接收
  showFooter = false, // 是否显示弹窗底部的确定取消按钮
  autoHeight = true, // 是否设置自动计算高度
  onLoaded = () => {}, // 组件加载完毕后调用
  componentEvents = {}, // 组件的事件, 会自动绑定到组件上, 组件直接使用this.$emit触发,内置了ok和cancel事件
} = option;

其中很多参数都是为了兼容之前版本保留的,

  • 推荐对于弹窗的属性就传递modalProps,
  • 对于组件的属性就传递componentProps,
  • 对于组件的事件监听就传递 componentEvents,
  • onOk, 和 onCancel 针对弹窗的事件, 默认是关闭弹窗
  • 组件事件处理 componentEvents 中, 内置有 ok 和 cancel 事件, 功能是关闭弹窗, 可以覆盖

代码示例

openOnlineList(that){
  // 打开一个online列表
  that.openCustomModal({
  	title:"online列表",
    code:"da94102aebae4f6db76d3405a32b288b",
    path:"modules/online/cgform/auto/OnlineList.vue",
    componentProps:{
    	hideSearch:true,
      hideActionColumn:true,
    },
  })
},
openOnlineForm(that){

  const onLoaded = (component)=>{
  		// that.$refs.hrefModal.edit({id:"1607932603350949890"})
    	// 或编辑
    	component.edit({id:"1607932603350949890"})
      // 或online表单新增传递默认值
      // component.add({defaultFormData:{fd_name:"默认值123"}}})
  }
	  // 打开一个online表单
  that.openCustomModal({
  	title:"online表单",
    code:"da94102aebae4f6db76d3405a32b288b",
    path:"modules/online/cgform/auto/OnlineForm.vue",
    componentProps:{
      hideButtons:false, // 隐藏表单的按钮
    },
    // 组件加载完后会调用, 参数为 弹窗内部组件的实例
    onLoaded,
    // 这是组件的自定义事件监听函数, 其中 cancel/和ok 事件默认为关闭弹窗,
    componentEvents:{
      // 可不用 已内置
    	cancel: ()=>{
      	that.$message.success("自定义弹窗关闭事件")
        that.hrefComponent.model.visible = false
      },
      // 可不用 已内置
    	ok: ()=>{
      	that.$message.success("自定义弹窗提交事件")
        that.hrefComponent.model.visible = false
        that.loadData();
      },
    }
  })
},
openOnlinePage(that){
	  // 打开一个完整的online模块
  that.openCustomModal({
  	title:"online列表",
    code:"da94102aebae4f6db76d3405a32b288b",
    path:"modules/online/cgform/auto/OnlinePage.vue",
    // 传递给列表的属性
    listProps:{
    },
    // 传递给表单的属性
    formProps:{
    },
  })
}

效果图

打开列表 打开表单 打开online页面


感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题,请在 Slack 上提问。如果您想报告问题或提出改进建议,请在 GitHub 存储库中打开问题。