uniapp开发踩坑记录

最新推荐文章于 2025-07-17 19:04:31 发布

weixin_33699914

最新推荐文章于 2025-07-17 19:04:31 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liub37/p/10366614.html

本文探讨了Vue中自定义组件class绑定的问题，通过computed属性优化样式处理，并解决了H5端与非H5端使用Vuex的兼容性问题。

数组绑定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之间多了逗号，如图所示
tim 20190212163934

解决方法

利用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端会报错
_20190212181822

TypeError: Cannot read property 'getters' of undefined

解决方法

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

转载于:https://www.cnblogs.com/liub37/p/10366614.html