• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

alexusmai/vue-laravel-file-manager: Frontend for Laravel File Manager on Vue.js

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

alexusmai/vue-laravel-file-manager

开源软件地址(OpenSource Url):

https://github.com/alexusmai/vue-laravel-file-manager

开源编程语言(OpenSource Language):

JavaScript 59.7%

开源软件介绍(OpenSource Introduction):

Laravel file manager (Frontend)

Backend - Laravel package - alexusmai/laravel-file-manager

Laravel File Manager

New in version 3

  • Vue.js 3
  • Bootstrap 5
  • Bootstrap icons

Installation

NPM

$ npm install laravel-file-manager --save

Usage

IF your App using Vuex store

import { createApp } from 'vue';
import { createStore } from 'vuex';

// Source main component
import Main from './components/Main.vue';
import FileManager from 'laravel-file-manager'
// your Vuex store
import store from './path-to-your-store/store'  

createApp(Main).use(store).use(FileManager, {store}).mount('#id');

ELSE you need to create a new vuex instance

import { createApp } from 'vue';
import { createStore } from 'vuex';

// Source main component
import Main from './components/Main.vue';
import FileManager from 'laravel-file-manager'

// Create a new store instance.
const store = createStore();

createApp(Main).use(store).use(FileManager, {store}).mount('#id');

The application store module will be registered under the name 'fm'

Now vue component is registered and you can use it in your app

<file-manager></file-manager>

You can overwrite some default settings

// In the new version 2.4.0 and higher
<file-manager v-bind:settings="settings"></file-manager>

...
// settings object structure
computed: {
        settings() {
            return {
                // axios headers
                headers: {
                  'X-Requested-With': 'XMLHttpRequest',
                  Authorization: `Bearer ${window.localStorage.getItem('user-token')}`,
                },
                baseUrl: 'http://test.loc/file-manager/',   // overwrite base url Axios
                windowsConfig: 2,                           // overwrite config
                lang: 'de',                                 // set language
                translation: {                              // add new translation
                    name: de,
                    content: {
                        about: 'Über',
                        back: 'Zurück',
                        ... see lang file structure
                    },
                },
            };
        },
    }
...


Available Props

settings - Object

Attribute Type Example Required Description
headers Object {'X-Requested-With': 'XMLHttpRequest'} No Axios Headers
baseUrl String 'http://my_url:80/file-manager/' No Axios base URL
windowsConfig Int 2 No 1 - only one manager, 2 - manager with folder tree, 3 - two managers
lang String 'de' No Set language
translation Object { ... see lang file structure }, No Add new translation

CSRF, Bootstrap, Bootstrap icons

Don't forget to add a csrf token to head block in your Laravel view and add bootstrap 5 and bootstrap icons 5 styles

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Example -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Laravel mix environment variables

// set baseUrl
MIX_LFM_BASE_URL=http://my-url.loc/file-manager/

// if you don't want to use csrf-token - you can off it
MIX_LFM_CSRF_TOKEN=OFF



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap