前端怎么在页面中使用颜色选择器

最新推荐文章于 2024-09-13 21:41:50 发布

史努比的大头

最新推荐文章于 2024-09-13 21:41:50 发布

阅读量447

点赞数 15

文章标签：前端

本文链接：https://blog.csdn.net/qq_45937484/article/details/141848679

版权

这里借助Vue.js 提供的颜色选择器组件库vue-color

首先安装这个库

npm install vue-color

具体使用方法如下

<template>
  <div class="color">
    <div>
      1.material
      <material-picker v-model="colors" />
    </div>
    <div>
      2.compact
      <compact-picker v-model="colors" />
    </div>
    <div>
      3.swatches
      <swatches-picker v-model="colors" />
    </div>
    <div>
      4.slider
      <slider-picker v-model="colors" />
    </div>
    <div>
      5.sketch
      <sketch-picker v-model="colors" />
    </div>
    <div>
      6.chrome
      <chrome-picker v-model="colors" />
    </div>
    <div>
      7.photoshop
      <photoshop-picker v-model="colors" />
    </div>
  </div>
</template>

<script>
import {
  Material,
  Compact,
  Swatches,
  Slider,
  Photoshop,
  Chrome,
  Sketch,
} from "vue-color";
export default {
  name: "TestComponent",
  components: {
    "material-picker": Material,
    "compact-picker": Compact,
    "swatches-picker": Swatches,
    "slider-picker": Slider,
    "photoshop-picker": Photoshop,
    "chrome-picker": Chrome,
    "sketch-picker": Sketch,
  },
  data() {
    return {
      colors: {
        color: "",
        hex: "#194d33",
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1,
      },
    };
  },
  methods: {
    updateValue(value) {
      console.log(value);
    },
  },
};
</script>