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

相关推荐
webYin14 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
Gazer_S15 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
小薛博客17 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins
用户516816614584119 小时前
Uncaught ReferenceError: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not defined
前端·vue.js
熊猫片沃子19 小时前
Vue 条件与循环渲染:v-if/v-else 与 v-for 的语法简介
前端·vue.js
拜无忧20 小时前
【教程】vue+vite+ts创建一个最新的高性能后台项目架构
vue.js·typescript·vite
蝶开三月20 小时前
从卡顿到丝滑:3 个实战场景教你搞定代码性能优化
javascript·vue.js·性能优化
知否灬知否21 小时前
VUE3中换行的指示箭头组件(根据屏幕大小进行调节)
前端·javascript·vue.js
学习3人组21 小时前
Vue 与 React 全面功能对比
前端·vue.js·react.js
郑陈皮21 小时前
Vue.js 全栈知识点费曼学习法指南
vue.js