Vue
vue相关信息
Martin-Luo
这个作者很懒,什么都没留下…
展开
-
解决使用fastclick在ios输入框点击不灵敏,ios 软键盘关闭input失焦后页面上移点击不了问题
【代码】解决使用fastclick在ios输入框点击不灵敏,ios 软键盘关闭input失焦后页面上移点击不了问题。原创 2023-03-08 11:14:18 · 239 阅读 · 0 评论 -
Vue中Axios网络请求封装-企业最常用封装模式
1.通过命令安装axiosyarn add axios&npm install axios --save2.创建一个js文件// utils/request.jsimport axios from 'axios'import { MessageBox, Message } from 'element-ui' // 引入element-ui库import store from '@/store' // vuex// 创建一个axios实例const service = axio原创 2021-10-27 17:55:29 · 247 阅读 · 0 评论 -
vue路由跳转取消上个页面的请求
为什么会使用当一个页面的请求过长时,然后点击链接跳转到新的页面,会导致不必要的资源浪费,如果上一个接口出现报错情况,会误导用户导致体验感不好。怎么使用在axios设置import axios from 'axios'import store from '@/store'import { getToken } from '@/utils/auth'// 创建一个 axios 实例const service = axios.create({ baseURL: process.env原创 2021-07-26 14:57:24 · 799 阅读 · 0 评论 -
Element-UI中el-cascader组件多语言切换文字同步更新
问题:在使用el-cascader组件进行中英文语言切换时,发现选中文字不进行语言模式同步。在网址上搜索了下当前问题,发现暂无解答,自己就结合官方文档实现了一种方案。实现思路<template> <!-- 通过cascaderState显示隐藏来重新渲染该组件 --> <el-cascader v-if="cascaderState" v-model="value" :options="options" :props="..原创 2021-07-03 12:33:30 · 719 阅读 · 1 评论 -
Vue动态添加路由(addRoutes) 校验用户是否登录且排除白名单页面
Vue动态添加路由通过官方路由API router.addRoutes 实现。废话不多说直接上代码,欢迎留言交流!const whiteList = ['/login', '/reset-password'] // 可直接访问的白名单页面router.beforeEach(async(to, from, next) => { // 确定用户是否已登录 const hasToken = getToken() // 拿到用户登录的token if (hasToken) { if原创 2021-04-22 19:42:41 · 956 阅读 · 0 评论 -
Vue+Element中Table懒加载删除或编辑数据后不动态更新
1.问题的来源在Element中使用Table树形数据懒加载(设置 lazy 属性为 true)模式。框架会通过row-key指定的属性来缓存操作者异步请求的数据 ,所以我们进行删除或编辑操作后重新请求数据,框架会优先通过row-key指定的id来检查是否已存在,如果数据存在使用旧数据,如果数据不存在使用新数据,所以table中查看更新后的数据发生没有变化。下面是实际演示例子:代码:<template> <el-table ref="table" :dat.原创 2021-02-24 18:20:46 · 4752 阅读 · 1 评论 -
Vue后台面包屑导航实现
1.基础知识$route.matched 类型: Array<RouteRecord>一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。const router = new VueRouter({ routes: [ // 下面的对象就是路由记录 { path: '/foo', component: Foo, children: [ .原创 2021-02-20 17:33:37 · 797 阅读 · 0 评论 -
Vue2.x生命周期执行顺序
1.介绍vue每个组件都是独立的,每个组件都有一个属于它的生命周期。从一个组件的创建、挂载、更新、销毁,这就是一个组件的生命周期。2.生命周期图 本图来源于vue官网3.单组件执行顺序进入页面默认会自动执行beforeCreate -> created -> beforeMount -> mounted beforeCreate:在执行该函数时,$el、$data、methods、computed在this中【无法获取】 created:在执行该函数时,$.原创 2021-02-20 17:31:36 · 610 阅读 · 0 评论 -
vue-devtools安装
1.前言vue-devtools是用于调试vue应用,这可以极大地提高我们的调试效率。2.chrome商店直接安装vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。3.手动安装vue-devtools第一步:从git上clone vue-devtools地址git clone https://github.com/vuejs/vue-devtools.git第二步:安装依赖npm install 或.原创 2021-02-20 17:29:50 · 260 阅读 · 0 评论 -
vue引入ant-design-vue按需加载编译报错解决方案
vue引入ant-design-vue按需加载编译报错信息 error in ./node_modules/ant-design-vue/es/style/index.lessModule build failed (from ./node_modules/less-loader/dist/cjs.js):// https://github.com/ant-design/ant-motion/issues/44.bezierEasingMixin();^Inline JavaScript is原创 2021-02-20 17:27:56 · 3445 阅读 · 0 评论 -
Vue-cli3.0配置Bootstrap
第一步: 安装插件yarn 安装: yarn add jquery 或者指定版本:yarn add [email protected] yarn add bootstrap 或者指定版本:yarn add [email protected] yarn add popper.jsnpm 安装 npm install juqery --save npm install bootstrap --save npm install popper.js原创 2021-02-20 17:25:27 · 222 阅读 · 0 评论