JS增强弹窗显示自定义组件
概述
用于在列表页面中使用 JS 增强(通常是定义一个自定义按钮)弹窗打开一个 online 模块或者自定义组件
配置
- 首先配置一个自定义按钮,然后在 JS 增强中定义对应的方法
- 在 JS 增强中, 调用
that.openCustomModal
方法, 传递对应参数
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:{
},
})
}
效果图
感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题,请在 Slack 上提问。如果您想报告问题或提出改进建议,请在 GitHub 存储库中打开问题。
页面内容