木灵鱼儿

木灵鱼儿 5年前 vue 项目实战

解决iPhone的click延迟

上次我通过监控click的触发时间来判断是否双击后,在ipad上测试是已经解决了的,但是iPhone上居然又不行了,他需要点击三次才会触发双击事件,按道理,判断时间是没有问题的,400ms也刚刚好,于是又去研究.同事告诉我说苹果的会有click延迟,为此我测试了一下,点击一下,然后等久一点点再点击,也能触发双击,但是这个一点点的时间肯定是超过了400ms,只能说首次的click被延迟执行了.具体为什么要这样做,估计是要和ios系统本身的双击放大有关系的,反正dblclick完全不触发的,无奈又要去找解决方案.于是就找到了FastClick,他是一个在github上发布的轻量级解决方案,引...

3209 0 0

vue cli初始化遇到的两个报错

木灵鱼儿 5年前 vue 项目实战

vue cli初始化遇到的两个报错

使用npm run dev运行本地项目的时候遇到两个报错，第一个是-4058，另一个是npm ERR! Exit status 1，具体报错如下：npm ERR! node v6.11.0 npm ERR! npm v3.10.10 npm ERR! path C:\Users\BYN.YANA-PC\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall opennpm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel@1.0.0 dev:...

2859 0 0

ios移动端浏览器不支持dblclick事件触发

木灵鱼儿 5年前锋利的JQuery

ios移动端浏览器不支持dblclick事件触发

ios端他自己有一个双击空白区域会自己放大缩小视窗,我怀疑就是这个功能导致dblclick无法正常触发,于是只能通过单次cilick来判断了.当第二次click的触发时间小于400ms说明是双击,于是通过创建时间戳进行对比. let lastClickTime = 0; let clickTimer; $('#body').on("click", e => { let nowTime = new Date().getTime(); if (nowTime - lastClickTime < 400) { ...

6114 0 0

dblclick

vant组件ImagePreview 遇到的一个问题

木灵鱼儿 5年前 vue 项目实战

vant组件ImagePreview 遇到的一个问题

ImagePreview 是一个图箱插件,自动创建遮罩层,但是当我把它封装到一个插件里面(imgbox.vue);在两个页面都引入这个同一个组件,遮罩层会在某一个页面显示,另一个页面消失.仔细想了下,应该是他只会创建一个遮罩层,然后创建后就不在处理了,只是显示和隐藏操作,这就导致第一个页面的遮罩层被第二个页面拿走了,没法拿出来,唯一的办法就是重载了.通过v-if对这个imgbox进行重载渲染,创建一个判断属性,每次判断这个来是否挂载组件.这个判断属性要在当前页面mounted生命周期时挂载一次,但是这也只能挂载一次,所以我们还要监控路由的变化,如果又到了这两个页面,就再进行一次挂载,离开...

7587 0 1

vant组件库SwipeCell增加点击不触发功能

木灵鱼儿 5年前 vue 项目实战

vant组件库SwipeCell增加点击不触发功能

组件地址:点击SwipeCell 滑动单元格介绍他是一个封装好的组件,当手指往左滑动的时候,调出右边的菜单,往右滑时调出左边的菜单.用法除了官网提供的基本写法,还可以通过slot插入自定义的元素用于内容显示.这里就会遇到一个问题,如果我们滑动的内容里面有一个click的事件用于进入到下一个页面.当单元格处于拉开的状态,也就是左右有单元格滑动了,点击时依旧会触发click事件,但是已QQ为例,qq在左右拉开的时候,点击只会让拉开的元素还原,并不会触发click事件,所以我们要解决这个问题.解决问题由于click是由我们自己写的元素触发,click事件也是我们自己写的,所以操作上就很方便了,...

1.4w 0 13

vue.js项目实战第二章的错误

木灵鱼儿 5年前 vue 项目实战

vue.js项目实战第二章的错误

在3.出牌的时候，书上只是给hand组件中的card组件元素绑定了自定义的play事件，然后触发hand的methods中的handlePlay方法，并将当前card作为参数传入。但是他没有讲这个play方法触发。只是讲点击卡牌是可以触发这个自定义的play事件，而且他的css里面设置了pointer-events: none;导致这个事件没法触发到，况且本身不讲怎么触发play也无法进行下一步。简单的解决办法就是在card组件的methods中写一个自定的方法，然后在里面使用$emit触发play事件，然后css设置.hand{pointer-events: all;}就可以了，然后效...

2416 0 0

margin负值拉伸元素

木灵鱼儿 5年前 CSS

margin负值拉伸元素

今天按着书写代码的时候发现一个问题，margin负值居然无法拉伸元素，在我的理解里margin四个值都为负值的时候是可以拉伸元素的。为此我还特意百度了下，也没找到什么有价值的信息，于是自己测试了下。当元素为block话的时候，也就是正常水平流状态时，使用margin负值是可以拉伸的，但是，当你的元素设置了宽高，那么负值就不能拉伸了。他会以top和left两个方向做位置偏移。而： position: absolute; top: 0; bottom: 0; left: 0; right: 0;这种状态元素也可以看做为一个block元素，正常的水平流状态。也能用margin负值拉伸！...

4042 0 1

本地web md笔记本

木灵鱼儿 5年前 vue 项目实战

本地web md笔记本

不多说，看图预览图demodemo

2542 0 0

感觉挺空的

木灵鱼儿 5年前 ·

感觉挺空的

实习快三周了，说不上什么感觉，反正一开始挺难受的，一开始我以为前端就是每天ui，各种酷炫各种hack，然后每天研究什么样的写法可以省资源，毕竟我接触到的优化的书差不多都是节省资源为主，然后资源回收啥的，说实话我要是没搞过这个主题那么长时间，我可能一天都待不下去了，然后即便到今天，格格不入的那种感觉也常常缠绕在心头。碰到的和学到的永远是擦边的那种感觉，碰到的问题永远是兼容的问题，一上来就是三个大平台，浏览器，微信小程序，app，甚至细分下还有ios和安卓两个平台的不同。让我这个一直都是pc+安卓的有点不知所措，经常是浏览器表现很好，安卓也没问题，然后一到微信和ios就开始疯狂出问题，由于是...

3972 0 3

vue入门感受

木灵鱼儿 5年前 vue前端开发快速入门与专业应用

vue入门感受

实习的地方使用的vue，于是只能硬着头皮学了，之前买过一本vue的书，于是派上了用场，但是实际其实用处感觉不大，前期的内容还是挺简单的，就是讲了几个vue的标签，指令这些的用法，但是一到路由这里就卡主了，因为1.0和2.0版本不同，很多东西都变了，而且例子也不详细，无奈只能放弃继续读下去，于是找一个视频教程和一本项目实战的书，期待能有新的认知，这里就暂时放弃继续写这本书的笔记了。

3238 34 0

Vue 路由

木灵鱼儿 5年前 vue前端开发快速入门与专业应用

Vue 路由

基本写法首先引入vue的插件router，地址：https://unpkg.com/vue-router/dist/vue-router.js下载后head引入,然后创建好html的标签:<div id="app"> <ul> <li> <router-link to="/">主页</router-link> </li> <li> <router-link ...

3155 0 0

vue vue 路由 router

Vue 动态组件

木灵鱼儿 5年前 vue前端开发快速入门与专业应用

Vue 动态组件

component通过compoent标签加上:is就可以判断让哪些组件显示。compoent可以理解为一个所有组件的母体，它包含了所有的组件，通过:is的值就可以让对应的组件显示出来。<div id="app"> <ul> <li @click="showview='home'">主页</li> <li @click="showview='list'">列表</li> ...

3829 0 0

vue

制作一个简单的modal模态框

木灵鱼儿 5年前 vue 基础

制作一个简单的modal模态框

制作一个简单的modal组件，主要效果就是，点击按钮能够弹出这个模态框，然后模态框有两个按钮，点击取消能够关闭，确认就alert弹出提示信息，并且他的宽度由父组件控制，内容也由父组件渲染，然后按钮的事件也是父组件的。效果图首先我们创建一个组件，由于html代码过多，所以采用在html文件中创建，然后js获取。先引入一个css文件：<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css"><script id=&quo...

3126 0 0

vue modal 模态框

Vue 组件

木灵鱼儿 5年前 vue 基础

Vue 组件

组件创建注册vue通过组件可以达到重复利用，有点类似jq的插件，但是又不同，组件需要先创建再注册，注册后再到html里引用，组件又分全局和局部。全局组件注册var myTitle = Vue.extend({ template : '<h2>我是一个全局的标题组件</h2>' }); Vue.component('my-title',myTitle); var app = new Vue({ el : '#app' });<div id="app"> ...

3480 0 0

vue vue组件

Vue 过渡

木灵鱼儿 5年前 vue前端开发快速入门与专业应用

Vue 过渡

class类名之间的区别单个说明不是很好理解，我们直接看它的流程图v-enter(动效开始之前)>------>------>------>v-enter-to(动效结束) v-leave(动效开始之前)>------>------>------>v-leave-to(动效结束)这两个表示一个来回，第一次点击运行第一个v-enter,第二次点击运行v-leave，这样有来有回就产生动效。两个动效一般都不会在类名里面写transition：all .3s；这种来控制动效时间，他们都有一个通用的类名，在开始到结束一直存在的：v-enter-...

4065 0 0

vue vue过渡

Vue过滤器

木灵鱼儿 5年前 vue前端开发快速入门与专业应用

Vue过滤器

由于2.0版本取消了所有的内置过滤器，而且过滤器只能在插值中使用，也就是{{xxx}}中使用，格式为{{name | 过滤器}}；通过一个管道符号将前面需要过滤的内容隔开，后面写一个函数用于过滤，过滤器会将name作为第一个参数传入这个函数中，并且还支持传参。创建一个过滤器全局过滤器Vue.filter('deta',function(value){ if(!data instanceof Data) return value; return value.toLocaleDateString(); });通过Vue.filter创建一个全局过滤器，deta为过...

3373 0 0

vue vue过滤器

入门基础

木灵鱼儿 5年前 vue前端开发快速入门与专业应用

入门基础

v-if/v-else看书上说v-show也可以和v-else配合使用，实际上并不行。:style 也支持三元判断，和:class一样，三元需要加个括号，然后里面如果是普通的string值需要用引号括起来，不然会认为是对象或者Vue对象的属性方法那些，从而报错。例子：<div :class="['one',(isFlag?'two':'three')]"></div> <div :style="{'font-size':(isFlag?'1...

3473 0 0

vue

jQ插件-thickImg大图查看器

木灵鱼儿 5年前锋利的JQuery 实例

jQ插件-thickImg大图查看器

这里需要使用到jquery-ui的position效果，所以需要引入jq-ui的js文件。通过特定的class名来进行区分，然后js加上对应的效果。做这个主要是他这个ui挺简洁的，以后说不定用的到，反正不是很难，就花点时间做了个插件。预览图：使用教程html<a href="images/02.jpg" title="图片信息" class="thickImg"> <img src="images/look.gif" alt="查看大图"> &l...

3563 0 0

jQ插件 thickImg大图查看器

jQ插件-jqzoom图片放大镜

木灵鱼儿 5年前锋利的JQuery 实例

jQ插件-jqzoom图片放大镜

找了好几个放大镜插件发现全是老旧的，新版jq取消了很多东西，所以导致以前的都无法使用了，索性就自己写了一个新的放大镜插件。预览图：使用教程html结构<a href="images/01.jpg" class="jqzoom" title=""> <img src="images/small_01.jpg" title="迷你图片"> </a>通过给a元素一个class为jqzoom的钩子，然后添加一个href属性...

4243 0 0

jqzoom图片放大镜 jQ插件

jq-ui 滑动验证

木灵鱼儿 5年前锋利的JQuery 实例

jq-ui 滑动验证

自己尝试写了两个滑动验证的效果，不多说，上图：demo 地址滑动验证-拼图滑动验证-滑动

3579 0 0

jquery jquery-ui 滑动验证

JQ插件-validate 自定义验证方法

木灵鱼儿 5年前锋利的JQuery

JQ插件-validate 自定义验证方法

validate默认有几种验证方式，但是定死的方法肯定不能得到发展的，作为老牌的jq插件，他支持自定义验证方法。首先我们需要引入他自己的模块，additional-methods.js文件，也就是说在引入jquery.validate.js插件之后，还需要引入这个additional-methods.js文件。注：如果还需要使用中文的message信息提示，还需要在additional-methods.js后面再引入对应的语言，如：messages_zh.js，这个就是中文的提示信息。因为如果你自定义的一个验证方法，而messages_zh.js先引入了，你这这个文件里面写的对应方法的信...

5470 0 2

validate

快递信息查询 ajax+api

木灵鱼儿 5年前锋利的JQuery 实例

快递信息查询 ajax+api

依旧采用ajax配合阿里云api来获取快递信息，支持自动判断快递公司，初次对接，json部分筛选好做，就是整体的事件判断太麻烦了，快递100的网页还可以通过快递单号先做一个本地预判，这个主要他有大数据分析，有数据库支持，我这边没这个基础，不然也能做，他无非就是分析多少位，开头什么数字，结束什么数字，开头是什么字母，为此我尝试的为顺丰加了一个单独预判，就是单号开始输入sf，大小写都能识别为顺丰。瞬间被用完100次免费查询额度，我还没体验几次呢，无奈续费了下api不多说，上图：demo地址查看功能介绍[x] 采用html5+css3构建[x] 使用jq v3.4.1[x] 响应式结构支持32...

4728 1 2

AJAX 快递信息查询快递100

JQ jsonp大揭秘(跨域真理)

木灵鱼儿 5年前锋利的JQuery

JQ jsonp大揭秘(跨域真理)

如果要在jq里进行跨域，一般来说只有使用jsonp，另一种方式则是进行中间层欺骗，也就是所谓的反代。这里我们主要讲讲json是怎么回事基本json实现jsonp全部都是使用带有src标签的元素，一般默认使用script元素，在src链接地址中，在地址后面加上?name=value&callbakc=hd；其中name=value是传值，而callbakc=hd则是回调，在本地js全局作用域下创建一个名为hd的函数。var script = document.createElement("script"); script.src = "xxxx?callbac...

3992 0 0

跨域 jsonp

Ajax壁纸站点（跨域）

木灵鱼儿 5年前锋利的JQuery 实例

Ajax壁纸站点（跨域）

以前写静态站点的时候一直想要一个图片的站点，但是又不想弄成个本地的，个人又懒得更新，这次ajax尝试使用api来获取别人分享的图片，为此就有了这个页面。提供了诸多筛选条件，分类，排序，图片px大小，比例，色系，后续有能力再加上搜索关键词，下一步就是加上图箱，我要想一个好一点的图箱办法，然后支持后续更新升级，长期使用，以前写的有点简陋。不多说，上图:功能详解：[x] 无刷新加载图片[x] 跨域[x] 丰富的筛选条件[x] 支持翻页，因为是ajax刷新，目前固定6页的页值，下一页可以无限，只要还有内容就可以一直下一页[x] 响应式结构[ ] 后续增加图箱[ ] 后续增加指定跳转到某一页Dem...

3710 0 0

壁纸 AJAX jq

网页换肤（cookie）

木灵鱼儿 5年前锋利的JQuery 实例

网页换肤（cookie）

由于jq的cookie插件已经放弃维护了，其团队改为js-cookie在github上进行新的开源分享。地址为：https://github.com/js-cookie/js-cookie下载到引用的js文件后引用即可。调用方法：//设置 Cookies.set(name,value,{expires: time, path: '/'}); //其中value的值支持对象的形式传入 var box = { a = 1, b = 2 } Cookies.set(name,box,{expires: time, path: '/'}); /...

5022 0 1

cookie 网页换肤

木灵鱼儿

解决iPhone的click延迟

vue cli初始化遇到的两个报错

ios移动端浏览器不支持dblclick事件触发

vant组件ImagePreview 遇到的一个问题

vant组件库SwipeCell增加点击不触发功能

vue.js项目实战第二章的错误

margin负值拉伸元素

本地web md笔记本

感觉挺空的

vue入门感受

Vue 路由

Vue 动态组件

制作一个简单的modal模态框

Vue 组件

Vue 过渡

Vue过滤器

入门基础

jQ插件-thickImg大图查看器

jQ插件-jqzoom图片放大镜

jq-ui 滑动验证

JQ插件-validate 自定义验证方法

快递信息查询 ajax+api

JQ jsonp大揭秘(跨域真理)

Ajax壁纸站点（跨域）

网页换肤（cookie）

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

解决iPhone的click延迟

vue cli初始化遇到的两个报错

ios移动端浏览器不支持dblclick事件触发

vant组件ImagePreview 遇到的一个问题

vant组件库SwipeCell增加点击不触发功能

vue.js项目实战第二章的错误

margin负值拉伸元素

本地web md笔记本

感觉挺空的

vue入门感受

Vue 路由

Vue 动态组件

制作一个简单的modal模态框

Vue 组件

Vue 过渡

Vue过滤器

入门基础

jQ插件-thickImg大图查看器

jQ插件-jqzoom图片放大镜

jq-ui 滑动验证

JQ插件-validate 自定义验证方法

快递信息查询 ajax+api

JQ jsonp大揭秘(跨域真理)

Ajax壁纸站点（跨域）

网页换肤（cookie）

最近评论

博客文章RSS订阅

博客评论RSS订阅