8***@163.com
8***@163.com
  • 发布:2021-04-30 16:35
  • 更新:2023-05-29 11:20
  • 阅读:560

【报Bug】button组件为圆形时且loading为true时,有一圈灰边

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: WIN7 64

HBuilderX类型: 正式

HBuilderX版本号: 3.1.12

手机系统: Android

手机系统版本号: Android 7.1.1

手机厂商: SHARP

手机机型: S3 MINI

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>    
    <view>    
        <button class="button" :loading="loading"  
        @click="click()"  
        >按钮</button>  
    </view>    
</template>    

<script>    
    export default {    
        data() {    
            return {    
                loading:false  
            }    
        },    
        onLoad() {   

        },    
        methods: {    
            click(){    
                this.loading = true;  
                setTimeout(() => {  
                    this.loading = false  
                },5000)  
            }    
        }    
    }    
</script>    

<style>    
    .button{  
        border-radius: 50rpx;  
        background-image: linear-gradient(#EFCF9E, #E4BF85);  
        width: 80%;  
    }  
</style> 

操作步骤:

运行到手机或模拟器后,按下按钮,组件loading状态出现黑边

预期结果:

按下按钮,组件loading状态跟随样式

实际结果:

按下按钮,组件loading状态出现黑边

bug描述:

button组件设置样式为圆形时,loading为true时,有一圈灰边
运行到浏览器不会出现上述问题,运行到手机或模拟器会出现上述问题。

2021-04-30 16:35 负责人:无 分享
已邀请:
m***@163.com

m***@163.com

我这边也遇到了同样的问题,现在已经解决。
在 button类中,给定
.button::after{
border: none !important;
}
将边框隐藏

要回复问题请先登录注册