vue
文章平均质量分 50
otatoz
生死契阔 与子成说
展开
-
vue项目中使用el-tree — 回显问题
最近实现了一个项目需求,关于权限的处理,见下图一级菜单包含多个二级菜单若二级不全选,则一级显示 半选 状态若二级全选中,则一级显示 全选 状态在下次进入编辑页面时,需要将当前选中租户的权限回显出来说明:二级下面会有多个三级菜单,以此类推整体思路很简单:初始化树 -> 递归处理所有层级菜单选中的id -> 处理 el-tree 回显初始化树...原创 2021-09-10 17:03:18 · 5484 阅读 · 0 评论 -
vue-cli3.0项目中使用ttf字体
1、下载字体此处下载的字体为HYXinHaiXingKaiW.ttf2、将下载好的字体放到项目的assets下,同时新建font.css文件3、font.css中配置字体@font-face { font-family: 'HYXinHaiXingKaiW'; src: url('HYXinHaiXingKaiW.ttf'); font-weight: normal; font-style: normal;}4、main.js中引入字体5、原创 2020-07-02 09:30:06 · 2777 阅读 · 2 评论 -
vue中同时监听多个参数
vue使用watch同时监听多个参数,其中有任意一个参数发生改变时,都会被监听到需要使用到计算属性computed与监听watchdata中定义一个对象:data(){ return{ obj:{ name:'xpf', gender:'male', age:24 } }}...原创 2020-04-08 16:00:18 · 2921 阅读 · 0 评论 -
vue中使用vue-visibility-change监听浏览器页面之间的切换
需求:A、B两个页面,从A页面切换到B页面,在B页面做完操作再切换回A页面,A页面需要执行相关的操作A ---> B(一些操作) ---> A(执行某些操作)解决方案:使用vue-visibility-change下载:$ npm i vue-visibility-change -S导入:main.js:import visibility fro...原创 2020-03-10 12:20:33 · 7073 阅读 · 1 评论 -
vue给对象新增属性,页面不更新解决方法——四种方案
需求:点击按钮,向一个对象新增name属性,希望页面也能显示出来新增的name代码:<div id="app"> {{obj}} <div @click="add">新增name属性</div></div> <script> new Vue({ el:'#app', d...原创 2020-02-27 16:52:45 · 5541 阅读 · 3 评论 -
在element-ui的table组件与双大括号中使用时间处理函数
需求1:在双大括号中处理时间格式使用前:<div v-for='item in orders' :key='item.id'> 日期:<div>{{item.orderTime}}</div> 状态:<div>{{item.status}}</div> <br></div>使...原创 2020-02-26 15:42:06 · 1162 阅读 · 0 评论 -
JSON序列化与反序列化在vue中的应用
需求:A页面跳转到B页面,需要将参数携带过去,并且刷新页面也正常显示,参数格式如下:(对象嵌套数组)"data": { "page": 0, "pageSize": 100, "total": 87, "list": [ { "id": 1061, "orderTime": 1581905690803, ...原创 2020-02-25 14:19:17 · 4269 阅读 · 0 评论 -
vue中父组件通过props向子组件传异步值为空
问题:子组件在使用props接收父组件传值的时候,浏览器报错该对象未定义父组件:子组件:控制台:原因:当父组件通过 axios 获取数据,子组件使用 props 接收数据时,子组件执行 mounted 的时候,父组件的axios 还没有返回数据,而且 mounted只执行一次,这时 props 中接收的数据为空,所以在使用的使用自然会报错undefined...原创 2020-02-25 11:26:44 · 4807 阅读 · 0 评论 -
vue实现登录功能,且刷新页面不丢失数据
仅个人学习记录github:https://github.com/otatoz/login-vue预览地址:http://47.93.255.92/login项目说明:姓名: customer1或customer2或customer3 密码: 123321目录结构:大致流程:代码说明:store/modules/log...原创 2020-02-17 17:27:53 · 4393 阅读 · 0 评论 -
cordova环境配置,将vue项目打包成apk的详细流程
jdk下载并配置下载jdk下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载完成,一直下一步即可配置jdk1、新建 JAVA_HOME 的变量,值为jdk安装路径,此处为默认安装路径 C:\Program Files\Java\jdk1.8.0_...原创 2020-01-16 15:50:39 · 2733 阅读 · 0 评论 -
vue-element-admin关闭代码校验eslint
在vue.config.js中将lintOnSave设置为fasle即可设置前:设置后:原创 2020-01-02 15:21:46 · 5218 阅读 · 0 评论 -
vue-admin-template运行到10%时报错解决
在使用vue-admin-template时,下载完依赖之后,npm run dev,项目跑到10%时会报如下的错误一种解决方案:添加环境变量添加两个环境变量关闭vscode重启项目即可...原创 2019-12-31 08:12:52 · 1283 阅读 · 2 评论 -
vant使用iconfont图标
第一步、添加图标至项目第二步、生成代码第三步、将得到的地址复制到浏览器第四步、将该页面所有的代码复制到assets/css/icno.css中(没有的话可以新建)第五步、在App.vue导入(路径跟自己项目的路径一致即可)第六步、使用文档上推荐的自定义图标(class一定要有,可以参考下面的代码)<van-icon ...原创 2019-12-26 16:09:33 · 5007 阅读 · 0 评论 -
vue刷新当前页面且页面不闪烁
方式一:location.reload()方式二:在需要刷新的地方直接使用vue的路由跳转this.$router.go(0)方式三:(推荐此方式,因为此方法不会出现短暂闪烁的空白页)第一步:App.vue页面<template> <div id="app"> <div class="container"> ...原创 2019-12-23 15:58:46 · 1493 阅读 · 1 评论 -
vue-cli3.0打包页面无法加载js文件
使用 npm run build 打包后,浏览器访问dist/index.html文件时,无法加载js文件解决方案:在网上搜了很多方法,他们修改的配置文件都不适合vue-cli3.0,因为vue-cli3.0的目录结构如下:此时需要自己新建一个文件:(根目录下新建vue.config.js)module.exports = { publicPath: './',...原创 2019-12-11 10:58:06 · 3752 阅读 · 0 评论 -
解决remote: Permission to A.git denied to B
以vue-admin-template为例,将其克隆到本地做修改,再提交至自己的github,出现问题如下图只需要修改一处即可, .git/config 文件下的url由于.git文件默认没打开,需要手动拖至sublime或者vscode之后再次提交...原创 2019-12-09 19:23:00 · 2842 阅读 · 0 评论 -
vuex过滤器getters
业务需求:查询到所有的商品列表,根据商品的状态将其放入不同的表格解决方案:1、使用vue的过滤器2、使用vuex的getters目录结构:App.vue文件<template> <div id="app"> <!-- 显示所有的商品 --> <div class="listOne"> &l...原创 2019-11-01 14:14:02 · 678 阅读 · 0 评论 -
vueRouter携带参数
业务需求:在视频列表页面,点击任意一个视频的时候,获取到该视频的id,并跳转到视频播放页面,在视频播放页面可以通过该视频的id查询视频详情信息解决思路:1、将id存入vuex中,使用状态管理机维护起来问题:在视频播放页面刷新浏览器的时候,id丢失2、使用路由机制,在视频列表页面点击任一视频的时候,将该视频id拼接在路由上,在视频播放页面获取路由上拼接的id即可this.$rou...原创 2019-10-31 18:51:56 · 1387 阅读 · 0 评论 -
vue router 报错Object { _name: "NavigationDuplicated", name: "NavigationDuplicated“...
在使用vue router的时候,会报如下警告,但是不影响页面的跳转原因:vue-router ≥3.0版本回调形式以及改成promise api的形式,返回的是一个promise,如果没有捕获到错误,控制台始终会出现如图的警告解决方法:在mian.js文件中导入如下代码import Router from 'vue-router' const originalPus...原创 2019-09-23 16:12:09 · 376 阅读 · 0 评论 -
vuex的使用
Vue中的vuex和React中的redux 都被称为状态管理机制。理解:在state中定义了一个数据之后,可以在所在项目中的任何一个组件里进行获取、进行修改,并且此次修改可以得到全局的响应变更。1、安装vuex$ npm install vuex --save2、在src下新建文件夹store,store文件夹下新建js文件index.js,如下3、在新建的inde...原创 2019-08-01 18:18:41 · 141 阅读 · 0 评论