color-gradient-picker-vue3
Advanced tools
color-gradient-picker-vue3 - npm Package Compare versions
Comparing version 2.0.1 to 2.0.2
| { | ||
| "name": "color-gradient-picker-vue3", | ||
| "version": "2.0.1", | ||
| "version": "2.0.2", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "author": "June", |
126
README.md
@@ -7,3 +7,3 @@ <!-- | ||
| * @LastEditors: June | ||
| * @LastEditTime: 2023-05-10 16:13:15 | ||
| * @LastEditTime: 2023-10-04 04:32:27 | ||
| --> | ||
@@ -22,43 +22,101 @@ | ||
| #### Demo | ||
| #### Attributes | ||
| ````html | ||
| | | introduct | Default | | ||
| | ------------ | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | isGradient | isGradient(是否渐变) | false | | ||
| | color | solid color(纯色 color) | `{ red: 255, green: 0, blue: 0, alpha: 1 }` | | ||
| | gradient | gradient color(渐变颜色) | `'{"type":"linear","degree":0,"points":[{"id":0,"left":0,"red":0,"green":0,"blue":0,"alpha":1},{"id":1,"left":100,"red":255,"green":0,"blue":0,"alpha":1}]}'` ｜ | | ||
| | cancelText | cancel button text(取消文本) | 'cancel' | | ||
| | cancelColor | cancel button font-color(取消文本颜色) | '#333' | | ||
| | cancelBg | cancel button background color (取消背景颜色) | '#fff' | | ||
| | confirmText | confirm button text(取消文本) | 'confirm' | | ||
| | confirmColor | confirm button font-color(确认文本颜色) | '#333' | | ||
| | confirmBg | confirm button background color (确认背景颜色) | '#fff' | | ||
| | change | Event | | | ||
| #### Example | ||
| ```html | ||
| <template> | ||
| <!-- 纯色 --> | ||
| <div id="app" :style="{ display: 'flex', textAlign: 'center' }"> | ||
| <div> | ||
| <ColorPicker | ||
| :color="color" | ||
| cancel-text="cancel" | ||
| cancel-color="red" | ||
| @on-change="onChange" | ||
| @on-cancel="onCancel" | ||
| /> | ||
| <ColorPicker | ||
| :color="color" | ||
| cancel-text="cancel" | ||
| cancel-color="red" | ||
| @change="onChange" | ||
| /> | ||
| </div> | ||
| <!-- 渐变 --> | ||
| <div> | ||
| <ColorPicker | ||
| :is-gradient="true" | ||
| @on-change="onChange" | ||
| @on-cancel="onCancel" | ||
| /> | ||
| <ColorPicker :is-gradient="true" @change="onChange" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import { ref } from 'vue'; | ||
| import type { Ref } from 'vue'; | ||
| import ColorPicker from 'color-gradient-picker-vue3'; | ||
| import 'color-gradient-picker-vue3/dist/style.css'; | ||
| import { ref } from 'vue'; | ||
| import ColorPicker from 'color-gradient-picker-vue3'; | ||
| import 'color-gradient-picker-vue3/dist/style.css'; | ||
| const color = ref({ | ||
| red: 255, | ||
| green: 0, | ||
| blue: 0, | ||
| alpha: 1, | ||
| }); | ||
| const color = ref({ | ||
| red: 255, | ||
| green: 0, | ||
| blue: 0, | ||
| alpha: 1, | ||
| }); | ||
| const onCancel = () => { | ||
| console.log('取消'); | ||
| const onChange = (color) => { | ||
| // The results of solid and gradient are different | ||
| // color like: | ||
| // { | ||
| // "style": "rgba(142, 59, 59, 1)", | ||
| // "color": { | ||
| // "red": 142, | ||
| // "green": 59, | ||
| // "blue": 59, | ||
| // "hue": 0, | ||
| // "alpha": 1 | ||
| // } | ||
| // } | ||
| // gradient like: | ||
| // { | ||
| // "style": "linear-gradient(0deg,rgba(0, 0, 0, 1) 0%,rgba(0, 255, 63, 1) 37.096774193548384%,rgba(255, 0, 0, 1) 100%)", | ||
| // "gradient": { | ||
| // "type": "linear", | ||
| // "degree": 0, | ||
| // "points": [ | ||
| // { | ||
| // "id": "cf3647eb-6b59-4a34-90dc-bfd7f5383582", | ||
| // "left": 0, | ||
| // "red": 0, | ||
| // "green": 0, | ||
| // "blue": 0, | ||
| // "alpha": 1 | ||
| // }, | ||
| // { | ||
| // "id": "bf44fa8b-d7ea-4f8e-a154-1be6aa88c3bc", | ||
| // "left": 100, | ||
| // "red": 255, | ||
| // "green": 0, | ||
| // "blue": 0, | ||
| // "alpha": 1 | ||
| // }, | ||
| // { | ||
| // "id": "2974991d-1dac-40e6-a5c7-fc3a0761189b", | ||
| // "red": 0, | ||
| // "green": 255, | ||
| // "blue": 63, | ||
| // "alpha": 1, | ||
| // "left": 37.096774193548384 | ||
| // } | ||
| // ] | ||
| // } | ||
| // } | ||
| console.log(color); | ||
| }; | ||
| </script> | ||
| ``` | ||
| #### 启动 lib | ||
@@ -78,8 +136,2 @@ | ||
| pnpm dev | ||
| ```` | ||
| #### Todo | ||
| - [x] 支持 monorepo | ||
| - [ ] fix to typescript | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.23%
130889
- Number of lines in readme file
- increased by62.65%
135
No dependency changes