效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择电脑文件夹</title>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<button @click="openFolder">打开文件夹</button>
<el-tree v-if="list.length" :data="list" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<script>
window.vm = new Vue({
el: "#app",
data() {
return {
list: [],
defaultProps: {
children: "children",
label: "name",
},
};
},
methods: {
async openFolder() {
let handle = await showDirectoryPicker( /* {multiple: true} */ );
await this.handleHandler(handle);
this.list = [handle];
this.$forceUpdate();
console.log(handle);
},
async handleHandler(handle) {
await processHandler(handle);
async function processHandler(handle) {
if (handle.kind === "file") {
return;
}
handle.children = [];
let iter = await handle.entries();
for await (let entry of iter) {
await processHandler(entry[1]);
handle.children.push(entry[1]);
}
}
},
handleNodeClick() {},
},
});
</script>
</body>
</html>