消息提示 - Message

示例

代码

点击查看代码

<template>
  <div class="container">
    <Button @click="open1" type="success">成功按钮</Button>
    <Button @click="open2" type="info">信息按钮</Button>
    <Button @click="open3" type="warning">警告按钮</Button>
    <Button @click="open4" type="danger">危险按钮</Button>
  </div>
</template>

<script lang="ts">
  import {Button, Message} from "@wanmaoor/giaoui"
  import {Component, Vue} from "vue-property-decorator"

  Vue.use(Message)
  @Component({
    components: {Button},
  })
  export default class Messages extends Vue {
    open1() {
      this.$message({
        text: "成功消息"
      })
    }

    open2() {
      this.$message({
        type: "info",
        text: "通知消息"
      })
    }

    open3() {
      this.$message({
        type: "warning",
        text: "警告消息"
      })
    }

    open4() {
      this.$message({
        type: "danger",
        text: "危险消息"
      })
    }
  }
</script>

API

在绑定事件函数里使用this.$message(options)可以生成Message组件, 它已经作为插件被封装进Vue.prototype.$message里. 使用时需要它接受一个对象作为参数. type选项只支持success, info, warning, danger四个选项. text为用户需要展示的内容.

WARNING

使用时一定要引入插件

Vue.use(Message)