1. toast

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. 导出方法

单组件导出

import { NlyToast } from "nly-adminlte-vue";
Vue.component('nly-toast', NlyToast)

整个toastPlugin出

import { toastPlugin } from "nly-adminlte-vue";
Vue.use(toastPlugin);

组件参数

<nly-toast>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
title
Stringnull标题文字
toaster
String'nly-toaster-top-right'
visible
v-model
Booleanfalse
variant
Stringnull主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark
is-status
Booleanfalse
append-toast
Booleanfalse
no-auto-hide
Booleanfalse
auto-hide-delay
Number or String5000
no-close-button
Booleanfalse
no-fade
Booleanfalse无动画,设置true关闭动画
no-hover-pause
Booleanfalse
solid
Booleanfalse
toast-class
String or Object or Arraynull
header-class
String or Object or Arraynullheader的css类
body-class
String or Object or Arraynullbody的css类
static
Booleanfalse渲染成静态模式,直接添加到对应的元素中或者下面,否则会被portal-vue渲染到html body的尾部
href
Stringnull普通 url 地址
to
String or Objectnull点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转

<nly-toast> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

v-model

PropertyEvent
visiblechange

Slots

Slot NameDescription
tabs-start 在有内容的选项卡前面添加没有内容的选项卡
tabs-end 在有内容的选项卡最后面添加没有内容的选项卡
empty 当没有tab时渲染

Events

EventArgumentsDescription
input
  1. tabIndex - 当前可见tab的index
更新v-model值时触发
activate-tab v0.4.4+
  1. newTabIndex - tab激活之后的index
  2. prevTabIndex - 当前激活的tab的index,如果没有激活,那么默认为-1
  3. nlyEvt - NlyEvent对象. 防止冒泡
准备激活tab之前的index
changed
  1. currentTabs - 当前tabs中tab集合
  2. previousTabs - 未更新之前的tabs的tab集合
当一个tab被移除或者重新排序,或者新增一个tab时触发

<nly-tab>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
active
Booleanfalse设置 true 处于激活状态
tag
String'div'标签
button-id
String如果传入, 则可设置一个按钮来操作对应id的nly-tab可见状态,如果没用传入,会自动生成一个
title
String''标题文字
title-item-class
String or Array or Object选项卡控制器 li标签的 自定义css
title-link-class
String or Array or Object选项卡控制器里包裹的a标签自定义css
title-link-attributes
v0.4.4+
Object选项卡控制器里包裹的a标签 attributes属性
disabled
Booleanfalse禁用,设置true为禁用状态
no-body
Booleanfalse
lazy
Booleanfalse懒加载

Slots

Slot NameDescription
title tab标题插槽

Events

EventArgumentsDescription
click
  1. evt - 原生事件
点击tab时触发

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-toast>NlyToastnly-adminlte-vue
<nly-tab>NlyTabnly-adminlte-vue

例子

import { NlyToast } from 'nly-adminlte-vue'
Vue.component('nly-toast', NlyToast)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
ToastPluginnly-adminlte-vue

例子

import { ToastPlugin } from 'nly-adminlte-vue'
Vue.use(ToastPlugin)