一、前言
网上很多后盾管理系统都是pc网页端，手机端的后盾零碎绝对比拟少。而跨端的挪动端后盾治理模板少之又少。于是本人就应用uniapp+uview-ui+uni-ui捣鼓了一个跨设施后盾管理系统uniapp-uadmin我的项目。
uni-uAdmin我的项目是一款基于uniapp+vue.js+uView-ui+uni-ui+mock.js等技术开发的跨端后盾管理系统模板我的项目。
二、技术框架
- 编辑器：HbuilderX3.3.5
- 应用技术：vue+uniapp+uViewUI+mockjs
- 弹窗组件：ua-popup（基于uni-app跨端弹框组件）
- 表格组件：ua-table（基于uni-app封装的多功能表格）
- 自定义组件：uaDock全新的dock格调tabbar组件
- 图表组件：u-charts图表库
- 模仿数据：mock.js
全新的毛玻璃视觉UI质感，应用了图表、自定义表格、表单、瀑布流及图文编辑器等业务模块，动静权限治理，谬误页解决，可编译至H5+小程序+APP端
三、我的项目构造目录
四、公共模板
页面整体分为顶部自定义导航条+内容区域+底部dock菜单三大部分。
<!-- 公共页面模板 --><template> <view class="ua__pageview flexbox flex-col" :style="{'--SKIN': $store.state.skin, 'background': bgcolor, 'color': color}"> <slot name="header" /> <!-- //主容器 --> <view class="ua__scrollview flex1"> <slot /> </view> <!-- //底部 --> <slot name="footer" /> <!-- //dock菜单 --> <ua-dock v-if="dock && dock != 'false'" @click="handleDockClick" /> <!-- //函数式弹框 --> <!-- //换肤弹框模板 --> <ua-popup v-model="isVisibleSkin" position="right"> <Skin /> </ua-popup> </view></template>反对动静组件式管制权限及谬误页主动跳转提醒。
我的项目中比拟翻新的一个局部就是底部dock菜单，能够和uniapp原生tabbar切换一样，能够左右滑动切换，能够自定义图标及题目文字。
<!-- //底部dock菜单 --><template> <view class="ua__dockbar"> <scroll-view class="ua__dock-scroll ua__filter" :class="platform" scroll-x :style="{'background': bgcolor}"> <view class="ua__dock-wrap"> <!-- Tab菜单项 --> <block v-for="(item, index) in menu" :key="index"> <view v-if="item.type == 'divider'" class="ua__dock-divider"></view> <view v-else class="ua__dock-item" :class="currentTabIndex == index ? 'cur' : ''" @click="switchTab(index, item)"> <text v-if="item.icon" class="iconfont nvuefont" :class="item.icon">{{item.icon}}</text> <image v-if="item.img" :src="item.img" class="iconimg" :style="{'font-size': item.iconSize}" /> <text v-if="item.badge" class="ua__badge ua__dock-badge">{{item.badge}}</text> <text v-if="item.dot" class="ua__badge-dot ua__dock-badgeDot"></text> </view> </block> </view> </scroll-view> </view></template>菜单的props选项可传入如下参数配置。
props: { // 以后索引 current: { type: [Number, String], default: 0 }, // 背景色 bgcolor: { type: String, default: null }, /** * [ 菜单选项 ] type 菜单类型 type: 'tab'反对uni.switchTab切换 type: 'divider'分割线 path 菜单页面地址 icon 菜单图标-iconfont图标 img 菜单图片 color 菜单图标色彩 title 题目 badge 圆点数字 dot 小红点 */ menu: { type: Array, default: () => [ /* Tab菜单 */ { type: 'tab', path: '/pages/index/index', icon: `\ue619`, color: '#2979ff', title: '首页', }, { type: 'tab', path: '/pages/component/index', icon: 'icon-component', color: '#17c956', title: '组件', badge: 5, }, { type: 'tab', path: '/pages/permission/index', icon: 'icon-auth', color: '#f44336', title: '权限治理', }, { type: 'tab', path: '/pages/setting/index', icon: 'icon-wo', color: '#8d1cff', title: '设置', dot: true, }, { path: '/pages/error/404', img: require('@/static/mac/keychain.png'), title: '谬误页面', }, { type: 'divider' }, /* Nav菜单 */ { img: require('@/static/logo.png'), title: 'github', }, { img: 'https://www.uviewui.com/common/logo.png', title: 'gitee', }, { img: require('@/static/mac/colorsync.png'), title: '皮肤', }, { img: require('@/static/mac/info.png'), title: '对于', }, { type: 'divider' }, { img: require('@/static/mac/bin.png'), title: '回收站', badge: 12, }, ] },},// Tab切换switchTab(index, item) { if(item.path) { let type = item.type == 'tab' ? 'switchTab' : 'navigateTo' uni[type]({ url: item.path, }) }else { if(item.type == 'tab') { this.currentTabIndex = index } } this.$emit('click', index)}另外我的项目中应用的表格组件也是本人研发的一款uniapp表格组件插件。
ua-table 反对多行、多列，表头固定，自定义slot插槽内容，点击行列返回数据等性能。
应用非常简单，如下，创立一个简略表格。
<ua-table :columns="columns" headerBgColor="#eee" :headerBold="true" stripe padding="5px 0" :data="data.list" height="450rpx"></ua-table><script>import Mock from 'mockjs'export default { data() { return { columns: [ {type: 'index', align: 'center', width: 100, fixed: true}, // 索引序号 {prop: 'title', label: '题目', align: 'left', width: '350'}, {prop: 'num', label: '搜寻量', align: 'center', width: 120}, ], data: Mock.mock({ total: 100, page: 1, pagesize: 10, 'list|10': [ { id: '@id()', title: '@ctitle(10, 20)', num: '@integer(1000,10000)' } ] }), } }}</script>表格还反对相似饿了么组件库固定表头及自定义内容。
<ua-table :columns="columns" headerBgColor="#eee" :headerBold="true" :stripe="true" :data="data.list" @row-click="handleRowClick" @select="handleCheck" height="750rpx" style="border:1px solid #eee"> <template #default="{row, col, index}"> <block v-if="col.slot == 'image'"> <u-image :src="row.image" :lazy-load="true" height="100rpx" width="100rpx" @click="previewImage(row.image)" /> </block> <block v-if="col.slot == 'switch'"> <u-switch v-model="row.switch" inactive-color="#fff" :size="36"></u-switch> </block> <block v-if="col.slot == 'tags'"> <u-tag :text="row.tags" bg-color="#607d8b" color="#fff" mode="dark" size="mini" /> </block> <block v-if="col.slot == 'progress'"> <u-line-progress active-color="#1fb925" :percent="row.progress" :show-percent="false" :height="16"></u-line-progress> </block> <block v-if="col.slot == 'btns'"> <view class="ua__link success" @click.stop="handleFormEdit(row)">编辑</view> <view class="ua__link error" @click.stop="handleDel(row, index)">删除</view> </block> </template></ua-table><script>/** * uniapp自定义表格 * @author XY Q：282310962*/import Mock from 'mockjs'export default { data() { return { columns: [ {type: 'selection', align: 'center', width: 80, fixed: true}, // 多选 {type: 'index', align: 'center', width: 80, fixed: true}, // 索引序号 {prop: 'author', label: '作者', align: 'center', width: 120}, {prop: 'title', label: '题目', align: 'left', width: 350}, {slot: 'image', label: '图片', align: 'center', width: 120}, {slot: 'switch', label: '举荐', align: 'center', width: 100}, {slot: 'tags', label: '标签', align: 'center', width: 100}, {slot: 'progress', label: '热度', align: 'center', width: 150}, {prop: 'date', label: '公布工夫', align: 'left', width: 300}, // 工夫 {slot: 'btns', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作 ], data: Mock.mock({ total: 100, page: 1, pagesize: 10, 'list|30': [ { id: '@id()', author: '@cname()', title: '@ctitle(10, 20)', image: 'https://picsum.photos/400/400?random=' + '@guid()', switch: '@boolean()', 'tags|1': ['admin', 'test', 'dev'], progress: '@integer(30, 90)', date: '@datetime()' } ] }), } }}</script>不过须要留神，uniapp多个v-for编译到小程序，自定义插槽会生效，须要本人非凡解决一下。
OK，基于uniapp开发后盾零碎的分享就到这里，心愿对大家有些帮忙哈~~
最初附上一个uniapp短视频我的项目
https://segmentfault.com/a/11...