标签：setContentBoxHeight refs clientHeight rightBox element state ui pageHight 弹窗

<template>
  <div class="wrap-dialog-box">
    <!-- 弹窗 -->
    <el-dialog title="通知" :visible.sync="dialogVisible" center width="80%" class="dialog-box-center">
      <div class="carousel-wrap-box">
        <el-carousel
          :autoplay="false"
          trigger="click"
          :height="carouselHeight"
          indicator-position="outside"
        >
          <el-carousel-item v-for="item in testImgList" :key="item">
            <div style="text-align: center;width: 100%;height: 100%;">
              <img :src="item" class="image-item" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      testImgList: [], // 后台返回来图片数据
    };
  },
  computed: {
    ...mapState({
      carouselHeight: state =>
        state.pageHight.contentBoxHeight - 150 + "px" // 使用 写成 mapState的形式方便这边计算动态 高度 也可以写成 mapGetters 
    })
  },
  created(){

  },
  methods:{
   
  }
};
</script>

<style lang="scss">
.wrap-dialog-box {
    // element ui Dialog 对话框居中显示
    .dialog-box-center{
      text-align: center;
      &:after {
          content: "";
          display: inline-block;
          height: 100%;
          width: 0;
          vertical-align: middle;
      }
      .el-dialog{
          text-align: center;
          display: inline-block;
          margin: 0 !important;
          vertical-align: middle;
          max-width: 100%;
      }
    }
  .carousel-wrap-box {
      /* 图片原图大小自适应 等比缩放 */
    .image-item { 
      max-width: 100%;
      max-height: 100%;
    }
    /* tab指示器的样式 */
    .el-carousel__button {
      height: 6px;
      background-color: #1989fa;
    }
  }
}
</style>
// store/modules/pageHight.js
export default {
    state: {
        contentBoxHeight: (window.innerHeight - 80), // 动态计算右侧内容总高度
    },
    mutations: {
        setContentBoxHeight(state, pageHight) {
            state.contentBoxHeight = pageHight;
        }
    },
  }
// home文件全局处理下右边的布局高度 右侧最外层div 给上 ref 
mounted() {
    window.addEventListener('resize', () => {
        if (this.$refs.rightBox && this.$refs.rightBox.clientHeight) {
            this.setContentBoxHeight(this.$refs.rightBox.clientHeight)
        }
    })
    if (this.$refs.rightBox.clientHeight) {
        this.setContentBoxHeight(this.$refs.rightBox.clientHeight);
    }
},
methods: {
    ...mapMutations({
        "setContentBoxHeight": "setContentBoxHeight"
    }),
}

标签：setContentBoxHeight,refs,clientHeight,rightBox,element,state,ui,pageHight,弹窗
来源： https://www.cnblogs.com/webSnow/p/15954790.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。