![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端功能实现
文章平均质量分 57
ironybbb
这个作者很懒,什么都没留下…
展开
-
JS在web端获取机型片段代码
JS在web中获取机型的片段代码。通过ua分解出机型(iPhone只能识别出iPhone)、系统版本原创 2022-11-18 10:11:12 · 666 阅读 · 0 评论 -
elementUI+Vue,使用ref区分不同的el-upload,清除其缓存保证能够多次上传选择文件。(多个el-upload时注意区分
需求:在表格中嵌套使用多个el-upload组件,可能会需要多次选择。问题分析:单独使用el-upload时,想要在隐藏上传列表的条件下实现多次上传,就需要在每次选中文件时清除上次选择的文件缓存。使用this.$refs.[refname].clearFiles();举例: <el-upload ref="picupload" class="avatar-uploader" action="#原创 2022-01-04 17:16:40 · 4399 阅读 · 0 评论 -
vue+elementUI使用node-xlsx实现选择excel并解析其数据,导入显示在table组件中。
VUE,选择excel文件,去解析和导入数据到表格组件里面。原创 2021-12-23 16:27:07 · 1428 阅读 · 2 评论 -
Vue中调用qrcodejs2生成二维码,并将canvas转为图片格式使得移动端使用时可长按识别。(含批量生成二维码时遇到的坑,封装组件
业务需求,需要使用JS将url链接转为二维码图片。查到可以使用qrcodejs2传入内容、大小获得一个画布上的二维码。但是canvas标签在移动端上无法使用长按识别的功能,所以还需要把canvas对象转换为图片img标签。 网上找到的相关资料大多是通过html2canvas来将二维码转为图片的,但通过这种方法,总有一些奇奇怪怪的问题,比如有时候明明转成了base64,但是页面不显示。后来还是选择直接转为image,使用起来也更灵活。首先安装qrcodejs2:npm install qrcodej.原创 2021-11-26 13:22:13 · 2324 阅读 · 1 评论 -
VUE+Axios+ElementUI 分页请求第一页首页展现数据个数比后一页的少一项。limit、offset分页请求
因为设计图就是列表第一项占了位为添加按钮,如图:从第二页开始就没有这个添加项了。原本的思路是第一页设置请求的limit是3,换页时,当前页不是第一页时请求的limit设为4,就可以实现效果。初始代码:<div class="fenye"> <el-pagination background :current-page="taskDataQuery.currentpage" :page-size="taskD原创 2021-10-18 09:35:57 · 677 阅读 · 2 评论 -
vue使用JavaScript的Number方法或正则表达式进行表单验证,判断值是否为数字(包括整数和小数),验证值只能为小数点后一位
var a = "1.56";var b = "asf"var c = Number.parseFloat(a) //1.56var d = Number.parseFloat(b) //NaNvar e = Number.isNaN(c) //falsevar f = Number.isNaN(d) //trueNaN --》not a number,不是一个数,但是属于number类型所以,当使用parseFloat()转化字符串的时候,当值为非数字类型,结果为NaN。那么,我们就可以通原创 2021-10-13 10:26:32 · 4845 阅读 · 1 评论 -
VUE+ElementUI的表单el-from表单验证二选一必填项,并且满足条件后会清除表单验证提示。
效果图:使用Element-UI的自定义验证实现。这里面有个坑是,两个input输入框都点出了提示信息,填写任一输入框之后只有操作的那一项的验证提示消失了,不主动清除另一项的验证提示就会一直存在,观感很不好。如图:所以,在验证成功后要强制清除另一方的验证提示。本来应该分别清除的,我这里懒得写那么长了干脆一起清掉哈哈哈。现在,填入其中一项效果如图:HTML: <el-form ref="form" class="forminfo原创 2021-09-16 17:54:35 · 6125 阅读 · 1 评论 -
VUE+ElementUI图片上传的判断格式、大小、尺寸(即宽高比)完整实现。
需求分析:表单中需要上传图片,并对图片做出限制:1)上传图片大小不能超过 2M;2)上传图片格式只能是jpg或png;3)上传图片的宽高比例为2:1。效果如图所示:利用on-change的钩子写判断方法。HTML: <el-form-item label="LOGO" prop="logo_src"> <el-upload ref="upload" class=原创 2021-09-16 17:26:22 · 10039 阅读 · 2 评论 -
Vue中使用better-scroll插件实现移动端字母侧边导航滚动条(包括列表按首字母排序、点击导航跳转位置)完整实现
实现效果如上图所示。首先引入better-scroll的组件:1、npm安装better-scroll插件。npm install–save better-scroll2、在文件中引入better-scroll。import BScroll from ‘better-scroll’;排序使用的是pinyin的包,将字符串转成拼音,就可以通过字符串截取取出拼音首字母,这样就可以进行首字母排序了。1、安装方式:npm install pinyin2、在应用的.vue文件中单独引入var pi.原创 2021-08-30 16:57:14 · 1795 阅读 · 1 评论 -
vue移动端搜索功能的历史搜索(最近搜索)完整功能实现,重复搜索项会更新在最前面。(利用localstorage)
实现效果如上所示。html代码块:<template> <div id="Container" style="min-height: 100%; background-color: #fff"> <searchbox/> <!-- 最近搜索 --> <div class="history" v-show="show"> <p class="histText">最近搜索</p> .原创 2021-08-24 15:01:12 · 1274 阅读 · 1 评论