uni-app 美化的颜色选择器

在uni-app中实现一个美化的颜色选择器，可以通过结合<picker>组件和自定义样式来完成。以下是一个简单的示例代码，展示了如何创建一个美化后的颜色选择器。

1. 页面布局（pages/colorPicker/colorPicker.vue）

<template>
  <view class="container">
    <view class="color-display" :style="{ backgroundColor: selectedColor }">
      <text class="color-text">{{ selectedColor }}</text>
    </view>
    <picker mode="selector" :range="colors" @change="onColorChange">
      <view class="picker-view">
        <view v-for="(color, index) in colors" :key="index" class="color-item" :style="{ backgroundColor: color }"></view>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedColor: '#FF0000', // 默认颜色
      colors: [
        '#FF0000', '#FFA500', '#FFFF00', '#00FF00', '#00FFFF',
        '#0000FF', '#4B0082', '#8B0000', '#FF69B4', '#FFD700'
      ]
    };
  },
  methods: {
    onColorChange(e) {
      const index = e.detail.value;
      this.selectedColor = this.colors[index];
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.color-display {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.color-text {
  color: #fff;
}

.picker-view {
  display: flex;
  flex-wrap: wrap;
}

.color-item {
  width: 30px;
  height: 30px;
  margin: 5px;
  border-radius: 50%;
}
</style>

2. 说明

• <template> 部分定义了颜色显示区和颜色选择器。颜色显示区使用selectedColor绑定背景色，并显示当前选中的颜色值。颜色选择器使用<picker>组件，并绑定了一个颜色数组colors。
• <script> 部分定义了组件的数据和方法。selectedColor存储当前选中的颜色，colors存储可选的颜色数组。onColorChange方法用于处理颜色选择器变化事件，更新selectedColor。
• <style> 部分定义了布局和样式，使颜色显示区和颜色选择器看起来更加美观。

这种方式虽然使用了<picker>组件，但通过自定义样式和布局，使得颜色选择器看起来更加美观和直观。如果需要更复杂的功能，比如HSV颜色选择器，可以考虑使用第三方库或者自定义实现。