Wx Screen UI

一个基于 Vue 3 的组件库，提供了一系列常用的 UI 组件，帮助开发者快速构建前端界面。

特性

• 基于 Vue 3 开发
• 支持按需引入
• 组件带有 Wx 前缀，避免命名冲突
• 响应式设计
• 易于使用和定制

安装

# 使用 npm
npm install wx-screen-ui

# 使用 yarn
yarn add wx-screen-ui

# 使用 pnpm
pnpm add wx-screen-ui

快速开始

全局引入

在 main.js 中引入：

import { createApp } from "vue";
import App from "./App.vue";
import WxScreenUI from "wx-screen-ui";
import "wx-screen-ui/style.css";

const app = createApp(App);
app.use(WxScreenUI);
app.mount("#app");

按需引入

在组件中按需引入：

import { WxEmpty, WxTable } from "wx-screen-ui";
import "wx-screen-ui/style.css";

export default {
	components: {
		WxEmpty,
		WxTable,
	},
};

组件列表

基础组件

• WxEmpty - 空状态组件
• WxRadio - 单选框组件
• WxPagination - 分页组件

数据展示

• WxTable - 表格组件
• WxEcharts - ECharts 图表组件

媒体组件

• WxVideoFromFlv - FLV 视频播放器组件
• WxVideoFromHls - HLS 视频播放器组件

消息提示

• WxMessage - 消息提示组件

组件使用示例

WxEmpty 组件

<template>
	<WxEmpty />
</template>

<script setup>
	import { WxEmpty } from "wx-screen-ui";
	import "wx-screen-ui/style.css";
</script>

WxTable 组件

<template>
	<WxTable :data="tableData" :columns="columns" />
</template>

<script setup>
	import { WxTable } from "wx-screen-ui";
	import "wx-screen-ui/style.css";

	const tableData = [
		{ id: 1, name: "张三", age: 20 },
		{ id: 2, name: "李四", age: 22 },
	];

	const columns = [
		{ prop: "id", label: "ID" },
		{ prop: "name", label: "姓名" },
		{ prop: "age", label: "年龄" },
	];
</script>

开发指南

克隆项目

git clone <repository-url>
cd wx-screen-ui

安装依赖

npm install

开发模式

npm run dev

构建组件库

npm run build

浏览器支持

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)

许可证

MIT

主题配置

Wx Screen UI 支持主题颜色的自定义，默认主题颜色为 rgba(18, 154, 232, 1)。

主题管理 API

import { setTheme, getTheme, resetTheme, initTheme } from "wx-screen-ui";

// 设置主题颜色
setTheme({
  primaryColor: "255, 0, 0" // 红色主题
});

// 获取当前主题配置
const currentTheme = getTheme();
console.log(currentTheme);

// 重置主题到默认值
resetTheme();

// 初始化主题（从本地存储加载）
initTheme();

参数说明

• primaryColor: 主色调，格式为 "r, g, b"，例如 "18, 154, 232"

主题变量

以下是可用于自定义的主题变量：

| 变量名 | 描述 | 默认值 | | --- | --- | --- | | --wx-primary-color | 主色调的 RGB 值 | 18, 154, 232 | | --wx-primary | 主色调 | rgba(var(--wx-primary-color), 1) | | --wx-primary-light | 主色调的浅色版本 | rgba(var(--wx-primary-color), 0.2) | | --wx-primary-hover | 主色调的 hover 版本 | rgba(var(--wx-primary-color), 0.8) | | --wx-primary-disabled | 主色调的禁用版本 | rgba(var(--wx-primary-color), 0.4) | | --wx-primary-light | 主色调的浅色背景 | rgba(var(--wx-primary-color), 0.2) | | --wx-text-primary | 主要文本颜色 | #303133 | | --wx-text-secondary | 次要文本颜色 | #606266 | | --wx-text-placeholder | 占位文本颜色 | #909399 | | --wx-text-disabled | 禁用文本颜色 | #c0c4cc | | --wx-bg-color | 背景颜色 | #ffffff | | --wx-bg-color-light | 浅色背景颜色 | #f5f7fa | | --wx-bg-color-disabled | 禁用背景颜色 | #f5f7fa | | --wx-border-color | 边框颜色 | #dcdfe6 | | --wx-border-color-light | 浅色边框颜色 | #e4e7ed | | --wx-border-color-hover | 边框 hover 颜色 | rgba(var(--wx-primary-color), 0.5) | | --wx-shadow | 阴影 | 0 2px 12px 0 rgba(0, 0, 0, 0.1) | | --wx-shadow-light | 浅色阴影 | 0 0 0 2px rgba(var(--wx-primary-color), 0.2) |

深色主题适配

组件库默认支持系统的深色主题模式，会根据系统的颜色方案自动切换主题变量。

贡献

欢迎提交 Issue 和 Pull Request 来改进这个组件库。

联系我们

如果您有任何问题或建议，请随时联系我们。