Honeycomb Design

# 提示 Alert

一种不打断用户操作的轻量级提示方式，用于显示成功、警告和错误等反馈信息。

# 基础用法

成功 警告
警告哦，这是一条警告消息
基础用法

提示有类型：成功，警告

<title>基础用法</title>
<describe>提示有类型：成功，警告</describe>
<template>
    <hc-button type="success" @click="handleClick('success')">成功</hc-button>
    <hc-button type="warning" @click="handleClick('warning')">警告</hc-button>
    <hc-alert :type="type" ref="alert">
      <div>{{type === 'success'?'恭喜你，这是一条成功消息':'警告哦，这是一条警告消息'}}</div>
    </hc-alert>
</template>
<script>

export default {
    data: function () {
      return {
          type:''
      }
    },
    methods:{
        handleClick: function (type) {
            this.type = type
            this.$refs.alert.open()
        },
    }
}

</script>

# 属性及事件

# HcAlert属性

属性 说明 类型 可选值 默认值
type 主题 string success/warning success
delay-off-time 显示时间 number -- 3000
append-to-body 是否插入至 body 元素上 boolean -- true

# HcAlert事件

名称 说明 参数
open refs.open调用打开alert提示 --
close refs.close关闭alert提示 --

# HcAlert插槽

名称 说明
default 提示内容插槽，可自定义提示内容

← 对话框 Dialog →