分类：Vue

2020
09-27

vue cli3适配所有端方案的实现

应用场景页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本，稍作修改，基本可以满足我的需求。postcss-px2remyarnaddpostcss-px2rempostcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件//css相关配置css:{//... 继续阅读 >

2020
09-27

vue.js中使用微信扫一扫解决invalid signature问题(完美解决)

1、点击按钮，实现微信扫一扫功能：<template><aclass="btn"@click="scan">扫一扫</a></template>2、使用config接口注入配置信息，wx.config调用方法如下：（其中appId,timestamp,nonceStr,signature必须从后台获取，传参当前网页的URL，不包含#及其后面部分，location.href.split('#')[0]获取）wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参... 继续阅读 >

2020
09-27

vue使用微信扫一扫功能的实现代码

第一步：安装weixin-js-sdk和jquery包npminstallweixin-js-sdkjquery第二部：配置wx.config（配置都是后端返回来的，菜鸟前端只需要按需传值过去就可）代码如下importwxfrom“weixin-js-sdk”;import$from“jquery”;goSao(){//这里【url参数一定是去参的本网址】，请求后端接口换取signature//(兼容安卓和ios)leturl="传值";letua=navigator.userAgent.toLowerCase();if(/iphone|ipad|ipod/.test(ua... 继续阅读 >

2020
09-27

Vue 中 template 有且只能一个 root的原因解析(源码分析)

引言今年，疫情并没有影响到各种面经的正常出现，可谓是络绎不绝（学不动...）。然后，在前段时间也看到一个这样的关于Vue的问题，为什么每个组件template中有且只能一个root？可能，大家在平常开发中，用的较多就是template写html的形式。当然，不排除用JSX和render()函数的。但是，究其本质，它们最终都会转化成render()函数。然后，再由render()函数转为VritualDOM（以下统称VNode）。而render()函... 继续阅读 >

2020
09-27

Vue实现Layui的集成方法步骤

前言在写公司项目时，遇到了集成layim实现在线客服的一个需求，经过我的一番折腾后，终于将layui集成了进来，接下来就跟大家分享下我的解决方案，欢迎各位感兴趣的开发者阅读本文:grin:获取layimlayui官方提供了npm的安装方法，我司使用的是layui正版授权的layim，今天在折腾时发现，从npm仓库获取layui，里面自带了layim，大家可以去白嫖一波，不过大家需要注意版权问题(如下图所示,layui官网进行了声明)。商用项目的话还是建议大... 继续阅读 >

2020
09-27

vue-drag-chart 拖动/缩放图表组件的实例代码

vue-drag-chart一个可以拖动/缩放的图表组件使用npmivue-drag-chart--saveimportVueDragChartfrom"../src/vue-drag-chart/index.vue";components:{//注册插件VueDragChart},<VueDragChart:list="item"v-for="(item,index)inchartlist":key="index"@changelist="changelist"></VueDragChart>数据源例子chartlist:[{width:0.3,height:0.3,x:200,y:100,title:"折线图",type:1,... 继续阅读 >

2020
09-27

vue+vant使用图片预览功能ImagePreview的问题解决

如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：    着实让员外百思不其解，在调用vant的ImagePreview图片预览组件中，没有html，有的只是引入ImagePreview和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的beforeRoute... 继续阅读 >

2020
09-27

springboot+vue实现websocket配置过程解析

1.引入依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>1.3.5.RELEASE</version></dependency>2.配置ServerEndpointExporter@ConfigurationpublicclassWebSocketConfig{@BeanpublicServerEndpointExporterserverEndpointExporter(){returnnewServerEndpointExporter();}}这个bean会自动注册使用了@ServerEndpoint注解声... 继续阅读 >

2020
09-27

vue中的过滤器及其时间格式化问题

一、过滤器介绍Vue.js允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部，由管道符号指示：<!--在双花括号中-->{{message|capitalize}}<!--在`v-bind`中--><divv-bind:id="rawId|formatId"></div>二、全局过滤器在创建Vue实例之前全局定义过滤器【代码示例】<!DOCTYPEhtml><h... 继续阅读 >

2020
09-27

vue cli4下环境变量和模式示例详解

本文介绍了vuecli4下环境变量和模式示例详解，分享给大家，具体如下：官方文档环境变量一个环境变量文件只包含环境变量的键值对：NODE_ENV=developmentVUE_APP_BASE_URL=http://127.0.0.1:8080/注意：NODE_ENV-是“development”、“production”、"test"或者自定义的值。具体的值取决于应用运行的模式BASE_URL-会和vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径除了NODE_ENV和BASE_UR... 继续阅读 >

2020
09-27

vue与iframe之间的信息交互的实现

说一下我的使用场景：在vue中使用百度地图，需要使用离线地图 先上代码然后细细品第一张图 第二张图第三张图 1.首先iframe引入你要嵌套的地址2.通过vue中给出的ref来获取ifarme的DOM元素如图中的this.iframeWin=this.$refs.iframe.contentWindow【拿到iframe的window对象】3.vue如何向iframe内传送信息可以通过H5新属性postmessage注释：【postMessage是有点类似于UDP协议，就像短信，是异步的，你发... 继续阅读 >

2020
09-25

Vue列表循环从指定下标开始的多种解决方案

最近遇到一个问题，在循环商品列表时，因为数组的第一个是商品的品牌介绍，所以循环时不能直接循环，只能从第二个元素开始。 方案1：从数据源头更改，后端直接在列表里去除第一个数组元素。但前端还是需要在别的地方展示品牌信息，故不好去除。（至于为何品牌信息需要和商品混合在一起，原因是业务问题。以前是给APP上展示的。）方案2：循环时，列表切割方案3：利用v-if，因为它的优先级低于v-for方案4：利用method，返回新... 继续阅读 >

2020
09-25

vue开发移动端底部导航条功能

效果图 src/app.vue<template><divid="app"class="g-container"><divclass="g-header-container">头部导航</div><divclass="g-view-container"><divclass="content">内容区域</div></div><divclass="g-footer-container"><tabbar/></div></div></template><script>importTabbarfrom'components/tabbar';exportdefault{name:'App',components:{Tabbar}}</script><s... 继续阅读 >

2020
09-25

vue实现表单未编辑或未保存离开弹窗提示功能

说明UI组件是使用QuasarFramework。最近做一个表单弹出框，表单保存提交，但是，产品提出，用户不保存，而关闭弹出框时，要给出一个弹窗提示。这个功能，可以用watch监听表单数据。当数据表单发生变化，用户点击了关闭按钮，则根据监听结果来判断用户输入或编辑了数据，进而出现弹窗提示，让用户选择是否离开；当数据没发生变化，则不必提示。确认离开提示框实现效果先实现一个确认离开提示框，效果如下： 实现代码：<temp... 继续阅读 >

2020
09-25

详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题。就是当使用@mouseenter和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象。重点：事件写到父元素上才行！！！0.0下面写下我的实现方法和实现效果样式代码：<divclass="imgs"v-for="(item,index)inexampleUrl":key=index@mouseenter="enterFun(index)"@mouseleave="leaveFun(index)">... 继续阅读 >

2020
09-25

详解vue-flickity的fullScreen功能实现

描述在项目集成了vue-flickity组件后发现，该组件参考flickity官网的fullscreen配置不起作用实现方法需要添加flickity-fullscreen组件在main.js中导入flickity-fullscreen组件添加flickity组件的fullscreen属性定义fullscreen的CSS样式具体步骤1.添加flickity-fullscreen组件需要提前配置好flickityyarn:yarnaddflickity-fullscreen--savenpm:npminstallflickity-fullscreenBower:bowerinstallflickity-fullscre... 继续阅读 >