2020-07-14 项目问题总结

1. JS 问题

（1）vue路由通过query方式传参，字符数量有限制，超过一定数量会报错。
解决方式：通过encodeURIComponent进行编码即可解决

2.CSS问题

（1）项目中的布局如下图，左侧固定宽度，右侧自适应，使用的flex布局实现的该布局。
右侧的单词部分需要实现在超过一定长度时，实现点点点的省略效果。

image.png

问题一：由于右侧父级部分使用的flex-grow:1，所以使用单行点点点的方式并不能实现我们想要的省略结果，会出现撑开父级的现象。所以，我们需要使用多行省略模拟单行省略 。

      flex-grow: 1;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;

问题二：上面方法实现了多行省略模拟单行省略的效果。但在项目中发现，其生效的前提，必须定死的字符串。例如，data中有一个words数据，它的属性值为'word1, word2, word3...'。如果数据是这种形式，我们直接在style中写入上面的代码，模拟效果会生效。但是，如果words数据是我们通过接口动态获取的，则上面的CSS代码则不起作用了，此时，我们需要把CSS代码写入行内，通过v-html的方式来渲染该数据，即可起作用。

    dealPractice (index, test) {
      let position = test.indexOf('\n')
      let newTest = test.substring(0, position) // 默认只显示问题说明，不显示具体的题型

      return `<span style="flex-grow: 1;-webkit-line-clamp: 1;
      display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;
      word-break: break-word;">${index + 1}.&nbsp;${newTest}</span>`
    }

（2）项目中要实现，选择框位于按钮正上方的效果，因此只能通过定位实现。使用定位带来了一个问题，那就是定位元素的最大宽度永远是父元素的宽度。因此，我们需要解决这个问题。

image.png

方法一：使用white-space:nowrap
这种方法是CSS世界中的一种解决方法，能解决父级宽度限制子元素宽度的问题，但是，有一个问题，就是子元素的宽度无法做限制，如果子元素内容很长，就会严重影响效果。
第二种方法：使用width:max-content;
这种方法既可以解决子元素的宽度为父级最大宽度问题，也可以限制子元素显示宽度

    <div @click="selectQuestion" class="bar_item question_select">
      题型选择
      <div class="question_list" v-if="showQuestionList">
        <div 
          class="question" 
          :class="{'active-item': activeQuestionId === question.catalog_id}" 
          v-for="question in questionType" 
          :key="question.catalog_id"
          @click="changeQuestion(question)"
          >
          <span class="question_item ">{{showQuestion(question.catalog_name)}}</span>
        </div>
      </div>
    </div>

  .question_select {
    position: relative;
  }

  .question_list {
    position: absolute;
    border: 1px solid #000;
    border-radius: 5px;

    width:max-content;  /*用来解决子元素的宽度为父级最大宽度问题，并且可以限制子元素显示宽度*/
    max-width: 200px;
    min-width: 100px;
  }