帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

轻量级Vue3颜色选择器组件– color-kit

帝国模板之家 2021-06-14 网页特效 评论

组件介绍

Vue3的一个小巧但可配置的颜色选择器组件。有黑暗与光明两款主题,支持预定义的调色板。

使用方法

1.导入颜色选择器。

import { ColorPicker } from 'vue-color-kit'
// stylesheet
import 'vue-color-kit/dist/vue-color-kit.css'

2.注册组件。

export default {
  components: {
    ColorPicker,
  },
}

3.向您的应用程序添加颜色选择器组件。

<template>
  <div :style="{background: color}">
    <ColorPicker
      theme="light"
      :color="color"
      :sucker-hide="false"
      :sucker-canvas="suckerCanvas"
      :sucker-area="suckerArea"
      @changeColor="changeColor"
      @openSucker="openSucker"
    />
  </div>
</template>
export default {
  components: {
    ColorPicker,
  },
  data() {
    return {
      color: '#59c7f9',
      suckerCanvas: null,
      suckerArea: [],
      isSucking: false,
    }
  },
  methods: {
    changeColor(color) {
      const { r, g, b, a } = color.rgba
      this.color = `rgba(${r}, ${g}, ${b}, ${a})`
    },
    openSucker(isOpen) {
      if (isOpen) {
        // ... canvas be created
        // this.suckerCanvas = canvas
        // this.suckerArea = [x1, y1, x2, y2]
      } else {
        // this.suckerCanvas && this.suckerCanvas.remove
      }
    },
  },
}

4. 所有可能的组件选项。

color: {
  type: String,
  default: '#000000',
},
theme: {
  type: String,
  default: 'dark', // or 'light'
},
suckerHide: {
  type: Boolean,
  default: true,
},
suckerCanvas: {
  type: null, // HTMLCanvasElement
  default: null,
},
suckerArea: {
  type: Array,
  default: () => [],
},
colorsDefault: {
  type: Array,
  default: () => [
    '#000000',
    '#FFFFFF',
    '#FF1900',
    '#F47365',
    '#FFB243',
    '#FFE623',
    '#6EFF2A',
    '#1BC7B1',
    '#00BEFF',
    '#2E81FF',
    '#5D61FF',
    '#FF89CF',
    '#FC3CAD',
    '#BF3DCE',
    '#8E00A7',
    'rgba(0,0,0,0)',
  ],
},
colorsHistoryKey: {
  type: String,
  default: 'vue-colorpicker-history',
},
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言