uniapp颜色选择器插件

最新推荐文章于 2025-06-01 09:08:42 发布

原创最新推荐文章于 2025-06-01 09:08:42 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一款实用的颜色选择器组件，详细展示了如何通过简单的导入和使用步骤来集成该组件到项目中，实现颜色的选择与回调功能。适用于需要颜色定制功能的前端开发场景。

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

颜色选择器

地址

https://ext.dcloud.net.cn/plugin?id=403

导入

/* 颜色选择器 */
import pickerColor from '@/components/helang-pickerColor/helang-pickerColor.vue';

使用

<!-- 拾色器 -->
        <picker-color :isShow="showPickerColor" :bottom="0" @callback="getPickerColor" />

  /* 显示获取颜色选择弹窗 */
        showPickerColorPop(type) {
            this.showPickerColor = true;
            this.type = type;
        },
        /* 获取颜色选择回调 */
        getPickerColor(color) {
            /* 隐藏弹窗 */
            this.showPickerColor = false;
            /* 判断颜色值是否有效 */
            if (color) {
                if (this.type === 1) {
                    this.foregroundColor = color; // 设置前景色
                    this.make({ backgroundColor: this.backgroundColor, foregroundColor: this.foregroundColor, text: this.generateText });
                } else {
                    this.backgroundColor = color; // 设置背景色
                    this.make({ backgroundColor: this.backgroundColor, foregroundColor: this.foregroundColor, text: this.generateText });
                }
            }
        },