style:弹框组件的修改
Showing
4 changed files
with
23 additions
and
22 deletions
| 1 | <template> | 1 | <template> |
| 2 | <transition name="msgbox-fade"> | 2 | <transition name="msgbox-fade"> |
| 3 | <div class="ls-mask" v-if="myShow"> | 3 | <div class="ls-mask" v-if="myShow"> |
| 4 | <div class="ls-mask-window" :style="{ 'width': width }"> | 4 | <div class="ls-mask-window" :class="isMain ? 'mainCenter' : 'contentCenter'" :style="{ 'width': width }"> |
| 5 | <div class="ls-head"> | 5 | <div class="ls-head"> |
| 6 | <div class="ls-title" :style="{ 'text-align': titleStyle }"> | 6 | <div class="ls-title" :style="{ 'text-align': titleStyle }"> |
| 7 | <svg-icon v-if="iconClass != ''" :icon-class='iconClass' /> | 7 | <svg-icon v-if="iconClass != ''" :icon-class='iconClass' /> |
| ... | @@ -28,6 +28,7 @@ export default { | ... | @@ -28,6 +28,7 @@ export default { |
| 28 | return { | 28 | return { |
| 29 | title: '标题', | 29 | title: '标题', |
| 30 | editItem: "", | 30 | editItem: "", |
| 31 | isMain: false, | ||
| 31 | formData: undefined,//父组件传递的参数 负责传给子组件 | 32 | formData: undefined,//父组件传递的参数 负责传给子组件 |
| 32 | btnShow: false, | 33 | btnShow: false, |
| 33 | cancel: function () { }, | 34 | cancel: function () { }, |
| ... | @@ -100,6 +101,9 @@ export default { | ... | @@ -100,6 +101,9 @@ export default { |
| 100 | } | 101 | } |
| 101 | </script> | 102 | </script> |
| 102 | <style scoped lang="scss" > | 103 | <style scoped lang="scss" > |
| 104 | @import "~@/styles/mixin.scss"; | ||
| 105 | @import "~@/styles/dialogBox.scss"; | ||
| 106 | |||
| 103 | .ls-mask { | 107 | .ls-mask { |
| 104 | width: 100%; | 108 | width: 100%; |
| 105 | height: 100%; | 109 | height: 100%; | ... | ... |
| ... | @@ -75,15 +75,15 @@ | ... | @@ -75,15 +75,15 @@ |
| 75 | } | 75 | } |
| 76 | 76 | ||
| 77 | .contentCenter { | 77 | .contentCenter { |
| 78 | position: absolute; | 78 | position: absolute !important; |
| 79 | top: 50%; | 79 | top: 50% !important; |
| 80 | left: 50%; | 80 | left: 50% !important; |
| 81 | transform: translate(calc(-50% + 85px), -50%); | 81 | transform: translate(calc(-50% + 85px), -50%) !important; |
| 82 | } | 82 | } |
| 83 | 83 | ||
| 84 | .mainCenter { | 84 | .mainCenter { |
| 85 | position: absolute; | 85 | position: absolute !important; |
| 86 | top: 50%; | 86 | top: 50% !important; |
| 87 | left: 50%; | 87 | left: 50% !important; |
| 88 | transform: translate(-50%, -50%); | 88 | transform: translate(-50%, -50%) !important; |
| 89 | } | 89 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | /* | ||
| 2 | * @Description: 弹框组件的封装 | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-04-11 09:31:14 | ||
| 5 | */ | ||
| 1 | import Popup from '@/components/Popup/index' | 6 | import Popup from '@/components/Popup/index' |
| 2 | import Popup1 from '@/components/Popup1/index' | 7 | import Popup1 from '@/components/Popup1/index' |
| 3 | export function popupDialog (title, url, params, width = '75%', height, btnShow = false, callback) { | 8 | export function popupDialog (title, url, params, width = '75%', isMain, height, btnShow = false, callback, cancel) { |
| 4 | // Popup.install | 9 | // Popup.install |
| 5 | Popup1(title, url, { | 10 | Popup1(title, url, { |
| 6 | height: height, | 11 | height: height, |
| 7 | width: width, | 12 | width: width, |
| 8 | formData: params, | 13 | formData: params, |
| 9 | btnShow: btnShow, | 14 | btnShow: btnShow, |
| 15 | isMain: isMain, | ||
| 10 | cancel: () => { | 16 | cancel: () => { |
| 11 | console.log("取消回调"); | 17 | cancel() |
| 12 | }, | 18 | }, |
| 13 | confirm: () => { | 19 | confirm: () => { |
| 14 | callback | 20 | callback() |
| 15 | } | 21 | } |
| 16 | }) | 22 | }) |
| 17 | } | 23 | } | ... | ... |
| ... | @@ -94,18 +94,9 @@ export default { | ... | @@ -94,18 +94,9 @@ export default { |
| 94 | }, | 94 | }, |
| 95 | methods: { | 95 | methods: { |
| 96 | openDialog (bsmBatch) { | 96 | openDialog (bsmBatch) { |
| 97 | // if (bsmBatch) { | ||
| 98 | // this.$nextTick(() => { | ||
| 99 | // this.$refs.addDialog.getDetailInfo(bsmBatch); | ||
| 100 | // }) | ||
| 101 | // } else { | ||
| 102 | // this.$nextTick(() => { | ||
| 103 | // this.$refs.addDialog.ywhSerial(); | ||
| 104 | // }) | ||
| 105 | // } | ||
| 106 | this.$popupDialog("证书入库", "zsgl/zsrk/components/addDialog", { | 97 | this.$popupDialog("证书入库", "zsgl/zsrk/components/addDialog", { |
| 107 | bsmBatch: bsmBatch | 98 | bsmBatch: bsmBatch |
| 108 | }) | 99 | }, "50%") |
| 109 | }, | 100 | }, |
| 110 | queryClick () { | 101 | queryClick () { |
| 111 | getZsglrkList({ ...this.ruleForm, ...this.pageData }).then(res => { | 102 | getZsglrkList({ ...this.ruleForm, ...this.pageData }).then(res => { | ... | ... |
-
Please register or sign in to post a comment