消息 Message

基本用法

  1. <za-message>普通</za-message>
  2. <za-message theme="error">自定义主题</za-message>
  3. <za-message icon="wrong-round">自定义图标</za-message>

可操作

  1. <za-message hasArrow @click="handleClick">链接样式的</za-message>
  2. <!-- 也可以不绑定visible -->
  3. <za-message closable :visible.sync="visible">可关闭的</za-message>

Vue Script

  1. <script name="vue">
  2. export default {
  3. data() {
  4. return {
  5. visible: true
  6. }
  7. },
  8. methods: {
  9. handleClick(event) {
  10. console.log(event);
  11. alert('click this message!');
  12. }
  13. },
  14. };
  15. </script>

API

Message Attributes

属性类型默认值可选值/参数说明
themestring'primary''primary', 'success', 'warning', 'error'主题
iconstring设置图标
closablebooleanfalse是否显示关闭按钮
has-arrowbooleanfalse是否显示箭头

Message Events

事件名称说明回调参数
clickclick 时触发的事件event 事件对象

Message 消息 - 图1