# yu-vue-mobile *vue移动端组件* ### 安装 ``` cnpm install yu-vue-mobile --save ``` ### 入口文件main.js引入插件 ```javascript import Vue from 'vue'; import Plugin from 'yu-vue-mobile'; Vue.use(new Plugin()); //引入 ``` ### 增加的移动端事件（tap）：手指轻触屏幕触发 ```javascript let div = document.querySelector('div'); div.addEventListener('tap',e=>{}); div.ontap = function(e){}

``` ### 引入阿里图标库（支持多色图标） ```javascript /* 在引入本插件时，传阿里图标项目的symbol地址 */ Vue.use(new Plugin('//at.alicdn.com/t/font_1139100_jyj7qajl4q.js')); /* 使用： */ /* "icon-taobao" 是某个图标的名称 */ ``` ### 图片懒加载：img元素出现在可视区域时才开始加载，兼容ie9 ```html src:require('./xxx.jpg') /* 如果浏览器不支持IntersectionObserver，则默认启用window的scroll事件；如果你的根滚动元素不是window,而是id为'#xxx'的元素；可以在引入本插件时，提供你的根滚动元素id。该元素也可以是vue组件中的元素，不用担心元素是否已在浏览器渲染的问题。提供根滚动元素id，举例：Vue.use(new Plugin(),{ root:'#xxx' }) */ ``` ### 轮播图 ```html imgs:[ require('./1.jpg'), require('./2.jpg') ], //轮播图片数组 width:"300px" //轮播窗口的宽度 ``` ### vue的过渡动画 ```html

import vTest from './test.vue' components:{ vTest }, show:true|false //控制vTest组件激活或停用，会触发vTest的勾子函数activated或deactivated ``` ### 路由页面渲染（加了过渡动画和keep-alive的router-view） ```html transition:'left'|'right'|'left-right'|'right-left'|'opacity'|'top'|'bottom'|'top-bottom'|'bottom-top', //页面进入和离开的过渡动画 name:'a', //{path:"/",components:{ a:a组件 }},渲染a组件

``` ### 路由组件的容器 ```html

路由页面内容

路由页面内容 ``` ### 遮罩层(透明黑色) ```html show:true|false ``` ### 下拉刷新、上拉加载 ```html

@pull-down //当用户下拉刷新时，触发事件 downFn(child){ setTimeout(()=>{ child.load = false; //刷新完成，关闭"加载中"样式 },1000); } @pull-up //当滚动条到底部时，触发事件 ``` ### 侧边栏 ```html //左侧边栏，占屏幕宽度50% //右侧边栏，占屏幕宽度100% //上侧边栏，占屏幕高度50% //下侧边栏，占屏幕高度50% show:true //本组件是否显示 ``` ### 路由导航 ```html titles:[ { path:'/a',text:'a' }, //a { path:'/b',text:'b' } ], width:'100%' //导航的宽度 ``` ### 路由页面渲染（加了手指滑动事件的router-view） ```html titles:[ { path:'/a',text:'a' }, { path:'/b',text:'b' } ], ``` ### 滑动切换页面的导航 ```html index:0 //当前高亮的导航标题项 titles:[ 'a','b','c','d' ] //导航标题 ``` ### 横向滑动切换页面 ```html

index:0, //当前页面的索引(.page0页面) ``` ### 纵向滑动切换页面 ```html

index:0, //当前页面的索引(.page0页面) ``` ### 标签页 ```html //横向标签页

标签名0的内容

标签名1的内容

标签名2的内容

//纵向标签页

标签名0的内容

标签名1的内容

标签名2的内容

titles:['标签名0','标签名1','标签名2'], default:0, //默认选中第一项：'标签名0' height:"100px"||"auto" //标签内容的高度100px,默认是"auto" ``` ### 表单弹框 ```html show:true|false, //控制该弹框是否显示 title:'', //表单标题 img:'', //验证码图片的src labels:[], //有哪些input输入框 @submit:function(arr){}, //点击表单的提交按钮时触发本事件 ```