Mr-menu-library NPM

mr-menu-library

介绍

mr-menu 组件库

安装教程

npm i --save mr-menu-library

npm i --save mr-menu-library  
import { mrMenuLoading, mrMenuDialog, mrMenuImgExpander, mrMenuShare } from 'mr-menu-library'  
Vue.use(mrMenuLoading);  
Vue.use(mrMenuDialog);  
Vue.use(mrMenuImgExpander);  
Vue.use(mrMenuShare);

可全局或者单页面引入
按需引入

使用说明

*mr-menu-loading（loading组件）

import mrMenuLoading from 'mr-menu-library'  
Vue.use(mrMenuLoading);   

<mr-menu-loading 
    :loading-show-tab='loadingShowTab' 
    :loading-img-size='loadingImgSize' 
    :loading-img-during='loadingImgDuring' 
    :loading-mask-tab='loadingMaskTab' 
    :loading-mask-opacity='loadingMaskOpacity' 
    :loading-img-list='loadingImgList'></mr-menu-loading>

参数	行为	类型	必须
loadingImgSize	定义图片大小	number	否
loadingImgDuring	定义图片直接距离	number	否
loadingShowTab	控制显示隐藏	boolean	否
loadingMaskTab	控制蒙层是否展示	boolean	否
loadingMaskOpacity	控制蒙层透明度	boolean	否
loadingImgList	loading的图片列表	array	否

*效果展示

npm.io

*mr-menu-share（分享组件）

mr-menu 分享组件以及安卓ios端调起app
a.Ios中只要手机中有对应的app即可调起
b.Android中部分手机由于自身生态或者浏览器问题app无法成功调起(适用大部分机型及浏览器)
c.分享弹窗弹出，分享框中的文案自动复制

import mrMenuShare from 'mr-menu-library'  
Vue.use(mrMenuShare);   

<mr-menu-share ref="XXXX" 
    :share-creat-ani='shareCreatAni' 
    :share-destroy-ani='shareDestroyAni' 
    :share-title='shareTitle' 
    :share-text="shareText" 
    :share-link="shareLink" 
    :share-to='shareTo' 
    :share-warn-text='shareWarnText' 
    :share-img-list='shareImgList'></mr-menu-share>

*显示隐藏

显示

this.$refs.XXXX.open()

隐藏

this.$refs.XXXX.close()

*参数 | 参数 | 行为 | 值 | 类型 | 必须 | |--------------|----------------------|---------------------------------------------|--------|----| | shareCreatAni| 分享弹窗显示动画 | 参照animate中的css | string | 否 | | shareDestroyAni | 分享弹窗隐藏动画 | 参照animate中的css | string | 否 | | shareTitle | 分享标题 | | string | 否 | | shareText | 分享文案 | | string | 否 | | shareTo | 分享到 | | string | 否 | | shareLink | 分享链接 | | string | 否 | | shareWarnText| 友情提示(针对部分安卓无法调起的提示语) | | string | 否 | | shareImgList | 分享app的图标以及scheme | src,urlscheme,urlIntent,schemeUrl,intentUrl | array | 否 |

*shareLink会进行encodeURI编码

*shareImgList参数说明

!!shareImgList目前支持6个app分享 1. src: 分享图标； 2. urlScheme： ios端调起app用的urlscheme； 3. urlIntent：安卓apk名称； 4. schemeUrl：安卓调起apk的scheme； 5. intentUrl：安卓apk的包名。
shareImgList示例

*scheme示例 | App名称 | urlScheme | urlIntent | schemeUrl | intentUrl | |----------------|--------------|-----------|--------------------------------------------------|-----------------------| | Line | line:// | line | line://nv/chat | jp.naver.line.android | | FaceBook | fb:// | facebook | fb://page/PAGEID | com.facebook.katana | | Twitter | twitter:// | twitter | twitter://post?message=hello%20world | com.twitter.android | | Instagram(ins) | instagram:// | instagram | instagram://media?id=434784289393782000_15903882 | com.instagram.android | | Wechat(微信) | wechat:// | weixin | weixin:// | com.tencent.mm | | 新浪微博 | sinaweibo:// | sinaweibo | sinaweibo://gotohome | com.sina.weibo |

*效果展示

npm.io

*mr-menu-dialog（弹窗组件：确认取消）

import mrMenuDialog from 'mr-menu-library'  
Vue.use(mrMenuDialog)  

<mr-menu-dialog 
    ref='dialogRef'
    @dialogSure='dialogSure' 
    @dialogCancel='dialogCancel'
    :dialog-title='dialogTitle' 
    :dialog-text='dialogText' 
    :cancel-text='cancelText' 
    :confirm-text='confirmText'
    :dialog-creat-ani='dialogCreatAni'
    :dialog-destroy-ani='dialogDestroyAni'
    ></mr-menu-dialog>

*打开方法

this.$refs.××××.open()

*参数 | 参数 | 行为 | 类型 | 是否 | |------------------|-------------------------|--------|----| | dialogTitle | 弹窗标题 | string | 否 | | dialogText | 弹窗文案 | string | 否 | | cancelText | 取消按钮文案 | string | 否 | | confirmText | 确认按钮文案 | string | 否 | | dialogCreatAni | 弹窗入场动画(参照animate.css动画) | string | 否 | | dialogDestroyAni | 弹窗离场动画(参照animate.css动画) | string | 否 |

*Event | 方法名 | 行为 | |---------------|--------| | @dialogCancel | 点击取消按钮 | | @dialogSure | 点击确认按钮 |

*效果展示
npm.io

*mr-menu-imgExpander（查看大图轮播组件）

import mrMenuImgExpander from 'mr-menu-library'  
Vue.use(mrMenuImgExpander)

<mr-menu-img-expander 
    ref='seeImg' 
    :img-creat-ani="imgCreatAni" 
    :img-destroy-ani="imgDestroyAni" 
    :img-mask-tab="imgMaskTab" 
    :img-mask-opacity='imgMaskOpacity'></mr-menu-img-expander>

*打开方式

this.$refs.XXXX.open(imgAryList, index)

*参数 | 参数 | 行为 | 类型 | 是否 | |----------------|-----------|---------|----| | imgCreatAni | 进场动画 | String | 否 | | imgDestroyAni | 离场动画 | String | 否 | | imgMaskTab | 是否需要蒙层 | Boolean | 否 | | imgMaskOpacity | 蒙层透明度 | Number | 否 | | imgArr | 需要轮播的图片数组 | Array | 是 |

*进场离场动画参照animated中的css 例如 'fadeIn\fadeOut'

*效果展示

npm.io