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'

参数	类型	说明	默认值	可选值
propName	string	transition	fade
propVisible	string	显示与否	none	只要值不同即可，这里可用时间戳
propDelay	number	延迟时间	1800	——
propIcon	string	icon	——	——
propMsg	string	提示内容	——	——
onClose	Function	关闭回调	——	——

vbCoverLoading 加载loading，页面覆盖

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

参数	类型	说明	默认值	可选值
propShow	boolean		是否展示	true/false
onClose	Function	关闭回调	——	——
propDefault	boolean	true	如果false，就自己写内部图文，以下不生效	——
propImgLoading	string	loading图	本地图	——
propImgBreak	string	破裂图	本地图	——
onReload	Function	点击重试	——	——

vbScrollStop 滚动后停止

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

参数	类型	说明	默认值	可选值
propCoinNum	number	要显示的数字	0
propIcon	string	左侧可以显示图片	——	——

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

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

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

参数	类型	说明	默认值	可选值
propState	string	是否生效	-	no:禁用 0:隐藏 1:展示
propKey0	string	展示文案	下拉即可刷新	——
propKey1	string	展示文案	释放即可刷新	——
propKey2	string	展示文案	加载中	——

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

vbRollList 数据单行滚动

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

参数	类型	说明	默认值	可选值
propData	array	滚动的list	-
propIcon	string	设置图标		——

支持slot

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

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

参数	类型	说明	默认值	可选值
propShow	boolean		是否展示	true/false
propCanClick	boolean		是否可以点击空白关闭	true/false
onClose	Function	关闭回调	——	——

slot自己把内容丢进去

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

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

参数	类型	说明	默认值	可选值
propBgClass	string	modal遮罩层的样式类	default-bg-container	——
propTitle	string	标题	——	——
propContent	string/VNode	内容	——	——
propTip	string	提示标签	——	——
propConfirmText	string	确认按钮文案	确认	——
propCancelText	string	取消按钮文案	取消	——
propVisible	string	是否可见	none	'任意字符'/none
onClose	Function	modal关闭回调	——	——
onCancel	Function	取消回调	——	——
onConfirm	Function	确认回调	——	——
showMask	Boolean	是否显示遮罩	true	true/false
showCloseIcon	Boolean	是否显示关闭icon	true	true/false
showConfirmBtn	Boolean	是否显示确认按钮	true	true/false
showCancelBtn	Boolean	是否显示取消按钮	true	true/false
isCanClickMask	Boolean	是否点击遮罩关闭	true	true/false

vbProgress 进度条

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

参数	类型	说明	默认值	可选值
propNumArr	array	进度数字列表	-
propTopArr	array	顶部描述	-
propBotArr	array	底部描述	-
propCurrent	number	当前值	-
propDefaultMark	Boolean	进度头有个默认的圆点	true	——

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

vbGrid9 9宫格抽奖

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

参数	类型	说明	默认值	可选值
propData	array	8个奖品0-7	icon，name
propRights	number	权益次数	-
propFuncOver	function	动画结束后执行	-
propFuncNot	function	没有权益执行	-
propFuncClick	function	点击中间执行	-
propOrder	number	中奖的索引		——
propReset	number string	更换不同值就行
propTips	object	over，noright 默认的操作提醒文案,设置为空就不提示了

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

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