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从两个基本原则开始-易于使用和简单。 选择颜色应该像移动滑块，单击复选框或按下键一样简单，就像其他基本表单元素的行为一样。
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-pickerAnd in your app:
在您的应用中：
<template>
<color-picker v-model="color"></color-picker>
</template>
<script>
import ColorPicker from '@radial-color-picker/vue-color-picker';
export default {
components: { ColorPicker },
data() {
return {
color: {
hue: 50,
saturation: 100,
luminosity: 50,
alpha: 1
},
};
},
};
</script>
<style>
@import '[email protected]/vue-color-picker/dist/vue-color-picker.min.css';
</style>
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:
您也可以直接使用缩小的来源：
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.js"></script>
<link href="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css" rel="stylesheet">
</head>
<body>
<color-picker v-model="color"></color-picker>
<script>
var ColorPicker = window.VueColorPicker;
var app = new Vue({
el: '#app',
components: {
ColorPicker: ColorPicker
},
data: {
color: {
hue: 50,
saturation: 100,
luminosity: 50,
alpha: 1
}
}
});
</script>
</body>选件 (Options)
<color-picker> component has several props and events, of which only v-model is required. See the example which uses all options.
<color-picker>组件具有多个道具和事件，其中仅需要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:
例：
<template>
<color-picker v-model="color" @select="onColorSelect"></color-picker>
</template>
<script>
import ColorPicker from '@radial-color-picker/vue-color-picker';
export default {
components: { ColorPicker },
data() {
return {
color: {
hue: 50,
saturation: 100,
luminosity: 50,
alpha: 1
}
}
},
methods: {
onColorSelect() {
// do something with this.color
}
}
};
</script>首要问题 (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 <input type="range">.
我们建议为饱和度和亮度添加一个自定义滑块，或使用<input type="range"> 。
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 颜色选择组件
4701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
