vue开发webapp常用组件汇总（未完）
目录
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>
效果
5. vuex-persist持久化
1. 简介
vuex解决多页面之间的数据共享问题，但是当刷新页面时，vuex中store的值就丢失了。
vuex插件，帮助vuex将状态直接保存在cookie、localstorage、sessionstorage中，而不需要手动去操作storage
官网：vuex-persist
2. 兼容性
3. 安装
npm install --save vuex-persisit 或者 yarn add vuex-persisit
4. 使用
引入
import VuexPersistence from 'vuex-persisit'
注意：在浏览器当中，可以直接使用
window.VuexPersistence
创建对象
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})
// or in Typescript
const vuexLocal = new VuexPersistence<RootState>({
storage: window.localStorage
})
作为插件使用
// in typescript
const store = new Vuex.Store<State>({
state: { ... },
mutations: { ... },
actions: { ... },
plugins: [vuexLocal.plugin]
})
// or in JavaScript
const store = {
state: { ... },
mutations: { ... },
actions: { ... },
plugins: [vuexLocal.plugin]
}
配置完成后，正常操作vuex，store中的值就会被持久化，刷新也不会丢失。
5. 自定义构造函数参数
当创建VuexPresistence对象时，我们会传入PersistOptions类型的设置对象。下面是该对象的属性和含义
| Property | Type | Description |
|---|---|---|
| key | string | The key to store the state in the storage Default: 'vuex' |
| storage | Storage (Web API) | localStorage, sessionStorage, localforage or your custom Storage object. Must implement getItem, setItem, clear etc. Default: window.localStorage |
| saveState | function(key, state[, storage]) | If not using storage, this custom function handles saving state to persistence |
| restoreState | function(key[, storage]) => state | If not using storage, this custom function handles retrieving state from storage |
| reducer | function(state) => object | State reducer. reduces state to only those values you want to save. By default, saves entire state |
| filter | function(mutation) => boolean | Mutation filter. Look at mutation.type and return true for only those ones which you want a persistence write to be triggered for. Default returns true for all mutations |
| modules | string[] | List of modules you want to persist. (Do not write your own reducer if you want to use this) |
| asyncStorage | boolean | Denotes if the store uses Promises (like localforage) or not (you must set this to true when suing something like localforage) Default: false |
| supportCircular | boolean | Denotes if the state has any circular references to itself (state.x === state) Default: false |
