King UI

Message 消息提示

基础用法

<template>
  <k-button @click="open">消息提示框</k-button>
  <k-button @click="openVn">VNode</k-button>
</template>
<script>
export default {
  methods: {
    open() {
      this.Message("这是一条消息");
    },
    openVn() {
      const h = this.$createElement;
      this.Message({
        content:  h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    },
  }
}
</script>
显示代码

不同状态

type参数是弹窗的状态，默认为info；还可以直接Message.success("消息")

<template>
  <k-button type="success" @click="open('success')">成功</k-button>
  <k-button type="warning" @click="open('warning')">警告</k-button>
  <k-button type="info" @click="open('info')">消息</k-button>
  <k-button type="error" @click="open('error')">错误</k-button>
</template>
<script>
export default {
  methods: {
    open(type) {
      this.Message({
        type: type,
        content: "这是一条消息",
      })
    },
  }
}
</script>
显示代码

可关闭

默认的Message是不可以被人工关闭的，如果需要可手动关闭的Message，可以使用showClose字段。Message拥有可控的duration，设置0为不会被自动关闭，默认为 3000 毫秒。

<template>
  <k-button type="success" @click="open('success')">成功</k-button>
  <k-button type="warning" @click="open('warning')">警告</k-button>
  <k-button type="info" @click="open('info')">消息</k-button>
  <k-button type="error" @click="open('error')">错误</k-button>
</template>
<script>
export default {
  methods: {
    open(type) {
      this.Message({
        type: type,
        showClose: true,
        content: "这是一条消息",
      })
    },
  }
}
</script>
显示代码

内容使用HTML

<template>
  <k-button @click="openHTML">使用 HTML 片段</k-button>
</template>

<script>
  export default {
    methods: {
      openHTML() {
        this.Message({
          userHtmlString: true,
          content: '<strong>这是 <i>HTML</i> 片段</strong>'
        });
      }
    }
  }
</script>
显示代码

← MessageBox 消息弹窗 →