更新记录

1.0.1（2023-10-20） 下载此版本

修复颜色过曝问题、适配全端

平台兼容性

uni-app

其他

拾取图片平均色组件 jlg-bcakColor

使用方式

1. 下载插件ZIP，解压得到 jlg-bcakColor 文件，复制到项目的 components 目录下；

2. 在需要使用的页面配置如下：

<template>
  <view class="content">
    <jlg-bcakColor
      style="position: absolute; top: -99999px; width: 60%; height: 200rpx;"
      ref="bcakColor"
      @update="UpdateColor"
      :urlList="imgurl"
    ></jlg-bcakColor>
    <button @click="colorClick">拾取平均色</button>
  </view>
</template>

<script>
import BcakColor from '@/components/jlg-bcakColor/jlg-bcakColor.vue'; // 引用组件
export default {
  // 注册组件
  components: {
    BcakColor
  },
  data() {
    return {
      imgurl: [], // 图片链接数组
      background: [] // 拾取到的图片平均色数组
    };
  },
  methods: {
    // 执行拾取平均色函数
    colorClick() {
      this.$refs.bcakColor.open();
    },
    // 回调函数，value 值为拾取图片得到的平均色数组
    UpdateColor(value) {
      this.background = value;
    }
  }
};
</script>

3. 推荐使用网络图片地址（H5端存在跨域限制）、本地图片地址，不推荐临时地址；

4. API：

Props

Events

5. 效果请点击查看云上聚乐商城首页轮播图；如有疑问可下载示例项目参考、或联系作者。