<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">Message</div>
    </div>
    <h3>基本</h3>
    <WingBlank><ok-button @click="showInfoMessage">info</ok-button></WingBlank>
    <WhiteSpace />
    <WingBlank><ok-button @click="showSuccessMessage">success</ok-button></WingBlank>
    <WhiteSpace />
    <WingBlank><ok-button @click="showErrorMessage">error</ok-button></WingBlank>
    <WhiteSpace />
    <WingBlank><ok-button @click="showWarningMessage">warning</ok-button></WingBlank>
    <WhiteSpace />
    <WingBlank><ok-button @click="showLoadingMessage">loading</ok-button></WingBlank>
  </div>
</template>

<script>
export default {
  methods: {
    showInfoMessage () {
      this.$Message({
        content: '信息提示文本'
      })
    },
    showSuccessMessage () {
      this.$Message.success({
        content: '成功提示文本',
        duration: null
      })
    },
    showErrorMessage () {
      this.$Message.error({
        content: '失败提示文本',
        color: '#e94f4f'
      })
    },
    showWarningMessage () {
      this.$Message.warning({
        content: '警告提示文本'
      })
    },
    showLoadingMessage () {
      this.$Message.loading({
        content: '加载提示文本'
      })
    }
  },
  destroyed () {
    this.$Message.hide()
  }
}
</script>