style:dialog样式
Showing
6 changed files
with
35 additions
and
22 deletions
| ... | @@ -30,6 +30,7 @@ | ... | @@ -30,6 +30,7 @@ |
| 30 | <script> | 30 | <script> |
| 31 | export default { | 31 | export default { |
| 32 | props: { | 32 | props: { |
| 33 | value: { type: Boolean, default: false, }, | ||
| 33 | activity: { | 34 | activity: { |
| 34 | type: Boolean, | 35 | type: Boolean, |
| 35 | default: false, | 36 | default: false, |
| ... | @@ -95,6 +96,11 @@ export default { | ... | @@ -95,6 +96,11 @@ export default { |
| 95 | scrollerHeight: '', | 96 | scrollerHeight: '', |
| 96 | } | 97 | } |
| 97 | }, | 98 | }, |
| 99 | watch: { | ||
| 100 | value (val) { | ||
| 101 | this.dialogVisible = val | ||
| 102 | } | ||
| 103 | }, | ||
| 98 | methods: { | 104 | methods: { |
| 99 | isShow () { | 105 | isShow () { |
| 100 | this.dialogVisible = true | 106 | this.dialogVisible = true | ... | ... |
| 1 | .dialog_title { | 1 | .dialog_title { |
| 2 | @flex(); | 2 | @include flex; |
| 3 | justify-content: space-between; | 3 | justify-content: space-between; |
| 4 | width: 100%; | 4 | width: 100%; |
| 5 | } | 5 | } |
| 6 | |||
| 6 | .el-dialog__header { | 7 | .el-dialog__header { |
| 7 | margin-bottom: 10px; | 8 | margin-bottom: 10px; |
| 8 | color: #4A4A4A; | 9 | color: #4A4A4A; |
| 9 | border-bottom: 1px solid #E4EBF4; | 10 | border-bottom: 1px solid #E4EBF4; |
| 10 | } | 11 | } |
| 12 | |||
| 11 | .el-dialog__body { | 13 | .el-dialog__body { |
| 12 | padding-top: 10px; | 14 | padding-top: 10px; |
| 13 | padding-bottom: 0; | 15 | padding-bottom: 0; |
| 14 | } | 16 | } |
| 17 | |||
| 15 | .el-dialog__headerbtn .el-dialog__close { | 18 | .el-dialog__headerbtn .el-dialog__close { |
| 16 | color: #6B7A99 !important; | 19 | color: #6B7A99 !important; |
| 17 | position: relative; | 20 | position: relative; |
| 18 | top: -2px; | 21 | top: -2px; |
| 19 | } | 22 | } |
| 20 | .dialog_footer { | 23 | |
| 21 | @flex-center(); | 24 | .dialog_footer {} |
| 22 | } | 25 | |
| 23 | .el-form-item { | 26 | .el-form-item { |
| 24 | @flex(); | 27 | @include flex; |
| 25 | width: 100%; | 28 | width: 100%; |
| 26 | } | 29 | } |
| 30 | |||
| 27 | .el-dialog__wrapper { | 31 | .el-dialog__wrapper { |
| 28 | @flex-center(); | 32 | @include flex-center; |
| 33 | transform: translateX(80px); | ||
| 29 | } | 34 | } |
| 35 | |||
| 30 | .el-dialog { | 36 | .el-dialog { |
| 31 | margin: 0; | 37 | margin: 0; |
| 32 | } | 38 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -48,13 +48,6 @@ | ... | @@ -48,13 +48,6 @@ |
| 48 | } | 48 | } |
| 49 | 49 | ||
| 50 | // to fixed https://github.com/ElemeFE/element/issues/2461 | 50 | // to fixed https://github.com/ElemeFE/element/issues/2461 |
| 51 | .el-dialog { | ||
| 52 | transform: none; | ||
| 53 | left: 0; | ||
| 54 | position: relative; | ||
| 55 | margin: 0 auto; | ||
| 56 | } | ||
| 57 | |||
| 58 | // refine element ui upload | 51 | // refine element ui upload |
| 59 | .upload-container { | 52 | .upload-container { |
| 60 | .el-upload { | 53 | .el-upload { | ... | ... |
| ... | @@ -282,13 +282,6 @@ aside { | ... | @@ -282,13 +282,6 @@ aside { |
| 282 | font-size: 20PX; | 282 | font-size: 20PX; |
| 283 | } | 283 | } |
| 284 | 284 | ||
| 285 | // 遮罩层样式设置 | ||
| 286 | .dialog_Style { | ||
| 287 | .el-dialog { | ||
| 288 | width: 40% !important; | ||
| 289 | } | ||
| 290 | } | ||
| 291 | |||
| 292 | .description { | 285 | .description { |
| 293 | .el-form-item__content { | 286 | .el-form-item__content { |
| 294 | width: 75%; | 287 | width: 75%; | ... | ... |
| ... | @@ -51,6 +51,9 @@ | ... | @@ -51,6 +51,9 @@ |
| 51 | @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data"> | 51 | @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data"> |
| 52 | </lb-table> | 52 | </lb-table> |
| 53 | </div> | 53 | </div> |
| 54 | <dialogBox ref="dialog" title="标题" v-model="isDialog"> | ||
| 55 | **在这里面写弹框内容** | ||
| 56 | </dialogBox> | ||
| 54 | </div> | 57 | </div> |
| 55 | </template> | 58 | </template> |
| 56 | <script> | 59 | <script> |
| ... | @@ -65,6 +68,7 @@ export default { | ... | @@ -65,6 +68,7 @@ export default { |
| 65 | }, | 68 | }, |
| 66 | data () { | 69 | data () { |
| 67 | return { | 70 | return { |
| 71 | isDialog: false, | ||
| 68 | queryForm: { | 72 | queryForm: { |
| 69 | ywly: "", | 73 | ywly: "", |
| 70 | qllx: "", | 74 | qllx: "", |
| ... | @@ -84,9 +88,11 @@ export default { | ... | @@ -84,9 +88,11 @@ export default { |
| 84 | data: [ | 88 | data: [ |
| 85 | { | 89 | { |
| 86 | slsj: "2022-5-12", | 90 | slsj: "2022-5-12", |
| 91 | ywh: 111111111111 | ||
| 87 | }, | 92 | }, |
| 88 | { | 93 | { |
| 89 | slsj: "2022-5-13", | 94 | slsj: "2022-5-13", |
| 95 | ywh: 111111111111 | ||
| 90 | }, | 96 | }, |
| 91 | ], | 97 | ], |
| 92 | }, | 98 | }, |
| ... | @@ -97,6 +103,9 @@ export default { | ... | @@ -97,6 +103,9 @@ export default { |
| 97 | fetchData () { }, | 103 | fetchData () { }, |
| 98 | handleSort (name, sort) { | 104 | handleSort (name, sort) { |
| 99 | console.log(name, sort); | 105 | console.log(name, sort); |
| 106 | }, | ||
| 107 | openDialog () { | ||
| 108 | this.isDialog = true | ||
| 100 | } | 109 | } |
| 101 | } | 110 | } |
| 102 | } | 111 | } | ... | ... |
| ... | @@ -40,8 +40,14 @@ class data extends filter { | ... | @@ -40,8 +40,14 @@ class data extends filter { |
| 40 | } | 40 | } |
| 41 | }, | 41 | }, |
| 42 | { | 42 | { |
| 43 | prop: "ywh", | ||
| 44 | label: "业务号", | 43 | label: "业务号", |
| 44 | render: (h, scope) => { | ||
| 45 | return ( | ||
| 46 | <div> | ||
| 47 | <el-link type="primary" onClick={() => { vm.openDialog(scope) }}>{scope.row.ywh}</el-link> | ||
| 48 | </div> | ||
| 49 | ) | ||
| 50 | } | ||
| 45 | }, | 51 | }, |
| 46 | { | 52 | { |
| 47 | prop: "sqywmc", | 53 | prop: "sqywmc", | ... | ... |
-
Please register or sign in to post a comment