ElementUI消息初始呈现禁用

时间:2019-01-15 10:13:26

标签: javascript vuejs2 element-ui

正尝试使用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选项,如何禁用该功能并在需要时启用?

0 个答案:

没有答案