vue3-colorpicker（颜色选择器支持渐变色）

vue3-colorpicker

非常漂亮的一款拾色器,支持多种颜色格式的输入输出,支持渐变色选择。

注意：本文档适用于 v2 以上版本。如果您正在使用旧版本，请参阅 v1 分支。v2 版本为破坏性更新，不再支持 v1 中的某些功能,请谨慎使用。

在线 demo 演示

English

中文

安装

yarn add vue3-colorpicker

或者

npm install vue3-colorpicker

如何使用

https://aesoper101.github.io/vue3-colorpicker/?path=/docs/example-colorpicker–square)

第一步全局注册

import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

createApp(App)
  .use(router)
  .use(Vue3ColorPicker)
  .mount("#app");

或者局部注册

import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

export default defineComponent({
components: { ColorPicker },
});

使用组件

属性说明

Example / ColorPicker - Circle ⋅ Storybook (aesoper101.github.io)

<template>
   <a-form ref="musicFormRef" size="large" :model="musicForm" :style="{width:'600px'}">
        <a-form-item label="音乐封面">
          <a-upload
              list-type="picture"
              draggable
              accept="image/*"
              :onSuccess="coverUpload"
              @before-upload="beforeUpload"
              :action="filesUploadUrl"
              :default-file-list="fileList"
              image-preview/>
        </a-form-item>
        <a-form-item label="主题色">
          <color-picker v-model:pureColor="pureColor" format="hex6" shape="circle" useType="both"
                        v-model:gradientColor="gradientColor"/>
          <br><br>
          <a-input v-model="pureColor" allow-clear placeholder="主题色HEX"></a-input>
        </a-form-item>
    </a-form>
</template>
<script setup>
import {ColorPicker} from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
const pureColor = ref("#71afe5");
const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");

</script>