七月_
七月_
  • 发布:2019-01-12 01:53
  • 更新:2019-01-12 10:52
  • 阅读:239

【报Bug】uniapp在H5+环境时,子组件中使用computed返回数据为{}时失效

分类:uni-app

uniapp在H5+环境时,子组件使用computed返回数据为{}时失效,只有返回字符串时才会生效,代码如下,
取消掉// #ifdef APP-PLUS 注释就可以测试
[内容]

<template>  
    <view :class="buttonClass" :style="buttonStyle" @click="handleClick">  
        <slot></slot>  
    </view>  
</template>  

<script>  
    export default {  
        name: "qy-button",  
        props: {  
            color: {  
                type: String,  
                default: "#03a9f4"  
            },  
            textColor: {  
                type: String,  
                default: "#ffffff"  
            },  
            ripple: {  
                type: Boolean,  
                default: false  
            },  
            fab: {  
                type: Boolean,  
                default: false  
            },  
            flat: {  
                type: Boolean,  
                default: false  
            },  
            size: {  
                type: String,  
                default: "medium"  
            },  
            round: {  
                type: Boolean,  
                default: false  
            },  
            fullWidth: {  
                type: Boolean,  
                default: false  
            },  
            disabled: {  
                type: Boolean,  
                default: false  
            }  
        },  
        methods: {  
            handleClick(e) {  
                if (!this.disabled) {  
                    this.$emit('click', e);  
                }  
            },  
        },  
        computed: {  
            buttonStyle() {  
                // #ifdef APP-PLUS  
                let style = "";  
                style += "color:" + this.textColor + ";";  
                style += "background-color:" + this.color + ";";  
                if(!this.fullWidth){  
                    style+="padding:0 1.5rem";  
                }  
                return style;  
                // #endif  
                // #ifndef APP-PLUS  
                return {  
                    "color": this.textColor,  
                    "backgroundColor": this.color,  
                    "padding": this.fullWidth ? '' : '0 1.5rem'  
                }  
                // #endif  
            },  
            buttonClass() {  
                // #ifdef APP-PLUS  
                let style = {  
                    'qy-btn': true,  
                    'btn-flat': this.flat,  
                    'btn-fab': this.fab,  
                    'btn-lg': this.size == 'lg',  
                    'btn-sm': this.size == 'small',  
                    'btn-xs': this.size == 'mini',  
                    'btn-full-width': !this.fab && this.fullWidth,  
                    'btn-round': this.round,  
                    'disabled': this.disabled  
                }  
                let styleString = "";  
                for(let key in style){  
                    if(style[key]){  
                        styleString+=key+" "  
                    }  
                }  

                return styleString  
                // #endif  
                // #ifndef APP-PLUS  
                return {  
                    'qy-btn': true,  
                    'btn-flat': this.flat,  
                    'btn-fab': this.fab,  
                    'btn-lg': this.size == 'lg',  
                    'btn-sm': this.size == 'small',  
                    'btn-xs': this.size == 'mini',  
                    'btn-full-width': !this.fab && this.fullWidth,  
                    'btn-round': this.round,  
                    'disabled': this.disabled  
                }  
                // #endif  
            }  
        },  
        mounted: function() {  

        }  
    }  
</script>  

<style scoped>  
    .qy-btn {  
        display: inline-block;  
        position: relative;  
        cursor: pointer;  
        height: 35px;  
        line-height: 35px;  
        /* padding: 0 1.5rem; */  
        color: #424242;  
        font-size: 15px;  
        font-weight: 600;  
        font-famiqy: 'Roboto', sans-serif;  
        letter-spacing: .8px;  
        text-align: center;  
        text-decoration: none;  
        text-transform: uppercase;  
        vertical-align: middle;  
        white-space: nowrap;  
        outline: none;  
        border: none;  
        -webkit-user-select: none;  
        -moz-user-select: none;  
        -ms-user-select: none;  
        user-select: none;  
        border-radius: 2px;  
        -webkit-transition: all .3s ease-out;  
        transition: all .3s ease-out;  
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);  
    }  

    .qy-btn:hover {  
        text-decoration: none;  
        box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.225);  
    }  

    /* ----------------------------------------------------------------------  
      Material Design Fab Buttons - by Ravikumar Chauhan  
    ------------------------------------------------------------------------- */  
    .qy-btn.btn-fab,  
    .qy-btn.btn-fab-mini {  
        overflow: hidden;  
        position: relative;  
        margin: auto;  
        padding: 0;  
        line-height: normal;  
        border-radius: 50%;  
        box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3);  
    }  

    .qy-btn.btn-fab:hover,  
    .qy-btn.btn-fab-mini:hover {  
        box-shadow: 0 4px 11px 0px rgba(0, 0, 0, 0.375);  
    }  

    .qy-btn.btn-fab i,  
    .qy-btn.btn-fab-mini i {  
        display: inline-block;  
        float: none;  
        width: inherit;  
        margin: 0;  
        font-size: inherit;  
        text-align: center;  
        line-height: none;  
        vertical-align: middle;  
    }  

    .qy-btn.btn-fab {  
        width: 56px;  
        height: 56px;  
        font-size: 28px;  
    }  

    .qy-btn.btn-fab-mini {  
        width: 40px;  
        height: 40px;  
        font-size: 24px;  
    }  

    /* Buttons Color */  
    .qy-btn.btn-lightBlue {  
        color: #FFF;  
        background-color: #03a9f4;  
    }  

    .qy-btn.btn-lightBlue:hover {  
        background-color: #23b9fc;  
    }  

    .qy-btn.btn-white {  
        color: #444;  
        background-color: #FFF;  
    }  

    .qy-btn.btn-white:hover {  
        background-color: #fafafa;  
    }  

    .qy-btn.btn-black {  
        color: #bdbdbd;  
        background-color: #111;  
    }  

    .qy-btn.btn-black:hover {  
        background-color: #252525;  
    }  

    .qy-btn.btn-grey {  
        color: #757575;  
        background-color: #f5f5f5;  
    }  

    .qy-btn.btn-grey:hover {  
        background-color: #ebebeb;  
    }  

    .qy-btn.btn-orange {  
        color: #FFF;  
        background-color: #ff9800;  
    }  

    .qy-btn.btn-orange:hover {  
        background-color: #ffa829;  
    }  

    .qy-btn.btn-amber {  
        color: #FFF;  
        background-color: #ffc107;  
    }  

    .qy-btn.btn-amber:hover {  
        background-color: #ffcb30;  
    }  

    .qy-btn.btn-green {  
        color: #FFF;  
        background-color: #4caf50;  
    }  

    .qy-btn.btn-green:hover {  
        background-color: #67bd6a;  
    }  

    .qy-btn.btn-teal {  
        color: #FFF;  
        background-color: #009688;  
    }  

    .qy-btn.btn-teal:hover {  
        background-color: #00bfad;  
    }  

    .qy-btn.btn-cyan {  
        color: #FFF;  
        background-color: #00bcd4;  
    }  

    .qy-btn.btn-cyan:hover {  
        background-color: #00e0fd;  
    }  

    .qy-btn.btn-indigo {  
        color: #FFF;  
        background-color: #3f51b5;  
    }  

    .qy-btn.btn-indigo:hover {  
        background-color: #5869c5;  
    }  

    .qy-btn.btn-deepPurple {  
        color: #FFF;  
        background-color: #673ab7;  
    }  

    .qy-btn.btn-deepPurple:hover {  
        background-color: #7c52c8;  
    }  

    .qy-btn.btn-pink {  
        color: #FFF;  
        background-color: #e91e63;  
    }  

    .qy-btn.btn-pink:hover {  
        background-color: #ed437d;  
    }  

    .qy-btn.btn-red {  
        color: #FFF;  
        background-color: #f44336;  
    }  

    .qy-btn.btn-red:hover {  
        background-color: #f6675d;  
    }  

    .qy-btn.btn-yellow {  
        color: #FFF;  
        background-color: #ffeb3b;  
    }  

    .qy-btn.btn-yellow:hover {  
        background-color: #f8de00;  
    }  

    .qy-btn.btn-lime {  
        color: #FFF;  
        background-color: #cddc39;  
    }  

    .qy-btn.btn-lime:hover {  
        background-color: #bac923;  
    }  

    .qy-btn.btn-brown {  
        color: #FFF;  
        background-color: #795548;  
    }  

    .qy-btn.btn-brown:hover {  
        background-color: #936757;  
    }  

    /* Raised Buttons Size (Not work in Fab Buttons) */  
    .qy-btn.btn-lg {  
        height: 48px;  
        line-height: 48px;  
    }  

    .qy-btn.btn-sm {  
        height: 30px;  
        padding: 0 1rem;  
        line-height: 30px;  
        font-size: 12px;  
    }  

    .qy-btn.btn-full-width {  
        width: 100%;  
    }  

    .qy-btn.btn-round {  
        border-radius: 20px;  
    }  

    .qy-btn.btn-xs {  
        height: 24px;  
        padding: 0 .4rem;  
        line-height: 24px;  
        font-size: 11px;  
        font-weight: 300;  
        letter-spacing: .2px;  
    }  

    /* Raised Buttons Types */  
    .qy-btn.disabled,  
    .qy-btn[disabled] {  
        cursor: default !important;  
        color: #9e9e9e !important;  
        box-shadow: none !important;  
    }  

    .qy-btn.disabled:not(.btn-flat),  
    .qy-btn[disabled]:not(.btn-flat) {  
        background-color: rgba(0, 0, 0, .1) !important;  
    }  

    .qy-btn.disabled:not(.btn-flat):hover,  
    .qy-btn[disabled]:not(.btn-flat):hover {  
        background-color: rgba(0, 0, 0, .1) !important;  
    }  

    .qy-btn.btn-flat {  
        box-shadow: none !important;  
        background-color: transparent !important;  
    }  

    .qy-btn.btn-flat:hover {  
        background-color: #cecece !important;  
        box-shadow: none !important;  
    }  

    .qy-btn.btn-flat.disabled:hover,  
    .qy-btn.btn-flat[disabled]:hover {  
        background-color: transparent !important;  
    }  

    .qy-btn.btn-link {  
        color: #3949ab !important;  
        box-shadow: none !important;  
        background-color: transparent !important;  
    }  

    .qy-btn.btn-link:hover {  
        text-decoration: underline !important;  
        background-color: transparent !important;  
        box-shadow: none !important;  
    }  

    .qy-btn.btn-link.disabled,  
    .qy-btn.btn-link[disabled] {  
        color: #9fa8da !important;  
        text-decoration: underline !important;  
        background-color: transparent !important;  
    }  

    .qy-btn.btn-link.disabled:hover,  
    .qy-btn.btn-link[disabled]:hover {  
        background-color: transparent !important;  
    }  

    .qy-btn i {  
        float: left;  
        width: auto;  
        height: auto;  
        margin-right: 10px;  
        font-size: 1.3rem;  
        line-height: inherit;  
    }  

    .qy-btn i.right {  
        float: right !important;  
        margin: 0;  
        margin-left: 10px;  
    }  

    /* ----------------------------------------------------------------------  
      Material Design Ripple Effect - by Ravikumar Chauhan  
    ------------------------------------------------------------------------- */  
    .ripple-effect {  
        display: inline-block;  
        position: relative;  
        overflow: hidden;  
        cursor: pointer;  
        vertical-align: middle;  
        -webkit-user-select: none;  
        -moz-user-select: none;  
        -ms-user-select: none;  
        user-select: none;  
        z-index: 1;  
    }  

    .ripple-effect .ripple {  
        display: block;  
        position: absolute;  
        border-radius: 100%;  
        background: rgba(255, 255, 255, 0.5);  
        -webkit-transform: scale(0);  
        transform: scale(0);  
        pointer-events: none;  
    }  

    .ripple-effect.ripple-dark .ripple {  
        background: rgba(0, 0, 0, 0.1) !important;  
    }  

    .ripple-effect.ripple-red .ripple {  
        background: rgba(244, 67, 54, 0.725) !important;  
    }  

    .ripple-effect.ripple-orange .ripple {  
        background: rgba(255, 152, 0, 0.725) !important;  
    }  

    .ripple-effect.ripple-yellow .ripple {  
        background: rgba(255, 235, 59, 0.725) !important;  
    }  

    .ripple-effect.ripple-green .ripple {  
        background: rgba(76, 175, 80, 0.725) !important;  
    }  

    .ripple-effect.ripple-purple .ripple {  
        background: rgba(156, 39, 176, 0.725) !important;  
    }  

    .ripple-effect.ripple-teal .ripple {  
        background: rgba(0, 150, 136, 0.725) !important;  
    }  

    .ripple-effect.ripple-pink .ripple {  
        background: rgba(233, 30, 99, 0.725) !important;  
    }  

    .ripple-effect .animated {  
        -webkit-animation: ripple 0.6s linear;  
        animation: ripple 0.6s linear;  
    }  

    @-webkit-keyframes ripple {  
        100% {  
            opacity: 0;  
            -webkit-transform: scale(2.5);  
            transform: scale(2.5);  
        }  
    }  

    @keyframes ripple {  
        100% {  
            opacity: 0;  
            -webkit-transform: scale(2.5);  
            transform: scale(2.5);  
        }  
    }  
</style>  

联系方式
[QQ]

2019-01-12 01:53 分享
已邀请:
meHaoTian

meHaoTian

要回复问题请先登录注册