其他选择器：一款支持vue3 的颜色选择器 | ColorPickerV3基于vue3的颜色选择器支持颜色透明度与rgba、hexhttps://colorpickerv3.wcrane.cn/guide/#%E7%89%B9%E7%82%B9

这个选择器也挺好看的，只是貌似不能外部打开选择器面板

官网：Webpack Apphttps://aesoper101.github.io/vue3-colorpicker/?path=/story/example-introduction--page

官方示例：Webpack Apphttps://aesoper101.github.io/vue3-colorpicker/?path=/story/example-colorpicker--square&args=isWidget:true;format:prgb

优点：

支持外部打开选择器面板
支持渐变色

安装

npm i -S vue3-colorpicker

引入

import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";createApp(App).use(router).use(Vue3ColorPicker).mount("#app");

使用：

<template><div class="main"><el-button @click="isShow = true">打开</el-button>{{ pureColor }}<div v-show="isShow" style="box-shadow: 0 0 10px #00000026"><color-picker:pureColor="pureColor":isWidget="isShow":disableHistory="true"format="hex":zIndex="1"@pureColorChange="handle_pureColorChange"/><div style="text-align: right; padding: 0 16px 10px 16px"><el-button @click="isShow = false">确定</el-button><el-button @click="isShow = false">关闭</el-button></div></div></div>
</template>
<script setup>
import { ref } from "vue";const pureColor = ref("#71afe5");
const isShow = ref(false);//
const handle_pureColorChange = (e) => {console.log(e);pureColor.value = e;
};
</script>
<style lang="scss" scoped>
.main {:deep(.vc-colorpicker) {padding: 0;box-shadow: none;border-radius: 0;}:deep(.vc-color-wrap) {width: 0;}
}
</style>

效果

封装为组件：ColorPickerV3.vue

点击选择器外面可自动关闭选择器

ColorPickerV3.vue:

<template><div class="main" ref="ref_main" v-if="isShow"><div style="box-shadow: 0 0 10px #00000026"><color-picker:pureColor="pureColor":isWidget="isShow":disableHistory="true":pickerType="pickerType"format="hex":zIndex="1":disableAlpha="disableAlpha"@pureColorChange="handle_pureColorChange"/><divstyle="text-align: right;padding: 0 16px 10px 16px;background-color: white;"><el-button type="primary" @click="confirm">确定</el-button><el-button @click="isShowColorPicker(false)">关闭</el-button></div></div></div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';const pureColor = ref('#71afe5');
const isShow = ref(false);
const ref_main = ref();// 点击选择器外面会自动关闭选择器
const isFirstOpen = ref(false);
onMounted(() => {document.addEventListener('click', (e) => {if (!ref_main.value?.contains(e.target) && !isFirstOpen.value) {isShow.value = false;}isFirstOpen.value = false;});
});const props = defineProps({color: { type: String, default: '' },pickerType: { type: String, default: 'fk' }, //fk 、chromedisableAlpha: { type: Boolean, default: true },
});
//  初始化颜色
pureColor.value = props.color;
watch(() => props.color,() => {pureColor.value = props.color;},
);// 设置颜色选择器面板显隐
const isShowColorPicker = (data = false) => {isShow.value = data;isFirstOpen.value = true;
};
// 颜色变化事件
const handle_pureColorChange = (e) => {pureColor.value = e;
};// 定义确定事件
const emit = defineEmits(['confirm']);
// 确定颜色
const confirm = () => {isShow.value = false;emit('confirm', pureColor.value);
};// 暴露方法出去
defineExpose({isShowColorPicker,confirm,
});
</script>
<style lang="scss" scoped>
.main {:deep(.vc-colorpicker) {padding: 0;box-shadow: none;border-radius: 0;}:deep(.vc-color-wrap) {width: 0;}
}
</style>

使用：

<template><div class="main"><el-button @click="open">打开</el-button>{{ selectedColor }}<ColorPickerV3ref="ref_ColorPickerV3"color="orange"@confirm="confirm"pickerType="chrome"></ColorPickerV3></div>
</template>
<script setup>
import { ref } from "vue";import ColorPickerV3 from "./components/ColorPickerV3.vue";const selectedColor = ref();
const ref_ColorPickerV3 = ref();// 打开颜色选择器
const open = () => {ref_ColorPickerV3.value.isShowColorPicker(true);
};// 确定颜色
const confirm = (color) => {console.log("color:", color);selectedColor.value = color;
};
</script>
<style lang="scss" scoped>
.main {
}
</style>

颜色选择器vue3-colorpicker相关推荐

使用颜色选择器Flexi .colorPicker教程/简介
之前做的项目中使用了颜色标签,现在将其使用流程简单的做个整理. 1.搜索颜色选择器插件 2. 下载插件 3. 引入到webRoot下的插件包 4.新增页面引入flexi颜色选择器(引入js文件) 5. ...
gui-gio：颜色选择器的demo4
使用go-gio库示例颜色选择器的详解包含的组件和功能 1.颜色选择器组件的显示和功能 2.颜色单选框组件的显示和功能 3.填充形状.矩形的填充可以伸缩的 package mainimport (& ...
java 选择颜色的控件_JavaFX颜色选择器(ColorPicker)
颜色选择器控件允许用户从可用的颜色范围中选择颜色,或通过指定RGB或HSB组合设置其他颜色.JavaFX ColorPicker控件具有颜色选择器,调色板和自定义颜色对话框窗口. 创建ColorPic ...
【PC工具】大神开源项目-配色调色工具Colorpicker颜色选择器
微信关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 今天看到一个不错的开源的大神的作品,Colorpicker颜色选择器,和大家分享一下. ...
php和android选择器,Android_android 字体颜色选择器(ColorPicker)介绍，primary_text_yellow.xml 复制代码代 - phpStudy...
android 字体颜色选择器(ColorPicker)介绍 primary_text_yellow.xml themes.xml @color/primary_text_yellow相关阅读: 在L ...
UWP 颜色选择器(ColorPicker) 和自定义的Flyout(AdvancedFlyout)
原文:UWP 颜色选择器(ColorPicker) 和自定义的Flyout(AdvancedFlyout) ColorPicker 故事背景项目里面需要一个像Winfrom里面那样的颜色选择器,如 ...
jQuery颜色选择器ColorPicker
ColorPicker基于强大的jQuery,使用方便.配置简单,同时不需要加载额外的CSS文件.可以随心所欲的使用到项目中,兼容各大浏览器.效果如下: 代码如下: <!DOCTYPE HTML ...
练习-原生js写的颜色选择器colorpicker
colorpicker 文章目录 colorpicker 需求分析: 第一种方案的颜色选择器: 点击色块选择颜色进行了改进, 把整个颜色选择器封装到js文件里, 通过appendChild的形式添加 ...
【canvas系列】用canvas实现一个colorpicker（类似PS的颜色选择器）
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
颜色选择器html组件,ColorPicker 颜色选择器
ColorPicker 颜色选择器 ColorPicker 颜色选择器用于颜色选择,支持多种格式. 基础用法有默认值无默认值使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定 ...

颜色选择器vue3-colorpicker

安装

引入

使用：

效果

封装为组件：ColorPickerV3.vue

颜色选择器vue3-colorpicker相关推荐

最新文章

热门文章