全屏

src/components/XyDialog/index.vue

@@ -10,6 +10,10 @@ export default {
       type:Number,
       default:55
     },
+    // isFullScreen:{
+    //   type:Boolean,
+    //   default:false
+    // },
     isShow:{
       type:Boolean,
       default:false
@@ -36,10 +40,19 @@ export default {
   },
   data() {
     return {
-
+      isFullScreen:false
     }
   },
   methods: {
+    headerRender(){
+      return (
+        <div>
+        {this.title}
+        <a class="ivu-modal-close" on-click={this.closeshowChange}><i class="ivu-icon ivu-icon-ios-close"></i></a>
+        <a class="ivu-modal-screen" on-click={this.fullScreen}><i class={this.isFullScreen?'el-icon-aim':'el-icon-full-screen'}></i></a>
+        </div>
+      )
+    },
     footerRender(){
       if(this.type === 'form'){
         return (
@@ -58,6 +71,9 @@ export default {
         )
       }
     },
+    closeshowChange(){
+      this.$emit('update:isShow',false)
+    },
     showChange(e){
       this.$emit('update:isShow',e)
     },
@@ -67,6 +83,11 @@ export default {
       }
       this.$refs['elForm'].resetFields()
     },
+    fullScreen(){
+      this.isFullScreen = !this.isFullScreen
+      // this.width = 100
+      // this.height = '100vh'
+    },
     submit(){
       if(this.type === 'normal'){
         return
@@ -95,16 +116,22 @@ export default {
     footer slot:
       footerContent
      */
-    const {okText,okClick,footerRender,width,type,$scopedSlots,rules,form,showChange,isShow,title} = this
+    const {okText,okClick,headerRender,footerRender,width,isFullScreen,type,$scopedSlots,rules,form,showChange,isShow,title} = this
     return (
       <Modal
         ok-text={okText}
-        class-name={'vertical-center-modal'}
+        class-name={!isFullScreen?'vertical-center-modal':'vertical-center-modal vertical-full-modal'}
         width={width}
         title={title}
         value={isShow}
         on={{['on-visible-change']:showChange,['on-ok']:okClick}}
+
         scopedSlots={{
+          header(){
+            {
+              return headerRender()
+            }
+          },
           default(){
             if(type === "form"){
               let formItems = []
@@ -215,6 +242,29 @@ export default {
   min-height: 300px;
   overflow: scroll;
 
+}
+  .ivu-modal-screen{
+        z-index: 1;
+font-size: 15px;
+    position: absolute;
+    right: 40px;
+    top: 17px;
+        cursor: pointer;
+        color:#bf617c
+  }
+.vertical-full-modal{
+  .ivu-modal{
+    width:100%!important
+  }
+  .ivu-modal-content{
+    height:100vh
+  }
+  .ivu-modal-body{
+    max-height: 80vh !important;
+    min-height: 300px;
+    overflow: scroll;
+
+  }
 }
 .xy-table-item{
   display: flex;

src/views/activity/component/showActiveOrder.vue

@@ -1,7 +1,14 @@
 <template>
   <div>
-    <Modal :width="60" :title="name+'订单列表'" :value.sync="isShow" @on-visible-change="$emit('update:isShow',$event)"
+    <Modal :width="80" :value.sync="isShow" :fullscreen='isFullScreen' @on-visible-change="$emit('update:isShow',$event)"
        >
+       <div class="ivu-modal-header ivu-modal-header-wrap">
+         <div v-solt:header>
+           {{name+'订单列表'}}
+           <a class="ivu-modal-screen" @click="isFullScreen=!isFullScreen"><i :class="isFullScreen?'el-icon-aim':'el-icon-full-screen'"></i></a>
+         </div>
+       </div>
+
         <Button class="select" type="primary" style="margin-bottom: 10px;" @click="downloadExel">导出</Button>
       <xy-table id="print" :is-page="false" :list="list" :table-item="table" :height="300">
         <template v-slot:btns>
@@ -28,6 +35,7 @@ export default {
   },
   data() {
     return {
+      isFullScreen:false,
       list:[],
       table:[
         {
@@ -102,6 +110,8 @@ export default {
     }
   },
   methods: {
+    closeshowChange(){},
+    fullScreen(){},
     async getOrder(){
       await show({
         id:this.id
@@ -143,4 +153,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  .ivu-modal-header-wrap{
+    margin-bottom:10px;
+    padding-top: 0;
+    .ivu-modal-screen{
+      top:16px;
+    }
+  }
+  .ivu-modal-close{
+    top:7px
+  }
 </style>