正尝试使用https://element.eleme.io/#/en-US/component/message 通过
在我的组件中import Message from "@/components/ElementUi/Message";
并且在该组件内部,正常包含来自element-ui
<template>
<div>
<el-button :plain="true" @click="open">{{label}}</el-button>
</div>
</template>
<script>
import { Message, Button } from "element-ui";
// import lang from "element-ui/lib/locale/lang/ru-RU";
// import locale from "element-ui/lib/locale";
import "element-ui/lib/theme-chalk/index.css";
import "../../../public/css/element-variables.scss";
//locale.use(lang);
import Vue from "vue";
Vue.use(Message);
Vue.use(Button);
export default {
props: ["label", "content", "type", "duration", "run"],
data() {
return {};
},
methods: {
open() {
Message({
showClose: true,
message: this.content,
type: this.type,
duration: this.duration,
dangerouslyUseHTMLString: true
});
}
},
created() {
if (this.run == 1) {
// this.open();
}
},
beforeCreate() {}
};
</script>
当我的组件更新此烦人的消息时,会自动显示内容为0的内容,但我希望仅在满足某些条件时才呈现该内容 像
<div
v-if="searchCompleted.status && searchCompleted.codingType=='reverse' && searchCompleted.fullMatch == false "
>
<message
:duration="3000"
:label="'info'"
:content="'<p>No data</p>'"
:type="'message'"
></message>
</div>
</div>
文档缺少有关如何在组件的初始渲染时不显示元素的信息,因此必须有一些纯JavaScript选项,如何禁用该功能并在需要时启用?