layui/example/docs/zh-CN/components/switch.md

141 lines
1.9 KiB
Markdown
Raw Normal View History

::: anchor
:::
2021-10-26 01:13:23 +08:00
::: title 基础使用
2021-10-24 21:31:42 +08:00
:::
::: demo
<template>
<lay-switch v-model="active1"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-11-18 13:13:04 +08:00
const active1 = ref(false);
return {
active1
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 事件回调
2021-10-24 21:31:42 +08:00
:::
::: demo
<template>
<lay-switch v-model="active2" @change="change"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active2 = ref(true);
const change = function( val ) {
console.log("当前值:" + val)
}
return {
active2,
change
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 禁用状态
2021-10-24 21:31:42 +08:00
:::
::: demo
<template>
<lay-switch v-model="active3" :disabled="disabled"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active3 = ref(true);
const disabled = ref(true)
return {
active3
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 修改描述
2021-10-24 21:31:42 +08:00
:::
::: demo
<template>
<lay-switch v-model="active4" active-text="白天" inactive-text="夜间"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active4 = ref(true)
return {
active4
}
}
}
</script>
:::
2022-01-10 01:17:03 +08:00
::: title Switch 属性
2021-10-24 21:31:42 +08:00
:::
2021-11-07 15:55:08 +08:00
::: table
| 属性 | 描述 | 可选值 |
| ------------- | -------------- | -------------- |
| name | 原生 name 属性 | -- |
| v-model | 是否启用 | `true` `false` |
| disabled | 禁用 | `true` `false` |
| active-text | 启用描述 | `启动` |
| inactive-text | 禁用描述 | `禁用` |
2021-11-07 15:55:08 +08:00
:::
2022-01-10 01:17:03 +08:00
::: title Switch 事件
:::
2021-11-07 15:55:08 +08:00
::: table
| 属性 | 描述 | 可选值 |
| ------ | -------- | ---------------- |
| change | 切换事件 | current : 当前值 |
2021-11-07 15:55:08 +08:00
2021-11-07 15:56:24 +08:00
:::
2021-12-16 17:57:59 +08:00
::: comment
:::