vue中封装颜色选择器

在 Vue 中封装一个颜色选择器可以通过组件来实现。下面是一个简单的示例：

<template>
  <div>
    <input type="text" v-model="selectedColor" readonly>
    <input type="color" v-model="selectedColor" @change="updateColor">
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedColor: '#000000' // 默认颜色为黑色
    };
  },
  methods: {
    updateColor(event) {
      this.selectedColor = event.target.value;
    }
  }
};
</script>

在上述示例中，我们使用了一个文本输入框和一个颜色选择器输入框。通过双向绑定的方式，将选择的颜色值存储在 `selectedColor` 数据属性中。当颜色选择器的值发生改变时，会触发 `@change` 事件，并调用 `updateColor` 方法来更新选中的颜色值。

你可以在父组件中使用这个自定义的颜色选择器组件，并监听 `selectedColor` 的变化来获取选择的颜色值。

<template>
  <div>
    <color-picker v-model="color"></color-picker>
    <p>选中的颜色：{{ color }}</p>
  </div>
</template>

<script>
import ColorPicker from './ColorPicker.vue';

export default {
  components: {
    ColorPicker
  },
  data() {
    return {
      color: ''
    };
  }
};
</script>

在上述示例中，我们通过 `v-model` 指令将 `color` 数据属性与颜色选择器组件进行双向绑定。这样，当选择的颜色值发生改变时，`color` 的值也会跟着更新。

这只是一个简单的颜色选择器示例，你可以根据自己的需求进行进一步的封装和扩展。