20240612前端问题总结

20240612前端问题总结

给定固定大小的父 子盒子，要实现子盒子上下左右居中

使用calc()计算，子绝父相和子元素调整位置，flex弹性盒布局，transform，table-cell，浮动六种方法展示子元素垂直水平居中。

<div class="big">
        <div class="small"></div>
</div>

calc()计算

 .big {
        background-color: blue;
        width: 600px;
        height: 600px;
        overflow: hidden;
    }

    .small {
        background-color: burlywood;
        height: 200px;
        width: 200px;
        margin: calc((600px - 200px) / 2);
    }

如果父元素和子元素宽高不等,下面代码同样没有问题

    .big {
        background-color: blue;
        width: 600px;
        height: 500px;
        overflow: hidden;
    }

    .small {
        background-color: burlywood;
        height: 300px;
        width: 200px;
        margin: calc((500px - 300px) / 2) calc((600px - 200px) / 2);
    }

注意margin后面两个值的时候，第一个值代表上下外边距的值，第二个值代表左右外边距的值，所以calc先计算上下高度再计算宽度。

子绝父相+子元素调整位置

父元素相对定位，子元素绝对定位，调整子元素使其垂直水平居中

    .big {
        width: 600px;
        height: 500px;
        background-color: blue;
        position: relative;
    }

    .small {
        height: 300px;
        width: 200px;
        background-color: burlywood;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
    }

flex弹性盒布局

display：flex弹性盒布局设置元素水平垂直居中对齐

    .big {
        width: 600px;
        height: 500px;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .small {
        height: 300px;
        width: 200px;
        background-color: burlywood;
    }

子绝父相+transform

    .big {
        width: 600px;
        height: 500px;
        background-color: blue;
        position: relative;
    }

    .small {
        height: 300px;
        width: 200px;
        background-color: burlywood;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

单元格table-cell布局

    .big {
        width: 600px;
        height: 500px;
        background-color: blue;
        display: table-cell;
        vertical-align: middle;
    }

    .small {
        height: 300px;
        width: 200px;
        background-color: burlywood;
        vertical-align: middle;
        margin: 0 auto;
    }

浮动

给子元素设置左浮动使其脱离文档流，然后计算父元素和子元素的宽高差除以2设置上外边距和左外边距

<style>
    .big {
        width: 600px;
        height: 500px;
        background-color: blue;

    }

    .small {
        height: 300px;
        width: 200px;
        background-color: burlywood;
        float: left;
        margin-top: 100px;
        margin-left: 200px;
    }
</style>

给定一个对象数组，找到id为1的所有元素，返回一个新的数组

这个问题尝试用数组的常用方法解决，filter，splice，slice，concat，find，includes。

以下面的数组对象为例

var students = [
            { id: 1, name: "张三", age: 18, gender: "男" },
            { id: 1, name: "李四", age: 19, gender: "女" },
            { id: 1, name: "王五", age: 20, gender: "男" },
            { id: 2, name: "阿狗", age: 18, gender: "男" },
            { id: 3, name: "阿猫", age: 19, gender: "女" },
            { id: 4, name: "刘柳", age: 20, gender: "男" }
];

使用filter过滤元素返回一个新数组

var result = students.filter(function (student) {
    return student.id == 1
})
console.log(result)

箭头函数

const result = students.filter(students => students.id === 1)
console.log(result)

reduce函数解决

var result = students.reduce((acc, student) => {
    if (student.id === 1) {
        acc.push(student);
    }
    return acc;
}, []);

console.log(result);

后端一次性给定全部数据量，前端实现分页，描述实现逻辑。

基于vue2和element-ui实现，代码提取自简历中的信贷后台管理项目信贷申请核心代码。

封装请求后端数据的接口并调用

//  在IndexView中调用loan.js
// 定义获取申请列表的接口
export const getLoanList = (params) => {
    return request({
        url: '/loan/list',
        method: 'get',
        params
    })
}

  //页面加载就请求表格数据(异步获取数据)
 mounted() {
   this.getLoanList();
  }

在vue2的data中定义数据

 data() {
    return {
      rows: 0,
      value:false,//数据只有一页隐藏分页
      updateForm: {
        id: 0,
        name: "",
        sex: "",
        mobile_phone:"",
      },
     
      pageOptions: {
        pageNo: 1,//当前页面
        pageSize: 10,//页面显示数据条数
      },
      query: "",//名称
      //表格数据
      tableData: [],
      columns: [
        {
          label: "姓名",
          prop: "name",
          width: "80",
        },
        {
          label: "出生日期",
          prop: "birthday",
          width: "160",
        },
        {
          label: "性别",
          prop: "sex",
        },
        {
          label: "教育程度",
          prop: "education",
        },
        {
          label: "居住地址",
          prop: "address1",
        },
        {
          label: "手机号",
          prop: "mobile_phone",
        },
        {
          label: "申请状态",
          prop: "status",
        },
        {
          label: "操作",
          width: "280",
          prop: "opts",
        },
        
      ],

    }
  },

获取当前页需要显示的数据，使用elemen-ui的table组件在模板中渲染接收到的后端的数据

  <!--tableData是表格数据-->   
  <el-table :data="tableData"  >
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column 
      v-for="(item,index) in columns"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :width="item.width"
      align="center"
    >
    </el-table-column>  
  </el-table>

使用element-ui的分页组件，之后关于分页遇见调用的方法在methods里面写

  <!-- 分页功能 -->
 <!-- size-change处理页码大小；current-change事件处理当前页变动时候触发的事件。 -->
   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :hide-on-single-page="value"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageOptions.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rows">
    </el-pagination>

在method里面写关于分页的方法

handleSizeChange(val) {
      this.pageOptions.pageSize = val;
      this.getLoanList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageOptions.pageNo = val;
      this.getLoanList();
      console.log(`当前页: ${val}`);
    },

绑定当前页面页数和当前页面显示数据条数，调用后端数据请求接口请求数据返回

vue2实现

在Vue组件中定义数据：

data() {
    return {
        allData: [], // 后端一次性给定的全部数据量
        pageSize: 10, // 每页显示的数据条数
        currentPage: 1 // 当前页数
    };
}

创建计算属性来获取当前页需要显示的数据：

computed: {
    paginatedData() {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        return this.allData.slice(startIndex, endIndex);
    }
}

在模板中渲染分页数据：

<div v-for="data in paginatedData" :key="data.id">
    <!-- 显示每页数据的内容 -->
</div>

添加分页功能，包括上一页和下一页的按钮：

<button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
<button @click="goToPage(currentPage + 1)" :disabled="currentPage * pageSize >= allData.length">下一页</button>

实现跳转到指定页数的方法：

methods: {
    goToPage(page) {
        this.currentPage = page;
    }
}

如何实现一个父页面的弹窗功能，描述显隐和传参的实现逻辑

我的简历项目中的实现

简历中的信贷后台管理中有弹窗功能，在当前页面（父页面）中使用弹窗组件。弹窗使用了element的dailog组件。visible和close设置弹窗的显示隐藏

 <el-dialog title="编辑页面弹窗" :visible="dialogVisible"  @close="dialogVisible = false"  >
      <div class="form-box">
         编辑表格
      </div>
  </el-dialog>

通过data返回数据传参

 data() {
    return {
      dialogVisible: false,   //是否显示对话框
      rows: 0,
      value:false,//数据只有一页隐藏分页
    }
 }

method写关于编辑的操作

    //编辑操作
    async editApplication(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.updateForm.id = row.id;
        this.updateForm.name = row.name;
        this.updateForm.sex = row.sex;
        this.updateForm.mobile_phone = row.mobile_phone;
      });
   },

简单vue2实现

上面是基于element框架实现的，若不使用element，实现一个父页面的弹窗功能可以使用Vue2中的slot（插槽）和props（属性）来实现

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <modal :is-show="showModal" :message="modalMessage" @close="showModal = false">
      <!-- 弹窗内容 -->
    </modal>
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false,
      modalMessage: '这是父页面传递给弹窗组件的参数'
    }
  }
}
</script>

在父组件的模板中，通过modal标签引入弹窗组件，并传递了is-show和message两个props，用来控制弹窗的显隐状态和传递参数。同时，通过插入标签，可以在父组件中自定义弹窗的内容。

在弹窗组件中接收和使用父组件传递的props：

<template>
  <div class="modal-mask" :class="{ 'is-show': isShow }">
    <div class="modal-close" @click="$emit('close')">×关闭</div>
    <div class="modal-body">
      <p>{{ message }}</p>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

在弹窗组件中，通过props接收父组件传递的is-show和message，并使用v-bind绑定到相应的HTML元素上进行显示。同时，在关闭弹窗时通过 $emit 触发一个close事件，用来向父组件传递弹窗关闭的通知。