hsry-uv-ui

基于 uv-ui 和 Element Plus 二次封装的组件库，用于微信小程序可视化页面配置

📦 安装

npm i hsry-uv-ui

⚠️ 重要注意事项

使用本组件库之前，必须在您的项目中全局引入 Element Plus 和 uv-ui，并且需要全局引入它们的样式！

1. 在您的 main.ts 中全局引入

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

// 引入 Element Plus（您的项目应该已经有了）
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

// 引入 uv-ui
import uvUI from 'uv-ui';
import 'uv-ui/es/style.css';

// 引入我们的组件库
import hsryvuvUI from 'hsry-uv-ui';
import 'hsry-uv-ui/style.css';

const app = createApp(App);

// 全局注册
app.use(ElementPlus);
app.use(uvUI);
app.use(hsryvuvUI);

app.mount('#app');

2. 如果您的项目使用 unplugin-vue-components 自动引入

如果您的项目使用 unplugin-vue-components 实现 Element Plus 组件的自动按需引入，那么您仍然需要确保 uv-ui 被全局注册！

📝 使用组件

我们的组件库包含 4 种组件类型，每种有 2 个组件（Data 用于配置，View 用于展示）：

| 组件类型 | Data 配置组件 | View 展示组件 | |----------|----------------|----------------| | 按钮 | uvuiButtonData | uvuiButtonView | | 折叠面板 | uvuiCollapseData | uvuiCollapseView | | 数字输入框 | uvuiNumberBoxData | uvuiNumberBoxView | | 文本域 | uvuiTextareaData | uvuiTextView |

📝 使用示例

3.1 使用 uvUIOptions 获取默认配置

<template>
  <div class="demo-container">
    <h3>组件配置区</h3>
    <uvuiButtonData :data="uvUIOptions.buttonOptions" />
    
    <h3>组件展示区</h3>
    <uvuiButtonView :data="uvUIOptions.buttonOptions" />
  </div>
</template>

<script setup lang="ts">
import { uvUIOptions } from 'hsry-uv-ui';
</script>

3.2 使用自定义配置

<template>
  <div class="demo-container">
    <uvuiButtonData :data="myButtonOptions" />
    <uvuiButtonView :data="myButtonOptions" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const myButtonOptions = ref({
  data: {},
  options: {
    width: '200',
    height: '44',
    hairline: true,
    type: 'primary',
    size: 'normal',
    shape: 'square',
    position: 'center',
    plain: false,
    disabled: false,
    loading: false,
    loadingText: '',
    openType: 'navigateTo',
    pagePath: '',
    isTabBar: false,
    text: '测试按钮',
    textColor: '#ffffff',
    icon: '',
    color: '#409eff',
    customStyle: '',
    fill: true
  }
});
</script>

📋 导出的内容

1. 默认导出：hsryvuvUI

import hsryvuvUI from 'hsry-uv-ui';
app.use(hsryvuvUI); // 全局注册所有组件

2. 导出：uvUiList

import { uvUiList } from 'hsry-uv-ui';
// 用于可视化编辑器选择组件类型

3. 导出：uvUIOptions

import { uvUIOptions } from 'hsry-uv-ui';
// 获取所有组件的默认配置值

📦 打包发布说明（仅供维护者）

# 1. 修改版本号（package.json）
"version": "x.y.z"

# 2. 重新打包
npm run build

# 3. 发布到 npm
npm publish

📄 License

MIT