消息 Message

消息 Message

基本用法

<template lang="html">
<div>
     <div class="demo-hidden">
  <za-panel>
    <za-panel-header title="基本"></za-panel-header>
    <za-panel-body>
      <za-message>primary</za-message>
      <za-message theme='info'>
        <za-icon type='info-round' class='icon' slot='icon'></za-icon>
        <span>info</span>
      </za-message>
      <za-message theme='success' icon='right-round'>
        <span>success</span>
      </za-message>
      <za-message theme='warning'>
        <za-icon type='info-round' class='icon' slot='icon'></za-icon>
        <span>warning</span>
      </za-message>
      <za-message theme='error'>
        <za-icon type='wrong-round' class='icon' slot='icon'></za-icon>
        <span>error</span>
      </za-message>
    </za-panel-body>
  </za-panel>
  <za-panel>
    <za-panel-header title="可操作"></za-panel-header>
    <za-panel-body>
      <za-message theme='warning' hasArrow @click='handleClick'>链接样式的</za-message>
      <!-- 也可以不绑定visible -->
      <za-message theme='error' closable :visible.sync='visible'>链接样式的</za-message>
    </za-panel-body>
  </za-panel>
</div>
</div>
</template>
<script>
export default {
  data() {
    return {
      visible: true
    }
  },
  methods: {
    handleClick(event) {
      console.log(event);
      alert('click this message!');
    }
  },
};
</script>

API

Message Attributes

Message Events