更新记录

1.0.2（2023-10-30）

测试中

1.0.1（2023-10-26）

测试

1.0.0（2023-10-26）

首次发布

平台兼容性

uni-admin插件通用教程：

uni-admin是一套基于uniCloud的开源应用管理端系统。详见：uni-admin 基础框架
本插件是uni-admin系统的扩展插件，为开发者的admin系统添加功能。
需先确保本机有uni-admin项目，然后将此插件导入到uni-admin项目下。
如本机没有uni-admin项目，需要先在HBuilderX中新建项目 -> uni-app项目 -> 选择uni-admin模板。
如本机的uni-admin项目版本过老，可能无法使用新插件，需及时升级本机的uni-admin项目。详见uni-admin项目更新日志

zero-media

使用方法

• 管理模式: 导入后在菜单管理中添加到菜单即可

• 选择模式

<template>
    <view class="uni-container">
        <uni-forms ref="form" :model="formData" validateTrigger="bind" label-width="200px">
            <uni-forms-item name="src" label="选择图片" required>
                <view class="thumbnail">
                    <template v-if="formData.src">
                        <view class="remove-thumbnail" @click="() => removeThumbnail(index)">
                            <uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
                        </view>
                        <image :src="formData.src" mode="aspectFill" style="width: 150px; height: 150px;"></image>
                    </template>
                    <template v-else>
                        <uni-icons @click="() => openInsertImageDrawer(index)" class="placeholder" type="plusempty"
                            size="60" color="#e8e8e8"></uni-icons>
                    </template>
                </view>

        </uni-forms>
        <uni-drawer class="insert-image-drawer" v-if="drawerWidth" ref="insertImageDrawer" mode="right"
            :width="drawerWidth">
            <zero-media mode="picker" :selected-count="1" mediaType='image' @onInsert="onInsertCover"></zero-media>
        </uni-drawer>
    </view>
</template>

<script>

    export default {
        data() {
            return {
                formData:{
                    src:''
                }
                drawerWidth: 0, // 插入图片抽屉宽度
            }
        },
        mounted() {
            const sysinfo = uni.getSystemInfoSync()
            this.drawerWidth = sysinfo.windowWidth * .8
        },
        methods: {
            openInsertImageDrawer() {
                this.$refs.insertImageDrawer.open()
            },
            onInsertCover(selectMediaItems) {
                console.log('selectMediaItems', selectMediaItems);
                this.formData.src = selectMediaItems[0].src
                this.$refs.insertImageDrawer.close()
            },
            removeThumbnail(index) {
                this.formData.src = ''
            },
        }
    }
</script>

<style lang="scss" scoped>
    .thumbnail {
        width: 150px;
        height: 150px;
        border: #e5e5e5 solid 1px;
        border-radius: $uni-border-radius-sm;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        overflow: hidden;

        .placeholder {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .remove-thumbnail {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, .5);
            padding: 3px;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
    }
</style>

Props

Events

注意权限问题

默认只有超级管理员和拥有 media 权限的账号才能 增删改 素材库内容.

可以自行修改数据表

"permission": {
        "read": true,
        "create": "'media' in auth.permission",
        "update": "'media' in auth.permission",
        "delete": "'media' in auth.permission"
    },