点击弹窗页面右侧缩小问题

前端程序媛Ying

于 2023-10-11 19:04:12 发布

阅读量139

点赞数

分类专栏： web前端 vue css 文章标签：前端 html css3

本文链接：https://blog.csdn.net/m0_62323730/article/details/133776487

版权

web前端同时被 3 个专栏收录

56 篇文章 0 订阅

订阅专栏

vue

35 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

主页面是由header和下面的tabel，2个组件构成，需要在css里使用flex布局，就解决了弹窗导致的页面右侧缩小问题。

display: flex;
flex-direction: column;

<template>
  <div class="main">
    <div class="header">
      <HeaderWeather :totalNumData="totalNumData" />
    </div>
    <div class="content">
      <div ref="tableboxRef" class="table-wrapper">
       <TablePart @getTotalNumData="getTotalNumData" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent,
  onMounted
} from "vue";
import HeaderWeather from "./components/HeaderWeather.vue";
import TablePart from "./components/TablePart.vue";

export default defineComponent({
  components: {
    HeaderWeather,
    TablePart
  },
  setup() {
    const state = reactive({
      totalNumData: []
    } as any);

    //监听变化
    const methods = {
      getTotalNumData(data) {
        state.totalNumData = data
      }
    }
    // 发送埋点数据
    onMounted(() => {
      countLog(['模块名', '页面名', '按钮名'])
    })
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>