u

code/g3soft-libs/docs/examples/color-picker/basic.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 最基础用法：v-model 双向绑定，值为 #rrggbb
+import { ref } from 'vue'
+import { G3ColorPicker } from '@g3soft/ui'
+
+const color = ref('#165dff')
+</script>
+
+<template>
+  <G3ColorPicker v-model="color" />
+</template>

code/g3soft-libs/docs/examples/color-picker/presets.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// 预设色板：presets 传分组数组自定义；传 false 只留取色面板
+import { ref } from 'vue'
+import { G3ColorPicker, G3Space } from '@g3soft/ui'
+
+const withPresets = ref('#00b42a')
+const withoutPresets = ref('#722ed1')
+
+const customPresets = [
+  { label: '品牌色', colors: ['#165dff', '#00b42a', '#722ed1'] },
+  { label: '中性', colors: ['#000000', '#86909c', '#e5e6eb', '#ffffff'] },
+]
+</script>
+
+<template>
+  <G3Space vertical :size="12" style="display: flex">
+    <G3Space :size="8">
+      <span>内置预设</span>
+      <G3ColorPicker v-model="withPresets" />
+    </G3Space>
+
+    <G3Space :size="8">
+      <span>自定义预设</span>
+      <G3ColorPicker v-model="withoutPresets" :presets="customPresets" />
+    </G3Space>
+
+    <G3Space :size="8">
+      <span>无预设</span>
+      <G3ColorPicker v-model="withoutPresets" :presets="false" />
+    </G3Space>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/color-picker/size.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// 尺寸与禁用态
+import { ref } from 'vue'
+import { G3ColorPicker, G3Space } from '@g3soft/ui'
+
+const color = ref('#fadb14')
+</script>
+
+<template>
+  <G3Space :size="12" align="center">
+    <G3ColorPicker v-model="color" size="small" />
+    <G3ColorPicker v-model="color" size="default" />
+    <G3ColorPicker v-model="color" size="large" />
+    <G3ColorPicker v-model="color" disabled />
+  </G3Space>
+</template>