vue使用screenfull全屏指定容器，页码、日期等下拉框不显示的问题解决

原因：

 页码的下拉框没有在要全屏的容器中。全屏的容器盒子是最顶层，怎么给页码下拉框设置z-index都是没用的。

解决办法：

要把页码下拉框放进放大的盒子中。

1.使用页码中的属性给下拉框添加类名

2.在全屏的时候，添加到放大的容器中

this.$refs.fullScreen.appendChild(document.querySelector(".selectPagination"))

上代码：

html结构部分：

<template>
  <div class="contain">
    <div style="height: 100px">很长的内容</div>
    <div id="screenfull-container" ref="fullScreen">
      <button id="btn">全屏</button>
      <div style="height: 400px">很长的内容</div>
      <el-pagination
        popper-class="selectPagination"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

script部分：

<script>
import screenfull from "screenfull";
export default {
  name: "ScreenFull",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      // fullScreen: false,
    };
  },
  created() {},
  mounted() {
    const element = document.getElementById("screenfull-container");
    document.getElementById("btn").addEventListener("click", () => {
      console.log(
        "selectPagination",
        document.querySelector(".selectPagination")
      );
      this.$refs.fullScreen.appendChild(
        document.querySelector(".selectPagination")
      );
      if (screenfull.isEnabled) {
        screenfull.request(element);
      }
      screenfull.toggle();
    });
  },
  computed: {},

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

css部分：

<style lang="scss" scoped>
#screenfull-container {
  width: 100%;
  height: 600px;
  background-color: pink;
}
</style>