nly-adminlte-vue
Version:
nly adminlte3 components
71 lines (55 loc) • 2.7 kB
Markdown
# 1. toast
<!-- TOC -->
- [1. toast](#1-toast)
- [1.1. nly-toast](#11-nly-toast)
- [1.1.1. props](#111-props)
- [1.2. nlyatoast](#12-nlyatoast)
- [1.3. 单包导出](#13-单包导出)
- [1.3.1. 包含组件](#131-包含组件)
- [1.3.2. 导出方法](#132-导出方法)
<!-- /TOC -->
## 1.1. nly-toast
### 1.1.1. props
参数 | 类型 | 默认值 | 描述
-|-|-|-
id | String | | 需要触发的toast id。用于在函数中可以通过id来触发显示toast
title | String | | toasttitle内容
toaster | String | 'nly-toaster-top-right' | toast出现位置。可选nly-toaster-top-right,nly-toaster-top-left,nly-toaster-top-center,nly-toaster-top-full,nly-toaster-bottom-right,nly-toaster-bottom-left,nly-toaster-bottom-center,nly-toaster-bottom-full
visible | Boolean | false | 是否可见,设置true,则可见。请用v-model指令传值
variant | String | | 主题色,可选default,primary,secondary,success,info,danger,warning
is-status | Boolean | false | 设置true,添加aria-live=polite,role=status。默认aria-live=assertive,role=alert
append-toast | Boolean | false | 添加模式,从底部添加
no-auto-hide | Boolean | false | 是否自动关闭,默认自动关闭
auto-hide-delay | Number or String | 5000 | 关闭时间,默认5s
no-close-button | Boolean | false | 右上角关闭按钮
no-fade | Boolean | false | 开启动画,默认有动画
no-hover-pause | Boolean | false | 鼠标悬停暂停自动关闭计时
solid | Boolean | false | 背景色深色
toast-class | String,Object,Array | | 自定义css式样
header-class | String,Object,Array | | header 自定义css式样
body-class | String,Object,Array | | body自定义css式样
href | String | | 跳转链接
to | String,Object | | router-link router
static | Boolean | false | 把toast挂载在当前元素父元素内。默认都是挂载在body
## 1.2. nlyatoast
> 一个创建toast的插件,使用this.$nlyatoast().show()创建,接收nly-toast的所有props,使用方法请查看example的demo
## 1.3. 单包导出
> 如果只需要使用toastPlugin中的组件,请使用单个组件导出
### 1.3.1. 包含组件
> toastPlugin包括以下组件
名称 | 导出路径
-|-
NlyToast | nly-adminlte-vue
NlyToaster | nly-adminlte-vue
NLYAToastPlugin 这是一个插件 | nly-adminlte-vue
### 1.3.2. 导出方法
> 单组件导出
```js
import { NlyToast } from "nly-adminlte-vue";
Vue.component('nly-toast', NlyToast)
```
> 整个toastPlugin出
```js
import { toastPlugin } from "nly-adminlte-vue";
Vue.use(toastPlugin);
```