
Vue
以实战为线索,透步深VUE开发各个环节掌握前端常用性能体验优化思路,打造完整的前端工作流,提升工程化编码能力和思维能力。
codernmx
❤️砥砺前行,不负余光,永远在路上❤️
展开
-
记录一次uniapp中实现选择上传其他文件
相关插件:https://ext.dcloud.net.cn/plugin?id=4109https://ext.dcloud.net.cn/plugin?id=1015从插件市场导入可以直接使用,下载插件的话引入一下组件,注册一下选择文件写个方法调组件内部的方法就行。原创 2022-10-24 16:00:59 · 1059 阅读 · 0 评论 -
实现一个待办提示,包含监听页面滚动到底部重新获取数据
回想起上次写博客还是上次了,本次需求是实现一个代办提示,点击按钮弹出列表,本来是要结合websocket完成的,我这里还没有调试完成那些东西,先做个记录,包含监听页面滚动效果,加载分页数据。实现效果图。原创 2022-09-14 12:02:55 · 353 阅读 · 0 评论 -
解决[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “previewList”网上好多说是直接data中赋值给另外一个变量,好像没用,我这直接.原创 2022-06-23 15:49:43 · 711 阅读 · 0 评论 -
解决报错 We‘re sorry but doesn‘t work properly without JavaScript enabled. Please enable it to continue.
vue项目打包发布到线上之后报错 修改router模式之后重新打包上传就可以了。原创 2022-06-12 13:50:48 · 45764 阅读 · 10 评论 -
element ui el-table 表头内容超出省略,悬浮时显示(Tooltip 文字提示效果)
element ui el-table 表头内容超出省略,悬浮时显示(Tooltip 文字提示效果)原创 2022-06-08 16:48:07 · 5423 阅读 · 0 评论 -
微信公众号网页用户授权,拿到用户唯一openid和access_token,换取用户信息
❤️砥砺前行,不负余光,永远在路上❤️目录前言一、配置回调地址二、用户同意授权,获取code三、前端传回code 换取openid结语前言说实话前几天好想看到用户信息那玩意接口又改了,有点e心了就,老改来改去的。官方网页授权文档:点击直达步骤;第一步:用户同意授权,获取code第二步:通过code换取网页授权access_token第三步:刷新access_token(如果需要)第四步:拉取用户信息(需scope为 snsapi_userinfo)一、配置回调地址二、用户.原创 2022-05-17 17:33:33 · 2021 阅读 · 0 评论 -
vue中防抖函数,element select组件
❤️砥砺前行,不负余光,永远在路上❤️目录前言一、vue中防抖函数前言节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时一、vue中防抖函数使用场景:这里下拉框多选之后,三秒获取后边条件的列表数据(根据前边选择的内容获取新数据),直接使用@change 的话选一个就会请求数据。//防抖函数(select改变)debounce(func, wait = 3000, immediate = false).原创 2022-04-24 10:37:56 · 1112 阅读 · 0 评论 -
uniapp 开发的app检测版本实现自动下载更新(展示下载进度)
目录前言检测是安卓还是ios版本号对比直接调用默认浏览器打开下载地址的方法完整检测更新和下载文件代码data部分前言组件库环境:uview 1x检测是安卓还是ios首先在onload中检测是安卓还是ios,ios的话 要做啥操作另外修改一下,这里主要是针对apk的更新onLoad() { //检测更新 const type = uni.getSystemInfoSync().platform console.log(type, '机型') type == 'ios' ? '' : this原创 2022-04-12 12:36:40 · 6612 阅读 · 2 评论 -
canvas节点转换成img
问题描述项目发货单中生成二维码,使用的是qrcode,调用window.print(),不显示二维码部分,这玩意是用的一个canvas生成的二维码图像,这里将canvas转为img 就可以显示了。解决方案://从 canvas 提取图片 image canvasToImage(canvas) { //新Image对象,可以理解为DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base原创 2022-04-07 10:32:05 · 1596 阅读 · 0 评论 -
nodejs+express实现用户登录或者注册通过邮箱发送验证码(redis验证)
❤️砥砺前行,不负余光,永远在路上❤️❤️砥砺前行,不负余光,永远在路上❤️简要目录实现思路一、后端部分(文件目录可以看图2)1.redis部分2.nodemailer部分3.发送邮件的接口4.后端校验验证码是否有效二、前端部分(使用的element-admin)1.正则验证输入的是否是邮箱号2.前端login页面完整代码可以参考(有部分字段需要修改),这个包括60秒倒计时的效果。总结实现思路有帮助的话各位哥哥可以点个关注收藏哦后端生成六位随机验证码,存入redis(key:邮箱号,v.原创 2022-04-06 16:33:51 · 5352 阅读 · 7 评论 -
vue中富文本回显问题(tinymce)
this.$nextTick(() => window.tinymce.get('节点id').setContent('回显的值'));原创 2022-04-01 11:39:38 · 4337 阅读 · 2 评论 -
前端将Html中某一个Dom节点转换为pdf格式文件、前端生成pdf(vue)
## js使用window.print()打印某一个Dom节点直接使用window.print()会调用浏览器的打印,打印内容是整个页面(body)的内容,如果采用生成新元素替换原来body 在替换回去的话会导致原有的事件丢失掉,可以使用新元素遮罩原来的打印完成移除元素。原创 2022-03-31 15:58:08 · 2063 阅读 · 1 评论 -
使用vue制作网页导航栏
一、思路动态添加激活样式:class="index == active?'active':''"我是把导航的每一项都列在数据项里边的主要事件<div v-for="(item,index) in navList" :key="index" :class="index == active?'active':''" @mousemove="active = index" @mouseout="active = null" @click="toPage(index)">.原创 2022-03-20 23:46:38 · 13543 阅读 · 7 评论 -
百度地图API根据经纬度绘制轨迹图(Vue附源码)
目录导入百度地图绘制轨迹左侧点击事件添加窗口页面完整代码有用可以点个关注,收藏!!vue版本百度地图官方组件:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage这里不是使用的这种办法,个人感觉不是很完整,需要的自己研究下。导入百度地图importBaiduMap () { var script = document.createElement('script'); script.src = 'https://api.map原创 2022-03-17 22:54:43 · 6005 阅读 · 0 评论 -
解决uniapp windows下ios真机调试问题(无法连接手机)
使用爱思助手(修复驱动)连接成功手机正常来说windows下调试ios手机是需要安装iTunes 和iTools 能够正常信任电脑连接手机,hbuilderx就可以连接ios的了iTunes下载地址:https://www.aliyundrive.com/s/84rjrLSowEu (阿里网盘64位)官方下载地址:https://support.apple.com/downloads/itunes(很慢)iTools 下载地址:https://www.itools.cn/uniapp官方文档说明:原创 2022-03-17 21:43:25 · 4282 阅读 · 0 评论 -
vue element admin、vue 使用富文本编辑器(Tinymce)(实现汉化)
当时要实现这个 功能的时候,不知道 element admin 直接内置了 富文本编辑框,还想着自己去找一个来着,后面看了element admin 官网才发现Tinymce 这个玩意儿是可以直接拿来用的,还是很方便官网:https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/rich-editor.html#%E5%B8%B8%E8%A7%81%E5%AF%8C%E6%96%87%E6%9C%AC有这个就可以直原创 2022-03-06 11:12:25 · 3357 阅读 · 16 评论 -
VUE3 学习笔记(图片)(所有知识点,做个备份)
❤️砥砺前行,不负余光,永远在路上❤️原创 2022-03-05 20:40:09 · 159 阅读 · 0 评论 -
vscode用户代码片段模板,快速输入
设置方法首先vscode 快捷键 CTRL+SHIFT+P ,选择用户片段,然后选择需要设置的文件就行。console{ "console": { "prefix": "con", "body": [ "console.log($1,'$1')" ], "description": "console" }}vue 代码提示插件...原创 2022-03-04 14:12:51 · 353 阅读 · 0 评论 -
vue beforeEach 导致的Uncaught (in promise) RangeError: Maximum call stack size excee,导致页面不显示
项目中在放行页面的时候遇到的报错我需要放行除了login之外的页面,刚开始没注意,直接将这两个组件在路由中注册写在了最后,就导致了上面的报错,以至于页面也展示不了任何信息直接将需要放行组件导入写在router的前边,beforeEach中next()一下就行。vue-admin permission文件...原创 2022-02-20 12:25:04 · 1544 阅读 · 0 评论 -
iview table组件动态渲染,自定义表头以及动态绑定值
自定义渲染 官网给了两种方式,render 和 slot-scope,之前用过element 好像是使用 template 的时候里边可以直接v-model 双向绑定表格的值,iview 里边直接使用 v-model 好像并不能 ,我这项目用的是 3.x的 后边的版本也没看。使用slot-scope 自定义表格动态绑定值,要结合on-change事件来设置,直接v-model="row.etd" 并不能改变表格里边每一行的值。@on-change="setData($event, index原创 2022-02-17 12:00:23 · 5852 阅读 · 1 评论 -
axios Promise方式简单封装下载文件
// 下载表格export const ExportExcel = (url, data, fileName, method = 'POST') => { return new Promise((resolve, reject) => { axios.request({ method, url, data, responseType: "blob", })原创 2022-02-17 11:37:53 · 793 阅读 · 0 评论 -
iview table前端分页,实现全选跨分页选中所有页面数据
这玩意是来自项目需求,需要全选计算所有页面的数据总和,但是ivew table 全选都是选中当前页面的所有数据,要是前端处理的话肯定要后端将所有数据返回过来,每一次后端返回十条数据肯定是不行的,然后做一个前端分页,请求一次获取所有数据。iview 官网http://v1.iviewui.com/components/table#KXZ需要用到注意看这个 _checked 通过 _checked来设置选中的效果,结合某一项的改变操作来实现功能@on-select 选中某一项@on-se原创 2022-02-09 14:26:41 · 2750 阅读 · 0 评论 -
项目#npm install #cnpm install #yarn安装包报错
错误信息一、npminstall version: 5.2.2npminstall args: C:\Program Files\nodejs\node.exe C:\Users\Mayi\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china --userconfig=C:\Users\Mayi\.cnpmrc --disturl=https://n原创 2021-11-30 10:55:46 · 4053 阅读 · 2 评论 -
Uniapp使用echarts打包之后界面不显示(h5正常)#uniapp使用echarts遇到的坑
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-11-26 23:08:49 · 2980 阅读 · 0 评论 -
#Uniapp 解决报错:nvalid prop: custom validator check failed for prop “type“
❤️在繁华中自律,在落魄中自愈❤️Uniapp中 报错:nvalid prop: custom validator check failed for prop “type”.found in—> PageHead>意思是说 参数type 不对解决办法: 根据提示在 psge.json中的页面找到提示的关键字,修改就行,主要是写的不符合官方文档的规范。比如有些标题颜色主题啥的只能用哪几种,自己另外写可能就不对了。我这里将 type 注释就可以了。...原创 2021-11-26 10:16:05 · 2224 阅读 · 0 评论 -
网页请求自动转为https
可能是在index.html配置了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>原创 2021-11-23 16:39:09 · 2003 阅读 · 0 评论 -
iview render函数详细解释
记录一下iview render h写法h("元素名称或组件名称", { domProps: { // 原生dom元素的一些属性 value: 1, type: 'number', min: 1, innerHTML:’‘ }, props:{ // 传给组件数据 比喻iview Button的原创 2021-11-12 16:44:35 · 671 阅读 · 0 评论 -
iview 添加横向滚动条
<div style="width:1000px; height:200px; overflow:scroll;"> <table border="1" rules="all" style="width:2000px; height:100px; text-align:center">原创 2021-10-27 09:22:42 · 2003 阅读 · 0 评论 -
element ui dialog 弹窗不显示的问题
在使用dialog 的时候将 dialog放在了 el -tab -pan中就导致了最后弹窗不显示 是因为当前也不是激活的那个tab将dialog 添加到body 中即可 显示(他不显示的时候只有一个黑色遮罩层 ,没有内容)原创 2021-10-24 21:49:22 · 7219 阅读 · 0 评论 -
Iview Button type脱坑
解决[Vue warn]: Invalid prop: custom validator check failed for prop “type”. found in---> <Button> <TableCell> <TableTr> <TableBody> <Table> <Modal>根据提示找Button 下原创 2021-09-28 11:30:31 · 288 阅读 · 1 评论 -
解决 iview-modal 点击‘确定’按钮弹框自动关闭问题
在使用iview发现点击确定的时候,他的弹层会自动关闭(默认的确定和取消 footer)解决办法 使用slot="footer"添加一个footer,自定义确定取消的方法控制弹层的显示与隐藏。<div slot="footer"> <Button size="large" @click="showDialog = false" >取消</Button> <Button原创 2021-09-24 10:28:30 · 1671 阅读 · 0 评论 -
解决[Vue warn]: Invalid prop: custom validator check failed for prop “type“. found in ---> <Button>
[Vue warn]: Invalid prop: custom validator check failed for prop “type”. found in —> 错误信息提示 是button 的type出错了经过排查发现 多写了type=“defult” 主要是使用iview 可能是不同版本之间的差异原创 2021-09-23 10:47:10 · 2425 阅读 · 1 评论 -
node js的token生成与验证之“jsonwebtoken“
❤️在繁华中自律,在落魄中自愈❤️目录一、生成token二、验证token三、完整的jwt.js 代码四、配合express使用token验证五、/api/login接口中的配置六、前端请求拦截器和响应拦截知道token的都不用多介绍,在node js 中使用的时候是需要引入 jsonwebtoken。导入包npm install jsonwebtoken -save一、生成token//生成tokenconst generateToken = function (user) { l.原创 2021-07-24 23:52:45 · 2219 阅读 · 3 评论 -
element选择时间报错(赋予了一个时间值之后)
报错vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in render: “TypeError: date.getFullYear is not a function” found in是因为当前赋予的时间和设置的时间格式不一致比如这里我给了一个2021-05-08 设置又是yyyy-MM-dd HH:mm:ss格式自己修改为一致就可以解决了。...原创 2021-05-20 17:12:47 · 966 阅读 · 0 评论 -
vue2中vuex的使用
一、main.js和store下index.js的配置二、vuex中值得读取$store.state.counter三、方法的调用this.$store.commit('increment')要写在mutations下原创 2021-05-19 17:05:34 · 148 阅读 · 0 评论 -
Vue监听回车事件enter
created中:created: function() { var _this = this; document.onkeydown = function(e) { //按下回车提交 let key = window.event.keyCode; //事件中keycode=13为回车事件 if (key == 13) { _this.append(); } }; },me原创 2021-05-06 16:25:07 · 1448 阅读 · 0 评论 -
Vue-router的一些相关配置(笔记)
文章目录一、引用CDN搭建一个简单的路由1、router-link2、router-view3、router-link的属性toreplaceappendtagactive-classexact-active-classevent二、动态路由响应路由参数的变化捕获所有路由或 404 Not found 路由高级匹配模式匹配优先级三、嵌套路由四、HTML5 History 模式五、全局前置守卫一、引用CDN搭建一个简单的路由官网地址:https://router.vuejs.org/zh/installa转载 2021-04-27 12:27:40 · 707 阅读 · 0 评论 -
解决控制台:You are running Vue in development mode. Make sure to turn on production mode when deploying
引用Vue的CDN文件的时候控制台会提示:隐藏:You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.html只需要添加一行代码就可以解决,自己表示看着不舒服,哈哈哈,用cli创建项目那些就不存在了Vue.config.producti原创 2021-04-26 17:13:19 · 19173 阅读 · 7 评论 -
style中的scoped的作用
其组件的定义和使用都是一样的,style中的scoped表示局部作用域,该样式只针对Home.vue 使用原创 2021-01-10 01:50:35 · 5532 阅读 · 0 评论 -
解决[Vue warn]: Property or method “preCarriagePriceType“ is not defined on the instance but...
#vue警告 [Vue warn]: Property or method “name” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.解决:可以先看看你写的那玩意绑定到哪儿原创 2021-04-25 10:58:15 · 915 阅读 · 0 评论