Merge branch 'master' of github.com:youlaitech/youlaitech.github.io

youlaitech · Aug 22, 2024 · ea4f62e · ea4f62e
2 parents 747640b + a01855a
commit ea4f62e
Show file tree

Hide file tree

Showing 7 changed files with 282 additions and 353 deletions.
diff --git a/src/前后端模板/前端手册/功能组件/图标组件.md b/src/前后端模板/前端手册/功能组件/图标组件.md
@@ -9,49 +9,17 @@ tag:
   - 项目介绍
 ---
 
-本教程将指导你如何搭建 VuePress 的运行环境。
-
-<!-- more -->
-
-## 编辑器
-
-一个趁手的编辑器是必要的，我们推荐你使用 VSCode 来编写和运行你的
-VuePress 项目。
-
-1. 在 [下载页面](https://code.visualstudio.com/) 中点击左侧的蓝色按钮
-   完成下载。
-
-1. 双击安装包打开
-
-1. 同意用户协议。
-
-## Node.js
-
-::: info 介绍
-
-[Node.js®](https://nodejs.org/zh-cn/) 是一个基于
-[Chrome V8 引擎](https://v8.dev/) 的 JavaScript 运行时环境。
-
-:::
-
-你需要下载并安装最新的长期维护版。
-
-1. 点击 [下载地址](https://nodejs.org/en) 左侧的绿色按钮 (LTS)。
-1. 运行安装包，保持所有的默认设置，一路下一步即可。
-
-::: warning
-
-如果你真的是个小白，请不要改默认安装目录，以免你在出现问题时找不到对应
-的文件夹。
-
-Node.js 本身只会占据几十 M 的空间!
-
-:::
-
-## pnpm
-
-在你安装 Node.js 之后，在终端中输入下列命令启用 corepack:
-
-```bash
-corepack enable
+## 实现原理
+项目通过vite-plugin-svg-icons 插件整合了Iconfont第三方图标库实现本地图标[整合SVG图标](https://blog.csdn.net/u013737132/article/details/130191394)
+## 使用方法
+### 1. 复制svg图标放到src/assets/icons 目录
+### 2. 在组件中使用
+```vue
+<!-- icon-class 为Iconfont图标的名字 -->
+  <svg-icon icon-class="user"/>
+```
+### 3. 设置大小
+```vue
+<!-- size为图标大小 -->
+<svg-icon icon-class="user" size="2em" />
 ```
diff --git a/src/前后端模板/前端手册/功能组件/字典组件.md b/src/前后端模板/前端手册/功能组件/字典组件.md
@@ -3,55 +3,27 @@ title: 字典组件
 icon: leaf
 order: 6
 category:
-  - 快速上手
-  - 项目简介
+    - 快速上手
+    - 项目简介
 tag:
-  - 项目介绍
+    - 项目介绍
 ---
 
-本教程将指导你如何搭建 VuePress 的运行环境。
+## 实现原理
 
-<!-- more -->
+[组件源码](https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/components/Dictionary/index.vue)
 
-## 编辑器
+## 使用方法
 
-一个趁手的编辑器是必要的，我们推荐你使用 VSCode 来编写和运行你的
-VuePress 项目。
-
-1. 在 [下载页面](https://code.visualstudio.com/) 中点击左侧的蓝色按钮
-   完成下载。
-
-1. 双击安装包打开
-
-1. 同意用户协议。
-
-## Node.js
-
-::: info 介绍
-
-[Node.js®](https://nodejs.org/zh-cn/) 是一个基于
-[Chrome V8 引擎](https://v8.dev/) 的 JavaScript 运行时环境。
-
-:::
-
-你需要下载并安装最新的长期维护版。
-
-1. 点击 [下载地址](https://nodejs.org/en) 左侧的绿色按钮 (LTS)。
-1. 运行安装包，保持所有的默认设置，一路下一步即可。
-
-::: warning
-
-如果你真的是个小白，请不要改默认安装目录，以免你在出现问题时找不到对应
-的文件夹。
-
-Node.js 本身只会占据几十 M 的空间!
-
-:::
-
-## pnpm
-
-在你安装 Node.js 之后，在终端中输入下列命令启用 corepack:
-
-```bash
-corepack enable
-```
+1. 导入组件(已全局导入)
+    ```ts
+    Dictionary: (typeof import('./../components/Dictionary/index.vue'))[
+    	'default'
+    ]
+    ```
+2. 使用组件
+    ```vue
+    code为字典编码
+    <dictionary v-model="stringValue" code="gender" />
+    ```
+3. [使用示例](https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/dict.vue)
diff --git a/src/前后端模板/前端手册/功能组件/富文本编辑器.md b/src/前后端模板/前端手册/功能组件/富文本编辑器.md
@@ -8,50 +8,16 @@ category:
 tag:
   - 项目介绍
 ---
-
-本教程将指导你如何搭建 VuePress 的运行环境。
-
-<!-- more -->
-
-## 编辑器
-
-一个趁手的编辑器是必要的，我们推荐你使用 VSCode 来编写和运行你的
-VuePress 项目。
-
-1. 在 [下载页面](https://code.visualstudio.com/) 中点击左侧的蓝色按钮
-   完成下载。
-
-1. 双击安装包打开
-
-1. 同意用户协议。
-
-## Node.js
-
-::: info 介绍
-
-[Node.js®](https://nodejs.org/zh-cn/) 是一个基于
-[Chrome V8 引擎](https://v8.dev/) 的 JavaScript 运行时环境。
-
-:::
-
-你需要下载并安装最新的长期维护版。
-
-1. 点击 [下载地址](https://nodejs.org/en) 左侧的绿色按钮 (LTS)。
-1. 运行安装包，保持所有的默认设置，一路下一步即可。
-
-::: warning
-
-如果你真的是个小白，请不要改默认安装目录，以免你在出现问题时找不到对应
-的文件夹。
-
-Node.js 本身只会占据几十 M 的空间!
-
-:::
-
-## pnpm
-
-在你安装 Node.js 之后，在终端中输入下列命令启用 corepack:
-
-```bash
-corepack enable
-```
+## 实现原理
+项目整合了[wangEditor文档](https://www.wangeditor.com/v5/for-frame.html#demo-1)
+## 使用方法
+1. 导入组件
+   ```vue
+   import Editor from "@/components/WangEditor/index.vue";
+   ```
+2. 使用组件
+   ```vue
+   const value = ref("初始内容");
+   <editor v-model="value" style="height: calc(100vh - 180px)" />
+   ```
+3. [参考源码](https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/wang-editor.vue)
diff --git a/src/前后端模板/前端手册/功能组件/文件上传.md b/src/前后端模板/前端手册/功能组件/文件上传.md
@@ -9,49 +9,78 @@ tag:
   - 项目介绍
 ---
 
-本教程将指导你如何搭建 VuePress 的运行环境。
-
-<!-- more -->
-
-## 编辑器
-
-一个趁手的编辑器是必要的，我们推荐你使用 VSCode 来编写和运行你的
-VuePress 项目。
-
-1. 在 [下载页面](https://code.visualstudio.com/) 中点击左侧的蓝色按钮
-   完成下载。
-
-1. 双击安装包打开
-
-1. 同意用户协议。
-
-## Node.js
-
-::: info 介绍
-
-[Node.js®](https://nodejs.org/zh-cn/) 是一个基于
-[Chrome V8 引擎](https://v8.dev/) 的 JavaScript 运行时环境。
-
-:::
-
-你需要下载并安装最新的长期维护版。
-
-1. 点击 [下载地址](https://nodejs.org/en) 左侧的绿色按钮 (LTS)。
-1. 运行安装包，保持所有的默认设置，一路下一步即可。
-
-::: warning
-
-如果你真的是个小白，请不要改默认安装目录，以免你在出现问题时找不到对应
-的文件夹。
-
-Node.js 本身只会占据几十 M 的空间!
-
-:::
-
-## pnpm
-
-在你安装 Node.js 之后，在终端中输入下列命令启用 corepack:
-
-```bash
-corepack enable
-```
+## 导入上传图片组件
+
+```vue
+import ImageUpload from "@/components/Upload/ImageUpload.vue";
+```
+<!--  -->
+
+## 组件参数
+
+| 名称            | 类型    | 默认值                                            | 描述                            |
+| --------------- | ------- | ------------------------------------------------- | ------------------------------- |
+| v-model         | Arrays  | []                                              | 已经上传的图片数组              |
+| action          | String  | FileAPI.uploadUrl                                 | 文件上传地址                    |
+| headers         | Object  | **{Authorization: localStorage.getItem(TOKEN_KEY),}** | 提示文本类型                    |
+| data            | Object  | {}                                                | 请求携带的额外参数              |
+| name            | String  | file                                              | 上传文件的参数名                |
+| limit           | Number  | 10                                                | 上传最大的图片数量              |
+| show-del-btn    | Boolean | true                                              | 是否显示删除按钮                |
+| show-upload-btn | Boolean | true                                              | 是否显示上传按钮                |
+| upload-max-size | Number  | 2*1024*1024                                   | 单个图片上传大小限制(单位 byte) |
+| accept          | String  | image\*                                          | 上传文件类型                    |
+
+## 使用组件
+```vue
+const picUrls = ref([
+  "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
+  "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
+  "https://s2.loli.net/2023/05/24/ZPiGbcpR91WqInB.jpg",
+  "https://s2.loli.net/2023/05/24/e1bcnEq3MFdmlNL.jpg",
+  "https://s2.loli.net/2023/05/24/wZTSPj1yDQNcuhU.jpg",
+]);
+<image-upload v-model="picUrls" />
+```
+
+## 导入上传文件组件
+
+```vue
+import FileUpload from "@/components/Upload/FileUpload.vue";
+```
+
+## 组件参数
+
+| 名称            | 类型    | 默认值                                              | 描述                            |
+| --------------- | ------- | -------------------------------------------------  | ------------------------------- |
+| v-model         | Arrays  | []                                                 | 已经上传的文件数组              |
+| action          | String  | FileAPI.uploadUrl                                  | 文件上传地址                    |
+| headers         | Object  | **{Authorization: localStorage.getItem(TOKEN_KEY),}**| 提示文本类型                    |
+| data            | Object  | **{}**                                            | 请求携带的额外参数              |
+| accept           | String |  *                                                | 上传文件类型 |
+| name            | String  | file                                              | 上传文件的参数名                |
+| limit           | Number  | 10                                                | 上传最大的文件数量              |
+| show-del-btn    | Boolean | true                                              | 是否显示删除按钮                |
+| show-upload-btn | Boolean | true                                              | 是否显示上传按钮                |
+| upload-max-size | Number  | 2 * 1024*1024                                     | 单个图片上传大小限制(单位 byte) |
+| upload-btn-text | String  | 上传文件                                           | 上传按钮文本                    |
+| show-tip        | Boolean | false                                             | 是否显示提示                    |
+| tip             | String  |       ""                                          | 提示文本                        |
+| style           | String  | **{width:'300px'}**                                   | 上传组件的样式                  |
+
+## 使用组件
+```vue
+const fileUrls = ref([
+  {
+    name: "file one.jpg",
+    url: "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
+  },
+  {
+    name: "file two.jpg",
+    url: "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
+  },
+]);
+<file-upload v-model="fileUrls" />
+```
+
+[示例源码](https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/upload.vue)