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-uploadlist-type="picture"draggableaccept="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>

總結

以上是生活随笔為你收集整理的vue3-colorpicker（颜色选择器支持渐变色）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。