Scws Vue3 Components

一个基于 Vue3 + ElementPlus 的组件库，提供了一系列常用的 UI 组件。

组件列表

Button 按钮

用于触发操作或事件。

<template>
	<scws-button type="primary">主要按钮</scws-button>
</template>

Select 选择器

用于从一组选项中选择一个或多个选项。

<template>
	<scws-select v-model="value" :options="options" />
</template>

Input 输入框

用于接收用户输入的文本。

<template>
	<scws-input v-model="value" placeholder="请输入" />
</template>

Switch 开关

用于切换两个互斥选项。

<template>
	<scws-switch v-model="value" />
</template>

Message 消息提示

用于显示操作反馈。

<template>
	<scws-button @click="showMessage">显示消息</scws-button>
</template>

<script setup>
	import { Message } from "scws-vue3-cmps";

	const showMessage = () => {
		Message.success("操作成功");
	};
</script>

ColorPicker 颜色选择器

用于选择颜色。

<template>
	<scws-color-picker v-model="color" />
</template>

FilePreview 文件预览

用于预览各种类型的文件。

<template>
	<scws-file-preview :file-url="fileUrl" :file-name="fileName" />
</template>

安装

npm install scws-vue3-cmps

使用

import { createApp } from "vue";
import ScwsVue3Cmps from "scws-vue3-cmps";
import "scws-vue3-cmps/style.css";

const app = createApp(App);
app.use(ScwsVue3Cmps);

主题定制

组件库支持通过 CSS 变量进行主题定制。

:root {
	--scws-primary-color: #409eff;
	--scws-success-color: #67c23a;
	--scws-warning-color: #e6a23c;
	--scws-danger-color: #f56c6c;
	--scws-info-color: #909399;
}

使用 setThemeColor 方法设置主题色

本组件库导出了便捷的主题 API，用于在运行时设置或恢复主题色：

• setThemeColor(color: string): boolean — 传入一个 CSS 颜色字符串（例如 #409eff 或 rgb(...)），返回是否成功应用。
• getThemeColor(): string — 获取当前主题色（--scws-color-primary）。
• resetThemeColor(): boolean — 恢复默认主题色。

示例：在应用入口初始化主题色（main.ts）

import { createApp } from "vue";
import App from "./App.vue";
import ScwsVue3Cmps, { setThemeColor } from "scws-vue3-cmps";
import "scws-vue3-cmps/style.css";

const app = createApp(App);
app.use(ScwsVue3Cmps);

// 在浏览器环境调用，初始化主题色
setThemeColor("#ff7a00");

app.mount("#app");

示例：在组件中响应用户选择并持久化主题

<template>
	<label>
		主题色：
		<input type="color" v-model="color" />
	</label>
	<button @click="reset">恢复默认</button>
</template>

<script setup lang="ts">
	import { ref, watch, onMounted } from "vue";
	import { setThemeColor, getThemeColor, resetThemeColor } from "scws-vue3-cmps";

	const color = ref<string>("");

	onMounted(() => {
		const saved = localStorage.getItem("app-theme");
		color.value = saved || getThemeColor() || "#409eff";
		setThemeColor(color.value);
	});

	watch(color, (v) => {
		if (setThemeColor(v)) localStorage.setItem("app-theme", v);
	});

	const reset = () => {
		resetThemeColor();
		localStorage.removeItem("app-theme");
	};
</script>

注意：setThemeColor 会修改 document.documentElement 的 CSS 变量，需在浏览器环境调用（不要在 SSR 服务器端直接运行）。

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build

联系方式

• 项目维护者：[SCWS]