v-base-plugins
A Vue.js project
# installnpm i v-base-plugins --savenpm start#引入import myPlugin from 'v-base-plugins'Vue.use(myPlugin)##topbar组件###在相应页面引入组件#```<topbar :isBack="true" :defclass="defTopbarClass()" title="标题信息" :fixed="fixed" search><div slot="back"><span class="p-title">中国</span><i class="iconfont arrow-up icon-style" style="color: #fff;font-size: 20px;"></i></div><div slot="search"><input slot="search" class="uni_searchIpt flex1" @input="bindInput" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" /><i class=" iconfont sousuo search-icon"></i></div><i @click="gohaoyou" slot="string" class="iconfont dingwei icon-style" style="color: #fff;font-size: 20px;"></i><span slot="string" class="p-title" style="padding-left: 0.5rem;">找车</span></topbar>#```###topbar组件传入参数#```isBack: { type: [Boolean, String], default: true },//左侧是否显示返回按钮fixed: {type: Boolean, default: true},//是否固定title: { type: String, default: '' },//中间标题search: { type: [Boolean, String], default: false },//是否需要搜索框,有搜索框,则不会显示中间标题topStyle: {type:String, default:''}, //自定义样式#```###topbar使用组件插槽slot1. name="back" //左侧块插槽2. name="search" //中间块插槽3. name="iconfont" name="string" name="image" //右侧图标、文字、logo插槽***topbar组件分为左、中、右三块,根据以上配置可以最大程度灵活的自定义顶部导航栏***##mult-pop组件###在相应页面引入组件:<mult-pop ref="multPop"></mult-pop>###mult-pop组件根据需求传入opts参数对象,会与默认defaultOptions参数对象进行合并处理#```{defaultOptions: { //默认对象参数isVisible: false, //是否显示弹窗,Boolean类型title: '', //标题,String类型titleStyle: '', //标题样式,String类型content: '', //内容,String类型,可以传入富文本contentClass: '', //内容样式,String类型style: null, //自定义弹窗样式,String类型skin: '', //弹窗风格,String类型 weixin(默认)| toasticon: '', //弹窗图标,String类型 success(默认) | info | error | loadingiconStyle: '', //图标样式,String类型xclose: '', //自定义关闭按钮,String类型, btn | icon 可以传入富文本shade: true, //遮罩层,Boolean类型shadeClose: false, //点击遮罩关闭,Boolean类型opacity: '', //遮罩透明度,String类型time: 0, //自动关闭秒数,Number类型endCallback: null, //销毁弹窗回调函数 Functionanim: 'scaleIn', //弹窗动画 scaleIn(默认) | fadeIn | shake | top | right | bottom | leftposition: '', //弹窗位置 top | right | bottom | leftbtnsColumn: false, //按钮是否换行竖直排列btns: [ //按钮数组集合,默认null{text: '取消',style: 'color: #2a83f2',onTap() {multPop.close();}},{text: '确定',style: 'color: #2a83f2',onTap() {.....}}],},opts: {},//传入对象参数timer: null}#```###mult-pop组件传入参数示例#```let multPop = this.$refs.multPopthis.$refs.multPop.show({skin: 'toast',content: 'success',icon: 'success', //success | info | error | loadingshade: false,time: 3,})multPop.show({skin: 'weixin',title: '开启新邮件提醒',content: '为了保证新邮件能及时收到提醒,请前往系统 [设置] - [电池] 中关闭应用锁屏清理。',shadeClose: false,btns: [{text: '取消',style: 'color: #2a83f2',onTap() {multPop.close();}},{text: '前往设置',style: 'color: #2a83f2',onTap() {console.log('您点击了前往设置!');}}]})multPop.show({skin: 'weixin',//title: '发现新版本',titleStyle:"padding-bottom: 0;text-align: left;",content: '123456789为群成员,<br/>请保护隐私',style:"width:80%",shadeClose: true,opacity:0.5,position:"center",btnsColumn:true,xclose:'btn',btns: [{text: '@Ta',style: 'color: #2a83f2;width: 100%;',onTap() {console.log('关注');multPop.close();}},{text: '查看Ta的朋友圈',style: 'color: #2a83f2;border-top: 1px solid #eee;width: 100%;',onTap() {console.log('加入黑名单');}},{text: '加入黑名单',style: 'color: red;border-top: 1px solid #eee;width: 100%;',onTap() {console.log('加入黑名单');}}],endCallback:function(){console.log('销毁了!');}})#```##bottomTab组件###在相应页面引入组件:<mubottom-tab :tabsArr="tabsArr"></mubottom-tab>###bottomTab组件传入参数#```exact:false //是否启用router-link严格匹配模式tabStyle:{},//自定义tabs样式,String类型tabsArr:[{text:"",//tab文字,String类型,默认空path:"",//路由地址,String类型,默认空iconName:"",//tab字体图标名字,String类型,默认空color: '',//自定义tab文字、图标颜色,String类型,默认空num:6,//badge中数字,[Boolean, Number]类型,默认false,***num:false不显示badge;num:true显示badge,不带数字;num:number显示badge,带数字,大于99显示···***},]#```***tabsArr参数最好存储在vuex中,如果没有使用vuex,建议上升为全局变量***###bottomTab组件传入参数示例#```tabsArr=[{text:"首页",path:"/index",iconName:"shouye",color: 'rgb(31, 146, 31)',style:{},num:6},{text:"通讯录",path:"/dev-text",iconName:"renwu",color: 'rgb(31, 146, 31)' },{text:"消息",path:"/dev-text2",iconName:"xiaoxi",color: 'rgb(31, 146, 31)',num:true},{text:"我的",path:"/dev-text3",iconName:"wode", color: 'rgb(31, 146, 31)'}]#```##calendar组件###在相应页面引入组件:<calendar :caleShow="caleShow" :caleData="calendarObj" @getChooseDate="chooseDate"></calendar>###calendar组件传入参数#```caleShow:{ type: Boolean, default: false },//是否显示日历textShow:{ type: Boolean, default: false },//是否显示选中日期的标识文字caleData: {type:Object, default:{ //选中日期的标识数据对象key:{ type: String, default: "" }, //数据对象idtext:{ type: String, default: "" }, //日期的文字标识style:{ type: String, default: "" }, //日期标识的样式控制show:{ type: Boolean, default: false } //日期标识的显示控制}},getChooseDate:{type: Function, default: } //选中日期回调函数 Function#```***calendar可以根据传入的不同参数caleData进而对选择日期进行标识,通过自定义事件拿到标识的日期,非常灵活***###calendar组件传入参数示例#```<div class="select-cale"><span>排班:</span><select class="cale-select" @change="selectVal"><option>请选择</option><option v-for="(item,index) in selectsArr" :key="index" :value="item.key">{{ item.text }}</option></select></div>this.selectsArr=[{key:"1",text:"中",style:"background-color:purple;width:8px;height:8px;border-radius:4px;top:10px;right:12px;",show:false},{key:"2",text:"白",style:"background-color:blue;width:8px;height:8px;border-radius:4px;top:10px;right:12px;",show:false},{key:"3",text:"晚",style:"background-color:orange;width:8px;height:8px;border-radius:4px;top:10px;right:12px;",show:false},{key:"4",text:"夜",style:"width:8px;height:8px;border-radius:4px;top:10px;right:12px;",show:false},{key:"5",text:"休",style:"background-color:green;width:8px;height:8px;border-radius:4px;top:10px;right:12px;",show:false}]methods:{selectVal(ele){var that=this;for(let i=0;i<that.selectsArr.length;i++){if(that.selectsArr[i].key==ele.target.value){that.selectsArr[i].show=true;that.calendarObj=that.selectsArr[i];}}},chooseDate(val){console.log(val)}}#```##toast插件###toast插件传入参数#```option={message: '',//toast文字提示,String类型,默认空icon: 'loading',//toast图标,String类型 success(默认) | info | error | loadingtime:1, //toast显示时间/s,Number类型,默认空}#```###toast插件调用示例#```this.$Toast({message: '显示成功',icon: 'success',time:3 })this.$Toast.close();//手动关闭#```##mpay组件###mpay组件传入参数#```inputOver:{type: Function, default: } //输入成功回调函数(必须),Function类型payPopOptions={title: '', //顶部文字,String类型,默认"请输入支付密码"pwdLength: 6, //密码长度,Number类型,默认6del: '' , //底部删除按钮,String类型,默认svg删除按钮图片loadingTxt: '', //默认等候文字,String类型,默认'请稍候...'loadingTime: 1000, //默认等候时间,Number类型,默认1000/msresultTime:1000, //显示结果后,多久重回默认,Number类型,默认1000/mssuccessTxt: '', //成功文字,String类型,默认'支付成功'failTxt: '', //失败文字,String类型,默认'支付失败'}#```###mpay组件调用示例#```payPopOptions: {isShow: false}<mpay ref="pay" :payPopOptions="payPopOptions" @inputOver="inputOver"></mpay>methods: {inputOver (val) {if (val == '111111') {this.$refs.pay.$payStatus(true)//支付成功} else {this.$refs.pay.$payStatus(false)//支付失败}},}#```## hupload使用组件必须传递的参数 optionsoptions: {'showProgress': true, // 是否显示进度控制'imagePreview': true, // 是否显示图片预览'url': 'str', // 上传接口url'fileUploadName': 'ajax-upload', // 后台采用是什么名字就传递什么名字'limitSize': 1, // 限制文件上传的大小单位是 M'receiveUploadMsg': null, //上传状态回调函数 Function}## hupload组件引用<hupload :options=options v-on:receiveUploadMsg="receiveUploadMsg"> </hupload>##hupload组件使用methods: {receiveUploadMsg (msg) {// msg ....}}```.........................................................#添加全局资源(自定义指令)##v-out-click点击DOM元素外事件#```Vue.directive('out-click', {bind (el, binding, vnode, oldVnode) {// 逻辑...}...})#```## v-out-click自定义指令使用示例<div v-out-click="bindOutClick"></div>##v-out-click点击DOM元素外事件#```methods:{bindOutClick(e){...},}#```## v-load-more指令使用示例***v-load-more是监听有固定高度的盒子的滚动加载更多事件,比如可以用在不适合有页码的表格就可以使用下拉加载更多***<ul v-load-more="bindLoadmore"><li></li>...</ul>***v-load-more必须绑定在有样式overflow-y:auto的DOM上,即滚动的DOM上,否则监听不到滚动***#```methods:{bindLoadmore(e){...//加载更多数据},}#```#防抖函数debounce##debounce使用示例#```Vue.debounce(fn,time) //fn需要防抖函数,time超出这个时间阈值,也得给客户一个反应的限值#```#节流函数throttle##throttle使用示例#```Vue.throttle(fn,wait) //fn需要节流函数,wait时间间隔#```***以上使用图标均为阿里图标库中图标,如需自定义图标,替换class类名即可,若显示图标与自定义图标不符,可能是与阿里图标Unicode重复了,更改即可***