uniapp 颜色选择器如何使用

在uniapp中如何使用颜色选择器组件？有没有现成的插件推荐，或者需要自己实现？希望能提供一个简单的示例代码，说明如何绑定选择的颜色值以及触发选择事件。

2 回复

在uniapp中使用颜色选择器，推荐使用第三方插件如uni-color-picker。安装后，在页面引入组件，通过v-model绑定颜色值即可。示例代码：

<template>
  <color-picker v-model="color" />
</template>
<script>
export default {
  data() {
    return { color: '#ff0000' }
  }
}
</script>

在 UniApp 中，可以使用第三方组件库（如 uView UI、ColorUI）或原生 input 的 type="color" 实现颜色选择器。以下是具体方法：

1. 使用 uView UI 组件库（推荐）

  • 安装 uView UI：
    在项目根目录执行：

    npm install uview-ui

    在 main.js 中引入：

    import uView from 'uview-ui';
Vue.use(uView);

  • 页面中使用颜色选择器：

    <template>
  <view>
    <u-color-picker v-model="color" @confirm="onConfirm"></u-color-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      color: '#ff0000' // 默认颜色
    };
  },
  methods: {
    onConfirm(color) {
      console.log('选中颜色：', color);
      // 处理颜色值
    }
  }
};
</script>

2. 使用原生 input（仅 H5 端支持）

<template>
  <input type="color" v-model="color" @change="onColorChange">
</template>

<script>
export default {
  data() {
    return {
      color: '#ff0000'
    };
  },
  methods: {
    onColorChange(e) {
      console.log('颜色值：', e.target.value);
    }
  }
};
</script>

注意：type="color" 仅在 H5 环境生效，小程序端需用第三方组件。

3. 使用 ColorUI 或其他库

类似 uView，安装对应库后调用颜色选择器组件，具体参考其文档。

注意事项：

  • 第三方组件需配置 easycom 规则（uView 自动配置）。
  • 小程序端需在 pages.json 中注册组件（按库文档操作）。

通过以上方法即可在 UniApp 中实现颜色选择功能。

回到顶部