element-ui制作文件夹命名仿window效果提示el-tooltip

element-ui制作文件夹命名仿window效果提示，即当输入特殊字符“？”、“、”、“/”、“╲”、“*”、“<”、“>”、“|”等，禁止输入，并且弹出气泡提示。

效果如上图，当命名文件夹时，提示，并且输入框不能录入特殊字符。

<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>

其中，disableddata控制el-tooltip的显示，editName是输入框的值。

@input.native ="editName = retrim(editName)"  在input输入时检验数据（即作用：禁止输入非法字符）；

@focus="selectText($event)"为了输入框获取焦点时，可以全选所输入的文本，即默认是“我的文件夹”，你可以再重命名，帮你默认全部选中。

Ondragstart="return false"这个页面做了拖拽上传文件的功能，输入框中禁止拖拽文本。

其他必要参数，详见element-ui框架el-tooltip组件使用的api，在此不再多做赘述。

下面详细看一下两个方法函数：

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

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

以上方法，如有问题，欢迎指正，抛砖引玉，提供个思路。

实现仿windows文件夹命名这个提示效果的关键总结一下：

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

以上小小的功能点做个记录和分享，下期我会记录分享一下——拖拽上传的小功能。

欢迎评论和关注我哦！~~~