avm的 button 组件存在样式 bug

C-Chicken

avm的 button 组件存在样式 bug，已经把button 的边框宽度设置为 0 了，但是在某些场景下还是会看得出来样式有 bug



仔细看上图就会发现， 那条竖线没有到达顶部和底部都存在一定的空隙，而代码里面我写的是高百分百

1. <template name='m-confirm'>
   
2.         <view class="m-confirm-page m-confirm-flex-middle">
   
3.                 <view class="m-confirm-content">
   
4.                         <view class=" m-confirm-flex-middle m-confirm-flex-column">
   
5.                                 <text class="m-confirm-title">爱爱爱爱爱爱</text>
   
6.                                 <text
   
7.                                         class="m-confirm-msg">爱爱爱爱爱爱啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊2</text>
   
8.                         </view>
   
9.                         <view class="m-confirm-buttons m-confirm-disflex">
   
10.                                 <button class="m-confirm-button m-confirm-left-bottom-radius m-confirm-right-line">取消</button>
    
11.                                 <button class="m-confirm-button m-confirm-right-bottom-radius">确认</button>
    
12.                         </view>
    
13.                 </view>
    
14.         </view>
    
15. </template>
    
16. <style scoped>
    
17. .m-confirm-right-line{
    
18.         border-right:0.5px solid #eee ;
    
19. }
    
20. .m-confirm-right-bottom-radius{
    
21.         border-radius: 0 0  16px 0;
    
22. }
    
23. .m-confirm-left-bottom-radius{
    
24.         border-radius: 0 0 0 16px;
    
25. }
    
26. .m-confirm-button {
    
27.         flex: 1;
    
28.         height: 100%;
    
29.         background-color: #fff;
    
30.         border: 0;
    
31. }
    
32. .m-confirm-buttons {
    
33.         border-top: 0.5px solid #eeeeee;
    
34.         height: 50px;
    
35. }
    
36. .m-confirm-disflex {
    
37.         flex-flow: row;
    
38.         align-items: flex-start;
    
39.         justify-content: flex-start;
    
40.         align-content: flex-start;
    
41. }
    
42. .m-confirm-page {
    
43.         width: 100%;
    
44.         height: 100%;
    
45.         position: absolute;
    
46.         left: 0;
    
47.         top: 0;
    
48.         background: rgba(0, 0, 0, 0.5);
    
49.         z-index: 999999;
    
50. }
    
51. .m-confirm-flex-middle {
    
52.         align-items: center;
    
53.         justify-content: center;
    
54.         text-align: center;
    
55. }
    
56. .m-confirm-content {
    
57.         background: #fff;
    
58.         min-width: 50%;
    
59.         max-width: 75%;
    
60.         min-height: 100px;
    
61.         border-radius: 16px;
    
62. }
    
63. .m-confirm-title {
    
64.         padding-top: 24px;
    
65.         padding-bottom: 12px;
    
66. }
    
67. .m-confirm-msg {
    
68.         padding-left: 20px;
    
69.         padding-right: 20px;
    
70.         padding-bottom: 20px;
    
71.         text-align: center;
    
72. }
    
73. .m-confirm-flex-column {
    
74.         flex-flow: column;
    
75. }
    
76. </style>
    
77. 
    
78. <script>
    
79. export default {
    
80.         name: 'm-confirm',
    
81.         installed() {//like created
    
82. 
    
83.         },
    
84.         data() {
    
85.                 return {
    
86. 
    
87.                 }
    
88.         },
    
89.         methods: {
    
90. 
    
91.         }
    
92. }
    
93. </script>
    

复制代码

技术咨询-F

我测试看看

技术咨询-F

已反馈给相关技术。 iOS分割线没显示，点击后才显示。android  分割线上下有空隙。

技术咨询-Kenny

技术支持-F 发表于 2021-9-9 17:16
已反馈给相关技术。 iOS分割线没显示，点击后才显示。android  分割线上下有空隙。 ...

可以加一个 margin-right，被后面的盖住了。

.m-confirm-right-line{
        border-right:0.5px solid #eee ;
        margin-right:0.5px;
}

C-Chicken

技术咨询-Kenny 发表于 2021-9-9 19:34
可以加一个 margin-right，被后面的盖住了。

.m-confirm-right-line{

所以这个是 bug，辛苦大佬修复了