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

相关推荐
怎么吃不饱捏19 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
南玖i2 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
bitbitDown7 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
lumi.10 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰10 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息10 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC10 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi
正义的大古13 小时前
OpenLayers地图交互 -- 章节七:指针交互详解
前端·javascript·vue.js·openlayers
qwy71522925816313 小时前
vue自定义指令
前端·javascript·vue.js
看到我请叫我铁锤13 小时前
vue3使用leaflet的时候高亮显示省市区
前端·javascript·vue.js