uniapp-weos：原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端)
38 / 0 / 创建于 1个月前
xiaoyan2015 的个人博客
原创自研uniapp+vue3+pinia2+uni-ui仿ios手机后台管理系统模板UniVue3Oadmin。
使用技术
- 编辑器：HbuilderX 4.15
- 技术框架：uniapp+vue3+pinia2+vite5.x
- UI组件库：uni-ui+uv-ui（uniapp vue3组件库）
- 弹框组件：uv3-popup（基于uniapp+vue3自定义弹框组件）
- 表格组件：uv3-table（基于uniapp+vue3增强版表格）
- 图表组件：qiun-data-charts
- 模拟数据：mockjs（用于自定义表格模拟数据）
- 缓存技术：pinia-plugin-unistorage
- 支持编译：h5+小程序端+app端
项目结构目录
实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端。
uniapp+vue3自定义增强版表格
uv3-table全新自研vue3+uniapp多功能综合增强版表格组件。
支持固定表头/列、边框、斑马纹、单选/多选，自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。
- 基础用法
<uv3-table :columns="columns" :dataSource="data.list" />- 条纹表格
<uv3-table
:columns="columns"
:dataSource="data.list"
stripe
stripeColor="#eee"
padding="5px"
height="450rpx"
/>- 综合表格
<uv3-table
:dataSource="data.list"
:columns="columns"
:headerBold="true"
headerBackground="#ecf5ff"
stripe
border
padding="5px"
maxHeight="650rpx"
@rowClick="handleRowClick"
@select="handleSelect"
>
<!-- 自定义header插槽内容 -->
<template #headerCell="{ key, col, index }">
<template v-if="key == 'title'">
<view class="flex-c">{{col.label}} <input placeholder="搜索" size="small" /></view>
</template>
<template v-else-if="key == 'date'">
<uni-icons type="calendar"></uni-icons> {{col.label}}
</template>
<template v-else>{{col.label}}</template>
</template>
<!-- 自定义body插槽内容(由于小程序不支持动态:name插槽，通过key标识来自定义表格内容) -->
<template #default="{ key, value, row, col, index }">
<template v-if="key == 'image'">
<uv-image :src="value" lazyLoad observeLazyLoad @click="previewImage(value)" />
</template>
<template v-else-if="key == 'switch'">
<switch :checked="value" style="transform:scale(0.6);" />
</template>
<template v-else-if="key == 'tags'">
<uv-tags :text="value" :color="row.color" :borderColor="row.color" plain size="mini" />
</template>
<template v-else-if="key == 'rate'">
<uni-rate :value="value" size="14" readonly />
</template>
<template v-else-if="key == 'action'">
<uni-icons type="compose" color="#00aa7f" @click="handleEdit(row)" />
<uni-icons type="trash" color="#ff007f" style="margin-left: 5px;" @click="handleDel(row)" />
</template>
<template v-else>{{value}}</template>
</template>
</uv3-table>
支持如下参数配置
const props = defineProps({
// 表格数据
dataSource: {
type: Array,
default() {
return []
}
},
/**
* @params {string} background 对应列背景色
* @params {string} type 对应列类型(多选selection 索引index)
* @params {string} label 显示的列标题
* @params {string} prop 对应的列字段名
* @params {string} align 列水平对齐方式(left center right)
* @params {number|string} width 对应列宽度
* @params {boolean|string} fixed 该列固定到左侧(fixed:true|'left')或右侧(fixed:'right')
* @params {string} columnStyle 对应列自定义样式
* @params {string} className/class 表格列的类名className
*/
columns: {
type: Array,
default() {
return []
}
},
// 表格宽度
width: { type: [Number, String] },
// 表格高度
height: { type: [Number, String] },
// 表格最大高度
maxHeight: { type: [Number, String] },
// 是否为斑马纹
stripe: { type: [Boolean, String] },
// 斑马纹背景
stripeColor: { type: String, default: '#fafafa' },
// 是否带有边框
border: { type: [Boolean, String] },
// 列宽度(推荐默认rpx)
columnWidth: { type: [Number, String], default: 200 },
// 单元格间距
padding: { type: String, default: '5rpx 10rpx' },
// 是否显示表头
showHeader: { type: [Boolean, String], default: true },
// 表头背景色
headerBackground: { type: String, default: '#ebeef5' },
// 表头颜色
headerColor: { type: String, default: '#333' },
// 表头字体加粗
headerBold: { type: [Boolean, String], default: true },
// 表格背景色
background: { type: String, default: '#fff' },
// 表格颜色
color: { type: String, default: '#606266' },
// 空数据时显示的文本内容，也可以通过 #empty 设置
emptyText: { type: String, default: '暂无数据' }
})
采用全新的数字解锁模式。全新的登录验证解锁体验。
公共模板
<script setup>
import { ref } from 'vue'
import { appStore } from '@/pinia/modules/app'
const appState = appStore()
// #ifdef MP-WEIXIN
defineOptions({
/**
* 解决小程序class、id透传问题(vue3写法)
* manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效，组件外部传入的class没有挂到组件根节点上
* https://github.com/dcloudio/uni-ui/issues/753
*/
options: { virtualHost: true }
})
// #endif
const props = defineProps({
showBackground: { type: [Boolean, String], default: true },
})
// 自定义变量(桌面图标)
const deskVariable = ref({
'--icon-radius': '15px', // 圆角
'--icon-size': '118rpx', // 图标尺寸
'--icon-gap-col': '25px', // 水平间距
'--icon-gap-row': '45px', // 垂直间距
'--icon-labelSize': '12px', // 标签文字大小
'--icon-labelColor': '#fff', // 标签颜色
'--icon-fit': 'contain', // 图标自适应模式
})
</script>
<template>
<view class="uv3__container flexbox flex-col flex1" :style="deskVariable">
<!-- 顶部插槽 -->
<slot name="header" />
<!-- 内容区 -->
<view class="uv3__scrollview flex1">
<slot />
</view>
<!-- 底部插槽 -->
<slot name="footer" />
<!-- 背景图(修复小程序不支持background背景图) -->
<image v-if="showBackground" class="fixwxbg" :src="appState.config.skin || '/static/skin/theme.png'" mode="scaleToFill" />
</view>
</template>
桌面模板
<!-- 桌面模板 -->
<script setup>
import { ref } from 'vue'
import Desk from './components/desk.vue'
import Dock from './components/dock.vue'
import Touch from './components/touch.vue'
</script>
<template>
<uv3-layout>
<!-- 桌面菜单 -->
<Desk />
<template #footer>
<!-- 底部导航 -->
<Dock />
</template>
<!-- 悬浮球(辅助触控) -->
<Touch />
</uv3-layout>
</template>桌面磁贴布局
桌面图标菜单配置项
/**
* label 图标标题
* imgico 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名，当type: 'widget'则为自定义小部件标识名
* type 图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件
* path 跳转路由页面
* link 跳转外部链接
* hideLabel 是否隐藏图标标题
* background 自定义图标背景色
* size 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
* onClick 点击图标回调函数 * children 二级菜单
*/
<template>
<swiper
class="uv3__deskmenu"
:indicator-dots="true"
indicator-color="rgba(255,255,255,.5)"
indicator-active-color="#fff"
>
<swiper-item v-for="(mitem, mindex) in deskMenu" :key="mindex">
<view class="uv3__gridwrap">
<view v-for="(item, index) in mitem.list" :key="index" class="uv3__gridwrap-item" @click="handleClickDeskMenu(item)">
<!-- 图标 -->
<view class="ico" :style="{'background': item.background}">
<!-- 二级菜单 -->
<template v-if="Array.isArray(item.children)">
<view class="uv3__gridwrap-thumb">
...
</view>
</template>
<template v-else>
<template v-if="item.type == 'widget'">
<!-- 自定义部件 -->
<component :is="item.imgico" />
</template>
<template v-else>
<!-- 自定义图标 -->
...
</template>
</template>
</view>
<!-- 标签 -->
<view v-if="!item.hideLabel" class="label clamp2">{{item.label}}</view>
</view>
</view>
</swiper-item>
</swiper>
<!-- 桌面二级菜单弹窗 -->
<Popup v-model="deskPopupVisible">
<view class="uv3__deskpopup">
...
</view>
</Popup>
...
</template>
Okey，以上就是uniapp+vue3实战手机端后台OA系统的一些知识分享，希望对大家有所帮助~
博客：uniapp-wechat：基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端...
博客：flutter-dylive：基于flutter3.x+getx短视频直播|Flutter3仿抖音app
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：