style:弹窗
Showing
5 changed files
with
34 additions
and
42 deletions
| ... | @@ -13,5 +13,4 @@ Popup.install = function (title, editItem, data) { | ... | @@ -13,5 +13,4 @@ Popup.install = function (title, editItem, data) { |
| 13 | instance.isShow = true | 13 | instance.isShow = true |
| 14 | }) | 14 | }) |
| 15 | } | 15 | } |
| 16 | |||
| 17 | export default Popup | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 16 | export default Popup | ... | ... |
| ... | @@ -55,21 +55,21 @@ export default { | ... | @@ -55,21 +55,21 @@ export default { |
| 55 | }, | 55 | }, |
| 56 | mounted () { | 56 | mounted () { |
| 57 | // 计算滚动条高度 | 57 | // 计算滚动条高度 |
| 58 | // setTimeout(() => { | 58 | setTimeout(() => { |
| 59 | // if (this.btnShow) { | 59 | if (this.btnShow) { |
| 60 | // if (this.height == 'auto') { | 60 | if (this.height == 'auto') { |
| 61 | // this.contentHeight = (this.$refs.contentRef.offsetHeight - 200) + 'px' | 61 | this.contentHeight = (this.$refs.contentRef.offsetHeight - 200) + 'px' |
| 62 | // } else { | 62 | } else { |
| 63 | // this.contentHeight = this.height | 63 | this.contentHeight = this.height |
| 64 | // } | 64 | } |
| 65 | // } else { | 65 | } else { |
| 66 | // if (this.height == 'auto') { | 66 | if (this.height == 'auto') { |
| 67 | // this.contentHeight = this.$refs.contentRef.offsetHeight | 67 | this.contentHeight = this.$refs.contentRef.offsetHeight |
| 68 | // } else { | 68 | } else { |
| 69 | // this.contentHeight = this.height | 69 | this.contentHeight = this.height |
| 70 | // } | 70 | } |
| 71 | // } | 71 | } |
| 72 | // }, 500) | 72 | }, 300) |
| 73 | }, | 73 | }, |
| 74 | methods: { | 74 | methods: { |
| 75 | onCancel () { | 75 | onCancel () { |
| ... | @@ -78,12 +78,12 @@ export default { | ... | @@ -78,12 +78,12 @@ export default { |
| 78 | }, | 78 | }, |
| 79 | onConfirm () { | 79 | onConfirm () { |
| 80 | this.loading = true | 80 | this.loading = true |
| 81 | let isOk = this.$refs.childRef.childFn() //子组件方法 必须命名一致 | 81 | let res = new Promise((resolve, reject) => { |
| 82 | if (isOk || isOk == undefined) { //如果子组件没有 return false 就代表子组件方法一切正常 | ||
| 83 | this.isShow = false | ||
| 84 | this.confirm() | 82 | this.confirm() |
| 85 | } else { //否则 | 83 | resolve(true) |
| 86 | console.log('弹窗不关闭') | 84 | }) |
| 85 | if (res) { | ||
| 86 | this.isShow = false | ||
| 87 | } | 87 | } |
| 88 | }, | 88 | }, |
| 89 | loadingFn (e) { //加载状态 | 89 | loadingFn (e) { //加载状态 |
| ... | @@ -93,7 +93,7 @@ export default { | ... | @@ -93,7 +93,7 @@ export default { |
| 93 | return (r) => | 93 | return (r) => |
| 94 | require.ensure([], () => | 94 | require.ensure([], () => |
| 95 | r(require(`@/views/${view}.vue`)) | 95 | r(require(`@/views/${view}.vue`)) |
| 96 | ); | 96 | ) |
| 97 | } | 97 | } |
| 98 | }, | 98 | }, |
| 99 | destroyed () { | 99 | destroyed () { |
| ... | @@ -146,6 +146,8 @@ export default { | ... | @@ -146,6 +146,8 @@ export default { |
| 146 | .ls-mask-content { | 146 | .ls-mask-content { |
| 147 | padding: 20px; | 147 | padding: 20px; |
| 148 | width: 100%; | 148 | width: 100%; |
| 149 | min-height: 30%; | ||
| 150 | max-height: 95%; | ||
| 149 | overflow: scroll; | 151 | overflow: scroll; |
| 150 | } | 152 | } |
| 151 | 153 | ... | ... |
| 1 | 弹窗封装 | 1 | 弹窗封装 |
| 2 | 2.用法以及参数: | 2 | 2.用法以及参数: |
| 3 | this.$popup('提示','ywbl/dbx/aa',{ | 3 | this.$popup('提示','ywbl/dbx/aa',{ |
| 4 | formData:this.formData, //父组件传给子组件的参数 | 4 | width: '75%', // 初始化75% 不需要改的话 可以直接不要 |
| 5 | cancel: function () {}, //取消事件的回调 | 5 | formData: this.formData, //父组件传给子组件的参数 |
| 6 | confirm: function () {}, //确认事件的回调 | 6 | cancel: function () {}, //取消事件的回调 没有按钮可以不需要 |
| 7 | }) | 7 | confirm: function () {} //确认事件的回调 没有按钮可以不需要 |
| 8 | 3.子组件的方法名字必须统一为 childFn() | 8 | }) |
| 9 | 4.子组件切记props接收 父组件传参formData | ||
| 10 | 以及在使用结束后传loading状态给父组件 | ||
| 11 | 9 | ||
| 12 | 5.后续有修改请添加在此处文档说明作用 | 10 | 5.后续有修改请添加在此处文档说明作用 |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -111,15 +111,8 @@ export default { | ... | @@ -111,15 +111,8 @@ export default { |
| 111 | moreQueryClick () { }, | 111 | moreQueryClick () { }, |
| 112 | openDialog (scroll) { | 112 | openDialog (scroll) { |
| 113 | this.$popup('登记簿详情', 'registerBook/djbFrame', { | 113 | this.$popup('登记簿详情', 'registerBook/djbFrame', { |
| 114 | formData: scroll, | 114 | width: '90%', |
| 115 | width: "1220px", | 115 | formData: scroll |
| 116 | height: "790px", | ||
| 117 | cancel: () => { | ||
| 118 | console.log("取消回调"); | ||
| 119 | }, | ||
| 120 | confirm: () => { | ||
| 121 | console.log("确认回调"); | ||
| 122 | }, | ||
| 123 | }); | 116 | }); |
| 124 | }, | 117 | }, |
| 125 | handleLpbClick (item) { | 118 | handleLpbClick (item) { | ... | ... |
-
Please register or sign in to post a comment