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