vs-code-slider

v0.0.9

Published

6 months ago

基于vue3实现仿vs-code的侧边文件管理菜单

Downloads

0High
0Medium
0Low

xc1255178487

vs-code-slider

基于vue3实现仿vs-code的侧边文件管理菜单

使用


pnpm install vs-code-slider

查看demo


clone 代码到本地

pnpm install vs-code-slider

pnpm dev

效果如下：

1. 文件类型的图标：

| 文件类型 | 图标 | 文件类型 | 图标 | 文件类型 | 图标 | 文件类型 | 图标 | |----------------------|---------------------------------------------------------------|-----------------|------------------------------------------------------------------|-----------------|-----------------------------------------------------------------|-----------|----------------------------------------------------------------| | .c | | .cpp | | .cs | | .cjs | | | .css | | .git、.gitignore | | .go | | .html | | | .png、.jpeg、.jpg、.gif | | .java | | .js | | .json | | | .less | | .license | | .log、.changelog | | .md | | | .npm | | .python | | .react | | readme.md | | | .scss、.sass | | .setting | | .svg | | .tpl | | | .ts | | .tsconfig | | .vue | | .xml | | | .yaml | | .tsconfig | | 默认 | | | |

如不满足，可以issues留言增加

如何使用组件呢，参考demo：

<script setup lang="ts">
import VsCodeSlider from 'vs-code-slider';
import {ref} from 'vue';

const arr = ref([
    'vue/d.js',
    'vue/README.md',
    'vue/12.vue',
    'vue/test.md'
]);

</script>

<template>
    <VsCodeSlider
        :files="arr"
    />
</template>
<style scoped>
</style>

组件的props说明如下：

| prop | 类型 | 可选值 | 默认值 | 说明 | |-------------|-----------------|-----|-------------|---------------------------------------------------------| | baseDir | string | - | - | 展示在组件左上角的名称，当不传时，默认是file解析之后的最外层目录名称，如果解析之后有多个，则显示'未命名' | | files | Array<string> | - | [] | 文件数组,当前支持的是完整文件的path组成的数组，具体可以参考例子,组件会自动对层级进行处理和排序 | | theme | string | - | light/dark | 暗黑主题和白色主题 | | width | number | - | 280 | 侧边栏的默认宽度 | | defaultOpen | bool | - | false | 是否默认展示一级目录 | | currentFile | sting | - | 最后一次点击的文件名称 | 当前正在查看的文件，为了顶部的定位到当前文件来使用 | | bgColor | string | - | - | 侧边栏的背景色，优先级最高 | | disabled | bool | - | false | 是否禁用操作 |