更新记录

1.0.0(2023-08-01)

首次发布(如有问题多多反馈)


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.3 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

拾取图片平均色组件 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>
  1. 推荐使用网络图片地址(H5端存在跨域限制)、本地图片地址,不推荐临时地址;

  2. API:

Props

属性名 类型 默认值 说明
urlList Array - 图片链接数组
saturation Number 4 平均色饱和度
brightness Number 8 平均色亮度

Events

事件名 类型 回调参数 说明
update function 平均色数组 回调函数
  1. 效果请点击查看云上聚乐商城首页轮播图;如有疑问可下载示例项目参考、或联系作者。

隐私、权限声明

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

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

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问