- 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}. ${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;
}
网友评论