vue
【拾光静好 微微一笑】
用力只能做到及格,用心才能做到优秀
展开
-
Access to XMLHttpRequest at XXX has been blocked by CORS policy: Request header field userid is not
axios请求中header中存放的字段,会在所有接口中携带,如需仅在某些接口中携带需要单独处理原创 2023-02-24 10:26:25 · 1343 阅读 · 1 评论 -
elementUI 日期插件同一个label下多个字段校验事件问题
当你需要在同一个label下需要放置1个以上的字段时,此时如果有其中一个字段没有填写,结果就是校验不通过,但是如果都正常填写后校验事件没有返回任何参数,也不往下走,此时校验结果valid根本打印不出来是true或者false,打断点也无效。原创 2022-12-05 17:36:50 · 547 阅读 · 0 评论 -
VUE项目中基于elementUI自定义月日组件 定制化月日组件
vue项目内基于elementUI 自定义月日组件,支持根据年份展示不同月份日期不同,以及支持禁用部分日期转载 2022-12-02 17:47:46 · 1384 阅读 · 0 评论 -
Vue自定义指令报错问题汇总 Failed to resolve directive
vue2 自定义指令报错问题汇总原创 2022-08-17 10:26:47 · 12381 阅读 · 0 评论 -
vue项目computed计算属性无法监听到数组对象内部变化解决方案
vue computed计算属性无法监听数组内部对象变化问题解决方案原创 2022-06-30 18:50:57 · 8404 阅读 · 0 评论 -
Computed property “name“ was assigned to but it has no setter.报错解决办法
Computed property "name" was assigned to but it has no setter.报错解决原创 2022-06-29 14:28:55 · 4714 阅读 · 2 评论 -
回显有值但是校验不通过 表单有值校验失败 element校验问题
element表单有值校验失败,页面回显有值校验失败问题解决方案原创 2022-04-26 14:18:18 · 7756 阅读 · 1 评论 -
vue项目使用pdfjs插件预览pdf 不兼容QQ浏览器和搜狗浏览器问题 兼容各大主流浏览器办法
解决pdfjs预览浏览器不兼容问题原创 2022-04-18 11:13:37 · 3358 阅读 · 3 评论 -
echarts 在IE浏览器不展示 报错不支持prepend方法 setOption should not be called during main process
问题报错问题如下图,图表均不显示同时还有不支持prepend方法,不支持resize等问题,找了网上各种方法均不凑效,其中包括setOption之前先clear(本身也有使用该方法),设置延迟 setTimeout等均无果。目前的项目采用vue脚手架,echarts版本为5.0.0;解决办法把echarts版本升级为5.2.2版本以上问题都没了哈哈,具体是从哪个版本开始修复的有待尝试;不知道你们是不是酱紫仅此记录一下自己的问题...原创 2022-02-11 11:03:57 · 946 阅读 · 1 评论 -
vue文件路径相对地址简写为@ 省略../ webpack configureWebpack 用法
在项目中通常我们看到文件地址简写为@/view @/store ,如果你的地址还是一长串的…/…/…/…/相对地址的话,那么下面的代码希望能够帮助到你。第一步找到你的vue webpack配置文件入口,可能是你自定义的config.js ,也可能是vue.config.js,找到下面这些熟悉的配置;module.exports = { SERVER: [ {API_SERVER: "https://*******.net"}, //测试, ], //本地webpack开发服务器端原创 2021-09-13 10:34:31 · 609 阅读 · 0 评论 -
element UI 树形数据只能选择最后一级 只能单选 树形单选树形检索
直接上代码,如有疑问,欢迎交流template里面<el-tree class="filter-tree" :data="assetBigClassTreeData"// 树形data数据,具体按照官方文档格式 :props="defaultProps" //自定义props配置,如严格按照官方格式无需添加此项, @check="checkChange" //checkbox 选项变化事件 node-key="id" //勾选时按照哪个值显示,必须是唯一的值 accordion c原创 2021-06-23 17:51:46 · 6482 阅读 · 2 评论 -
如何在谷歌浏览器正确快速安装vue devtools
这里写自定义目录标题第一步第二步下载压缩包后,解压后打开项目,我下载后的文件名为vue-devtools-master,进入项目后运行cmd或Git Bash Here;运行 npm/yarn/cnpm install运行 npm run build找到目录下方文件shells->chorme -> manifest.json第一步官网下载 master 分支 添加链接描述具体已经把重点部分圈出来,各位客官请看图第二步下载压缩包后,解压后打开项目,我下载后的文件名为vue-devt原创 2021-03-02 17:56:54 · 157 阅读 · 0 评论 -
关于vue-cli3 脚手架打包配置路径配置详解 打包后404问题解决
配置在域名主目录下注意:baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath。publicPath的官方定义为: 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。第一步: vue.config.js中配置 module.exports = { pub原创 2020-09-17 18:38:52 · 1730 阅读 · 0 评论 -
vue-cli 中使用socket 如何在脚手架中引入和使用socket 如何在socket中加入token
脚手架中引入socket本次我使用的是原生socket,vue-socket-io 也是有点问题,最终选择了原生,具体看下方步骤:一、引入socket.js我直接从github下载的socket.io.js, 可以去官网下载,或者直接复制下方:/*! * Socket.IO v2.3.0 * (c) 2014-2019 Guillermo Rauch * Released under the MIT License. */!function(t,e){"object"==typeof ex原创 2020-09-14 16:02:10 · 2083 阅读 · 1 评论 -
vue组建内部导航守卫 查询上个路由页面地址 并赋值到本页面 监听用户未保存修改前突然离开
导航守卫事件:首先大家都知道,官方文档所说:你可以在路由组件内直接定义以下路由导航守卫!于是我们在目标页面可以增加3个路由监听函数;beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeavebeforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 cons原创 2020-07-03 17:53:55 · 433 阅读 · 0 评论 -
element 级联选择获取label 同时获取value和label element 级联选择回显
前情提要在elementUI的Cascader级联选择组件中,获取value大家应该都懂,一般我们会将value设置为id ;<el-cascader size="small" :options="listAll" placeholder="请选择或输入" filterable ref="cascaderAddr" :props="{value: 'id'原创 2020-06-05 14:25:30 · 1881 阅读 · 0 评论 -
vue 四级联动 地址联动 vue级联选择
vue 四级联动效果实现前提首先看下,我们的开发环境及数据封装特点:第一: 开发框架vue-cli3 elementUI第二: 数据封装情况,详见代码部分 data中的 data;满足以上2点再继续,如果数据封装有所不同,可根据实际情况稍作修改。实现过程此处主要采用vue计算属性以及watch监听输入框变化,展示不同的数据。只需加载时一次请求即可。仅个人想法,如有更好的方法,欢...原创 2020-04-08 11:34:54 · 2817 阅读 · 8 评论 -
element表单校验问题 表单清除某个校验 表单图片校验问题
问题描述首先我使用的是vue-cli +element Ui ,就是在表单中有上传图片环节,由于我们这边是先上传图片,提交表单的时候单独传imageUrl即可,官方表格演示中并没有表单校验图片流程,然后按照表单校验一般规则填写,无论是否上传图片,都有提示:图片不能为空,但是如果上传了图片,虽然有提示,但是也能提交成功,但是,这样对用户太不友好。如何修改下面是我的form表单中截取了图片上传一...原创 2020-04-01 14:10:28 · 1934 阅读 · 0 评论 -
vue全家桶都包括哪些 vue全家桶都有什么 vue全家桶详细介绍
vue全家桶都有什么全家桶,顾名思义,对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。注:此文章主要讲解vue-cli脚手架开发方式,不介绍各插件的具体使用方式,具体使用方式详见其他详细介绍文章。一、vue-clivue-cli也叫脚手架,官方定义为Vue.js 开发的标准工具!相比scirpt标签引入,脚手架具有如下特点:1)、功能丰富对 Babel、TypeScr...原创 2019-10-24 10:48:55 · 25915 阅读 · 0 评论 -
vue 动态绑定href a href动态改变 vue href改变 vue 修改href
如何在vue项目中动态改变href问题: 由于将所有api都放在一个js中,对于下载或者有外链时需要使用a标签,那么就需要引用js文件,但是发现a标签不能直接引用外部js的参数;解决办法: 使用计算属性computed来获取;<a :href= 'downloadExcelUrl' download="">下载模板</a>//引入的外部jsconst ...原创 2019-07-19 15:18:29 · 6384 阅读 · 0 评论 -
vue cli3中 vueRouter刷新时返回首页,刷新时store中数据丢失
使用vue-cli3.0框架搭建后台管理系统,使用了store模式,因为每次手动F5刷新时,store中的数据会自动清除,导致每次刷新就丢失所有数据,所以解决办法就是添加一个监听事件,在页面丢失前存储store中的所有数据,在重新加载后再取出 于是在app.vue中添加事件监听,具体代码如下:created(){ //在页面加载时读取sessionStorage里的状态信息 ...原创 2019-03-17 16:07:51 · 1687 阅读 · 0 评论 -
this.$router.go和this.$router.push以及this.$router.replace的区别
vue路由跳转 1、this.$router.go(val) 这里val一般是 number类型 通常是前进或者后退几个层级, 在history中增加一个历史记录, 如果为0,则代表刷新当前页; 2、this.$router.push(param) 这里的param一般是路径名, 而且在history中增加一个历史记录,可返回,比如this.$router.push(“/home...原创 2019-06-13 13:33:41 · 4481 阅读 · 0 评论 -
vuecli3 添加配置文件 vue配置文件 vue.config.js常用配置参数 vue打包配置添加版本号时间戳
vuecli3项目总配置文件及描述module.exports = { publicPath:"/", outputDir: 'dist', // 构建输出目录 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts) lintOnSave: false, // 是否开启eslint保存检测,有效值:ture | f...原创 2019-06-10 10:19:05 · 2909 阅读 · 0 评论 -
Vue-router路由安装配置步骤
路由安装npm install --save vue-router引入import VueRouter from "vue-router"创建Routerconst router = new VueRouter({ routers:[ path: "/index", component: HelloWorld ]})注入 routernew Vue({ el: ...原创 2018-12-19 14:13:31 · 395 阅读 · 0 评论 -
vue cli 如何处理跨域
第一步:在config文件中的index.js中找到dev 文件下的 proxyTable 参数然后修改为:proxyTable: { //跨域处理‘/api’:{target: ‘http:www.baidu.com’, //目标地址changeOrigin: false,pathRewrite: {‘^/api’: ‘’}}},第二步:在main.js中引入 Vue.p...原创 2018-12-06 15:52:24 · 193 阅读 · 0 评论 -
axios安装步骤 axios请求拦截和响应拦截
Axios 是一个基于promise 的一个HTTP库,可以用在浏览器和node.js中优势:从浏览器中创建XMLHttpRequests从node.js创建http 请求支持promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御 XSRF安装步骤npm install axios --save引入在main.js中全局引...原创 2018-12-19 11:27:03 · 3666 阅读 · 0 评论 -
vue swiper中点击预览图片 全屏预览图片 vue点击查看大图
希望实现的效果,见下图图片太小,拍的不好,横着拍的,凑合看_使用到的插件 使用到的插件 vue-photo-preview 第一步:安装插件 npm install vue-photo-preview --save 第二步:引用 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist...原创 2019-07-05 18:02:10 · 5048 阅读 · 5 评论 -
一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突
在vue中如何处理同一个页面中有多个swiper,首先我们需要分2中情况:1、如果在vue中采用 Vue-Awesome-Swiper,如果采用这种方式的话,可以给每个swiper组件添加一个class,来区分,分别建立不同的swiperOption、swiperSlides,具体代码如下://swiper组件1<swiper :options="swiperOptionSwp1"&g...原创 2019-06-20 13:39:36 · 12213 阅读 · 3 评论 -
vue模板数据不随着改变及转义html语法
模板数据不随着改变获取到的数据不随着数据改变而改变data () {retrun{msg: ‘hahha’}} //此时msg会随着输入框内容而变化{ { *msg } } //此时msg不会随着输入框内容而变化,依然是hahha{ { {msg} } } //此时msg可以解析html语法,比如输入框输入hahha aaa ...原创 2019-08-08 13:04:27 · 400 阅读 · 0 评论 -
missing semicolon报错问题解决
missing semicolon报错主要是因为eslint检测出现错误,一般是看下提示行是否写分号,添加上就没问题了原创 2019-09-02 15:51:34 · 25015 阅读 · 1 评论 -
vue 检测路由变化 动态监听路由变化 路由监听事件
Vue中 想在路由变化的时候插入事件,需要使用到 vueRouter动态路由匹配中的响应路由参数的变化方法,提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch ...原创 2019-08-08 10:16:32 · 2507 阅读 · 0 评论