![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 56
前端技术栈
看面试题 【web前端面试小助手】 小程序
展开
-
封装axios的两种方式
作为前端工程师,经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性,有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。原创 2023-10-24 18:01:57 · 502 阅读 · 0 评论 -
js通过身份证号获取出生日期,性别,年龄
/* * 当type=1时获取出生日期,type=2时获取性别,type=3时获取年龄 * */ var idCard = '' //身份证号 function IdCard(IdCard, type) { if (type === 1) { //获取出生日期 let birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + ...原创 2022-04-25 16:51:47 · 1940 阅读 · 0 评论 -
[Vue] 写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件。先看效果控件将具有1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新2. 取消上传使用Element的uploader控件,上传文件的行为和样式不用自己全部实现,使代码简化。且有足够的扩展性,文件传输请求的代码可以基于axios完全自己重写。我们只用关心核心代码。先分享一款实用前端面试题库小程序 手机刷题收藏以后用的上 微信搜索 MST题宝库搭...原创 2022-04-21 09:25:49 · 649 阅读 · 0 评论 -
前端解析支付宝返回form表单,自动跳转支付
pc端 前端对接支付宝支付-前端获取支付宝返回的form 表单以及submit提交表单,自动跳转支付页面扫码支付返回的form数据大概如下,(可能会有差别)前端实例代码:项目中用到了微信扫码,支付宝扫码支付。前端调取支付宝接口(后台进行了封装,没有直接调取支付宝接口)。调用接口返回数据中,会有一串form表单字符串返回,前端需要做的就是把这串form 表单字符串通过appendchild 方法添加到当前页面中,并且执行这个表单的submit() 方法,表单提交以后,会自动跳转到支付宝扫码支付页面原创 2022-04-19 22:17:29 · 5485 阅读 · 7 评论 -
Vue3和Mobx5都使用Proxy了,你更应该了解Proxy
推荐一款面试题小程序 微信 搜索 MST题宝库vue3.0的pre-alpha版代码已经开源了,就像作者之前放出的消息一样,其数据响应这一部分已经由ES6的Proxy来代替Object.defineProperty实现,感兴趣的同学可以看其实现源码,同样Mobx5也使用Proxy来实现数据响应式。vue和mobx都开始使用Proxy来实现数据的响应式了,所以有必要抽点时间了解下Proxy。Object.defineProperty的缺陷说到Proxy,就不得不提Obj...原创 2022-04-19 09:21:08 · 493 阅读 · 0 评论 -
vue 自己制作的 刻度尺 方便简洁好用
<template> <view class="scan"> <block v-for="(item,index) in section" :key="index" class=""> <text >{{(section-index)*(numbers/section)}} —</text> <text v-for="(item,l) in 10" :key="l">-</text> </blo原创 2021-05-14 11:50:20 · 2566 阅读 · 0 评论 -
Ueditor 出现请求后台配置项http错误,上传功能将不能正常使用!问题解决
问题描述:请求后台配置项http错误,上传功能将不能正常使用!问题分析:出现这种提示要不就是ueditor.config.js配置不对,要不就是config.json配置不对。问题解决:1、ueditor.config.js的serverUrl配置不对。 myConfig: { // 编辑器不自动被内容撑高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: 500,原创 2021-04-06 15:07:46 · 4020 阅读 · 0 评论 -
Vue.directive指令实现按钮级别权限控制
新建 role.js 文件import Vue from 'vue';// 获取用户角色, 可以从cookie中获取function getRole() { return ['admin']}// 校验用户权限,传入一个数组function authority(role) { return getRole().includes(role[0]) // return role.includes(getRole())}// 注册一个全局自定义指令 `v-role`Vue.di原创 2021-03-29 10:49:37 · 605 阅读 · 0 评论 -
vue项目中audio标签的音乐无法播放 audio 标签自动播放不起作用或者 play() 报错 音频播放时出现 Uncaught (in promise) DOMException: play
vue项目中audio标签的音乐无法播放问题:vue项目中audio标签直接添加src时音乐无法播放:在网上找了个中办法, 说设置浏览器,各种坑,以下实现方法如下如:1、这样添加时,可以正常播放,然而<audio controls="controls"> <source src="http://images.81dd.cn/5fc46995d0b34fbf9c85bc35f222dec0" type="audio/ogg"> <source src="htt原创 2021-03-08 18:07:28 · 9634 阅读 · 7 评论 -
Vue 之 多个路由绑定同一组件造成created不执行的解决办法、created没有执行的问题
watch: { '$route' (to, from) { console.log(this.$route.params) // created to do sth. }},查看前端面试题原创 2020-12-12 11:33:20 · 564 阅读 · 0 评论 -
element ui cascader 动态加载回显问题解决方法
props: { lazy: true, async lazyLoad(node, resolve) { } }但是当我赋值给cascader的时候,cascader却不显示了。只要重新加载下cascader组件就行。<el-cascader v-if="isShowAddressInfo" v-model="form.addressInfo" :props="props"></el-cascader>async updateAddress(data) {原创 2020-12-07 14:14:08 · 2834 阅读 · 2 评论 -
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
1、html在el-table添加 @selection-change=“handleSelection” <el-table ref="multipleTable" :data="goodslist" tooltip-effect="dark" @selection-change="handleSelection" > <el-table-column type="selection" width="55"></el-table-colum原创 2020-12-03 10:00:37 · 1271 阅读 · 1 评论 -
vue+element cascader联选择器三级类目 动态加载
当选中某一级时,动态加载该级下的选项。html代码 框里面只显示三级类目 删除:show-all-levels=“false” 就会显示全部路径<el-form-item label="商品类目:" v-if="navstate==-1"> <el-cascader v-model="preSearchForm.class" :props="props" :show-all-levels="false"></el-cascader> </el-form原创 2020-12-01 13:47:33 · 652 阅读 · 1 评论 -
input 输入 限制 大全
1、只能输入数字<el-input onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>收集中…原创 2020-11-30 15:58:18 · 7455 阅读 · 9 评论 -
vue 中修改contenteditable=“true” 属性 , vue中给dom 元素 添加 contenteditable属性
找到需要添加或修改的元素的类<div class="w-e-text"></div> var edit=document.getElementsByClassName('w-e-text')[0] edit.setAttribute('contenteditable','false');即可修改完成扫码获取 1000+条 前端面试题 收藏以后面试用得上...原创 2020-11-30 15:30:18 · 1760 阅读 · 0 评论 -
vue js对象拷贝的方法简单易用
对象拷贝的方法是一个难点,尤其是深拷贝。建议把代码都运行下,帮助理解拷贝。一. json方法适合情况: JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串, 再JSON.parse() 转为json数组缺点: a. 如果你的对象里有函数, 函数无法被拷贝下来 b. 无法拷贝copyObj对象原型链上的属性和方法var obj = { x: 1, y: { a: 1, b: 0, c原创 2020-11-27 19:00:08 · 2135 阅读 · 0 评论 -
element 订单列表中 实现多个倒计时(vue+js)
实现场景:订单列表中多个倒计时(vue)<template> <div class=""> <div v-for="(item,index) in list" :key="index">{{item.countDownTime }}</div> </div></template><script>export default { data() { return { list:原创 2020-11-25 19:08:42 · 1693 阅读 · 0 评论 -
vue中 element 实现点击复制粘贴功能
copyUrl(data){ let url = data; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象; console.log(oInput.value) document.execCo.原创 2020-11-25 10:36:33 · 1388 阅读 · 0 评论 -
js将数组中相同的元素进行分组 必看
function sortClass(sortData){ const groupBy = (array, f) => { let groups = {}; array.forEach((o) => { let group = JSON.stringify(f(o)); groups[group] = groups[group] || []; groups[group].push(o); }); return Object.原创 2020-10-20 11:04:35 · 4165 阅读 · 4 评论 -
web前端性能优化,这几点让你的代码质量变高
导语:你是否有过自己的api请求很慢,每次都要加载很久,首屏加载空白页面几秒钟,图片加载慢等等情况,这时候你就需要对自己的web项目进行优化。1,减少HTTP请求次数,合理使用http缓存减少http的主要办法是合并CSS、合并javascript、合并图片。只要http请求次数减少,web的性能就会较大的提升。2,使用代码压缩现在wepack等工具,都能够通过npm run built,将代码压缩成一个文件,极大的减少了web应用的大小,使得页面打开的速度变快,甚至提高50%。3,使用浏览器缓原创 2020-09-28 18:17:44 · 294 阅读 · 0 评论 -
uni-app底部输入框被软键盘部分挡住的解决方案
解决方案在输入框加上class=“uni-input” 和cursor-spacing=“0”<input class="uni-input" cursor-spacing="0"/>cursor-spacing 设置的值越大 距离键盘越远获取前端面试题小程序原创 2020-09-03 11:47:53 · 2922 阅读 · 2 评论 -
ES6 数组中的对象去重
用set 去重let person = [ {id: 0, name: "小明"}, {id: 1, name: "小张"}, {id: 2, name: "小李"}, {id: 3, name: "小孙"}, {id: 1, name: "小周"}, {id: 2, name: "小陈"}, ];let obj = {};let peon = person.reduce((cur,next) => { obj[.原创 2020-08-28 11:58:42 · 1660 阅读 · 0 评论 -
vue 禁止input 输入中文,只能输入数字 兼容ios
vue 禁止input 输入中文,只能输入数字 兼容ios<input type="number" class="relative t--2" placeholder="请输入" onkeyup="value=value.replace(/[^a-z0-9_]/g,'');" v-model="item.price">查看前端面试题 小程序 微信扫码原创 2020-07-15 17:35:43 · 1721 阅读 · 0 评论 -
金额输入限制 只能输入数字和小数点
金额输入限制 只能输入数字和小数点只需要设置 type=‘digit’ 即可<input type='digit' class='n-input' placeholder='请输入充值金额' bindinput="inputedit" adjust-position="true" value="{{moneyNum}}"/>您可以查看前端面试题小程序,大量面试题免费看...原创 2020-05-26 09:27:51 · 898 阅读 · 0 评论 -
vue中子组件的created、mounted钩子中获取不到props中的值问题
export default { props: ['chartData'], data(){ return { cData: [] } }, watch: { //正确给 cData 赋值的 方法 chartData...原创 2020-04-26 10:46:23 · 5558 阅读 · 0 评论 -
输入延迟搜索
防止连续请求data{ newsetTimeout:null}method:{ // 输入搜索 changeinput(){ clearTimeout(this.newsetTimeout) this.newsetTimeout=setTimeout(()=>{this.getdatamdph()},500) },}体验前端面试题小程序...原创 2020-04-21 16:24:30 · 411 阅读 · 0 评论 -
正则式 限制输入框不能输入中文
原文地址<input οnkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"/>原创 2020-04-10 09:49:03 · 2005 阅读 · 0 评论 -
Vue3.0项目报错: history模式下 Uncaught SyntaxError: Unexpected token
原文地址history模式下 vue.config.js中publicPath不要设置为相对路径正确如下原创 2020-04-07 10:34:17 · 1715 阅读 · 3 评论 -
Vue2 中使用 highlight 代码高亮插件
安装通过npm安装,淘宝镜像用cnpm命令npm install --save vue-highlightjs使用 vue-highlightjs在主入口 文件 (如 main.js):// 导入 Vue 和 vue-highlgihtjsimport Vue from 'vue'import VueHighlightJS from 'vue-highlightjs'// 告诉Vue ...原创 2020-03-23 16:35:41 · 1286 阅读 · 0 评论 -
vue实现文件下载
var reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href reader.onload = function (e) { var a = document.createElement('a'); a.download ...原创 2020-03-06 18:04:16 · 1460 阅读 · 0 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent comp
最近用vue练习项目,想在子组件中使用props中的值,但是在mounted中没有办法拿,最后终于搞明白了这里我简单说一下父组件给子组件传值的两种情况(静态跟动态的数据)。父组件中:<template> <div class="order"> <!-- 子组件 父组件通过属性传值 属性用-链接,值用驼峰命名--> <or...原创 2020-01-01 15:59:51 · 1313 阅读 · 0 评论 -
vue使用 element-ui 字体文件fonts/element-icons.ttf | fonts/element-icons.woff 加载报404 异常
只需要在下载字体文件放到项目即可在项目中public/fonts目录下下载element的字体文件字体文件下载地址原创 2019-12-25 11:39:17 · 12773 阅读 · 0 评论 -
js判断数组中对象是否存在某个值
var arr = [{name: “回锅肉”,value: “0”}, {name: “小炒肉”,value: “1”}]var result = arr.some(function(item) {if (item.name == “小炒肉”) {return true;}})console.log(result);//result 为true时表示数组内已存在 fals...原创 2019-06-12 11:12:58 · 6757 阅读 · 0 评论 -
JS控制input输入特殊字符
JS控制不能输入空格<input type="text" οnkeyup="this.value=this.value.replace(//s/g,'')" οnpaste="this.value=this.value.replace(//s/g,'')" >JS 控制不能输入特殊字符<input type="text" οnkeyup="this.value=this....原创 2019-12-11 13:38:38 · 1396 阅读 · 0 评论 -
vue input输入框长度限制
vue input输入框长度限制今天在开发登录页时,需要设置登录输入框的长度,输入类型为number<input type="number" maxlength="11" placeholder="请输入手机号">发现在这样写时,输入长度限制并没有生效,经过测试发现在type为number或者text时,设置maxlength参数并不会生效。<input type="n...原创 2019-12-09 18:15:08 · 5554 阅读 · 0 评论 -
VUE获取元素高度的方法
Vue获取元素高度**小程序中可体验**// 当前区域<div ref="element"></div> // 获取高度值 (内容高+padding+边框)let height= this.$refs.element.offsetHeight; //100// 获取元素样式值 (存在单位)let height = window.getComputed...原创 2019-12-06 09:26:19 · 3953 阅读 · 0 评论 -
子组件调用父组件的方法并传递数据
$emit 子组件<template> <button @click="emitEvent">点击我</button></template><script> export default { data() { return { msg: "我是子组件中的数据" } },...原创 2019-11-23 18:10:36 · 694 阅读 · 0 评论 -
uni-app 全局变量实现的4种方式
一、公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意:这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 base.js 用于定义公用的方法。const websiteUrl = 'http://www.javanx.cn'...原创 2019-10-25 09:52:30 · 6178 阅读 · 1 评论 -
vue + element 新手搭建项目初始化
首先安装好node.jsnpm安装vue$ npm install vue 安装vue脚手架后生产模板项目全局安装 vue-cli$ npm install --global vue-cli创建一个基于 webpack 模板的新项目$ vue init webpack my-project进入项目目录内安装所有依赖包$ cd my-project$ npm install...原创 2019-10-21 14:11:28 · 520 阅读 · 0 评论 -
在vue js中for循环使用
1、for(let item of response.data.result) {用item操作每一条数据。}item:定义的每一条的变量response.data.result:要循环的数组2、response.data.result.forEach((item, index) => {用item操作每一条数据。})response.data.result:要循环的数组i...原创 2019-06-26 08:59:45 · 50517 阅读 · 2 评论