solar-vue

# notify

import { Notify } from 'solar-vue'
Vue.use(Notify)

//*.vue

this.$notify({
  message: '通知消息',
  type: 'success',
  background: '#551A8B',
  color: '#D33682'
})

源代码

<template>
  <div>
    <div class="demo-title">基本用法</div>
    <div class="demo-container">
      <sv-button @click.native="alert">基本用法</sv-button>
    </div>
    <div class="demo-title">不同类型</div>
    <div class="demo-container">
      <div class="demo-example-margin">
        <sv-button type="danger" @click.native="alertType('danger')"
          >danger</sv-button
        >
      </div>
      <div class="demo-example-margin">
        <sv-button type="primary" @click.native="alertType('success')"
          >success</sv-button
        >
      </div>
      <div class="demo-example-margin">
        <sv-button type="warning" @click.native="alertType('warning')"
          >warning</sv-button
        >
      </div>
      <div class="demo-example-margin">
        <sv-button type="info" @click.native="alertType('primary')"
          >primary</sv-button
        >
      </div>
    </div>
    <div class="demo-title">自定义颜色</div>
    <div class="demo-container">
      <sv-button @click.native="coutrom">自定义颜色</sv-button>
    </div>
    <div class="demo-title">带有图标的消息通知</div>
    <div class="demo-container">
      <div class="demo-example-margin">
        <sv-button type="info" @click.native="alertOfIcon">消息通知</sv-button>
      </div>
      <div class="demo-example-margin">
        <sv-button type="primary" @click.native="alertOfIconSuccess"
          >消息通知</sv-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.commitRoute(route)
  },
  methods: {
    alert() {
      this.$notify({
        duration: 2000,
        message: 'Welcome to here !'
      })
    },
    alertType(type) {
      this.$notify({
        duration: 2000,
        message: '通知消息',
        type
      })
    },
    coutrom() {
      this.$notify({
        message: '通知消息',
        type: 'success',
        background: '#551A8B',
        color: '#D33682'
      })
    },
    alertOfIcon() {
      this.$notify({
        message: '您有2条未读消息',
        type: 'primary',
        icon: 'message'
      })
    },
    alertOfIconSuccess() {
      this.$notify({
        message: '提交成功',
        type: 'success',
        icon: 'success'
      })
    }
  }
}
</script>

← toast →