2016-12-15 07:15:46 +00:00
|
|
|
|
# element-switch
|
|
|
|
|
> A element-switch component for Vue.js.
|
2016-07-27 06:15:02 +00:00
|
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
```shell
|
2016-12-15 07:15:46 +00:00
|
|
|
|
npm i element-switch -D
|
2016-07-27 06:15:02 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
```javascript
|
|
|
|
|
import Vue from 'vue'
|
2016-12-15 07:15:46 +00:00
|
|
|
|
import ElSwitch from 'element-switch'
|
2016-07-27 06:15:02 +00:00
|
|
|
|
import 'element-theme-default'
|
|
|
|
|
|
|
|
|
|
Vue.use(ElSwitch)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
or
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
import Vue from 'vue'
|
2016-12-15 07:15:46 +00:00
|
|
|
|
import ElSwitch from 'element-switch'
|
2016-07-27 06:15:02 +00:00
|
|
|
|
|
|
|
|
|
Vue.component('el-switch', ElSwitch)
|
|
|
|
|
```
|
|
|
|
|
|
2016-12-15 07:15:46 +00:00
|
|
|
|
### Attributes
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
|
|
|---------- |-------- |---------- |------------- |-------- |
|
|
|
|
|
| disabled | 是否禁用 | boolean | — | false |
|
|
|
|
|
| width | switch 的宽度(像素) | number | — | 58(有文字)/ 46(无文字) |
|
|
|
|
|
| on-icon-class | switch 打开时所显示图标的类名,设置此项会忽略 `on-text` | string | — | — |
|
|
|
|
|
| off-icon-class | switch 关闭时所显示图标的类名,设置此项会忽略 `off-text` | string | — | — |
|
|
|
|
|
| on-text | switch 打开时的文字 | string | — | ON |
|
|
|
|
|
| off-text | switch 关闭时的文字 | string | — | OFF |
|
|
|
|
|
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
|
|
|
|
|
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
|
|
|
|
|
| name | switch 对应的 name 属性 | string | — | — |
|
|
|
|
|
|
|
|
|
|
### Events
|
|
|
|
|
| 事件名称 | 说明 | 回调参数 |
|
|
|
|
|
|---------- |-------- |---------- |
|
|
|
|
|
| change | switch 状态发生变化时的回调函数 | 新状态的布尔值 |
|
2016-07-27 06:15:02 +00:00
|
|
|
|
|
|
|
|
|
## Development
|
|
|
|
|
```shell
|
|
|
|
|
make dev
|
|
|
|
|
|
|
|
|
|
## test
|
|
|
|
|
make test
|
|
|
|
|
|
|
|
|
|
## build
|
|
|
|
|
make build
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
# License
|
|
|
|
|
[MIT](https://opensource.org/licenses/MIT)
|