提交 issue修改本页

1. checkbox switch

1.1. nly-switch

开关，支持颜色，大小，形状等设置

1.1.1. props

参数 类型 默认值 描述
size String 大小，可选sm，lg
flat Boolean false 方形开关，默认false，圆角型
off-variant String 关闭状态颜色primary，secondary，success，info:，warning，danger，light，dark，lightblue，navy，olive，lime，fuchsia，maroon，blue，indigo，purple，pink，red，orange，yellow，green，teal，cyan，white，gray，graydark。
on-variant String 打开状态颜色primary，secondary，success，info:，warning，danger，light，dark，lightblue，navy，olive，lime，fuchsia，maroon，blue，indigo，purple，pink，red，orange，yellow，green，teal，cyan，white，gray，graydark。
switch-class String 开关自定义css式样
input-class String input框自定义css
label-class String 文字标签自定义css式样
id String id,默认会以组件_uid生成一个id
tag String div 自定义标签，默认div
disabled Boolean false 禁用
checked Boolean, String, Number 初始选中状态，和v-model一起用会被v-model值覆盖。

1.2. nly-bootstrap-switch

bootstrap-switch

1.2.1. props

参数 类型 默认值 描述
size String 大小，可选xs，sm，lg
off-variant String default 关闭状态颜色primary，secondary，success，info:，warning，danger，light，dark，lightblue，navy，olive，lime，fuchsia，maroon，blue，indigo，purple，pink，red，orange，yellow，green，teal，cyan，white，gray，graydark。
on-variant String default 打开状态颜色primary，secondary，success，info:，warning，danger，light，dark，lightblue，navy，olive，lime，fuchsia，maroon，blue，indigo，purple，pink，red，orange，yellow，green，teal，cyan，white，gray，graydark。
inverse Boolean false 按钮内圆
readonly Boolean false 只读状态
animate Boolean true 开启动画
disabled Boolean false 禁用
checked Boolean, String, Number 初始选中状态，和v-model一起用会被v-model值覆盖。
on-text String ON on按钮文本，初始ON
label-text String label文本
off-text String OFF off按钮文本，初始OFF
width String, Number 自定义宽度，请不要传入单位px，传入width将覆盖size。
switch-class String 自定义css式样，作用于switch上
container-class String 自定义css式样，作用于container上
on-class String 自定义css式样，作用于on上
label-class String 自定义css式样，作用于label上
off-class String 自定义css式样，作用于off上

1.3. 单包导出

如果只需要使用switchPlugin中的组件，请使用单个组件导出

1.3.1. 包含组件

switchPlugin包括以下组件

名称 导出路径
NlySwitch nly-adminlte-vue
NlyBootstrapSwitch nly-adminlte-vue

1.3.2. 导出方法

单组件导出

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

整个switchPlugin出

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

组件参数

查看源码

<nly-switch>

props 参数

props (Click to sort Ascending)类型默认值描述
size
String大小，可选xs，sm，md，lg，xl
flat
Booleanfalse
off-variant
String
on-variant
String
switch-class
String
input-class
String
label-class
String
id
String设置id
tag
String'div'标签
disabled
Booleanfalse禁用，设置true为禁用状态
checked
v-model 		Boolean or String or Numberv-model绑定值， 当前选中的选择框的值，如果是多选，值必须是数组类型

v-model

PropertyEvent
checkedchange

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-switch>NlySwitchnly-adminlte-vue
<nly-tab>NlyTabnly-adminlte-vue

例子

import { NlySwitch } from 'nly-adminlte-vue'
Vue.component('nly-switch', NlySwitch)

导出作为插件

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

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

例子

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