docs: 编写 color-picker 文档

This commit is contained in:
就眠儀式 2022-02-19 16:39:59 +08:00
parent d64fdd71e6
commit ffecfa43a4
2 changed files with 37 additions and 5 deletions

View File

@ -7,13 +7,46 @@
::: demo ::: demo
<template> <template>
<lay-color-picker></lay-color-picker> <lay-color-picker v-model="color"></lay-color-picker>
</template> </template>
<script> <script>
import { ref } from "vue";
export default { export default {
setup() { setup() {
const color = ref("#009688");
return { return {
color
}
}
}
</script>
:::
::: title 预设颜色
:::
::: demo
<template>
<lay-color-picker v-model="color" :preset="preset"></lay-color-picker>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const color = ref("#009688");
const preset = ref(["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"])
return {
color,
preset
} }
} }
} }
@ -28,9 +61,8 @@ export default {
| | | | | | | |
| ---------- | -------- | --- | | ---------- | -------- | --- |
| v-model | 默认值 | -- | | v-model | 选中色 | -- |
| page | 开启分页 | -- | | preset | 预设颜色 | -- |
| showSearch | 启用搜索 | -- |
::: :::

View File

@ -109,7 +109,7 @@ export interface LayColorPicker {
} }
const props = withDefaults(defineProps<LayColorPicker>(), { const props = withDefaults(defineProps<LayColorPicker>(), {
modelValue: { r: 217, g: 128, b: 95, a: 1 }, modelValue: { r: 255, g: 255, b: 255, a: 1 },
preset: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"], preset: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"],
}); });