20240612前端问题总结

本文主要是介绍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事件，用来向父组件传递弹窗关闭的通知。

这篇关于20240612前端问题总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---