好用的前端组件-颜色选择器

最新推荐文章于 2025-06-08 09:18:57 发布

123的故事

最新推荐文章于 2025-06-08 09:18:57 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：好用的前端组件文章标签：前端移动开发 vue.js vue

本文链接：https://blog.youkuaiyun.com/qq_41177135/article/details/128283832

好用的前端组件专栏收录该内容

3 篇文章

订阅专栏

本文介绍了适用于Vue3的前端颜色选择器组件，可用于移动端，但需要注意弹框位置的调整，以防止部分内容显示在界面之外。该组件在2022-12-12时存在这一问题，同时提供了官网示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、官网

一款支持vue3 的颜色选择器 | ColorPickerV3

二、效果

ä¸æ¬¾æ¯ævue3 çé¢è²éæ©å¨

三、感受

可以用于移动端，但是得调整弹框的位置，否则可能部分区域在界面外（截至2022-12-12是这样）。
支持VUE3

官网示例：

<template>
  <color-picker
    :hex="color"
    @change="change"
    :standard-color="bColor"
    @close="close"
    @finish="finish"
  ></color-picker>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  name: ''
})
</script>
<script lang="ts" setup>
const color = ref("")
const colorValue = ref({})

//  颜色值改变
const change = (e) => {
  // console.log("e", e)
  colorValue.value = e
}

// 颜色面板关闭
const close = (e) => {
  console.log("关闭了", e)
}

const finish = (e) => {
  console.log("点击完成", e)
}



const bColor = [
  '#c21401',
  '#ff1e02',
  '#ffc12a',
  '#ffff3a',
  '#90cf5b',
  '#00af57',
  '#00afee',
  '#0071be',
  '#00215f',
  '#72349d',
]
</script>
<style lang="less" scoped>
</style>