uni-app实现手机后台管理|uniapp多端后台系统模板

uniapp-uadmin 一款基于uniapp+uview-ui+echarts+mockjs等技术构建开发的跨平台手机后台管理系统项目。

项目中每一个UI模块均是采用背景毛玻璃质感效果。支持动态全局换肤。

uni-uadmin 整合了图表、自定义表格、表单、瀑布流及富文本编辑器等业务模块,动态权限管理错误页处理,支持编译至APP+H5+小程序端

项目中的图表使用的是uniapp-echarts多端图表组件库。表格组件则是自己开发的一个uniapp自定义表格组件ua-table。

ua-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: {
    // 当前索引
    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,
            },
        ]
    },
}

项目中的公共模块采用的顶部自定义导航+内容区+底部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 ref="uapopup" />

        <!-- //换肤弹框模板 -->
        <ua-popup v-model="isVisibleSkin" position="right">
            <Skin />
        </ua-popup>
    </view>
</template>

ua-table 一款uniapp自定义表格组件,支持全选、单选,列宽/居中及可左右、上下滑动固定表头及列,支持点击行返回行数据,返回单选及多选行列数据,动态slot插槽等功能。

调用非常简单,通过如下方式即可快速创建一个uniapp表格。

<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>

还可以通过如下slot动态插槽方式,丰富表格内容。

<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>
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及小程序的机制,自定义插槽功能还不是很完美,后续或许有些改进。
uniapp+uviewUI抖音短视频/直播实例

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
本帖由系统于 3年前 自动加精
讨论数量: 1

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
65
粉丝
52
喜欢
108
收藏
57
排名:356
访问:2.7 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
2
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
2
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
4
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
2
flutter3直播
1
flutter3-macos
1
flutter3-osx
2
flutter3桌面os
2
flutter3仿macOS
1
uniapp+vue3聊天
1
uniapp+vue3仿微信
1
uniapp+vue3聊天app
1
uniapp-vue3-wchat
1
uni-vue3-os
1
uniapp+vue3手机后台
1
uniapp-admin
1
uniapp+vue3仿ios桌面
1
uniapp+vite5后台管理
1
flutter3-osadmin
1
flutter3手机后台
1
vite-vue3-chat
1
vite-webchat
1
vue3-chat聊天
1
vite5仿微信
1
electron31+vue3聊天室
1
vite5+electron31仿微信
1
electron31-vite5-wechat聊天
1
electron31聊天exe
1
vue3+electron桌面聊天
1
vue3-webos
1
vue3-macos
1
vue3网页版os
1
vite-os
1
electron31-vue3-admin
1
vite5-electron31-admin
1
vue3+electron31后台系统
1
electron31+vite5桌面端后台
1
electron31轻量级后台
1
electron32-os
1
vue3+electron32桌面os
1
electron32-macos
1
electron32-winos
1
electron-osx
1
tauri2.0
2
tauri2+vue3仿微信
1
tauri2+vite.js聊天
1
tauri2.0+vue3客户端聊天
1
HarmonyOS
1
tauri2-admin
1
tauri2-vue3-admin
1
vue3+tauri2桌面后台
1
tauri2+vite后台系统
1
harmony-chat
1
鸿蒙仿微信
1
鸿蒙聊天app
1
uniapp+vue3酒店预订
1
vue3+uniapp预约酒店
1
uniapp酒店预订
1
uniapp仿携程
1
uniapp仿同程
1
vue3酒店预订
1
tauri2-os
1
tauri2.0-vue3-os
1
tauri2+vue3桌面os
1
tauri2-macos
1
tauri2-winos
1
tauri2.0仿macos
1
tauri2+vite桌面端os
1
flutter3直播app
1
flutter3仿抖音app
1
flutter3短视频直播
1
flutter3聊天室
1
flutter3仿携程
1
flutter3-trip
1
flutter3酒店预订
1
flutter3预约酒店app
1
flutter3旅行酒店app
1
vue3+deepseek
1
vue3-deepseek-chat
1
vue3仿deepseek流式ai
2
vue3智能ai聊天
1
vue3+deepseek-v3
1
vue3网页版ai
1
vue3-web-deepseek
1
vue3.5-webseek
1
electron35+deepseek
1
electron35仿deepseek
1
electron35仿豆包AI
1
electron35桌面端ai
1
electron35-vue3ai
1
社区赞助商