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