美文网首页
2020-07-14 项目问题总结

2020-07-14 项目问题总结

作者: 爱容笑 | 来源:发表于2020-07-14 19:47 被阅读0次
    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;
      }
    

    相关文章

      网友评论

          本文标题:2020-07-14 项目问题总结

          本文链接:https://www.haomeiwen.com/subject/adnfhktx.html