前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >拖拽上传和记住密码问题

拖拽上传和记住密码问题

作者头像
wade
发布2020-11-03 15:45:20
9920
发布2020-11-03 15:45:20
举报
文章被收录于专栏:coding个人笔记coding个人笔记

最近一直在开发项目,不需要加班,但是要一整天都撸代码,慢慢的居然发现自己对于业务代码有了一些进步,尤其是对elementUi的使用。

上传,之前从来没有说需要提示有超出大小范围或者是文件不支持的,因为都默认是后台管理,一些大家默认的东西就不需要。这次不行,要提示,而element上传拖拽被过滤了,类型不符合的不会有反应,内部已经过滤了。不限制accept可以,但是点击上传的时候又没办法过滤。一开始想着要不要换个控件,后来又想着能不能覆盖element的方法,手动触发handleClick,试过了效果都不理想,于是自己写了一个,其实上传真的很简单,包括拖动文件上传:

<div

@dragover="fileDragover"

@drop="fileDrop"

@click="handleClick">

<p>点击或将文件拖拽到这里上传</p>

<input

type="file"

accept=".png, .jpg, .jpeg"

multiple

@change="handleChange"

ref="input"

style="display: none;"/>

</div>

fileDragover(e) {

e.preventDefault();

},

fileDrop(e) {

e.preventDefault();

const files = e.dataTransfer.files;

},

handleChange(e) {

const files = e.target.files;

e.target.value = "";

}

很简单就实现了,再去看看element的拖拽上传,就是多了一些逻辑和dragleave。

不知道你们有没有遇到过浏览器记住密码只会,输入框是密码的情况下会出现自动填充或者出现下拉选择:

很早之前出现过一次自动填充,自动填充是多加一个input输入框,下拉选择是这次才出现,花了蛮长时间去查解决办法,忘记是哪里看见的方法了,引用外部的字体文件ttf,然后:

@font-face {

font-family: "password";

src: url(../../assets/css/PasswordEntry.ttf);

}

.pwd-input {

font-family: "password";

}

输入框type改成text,加上class,输入的时候字体就会变成type是password那样,只是有一点问题,如果你placeholder里面提示密码的限制,如果是数字会变成黑点。另外就是如果要兼容ie,字体文件要另外一个格式,这边暂时是没有处理。

很久没有学习了,这段时间确实是放松了,今天先水一篇文章,慢慢的开始继续学习。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-10-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档