When duration: -1 then the variable showClose: false does not hide the close button.

I really commend the great work done with this plugin.

Please i got an error on the console while running npm run dev

There are multiple modules with names that only differ in casing.                            friendly-errors 22:21:09
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Library/WebServer/Documents/ngcareers/node_modules/Vue/dist/vue.runtime.esm.js
    Used by 1 module(s), i. e.
    /Library/WebServer/Documents/ngcareers/node_modules/vue-m-message/dist/index.js

I guess the fix is by changing require("Vue") to require("vue") and define("Message",["Vue"],e) to define("Message",["vue"],e)

Please can you kindly help look into this.

Thank you.

安装之后会导致vscode中使用volar在模板中无法解析组件库的类型

使用ui库：naive-ui

怀疑是types和volar冲突，这是有先例的。我找了大量的案例，花了四五个小时才发现是这个库的原因，卸载之后就正常显示了

Hi can you add an option to disable message folding entirely? something like

{ collapsable: false }

example:
app.use(Message, { name: 'toast', defaultOptions: { duration: -1, position: 'top-right' } })
duration 正常, 但是 position 不正常, 請問這有解嗎?

Unexpected error when starting the router: TypeError: Cannot read property 'extend' of undefined

错误消息

TypeError: Cannot read property 'remove' of null

错误产生的地方

if (hasMask && index === -1) {
          setTimeout(function () {
            containers[containerKey].remove();
            containers[containerKey] = null;
          }, 300);
}

复现

不断的操作弹框，消失又打开不断反复

<template>
  <a-button type="primary" @click="openMessage">Open the message box (update by key)</a-button>
  <br />
  <br />
  <a-button type="primary" @click="openMessage2">
    Open the message box (update by reactive)
  </a-button>
</template>
<script lang="ts">
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
const key = 'updatable';
export default defineComponent({
  setup() {
    const openMessage = () => {
      message.loading({ content: 'Loading...', key });
      setTimeout(() => {
        message.success({ content: 'Loaded!', key, duration: 2 });
      }, 1000);
    };
    const content = ref('Loading...');
    const openMessage2 = () => {
      // content must use function
      message.loading({ content: () => content.value });
      setTimeout(() => {
        content.value = 'Loaded!';
      }, 1000);
    };
    return {
      openMessage,
      openMessage2,
    };
  },
});
</script>

ref: https://codesandbox.io/s/gmc46q?file=/src/demo.vue:745-752 (ant-design-vue: message)

0

this.$message.success('This is a success message')

Uncaught TypeError: Cannot read properties of undefined (reading 'success')

If I wanted to pass in a message with some HTML, for example, an anchor tag, how would I do that? If I pass just a string, obviously it gets escaped and the HTML shows up in the toast.

Example: I would like to be able to do this:

this.$message.error({
  message: `Oops. Please contact <a href="mailto:[email protected]">[email protected]</a>`
})

      this.$message.loading({
        duration: 3000,
        message: '正在登入中,请稍后..'
      })

duration 无效

please, Can you give an example with CDN?

I am using:

Vue.use(window.VueMMessage);

handleMessage: function() {
        this.$message({
            type: "info",
            message: "this is a test",
            showClose: true,
            position: "top-center",
            hasMask: false,
        })
    },

And I get this error:

[Vue warn]: Error in v-on handler: "TypeError: this.message is not a function"

(found in )
warn @ vue.js:634
logError @ vue.js:1902
globalHandleError @ vue.js:1897
handleError @ vue.js:1857
invokeWithErrorHandling @ vue.js:1880
invoker @ vue.js:2197
original._wrapper @ vue.js:7591
vue.js:1906 TypeError: this.message is not a function
at Vue.handleMessage (index.html:130:14)
at click (eval at createFunction (vue.js:11698:14), :3:603)
at invokeWithErrorHandling (vue.js:1872:28)
at HTMLButtonElement.invoker (vue.js:2197:16)
at HTMLButtonElement.original._wrapper (vue.js:7591:27)

Thank you

I have a block of code as below:

this.$toast.error({
                message: "Something has gone wrong.",
                duration: process.env.TOAST_DURATION,
                showClose: process.env.TOAST_SHOW_CLOSE,
                zIndex: 2000
              })

I get the following error in the console.

Invalid prop: type check failed for prop "closable". Expected Boolean, got String with value "true".

Hello,

First of all, thanks for that beautiful plugin.

Can we have a global settings object? Like when we write:

Message.globals.config.position = 'bottom-right';

All the calls to Message.{type} would use bottom-right positioning.