sun-select-color 0.1.5 → 0.1.7
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 +10 -0
- package/dist/customPalette.png +0 -0
- package/dist/style.css +1 -1
- package/dist/sun-select-color.es.js +1386 -69
- package/dist/sun-select-color.es.js.map +1 -1
- package/dist/sun-select-color.umd.js +4 -2
- package/dist/sun-select-color.umd.js.map +1 -1
- package/package.json +6 -2
- package/public/customPalette.png +0 -0
package/README.md
CHANGED
|
@@ -40,11 +40,15 @@ import { ColorPicker } from 'sun-select-color'
|
|
|
40
40
|
|
|
41
41
|
<!-- 宽高控制（选择框/面板） -->
|
|
42
42
|
<ColorPicker :color="color" width="280px" height="260px" />
|
|
43
|
+
|
|
44
|
+
<!-- 方式三：自定义调色板 -->
|
|
45
|
+
<ColorPicker v-model:color="custom" type="customPalette" width="280px" />
|
|
43
46
|
</template>
|
|
44
47
|
|
|
45
48
|
<script setup>
|
|
46
49
|
import { ref } from 'vue'
|
|
47
50
|
const color = ref('')
|
|
51
|
+
const custom = ref('#1677ff')
|
|
48
52
|
function onChange(v) { color.value = v }
|
|
49
53
|
</script>
|
|
50
54
|
```
|
|
@@ -63,6 +67,10 @@ function onChange(v) { color.value = v }
|
|
|
63
67
|
|
|
64
68
|
<img alt="colorTwo" src="https://unpkg.com/sun-select-color@latest/public/colorTwo.png" width="320" />
|
|
65
69
|
|
|
70
|
+
- customPalette（自由调色板模式）
|
|
71
|
+
|
|
72
|
+
<img alt="customPalette" src="https://unpkg.com/sun-select-color@latest/public/customPalette.png" width="320" />
|
|
73
|
+
|
|
66
74
|
### Props
|
|
67
75
|
|
|
68
76
|
- `color` String 默认 颜色表第一个：当前颜色（受控）
|
|
@@ -70,12 +78,14 @@ function onChange(v) { color.value = v }
|
|
|
70
78
|
- `colorAll`
|
|
71
79
|
- `colorOne`
|
|
72
80
|
- `colorTwo`
|
|
81
|
+
- `customPalette`
|
|
73
82
|
- `width` String 默认 `100%`：选择框宽度
|
|
74
83
|
- `height` String 默认 `auto`：下拉面板高度（可滚动）
|
|
75
84
|
|
|
76
85
|
### Events
|
|
77
86
|
|
|
78
87
|
- `change`(color: string)：当选择颜色时触发，返回 16 进制颜色（如 `#1677ff`）
|
|
88
|
+
- `update:color`(color: string)：与 `v-model:color` 联动的事件
|
|
79
89
|
|
|
80
90
|
|
|
81
91
|
### NPM 发布
|
|
Binary file
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ssc-color .select[data-v-
|
|
1
|
+
.ssc-color .select[data-v-6b4fe802]{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}.ssc-color .select[data-v-6b4fe802]:hover{border-color:#4096ff}.swatch[data-v-6b4fe802]{width:16px;height:16px;border-radius:4px;border:1px solid #e0e0e0;margin-right:8px}.label[data-v-6b4fe802]{flex:1;color:#333}.arrow[data-v-6b4fe802]{width:16px;height:16px}.panel[data-v-6b4fe802]{position:absolute;left:0;right:0;top:32px;z-index:1;margin-top:6px;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-6b4fe802]::-webkit-scrollbar{width:3px;height:3px}.panel[data-v-6b4fe802]::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:4px}.panel[data-v-6b4fe802]::-webkit-scrollbar-track{background:transparent}.grid[data-v-6b4fe802]{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.chip[data-v-6b4fe802]{width:100%;height:26px;border-radius:6px;border:1px solid #fff;cursor:pointer;display:inline-block}.custom-palette[data-v-6b4fe802],.custom-component[data-v-6b4fe802]{width:100%}[data-v-6b4fe802] .vc-sketch{width:100%!important;box-shadow:none!important;padding:0!important}
|