vue
阡路陌人
修行ing
展开
-
Vue实例中生命周期created和mounted的区别
Vue实例中生命周期created和mounted的区别转载 2017-12-05 09:53:25 · 17385 阅读 · 1 评论 -
element el-table 日期动态做表头table_header,并实现左右分页处理
实现的效果图:类似这种就需要日期去做表头,不能一贯使用思维去使用table去处理,很费时费力。由于本项目基于element,所以第一想法就是使用element中的el-table组件,然发现里面的demo只有一些简单的,无法满足;所以想到度娘寻求帮助,故在此做个记录。不多说,直接上代码html部分:// 这里dateArr只处理日期和星期table_header部分,前面两个el-table-column自行补充啦// :render-header是处理表头日期的分页处理<el-tab原创 2020-05-20 09:51:54 · 3321 阅读 · 6 评论 -
element-ui 使用el-backtop无效问题
基本格式:<template> <el-backtop target=".父级盒子class" :visibility-height="100" :bottom="60"></el-backtop></template>target可以省略,即:<el-backtop></el-backtop>有时候会发现这...原创 2020-03-31 19:28:21 · 6154 阅读 · 0 评论 -
js 获取两日期间所有日期
我们在做图表类使用dates日期插件的时候,有时候从后台获取的日期往往是有数据的天数,那么其他没有数据的日期就需要前端进行补全咯!!! // 获取所有日期 getBetweenDateList(start,end){ let result = []; let beginDay = start.split("-"); let endDay = end....原创 2020-01-10 16:10:21 · 719 阅读 · 0 评论 -
vue与Android之间的传值
背景:Android设备中使用h5项目,这里只是说vue的使用方法vue调用Android方法:window.android.方法名 // 方法名后加()vue接收Android传过来的值methods : { // 接收Android传过来的值方法 getAndroidValue(value) { console.log(value) }},mounte...原创 2019-11-20 16:36:07 · 2657 阅读 · 0 评论 -
vue 封装提示语
toast.vue:<template> <div> <div class="toastTip"> <img src="../../assets/ic-tig.png" alt=""> <p>{{toastTxt }}</p> </div> </div>...原创 2019-11-20 09:46:58 · 1228 阅读 · 1 评论 -
vue 嵌套iframe并进行传值
子级iframe向vue父级传值:<template> <div> <iframe src="链接" ref="iframe"></iframe> </div></template>父级vue中mounted:mounted(){ window.addEventListener(...原创 2019-11-15 17:31:52 · 7668 阅读 · 5 评论 -
移动端开发底部元素margin-bottom失效的处理方式
在移动端开发的过程中,经常会有在底部进行一个元素固定定位在,这样我们主体数据有需要设置margin-bottom 去防止主体数据被底部遮挡的情况。这在android手机中这样设置是完全没有问题的,不过在ios手机上就会出现底部定位遮挡了主体内容。当时还尝试了使用padding-bottom去处理,然效果还是不太理想。查询方法后,一下两种方式是可行的:主体最后设置一个空白的div(设置好高...原创 2019-05-09 17:44:50 · 2783 阅读 · 1 评论 -
vue + webpack + emelent-ui打包后element的小图标不显示
由于针对element-ui的组件样式,我引入了element-theme-chalk 样式,下载完依赖后注入的时候,循序为:import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import 'element-theme-chalk';导致了在项目打包后element-ui的图标显...原创 2019-05-07 17:59:50 · 8926 阅读 · 3 评论 -
vue 使用sort()方法报错:“You may have an infinite update loop in a component”
特意翻译了下You may have an infinite update loop in a component (组件中可能有无限的更新循环);最近在做一个字母和数字组合排序的vue项目的时候,第一反应就是使用sort()函数,结果在直接对对应数组进行sort()的时候,居然报错了,奇怪。。。后面百度了下,看到大家都出现这种情况,就否定了自己代码写错的疑虑。仔细一想,我是从后台获取到数据之...原创 2019-05-30 16:43:48 · 5152 阅读 · 0 评论 -
vue-pdf 通过文件流预览pdf文件
用过vue-pdf的同志应该都知道,如果拿到的是一个pdf的在线链接在使用这个的时候会出现一个跨域问题。而后端不想去处理跨域情况,所以后面就考虑到使用文件流的形式去处理。首先,下载vue-pdfnpm install vue-pdf -D其次,模板里面引入vue-pdfimport pdf from 'vue-pdf'html:<pdf :src="src"></...原创 2019-07-15 17:39:59 · 14860 阅读 · 28 评论 -
下载文件流文件
downloadPdf(result) {let blob = new Blob([result], {type: ‘application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8’}); //application/vnd.openxmlformats-officedocument.wo...原创 2019-07-15 17:47:58 · 796 阅读 · 0 评论 -
vue axios 拦截器
Vue 项目在发布新版本的时候,往往会出现新旧版本不一致导致报错,这样就会给用户一个误导。所以在发布版本的时候出现报错的错误码时就需要给用户一个提示为此就需要在axios请求的时候来个拦截器interceptors去处理不同的response.status了import Axios from 'axios'// http response 响应拦截器Axios.interceptors....原创 2019-08-29 17:00:34 · 531 阅读 · 0 评论 -
外部js调用vue实例方法
vue函数 mounted () { window.testFun = this.testFun; // 方法赋值给window }, methods: { // vue内部方法 testFun () { }, }外部js调用<script> function test() { testFun(); // 直接通过w...原创 2019-08-30 14:46:14 · 13686 阅读 · 4 评论 -
vue 对数据进行排序
单纯的数组数字进行排序,见vue使用sort()方法排序根据数组中对象为数字情况进行排序,见下面代码sortBykey(ary, key) { return ary.sort(function (a, b) { let x = a[key] let y = b[key] return ((x < y) ? -1 : (x > y) ? 1 : ...原创 2019-09-10 15:48:40 · 35261 阅读 · 4 评论 -
移动端点击延迟处理--fastClick
vue安装fastClick就不用多说了吧( npm install fastclick --save)下面主要讲的是使用fastClick的时候,在做项目的时候不要全局作用在body上面,如import fastClick form 'fastClick'fastClick.attach(document.body);这样导致的后果就是项目中所有的input和textarea点击聚焦...原创 2019-09-19 15:05:14 · 259 阅读 · 0 评论 -
vue 时间戳转日期
封装: datetimeparse (timestamp, format, prefix) { if (typeof timestamp =='string'){ timestamp=Number(timestamp) }; //转换时区 let currentZoneTime = ne...原创 2019-05-09 17:28:34 · 1137 阅读 · 0 评论 -
vue + echarts 饼图
html:<!-- 饼图--><div id="myChart2"/>js:// 饼图 getPie () { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('myChart2')); // 绘制图...原创 2019-05-06 19:16:21 · 6808 阅读 · 0 评论 -
解决vue项目首页加载过慢的情况
什么导致了首页初步加载过慢请看下面一张图就清楚了即app.js文件过大导致的。。。如何来处理vue-route 懒加载component: resolve => require([''],resolve)在webpack打包的过程中,将多余文件去掉,如map文件即在config/index.js中将productionSourceMap的值修改为false,就可以在编译...原创 2018-11-16 14:45:34 · 18945 阅读 · 3 评论 -
vue引入腾讯IM
由于腾讯IM中相关js还不能在vue中使用依赖,故我们想在vue中引入webim.js的时候只能外部引入的方式。方法一:在index.html全局引入<script src="./static/js/webim.js"></script>方法二:修改webim.js ,使之可以用import引入的方式。如下,先在webim.js中最后加上module.expor...原创 2018-12-27 14:42:42 · 6295 阅读 · 6 评论 -
vue 腾讯IM登录 监听新消息
结合上一篇的引入方式,我是选择了第二种,本文介绍的是vue登录sdkimport webim from '@/static/js/webim' var sdkAppID = 1400170345; var accountType = 36862; var accountMode = 0; // 0为独立模式 1为托管模式 //当前用户身份 var loginInfo ...原创 2018-12-27 15:11:30 · 5923 阅读 · 3 评论 -
vue 跨域代理配置
在vue项目中进行后台数据请求的时候,大部分都是选择跨域请求的方式,而往往会出现本地的localhost和访问的域名不一致而导致一些跨域问题的出现,这时候我们就需要对localhost映射成能访问的域名,正由于这样,就出现了代理的概念了。.设置代理在config目录中的index.js中dev中设置proxyTable,如图:请求时...原创 2018-12-25 15:22:01 · 731 阅读 · 0 评论 -
vue 项目中出现 Uncaught ReferenceError: exports is not defined
在vue项目中出现Uncaught ReferenceError: exports is not defined 错误,如图:解决方式:{ “modules”: false }阻止了babel进行模块转换;将modules改为默认设置,或者删除该配置。如图:...原创 2018-12-25 15:43:19 · 24520 阅读 · 4 评论 -
vue js实现获取两个日期之间所有日期
// 计算续住的总日期列表 getAll(begin, end) { let arr1= begin.split("/"); let arr2= end.split("/"); let arr1_= new Date(); let arrTime = []; arr1_.setUTCFullYear...原创 2019-01-04 18:26:10 · 5561 阅读 · 0 评论 -
webSocket 的使用
对于页面中的数据操作时,有时候不知道该数据是否被别人进行了相应操作或者自己操作新的内容时页面没有被更新,这时候我们总不能寄托与客户去刷新页面操作,所以我们就要考虑页面的实时更新功能。这时候我们会想到socket和webSocket,这里主要讲的是vue 中使用webSocket哦~代码奉上: // 初始化weosocket initWebSocket(){ //w...原创 2019-01-16 15:09:14 · 659 阅读 · 1 评论 -
vue 关于input和textarea自动聚焦问题
如果是单纯的聚焦行为(即input或者textarea的value值为空的状态下),用以下代码即可解决方法一: <textarea name="" id="" :placeholder="placeholder" v-model="newMessage" ref="focusTextarea"></textarea> mounted()原创 2019-02-22 11:10:05 · 11508 阅读 · 0 评论 -
vue js中添加图片
新年来到现在才将心思真正的摆在了工作上,故在此记录一个小要点引以作为新年博客坚持的起始吧~~~~vue在js中去添加图片的方式如下:方法一:在data里面将图片路径保存好imgList: [ { openItem: '../static/icon/ic_police.png' }, { ...原创 2019-02-20 10:29:48 · 17191 阅读 · 2 评论 -
webpack vue build配置中修改assetsPublicPath为"./"
之前由于没有特别要求,故在项目之初没有将assetsPublicPath进行"./“的配置,在项目后续的nginx反向代理,所以刚开始只单纯的修改了assetsPublicPath为”./",结果扔到线上页面无法显示,不能解析到首页。。。查询后得知,除了修改assetsPublicPath这外,还需要修改其他地方config/index.js文件中:router/index.js文件中:...原创 2019-02-20 10:49:57 · 43158 阅读 · 12 评论 -
vux scroller 插件使用注意事项
1. scroller标签内部必须紧套一层div标签2. 注意sceoller的enabled属性,表示可以下拉刷新特别是第一条,如果不注意,就会出现页面向下滑动后回弹到顶部去了...原创 2019-02-26 18:26:34 · 2187 阅读 · 0 评论 -
router-view 组件间传值
情况一:router-view 子组件发生变化导致父组件发生改变父组件中:<router-view @getMessage="showMsg"></router-view>showMsg (val) { // methods方法 val即为子组件传过来的值 console.log(val)}子组件中:this.$emit('getMessage', ...原创 2019-04-11 10:24:49 · 31449 阅读 · 8 评论 -
vue项目在ie浏览器中不兼容问题的处理
安装babel-polyfill 插件npm install --save-dev babel-polyfill 或者 npm install babel-polyfill --save-dev 或者 npm install babel-polyfill -D在src目录中找到main.js,将该插件引入到项目中import 'babel-polyfill'重启浏览器...原创 2019-04-16 18:47:42 · 2997 阅读 · 1 评论 -
vue 调用虚拟键盘
有时候在大型触屏设备(如双屏设备)中,往往就没有键盘去操作,而且在触屏input或者textarea的输入时候就无法去输入值,所以就需要去建立一个虚拟键盘去操作vue-touch-keyboard 详细介绍及操作链接*记录下...原创 2019-04-26 15:26:47 · 8824 阅读 · 3 评论 -
vue webpack打包 net::ERR_INCOMPLETE_CHUNKED_ENCODING 或者 weixin://preinjectjsbridge/fail
vue + webpack 项目在本地上是运行正常,结果发布到线上的时候出现打包的js报net::ERR_INCOMPLETE_CHUNKED_ENCODING 或者在移动端出现weixin://preinjectjsbridge/fail ,页面空白现象。查询后得知:后端没有及时删除日志,导致日志占满了服务器磁盘,将日志删掉就行了。...原创 2019-05-06 15:48:03 · 1252 阅读 · 0 评论 -
vue + echarts 多条折线图
html:<!-- 折线图--><div id="myChart1"/>js: // 折线图 getLine () { // 基于准备好的dom,初始化echarts实例 let myChart1 = echarts.init(document.getElementById('myChart1')); /...原创 2019-05-06 18:23:25 · 8017 阅读 · 1 评论 -
vue route 按模块进行配置
前言:对于vue单页面开发的模式中,往往一个项目会有很多的页面模块,这时候如果只写一个router/index.js路由文件,就会使index.js单文件多大,对这种情况,我们就可以将index.js主路由按照模块进行分别去配置分模块懒加载(注释部分为非懒加载方式)主路由的设置...原创 2018-11-16 13:48:28 · 1913 阅读 · 0 评论