vue 颜色选择组件_径向颜色选择器的Vue组件

vue 颜色选择组件

径向拾色器-Vue (Radial Color Picker - Vue)

Vue component of radial color picker.

径向颜色选择器的Vue组件。

Great UX starts with two basic principles - ease of use and simplicity. Selecting a color should be as easy as moving a slider, clicking a checkbox or pressing a key just like other basic form elements behave.

出色的UX从两个基本原则开始-易于使用和简单。 选择颜色应该像移动滑块，单击复选框或按下键一样简单，就像其他基本表单元素的行为一样。

View demo 查看演示 Download Source 下载源

This is a flexible and minimalistic color picker. Developed with mobile devices and keyboard usage in mind. Key features:

这是一个灵活而简约的拾色器。 考虑到移动设备和键盘的使用而开发。 主要特点：

• Small size - 3.8 KB gzipped (JS and CSS combined)

  体积小-压缩了3.8 KB(结合了JS和CSS)

• Supports touch devices

  支持触摸设备

• Optimized animations

  优化的动画

• Ease of use

  使用方便

  • Double click anywhere to move the knob to a color
    双击任意位置以将旋钮移至一种颜色
  • Tab to focus the picker标签以聚焦选择器
  • Up or 向上或Right arrow key to increase hue. Hold 向右箭头键增加色调。 按住Ctrl to go quickerCtrl可以更快
  • Bottom or 底部或Left arrow key decrease hue. Hold 左箭头键降低色调。 按住Ctrl to go quickerCtrl可以更快
  • Enter to select a color and close the picker or to open it输入以选择一种颜色并关闭选择器或将其打开
  • ScrollUp to increase and 向上滚动以增加色调， ScrollDown to decrease hue (Opt-in)向下滚动以减少色调(启用)

用法 (Usage)

带有模块构建系统 (With Module Build System)

Color Picker on npm

npm上的拾色器

npm install @radial-color-picker/vue-color-picker

And in your app:

在您的应用中：

Depending on your build tool of choice (webpack, browserify, rollup) you may have to setup the appropriate loaders or plugins. Checkout the examples folder. There's an example with browserify and with webpack. If you're using vue-cli or poi you don't have to do anything else - these tools come preconfigured and support CSS/SCSS import out of the box.

根据您选择的构建工具(Webpack，browserify，汇总)，您可能必须设置适当的加载程序或插件。 检出examples文件夹。 有一个关于browserify和webpack的例子。 如果您使用的是vue-cli或poi ，则无需执行其他任何操作-这些工具已预先配置，并支持开箱即用CSS / SCSS导入。

UMD版本 (UMD version)

You can also use the minified sources directly:

您也可以直接使用缩小的来源：

Back To Top

回到顶部

选件 (Options)

component has several props and events, of which only v-model is required. See the example which uses all options.

组件具有多个道具和事件，其中仅需要v-model 。 请参阅使用所有选项的示例 。

道具 (Props)

Options	Type	Default/Description
v-model	Object	Object for initializing/changing the color of the picker. Defaults to red: {hue: 0, saturation: 100, luminosity: 50, alpha: 1}.
v-bind:mouse-scroll	Boolean	Use wheel (scroll) event to rotate. Defaults to false.
v-bind:step	Number	Amount of degrees to rotate the picker with keyboard and/or wheel. Defaults to 2 degrees.

选件	类型	默认/说明
v-model	目的	用于初始化/更改选择器颜色的对象。 默认为红色： {hue: 0, saturation: 100, luminosity: 50, alpha: 1} 。
v-bind:mouse-scroll	布尔型	使用滚轮(滚动)事件旋转。 默认为false。
v-bind:step	数	用键盘和/或滚轮旋转拾取器的度数。 默认为2度。

大事记 (Events)

Options	Type	Description
v-on:select	Function	Callback which is triggered when a color is selected.
v-on:input	Function	A function to invoke when color is changed (i.e. on rotation).

选件	类型	描述
v-on:select	功能	选择颜色时触发的回调。
v-on:input	功能	更改颜色时(即旋转时)调用的函数。

Example:

例：

Back To Top

回到顶部

首要问题 (First Asked Questions)

How to select other shades of the solid colors? 如何选择其他色调的纯色？

We suggest to add a custom slider for saturation and luminosity or use .

我们建议为饱和度和亮度添加一个自定义滑块，或使用 。

Why does Google Chrome throw a [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. warning in the console? 为什么Google Chrome浏览器会 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event.抛出 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. 在控制台警告？

touchmove is used with preventDefault() to block scrolling on mobile while rotating the color knob. Even the Web Incubator Community Group acknowledges that in some cases a passive event listener can't be used.

touchmove与preventDefault()一起使用可在旋转颜色旋钮时阻止在移动设备上滚动。 甚至Web Incubator Community Group也承认在某些情况下无法使用被动事件侦听器。

Why is the scroll-to-rotate functionality not turned on by default? 为什么默认情况下未打开滚动到旋转功能？

It's another non-passive event that could potentially introduce jank on scroll. To rotate the color knob, but stay on the same scrolling position the wheel event is blocked with preventDefault(). Thus, if you really want this feature for your users you'll have to explicitly add :mouse-scroll="true".

这是另一种非被动事件，有可能在滚动时引入垃圾。 要旋转颜色旋钮，但保持在相同的滚动位置，则会使用preventDefault()阻止wheel事件。 因此，如果您确实希望为用户提供此功能，则必须显式添加:mouse-scroll="true" 。

翻译自: https://vuejsexamples.com/vue-component-of-radial-color-picker/

vue 颜色选择组件