colorspick v1.2.8

Demo - 效果演示

• colorspick（颜色选择器），支持单色、渐变选择
• 优点:
  • 轻量
  • 简洁
• Demo
• 备用地址 - https://yunzhonjun.github.io/colorspick.github.io/
• 参考图

Start - 下载（install）

npm i colorspick 

Top1-Vue局部使用（推荐）

<template 
  <colors-pick v-model="color1" />
   {{ color1 }}  

    <colors-pick cp-type='gradc' v-model="color2" >
   {{ color2 }} 
</template>

<script setup>
import { ref } from 'vue'
// 加载css
import 'colorspick/style.css'
// 导入组件
import { ColorsPick } from 'colorspick'
 
const color1 = ref()
const color2 = ref()
</script> 

Top2-Vue全局使用

1. main.js全局注册组件

src/main.js

// src/main.js
import { createApp } from 'vue'
import App from '@/App.vue'

//导入colorspick与css import 'colorspick/style.css' import ColorsPick from 'colorspick'

const app = createApp(App);

//注册ColorsPick app.use(ColorsPick)

app.mount("#app");

### 2. 使用组件
> src/views/Home.vue

```html
<template 
<!-- src/views/Home.vue -->
  <colors-pick square cp-type='gradc' :cp-swat="true" cp-swat-active="yes" v-model="colors" />
   {{ colors }}  
</template>

<script setup>
import { ref } from 'vue' 
const colors = ref() 
</script> 

属性

solt - 插槽

Event - 事件

反馈

1. 渐变色色板不可用?

答：色板仅支持单色模式(onec)与纯色板模式(swate)

答：色板仅支持单色模式(onec)与纯色板模式(swate)

bug、建议、样式、优化提交

联系QQ 848862551

Git-https://github.com/YunZhonJun/colorspick

End

2023/4/21 10:30 辑