lb37
lb37
  • 发布:2019-02-12 16:41
  • 更新:2019-02-12 17:00
  • 阅读:232

uniapp自定义组件:class绑定的多个值模拟器调试下多了逗号

分类:uni-app

lb-icon组件

<template>  
    <text :class="[name, icon]"   
        :style="{'color': color, 'font-size': fontSize}">  
    </text>  
</template>  

<script>  
    export default {  
        props: {  
            name: {  
                type: String,  
                default: 'iconfont'  
            },  
            icon: {  
                type: String  
            },  
            color: {  
                type: String,  
                default: '#666666'  
            },  
            size: {  
                type: [Number, String],  
                default: 20  
            }  
        },  
        computed: {  
            fontSize(){  
                return this.size + 'upx'  
            }  
        }  
    }  
</script>  

使用

<lb-icon icon="icon-message"></lb-icon>  

H5正常显示了icon图标,模拟器上显示的class多了个逗号,如下图

2019-02-12 16:41 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

目前数组方式存在此问题,可以先改用字符串方式

DCloud_Android_ST

DCloud_Android_ST

请问你的模拟器系统版本多少 什么模拟器

  • lb37 (作者)

    Android Studio自带的模拟器
    Pixel 2 XL API 28
    Android 9.0

    2019-02-12 17:02

  • lb37 (作者)

    8.0系统试了下也是如此,应该和系统版本没啥关系

    2019-02-12 17:10

lb37

lb37 (作者)

暂时只能利用拼接class的方法解决了,数组绑定class方式很常用,希望下个版本能尽快修复。

<text :class="cls"  
    :style="{'color': color, 'font-size': fontSize}">  
</text>  
computed: {  
   cls(){  
      return `${this.name} ${this.icon}`  
   }  
}  

要回复问题请先登录注册