随笔分类 -  vue.js

vue.js
前端生成二维码并下载（PC端）
摘要：最近项目（Vue）有个这样的需求： 根据id生成收款二维码（已经知道网址，需要拼接参数），用来提供给微信小程序扫码支付，并且可以下载二维码。 也就是说需要前端生成二维码，并且可以下载。 一、解决方案：使用qrcode实现。 二、实现步骤： 1、安装qrcode npm install qrcode 阅读全文
posted @ 2021-07-15 15:38 Lena_叶 阅读(976) 评论(0) 推荐(0)
vue-amap安装和使用
摘要：之前分享了异步加载高德地图api的用法，现在记录一下vue-amap的用法。 vue-amap 是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定，开发者无需关心地图的具体操作。 官方文档：https://elemefe.github.io/vue-amap/ 阅读全文
posted @ 2020-09-08 11:13 Lena_叶 阅读(20373) 评论(46) 推荐(0)
学会使用vue ui搭建项目
摘要：我们搭建项目最省事的方法就是利用vue-cli脚手架，vue-cli基于webpack工具链，不但整合了默认配置，还提供了简洁的接口，让我们在必要时调整配置，搭建适合自己业务的项目。此外，脚手架还可以帮我们创建目录结构，拉取依赖资源，生成demo页面等。 我们按步骤来： 1.安装vue-cli np 阅读全文
posted @ 2020-04-16 10:32 Lena_叶 阅读(2444) 评论(0) 推荐(0)
用vue封装视频预览组件（手机端）
摘要：最近写手机打开的h5页面时，有视频预览的需求，于是封装了一个小组件。 组件目录如下： 1.首先，showVideo.vue <template> <div class="video-box" v-if="videoFlag"> <span class="close-btn" @click="clos 阅读全文
posted @ 2020-03-23 18:19 Lena_叶 阅读(1559) 评论(0) 推荐(0)
Vue使用QRCode.js生成二维码
摘要：1.安装qrcode 2.组件中引入qrcode 3.html代码 4.使用qrcode：调用QRCode.toDataURL(二维码扫描的url)方法，可生成所需要的二维码 阅读全文
posted @ 2019-05-28 15:48 Lena_叶 阅读(9314) 评论(0) 推荐(1)
Vue异步加载高德地图API
摘要：项目中用到了高德地图的API以及UI组件库，因为是直接把引入script写在index.html中，项目打包后运行在服务器，用浏览器访问加载第一次时会非常慢，主要原因是加载高德地图相关的js（近一分钟），用户体验非常不好。 于是在网上找了些资料，改成异步加载的方式。以下是实现方案： 1.首先定义一个 阅读全文
posted @ 2019-05-09 15:26 Lena_叶 阅读(6295) 评论(5) 推荐(0)
vue实现滑块滑动校验
摘要：为了防止机器操作自动提交，我们需要添加滑动校验。 实现代码如下： 1.子组件slider.vue <template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{conf 阅读全文
posted @ 2019-02-16 17:05 Lena_叶 阅读(3281) 评论(0) 推荐(0)
阿里云OSS上传文件demo
摘要：1、安装ali-oss 2、demo 此例中使用到了ElementUI的el-upload组件。因为样式为自定义的 所以没有用element的自动上传的属性，这里配置根据项目需求，需要自定义，可以按照以下配置： http-request：覆盖默认的上传行为，可以自定义上传的实现； show-file 阅读全文
posted @ 2019-01-31 17:32 Lena_叶 阅读(1515) 评论(0) 推荐(0)
阿里云OSS上传文件本地调试跨域问题解决
摘要：问题描述： 最近后台说为了提高上传效率，要前端直接上传文件到阿里云，而不经过后台。因为在阿里云服务器设置的允许源（region）为某个固定的域名下的源（例如*.cheche.com） 我们直接在本地测试上传会有跨域问题： 解决方案： 在本机C:\Windows\System32\drivers\et 阅读全文
posted @ 2018-12-27 18:51 Lena_叶 阅读(22037) 评论(11) 推荐(1)
vue+ElementUI+高德API地址模糊搜索（自定义UI组件）
摘要：开发环境描述： Vue.js ElementUI 高德地图API 需求描述： 在新增地址信息的时候，我们需要根据input输入的关键字调用地图的输入提示API，获取到返回的数据，并根据这些数据生成下拉列表，选择某一个即获取当前的地址相关信息（包括位置名称、经纬度、街区、城市、id等信息）。 如果不用 阅读全文
posted @ 2018-12-07 17:08 Lena_叶 阅读(11557) 评论(14) 推荐(1)
axios配置及使用（发起请求时带上token）
摘要：1.安装 利用npm安装 2.引入即可使用 3.目录 4.各个文件设置： （1）env.js （2）index.js 备注：road.js定义了一个新的Vue对象，目的是调用elementUI的提示信息（$message，比如当服务器连接失败时，提示“服务器连接失败”），不需要用到的可移除相关配置 阅读全文
posted @ 2018-10-25 17:06 Lena_叶 阅读(44723) 评论(2) 推荐(1)
axios + vue导出excel文件
摘要：（使用到了elementUI框架） api/api_dispatch.js: api/index.js:（省略了其他的GET、POST等方法） 阅读全文
posted @ 2018-10-09 10:40 Lena_叶 阅读(11936) 评论(6) 推荐(1)
textarea与标签组合，点击标签填入标签内容，再次点击删除内容（vue）
摘要：需求：将textarea与span标签组合，点击标签自动填入标签文本内容，再次点击删除标签文本对应内容 原理：点击标签时，将标签内容作为参数，将内容拼接在textarea的value后面，再次点击标签，使用js的replace替换（这里只能替换找到的第一个与标签内容相同的值） 实现代码如下： 阅读全文
posted @ 2018-09-25 15:26 Lena_叶 阅读(2453) 评论(0) 推荐(0)
vue复制textarea文本域内容到粘贴板
摘要：vue实现复制内容到粘贴板 方案：找到textarea对象（input同样适用），获取焦点，选中textarea的所有内容，并调用document.execCommand("copy") 实现代码： <template> <div> <textarea ref="letters"></textare 阅读全文
posted @ 2018-09-01 18:10 Lena_叶 阅读(3706) 评论(1) 推荐(0)
Vue页面手动刷新，导航栏激活项还原到初始状态问题解决方案
摘要：场景描述：在页面中存在顶部导航和左侧导航，左侧导航和右侧内容区使用了命名视图实现，点击左侧导航的链接时，右侧内容区相应显示不同组件内容。问题：在当前链接手动刷新浏览器（例如：浏览器地址为/enterprise/list），顶部导航激活项还原到初始状态（这里默认是“工作台”项）。 原理：每次刷新都会重 阅读全文
posted @ 2018-04-27 11:51 Lena_叶 阅读(7008) 评论(0) 推荐(0)
Vue2.0+elementUI使用echarts插件
摘要：1、npm安装echarts： $ npm install echarts -S 2、html代码： <template> <div id="chartColumn" style="width: 100%; height: 400px;"> </div> </template> 3. js代码： 3 阅读全文
posted @ 2018-04-27 11:07 Lena_叶 阅读(10356) 评论(2) 推荐(0)