前端
kitt15
web开发
展开
-
vue批量导入模块
在基于vue-element-admin的开发时,每添加一个路由文件就要到另外一个文件里import相应的模块,这样开发起来不友好,如果有一种方法批量导入这些新增的文件,开发起来就方便多了。这时我们可以使用require-context()方法,详见。我们约定一个规则就是路由文件由export default抛出路由配置,代码也是判断是否是由export default来筛选导入的。src/u...原创 2020-02-23 14:16:30 · 2228 阅读 · 0 评论 -
解决bootstrap-table表头与数据不对齐的问题
使用bootstrap-table的时候,有时发现表头与数据不对齐的问题,特别是列很多或者浏览器有缩放时比较明显。查看源码bootstrap-table.js你会发现,表头是根据tbody的第一行的每一个元素的innerWidth()来定宽度的,然而检查元素发现,innerWidth()总取整数,而忽略的实际的小数点,导致列越多,表头偏移得越明显,修改源码(将innerWidth()用getBo...原创 2019-12-10 09:30:08 · 1352 阅读 · 1 评论 -
解决blur后不能立刻focus的问题
最近碰到一种情况就是在比较低版本的chrome,input框blur后不能立即focus到另一个input框的问题,找了很久,算是找到原因,就是我blur后需要重新绑定input的事件的时候绑定了eval(‘funName()’)或者window方法名这个方法,导致另一个blur框失焦(原理并不懂,反正注释掉之后就可以,希望路过的大佬可以解答一下)。解决方法1、使用setTimeout将绑定的...原创 2019-11-12 10:31:44 · 576 阅读 · 0 评论 -
解决bootstrap-table固定列checkbox选中没效果问题
原理:click输入框之后,1、先blur失去焦点,2、然后设置input readonly属性3、然后focusfocus之后去掉readonly代码: var parentDiv = $("#parentDiv"); parentDiv.on("focus",".codeScan", function(e){ var that = $(th...原创 2019-11-09 14:29:14 · 4460 阅读 · 0 评论 -
处理移动端iframe中input框的一些总结
最近项目中的移动端使用iframe作为字容器,在处理input遇到一下一些问题。1、点击input时,input不会自动显示在键盘上方。解决方法:当focus将输入框呈现在可视位置。$("iframe").contents().on('focus',"input[type=\"text\"],textarea", function(){ var target = this; ...原创 2019-11-03 17:16:00 · 658 阅读 · 0 评论 -
vue实例生命周期
生命周期/生命周期钩子函数 组件挂载以及组件更新组件销毁时候出发的一些列方法,这些方法叫做生命周期函数<template> <div id="life"> 生命周期函数的演示 ---{{msg}}原创 2018-09-20 11:00:59 · 265 阅读 · 0 评论 -
Vue请求数据
使用vue-resource请求数据 1、安装vue-resource npm install –save vue-install2、在入口文件main.js引用并使用import Vue from 'vue'import App from './App.vue'import VueResource from 'vue-resource'//引入VueResource Vue.u...原创 2018-09-20 14:17:17 · 408 阅读 · 0 评论 -
vue路由基础使用方法
vue路由配置 1、安装npm install --save-dev vue-router2、在main.js引入并使用(Vue.use(VueRouter)import VueRouter from 'vue-router' //引入VueRouter Vue.use(VueRouter) //使用VueRouter 3、...原创 2018-09-19 11:17:05 · 352 阅读 · 0 评论 -
webpack4.x配置过程(一)
从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念:入口(entry),输出(output),loader,插件(plugins),其次还有就是mode(模式)。 以下是官方文档解析: entry point指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。 output 属性告诉...原创 2018-09-12 21:11:52 · 597 阅读 · 0 评论 -
webpack4.x配置过程(二)
此文根据阮一峰大神的demo结合自己的配置项目改编而成:github 1、demo01,这个是一个非常简单的demo,请仔细实践上一篇。2、dem02,配置多入口文件: 2.1、新建src/search.js,输入document.write(‘i am search’); 2.2、dist/index.html 加上:<script src="./bundle2.js"&gt...原创 2018-09-12 21:15:30 · 282 阅读 · 0 评论 -
Vue插槽
插槽插槽内可以包含任何模板代码,包括 HTML,其他组件。当一个父组件需要传dom元素给子组件可以使用插槽<template> <div> <v-home> <h1>父组件传的内容</h1> </v-home> </div></tem原创 2018-09-21 09:55:53 · 375 阅读 · 0 评论 -
vue-element-admin源码分析
这两天看花裤衩大大的手摸手系列,使用vue+element+vuex+axios实现了一个后台模板(项目地址),在阅读源码的过程中收益匪浅,以下做一些笔记。(由于是学习大大项目的思想,所以略去了很多大大的代码)。这里只是做一个登陆页面,然后能提交数据给后台并能接收数据,暂时没有做路由守卫同跳转。首先配置并安装好好所需要的main.jsimport Vue from 'vue'import ...原创 2019-11-01 11:12:19 · 12725 阅读 · 1 评论 -
Vuex基本使用
当页面有很多个组件之间需要进行复杂的数据传递时时,如果我们将公共数据放在一个公共地方统一管理,当一个组件改变了公共的数据时,其他组件页面就能感觉到(获取到改变后的数据),这是我们用到VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单可理解为一个集中管理数据的一个地方。官方图:...原创 2018-09-21 17:52:16 · 233 阅读 · 0 评论 -
使用hammer.js实现图片手势缩放及算法解释
关于图片缩放,这里先讲一下算法。transform的缩放是指长宽的缩放,不是面积的缩放。//transform-origin的初始位置是在元素的正中间,而缩放,平移,这个位置会跟着改变。transform的matrix值:matrix(a,b,c,d,e,f):其中a代表水平x的缩放,d代表垂直y的缩放,e代表水平偏移值,f代表垂直方向的偏移值。b,c这里没有用到,暂时不讲。双指缩放算法:...原创 2019-03-15 18:00:25 · 10172 阅读 · 12 评论 -
vue组件
组件使用分3步引入组件 import Home from ‘./components/Home’挂载组件 components:{‘v-home’:Home’}在模板中使用:&amp;amp;amp;amp;lt;v-home&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/v-home&amp;amp;amp;amp;gt;新建一个components文件夹存放组件 src/原创 2018-09-18 22:37:52 · 749 阅读 · 2 评论 -
Vue数据双向绑定
数据双向绑(vmmv)model改变促使view改变,view改变促使model改变 用 v-model绑定数据,然后通过input改变该数据,model里的数据会被改变,通过methods改变model的数据,input里的数据会发生变化, 代码如下&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt;原创 2018-09-18 21:39:36 · 204 阅读 · 0 评论 -
Vue基础
安装Vue: 1、必须安装node.js,安装git(这个可以不用,不过习惯了) 2、安装webpack·npm install -g webpack 3、使用淘宝镜像(用cnpm命令代替npm,这个也可以不用安装,只是使用npm安装依赖包是会慢那么一点):npm install -g cnpm --registry=https://registry.npm.taobao.org 4、安装...原创 2018-09-18 17:31:33 · 244 阅读 · 0 评论 -
手机浏览器不能显示轮播图
自己写了一个轮播图,在电脑版的浏览器可以显示,但在手机上的UC等浏览器不能显示。后经同事提醒,可能是手机浏览器的广告过滤功能把轮播图过滤掉了。但自己写的轮播图为什么会被当成轮播呢?经查看,结果发现代码里带有“AD”等字符串,可能是浏览器把“AD”字符串过滤掉,所以不能显示出来。我把所有有关“AD”的代码删除了,结果在手机浏览器显示了。原创 2017-07-26 11:56:39 · 4794 阅读 · 0 评论 -
jq替换网页上所有img的src值中某个字符串
要修改页面上所有Img的src值,需要遍历所有Img,获取它的src值,进行修改。 下边代码可把页面上src值中所有‘/thumbs/’换成‘/’。原创 2017-08-21 15:37:31 · 5942 阅读 · 0 评论 -
如何解决ueditor乱码问题
出于某种原因,项目的页面是gb2312编码,但是需要用到utf-8编码的ueditor,这样的话页面显示ueditor会出现乱码现象。原创 2017-08-28 10:58:10 · 15565 阅读 · 2 评论 -
有关input[text]与button的错位问题
元素之间的错位问题原创 2017-09-07 09:52:53 · 5291 阅读 · 1 评论 -
editor.md使用asp上传文件
最近发现ueditor的代码样式控制得不够好,所以尝试了一下editor.md这个富文本编辑器,由于本系统使用的语言是asp,官方并未提供相关语言的图片上传代码,所以需要自己动手丰衣足食。 由于本人对asp并不熟悉,而公司使用的系统是asp,所以本次使用的是经过魔改的ueditor asp版本上传图片代码,望见谅。原创 2018-02-01 14:58:21 · 668 阅读 · 0 评论 -
关于.wmv的兼容问题
以下方法可以在360的极速模式下运行,chrome还是不行。<object id="MusicPlayer2" type="video/x-ms-wmv" viewastext="VIEWASTEXT" width="320" height="260"> <param name="FileName" value="/a.wmv" /> <param原创 2018-05-07 16:28:00 · 1865 阅读 · 0 评论 -
提取Bootstrap栅格系统
Bootstrap带给大家最大的便利莫过于它的栅格系统,栅格系统帮助我们快速构建响应式的网页布局,以适配各种尺寸的屏幕。Bootstrap虽然带给我们很多的便利,但是很多情况下我们只需要用到它提供的栅格系统,其他组件样式我们更倾向于自己实现,为了给网站瘦身,我们往往需要抽取其中的一部分,我们甚至可以把前缀‘col-’去掉以尽量瘦身(在不压缩的情况下该文件9K,删除了col-后为8k,压缩情况下有没...原创 2018-05-24 22:22:43 · 841 阅读 · 0 评论 -
实现单个页面,多个百度分享(动态修改百度分享链接)
在我编写文章列表页代码的时候,想实现每一条文章都有一个分享按钮,此处用到百度分享。百度分享官网:http://share.baidu.com/code/advance。 官网给出的完整代码只适合分享单个页面,显然不符合我的需求。仔细阅读文档之后,发现在通用设置项的解析里有这么一项: 有了这项设置,我们可以很容易地改变window._bd_share_config 里的设置。 步骤: 1...原创 2018-05-30 16:19:11 · 4557 阅读 · 1 评论 -
基于swiper的仿微信图片预览功能实现
需求: 点击文章中图片会弹出一层,在这层中图片可以放大(双击放大,手势放大,滑动切换图片,swiper可以做到这些功能),类似微信的预览图片功能。 实现:动态生成swiper结构。代码如下:&amp;lt;!--引入jquery--&amp;gt;&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; hre原创 2018-06-21 22:06:13 · 3055 阅读 · 0 评论 -
解决懒加载与富文本(ueditor为例)的冲突问题
常用的懒加载插件:jquery.lazyload.js,该插件的使用格式如下:<img src="/images/loading.gif" data-original="upload/1.jpg" /><script src="/js/jquery.min.js"></script><script src="/js/jquery原创 2018-05-31 22:32:10 · 2201 阅读 · 1 评论 -
使用js向二维码添加文字
原理:先通过canvas生成二维码,然后在二维码上加上文字,涉及到canvas操作。 文本框居中算法: 代码如下 index.html&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&a原创 2018-06-29 12:24:29 · 6646 阅读 · 2 评论 -
搭建一个es6开发环境
本文基于《ES6零基础教学 解析彩票项目》,视频地址:https://coding.imooc.com/class/evaluation/98.html#Anchor。 这里的编译环境是 gulp+webpack+node+express+express-generator。 准备:安装node.js,git此处略。 开始: 构建文件目录(此处用git bash)逐一输入命令:mkdi...原创 2018-09-12 09:27:29 · 773 阅读 · 0 评论 -
Vue 安装与配置
安装Vue: 1、必须安装node.js,安装git(这个可以不用,不过习惯了) 2、安装webpack·npm install -g webpack 3、使用淘宝镜像(用cnpm命令代替npm,这个也可以不用安装,只是使用npm安装依赖包是会慢那么一点):npm install -g cnpm --registry=https://registry.npm.taobao.org 4、安装...原创 2018-09-18 15:19:05 · 1514 阅读 · 0 评论 -
如何取消mui中图片放大后自动往回缩的回弹效果
在使用mui的图片放大功能是,发现该功能只能把图片放大到占满整个屏幕,而且使用手机测试时,用两只手指继续放大图片时候,图片会自动往回缩,即图片无法再放大,经过研究,只要把mui.zoom.js的部分代码注释掉就可以把这种效果取消,使得图片可以继续放大。截图如下:原创 2017-03-23 22:36:23 · 5404 阅读 · 1 评论