vue vxe-color-picker 颜色选择器,启用取色管功能,选取页面内任意颜色

vue vxe-color-picker 颜色选择器,启用取色管功能,选取页面内任意颜色

官网:https://vxeui.com

github:https://github.com/x-extends/vxe-pc-ui

gitee:https://gitee.com/x-extends/vxe-pc-ui

参数 show-eye-dropper 用于启用取色管功能,需要注意的是指支持谷歌浏览器。

html 复制代码
<template>
  <div>
    <vxe-color-picker v-model="val1" show-eye-dropper clearable></vxe-color-picker>
    <vxe-color-picker v-model="val2" :colors="colorList" show-eye-dropper clearable></vxe-color-picker>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const val1 = ref('')
const val2 = ref('#FF00FF')

const colorList = ref([
  '#DC143C', '#FF1493', '#FF00FF', '#9932CC', '#6A5ACD',
  '#0000FF', '#00008B', '#778899', '#1E90FF', '#00BFFF',
  '#5F9EA0', '#00FFFF', '#008080', '#7FFFAA', '#3CB371',
  '#8FBC8F', '#008000', '#7CFC00', '#556B2F', '#FFFFE0',
  '#FFFF00', '#808000', '#EEE8AA', '#FFD700', '#FFA500',
  '#FF4500', '#FA8072', '#FF0000', '#800000', '#C0C0C0'
])
</script>

https://gitee.com/x-extends/vxe-pc-ui

相关推荐
midsummer_woo5 小时前
基于springboot的在线教育系统(源码+论文)
vue.js·spring boot·mysql
香菜狗8 小时前
vue3响应式数据(ref,reactive)详解
前端·javascript·vue.js
拾光拾趣录8 小时前
为什么我们要亲手“捏”一个 Vue 项目?
前端·vue.js·性能优化
顽疲9 小时前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero9 小时前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
YGY Webgis糕手之路10 小时前
OpenLayers 快速入门(六)Interaction 对象
前端·vue.js·经验分享·笔记·web
前端开发爱好者11 小时前
尤雨溪力荐 Vue-Plugins-Collection!Vue 生态 最强插件 导航!
前端·javascript·vue.js
_未完待续11 小时前
框架实战指南-透明元素
前端·vue.js
he___H12 小时前
VUE的学习
前端·vue.js·学习
速易达网络12 小时前
PHP 与 Vue.js 结合的前后端分离架构
vue.js·php