liub1934
liub1934
  • 发布:2019-02-12 16:41
  • 更新:2019-09-06 11:11
  • 阅读:4188

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

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

  • liub1934 (作者)

    Android Studio自带的模拟器

    Pixel 2 XL API 28

    Android 9.0


    2019-02-12 17:02

  • liub1934 (作者)

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


    2019-02-12 17:10

liub1934

liub1934 (作者)

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

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

uni小白一枚

uni小白一枚

解析到小程序里面有问题,我在uni里面写的是:class="[aaa?bbb:ccc]",解析出来时class=“{{[aaa?bbb:ccc]}}”,这个怎么解决呢

  • uni小白一枚

    官网说得是非h5端不支持class和style的绑定,但是写法要求就是采用:的格式 那我要怎么满足自定义组件的样式绑定呢


    2019-09-06 11:15

该问题目前已经被锁定, 无法添加新回复