基于vue-color颜色选择器


开箱即用的颜色选择器

安装
npm install vue-color


html部分
<div>
    <div>color-picker</div>
    <p>Chrome</p>
    <chrome-picker v-model="colors" />
    <p>Sketch</p>
    <sketch-picker v-model="colors" />
    <p>Photoshop</p>
    <photoshop-picker v-model="colors" />
    <p>Material</p>
    <material-picker v-model="colors" />
    <p>Slider</p>
    <slider-picker v-model="colors" />
    <p>Compact</p>
    <compact-picker v-model="colors" />
    <p>Swatches</p>
    <swatches-picker v-model="colors" />
    <p>Twitter</p>
    <twitter-picker v-model="colors" />
    <p>Grayscale</p>
    <grayscale-picker v-model="colors" @input="updateValue" />
</div>


script部分

<script>
import {
  Material,
  Compact,
  Swatches,
  Slider,
  Photoshop,
  Chrome,
  Sketch,
  Twitter,
  Grayscale,
} from "vue-color";
 
export default {
  name: "color-picker",
  components: {
    "material-picker": Material,
    "compact-picker": Compact,
    "swatches-picker": Swatches,
    "slider-picker": Slider,
    "photoshop-picker": Photoshop,
    "chrome-picker": Chrome,
    "sketch-picker": Sketch,
    "twitter-picker": Twitter,
    "grayscale-picker": Grayscale,
  },
  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)
      console.log(this.color)
    }
  }
}
</script>


样式部分
<style lang="less" scoped>
.color {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    div {
        margin: 20px;
        font-size: 18px;
        font-weight: bold;
        border: 1px solid #eee;
        padding: 10px;
    }
}
</style>

49

声明:Web前端小站 - 前端博客 - 王搏的个人博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - 基于vue-color颜色选择器

评论
孙瑞杰生日