Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “type”
出现错误的代码
<template>
<div class="yu-message" :class="[customClass,]">
<div class="message" :class="[type,{show:isShow.default},{center:center}]">
<i class="icon iconfont"
:class="[iconClass,]"
v-if="iconClass"></i>
<i v-else
:class="['icon','iconfont',icons[type]]"></i>
<div class="content" ref="content">
{{message}}
</div>
<i class="close iconfont icon-close"
v-if="showClose"
@click="close"></i>
</div>
<div class="message-btn" @click="click">
<slot/>
</div>
</div>
</template>
<script>
export default {
name: 'YuMessage',
props: {
message: String,
iconClass: String,
type: {
type: String,
default: 'info',
},
duration: {
type: Number,
default: 3,
},
customClass: String,
dangerouslyUseHTMLString: Boolean,
center: Boolean,
showClose: Boolean,
},
data() {
return {
icons: {
success: 'icon-check-circle',
info: 'icon-information',
warming: 'icon-warning-circle',
error: 'icon-close-circle',
},
isShow: {
type: Boolean,
default: false,
},
}
},
mounted() {
this.iconClass ? this.type = '' : '';
if (this.dangerouslyUseHTMLString) {
this.$refs.content.innerHTML = this.message
}
},
methods: {
click() {
this.isShow.default = !this.isShow.default;
if (this.duration !== 0) {
setTimeout(() => {
this.isShow.default = false;
}, this.duration * 1000)
}
},
close(event) {
this.isShow.default = !this.isShow.default;
this.$emit('click', event);
},
},
}
</script>
修改之后不报错的代码
mounted() {
if (this.dangerouslyUseHTMLString) {
this.$refs.content.innerHTML = this.message
}
},
computed: {
change() {
this.iconClass ? this.type = '' : '';
},
},