f7048649 by 任超
2 parents b701de27 27c7c7e1
......@@ -5,7 +5,7 @@
<div :style="{'text-align':titleStyle}"><b >{{title}}</b></div>
<i class="el-icon-close" @click="onCancel" ></i>
<div class="ls-mask-content">
<component :is="editItem" ref='childRef' @loading='loadingFn' />
<component :is="editItem" ref='childRef' @loading='loadingFn' :formData='formData' />
</div>
<div class="ls-mask-footer">
<el-button type="primary" @click="onConfirm">{{confirmText}}</el-button>
......@@ -25,10 +25,13 @@
confirmText: '确认',
isSync: false,
isShow: false,
cancel: function () {},
confirm: function () {},
editItem:"",
titleStyle:'',
width:"75%",
height:"500px",
formData:"",//父组件传递的参数 负责传给子组件
}
},
props:{
......@@ -42,10 +45,17 @@
methods: {
onCancel () {
this.isShow = false
this.cancel()
},
onConfirm () {
this.loading = true
this.$refs.childRef.childFn()
let isOk = this.$refs.childRef.childFn() //子组件方法 必须命名一致
if(isOk || isOk==undefined){ //如果子组件没有 return false 就代表子组件方法一切正常
this.isShow = false
this.confirm()
}else{ //否则
console.log('弹窗不关闭')
}
},
loadingFn(e){ //加载状态
this.loading = e
......
弹窗封装
1.在main.js中引入 import Popup from './components/tanchuang/index'
Vue.prototype.$popup = Popup.install
2.用法以及参数:
this.$popup({
title: '提示', // 弹窗标题
titleStyle:"", //标题存在的位置 center left
width:"", //弹窗的宽度
height:"", //弹窗的高度
editItem: 'ywbl/dbx/aa', // 子组件的路径 相当于你平时img取的路径
formData:this.formData, //父组件传给子组件的参数
confirmText:"" // 确认按钮的文字
cancelText:"" //取消按钮的文字
cancel: function () {}, //取消事件的回调
confirm: function () {}, //确认事件的回调
})
3.子组件的方法名字必须统一为 childFn()
4.子组件切记props接收 父组件传参formData
以及在使用结束后传loading状态给父组件
5.后续有修改请添加在此处文档说明作用
\ No newline at end of file