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

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>



\n

联系方式

[QQ]



2019-01-12 01:53 添加评论 分享
已邀请:
2

DCloud_UNI_mehaotian - 热爱生活,热爱编程

赞同来自: 七月_ DCloud_客服_Trust

查看:Class 与 Style 绑定

不支持 Vue官方文档:Class 与 Style 绑定 中的 classObject 和 styleObject 语法。


要回复问题请先登录注册