vue
大唐锦绣
一名不停成长的全栈开发工程师
展开
-
ELEMENT UI 时间控件DATETIMEPICKER动态限制时间范围为一个月
ELEMENT UI 时间控件DATETIMEPICKER动态限制时间范围为一个月转载 2022-06-29 18:24:30 · 2115 阅读 · 0 评论 -
关于在vue-cli项目中使用swiper
前言:本身是有使用到vant-ui中的swiper组件,但是需要更多功能的时候,推荐使用vue-awesome-swiper。一、安装和引入1.安装使用vue-awesome-swiper3版本(推荐,最新版已经到4)npm install vue-awesome-swiper@3 --save 2.安装使用swiper4版本(推荐,vue-awesome-swiper3版本需使用此版本)npm install swiper@43.在main.js中引入使用impo.原创 2021-03-05 10:20:10 · 690 阅读 · 0 评论 -
解决vue-video-player点击暂停/播放时,会触发多次的问题
前言:一般出现这样的问题是与扩展fastclick有关。fastclick主要是用于优化移动端点击延迟300ms的问题。而fastclick会与video.js冲突。vue-video-player是必须引入video.js作为基础条件的。这就导致了一次点击暂停/播放事件,会多次的触发暂停/播放。导致事件覆盖,所以会有点击无效的感觉。解决方法其实很简单,但是大多数是直接修改node_modules内的fastclick源码,粗暴而且维护困难。一、方法fastclick本身需要在main.js.原创 2021-02-20 11:34:50 · 2855 阅读 · 1 评论 -
理解localstorage和localstorage的跨域存储方案
html5标准中一个亮点就是提供了浏览器本地存储的功能。方式有两种:localStorage和 sessionStorage。 相对于cookie,他们具有存储空间大的特点,一般可以存储5M左右,而cookie一般只有4k。localStorage和 sessionStorage的主要区别是:localStorage的生命周期是永久的,意思就是如果不主动清除,存储的数据将一直被保存。而sessionStorage顾名思义是针对一个session的数据存储,生命周期为当前窗口,一旦窗口关闭,那么存储的数据转载 2020-08-06 17:56:56 · 2956 阅读 · 0 评论 -
vue-video-player在vue中的使用注意事项
前言:vue-video-player是一个相当不错的,较适用于vue的前端组件。GitHub文档一、安装npm install vue-video-player --save二、引入可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)(1)全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-v...转载 2020-05-20 11:29:48 · 1462 阅读 · 0 评论 -
记录vue-cli2打包项目静态文件夹static到七牛云存储上,并使用七牛云融合cdn的过程
前言:vue-cli2打包项目静态文件夹static到七牛云存储上,并使用七牛云融合cdn1.前期准备npm install --save jsonfile jsonfile扩展说明文档 npm install argv argv扩展说明文档 npm install qiniu 七牛扩展 npm install qiniu-tools --save qiniu-tools扩展说明...原创 2019-10-22 18:07:39 · 1062 阅读 · 0 评论 -
完美解决Vue项目在H5微信开发iOS真机上input和select调起软键盘后不回弹
直接上代码,简单粗暴<input class="item-input" type="text" v-model="name" placeholder="请输入你的姓名" @blur="blurIn"/><select v-model="order.award_id" @blur="blurIn"> <option v-for="item in aw...原创 2019-07-07 17:39:28 · 2356 阅读 · 2 评论 -
vue+html2canvas实现对个人名片dom的转换图片并下载图片
前言: 因公司需求。需要实现个人名片+可编辑名片信息,且可以实时下载。实现如下图:笔者决定在vue中引入html2canvas实现将整块dom进行图片化并且实时下载保存(本地)。一、引包npm install --savehtml2canvas二、导入import html2canvas from 'html2canvas'三、代码其实,大家最希望,...原创 2019-04-22 16:51:40 · 1548 阅读 · 0 评论 -
解决Vuex持久化插件-在F5刷新页面后数据不见的问题
页面刷新后,想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后,vuex便可以被应用了。vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。为了克服这个问题,vuex...转载 2019-04-01 11:13:12 · 1165 阅读 · 0 评论 -
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed.
今天使用npm install 时一直发现有个WARN作为一名稍微有代码洁癖和警告排障者来说实在是不能忍WARN信息:npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.从字面意思上...原创 2018-10-12 15:54:12 · 7840 阅读 · 3 评论 -
setTimeout在vue中的正确使用
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏,使用到setTimeout函数。遇到了1个坑:在vue的某个方法(点击后执行)setTimeout(this.end(),4000);//娃娃消失这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢!其实,问题还是出在笔者身上,大家请看下图setTimeout的定义和用法。问题出...原创 2018-10-25 10:23:22 · 132487 阅读 · 13 评论 -
抓娃娃机vue版本和jquery版本
由于公司需求,着手研究H5抓娃娃,从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志。这个分享对我们这些非专职前端的phper来说很关键。虽然简单,但是功能也是都实现了的。不过该游戏是爪子不动,娃娃循环移动但是公司需求是爪子左右移动,娃娃不移动。笔者用vue进行重构这里先把借鉴的代码给大家共享下,后面有时间再上vue二次重构的h5抓娃娃百度网盘...原创 2018-11-05 14:37:52 · 3994 阅读 · 1 评论 -
在vue中完美使用ueditor组件(cdn)
前言:无需main.js或页面全局或局部引入,直接使用cdn将ueditor作为vue组件请直接创建vue文件,作为组件使用。复制粘贴,即可直接使用(此篇只展示前端代码,后端大家自由选择,图片资源存放建议使用阿里云oss或者七牛云对象存储)component组件代码:<template> <script :id="randomId" name="con...原创 2018-11-06 12:45:52 · 5549 阅读 · 0 评论 -
如何Vue组件中完美引入jQuery
如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></script>即可。但是如果要在Vue组件中使用jQuery库的话,使用这样的方式就不行了,需要使用以下方法一、安装jQuery依赖在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖:npm install jquery --sav...转载 2018-11-15 11:23:09 · 20884 阅读 · 2 评论 -
vue-devtools的安装和使用--vue调试利器
工欲善其事, 必先利其器, 好的工具能助力我们快速而又准确的完成我们的工作接下来为大家介绍vue开发利器:vue-devtools安装:1.github下载:git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包cd vue-devtoolsnpm install3.修...原创 2018-11-22 10:23:06 · 4044 阅读 · 3 评论 -
完美解决ueditor和neditor上传图片(视频)上传成功显示异常
(一)前言:二次开发编辑器neditor(基于百度编辑器ueditor):界面相对于ueditor会更美观.(二) 问题描述:最近在公司项目中遇到一个比较奇葩的问题。neiditor编辑器上传图片用时,插入图片初始为loading图,载入成功后才显示上传的图片。插入图片后不做任何修改时,编辑器的content内容为:<p><img class="loadin...原创 2018-12-20 10:59:24 · 8959 阅读 · 1 评论 -
vue element-ui的upload组件直传视频到阿里云oss
1.安装ali-ossnpm install ali-oss2.封装oss通用上传js工具类oss.js 工具类(oss的参数写在这里哦!)'use strict'import { dateFormat} from '@/utils/util'var OSS = require('ali-oss')export default { /** * 创建...原创 2019-02-28 16:16:13 · 5751 阅读 · 3 评论