element 分类

提示

该章节主要介绍vue3-element-admin-youhujun 的组件使用

游鹄君2026/7/9小于 1 分钟

图片上传

单图上传

示例:

<template>
	<UploadSinglePicture 
	:upload-data="{type:null, use_type:20, file_type: '', save_path: 'picture'}"
	type="image"
	show-content="轮播图片"
	:is-show-button="true"
	v-model:upload-picture-uid="createForm.album_picture_uid"
	v-model:upload-picture-url="uploadPicutreUrl"
	/>
</template>
<script setup lang="ts">
//公共组件
import UploadSinglePicture from "@/pages/laravel-fast-api/v1/components/element/Upload/UploadPicture/UplaodSinglePicture.vue"

//上传图片回显
const uploadPicutreUrl = ref("");
</script>

游鹄君2026/7/9小于 1 分钟

vue3-element-admin-youhujun

游鹄君2026/6/27大约 1 分钟

快速开发一(配置相关)

提示

主要是介绍该如何上手开发使用

配置特别强调

#加密秘钥
VITE_APP_SEART_KEY=
#加密向量
VITE_APP_IV=
#tinymce的api_key
VITE_APP_TINYMCE_API_KEY=

游鹄君2026/6/27大约 4 分钟

快速开发二(开发规范和路径)

公共资源

提示

经过实际检验,该项目逐渐废弃enum的定义.改为全部使用联合类型

svg资源

位于

src\common\svg\svg-icon.ts

<script setup>
//加载动画
import { LOADING_SVG } from "@/common/svg/svg-icon";
</script>

游鹄君2026/6/27小于 1 分钟

快速开发三(加密和解密)

页面加解密传值

有时候处理复杂业务逻辑,需要在页面之间传递一些敏感信息,比如用户信息,订单信息等,但是又不想在页面之间传递明文,所以需要对传递的信息进行加密,然后在页面之间传递加密后的信息,在接收端解密后再使用.

加密

示例:

//系统
import { useRoute } from "vue-router";
//工具
import { encryptData } from "@/utils/crypt";

//初始化路由
const router = useRouter();

const encryptString = encryptData('{"id":1,"name":"张三"}');
    router.push({
      name: "RouteName",
      query: { repalceObjectString: encryptString }, // 注意：query参数建议序列化，避免对象类型问题
    });

游鹄君2026/6/27小于 1 分钟

element

提示

在实际开发过程中,PC端开发我个人首选element.虽然提供了很多组件.然而在实际开发过成功中有很多细节需要完善.
为了提高开发效率,特意整理了一些通用事项的笔记和示例,用来快速开发，目前主要是vue2

element vue2 官网

游鹄君2025/5/7小于 1 分钟

form-表单

游鹄君2025/5/7小于 1 分钟

input-输入框

游鹄君2025/2/12小于 1 分钟

select-选择框

游鹄君2025/2/12小于 1 分钟