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,就会显示提示,输入正确时则不提示。
以上小小的功能点做个记录和分享,下期我会记录分享一下——拖拽上传的小功能。
欢迎评论和关注我哦!~~~