LimeUI+1.2.3

主题

LimeColorGrab 图片取色组件 ​

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

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

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

安装方法 ​

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

代码演示 ​

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

快速预览 ​

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

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

插件标签说明 ​

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

Vue2使用说明 ​

main.js中添加以下代码：

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-size26px手柄大小
--l-color-grab-handle-border-width2px手柄描边
--l-color-grab-handle-border-colorwhite手柄描边颜色

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码