Nuxt 根据用户身份跳转不同页面(路由) 场景需要根据用户登录的账号角色跳转不同的页面即路由,比如分为正式账号和演示账号。解决方法1. 在每个页面使用来区分坏处就是页面区分的太散乱,后期维护的成本较大2. 使用中间件middlewarea. 在 middleware 下新建demo.jsexport default function ({ isServer, req, redirect, route }) { let url = process.env.NODE_ENV === 'public' ? 'xxxx' : 'xx
在 Nuxt中使用滚动组件 vue-seamless-scroll 在公司基于Nuxt项目中需要使用滚动组件,刷新之后会报错window is not defined1. 安装 vue-seamless-scrollnpm install vue-seamless-scroll --save2. 更改配置文件报错 window is not defined,是由于nuxt是基于服务器渲染的框架,服务器渲染时没有wiindow定义的。VUE报错:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失。在
项目中修改Element-ui组件的默认属性 在一个项目中如果要修改element-ui中的某个组件的默认值又不想一个个组件修改,可以在配置element-ui的地方修改组件某个属性的默认值。import Vue from 'vue'import ElementUI from 'element-ui';// 修改input组件默认有清空按钮ElementUI.Input.props.clearable.default=true;Vue.use(ElementUI);并不是所有组件的属性都可以通过这样的方式修改,必须在代码配置有deful
vue+elementui el-select选择框异步请求选项列表,$set之后显示的value值 场景两个el-select 联动的选择框,选完第一个框异步加载第二个框的选项列表并给第二个选项赋值为选项的第一个值<template> <el-select v-model="formData.data1" @change="onChange" > <el-option v-for="item in option1" :key="item.id" :l
Nuxt中keep-alive的使用 layouts/default.vue<nuxt keep-alive :keep-alive-props="{include: includeArr }"/><script> export default { data() { return { includeArr: [ 'ServicerManageProjects', 'DataReportData', ]
微信小程序下拉菜单组件实现 先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。这里根据自己的实际需求开发了三种下拉类型:第一个是单选下拉菜单,单选之后立即收起。第二个是复选下拉菜单,主要提供了多选的功能,显示确定和重置按钮用于修改复选结果。第三种是自定义内容,提供给用户自己写组件内容的插槽。代码的详细解释就不用说了,直接上代码片段,可以在微信开发者工具中查看效果和代码。我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件的
微信小程序-wx.openDocument常见报错总结 小程序开发中用wx.openDocument()遇到了几个常见的问题,做下总结downloadfile:fail url not in domain list详细原因点击查看原文,上传时一定要配置 详情->域名信息 中的request合法域名 uploadFile合法域名 downloadFile合法域名,并且均为https。// 可根据版本判断是否替换成httpsurl.replace("http:","https:")FAIL FILETYPE NOT SUPPORTE
微信小程序-ios设备下new Data()方法显示NAN 问题描述小程序开发过程中,发现 Android 设备可以正常的显示时间,而 iOS 设备无法正确的显示。原因iOS 系统对 JavaScript 中的 new Date() 方法有严格的格式要求。IOS 系统的格式如下:let now = new Date("2020/10/30 00:00") 解决方法通过replace方法替换let date = "2020-08-08 00:00"let now = new Date(date.replace(/-/g,'/'))...
微信小程序-带参数分享的公有方法 需求说明微信小程序每个页面分享给朋友的时候,如果分享的链接里不带参数。那么在onLoad: function (options)中就会识别不了参数导致页面无数据渲染或者报错无法打开。所以需要一个全局分享方法,解决方法我看了很多文档,有的是在app.js中使用wx.onAppRoute来监听路由切换,设置每一个page的onShareAppMessage方法间接实现全局设置分享内容。官方文档没有这个api并且自己尝试了一下没用,如果各位试的有效果可以跟我说一声,学习一下我自己就写了个分享当前页面的公有
微笑小程序 1px边框border 像素基本概念: 参考这篇文章微信小程序----适配小结、移动端1px与选择器权重,里面已经很清楚的描述了像素单位及为什么会出现CSS写的1px,实际上看起来比1px粗。直接上代码:/* border 1px样式 */.border_bottom, .border_top, .border_all { position: relative;}.border_top::after { position: absolute; content: ''; width: 100%; l
微信小程序连接WiFi 微信小程序连接WiFi需求说明代码及说明1. 系统判断2. 权限判断及申请3. 搜索wifi列表并连接3. 切换不同wifi时进行提示需求说明小程序搜索附近能连接的wifi并出现列表点击wifi进行连接切换不同wifi时进行提示代码及说明对于需求只贴上js部分代码,用于记录小程序连接wifi接口使用及遇到的问题。具体API查看微信官方文档。微信官方文档1. 系统判断说明: 因为获取wifi列表根据官方文档所示ios将跳转到系统设置界面,因为界面操作不统一,所以这次先不对ios设备进行适配
var let const的区别和用法 面试的时候这三个定义变量和函数的方法没有解释清楚,今天把他们总结清楚。只要搞清楚全局作用域、函数作用域和块级作用域。参考资料全局作用域和函数作用域块级作用域全局作用域这个比较好理解,就是定义在script里面的变量和函数,可以在任何地方访问到。函数作用域调用函数的时候会创造一个函数作用域,需要注意的是只有调用函数的时候才会创造,函数在定义的时候是不会创造作用域的。块级作用域块级作用域是ES6才定义的。最简单的理解是{ }中间的部分是一个块级作用域”。例如:for 循环、 if
前端面试必考——JS闭包 闭包是前端面试的时候,必然会问到的问题。码龄一年的我在实际应用的时候还没有应用到。但是先搞定面试先。等以后开发经验再多一点的时候,再加更多的理解吧。闭包: 内部函数总是可以访问其外部函数的参数和变量其实理解这句话要先理解js的变量作用域,函数内部可以直接读取全局变量,但是在函数外部是不可以读取函数内的局部变量。所以需要闭包来访问函数内部的变量。function outerFunc() { var name = "内部函数变量"; function innerFunc() { .
Js深拷贝和浅拷贝及相关知识点 不管是实际应用还是面试当中,js的深拷贝和浅拷贝的区别一直都是最常遇到的问题,今天花点时间彻底搞定它。相关知识点1. js两种不同的数据类型基本类型:String,Boolean,Number,Undefined,Null;引用类型:Object(Array,Date,RegExp,Function);两者最大的区别就是保存位置的不同,基本数据类型是保存在栈内存里;引用数据类型是保存...
纯前端多选表格table批量删除 在工作中对表格的数据进行删除,一般来说都是与后端进行联调。但是也会遇到这种情况,对表格删除操作的时候不需要与后台对接,在对表格数据进行删除后点击保存的时候才与后台对接。今天写这个功能的时候首先想的是两个for循环,这样写起来会代码会比较多且很复杂。抱着对简短优美代码的追求。handleDeleteSelection() { this.multipleSelection.forEac...
优化代码:table中遇到将某一列代码转述成表述值 在工作中经常遇到一个场景,在表格数据与后台接口交互的过程中,某一列后台只会传一个code,但是实际上在表格上要展示的事code对应的描述值。// 后台传来的数据:tableData: [ { userName: '张三', typeCode: '1' }, { userName: '李四', typeCode: '2' } ], // 类型对应表 typeOption: [ ...