sun-select-color 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -4
- package/dist/customPalette.png +0 -0
- package/dist/style.css +1 -1
- package/dist/sun-select-color.es.js +1420 -75
- package/dist/sun-select-color.es.js.map +1 -1
- package/package.json +5 -3
- package/public/customPalette.png +0 -0
- package/dist/sun-select-color.umd.js +0 -14
- package/dist/sun-select-color.umd.js.map +0 -1
package/README.md
CHANGED
|
@@ -33,36 +33,49 @@ import { ColorPicker } from 'sun-select-color'
|
|
|
33
33
|
<!-- 方式一：受控，监听 change -->
|
|
34
34
|
<ColorPicker :color="color" @change="onChange" />
|
|
35
35
|
|
|
36
|
-
<!--
|
|
36
|
+
<!-- 方式二：不同颜色集合（支持切换自定义颜色） -->
|
|
37
37
|
<ColorPicker :color="color" type="colorAll" />
|
|
38
38
|
<ColorPicker :color="color" type="colorOne" />
|
|
39
39
|
<ColorPicker :color="color" type="colorTwo" />
|
|
40
|
+
<!-- 在 colorAll/colorOne/colorTwo 模式下，点击面板右侧箭头可在预设颜色和自定义颜色之间切换 -->
|
|
40
41
|
|
|
41
42
|
<!-- 宽高控制（选择框/面板） -->
|
|
42
43
|
<ColorPicker :color="color" width="280px" height="260px" />
|
|
44
|
+
|
|
45
|
+
<!-- 方式三：自定义调色板 -->
|
|
46
|
+
<ColorPicker v-model:color="custom" type="customPalette" width="280px" />
|
|
43
47
|
</template>
|
|
44
48
|
|
|
45
49
|
<script setup>
|
|
46
50
|
import { ref } from 'vue'
|
|
47
51
|
const color = ref('')
|
|
52
|
+
const custom = ref('#1677ff')
|
|
48
53
|
function onChange(v) { color.value = v }
|
|
49
54
|
</script>
|
|
50
55
|
```
|
|
51
56
|
|
|
52
57
|
### 效果预览（不同 type）
|
|
53
58
|
|
|
54
|
-
- colorAll
|
|
59
|
+
- colorAll（默认所有颜色，支持切换自定义颜色）
|
|
55
60
|
|
|
56
61
|
<img alt="colorAll" src="https://unpkg.com/sun-select-color@latest/public/colorAll.png" width="320" />
|
|
57
62
|
|
|
58
|
-
- colorOne
|
|
63
|
+
- colorOne（黑白与常用灰阶，支持切换自定义颜色）
|
|
59
64
|
|
|
60
65
|
<img alt="colorOne" src="https://unpkg.com/sun-select-color@latest/public/colorOne.png" width="320" />
|
|
61
66
|
|
|
62
|
-
- colorTwo
|
|
67
|
+
- colorTwo（常用彩色/高对比色，支持切换自定义颜色）
|
|
63
68
|
|
|
64
69
|
<img alt="colorTwo" src="https://unpkg.com/sun-select-color@latest/public/colorTwo.png" width="320" />
|
|
65
70
|
|
|
71
|
+
- customPalette（自由调色板模式）
|
|
72
|
+
|
|
73
|
+
<img alt="customPalette" src="https://unpkg.com/sun-select-color@latest/public/customPalette.png" width="320" />
|
|
74
|
+
|
|
75
|
+
### 新功能：模式切换
|
|
76
|
+
|
|
77
|
+
在 `colorAll`、`colorOne`、`colorTwo` 三种模式下，颜色面板右侧会显示一个切换箭头。点击箭头可以在预设颜色网格和自定义颜色选择器之间循环切换，方便用户在同一模式下灵活选择颜色。
|
|
78
|
+
|
|
66
79
|
### Props
|
|
67
80
|
|
|
68
81
|
- `color` String 默认 颜色表第一个：当前颜色（受控）
|
|
@@ -70,12 +83,14 @@ function onChange(v) { color.value = v }
|
|
|
70
83
|
- `colorAll`
|
|
71
84
|
- `colorOne`
|
|
72
85
|
- `colorTwo`
|
|
86
|
+
- `customPalette`
|
|
73
87
|
- `width` String 默认 `100%`：选择框宽度
|
|
74
88
|
- `height` String 默认 `auto`：下拉面板高度（可滚动）
|
|
75
89
|
|
|
76
90
|
### Events
|
|
77
91
|
|
|
78
92
|
- `change`(color: string)：当选择颜色时触发，返回 16 进制颜色（如 `#1677ff`）
|
|
93
|
+
- `update:color`(color: string)：与 `v-model:color` 联动的事件
|
|
79
94
|
|
|
80
95
|
|
|
81
96
|
### NPM 发布
|
|
Binary file
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ssc-color .select[data-v-
|
|
1
|
+
.ssc-color .select[data-v-2a24144a]{position:relative;width:100%;min-width:200px;height:32px;display:flex;align-items:center;border:1px solid #e0e0ff;border-radius:6px;padding:0 12px;cursor:pointer;box-shadow:0 1px #00000005;font-size:14px;overflow:visible}.ssc-color .select[data-v-2a24144a]:hover{border-color:#4096ff}.swatch[data-v-2a24144a]{width:16px;height:16px;border-radius:4px;border:1px solid #e0e0e0;margin-right:8px}.label[data-v-2a24144a]{flex:1;color:#333}.arrow[data-v-2a24144a]{width:16px;height:16px}.panel-wrapper[data-v-2a24144a]{position:absolute;left:0;right:0;top:32px;z-index:1;margin-top:6px;overflow:visible}.panel[data-v-2a24144a]{position:relative;background:#fff;border-radius:8px;box-shadow:0 10px 20px #0000001a;padding:12px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent}.panel[data-v-2a24144a]::-webkit-scrollbar{width:3px;height:3px}.panel[data-v-2a24144a]::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:4px}.panel[data-v-2a24144a]::-webkit-scrollbar-track{background:transparent}.grid[data-v-2a24144a]{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.chip[data-v-2a24144a]{width:100%;height:26px;border-radius:6px;border:1px solid #fff;cursor:pointer;display:inline-block}.custom-palette[data-v-2a24144a],.custom-component[data-v-2a24144a]{width:100%}.toggle-arrow-container[data-v-2a24144a]{position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:12px;height:40px;background:#fff;border:1px solid #e0e0ff;border-left:none;border-radius:0 10px 10px 0;box-shadow:2px 0 8px #00000014;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:auto}.toggle-arrow[data-v-2a24144a]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease-in-out;-webkit-user-select:none;user-select:none}.toggle-arrow[data-v-2a24144a]:hover{background-color:#4096ff1a}.toggle-arrow[data-v-2a24144a] svg{width:16px;height:16px;transform:rotate(-90deg);fill:#666;transition:fill .2s ease-in-out}.toggle-arrow[data-v-2a24144a]:hover svg{fill:#4096ff}[data-v-2a24144a] .vc-sketch{width:100%!important;box-shadow:none!important;padding:0!important}
|