Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
2 changed files
with
33 additions
and
2 deletions
... | @@ -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 | ... | ... |
src/components/tanchuang/redeme.md
0 → 100644
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 |
-
Please register or sign in to post a comment