基于vue和element-ui开发仿桌面文件夹组件-摩杜云开发者社区

📒 背景

最近项目中需要制作一个和window系统文件夹很像的组件（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。

基于vue和element-ui开发仿桌面文件夹组件_仿windows

🔍需求功能

1.文件夹目录形式展示，类似windows系统的文件夹；

2.文件夹名校验文件夹名称，不允许特殊符合；

3.文件夹名称字数不超过225个字符；

👣设计开发

先说一下我的开发环境版本：

基于vue和element-ui开发仿桌面文件夹组件_仿windows_02

node: v11.3.0

npm: 6.4.1

vue：2.5.11

如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来~

1.基于vue2和element-ui开的的联合el-input和el-tooltip组件的复合组件：

<el-tooltip content="文件名中不能有下列符号：“？”、“、”、“/”、“╲”、“*”、“<”、“>”、“|”。"
            placement="bottom" effect="light"  :hide-after="2000"
            :manual="$store.state.isTRUE" v-model="disableddata" >
    <el-input
            type="textarea"
            autosize
            maxlength="225"
            show-word-limit
            placeholder="请输入名称"
            v-model="editName"
            @input.native ="editName = retrim(editName)"
            @focus="selectText($event)"
            style="width: 205px;"
            Ondragstart="return false"
    >
    </el-input>
</el-tooltip>

2.其中重要js逻辑如下：

//重命名的输入框 校验文件名称
retrim(name){
   if(name){
      let symbol =  /[\?\、\/\\\*\<\>\|\:\"]/g;
      this.disableddata = symbol.test(name);
      return name.replace(symbol,"");  //把有问题的符号给替换成空字符串
    }
  }

 //点击重命名的输入框 文字全选
selectText(e){
  e.currentTarget.select();
},

然后就做出来了类似windows系统文件夹命名功能类似的组件啦：

基于vue和element-ui开发仿桌面文件夹组件_element-ui_03

elment-ui组件el-tooltip组件中manual设置为true，当校验名字时this.disableddata = symbol.test(name);即输入错误的字符就会值为true,就会显示提示，输入正确时则不提示。

🚀写在最后

如果本文中有bug、逻辑错误，或者您有更好的优化方案欢迎评论联系我哦！~关注我持续分享日常工作中的组件设计和学习分享，一起进步加油！

以上小小的功能点做个记录和分享。