欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

uniapp开发踩坑记录

程序员文章站 2023-11-29 12:11:10
数组绑定class的问题 版本:v1.5.4 自定义了一个icon的组件,部分代码如下 export default { props: { name: { type: String, default: 'iconfont' }, icon: { type: String }, color: { ty ......

数组绑定class的问题

版本:v1.5.4
自定义了一个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: 30
            }
        },
        computed: {
            cls(){
                return `${this.name} ${this.icon}`
            },
            fontsize(){
                return this.size + 'upx'
            }
        }
    }
</script>

使用

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

h5端显示正常无异常,模拟器模拟显示class之间多了逗号,如图所示
uniapp开发踩坑记录

解决方法

利用computed进行class拼接

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

vuex mapgetters问题

版本:v1.5.4
正常使用mapgetters的时候,h5端无异常,非h5端会报错
uniapp开发踩坑记录

typeerror: cannot read property 'getters' of undefined

解决方法

main.js中增加vue.prototype.$store = store