vue
文章平均质量分 55
A黄俊辉A
这个作者很懒,什么都没留下…
展开
-
vue 公众号开发,调用jssdk封装
vue 公众号开发,经常会使用到 转发朋友,朋友圈,调用扫一扫等功能,这时就要使用微信的 jssdk。原创 2024-01-11 15:55:53 · 668 阅读 · 0 评论 -
vite项目报错 This file is being treated as an ES module because it has a ‘.js‘ file extension
NodeJS默认以CommonJS的规范来执行JavaScript代码,使用CommonJS模块的导出和导入方式,也就是对应代码中的module.exports和require关键字,如下所示。原创 2023-12-11 09:48:17 · 999 阅读 · 0 评论 -
vant 配合vue 做移动端的自动适配(amfe-flexible & postcss-pxtorem 踩坑记)
我们做移动端开发的时候要适配各种的屏幕 , 最好的解决办法是使用 rem方式解决, 一般的解决办法是使用 css的识别浏览器宽度的办法, 不同的宽度, 设置不同的 font-size (因为rem 是以 html 的font-size为基准的)如下图:这样的话, 在编码的时候, 对应的去计算 width:xxxrem height:xxrem 举个栗子 如果 font-size=18px 使用的是 iphone6 做适配 (设备宽度是 375) 所以一个宽度占满屏的......原创 2020-11-06 10:12:21 · 4823 阅读 · 2 评论 -
基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem
基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem1,安装 flexible和 postcss-px2rem(命令行安装)npm install lib-flexible --savenpm install postcss-px2rem --save简要介绍这两个包的用途:flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scal原创 2020-10-31 14:47:54 · 556 阅读 · 0 评论 -
vue 监听界面无操作跳转广告页
今天做一个婺城人大大屏项目时, 产品在看完演示后, 又提出了一个要求, 当用户长时间无操做界面的时候,屏幕要自动跳转到广告页。功能不复杂, 但是, 每一个页面都要加上这个监听, 于是 我想到了使用 vue 的 mixins 功能。原创 2022-12-14 11:31:35 · 388 阅读 · 0 评论 -
核销码输入框组件(改进vant 密码输入框只能输入数字)
公司一个项目要求,用户报名一个活动时输入 一串活动字符串, 提交后, 就可以自动报名该活动, 这个功能其实和核销码功能大至类似,我们这里不考虑后端, 只是一个纯粹前端问题。我很自然的就想到了 vant 中的 passwordInput 和NumberKeyboard组件的配合使用, 然而没想到的事情发生了, 这个框只能输入数字, 而我们的活动串码 是字母和数字混合的,所以这两个组件在这里派不上用场,于是在网上查找了一下, 看有没有类似组件的, 没有结果于是, 我产生了自己手写这个组件的念头, 填补这个空原创 2022-12-06 16:26:58 · 854 阅读 · 0 评论 -
vue_router__WEBPACK_IMPORTED_MODULE_7__.default.push is not a function 错误的解决
本人在开发一个第三方接入的项目的时候, 要在请求中判断用记是否登录过, 我们用户登录的跳转放在请求的拦截器中, 也就是 axios 的 interceptors.request.use 中,同时用户的判断登录的过和, 我写在vuex 中的 actions中, 执行是, 就dispatch就可以了, 总之,就是我要在 vuex 的 store/index.js, 实现面页的跳转。然后就出现了上面的错误。router() 难道上 图中引入的 router不一样, 是的, 确实是不一样的。原创 2022-11-28 11:37:48 · 2296 阅读 · 0 评论 -
vue中使用pdfjs-dist + turnjs实现页面的翻书浏览
pdfjs-dist 的工作原理:把获取到的 pbf 的文件的数据流, 利用 canvas转换成图片turnjs 把多个元素做成翻书的特效我接手了一个展示大屏的项目, 其中有一个地方,就是要以翻书的形式来预览 pdf文件如图。原创 2022-10-31 11:10:21 · 860 阅读 · 0 评论 -
css 宽度为百分比, 高度和宽度相等的设置
工作中有一个需求, 一行四个图片(正方形的图片),但是我们又要让图片自适应, 不能使用 px 来设置宽度, 要使用百分比,比如上面一行四个图片, 图片的宽度,我们设置了25%, 高度呢,也设置25%吗,这肯定是不正确的, 高度怎么控制就成了难题像这样的, 我使用的 flex 布局, 图片的宽度是 23% 加上间隙就有 25%了下同看一下解决办法...原创 2022-06-13 12:04:01 · 4403 阅读 · 2 评论 -
vue的自定义指令来控制页面按钮组的权限思想
在vuejs中, 我们可以自定义一些指令,来控制一些按钮加载之前的动作, 比如现有的 v-if 或者 v-show这些功能是我们可以手写的, 现在们来做一个初级的页面级的权限控制的例子vue自定义指令<template> <div class="table-wrapper"> <div class="action-bar"> //v-hasProm 指令是说 如果指令中value 包含在 data.promission 数组中, 就把这个按原创 2022-04-21 17:22:09 · 1117 阅读 · 0 评论 -
vant van-upload 的使用
如果是单图片的上传, 可以不用使用 fileList 我的这样个博客有说明 用户头像修改van-upload是 vant 中解决文件上传的一个组件,同时它还具备上传之后的回显功能,但是它的回显是通过本地的缓存文件显示的, 而我们的上传文件的时候, 后台会返回一个上传文件的地址,我们在提交上传文件的时候, 是把返回的文件地址传给数据库进行保存的, 所以我们要 把文件上传的地址保存到 fileList 变量中的, 但是如果我们简单的把上传过后的返回地址push到 fileList中, 我们可以看到, 文件的原创 2022-04-18 12:43:42 · 4730 阅读 · 0 评论 -
vue + tp5 前后端分离项目中的跨域问题
通常这个问题是不会出现的, 我们在使用vue-cli 打包的时候, 就把打包的后的线上项目文件放在 tp的 public/(dist)的目录下面就好了, 不一定非要是dist 目录,自已打包时打定的, 以上的方式就不会出现 跨域的问题我现在要说的是另一种方式, 前端,后端各有自已的 域名,如前端为 http://front.XXXX.com 后端的域名是 http://backend.XXXX.com前端会在页面中使用 axios 来请求 后端的地址, 这一看, 妥妥的跨域了我在原创 2022-04-12 17:34:04 · 1647 阅读 · 0 评论 -
vant中修改用户的头像
我们的项目中经常会遇到用户个人信息的修改,当然用的组件就是 vant 中的 van-uploader 组件, 但是这个组的是有一个回显功能的, 它的样式不太符合我们, 更改用户头像的场景对比一下van-uploader 的本来的样式是这样的而我们需要修改用户头像的样式是这样的我们的需求就是 上传完图像之后, 再次点击头像, 还可以再次上传一个新的头像, 这样的需求, van-uploader 中的 fileList是实现不了的那么我是怎么实现这个功能的呢我没有使用 van-uplo原创 2022-03-30 11:32:04 · 1514 阅读 · 0 评论 -
vue项目中使用 vue-pdf 预览文件
git地址:https://github.com/FranckFreiburger/vue-pdf#readme1.下载npm install --save vue-pdf2.引入 <template> <div class="wrapper"> <p class="arrow"> // 上一页 <span @click="changePdfPage(0)" class="turn" :class="{grey原创 2022-03-28 20:54:13 · 364 阅读 · 0 评论 -
vue的sync修饰符
vue 中父子组件通信的时候, 我们可能会看到 .snyc 的代码, 它实质上是一个语法糖, 不使用它我们也有解决的方案, 使用它的话,可以使我们的代码更加简洁而已。首先, 我们实现一个功能, 在父组件中定义一个变量来控制子组件的显示, 同时子组件也可以来修改父组件中的变量如图这其实就是一个父子组件间的通信, 父组件通过 props 传给子组件, 子组件要修改父组件的数据, 就要通过 this.$emit来修改如下面的代码:父组件<template> <div原创 2022-03-09 14:33:52 · 933 阅读 · 0 评论 -
vue的全屏组件
项目中有一个驾驶舱页面, 需要用到全屏的显示, 那么我们是怎么做全屏的切换呢有两个方法, 一个就是 使用 F11 键就可以切换全屏第二个方法就是使用 requestFullscreen 方法1.document下没有requestFullscreen2.requestFullscreen方法只能由用户触发,比如:在onload事件中不能触发3.页面跳转需先退出全屏4.进入全屏的元素,将脱离其父元素,所以可能导致之前某些css的失效解决方案:使用 :full-screen伪类 为元素添加全屏时的原创 2022-03-09 10:40:31 · 2561 阅读 · 0 评论 -
vue使用高德地图的行政区域浏览
工作用遇到这样的需求,要求在地图上把每个行政区画上不同的色块, 并且添加一个标注文本来说明,也就是实现下图这种的效果 : 这是金华市下的各级县市的 区域划分上面的效果, 高德可以有两种方式来实理一 绘制行政区划边界 高德地图api二 UI组件-行政区划浏览 UI组件库-行政区划浏览参考文档我们这里来说明一下, 第二种方法的使用方法如下引入 UI 组件库这里还是说一下 vue 中的 AMap 和 AMapUI 的引入吧,(不用 npm 下载 Amap 的 包)在vu原创 2022-03-03 17:04:38 · 3535 阅读 · 0 评论 -
vue + less 项目中 点击按钮切换不同的主题
今天的工作中, 遇到这个问题, 原本开发的一套H5已经完成并上线了, 现在说要记这套站点可以,手动的改变字体大小。以便给老年人使用的时候带来方便其实也就是这样的一个需求 Vue + Less + Css变量实现动态换肤功能如果我们可以动态的定义一个变量(全局的), 当我们有一个按钮,更改这个变量的值就好了安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader 下面是这两个插件的作用同时我们要在 vue.c原创 2022-03-01 16:02:47 · 1418 阅读 · 0 评论 -
vue页面的缓存问题解决(keep-alive + 页面级路由守卫 + 生命周期activated)共同解决
上面的问题出现之后, 我们分析一下其结果可以简化成我们想要的功能是这样的列表页中的数据, 我希望, 如果是从详情页跳回来的时候就把页面内容给缓存下来,如果是从首页跳转过来的时候, 就要重新请求数据, 不要缓存解决步骤先把详情页跳转到列表页的问题给解决了当我们从详情页跳回到列表页的时候, 总是给我们跳回到了分页的第一页, 这样的体验对用户来说肯定是不好的, 所以这个问题我们可以在 router-view 加上 keep-alive这是我的真实项目中的代码, 其中 keep-alive :i.原创 2022-01-18 14:57:23 · 2358 阅读 · 1 评论 -
vue watch中获取this.$refs.xxx节点的方法
项目中要在 watch中使用 refs操作dom对象,因为我们的watch是监听特性,会使用时,this.refs 操作 dom对象, 因为我们的watch是监听特性, 会使用时, this.refs操作dom对象,因为我们的watch是监听特性,会使用时,this.refs是undefined , 所以我们的解决办法是 this.$nextTick()来帮忙解决...原创 2021-12-14 15:20:11 · 6327 阅读 · 1 评论 -
vue 项目中的打包配置
当我在使用vue 项目的时候, 我们可能会打包一下线上环境发布, 一会又在本地启动, 因为线上的环境要放在站点根目录下的二级目录中, 而我们的测试环境只是在 ./ 的根目录下, 所以, 当我要打包的时候, 我一般的会更改文件的三个地方一. vue.config.js 文件中的 publicPath 配置项二. 修改 vue 的路由文件的 router.js三. 在我封装的 请求类中 http.js中的 axios 配置修改上面这样 打开后又注释真是麻烦后来我使用了 proces原创 2021-12-09 14:30:07 · 2618 阅读 · 0 评论 -
vue watch监视对象的属必以及它的深度监视
我们在使用vue的时候有是, 我们想监视视, data中的对象的某一个属性 data(){ return { student:{ age:10, sex:"男" } } }上面的属性, 我们想监视 student.age 的属性, 此时我们的watch 应该是这样写的watch:{ 'student.age':function(newvalue,oldvlaue){ ...... }}这样, 我们就可以监视到 student.age的属性的变化,原创 2021-12-08 22:15:38 · 511 阅读 · 0 评论 -
vue项目使用history模式,打包部署到服务器根目录与二级目录的方法,防止刷新后出错
在vue 打包上线后, 如果我们使用的路由模式是 history 模式, 那么, 我们刷新其中的子页面的时候, 会出现错误解决这个问题的方法, 最简单的方法就是使用 hash 模式的路由但是 hash 模式的路径对seo 不友好, 本人也不喜欢所以我们就使用 history 模式, 并且让其刷新时还不会出错一、部署到根目录这个方式比较简单,和你正常打包配置方式一模一样。打包时,vue.config.js中配置publicPath=’/'即可nginx配置:location / {原创 2021-12-07 09:36:21 · 2178 阅读 · 0 评论 -
图片上传涉及到的blob格式问题
前言Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。问题描述使用vue-cropper插件进行图片切割头像,将切割后的头像转为blob文件上传,与后端对接的时候发现,blob的filename默认为‘blob’,导致后端接受数据的时候,无法根据上传图片的后缀名保存图片,全部为.blob文件,从而导致接口无法返回正确的url地址。这之中上传文件使用的是el-转载 2021-11-30 20:20:42 · 5915 阅读 · 1 评论 -
vue 在标签中使用(data-XXX)自定义属性并获取的方法
我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面获取标签的写法 <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1"> <van-image :src="aaa"></van-image> <span>{{ item.title }}</span>原创 2021-11-12 12:27:43 · 6134 阅读 · 1 评论 -
Vue-cli 返回本地模拟数据的两种方法
当我们使用vue-cli开发项目的时候, 我们会使用一些, 模拟数据(自己定义的数据)来作为接口请求过来的数据在vue-cli 4 的版本有两种做法一种是 把模拟数据写在 public 文件夹中, 使用 axios, 来请求数据, 因为vue-cli 的 devserver 是把public 目录, 做为访问的根目录的, 如果根目录中没有找到所要的资源, 才会去看有没有代理服务器第二种, 就是自已配置一个 express 服务器, 配置一下请求的参数, 并且在 vue.config.js中 配置 代理原创 2021-10-18 00:01:24 · 300 阅读 · 0 评论 -
vue中的vue-router query方式和params方式
我们在vue中项目中, 使用 vue-router 是比较常见的vue 的路由跳转有两种方式一种是使用组件 router-link另一种就是编程式路由导航我们可以把vue 的组件分为两种, 一种是一般组件, 一种就是路由组件一般组件使用的时候, 我们都是手写 它的标签来使用的 比如我们会引入component 使用时会写明<VueComponetXXXX></VueComponentXXX>路由组件我们一般会在 router.js中定义路由组件, 为它配置pat原创 2021-10-16 17:14:58 · 6352 阅读 · 1 评论 -
vue中的插槽
vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot )插槽的分类默认插槽具名插槽作用域插槽当我们的组件中 我们只需要插入一个 html 标签的时候, 就使用默认插槽就可以了,如果有多个, 我们就要给第一个 插槽取一个名字, 来决定到底插入哪一个插槽当我们的插槽中要使用组件中的数据的时候, 就可能会用到作用域插槽下面展示一下, 默认插槽的用法使用时以上就是默认插槽的使用具名插槽, 也就是说我们在组件中定一个 多个 slot , 为原创 2021-10-16 12:48:42 · 515 阅读 · 1 评论 -
vue的动画
vue的动画可以分为两种一种是动画效果, 另一种叫过渡效果当然, 如果不使用 vue 的动画, 我们自己来使用 css3 写出一个关键帧动画, 也是可以的要使用vue 的动画, 我们首先要在, 动画的元素上面 加上 transition 在 transition元素上, 可以添加name 为动画指定一个标识appear 设置节点在初始渲染的过渡 如果 appear = true 表示在页面 第一次加载的时候就使用动画下面来展示一下 第一种动画效果的代码上面的代码属于关键帧的动画原创 2021-10-16 10:03:58 · 574 阅读 · 0 评论 -
vue的全局事件总线
我们使用 vue 的过程中,会有很多时候要用到组件间的通信, 组件间的通信也有很多种, 比如 父子组件通信, 兄弟组件通信,任意组件间的通信解决组件间的通信也有很多方法,$emit 父子组件的通信可用事件的订阅与发布(npm i pubsub-js) 订阅发布文档 任意组件通信可用vuex 任意组件通信可用 比较重全局事件总线 任意组件通信可用这里我们来介绍一下,全局事件总线的用法,它相对来说轻量一点, 使用比较方便先来说一下, 全局事件总线的设计思路我们知着, 在原创 2021-10-16 00:07:13 · 864 阅读 · 0 评论 -
vue的自定义事件
vue的自定义事件, 多数情况下是用来做组件之间的通信的为了简单, 我们就说一下, 子父组件之间通信的那些事子父组件之间的通信, 我们有两种方式, 一种是在父组件中定义好函数, 通过props 把回调函数, 传给子组件, 当子组件触发事件时, 调用父组件传过来的回调函数, 来修改父组件的数据, 具体如下父组件...原创 2021-10-15 21:52:20 · 297 阅读 · 0 评论 -
Vue不能检测到数据变化的几种情况
Vue 实现了数据的双向绑定, 所以我们在更改数据时, 页面就会实时的反映出修改的变化但是由于javascript 的限制, 有几种情况, vue是不能检测到数据变化的第一类, 对于数组,当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength如下例 new Vue({ data(){ return { arr:[ {id:1,name:原创 2021-10-15 15:15:52 · 2684 阅读 · 0 评论 -
vue 中的 mixins的使用
Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的。同时, 这个mixins 也分为局部混入和全局混入应用场景下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时, 都要 console.log 一下, data 中的一个name 属性的值第一个组件是 school组件,如下图第二个组件是 student组件我们可以看到, 不同的两个组件, 有一个相同功能的方法, 这种写法会导到, 我们要在两个组件中写出同样的代码, 两个组件还可以接原创 2021-10-14 23:59:31 · 620 阅读 · 0 评论 -
Vue脚手架中的 render 理解
在vue的脚手架中, 我们会看到在入口文件 main.js中的 new Vue的代码中有一段代码 render:h=>h(App);这段代码不像我们 一般的使用vue 时的代码我写一下 一般的Vue 代码 import Acomponent from "../Acomponent" vm = new Vue({ el:"#app" data(){ return { a:"aaa", b:"bbb" } }, template:`<div>原创 2021-10-14 00:00:12 · 857 阅读 · 3 评论 -
vue 可以侦听data中的数据变化的原理
Object.defineProperty()要想搞懂 vue 侦听数据变化的源理, 我们就必须要了解一下 defineProperty();它的作用是给对象添加一个属性, 并且可以灵活的对属性进行设置 如:是否可以遍历, 是否可以修改 删除等等当然, 给对象添加属性有很多方式, 为什么就要用这一种呢?下面用代码来说明一下 let obj1 = { name:"huang", sex:"男" } obj1.age = 20;原创 2021-09-26 22:24:17 · 623 阅读 · 0 评论