自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

風缘的博客

不积跬步,无以至千里;不积小流,无以成江海

原创 Vux的VChart支持antv F2交互行为(Interaction)

F2提供了以下五种通用的交互行为(Interaction):图表平移(Pan)图表缩放(Pinch)Swipe 快扫饼图选中柱状图选中v-chart并不支持F2的交互行为(Interaction),如果我们要想图表支持Interaction,有以下两种方式:不用v-chart实现,直接用F2基于v-chart组件进行二次封装我以实现图表平移(Pan)举例:示例所...

2020-03-27 11:59:47 402

原创 form-create使用总结

给表单项加className方便调整样式rule: [{ type: 'input', title: '货物总毛重(KG)', // label名称 field: 'totalGrossWt', // 字段名称 value: '', // input值, col: {span: 16, labe...

2019-10-22 18:03:52 4525

原创 $attrs和$listeners

$attrs与$listeners的主要应用是实现多层嵌套传递。组件A与组件B通信一般都会使用组件B中转,即A传递给B,B再给C,但是如果A到C组件之间嵌套的组件过多,需要传递的事件和属性较多,会导致代码繁琐,代码维护困难。在vue2.4中,为了解决该需求,引入了$attrs和$listeners,新增了inheritAttrs选项。$attrs的使用官方定义:包含了父作用域中不作为pr...

2019-09-05 12:03:25 1479

原创 Vue 的小奇技

1.监听第三方组件的生命周期钩子通过使用 @hook: 前缀监听生命周期中的钩子,并指定回调函数。举个例子,如果你想要在第三方组件 v-runtime-template 渲染时做一些事情,那么你可以监听它的生命周期中的 updated 钩子:<v-runtime-template @hook:updated="doSomething" :template="template" /&gt...

2019-09-03 17:53:00 78

原创 vue 富文本框插件quill-editor 踩坑

(1)最新版本的需要单独引入样式(2) 多个页面中不能存在多个quill-editor,不然会出现这样的情况将toolbar的id设置成动态(3)禁用quill-editor注意:最好用this.quill.enable,用this.quill.disable的话设置禁用后,想还原设置this.quill.disable(false)是没效果的this.quill.enable(fal...

2019-09-03 17:34:46 515

原创 vue中dom操作

this.$el当前组件最外层div<template> <!-- <div class="hot-wrap" v-on:contextmenu.prevent = "create"> --> <div class="hot-wrap" @mousedown.self = "mousedownHandle"> <hot &g...

2019-09-03 17:28:57 110

原创 vue面试知识点总结

对于Vue是一套渐进式框架的理解在我看来,渐进式代表的含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难...

2019-09-03 15:27:56 216

原创 图解 event.pageX event.clientX event.offsetX get BoundingClientRect

event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。eve...

2018-12-12 23:42:16 405

原创 vue中dom操作

this.$el当前组件最外层div<template> <!-- <div class="hot-wrap" v-on:contextmenu.prevent = "create"> --> <div class="hot-wrap" @mousedown.self = "mousedownHandle"&gt

2018-12-12 23:28:04 2510

原创 图片连接处出现白线

最近做移动端h5活动页,涉及到多图片拼接,遇到了一个坑就是图片连接处出现白线,当然查资料都说是img自身属性是inline-block导致,只要父元素设置font-size:0或者设置img display: block; 便可。但是我设置了没有用,这条线不是所有的机型都有,而且页面滚动之后又消失,我琢磨半天,各种尝试,发现把图片高度减少(增加)1px就解决了。因为我们的项目是用postcss-p...

2018-11-28 15:23:56 4039

原创 jquery批量设置和获取表单数据

大家在提交表单和给表单赋值的时候是像下面这样写的: 要是表单很长的话真是要泪奔。。。 有人说获取数据可以给jquery添加serializeObject方法:** * 表单序列化为json对象 * 用法:var savaData = $('#Form').serializeObject(); */$.fn.serializeObject = function () { ...

2018-06-15 18:04:52 1160

原创 按钮hover背景渐变

button { position: absolute; padding: 10px 20px; top: 50px; left: 50px; border: none; border-radius: 4px; color: #fff; font: 16px sans...

2018-06-13 10:55:51 2061

原创 纯css实现tooltip

<div class="box"> <a class="tooltip tooltip-up" data-msg="上提示信息"> 提示在上</a><a class="tooltip tooltip-down" data-msg="下提示信息"> 提示在下</a&gt

2018-06-13 00:30:28 2040

原创 html 样式命名

结构样式命名页面最外围控制整体布局宽度:#wrap页面主体:main头部:header标志:logo内容:content侧栏 / 边栏:side栏目:column组:group,item,cell尾部:footer友情链接:friendlink版权:copyright容器:box 面板:panel (情景效果:panel-primary,panel-success,p...

2018-06-12 11:08:44 2625 1

原创 基于jquery的简单分页实现

先上图: 之前在做表格插件想把分页整合进去,原本去网站找一个现成的整合进去,发现有些太简单或者很复杂,达不到自己的要求,自己想还是自己整一个,顺便了解一下其中的原理。 分页样式是基于boostarp的。 (1)页面引入boostarp.css和jquery (2)html代码<div id="pageBox" style="width:1000px;margin: 30p...

2018-06-06 17:17:05 6861 1

原创 百度地图做电子围栏总结

先上图: 需求:在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。 主要的难点(对于我而言)不在于画,而在于设置地图视野和围栏区域的中心点显示围栏名称,其实也不算难,主要是花比较多时间去看百度地图api,还有动手实践。(所以还是那句老话百度找不到答案就去看api文档,答案...

2018-06-05 15:28:25 11856 10

原创 jquery实现表格复杂表头

先上图: 目前在做一个表格插件,表格的表头是根据一个数组生成,如果只是普通的单层表头很容易实现,但是如果是复杂的表头,就要挺麻烦的,主要是我的数组结构是树形数组,实现需要递归,递归过程要考虑到<th> 的 colspan和rowspan 的设置,我自己对递归也不是很懂,只能慢慢摸索。其实自己手写一个复杂的表头也不难,自己就先写一个简单的找规律:<table clas...

2018-05-16 10:29:48 2898 1

原创 jquery 技巧积累

1.判断复选框是否被选中$('#checkBox').attr('checked');2.禁启用按钮$("#somebutton").attr("disabled", true);//禁用$("#submit-button").removeAttr("disabled");//启用注:.attr(‘disabled’,false);这

2018-04-02 17:37:12 100

转载 jQuery 之 extend 方法使用

方法介绍jQuery 的 API 手册中,extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上,但在 jQuery 内部代码实现的是相同的,只是功能各不相同。先看看官方给出的解释:jQuery.extend Merge the contents of two or more objects together into the first object. 把两个或者多个对...

2018-04-02 15:34:03 166

原创 javascript 对象封装的常用方式

常规封装function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex;}Person.prototype = { constructor: Person, sayHello: function () { console.log('hello'); }}v...

2018-03-22 17:38:45 120

转载 Web图片资源的加载与渲染时机

此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。浏览器的工作流程要研究图片资源的加载和渲染,我们先要了解浏览器的工作原理。以Webkit引擎的工作流程为例:从上图可看出,浏览器加载一个HTML页面后进行如下操作:解析HTML —> 构建DOM树加载样式 —> 解析样式 —> 构建样式规则树加载javascript —>...

2018-03-22 11:31:00 282

原创 WebStrom Live Template 建代码块

俗话说:工欲善其事必先利其器,为了提高开发效率自定义一些自己常用的代码块是必不可少的,下面我介绍一下WebStrom新建代码块的方法。(1)打开‘设置’面板,快捷键 ‘ctrl+alt+s’(2)找到‘模版’点击,然后再点击右边绿色的‘+’号,选择Live Template,然后会出现下面的表单输入框,abbreviation就是这个代码快的缩写最好写方便你记忆的,描述是就是这个代码块的描述,模版...

2018-03-20 16:40:02 2506

原创 css实现让页面的footer始终位于底部

在写html页面布局的时候经常会遇到这样的情况:当页面内容较少的时候footer下面会有留白这样会很不好看,直接给footer,fixed定位的话当页面内容多的时候,footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。方法一:<body><div class="page"><header> 头部 </header...

2018-03-16 16:07:34 10294 2

转载 深入理解 call,apply 和 bind

本文转自:点击打开链接在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解,并列出几个经典应用场景。1、call(thisArgs [,args...])该方法可以传递一个thisArgs参数和一个参数列表,thisArgs 指定...

2018-03-15 15:14:28 87

转载 undefined 与 null 的区别

本文转自:点击打开链接最近在看《JavaScript高级程序设计》一书,书中讲到相等操作符(==)时说,要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,但要记住 null == undefined 会返回 true 。的确,在ECMAScript规范中也是这样定义的,但我认为这样来理解这件事情,似乎有些浮于表面,网上也有很多关于这个问题的文章,下面我希望从一个全新的角...

2018-03-15 11:09:15 113

转载 JavaScript数组原型方法

本文转自点击打开链接数组原型方法主要有以下这些:join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() (ES5新增)forEach() (ES5新增)map() (ES5新增)filter() (ES5新增)every() (ES5新增)some() (...

2018-03-14 10:34:02 337

转载 Vue.js 和 MVVM 小细节

文章转载至:点击打开链接MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 ...

2018-03-11 14:21:52 106

转载 理解JavaScript 闭包

转载地址:点击打开链接1、闭包,一睹为快在接触一个新技术的时候,我首先会做的一件事就是找它的 demo。对于我们来说,看代码比自然语言更能理解一个事物的本质。其实,闭包无处不在,比如:jQuery、zepto的核心代码都包含在一个大的闭包中,所以下面我先写一个最简单最原始的闭包,以便让你在大脑里产生闭包的画面:12345678function A(){    function B(){      ...

2018-03-11 14:05:46 76

原创 移动端的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><!-- width - viewport的宽度 height - viewport的高度;initial-scale - 初始的缩放比例;minimum-scale - 允许用户缩放到的最小比例;maxi...

2018-03-08 11:24:51 92

转载 高清方案下,页面字体会不受控制变的很大

本文转自点击打开链接问题原因:在X5新内核Blink中,在排版页面的时候,会主动对字体进行放大,会检测页面中的主字体,当某一块字体在我们的判定规则中,认为字号较小,并且是页面中的主要字体,就会采取主动放大的操作。然而这不是我们想要的,可以采取给最大高度解决解决方案:*, *:before, *:after { max-height: 100000px }后续:经过项目实践,还是决定给 max-he...

2018-03-08 11:08:14 333

转载 移动端开发自适应解决方案

原文章地址:点击打开链接    移动端自适应方案有很多种1.流式布局也就是固定高度,宽度使用百分比的方法,这种方法会导致一些元素在大屏手机上拉伸严重的情况,影响视觉效果,只有在很少一部分手机上能完美的展示设计师想要的效果。携程之前用的就是流式布局,但之后也改版了。2.固定宽度做法比如早期的淘宝webpage,页面设置成320的宽度,超出部分留白,在大屏幕手机上,就会出现两条大百边,分辨率高的手机,...

2018-03-08 11:02:36 1641

原创 jquery后台系统内页链接跳转左侧菜单选中到当前页

该案例主要说的是左侧菜单固定,内容主要通过iframe或者ajax引入的后台系统页面。当内容页面有个链接点击跳到另外一个菜单页,左侧菜单要选中当前跳转页面对应的菜单。我写的后台界面是用iframe实现:在iframe页面中<a href="#" class="btn btn-default btn-block" onclick="jumpUrl('baoxianyujingguanli/ba...

2018-03-05 17:43:22 2317

原创 bootstarp后台界面iframe模态框遮罩问题

问题如下图:模态框代码写在子页面中才会出现这种情况,因为iframe中的模态框只显示在iframe区域。其实百度看了一些解决方法感觉挺麻烦的,自己想了下发现其实可以很简单的解决。思路:frame中的模态框只显示在iframe区域 =》让frame区域覆盖整个页面 =》导航和侧边菜单使用定位 =》默认情况下frame区域(position: relative)的z-index值小于导航和侧边菜单的z...

2018-03-05 17:03:34 1200

原创 编写js技巧

一.用&&,||赋值var foo = 10;foo == 10 && doSomething(); // 等价于 if (foo == 10) doSomething();foo == 5 || doSomething(); // 等价于 if (foo != 5) doSomething();在A&&B中,当A为true,则返回B;A为fal...

2018-01-25 16:50:18 1467

原创 jquery 文件上传插件ajaxfileupload.js 实现多图上传,解决文件上传后表单置空的问题

一.实现多张图片上传将代码 var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(

2018-01-23 16:04:10 236

转载 20 个 CSS使用技巧

文章转自:http://mp.weixin.qq.com/s/MavtDznPVECblDUTq_W-Rg1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷?img.desaturate {  filter: grayscale(100%);  -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100

2017-12-27 17:18:39 214

原创 border属性妙用

1.实现左右两栏等高布局经常建有这样的需求要求左侧菜单栏和右边内容区等高,如后台管理系统的界面 以上效果html代码:<div class="menu"> <ul> <li>首页</li> <li>用户管理</li> <li>设置中心</li> <li>会员管理</li> <li>系统管理</li> <

2017-12-27 15:58:37 513

转载 打造自己的 JavaScript方法工具库

前言作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到 日期格式化、 url参数转对象、 浏览器类型判断、 节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到 npm,以提高开发效率。常用函数汇总这里先分类整理下,之前项目中多次用到的工具函数。1.Array1.1 a

2017-12-27 10:33:07 2641

转载 六个小而美的 ES6 特性

1. 设置对象变量键值的语法JavaScript开发者的烦恼之一是不能在对象字面量里设置变量键值——必须要在初始化后对象后增加变量键/值:// *Very* reduced examplelet myKey = 'key3';let obj = { key1: 'One', key2: 'Two'};obj[myKey] = 'Three';ES6给开发者们提供了一个解决方法

2017-12-27 09:50:08 80

原创 Highcharts 饼图相关设置

var data = [10,20,25,25,10,10] //已经算好的百分比数值//var data = [40,20,25,45,20,12] 原始数值让Highcharts自动算出百分比function renderTypeChart(data) { if(data.length == 0){ $('#typeChart').find('.no-data').sho

2017-12-26 11:17:27 426

提示
确定要删除当前文章?
取消 删除