vue组件用jquery_基于Farbtastic jQuery拾色器插件的Vue拾色器组件

vue组件用jquery

Vue拾色轮 (Vue Color Picker Wheel)

A Vue color picker component based on the Farbtastic jQuery Color Picker plug-in.

基于Farbtastic jQuery拾色器插件的Vue拾色器组件。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

npm install --save vue-color-picker-wheel

用法 (Usage)

ES6 modules

ES6模块

<template>
  <div>
    <ColorPicker :width="300" :height="300" :disabled="false" startColor="#ff0000" @colorChange="onColorChange"></ColorPicker>
  </div>
</template>

<script>
import ColorPicker from 'vue-color-picker-wheel';

export default {
  name: 'app',
  components: {
    ColorPicker
  },
  methods: {
    onColorChange(color) {
      console.log('Color has changed to: ', color);
    }
  }
};
</script>

CommonJS

普通JS

const ColorPicker = require('vue-color-picker-wheel');

In a script tag, this loads the component using the global Vue instance.

在脚本标签中，这将使用全局Vue实例加载组件。

<script src="https://unpkg.com/vue-color-picker-wheel"></script>

物产 (Properties)

Property	Description	Type	Default	Example
width	The width of the color picker	Number	300	:width="400"
height	The height of the color picker	Number	300	:height="400"
disabled	Whether or not the color picker should be disabled	Boolean	false	:disabled="false"
startColor	The color that is selected when opening the colorpicker	String (hex color code)	none	startColor="#ffffff"

属性	描述	类型	默认	例
宽度	拾色器的宽度	数	300	：width =“ 400”
高度	拾色器的高度	数	300	：height =“ 400”
残障人士	是否应禁用颜色选择器	布尔型	假	：disabled =“ false”
startColor	打开颜色选择器时选择的颜色	字符串(十六进制颜色代码)	没有	startColor =“＃ffffff”

大事记 (Events)

Event	Description	Event parameters
colorChange	Is fired after the selected color has changed	color: String (hex color code)

事件	描述	事件参数
colorChange	所选颜色更改后触发	颜色：字符串(十六进制颜色代码)

翻译自: https://vuejsexamples.com/a-vue-color-picker-component-based-on-the-farbtastic-jquery-color-picker-plug-in/

vue组件用jquery