梦幻般的菜鸟的博客

原创 vue js-xlsx导入导出excel文件Demo

简单的Demo，用的xlsx插件，实际使用中别忘了做各种异常的处理。粘贴即用。npm install xlsx<template> <div> <input type="file" accept=".xls,.xlsx" @change="readExcel" value="导入excel"> <button @click...

原创 vue 打包后 components 组件 样式丢失问题

没想到用了vue这就久了，能遇到这种神奇的问题，记录一下。。。项目是多入口的打包方式，所以有多个router来写路由在其中一个入口分支的所有相关页面都没有 引入的组件的样式。这个样式是写在 components 里面的，所以不存在什么样式引入优先级之类的问题。怀疑打包webpack代码写的有问题。各种对比发现一点毛病的都么有。最后开始逐一排除，三个入口相关的文件都是大同小异的，所以...

原创 微信小程序获取音频时长与实时获取播放进度

首先在没有播放音频之前，居然拿不到总时长但是在播放之后也需要设置setTimeout来获取所以在监听音频播放进度更新事件中获取。顺便获取当前播放进度按照官方的写法audioPlayed: function () { myAudio.play() setTimeout(() =&gt; { myAudio.onTimeUpdate(() =&g...

原创 微信小程序swiper组件滑动卡死现象解决

项目中用swiper作为滑动展示展品页面，swiper-item高达49个在使用过程中出现了滑动卡死的现象，解决方案如下在swiper里面监听bindanimationfinish事件bindanimationfinish在swiper卡死的时候也会触发（神奇）&lt;swiper bindanimationfinish="changeGoodsSwip" current="{{...

原创 vue watch监听不管用

遇到一个逗比问题项目里面watch监听一个父元素传来的属性值data(data是个数组)，但是没有监听到props里面也并没有写错，代码并没有报错props: { data: { type: Array, default: () =&gt; { return [] } }}后来发现父元素在使用这个子组件的时候给容器加了&lt;d...

原创 flex:1,下的子元素overflow hidden失效的问题

在一个元素设置了flex：1后，子元素想做字符超出显示省略号的行为overflow hiddenwhite-space nowraptext-overflow ellipsis发现 overflow hidden失效了，元素随着文字的增多而变长 在网上查找发现其父元素设置min-width: 0 或者 min-height: 0 即可 ...

原创 尝试写的input验证插件

HTML:&lt;div class="inputBox"&gt; &lt;span&gt;地址： &lt;/span&gt; &lt;input class="test" type="text" max="10" min="5" placeholder="请输入地址" reg="chinese&quo

原创 火狐浏览器弹性布局没有开启的问题

开启弹性布局的兼容写法    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    display: -moz-box;but在火狐浏览器里面   display: -moz-box覆盖了display: flex方法, 然后display: -moz-box在火狐...

原创 [自用]apiCloud结合canvas手机端手势密码

首先解锁页面不能被安卓的返回按键干掉,需要监听返回按钮,apiCloud提供的apiready = function() { api.addEventListener({ name: 'keyback' }, function(ret, err) { });}方法可以实现,在function里不写任何操作即可实现,注:侧方法只能在

原创 table添加圆角效果

table td{ border-top: 2px solid #e9e9e9; border-left: 2px solid #e9e9e9;}table tr td:last-child, table tr th:last-child{ border-right: 2px solid #e9e9e9;}table tr:last-child td{ border-bot

原创 h5在ios下overflow:auto,滑动没有惯性解决方案

在ios 下,只有body的overflow:auto有滑动惯性效果,其他地方需要添加 -webkit-overflow-scrolling : touch;

转载 js手机端判断滑动还是点击

//判断是滑动还是点击 $('body').on('touchstart touchmove touchend', '#'+_this.model(), function(event) { switch(event.type) { case 'touchstart': window[_t

原创 前端ajax同时传图片(兼图片展示)与文本信息的方法

第一段的代码是点击上传图片的函数,可以验证图片信息和展示上传的图片,是在网上找的两端代码拼接的,改改就能用了.function PreviewImage(imgFile){ var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); fil...

原创 vue2.0 动态路由传参方法

因为是用element-ui渲染出来的tree菜单，每个节点完成路由只能使用编程式导航（在函数里触发路由）并传参需要组件需要获取的数据使用this.$router.push()this.$router.push({name: '你路由的名字', query: {id: '可以是变量'}})获取的方法为this.$route.query.id文档中提到提醒一...

转载 npm install 时报 phantomjs-prebuilt@2.1.14 安装失败解决方案

错误如下npm ERR! Windows_NT 10.0.14393npm ERR! argv "E:\\pro\\nodejs\\node.exe" "E:\\pro\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"npm ERR! node v6.10.3npm ERR! npm v3.10.10npm ERR! cod

原创 前端网页禁止选中文字的方法

侧边导航栏内容太多太多太多，使用滚动条印象美观，决定使用鼠标拖拽效果来滑动，但是会出现选中文字的情况，禁止选中的方法很简单，可以直接在标签里添加onselectstart="return false;"举个例子 adasdasdasdasdasdasdad

转载 vue引入jquery的方法

在 build/webpack.base.conf.js 的头部加入 var webpack = require("webpack")module.exports对象的最后添加plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ j

原创 拼接html代码相对美观的方法

var regexpComment = /\/\*([\s\S]*?)\*\//; var multiline = function(func){ return regexpComment.exec(func.toString())[1]; }var s = multiline(function(){/* 123456 */});con

原创 vue2.0关于set添加属性后视图不能更新的问题

今天发现原来写的页面的bug总的来说就有一个组件，有加减号和次数显示，第一次点击加号会用set给food对象添加属性count，然后再次点击加号就会count++，这没毛病。if (!this.food.count) { Vue.set(this.food, 'count', 1); } else { this.food.count+

原创 使用vue1.0写法不报错但是模块不加载

vue1.0老写法new Vue({ el: '#app', components: { App }});在2.0上没有报错，但是模块不加载，找了一天的问题，最后才想起来应该new Vue({ el: '#app', template: '', components: { App }});自己SB了一天，喵了个咪的。

原创 在前端获取上传的excel文件内容

function ReadExcel() { var tempStr = ""; //得到文件路径的值 var filePath = document.getElementById("upfile").value; //创建操作EXCEL应用程序的实例 var oXL = new ActiveXObject("Excel.application"); //打开指

原创 form表单里的button按钮

原创 zTree使用实例

var this_; var this_id; var this_name; var this_data; var this_pId; var p_tId; //zTree配置开始 $(".zTreeDom_close").click(function(){//关闭zTree按钮 $(".zTreeDom").hid

原创 jquery.validate验证单个表单元素的方法

$(".form-horizontal").validate().element($("#"+_thisId));$(".form-horizontal").validate().form($("#"+_thisId));

转载 Bootstrap页面中多个modal报”too much recursion”错误的解决方案

在用Bootstrap时候发现，如果我在一个弹出的modal中再弹出一个modal的时候，js就会报错“too much recursion”，从而会影响modal中弹出的那个modal里面的一些jquery插件的使用，解决方案就是把$.fn.modal.Constructor.prototype.enforceFocus 方法去掉就可以了。在Bootstap.js 包含以后加上: