vue-win-explorer v1.0.2

仿资源管理器 vue-win-explorer

vue-win-explorer

项目截图

效果截图

<div align=center><img  src="https://gitee.com/h25094152/vue-win-explorer/raw/master/doc/image/001.png"/></div>

## 项目引用
``` bash
直接使用导入包
npm i vue-win-explorer
npm install --save vue-win-explorer

项目使用

main.js 导入组件
import  explorer from 'vue-win-explorer';//引入组件
Vue.component('title-small',explorer.titleSmall)//注册组件
Vue.component('vue-explorer',explorer.vueExplorer)//注册组件

APP.vue 使用

<template>
  <div id="app">
    <!--  全局引用直接使用注册的标签即可，content内容为传给组件的值-->
    <title-small class="top-30" content="标题-全局" @backFun="backFun" ></title-small>

    <vue-explorer
      mode="normal"
      :data-arr="dataArr"
      :selected-arr.sync="selectedArr"
      :action-arr="actionArr"
      @clickFolder="clickFolder"
      @clickFile="clickFile"
      @dragMove="dragMove"/>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
        dataArr: [{
            key: 0,
            name: 'folder',
            type: 'folder',
            data: {
                time: '2020.02.09'
            }
        },
            {
                key: 1,
                name: 'doc',
                type: 'doc',
                data: {
                    time: '2020.02.09'
                }
            },],
        selectedArr: [],
        otherColumnArr: [
            {
                label: '时间',
                key: 'time'
            }
        ],
        actionArr: [
            {
                label: '下载1',
                handler (data) {
                    console.log('点击了下载按钮')
                    console.log(data)
                }
            },
            {
                label: '下载2',
                handler (data) {
                    console.log('点击了下载按钮')
                    console.log(data)
                }
            },
            {
                label: '下载3',
                handler (data) {
                    console.log('点击了下载按钮')
                    console.log(data)
                }
            }
        ]
    }
  },
    methods:{
        backFun(data){
            console.log("backFun = ",data);
        },
        clickFolder () {
            console.log('clickFolder')
        },
        clickFile () {
            console.log('clickFile')
        },
        dragMove (folder, data) {
            console.log(folder, data)
        }
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Build Setup

下面是工程的安装开发
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.