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

96 lines
1.1 KiB
Markdown
Raw Normal View History

2021-12-26 21:40:02 +08:00
::: title 横向
:::
::: demo
<template>
2021-12-26 11:13:15 +08:00
<lay-slider v-model="value1" :disabled="false"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-12-17 20:52:45 +08:00
const value1 = ref(50)
return {
2021-12-17 20:52:45 +08:00
value1
}
}
}
</script>
:::
2021-12-26 21:40:02 +08:00
::: title 纵向
:::
::: demo
<template>
2021-12-26 21:40:02 +08:00
<lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-12-17 20:52:45 +08:00
const value2 = ref(10)
return {
2021-12-17 20:52:45 +08:00
value2
}
}
}
</script>
2021-12-16 17:57:59 +08:00
:::
2021-12-26 21:40:02 +08:00
::: title 区间
:::
2021-12-26 11:13:15 +08:00
::: demo
2021-12-26 21:40:02 +08:00
<template>
2021-12-26 11:13:15 +08:00
<lay-slider v-model="value3" :range="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-12-26 21:40:02 +08:00
const value3 = ref([20,50])
2021-12-26 11:13:15 +08:00
return {
2021-12-26 21:40:02 +08:00
value3
2021-12-26 11:13:15 +08:00
}
}
}
</script>
2021-12-26 21:40:02 +08:00
:::
2021-12-26 11:13:15 +08:00
2021-12-28 13:09:08 +08:00
::: title 纵向区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([20,50])
return {
value4
}
}
}
</script>
:::
2021-12-26 21:40:02 +08:00
::: comment
2021-12-26 11:13:15 +08:00
:::