更新记录

0.0.1（2025-11-11）

  • init

平台兼容性

uni-app(4.83)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ - √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ √ - - - - - - - - -

uni-app x(4.81)

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ √ √ √ √

其他

多语言 暗黑模式 宽屏模式 蒸汽模式
× × × √

lime-color-grab 图片取色组件

基于canvas获取图片指定坐标的颜色组件

插件依赖：lime-shared📚 组件详细文档请访问以下站点：

📚 组件详细文档请访问以下站点：

安装方法

  1. 在uni-app插件市场中搜索并导入lime-color-grab
  2. 导入后可能需要重新编译项目
  3. 在页面中使用l-color-grab组件

代码演示

<l-color-grab src="'/static/logo.png'" @change="onChange"></l-color-grab>
const onChange = (color: string) => {
    console.log('color', color)
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-color-grab/components/lime-color-grab -->
<lime-color-grab />

插件标签说明

标签名 说明
l-color-grab 组件标签
lime-color-grab 演示标签

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

属性名 说明 类型 默认值
src 图片地址 string -

Events 事件

事件名 说明 回调参数
change 点击标签时触发 color: string

主题定制

组件提供了以下CSS变量，可用于自定义样式：

变量名称 默认值 描述
--l-color-grab-handle-size 26px 手柄大小
--l-color-grab-handle-border-width 2px 手柄描边
--l-color-grab-handle-border-color white 手柄描边颜色

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助 微信赞助

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。