vue-mobile-basic-ui v1.4.10

vue-mobile-basic-ui

针对Vue开发中常见的基础功能进行封装，诸如toast、下拉等不需要设计师过多参与的交互，引入到项目中，快速搭建项目和支持业务。

为保证移动端UI的兼容性，我们把html的"font-size:100px"，页面通过rem做样式设计。

开源地址：https://github.com/Villen37/vue-mobile-basic-ui

项目调试

npm run src/view
// 进入http://localhost.dev.com:9000/index.html

基本用法

// 下载
npm install vue-mobile-basic-ui

在入口函数内 插入代码全局注册(组件即不需单独引用，同时自动绑定方法在vue.prototype)

import 'vue-mobile-basic-ui/lib/style/vueMobialBasicUi.min.css'
import vueMobialBasicUi from 'vue-mobile-basic-ui'
Vue.use(vueMobialBasicUi);

具体组件

vbToast 信息提示

// 如果组件库全局注册
this.$vbToast(Object options)
// 若没有
import { vbToast } from 'vue-mobile-basic-ui'

vbCoverLoading 加载loading，页面覆盖

import { vbCoverLoading } from 'vue-mobile-basic-ui'

vbScrollStop 滚动后停止

import { vbScrollStop } from 'vue-mobile-basic-ui'

propIcon为空的时候可以自定义slot。使用时，最好外面包一层容器

vbPulldwonRefresh 下拉刷新，整个页面上的使用

import { vbPulldwonRefresh } from 'vue-mobile-basic-ui'

touchEnd的回调 @listeningEmit="自己的方法"，也可以通过执行回调里的option.fun，来结束下拉动画

vbRollList 数据单行滚动

import { vbRollList } from 'vue-mobile-basic-ui'

支持slot

vbModalContainer modal的黑色半透明背景的容器

import { vbModalContainer } from 'vue-mobile-basic-ui'

slot自己把内容丢进去

vbModalDialogue modal的黑色半透明背景的容器

// 如果组件库全局注册
this.$vbModal(Object options)
//或者
import { vbModalDialogue } from 'vue-mobile-basic-ui'

vbProgress 进度条

import { vbProgress } from 'vue-mobile-basic-ui'

slot 可以写一个气泡，位置是跟随进度条的，如果不用，propDefaultMark设置为false
propTopArr、propBotArr中的元素可以是html，满足多种样式需求

vbGrid9 9宫格抽奖

import { vbGrid9 } from 'vue-mobile-basic-ui'

如果定义了propFuncOver，就必须有propReset，手动重置动画
slot 可以写中间的dom
开放几个里面宫格class，方便二次改动：
vb-grid9-item：常态
vb-grid9-light：高亮状态
vb-grid9-center：中间的格子

备注：暂时不建议使用 " this.$** "的方法直接调用，这种方式会频繁插入和删除节点引起重排