現象描述：
當text組件的內容較多且顯示多行的時候，相鄰的div樣式會顯示異常，會從正常的圓形變為橢圓。
問題代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<
template
>
<
div
class
=
"container"
>
<
div
style
=
"align-items: center;"
>
<
div
class
=
"typscolor"
style
=
"blue; opacity: 0.26; margin-left: 16px;"
>
</
div
>
<
text
>{{text}}</
text
>
<
div
class
=
"typscolor"
style
=
"blue; opacity: 0.26; margin-left: 16px;"
>
</
div
>
<
text
>{{text}}</
text
>
<
div
class
=
"typscolor"
style
=
"blue; opacity: 0.26; margin-left: 16px;"
>
</
div
>
<
text
>{{text}}</
text
>
</
div
>
</
div
>
</
template
>
<
style
>
.container {
flex-direction: column;
justify-content: center;
height: 100%;
}
text {
font-size: 24px;
}
.typscolor {
border-radius: 50%;
width: 30px;
height: 30px;
red;
margin-right: 8px;
}
</
style
>
<
script
>
module.exports = {
data: {
text:'text文本內容過多時左邊的圓圈會被拉伸'
},
onInit() {
},
}
</
script
>
|
代碼運行效果，如下圖所示：
|
|
|
| 圖1 異常 |
圖2 正常 |
問題分析：
當text組件內容過多時，text組件寬度增加，相鄰div寬度不夠，flex布局寬度超出會自動壓縮，從而導致div標簽被拉伸了。
解決方法：
可以給div標簽設置flex-shrink: 0屬性，顯示指定不壓縮，即可解決該問題。
修改代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<
template
>
<
div
class
=
"container"
>
<
div
style
=
"align-items: center;"
>
<
div
class
=
"typscolor"
style
=
"blue; opacity: 0.26; margin-left: 16px;"
></
div
>
<
text
>{{text}}</
text
>
<
div
class
=
"typscolor"
style
=
"blue; opacity: 0.26; margin-left: 16px;"
></
div
>
<
text
>{{text}}</
text
>
<
div
class
=
"typscolor"
style
=
"blue; opacity: 0.26; margin-left: 16px;"
></
div
>
<
text
>{{text}}</
text
>
</
div
>
</
div
>
</
template
>
<
style
>
.container {
flex-direction: column;
justify-content: center;
height: 100%;
}
text {
font-size: 24px;
}
.typscolor {
border-radius: 50%;
width: 30px;
height: 30px;
red;
margin-right: 8px;
flex-shrink: 0; /*加上該屬性即可解決拉伸問題*/
}
</
style
>
<
script
>
module.exports = {
data: {
text:'text文本內容過多時左邊的圓圈會被拉伸'
},
onInit() {
},
}
</
script
>
|
修改后代碼運行效果如下圖所示：
欲了解更多詳情，請參見：
快應用通用樣式介紹：
原文鏈接：https://developer.huawei.com/...
原作者：Mayism