建筑参考网站,wordpress 数据导出,帝国网站管理 上一条 下一条 链接 信息id 信息发布时间,河北建筑工程学院招生网官网简介
Vue-color 是一个专为 Vue.js 设计的颜色选择器组件库#xff0c;提供了多种风格的颜色选择器组件。它支持 Vue 2.7 和 Vue 3#xff0c;具有 TypeScript 支持、SSR 兼容性和暗色主题支持。
特性
多种颜色选择器 – 提供 Chrome、Sketch、Photoshop 等多种风格Vue 2.…简介
Vue-color 是一个专为 Vue.js 设计的颜色选择器组件库提供了多种风格的颜色选择器组件。它支持 Vue 2.7 和 Vue 3具有 TypeScript 支持、SSR 兼容性和暗色主题支持。
特性
多种颜色选择器 – 提供 Chrome、Sketch、Photoshop 等多种风格Vue 2.7/3 兼容 – 同时支持 Vue 2.7 和 Vue 3模块化设计 – 按需导入支持 Tree ShakingTypeScript 支持 – 完整的类型定义暗色主题 – 内置暗色模式支持SSR 友好 – 兼容 Nuxt 等 SSR 框架
安装
# 使用 npm
npm install vue-color# 使用 yarn
yarn add vue-color# 使用 pnpm
pnpm add vue-color
快速开始
1. 导入样式
// main.ts
import { createApp } from vue;
import App from ./App.vue;
import vue-color/style.css;createApp(App).mount(#app);
2. 基本使用
templatediv classcolor-picker-demoh3选择的颜色: {{ color }}/h3ChromePicker v-modelcolor //div
/templatescript setup langts
import { ChromePicker } from vue-color;const color defineModel({default: #68CCCA,
});
/script
组件介绍
ChromePicker
Chrome 风格的颜色选择器功能最全面。
templateChromePickerv-modelcolor:disable-alphafalse:disable-fieldsfalse/
/templatescript setup langts
import { ChromePicker } from vue-color;const color defineModel({default: #ff6b6b,
});
/script SketchPicker
Sketch 风格的颜色选择器适合设计师使用。
templateSketchPickerv-modelcolor:preset-colorspresetColors:disable-alphafalse/
/templatescript setup langts
import { SketchPicker } from vue-color;const color defineModel({default: #4ecdc4,
});const presetColors [#D0021B,#F5A623,#F8E71C,#8B572A,#7ED321,#BD10E0,#9013FE,#4A90E2,#50E3C2,#B8E986,
];
/script CompactPicker
紧凑型颜色选择器占用空间小。
templateCompactPicker v-modelcolor :colorscustomColors /
/templatescript setup langts
import { CompactPicker } from vue-color;const color defineModel({default: #ff9ff3,
});const customColors [#f44336,#e91e63,#9c27b0,#673ab7,#3f51b5,#2196f3,#03a9f4,#00bcd4,#009688,#4caf50,
];
/script SwatchesPicker
色板选择器提供预设的颜色组合。
templateSwatchesPicker v-modelcolor :height200 /
/templatescript setup langts
import { SwatchesPicker } from vue-color;const color defineModel({default: #ff5722,
});
/script TwitterPicker
Twitter 风格的颜色选择器。
templateTwitterPicker v-modelcolor /
/templatescript setup langts
import { TwitterPicker } from vue-color;const color defineModel({default: #ff5722,
});
/script 高级用法
暗色主题
templatediv :class{ dark: isDark }button clicktoggleTheme切换主题/buttonChromePicker v-modelcolor //div
/templatescript setup langts
import { ChromePicker } from vue-color;
import { ref } from vue;const color defineModel({default: #68CCCA,
});const isDark ref(false);const toggleTheme () {isDark.value !isDark.value;document.documentElement.classList.toggle(dark, isDark.value);
};
/script SSR 兼容
templateClientOnlyChromePicker //ClientOnly
/templatescript setup langts
import { ClientOnly } from #components;
import { ChromePicker } from vue-color;
/script
Vue 2.7 使用
templateChromePicker v-modelcolor /
/templatescript setup
import { ref } from vue;
import { ChromePicker } from vue-color/vue2;const color ref(#5c8f94);
/script
API 参考
通用 Props
属性类型默认值描述v-modelstring | object–颜色值支持多种格式v-model:tinyColortinycolor–tinycolor 实例disableAlphabooleanfalse是否禁用透明度disableFieldsbooleanfalse是否禁用输入框
颜色格式支持
Vue-color 支持多种颜色格式
// 十六进制
#ff6b6b
#ff6b6bff// RGB
rgb(255, 107, 107)
rgba(255, 107, 107, 0.8)// HSL
hsl(0, 100%, 70%)
hsla(0, 100%, 70%, 0.8)// 对象格式
{ r: 255, g: 107, b: 107, a: 1 }
总结
Vue-color 是一个功能强大且易于使用的颜色选择器库提供了多种风格的选择器组件。通过本文档的介绍您可以快速上手并在项目中使用这些组件。无论是简单的颜色选择还是复杂的颜色管理需求Vue-color 都能满足您的要求。 Vue-colorVue.js 专业颜色选择器组件库 - 支持Vue2/3TypeScript暗色主题 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享
