1. FaskClick
1. 为什么使用FastClick
移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击，为了能够立即相应用户的点击事件，才有了FastClick。
项目地址：https://github.com/ftlabs/fastclick
2. 安装fastclick
npm install fastclick
3. 初始化FastClick实例
初始化FastClick实例建议再页面的DOM文档加载完成后。
在项目main.js中加入如下代码
impot FastClick from ‘fastclick‘
if (‘addEventListener‘ in document) {
document.addEventListener(
‘DOMContentLoaded‘,
() => {
(FastClick as any).attach(document.body);
},
false,
);
}
4. 不需要使用fastclick的情况
- fastclck对PC浏览器访问无影响，不会添加监听事件
- Android版本Chrome32+设置
viewport meta标签值为with=device-width就不会出现300ms延迟，因此监听事件不会添加。<meta name="viewport" content="width=device-width, initial-scale=1"> - 所有Android Chrome版本设置
viewport meta标签值为user-scalable=no也不会出现300ms延迟，但是注意user-scalable=no会禁用缩放功能。 - 对于IE11 +，您可以使用
touch-action: manipulation;禁用某些元素（如链接和按钮）上的双击缩放。对于IE10使用-ms-touch-action: manipulation
2. vue-event-calendar-pro(事件日历)
1. 简介
Vue2的简单事件日历，除Vue2外没有其他依赖项。响应式和移动优先。
npm官方地址：https://www.npmjs.com/package/vue-event-calendar
2. 安装
npm install vue-event-calendar
3. 在main.js中引用
//^1.1.10, CSS has been extracted as one file, so you can easily update it.
import ‘vue-event-calendar/dist/style.css‘
import vueEventCalendar from ‘vue-event-calendar‘
//locale can be ‘zh‘ , ‘en‘ , ‘es‘, ‘pt-br‘, ‘ja‘, ‘ko‘, ‘fr‘, ‘it‘, ‘ru‘, ‘de‘, ‘vi‘
Vue.use(vueEventCalendar, {locale: ‘en‘})
4. 样例
<template>
<vue-event-calendar :events="demoEvents"></vue-event-calendar>
</template>
<script>
export default {
data () {
return {
demoEvents: [{
date: ‘2016/11/12‘, // Required
title: ‘Foo‘ // Required
}, {
date: ‘2016/12/15‘,
title: ‘Bar‘,
desc: ‘description‘,
customClass: ‘disabled highlight‘ // Custom classes to an calendar cell
}]
}
}
}
</script>
3. @xunlei/vue-lazy-component懒加载插件
1.特性
- 支持组件可见或即将可见时懒加载
- 支持组件延时加载
- 支持加载真是组件前展示骨架组件，提高用户体验
- 支持真实组件代码分包异步加载
2. 安装
npm install @xunlei/vue-lazy-component
3. 在线demo
包地址：vue-lazy-component
样例地址：demo
4. 使用
1. 注册组件
方式1利用插件方式全局注册
import VueLazyComponent from ‘@xunlei/vue-lazy-component‘
import Vue from ‘vue‘
Vue.use(VueLazyComponent)
方式2局部注册
import { component as VueLazyComponent } from ‘@xunlei/vue-lazy-component‘
export default {
// ...
components: {
‘vue-lazy-component‘: VueLazyComponent
}
}
2. 模板语法
<vue-lazy-component
@init="init"
@beforeInit="beforeInit"
>
<!-- real component-->
<st-series-sohu/>
<!-- skeleton component -->
<st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>
4. vue-skeleton-loading骨架加载
是一个让我们快速和方便写出自定义 skeleton loading 的插件。
1. Demo
2. 安装
npm install vue-skeleton-loading --save
3. 使用
1. 项目入口文件main.js全局注册
import VueSkeletonLoading from ‘vue-skeleton-loading‘;
Vue.use(VueSkeletonLoading);
2. 模板语法
共有5个组件，两个基础组件CircleSkeleton、SquareSkeleton，两个布局组件Column、Row，一个容器组件SkeletonLoading。
- 样例1
<template>
<div class="list1">
<skeleton-loading>
<row
v-for="i in 6"
:key="i"
:gutter="{top: ‘10px‘, bottom: ‘10px‘}"
>
<column :span="3" :gutter="10">
<circle-skeleton></circle-skeleton>
</column>
<column :span="20" :gutter="10">
<square-skeleton
:count="2"
:boxProperties="{
bottom: ‘15px‘,
width: ‘250px‘,
height: ‘15px‘
}"
>
</square-skeleton>
</column>
</row>
</skeleton-loading>
</div>
</template>
<script>
export default {}
</script>
效果
2. 样例2
<template>
<div class="page">
<skeleton-loading>
<row
:gutter="{
bottom: ‘15px‘
}"
>
<square-skeleton
:count="2"
:boxProperties="{
top: ‘10px‘,
height: ‘26px‘
}"
>
</square-skeleton>
</row>
<row>
<column :span="4">
<circle-skeleton></circle-skeleton>
</column>
<column :span="20" :gutter="20">
<square-skeleton
:boxProperties="{
top: ‘10px‘,
width: ‘70px‘,
height: ‘15px‘
}"
>
</square-skeleton>
<square-skeleton
:boxProperties="{
width: ‘100px‘,
height: ‘15px‘,
top: ‘10px‘
}"
>
</square-skeleton>
</column>
</row>
<row :gutter="{top: ‘20px‘}">
<square-skeleton
:count="4"
:boxProperties="{
bottom: ‘10px‘
}"
>
</square-skeleton>
</row>
<row>
<square-skeleton
:boxProperties="{
bottom: ‘10px‘,
height: ‘200px‘
}"
>
</square-skeleton>
</row>
</skeleton-loading>
</div>
</template>
<script>
export default {}
</script>
<style lang="less">
.page {
padding: 15px;
}
</style>
效果