vue
关注
分享
扫一扫
vue开发中积累
一键写代码
这个作者很懒，什么都没留下…
展开
-
vue + python实现大文件分片上传功能
vue 、 element-ui和python（django）实现大文件分片上传功能原创 2022-08-29 17:46:36 · 1277 阅读 · 0 评论 -
通过post请求下载接口，接口返回流数据，前端处理下载或展示出错信息
处理二进制流数据下载，前端判断json还是流数据原创 2022-08-15 17:26:32 · 4105 阅读 · 0 评论 -
使用element-ui的el-upload实现自定义上传及滚动条功能。
使用element的el-upload 实现自定义上传功能。原创 2022-07-14 09:34:39 · 1497 阅读 · 2 评论 -
vue-cli项目中，通过cdn方式引入vchart来解决打包过大问题
1、在index.html中，引入v-charts的cdn地址。因为v-charts 依赖echarts，所有，两者都需要引入。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content原创 2022-04-11 17:29:53 · 1427 阅读 · 1 评论 -
如何自己实现进度条统计图表类的功能
一般我们遇到这种统计图表的需求，都是去找插件完成。譬如，element-ui中的组件，或是echart中的图标工具。那么，遇到简单的图表需求，我们能否自己实现呢？ 答案是。当然可以。贴代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2022-04-02 15:33:13 · 524 阅读 · 0 评论 -
手动通过css来美化界面中的滚动条样式
默认浏览器的滚动条样式很丑，我们在vue项目中，如果使用了element-ui的话，是可以借用他的滚动条的。方法一：手动设置滚动条样式，只能解决chrome浏览器等上面的样式。还可以。不要要求太多。<div class="wrap"><p>我是很长的内容</p></div>设置样式： .wrap::-webkit-scrollbar { /* 滚动条宽度和高度 */ width: 8px; height: 8px;原创 2022-03-25 14:29:16 · 1740 阅读 · 0 评论 -
记录vue开发h5页面中遇到的形形色色的奇异问题及解决方法
奇异问题1：为什么修改vant-ui的默认样式，设置border-radius在浏览器生效了，但是ios真机没有效果。出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效解决方法：在使用动画效果带transform的元素的上一级div元素的css加上下面语句：transform:rotate(0deg);-webkit-transform:rotate(0deg);...原创 2022-03-22 16:18:34 · 3584 阅读 · 0 评论 -
关于wepy2中开启小程序分享朋友圈的功能。
如何在wepy2开发的小程序中开启朋友圈分享小程序功能1、说明分享朋友圈功能暂时只支持安卓，并且输入beta版本。一句话，并不是很成熟。但是， 有时候，产品就是需要。2、官网文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html看文档： 当前页面，需要先开启发送朋友功能后，才能进一步分享到盆友圈功能。对应的api文档如下：3、实操在我们的页面中，method原创 2022-03-21 13:36:27 · 775 阅读 · 1 评论 -
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述：在vue项目中，有时候，我们需要自定义百度地图的一些功能。譬如，现在的需求，就是需要自定义搜索内容和结果展示。类似如下页面的功能：首先在vue项目中，我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk。npm install --save vue-baidu-map vue-baidu-map的具体使用文档参考官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation解决方案原创 2022-02-23 19:08:20 · 8040 阅读 · 8 评论 -
vue项目中上传文件到阿里云oss方法
vue项目中，如何实现阿里云oss上传，结合element-ui 的上传组件使用原创 2022-02-16 17:39:42 · 19774 阅读 · 6 评论 -
vue项目中使用百度地图功能
1、百度地图api官方文档：https://lbsyun.baidu.com/index.php?title=jspopularGL在百度地区去申请一个百度地图key。这个key属于私密的，部分高级功能需要找百度地图花钱购买。2、在vue项目中，我们使用vue-baidu-map这个封装后的npm包使用方式：npm install vue-baidu-map --save全局注册import Vue from 'vue'import BaiduMap from 'vue-baidu-map'原创 2022-02-14 17:09:40 · 3929 阅读 · 0 评论 -
react-native中使用webview来渲染富文本，修改样式，自适应高度
我们知道，在vue中，我们可以很轻松的去渲染富文本内容。包括在小程序中也有对应的组件可以直接使用。那么，在react-native中如何渲染富文本呢？答案是： Webview废话不多说，直接上代码。export default class ArticleDetailPage extends Component { constructor(props) { super(props); this.state = { title: '', content: ''原创 2022-01-28 16:14:50 · 3828 阅读 · 0 评论 -
vue项目配合nginx部署到子目录、二级域名的解决办法
默认的vue项目是部署到网站根目录的。但是，有些情况下，一个域名内需要放置多个内容。所以，只能分子域名或是子目录来部署。譬如，当前网站的域名是：www.abc.com使用nginx做代理的时候，分配给我们的部署vue项目的域名地址是：www.abc.com/vuedemo先看nginx的配置：location / { root html; index index.html index.htm; gzip_static o原创 2022-01-27 10:04:04 · 13938 阅读 · 0 评论 -
2022年1月1号前端格式化日期引发的严重问题
惨痛的bug描述元旦了，用户使用网站设置日期2022-1-1。保存后，再查看，居然变成了2020-1-1号。 然后再保存一下，居然变成了2019-1-1。以为见鬼了。查找原因，居然是前端日期格式化导致的问题。很遗憾，前任留下的bug，只能我们来背。问题复现// 时间戳： 1546272000000 真实时间是 2019-01-01 00:00:00var d = new Date(1546272000000);console.log(d.getUTCFullYear() + '/ '+ d.g原创 2022-01-06 19:11:10 · 538 阅读 · 0 评论 -
开发中，常用git操作命令
拉取远程分支：git clone -b 分支名 http://xxx代码远程地址.git例如： git clone -b demo http:baidu.com.git将文件添加到本地仓库git add demo.js将文件提交到本地仓库并添加注释git commit demo.js -m '添加demo.js的注释'推送到远程git push需要输入用户名和密码get fetch 将远程分支的最新内容拉到本地git branch 列出所有本地分支 git branch -r 列出所原创 2021-12-24 14:20:11 · 199 阅读 · 0 评论 -
npm和yarn切换设置官方源与淘宝源。
网上搜了一些文章，还有两种混着写的。实在是误人子弟。自己记录下来，方便查找。npm设置切换源。默认第一次安装后是官方镜像。有时候下载慢，我们切淘宝源。有时候有需要切回去。特此记录。1、查看当前源npm config get registry2、设置淘宝源淘宝镜像npm config set registry https://registry.npm.taobao.org3、设置官方镜像npm config set registry http://registry.npmjs.orgyar原创 2021-12-17 10:40:57 · 6064 阅读 · 0 评论 -
element-ui时间日期选择组件限制日期选择范围
1、需求描述：日期选择的时候，限制选择范围，譬如只能选今天之后的日期。最后效果如下：2、实现方式：借助于官方api picker-options实现。三、示例1、设置今天及以后可以选择组件代码<el-date-picker v-model="date1" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker原创 2021-11-24 09:58:34 · 1473 阅读 · 0 评论 -
使用element-ui开发cron表达式公共组件
>需求描述后台需要前端开发一个用户习惯的，简单的选择，前端处理成后台识别的cron表达式，去执行定时任务。关于cron表达式，可以查看https://qqe2.com/cron 这类在线网址查看。我们最后实现的成果如下：用户选择 天、周、月 以及 时间 前端转化出cron表达式。> 组件代码：<template> <div style="display:inline-block;"> <el-popover v-model="visibl原创 2021-11-11 15:24:32 · 2998 阅读 · 0 评论 -
Vue Element-ui表单校验规则，你掌握了哪些？
参考文章：https://www.cnblogs.com/alabo1999/p/14990310.html原创 2021-10-25 16:20:29 · 136 阅读 · 0 评论 -
微前端实现方案
1、京东出品的micro-app (推荐+++)https://cangdu.org/micro-app/docs.html#/2、single-spa（推荐++）和qiankun（推荐+）https://www.jianshu.com/p/54904acb5896 主要介绍了single-spa。是在qiankun发展起来的。需要改单页的打包方式。...原创 2021-10-25 16:07:56 · 308 阅读 · 0 评论 -
纯js实现通过事件总线EventBus来完成插件封装
前言：当我们在插件开发的时候，肯定需要对外暴露函数，使用者调用插件内的方法，如果插件内的某些操作是异步的，就需要等异步完成后，通知使用者处理结果，使用者然后再去执行其他的操作。我们在vue中，可以通过实例化vue来实现事件总线。 或者通过Vuex来完成类似的操作。如果是纯插件的时候，我们最好通过js自己完成封装。示例如下： window.onload = function () { var oproto = Object.prototype var aproto = Ar原创 2021-10-22 18:11:16 · 406 阅读 · 1 评论 -
关于页面卸载发送请求统计页面浏览时长类似需求的解决办法
需求描述用户离开页面时，发送一个请求，统计用户的浏览时长。衍生譬如上报错误等，类似需要在页面卸载的时候发送请求给后台的。解决办法一样。解决方案页面进入的时候，记录开始时间，页面卸载的时候，记录结束时间，并且请求接口上报数据。最早期方案 if ("onpageshow" in window) { $(window).on("pageshow", loadHandler); $(window).on("pagehide", unloadHandler);原创 2021-09-01 17:55:39 · 430 阅读 · 0 评论 -
使用webpack打包，vue-cli4配置config.js中assetsDir的妙用
我们看vue-cli4的文档，有两个publicPath 和 assetsDir两个配置路径的选项。这两个结合起来，可以解决我们一些问题。需求一、打包后部署在服务器，不是根目录，而是服务器下面的某个地址目录。譬如，我们的域名是www.abc.com， 我们需要把我们的前端页面部署在www.abc.com/demo/目录下。解决办法：在config.js中设置：module.export= { publicPath: '/demo/'}这个时候，我们就可以把打包后的dist目录的文件全.原创 2021-07-23 16:42:23 · 7168 阅读 · 0 评论 -
vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题
几种设置publicPath后，再对比打包后的index.html文件测试背景：每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录部署的时候，前端打包的文件部署在服务器的一个静态资源目录下我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。打包后的文件目录：├─dist ├─css ├─img └─js index.html一、不设置publicPath时，既设置为''，部署后请求原创 2021-07-23 13:46:51 · 27657 阅读 · 0 评论 -
微信小程序自定义修改轮播图swiper指示器的样式
默认的小程序轮播图组件样式是圆点点。有时候UI需要改指示器的样式使用： <swiper :autoplay="false" :indicator-dots="true"> <swiper-item class="menu" v-for="(cMenu,index) in menuCList"> <div class="menu-item" v-for="item in cMenu" @tap="linkToLi原创 2021-07-06 15:30:43 · 1331 阅读 · 1 评论 -
解决h5页面在ios端输入框失去焦点后页面不回弹或者底部留白问题（小程序内webview嵌入的h5也适用）
方法就是在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）1、原生页面const windowHeight = window.innerHeightinput.addEventListener('blur', function () { let windowFocusHeight = wi原创 2021-07-02 10:31:33 · 1503 阅读 · 1 评论 -
vue3去掉了$on、$off后，使用mitt第三方库替代eventBus的原理。
on，on，on，off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。官方文档推荐mitt这个小库来替代。看了一下mitt的源码，有种豁然开朗的赶脚。贴在这里。源码是用ts写的，这里贴了一个翻译后的，对着看，比较好。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width.原创 2021-05-24 18:25:17 · 2660 阅读 · 0 评论 -
使用v-chart如何实现自定义效果
前言： 我们都知道v-chart 是用e-chart来包装的。使用v-chart，有方便的一面，简化了处理数据的过程。但是，有时候，我们还是需要e-chart那要的配置来实现图标的样式风格自定义的。该如何实现？v-chart 的官方文档最近这段时间有问题，放一个能用的链接：http://woolen.gitee.io/v-charts/#/line答案是： 用v-chart 的 extend 属性来弄。内部就看e-cahrt的文档。示例：<template> <.原创 2021-05-24 16:42:31 · 1445 阅读 · 0 评论 -
常见需求：滚动页面到某个位置的时候，对应的导航菜单高亮。点击菜单，可以直接滚动到对应的位置。
常见需求：滚动页面到某个位置的时候，对应的导航菜单高亮。点击菜单，可以直接滚动到对应的位置。如果解决：1、web端参考资料：a:引入navScroll.jshttp://webjyh.com/navscroll/http://demo.webjyh.com/navScroll/2、使用新的版本，可以用在vue项目中https://www.npmjs.com/package/navscroll...原创 2021-04-06 14:47:32 · 1500 阅读 · 0 评论 -
关于vue中v-model指令在开发实际中的应用（用于自定义组件）
我们都知道 v-model 用于表单的双向绑定中。那还有什么好说的呢？的确，用在表单元素的双向绑定中，我们在开发中经常用，在引入第三方的UI组件，譬如element-ui 的input表单组件 我们还是使用v-model以前我也只是用，但是没有多想，直到有一天，我在引入一个第三方的组件，它这个组件，并不是表单控件，居然也是用v-model来双向绑定。我就纳闷了？为什么我自己写的组件中，就没有用这个操作？一想，第三方的UI表单组件 其实也是自定义组件，被v-model 迷惑了 以为就只是原生的表.原创 2021-02-20 11:07:32 · 453 阅读 · 0 评论 -
关于vue中.sync的在开发实践中的具体用法说明
在组件开发中，父子之间，经常会遇到.sync修饰符示例代码：parent.vue<template> <div> <p>parent vue</p> <p>{{ doc.title }}</p> <Child :title.sync="doc.title" /> </div></template><script>import Child f.原创 2021-02-20 10:12:55 · 305 阅读 · 0 评论 -
数据可视化大屏资料收集
在大数据流行的今天，每个公司都需要搞一套可视化大屏来（quan qian）或是（zhuang b）商业需求。这里记录一些好的资源，在开发这方面的需求的时候，有个快速的解决办法。第一步，哪里能不能直接搬？好的开源项目资料1、https://gitee.com/MTrun/big-screen-vue-datav码云上星星很多的开源项目。...原创 2021-02-07 10:33:57 · 233 阅读 · 2 评论 -
vue解决ESLint + prettier 双引号报错问题, 格式化函数结尾添加分号的问题, 报错函数括号前面应该有空格问题
解决双引号问题 解决格式化对象最后一项的末尾添加逗号问题1、在项目根目录创建文件 .prettierrc{ "printWidth": 800, "singleQuote": true, // 使用单引号 "semi": false, // 不使用分号 "trailingComma": "none" // 对象最后一项默认格式化会加逗号, 这里取消}解决函数括号和函数名之间必须要有空格的问题2、在 .eslintrc.js 文件中（该文件是在vue-cli初始.原创 2020-10-26 10:05:43 · 6586 阅读 · 4 评论 -
正确使用element-ui 的上传组件upload完成自定义上传到阿里云oss云服务器或自己后台服务器
需求：使用element的upload组件，上传文件到阿里云服务器。上传前，先请求自己后台的接口，返回阿里云上传相关的凭证key等信息后才能正确上传。那如何解决呢？答案是element上传组件中的 http-request 自定义上传。 <el-upload ref="upload" class="upload-demo" action :http-request="handleUpload" :auto-upload="false" multiple :on-e.原创 2020-09-12 11:51:00 · 4229 阅读 · 0 评论 -
element-ui input输入框限制输入数字类型 或小数点的数字
1、正确的解决方案<el-input style="width:200px;" v-model="relationForm.fee" oninput="value=value.replace(/[^0-9.]/g,'')" :placeholder="代理费" ></el-input>可以输入数字和小数点oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字oninput =“value=va原创 2020-09-10 13:37:12 · 16266 阅读 · 4 评论 -
使用vue开发项目的时候，异步请求数据，连续触发多次请求导致的渲染的数据列表数据错误的问题解决办法。
问题描述：在vue类型的项目开发中，我们一般都是发起异步请求从服务器获取数据后，根据数组数据使用v-for来动态渲染数据列表。但是，如果一个请求在pending中，再次发送一个请求，最后导致渲染的list，数据重复，或是错误的问题。原因，就是多次请求了异步接口，一个接口没有返回，另外一个接口就发出去了。因为，ajax是一个异步操作。导致，在回调的时候，两次请求成功后的回调都会执行。就导致数据，错误了。什么情况下发生这种现象呢？ 譬如下拉滚动加载更多 或是 tab切换。类似，这种，点击tab标原创 2020-08-18 15:58:05 · 9815 阅读 · 2 评论 -
vue(mpvue)前端登录密码使用AES加密引出的一系列问题
一般来说，都是md5加密密码。但是我司后台，用的是aes家秘密，然后还有密匙之类的。折腾了老半天，总算解决了。记录一下。AES加密，js有一个牛逼的算法库，crypto-js。封装成工具函数，在使用的地方引用。// 密码加密// const CryptoJS = require ('crypto-js')import CryptoJS from 'crypto-js'const key = CryptoJS.enc.Utf8.parse('abcdefrt69845632') // 密匙c原创 2020-07-31 15:30:52 · 1204 阅读 · 0 评论 -
使用mpvue框架，以及vant-weapp的程序员UI框架时，遇到的坑及解决办法。
1、mpvue中使用vant-weapp的方式2、mpvue引入vant-weapp后，mpvue自动将px转换为rpx单位的问题参考https://www.jianshu.com/p/5fb497ec2e5d如果不想自己写的单位被mpvue转换，就将px单位写为PX, 大写的就不会转换为rpx单位了。如果想把vant-weapp的px单位转换为rpx， 就需要修改配置文件。在build/webpack.base.conf.js中安装上面的连接修改var relative = require(原创 2020-07-30 16:49:29 · 929 阅读 · 0 评论 -
奇葩需求之：js判断浏览器环境，是webview？安卓App?苹果浏览器？还是微信浏览器打开的。
需求描述：js脚本判断网页是在什么环境中打开的。内置浏览器，还是app内嵌入式的webview打开的，亦或是在微信浏览器内打开的，还是用pc端打开的。查了一圈资料，原理基本上就是通过navigator对象上的信息来做文章，更具体一点是，navigator.userAgent这个对象上的信息。借鉴（chāo xí）zepto.js的浏览器嗅探代码，改写为下面这样的。// 浏览器嗅探export function detect(navigator) { let ua = navigator.us.原创 2020-06-28 11:43:36 · 7995 阅读 · 0 评论 -
vue开发marquee文字跑马灯效果组件
组件调用时候的使用方式：<template> <div> <div class="demo"> <notice-bar :text="text"></notice-bar> </div> </div></template><script>import NoticeBar from "./components/notice-bar"export defau原创 2020-06-24 15:22:10 · 1443 阅读 · 0 评论