README

此包是一个简单的图片管理器，允许您上传图片、指定上传文件的名称和格式、创建和删除文件夹。

除了存储原始图片外，此包还将存储3张图片，尺寸为上传图片的50%、25%和10%。在选择图片时，您可以从中选择一个尺寸并指定替代文本。

安装

安装 ImageManager Laravel 包

composer require amir94rp/laravel-file-manager

发布配置文件

php artisan vendor:publish --tag=laravel-file-manager

链接您的存储

php artisan storage:link

安装 ImageManager Vue3 组件

npm i @amir94rp/vue3-file-manager --save-dev

如果您使用 Tailwind V.2，请将模块路径添加到 Tailwind 设置文件（tailwind.config.js）。在这个模块中，我们使用了宽高比和表单插件，您应该将这些添加到插件数组中。

module.exports = [
    //...
    purge: {
        //...
        content: [
            './node_modules/@amir94rp/vue3-file-manager/dist/components/*.js',
        ],
        //...
    //...
    },

    corePlugins: {
        aspectRatio: false,
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio')
    ],
]

如果您对上述方法不感兴趣或未使用 Tailwind V.2，您可以直接导入样式文件。

import '@amir94rp/vue3-file-manager/dist/components/style.css';

使用/示例

<template>
    <ImageManager v-model:open="open" 
                  @output="log"
                  :alt="alt" 
                  :quality="quality" 
                  :multiple="multiple" 
                  :select="select"/>
</template>

<script>
    import ImageManager from "@amir94rp/vue3-file-manager";

    export default {
      data(){
        return{
          open:false,
          multiple:false,
          select:false,
          quality:'xl',
          alt:false,
        }
      },

      components:{
        ImageManager
      },

      methods:{
        log:function (value){
          console.log(value);
      },
    }
</script>

可用属性

事件

演示

点击此处查看演示

许可

MIT