vue
文章平均质量分 57
sunlizhen
这个作者很懒,什么都没留下…
展开
-
本地存储——登录记住密码 vue
HTML5中有两种本地存储(web storage),一种是会话级别的sessionStorage,这种存储方式的值一般会在浏览器窗口失效;另一种是永久有效的localStorage,除非是自动删除,不然这种的存储方式的值会一直有效。上一篇文章介绍的koa-session,这个就是后台的会话级别,和前端的sessionStorage的逻辑意思是一样的。下面介绍的是前端登录时记住密码的localStorage存储。页面如下<p style="color: #fff; text-align:原创 2020-12-24 11:30:30 · 1201 阅读 · 1 评论 -
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面不改变的问题
<el-select :popper-append-to-body="false" popper-class="dropdown" class="screen-select" style="background: none !important;" @change="selectAllCity" size="small" clearable v-model="fromdata.city" placeholder="请选择"> <el-option style="backgro.原创 2020-12-21 18:42:06 · 684 阅读 · 0 评论 -
vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由
路由: const routes = [ { path: '/', name: 'Home', meta:{isLogin:true,title: 'Home'},// 添加该字段,表示进入这个路由是需要登录的 component: resolve=>(require(["@/views/index.vue"],resolve)), children: [ { path: '/monitor'.原创 2020-12-10 10:31:56 · 2410 阅读 · 1 评论 -
Vue给子组件传值为空
这是没改之前的<safeassess :safetData="safetData" ></safeassess>改了之后<safeassess :safetData.sync="safetData" v-if="safeShow"></safeassess>safeShow: false 初始值为false让他有数据的时候在显示:this.$api.findDetailHealthItems({orderNo: this.$rout.原创 2020-12-03 15:32:12 · 942 阅读 · 0 评论 -
v-if判断el-table中按钮的显示与隐藏
<el-table-column prop="orderStatus" label="状态" width="120" > <template slot-scope="scope"> <el-button v-if="scope.row.orderStatus == 10" class="notop" type=...原创 2020-12-01 13:22:46 · 2326 阅读 · 0 评论 -
element的table点击选中之后设置当前行高亮
实现点击当前行样式背景高亮在element-ui.scss的样式里面添加.el-table__body tr.current-row>td{ background-color: #fdf3ea; color: #f19944;}在这里注意:row-class-name="tableRowClassName"是在渲染表格的时候就调用了,不能通过点击事件改变行的颜色实现hover前行样式背景高亮在element-ui.scss的样式里面添加.el-table--enable...原创 2020-12-01 13:21:29 · 1227 阅读 · 1 评论 -
element的table点击选中之后设置当前行高亮
实现点击当前行样式背景高亮在element-ui.scss的样式里面添加.el-table__body tr.current-row>td{ background-color: #fdf3ea; color: #f19944;}在这里注意:row-class-name="tableRowClassName"是在渲染表格的时候就调用了,不能通过点击事件改变行的颜色实现hover前行样式背景高亮在element-ui.scss的样式里面添加.el-table--enable...原创 2020-12-01 12:13:10 · 2357 阅读 · 1 评论 -
vue-router在3.0版本以上重复点击菜单报错的问题
// Push版本const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}//Replace版本const originalReplace = Router.prototype.replace;Router.prototype.repl...原创 2020-11-30 17:08:46 · 290 阅读 · 0 评论 -
vue使用echarts出现tab切换echarts宽度变窄问题
在tabs切换中有echarts的话,我们会发现初始化的那个echarts是有宽度的,当点击tabs切换之后,切换过来的echarts只剩下100px的宽度。这是因为渲染的时机不对,我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts,而不是在页面初始化的时候就把所有tabs里面的echarts都执行。因为echarts会根据父级给宽度,而在初始化页面的时候其他tabs切换是display:none;没有宽度,所以会发生以上问题解决方法第一种方法是我在网上找到的自己原创 2020-11-27 09:53:28 · 2850 阅读 · 0 评论 -
$router‘ of undefined 是什么原因?
有一个需求:后端返回数据表示token过期,前端要跳到登录页。if(response.data.message === 'token内容不符'){ Toast({ icon:'fail', message: '请重新登录', duration: 1000, forbidClick: true }); this.$router.push('/login')}提示了一句“Cannot read property '$router' of undefine原创 2020-11-25 19:25:58 · 1310 阅读 · 0 评论 -
iframe加载闪过白块问题
在使用iframe时,iframe背景为白块,刷新时也会闪过白块。如果刷新时间长,就会一直出现白块;以下是再vue中,再js中同样适用;<div v-else ref="iframeWanner" v-loading="loading"> <iframe style="border:none" width="100%" allowtransparency="true" :style=" { visibility:visibiShow }"原创 2020-11-20 11:42:37 · 909 阅读 · 0 评论 -
vue中实现回到顶部功能
<template> <div class="home"> <span type="text" v-if="btnFlag" class="FloatWin_l FloatWin_p" @click="backTop">返回顶部</span> </div></template><script> import generalView from './component/generalView' .原创 2020-11-18 10:45:07 · 1596 阅读 · 0 评论 -
判断 iframe 是否加载完成的完美方法
this.$nextTick( ()=> { let iframe = this.$refs.iframe let that = this; // 判断iframe是否加载完毕 if (!/*@cc_on!@*/0) { // if not IE 判断不是ie iframe.onload = function() { that.loading = false } } else { iframe.onreadystatechange = fun.原创 2020-11-12 15:41:24 · 1292 阅读 · 0 评论 -
vue打包报错built files are meant to be served over an HTTP server
Tip: built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.这个其实 就是个 提示并不是报错。其实 这句话 是告诉 我们vue打包过后 需要放在服务端 才能预览 打开如果不放在 服务端不能正常运行的如果你想正常打开 运行可以这样操作在你 打包 npm run build 完成 之后直接输入npm ...原创 2020-11-12 11:50:48 · 741 阅读 · 1 评论 -
vue 实现iframe跨域通信
父页面:<template> <div class="appStore"> <div> <el-row :gutter="20"> <el-col :span="6" style="text-align: center;" v-for="(item, index) in dataList"> <div class="grid-content bg-purple"> .原创 2020-11-11 10:51:21 · 1883 阅读 · 0 评论 -
constantRoutes 和asyncRoutes的区别
constantRoutes:代表那些不需要动态判断权限的路由,如登录页、404、等通用页面。asyncRoutes:代表那些需求动态判断权限并通过addRoutes动态添加的页面原创 2020-11-04 15:28:41 · 5297 阅读 · 0 评论 -
vue-element-admin动态加载接口和报错解决
需要修改的文件只有两个:修改文件\src\router\index.js 和修改文件 src\store\modules\permission.js 接口可以放在user.js里面1.\src\router\index.js 修改为export const asyncRoutes = [ { path: '*', redirect: '/404', hidden: true }]2.src\store\modules\permission.js修改为:import {...原创 2020-11-03 17:49:15 · 1913 阅读 · 1 评论 -
将vue打包移动端项目以及遇到的问题
1. 写的时候注意下移动端需要注意的事项,这里我就不多说了;2. npm run build 打包3. 在HbuilderX 中建立一个新项目4. 将vue打包的dist文件复制到这个新项目中,替代这个新项目--将新项目中的 js css img 删除即可;5.用Hbuilder X 配置--发行--原生app打包--等待打包即可;6. 等待打包成功,会有一个地址-下载即可;遇到的问题:接口访问不到:是代理的问题,打包app后代理就不起做用了,此时申请接口的时候要写...原创 2020-11-03 11:45:48 · 501 阅读 · 0 评论 -
vue 登录界面无法跳转问题
1.在试着用vue写一个登录页面,已经调试好了,登录成功后,跳转到主页面。但是加了拦截器后,不会跳到主页面{ path: '/', name: 'Home', meta:{isLogin:true},// 添加该字段,表示进入这个路由是需要登录的 component: Index},// 路由守卫router.beforeEach((to,from,next)=>{ if(to.matched.some(res=>res.meta.isLogin)){//判.原创 2020-10-27 17:02:51 · 8113 阅读 · 0 评论 -
vue-element-admin 自己项目的配置讲解
1. 将多余的页面删除 剩下以下几个页面;2. 别忘了将配置路由的页面路由去掉;3.此时配置代理,用你自己的接口申请数据需要配置的如下:vue.config.js 文件;配置代理,将mock数据注释掉;4.request.js里面,更改的是接口的返回的code,你后台根据哪个判断你就写哪个就行import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '原创 2020-10-27 15:13:53 · 4387 阅读 · 0 评论 -
echarts 柱状图多维数组
<template> <div class="hello"> <div ref="manyBar" style="width: 600px;height:400px;"></div> </div></template><script>let seriesDatas = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 7.原创 2020-10-26 19:58:21 · 1658 阅读 · 0 评论 -
echarts渐变色实现方法
option: { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'line', ..原创 2020-10-26 16:55:50 · 1815 阅读 · 0 评论 -
在vue项目中设置BASE_URL
1.在config文件夹中新建global.js文件const BASE_URL = 'http://60.205.251.228/rest/'export default { BASE_URL}2.在入口文件main.js中引入,设置为全局变量import global_ from '../config/global.js'Vue.prototype.GLOBAL = global_;3.在有需要的地方引入baseUrlcreated() { const bas原创 2020-10-26 16:32:48 · 10853 阅读 · 0 评论 -
nginx配置代理
具体操作详解:进入到nginx安装目录的配置文件中下:vim /usr/local/nginx/conf/nginx.conf编辑server { listen 80;server_name dzf1.com;index index.html index.htm index.php;root /data/html/dist; //代表html路径 (存储在服务器的文件目录)if ($hos...原创 2020-10-26 15:45:15 · 251 阅读 · 0 评论 -
vue 中cclass得三元运算
<s :class="item.risk=='断电'?'hongse':'luese'">{{item.state}}</s><s :class="item.risk=='断电'?'hongse':item.risk=='断电或限流'?'huanse':'luese'">{{item.state}}</s>原创 2020-10-23 16:12:37 · 386 阅读 · 0 评论 -
vue 封装axios接口
1. 创建一个request.js文件import axios from 'axios'import { MessageBox, Message } from 'element-ui'/** * @template axios请求封装 拦截 * @author daidai */const service = axios.create({ withCredentials: false, // 跨域请求时是否需要使用凭证 baseURL: '/api', timeout: 50原创 2020-10-22 14:03:02 · 143 阅读 · 0 评论 -
vue中的qs
后端接收参数,要把参数序列化Vue中提供了qs这个插件。进行数据序列化。1. 安装npm install qs / cnpm install qs (安装了淘宝镜像的才可以使用)2. 引入 在main.jsqs import qs from 'qs'//配全局属性配置,在任意组件内可以使用this.$qs获取qs对象Vue.prototype.$qs = qs3.使用:将对象序列化,多个对象之间用&拼接(拼接是由底层处理,无需手动操作);qs.stringify()原创 2020-10-22 13:37:03 · 570 阅读 · 0 评论 -
vue-element-admin4.0 配置跨域
vue.config.js这个文件proxy: { "/api": { //这里是公共部分,在调用接口时后面接不相同的部分,/api就相当于http://182.92.196.41:4999/api这一段 target: 'http://182.92.196.41:4999/api', //这里写的是访问接口的域名和端口号 changeOrigin: true, // 必须加上这个才能跨域请求 ws: true, pathRewrite: { // 重命名原创 2020-10-22 11:38:16 · 1899 阅读 · 0 评论 -
vue-cli4.0 配置代理
文件config里面的index.js配置proxyTable: { '/api': { target: 'http://182.92.196.41:4999/api', //目标接口域名 changeOrigin: true, // 允许websockets跨域(是否跨域) //secure: false,// 如果是https接口,需要配置这个参数 ws: true, pathRewrite: { // 如果接口本身没有/api需要通过pathRe.原创 2020-10-22 11:08:32 · 1587 阅读 · 0 评论 -
将两个数组合并成一个数组,对应项相同
let one = []; let two = []; let AllMes = []; this.pileInformation.forEach( (item, index) => { if(index%2){ two.push(item) } else { one.push(item) }}) one.forEach( (item, index) => { AllMes.push([item,two[index]]) }) this.$se..原创 2020-10-21 12:03:39 · 1108 阅读 · 0 评论 -
vue router 点击同一路由多次或是push的路由是当前界面的url,报错解决方法
//多次点击同一路由报错constoriginalPush=VueRouter.prototype.pushVueRouter.prototype.push=functionpush(location){returnoriginalPush.call(this,location).catch(err=>err)}把这个放在路由router的页面...原创 2020-10-19 16:09:41 · 753 阅读 · 0 评论 -
vue 进入页面判断是否需要登录
// 这个是router的页面;const routes = [ { path: '/', name: 'Home', meta:{isLogin:true},// 添加该字段,表示进入这个路由是需要登录的 component: Index }, { path: '/login', name: 'login', // meta:{isLogin:true},// 添加该字段,表示进入这个路由是需要.原创 2020-10-19 16:06:42 · 1260 阅读 · 0 评论 -
vue slot
1. 什么是插槽:引入的子组件标签中间是不允许写内容的。为了解决这个问题,官方引入了插槽(slot)的概念。插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。子组件:<template> <div> <ul> <li v-for="(item, index) in data" @click="changeMe(index)">原创 2020-10-16 12:17:09 · 190 阅读 · 0 评论 -
vue 判断介于数字之间的显示隐藏
<div class="moni"> <p v-if="numShow<60">我是一颗星</p> <p v-else-if="this.numShow>=60 && this.numShow<70 ">我是二颗星</p> <p v-else-if="this.numShow>=70 && this.numShow<80">我是三颗星</p> &.原创 2020-10-15 10:55:20 · 420 阅读 · 0 评论 -
git push 提交不上去 报错
报错如下:To gitlab.com:sunlizhen/datatem.git! [rejected] master -> master (non-fast-forward)error: failed to push some refs to 'git@gitlab.com:sunlizhen/datatem.git'hint: Updates were rejected because the tip of your current branch is behindhi...原创 2020-10-14 16:43:13 · 773 阅读 · 0 评论 -
vue的qs插件
将参数序列化。这里使用了qs插件:简单来说,qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。在项目中使用命令行工具输入:npm install qs安装完成后在需要用到的组件中:import qs from 'qs’具体使用中我查看了:qs.parse()和qs.stringify()这两种方法虽然都是序列化,但是还是有区别的。qs.parse()是将URL解析成对象的形式qs.stringify()是将对象 序列化成URL的形式,以&进行拼接解决我遇到的问题原创 2020-10-10 16:35:40 · 790 阅读 · 0 评论 -
npm run dev 报错no-octal-escape.js:41
错误如上图,解决方式:在vue.config.js里,将lintOnSave设置为false。原创 2020-09-29 09:29:46 · 677 阅读 · 1 评论 -
单页面与多页面间的区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新单页面的优点:1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小2,前后端分离3,页面效果会比较炫酷(比原创 2020-06-05 16:32:40 · 1374 阅读 · 0 评论 -
Hbuilder和HbuilderX连接到夜神模拟机运行
1.下载夜神模拟器安装;下载hbuilder安装夜神模拟器:https://www.yeshen.com/hbuilderx:https://www.dcloud.io/hbuilderx.html进入nox的安装目录bin下,打开当前目录的cmd窗口执行以下两个命令:nox_adb connect 127.0.0.1:62001nox_adb devices进入Hbuilderx的安装目录下, \HBuilderX\plugins\launcher\tools\adbs,执行.原创 2020-06-04 15:37:46 · 4848 阅读 · 1 评论 -
nui-app介绍
据官宣,uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者只需编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,不仅能正确运行且能给用户带来优秀体验。uni-app 继承自 Vue.js,提供了完整的 Vue.js 开发体验。uni-app 组件规范和扩展api与微信小程序基本相同。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ,开发出兼容多端的应用。uni-app提供了条件编译优化,可以优雅的为某平台写个性化代码、...原创 2020-06-04 14:31:49 · 2605 阅读 · 0 评论