![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 50
月落星河°
一个领域里面的大师永远不会是另一个类似领域的菜鸟
展开
-
vue多选
做项目的时候,产品需求需要多选,记录一下代码,以后可以直接使用,也想没有思路的伙伴提供一个代码:data中的数据结构,我们必须要一个字段来记录当前的选中状态,我在这里使用了isActive来记录当前点击元素选中的状态data() { return { diseasesList: [ { isActive: false, type: "blood_pressure", name: "血压问题",原创 2021-11-23 16:14:34 · 800 阅读 · 0 评论 -
element table 中sortable排序
在项目中做表格的排序,我使用的是自定义的排序,也就是通过后台接口进行的排序,写个文章记录一下element的三种排序方式。在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前原创 2021-05-07 17:53:14 · 11738 阅读 · 3 评论 -
vue导出后台返回的excel 和 zip
在uni-app开发H5中使用微信公众号做支付的时候,wx.config的debug模式一定要开启,这样可以看到你的报错,遇到了the permission value is offline verifying 这个错误,我以为是其他地方的问题,后来发现放到真机上就可以调起支付了,如果你也有碰到这个支付报错的话,不排除是因为微信公众号的开发者工具中不支持调起微信公众号的支付,不像小程序直接就调起一个二维码。...原创 2021-04-25 19:00:07 · 364 阅读 · 0 评论 -
Element + vue2.0 + vue-cli3.0 的国际化使用(二)
接着上一篇继续我们的国际化的封装上篇链接。因为在上篇中虽然实现了可以切换了,但是我们为了更好的管理,我们需要单独的去放到一个文件中,我们需要国际化的数据绝对不会是一个hello这么简单,肯定是有很多的数据的。1.我们先在src目录下新建一个lang的文件夹2.新建一个js文件,一个index.js,再新建几个我们语言的文件,比如你需要en和zh那么就见两个js文件,依次类推,这里我将值见一个en和zh,如下:这里我们两个文件的格式要一样,即使有很多的语言文件也要一样在lang文件夹中的inde原创 2021-01-30 16:56:43 · 209 阅读 · 0 评论 -
Element + vue2.0 + vue-cli3.0 的国际化使用(一)
Elemnt + vue2.0 + vue-cli3.0 的国际化使用现在使用的是Element 2.15.0 的版本,理论上是在其他的版本也不会出现问题的,如果有出现问题并且找不到解决方法的话,那么就要考虑下版本的问题,废话不说了,直接进入教程:如果你不知道从哪里搞起,那么我们先看Element的官方教程,我们先按照官方教程先配置,然后遇到问题再解决问题吗,最后我会将项目放在github上,项目是我为了写博客新建的vue-cli项目,如果懒的看的话,就直接去github上下载就可以。我们先根据Ele原创 2021-01-30 16:19:57 · 444 阅读 · 4 评论 -
elementUi字体图标出现跨域加载不出来,或者在本地使用elementUi的时候引入字体文件
直接上错误,这是使用的elementUi直接上面加载不出来线上的这个地址不知道为什么引入不进去,我们可以从element中把这个文件拿到本地来,在本地引入,代码如下:@font-face { font-family:"element-icons"; src: url(../lib/fonts/element-icons.ttf);}@font-face { font-family:"element-icons"; src: url(../lib/fonts/elem原创 2020-12-15 18:26:34 · 2420 阅读 · 0 评论 -
vue下载pdf文件
一、引入download.jsnpm install downloadjs 地址:https://www.npmjs.com/package/downloadjs注意这个npm下载的这个download.js是有问题的,它能下载下来pdf文件,但是打不开这个pdf,在文章末尾的话,我会附上一个修改完的js。<template> <div class="home"> <!-- <HelloWorld @listener="show" ref="chil原创 2020-12-07 14:19:55 · 4428 阅读 · 5 评论 -
vue动态修改打包后的请求路径
需求分析我们需要在打完dist包以后,去通过打包生成后的index.html去配置它的请求路径,可以解决前端反复打包测试环境和生产环境的问题,也可以解决动态配置请求路劲的问题,我们可以通过后台去动态的修改我们打包好的请求地址具体实现我们需要在vue的public页面中将这个地址挂载到window对象上。因为打包后我们的public文件夹不会进行webpack的解析,所以等打完包后我们就可以去修改这个你挂载的值。我们直接在这个将你window对象的值赋值给你axios的baseUrl,我这里是做原创 2020-08-20 16:23:32 · 3566 阅读 · 0 评论 -
vue 修改第三方样式库并不影响别的页面
原文链接 https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html?q=以下介绍比较啰嗦,大家如果不想看可以直接跳到官方文档↑↑↑1.需要场景当 在vue中 style 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,防止样式的全局污染,尤其是在我们引用第三方库的,可能它们没有达到我们的要求,我们需要去修改第三方的样式,如果我们不加scoped的时候可能在别的页面也会修改我们的样式。2.解决方案方法1(原创 2020-06-01 18:50:38 · 1761 阅读 · 0 评论 -
Vue watch和computed快速上手
<template> <div class="home"> <div>计算的属性{{watchNuber}}</div> <div>{{watchNuberAfter}}</div> <img src="@/assets/images/wxy.jpg" alt srcset @click="handleWatchClick" /> </div></template>原创 2020-05-18 18:24:10 · 138 阅读 · 0 评论 -
vue router 跳转一个新的标签页
let routeUrl = this.$router.resolve({ path: '/alicenter/detail', query: { id : id } }); window.open(routeUrl.href, '_blank');这样网站就可以在一个新的标签页打开了...原创 2020-05-10 17:30:56 · 2199 阅读 · 0 评论 -
微信公众号VUE项目获取code
在微信公众号的项目中难免会用到支付,用到支付后就必须前端拿到code后去换区openid,在微信公众号中获取授权的有两种方式,一种是静默授权,一种是非静默的授权,具体移步微信公众号开发文档 let origin = location.href; let urlNow =encodeURIComponent(origin);///netbar/api/wechat/v1/get_open_i...原创 2020-01-18 16:51:24 · 8298 阅读 · 10 评论 -
微信公众号VUE项目安卓能请求到数据IOS报NetworkError
一、起因在本地测试环境和正式环境上测试的时候都是没有什么问题的,客户需要部署到他们的服务器上,需要换成他们的域名,然后就换完以后就出现下面的问题,但是在安卓上是可以正常跑的。二、解决过程首先我去排查了是那个地方报的错,发现是我的request.js中报的,就是axios报的,然后然后百度说让我把 config.headers['Content-Type'] = 'application...原创 2020-01-18 16:28:23 · 3998 阅读 · 0 评论 -
vue项目中ios时间显示NAN
1、下载 npm install moment --save2、引入import moment from 'moment/moment'3、使用 filters: { formatDateTime(value) { return moment(value).format('YYYY/MM/DD HH:mm:ss'); } }, <span...原创 2019-12-31 16:47:29 · 1062 阅读 · 1 评论 -
vue项目vant中ImagePreview组件的使用
1、引入 import { ImagePreview } from "vant";2、使用//ImagePreview和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式。使用前需要先引入它。//为你的图片加入点击事件,就会展示大图了。 <img v-for="(item,index) in pictureList" :key="index" class...原创 2019-12-31 16:26:31 · 9767 阅读 · 2 评论 -
vue项目vant中picker组件的使用
1、引入import { Picker } from 'vant'2、使用 components: { vanPicker: Picker, }3、渲染 <van-picker show-toolbar :columns="columns" value-key="updateText" />4...原创 2019-12-31 16:15:59 · 10596 阅读 · 4 评论 -
vue中使用vant中TreeSelect 分类选择组件
在vue中使用vant中TreeSelect的组件中文文档:TreeSelect 分类选择效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant";代码部分: <van-popup v-model="policeShow" ...原创 2019-12-31 16:07:00 · 24086 阅读 · 19 评论 -
解决微信公众号vue项目中在ios上localStroage无效的问题
上一篇文章介绍了一下本地存储的应用,这篇博客解决一下实际问题,在项目中发现使用localStroage缓存带本地的时候在ios端上还是退出浏览器后它的数据也小时了,通过网上找到找使用cookie缓存,可以在ios退出后也能缓存,注:在安卓是没有问题的。一、首先要安装vue-cookies npm install vue-cookies --save二、在main.js中引入//如...原创 2019-12-31 14:58:59 · 1671 阅读 · 2 评论 -
项目实战-爬坑系列vue-cli3.x中axios请求网络数据(五)
axios是vue中最常用的一个数据请求工具,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本来vue框架中是有vue-resource这个插件的,但是由于axios很好用,所以就不在维护vue-resource,并且推荐的大家使用axios。axios中文文档地址:https://blog.lee-cloud.xyz/post/1/Axios-zhon...原创 2019-04-28 15:11:52 · 1728 阅读 · 0 评论 -
项目实战-爬坑系列vue-cli3.x中本地封装axios数据请求(六)
本地简单封装axios数据请求也可以参考:https://www.jianshu.com/p/993383798f30接下来就有我来带大家去看看数据封装,终于设计到技术点了,如果直接看数据封装看不明白的可以看我上一篇博客,https://blog.csdn.net/wangzongyang1025_/article/details/89638237介绍了axios怎么请求数据,接下来...原创 2019-04-28 17:50:54 · 2509 阅读 · 0 评论 -
项目实战-爬坑系列vue-cli3.x中public和assets的区别(七)
接上篇文章讲问什么必须放在静态资源文件中,具体可以转到webpack 模板的文档 - Handing Static Assets咱们先抛出问题:我在根目录新建了文件里面是有数据的,我打开浏览器输http://localhost:8080/hello.json是请求不到的,它会自动给你返回到首页但是如果我们在去获取静态目录下的json文件就可以:已经获取到了这个json数据:v...原创 2019-04-28 18:55:37 · 10842 阅读 · 0 评论 -
项目实战-爬坑系列vue-cli3.x vue.config.js的配置(二)
在搭建完项目后我们就需要自定义的去配置vue.config.js,因为vuecli3里面,减少了webpack的操作,所以它是一个可选的配置文件,我们要把他配置在项目的根目录中,这样它就会被@vue/cli-service自动加载,你也可以使用package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。module.exports = { publ...原创 2019-04-25 15:51:37 · 333 阅读 · 0 评论 -
项目实战-爬坑系列vue-cli3.x 快速原型开发(三)
这是vue-cli3中提供的快速开发,可以打开单个.vue的页面进行开发,你可以使用vue serve 和 vue build ,不过这需要先额外安装一个全局的扩展:npm install -g @vue/cli-service-globalvue serve 的缺点就是它需要安装全局依赖,这让它在不同机器上得不到保证。因此这只适用于快速原型开发。然后打开你的终端,在这里注意一下你的文件...原创 2019-04-25 16:03:36 · 1171 阅读 · 0 评论 -
项目实战-爬坑系列vue-cli3.x 快速原型开发 发生错误信息UnhandledPromiseRejectionWarning: Error: No loader specified(四)
在我们使用快速开发原型的时候可能因为一点点的不小心出现一些错误,而现在关于网上的问题解决方案也是非常少的,今天就报出一个我出现的错误,令我很是费解的问题,我一直找不到原因我先把错误报出来,可能错误信息有点长: INFO Starting development server...(node:8176) UnhandledPromiseRejectionWarning: Error: No l...原创 2019-04-25 16:16:24 · 8589 阅读 · 4 评论 -
项目实战-爬坑系列vue-cli3.x中路由的使用(八)
今天说一下路由的使用方法,因为vue-router的使用无论是在vue-cli2.x和vue-cli3.x中的是一样的,所以我在这里用的是vue-cli2.x的版本。1、我的vue-router是在安装vue-cli中安装的,如果没有安装你需要先安装一下vue-router(建议还是在vue-cli中直接去选择安装vue-router)npm install vue-router 2、然...原创 2019-05-06 15:36:03 · 1015 阅读 · 0 评论 -
vue.js li 切换样式
选中效果 ul li { text-decoration: none; } ul li.active{ color: red; }原创 2018-08-25 10:48:11 · 3565 阅读 · 0 评论 -
keep-alive的使用
keep-alive的作用主要是保留组件的状态和避免重新渲染,可以配合生命周期函数activated和deactivated,activated是keep-alive激活的时候调用,deactivated是keep-alive停止的时候调用,使用方法:https://cn.vuejs.org/v2/api/#keep-alive...原创 2018-12-31 22:02:01 · 1062 阅读 · 0 评论 -
安装vue-cli的时候webpack出现错误提示,解决办法
webpack提示Cannot read property ‘properties’ of undefined错误提示这样一堆错误/Users/xxx/Code/js/xxx/node_modules/_webpack-cli@2.1.5@webpack-cli/bin/config-yargs.js:89 describe: optionsSchema.definitions.output....原创 2019-01-07 14:56:32 · 2041 阅读 · 0 评论 -
项目实战-爬坑系列vue-cli3.x搭建教程(一)
搭建vue-cli3.x教程再次用到vue脚手架的时候时候已经是vue.3x这个版本了。我在这里使用的是cnpm淘宝镜像:https://npm.taobao.org/1.主要命令:cnpm install -@ vue/cli 在全局安装2.查看是否安装成功:vue -V 如果显示版本号那么则是安装成功3.切换到你准备好的文件夹:4.关键命令:vue create “你的项目名称...原创 2019-04-22 18:54:21 · 1663 阅读 · 0 评论