uniapp颜色选择器插件

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

摘要生成于 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 });
                }
            }
        },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值