152 lines
3.4 KiB
Markdown
152 lines
3.4 KiB
Markdown
# uView-Plus 使用指南
|
||
|
||
## 已完成集成步骤
|
||
|
||
1. ✅ 安装依赖：`npm install uview-plus --save`
|
||
2. ✅ 在 `main.js` 中引入并注册
|
||
3. ✅ 创建 `src/uni.scss` 并引入 uView 主题变量
|
||
4. ✅ 在 `vite.config.js` 中配置 SCSS 预处理器
|
||
5. ✅ 在 `pages.json` 中配置 easycom 自动引入
|
||
|
||
## 配置说明
|
||
|
||
### uni.scss
|
||
```scss
|
||
/* uView-Plus 主题变量配置 */
|
||
@import 'uview-plus/theme.scss';
|
||
```
|
||
|
||
### vite.config.js
|
||
```javascript
|
||
css: {
|
||
preprocessorOptions: {
|
||
scss: {
|
||
additionalData: '@import "@/uni.scss"; @import "@/styles/variables.scss"; @import "@/styles/mixins.scss";',
|
||
api: 'modern-compiler',
|
||
silenceDeprecations: ['legacy-js-api', 'import']
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### pages.json
|
||
```json
|
||
"easycom": {
|
||
"autoscan": true,
|
||
"custom": {
|
||
"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 常用组件示例
|
||
|
||
### 1. 按钮 (u-button)
|
||
```vue
|
||
<u-button type="primary" text="主要按钮"></u-button>
|
||
<u-button type="success" text="成功按钮"></u-button>
|
||
<u-button type="warning" text="警告按钮"></u-button>
|
||
```
|
||
|
||
### 2. 加载动画 (u-loading-icon)
|
||
```vue
|
||
<u-loading-icon mode="spinner"></u-loading-icon>
|
||
<u-loading-icon mode="circle"></u-loading-icon>
|
||
```
|
||
|
||
### 3. 弹窗 (u-popup)
|
||
```vue
|
||
<u-popup v-model:show="show" mode="bottom" :round="10">
|
||
<view class="content">弹窗内容</view>
|
||
</u-popup>
|
||
```
|
||
|
||
### 4. 输入框 (u-input)
|
||
```vue
|
||
<u-input v-model="value" placeholder="请输入内容"></u-input>
|
||
```
|
||
|
||
### 5. 表单 (u-form)
|
||
```vue
|
||
<u-form :model="form" ref="formRef">
|
||
<u-form-item label="姓名" prop="name">
|
||
<u-input v-model="form.name" placeholder="请输入姓名"></u-input>
|
||
</u-form-item>
|
||
</u-form>
|
||
```
|
||
|
||
### 6. Toast 提示
|
||
```javascript
|
||
// 在组件中使用
|
||
this.$u.toast('提示内容')
|
||
```
|
||
|
||
### 7. 日历 (u-calendar)
|
||
```vue
|
||
<u-calendar v-model:show="show" @confirm="confirm"></u-calendar>
|
||
```
|
||
|
||
### 8. 时间选择器 (u-datetime-picker)
|
||
```vue
|
||
<u-datetime-picker
|
||
v-model:show="show"
|
||
v-model="currentDate"
|
||
mode="datetime"
|
||
@confirm="confirm"
|
||
></u-datetime-picker>
|
||
```
|
||
|
||
## 可以优化的现有组件
|
||
|
||
### LoadingOverlay.vue
|
||
可以使用 `u-loading-icon` 替代自定义加载动画：
|
||
```vue
|
||
<template>
|
||
<u-overlay :show="visible">
|
||
<view class="loading-box">
|
||
<u-loading-icon mode="spinner" size="40" color="#ffffff"></u-loading-icon>
|
||
</view>
|
||
</u-overlay>
|
||
</template>
|
||
```
|
||
|
||
### BookingPopup.vue
|
||
可以使用 `u-popup` 替代自定义弹窗：
|
||
```vue
|
||
<u-popup
|
||
v-model:show="visible"
|
||
mode="bottom"
|
||
:round="16"
|
||
:closeable="true"
|
||
@close="handleClose"
|
||
>
|
||
<!-- 弹窗内容 -->
|
||
</u-popup>
|
||
```
|
||
|
||
可以使用 `u-form` 和 `u-form-item` 优化表单：
|
||
```vue
|
||
<u-form :model="formData" ref="formRef" :rules="rules">
|
||
<u-form-item label="姓名" prop="name" required>
|
||
<u-input v-model="formData.name" placeholder="请填写您的姓名"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="电话" prop="phone" required>
|
||
<u-input v-model="formData.phone" type="number" maxlength="11"></u-input>
|
||
</u-form-item>
|
||
</u-form>
|
||
```
|
||
|
||
可以使用 `u-calendar` 替代自定义日期选择器
|
||
|
||
## 文档链接
|
||
|
||
- 官方文档：https://uview-plus.jiangruyi.com/
|
||
- 组件列表：https://uview-plus.jiangruyi.com/components/intro.html
|
||
|
||
## 注意事项
|
||
|
||
1. uview-plus 是专为 Vue3 + uni-app 设计的组件库
|
||
2. 组件通过 easycom 自动引入，无需手动 import
|
||
3. 所有组件以 `u-` 开头
|
||
4. 支持主题定制和暗黑模式
|