UNPKG

cloud-ui.vusion

Version:
138 lines (103 loc) 3.12 kB
<!-- 该 README.md 根据 api.yaml 和 docs/*.md 自动生成,为了方便在 GitHub 和 NPM 上查阅。如需修改,请查看源文件 --> # USwitch 开关 - [示例](#示例) - [基本用法](#基本用法) - [Value 绑定](#value-绑定) - [基本状态、只读和禁用](#基本状态-只读和禁用) - [调整尺寸](#调整尺寸) - [API]() - [Props/Attrs](#propsattrs) - [Events](#events) **Form** 开关 ## 示例 ### 基本用法 ``` html <u-switch></u-switch> ``` ### Value 绑定 ``` vue <template> <u-switch v-model="value" width="wide" disabled>{{ value ? 'ON' : 'OFF' }}</u-switch> </template> <script> export default { data() { return { value: true }; }, }; </script> ``` ### 基本状态、只读和禁用 ``` html <u-linear-layout> <u-switch with-text></u-switch> <u-switch readonly></u-switch> <u-switch disabled></u-switch> </u-linear-layout> ``` ### 调整尺寸 ``` vue <template> <u-switch v-model="value" size="small" style="width: 52px;">{{ value ? 'LIST' : 'LIST' }}</u-switch> </template> <script> export default { data() { return { value: false }; }, }; </script> ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | value.sync, v-model | boolean | | `false` | 标识开关状态的值 | | with-text | boolean | | `false` | 是否显示开关`ON`和`OFF`文字 | | readonly | boolean | | `false` | 正常显示,但禁止选择/输入 | | disabled | boolean | | `false` | 置灰显示,且禁止任何交互(焦点、点击、选择、输入等) | ### Events #### @before-toggle 切换开关状态前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | boolean | 开关状态 | | $event.oldValue | boolean | 旧的开关状态 | | $event.preventDefault | Function | 阻止切换流程 | | senderVM | USwitch | 发送事件实例 | #### @input 切换开关状态时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | boolean | 切换后的开关状态 | | senderVM | USwitch | 发送事件实例 | #### @on 开关打开时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | | 无 | | senderVM | USwitch | 发送事件实例 | #### @off 开关关闭时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | | 无 | | senderVM | USwitch | 发送事件实例 | #### @toggle 切换开关状态时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | boolean | 开关状态 | | $event.oldValue | boolean | 旧的开关状态 | | senderVM | USwitch | 发送事件实例 | #### @change 开关状态改变时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | boolean | 开关状态 | | $event.oldValue | boolean | 旧的开关状态 | | senderVM | USwitch | 发送事件实例 |