mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
103 lines
3.5 KiB
Markdown
103 lines
3.5 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Switch 开关
|
||
|
||
## 概述
|
||
需要表示开关状态/两种状态之间的切换时使用。
|
||
|
||
## 代码示例
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/switch/1.html">
|
||
<template v-slot:demo>
|
||
<Wb-switch v-model="value"/>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>在组件中绑定v-model控制开关状态</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="文字和图标" template="ui/templates/switch/2.html">
|
||
<template v-slot:demo>
|
||
<Wb-switch>
|
||
<span slot="open">开</span>
|
||
<span slot="close">关</span>
|
||
</Wb-switch>
|
||
<Wb-switch>
|
||
<Icon slot="open" type="md-checkmark"></Icon>
|
||
<Icon slot="close" type="md-close"></Icon>
|
||
</Wb-switch>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>自定义内容，slot为open的文字或者图标在on为true时显示，反之依然。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="切换前询问" template="ui/templates/switch/3.html">
|
||
<template v-slot:demo>
|
||
<Wb-switch :confirm="confirm"></Wb-switch>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>点击切换时，弹出confirm询问，点击确定之后才发生切换。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="只读和禁用" template="ui/templates/switch/4.html">
|
||
<template v-slot:demo>
|
||
<Wb-switch readonly></Wb-switch>
|
||
<Wb-switch disabled></Wb-switch>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>设置readonly为只读，设置disabled为禁用</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</row>
|
||
</ClientOnly>
|
||
|
||
<style lang="scss">
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value: false
|
||
}
|
||
},
|
||
methods: {
|
||
confirm() {
|
||
return new Promise((resolve, reject)=>{
|
||
this.$Message({
|
||
title: '警告', // 可以传入文本和domString
|
||
template: '是否切换状态？', // 可以传入文本和domString
|
||
}).then(function (index) {
|
||
if (index == 0) {
|
||
resolve()
|
||
}
|
||
})
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## API
|
||
|
||
### WbSwitch Props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| value | 日期的值，可以使用v-model实现数据的双向绑定 | String | null |
|
||
| disabled | 是否禁用 | Boolean | false |
|
||
| readonly | 是否只读 | Boolean | false |
|
||
| confirm | 状态切换前的询问，函数返回promise，当promise的状态为resolve时执行切换 | Function | null |
|
||
|
||
|
||
### WbSwitch Events
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:--------------|:--------------------------|:--------|
|
||
| on-change | 切换后触发 | (value) => void |
|