前端开发常见问题

原创

已于 2023-07-11 13:27:42 修改 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-03-27 21:01:56 首次发布

本文探讨了前端开发中的一些常见问题，包括使用flex布局时遇到的数据遮挡问题及其解决方案，禁用右键菜单、鼠标选中和F12调试，js数组的排序技巧，vue中修改新标签页title的方法，处理包含换行符的文字显示，判断日期先后，检查对象数组中是否存在相同属性值的对象，以及获取数组中排名前三的数据。同时，还涉及了中文按首字母排序的实现方法。

1. flex布局遇到的遮挡问题

情景描述：定高容器用flex布局，垂直水平居中，存在的首次渲染数据遮挡问题

<template>
  <div class="flex flex_container">
     <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
      >
            {
  
  { item }}
      </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      list:['春风','细雨','暖阳','冷月','秋风','冬阳','夏雨']
    };
  }
};
</script>
<style scoped>
.flex{
    height: 100px;
    background-color: cornflowerblue;
    color: #555;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
}
.flex .item{
   line-height:30px;
}
</style>

滚动可看到'冬阳','夏雨'；数据'春风','细雨'消失了

解决思路：数据少时保留justify-content:center;数据较多时去掉justify-content;

<template>
  <div :class="list.length>3?'flex':'flex center'">
     <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
      >
            {
  
  { item }}
      </div>
  </div>
</template>

<script>

export default {
  data() {
    return {