README
v-base-plugins
A Vue.js project
# install
npm i v-base-plugins --save
npm 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使用组件插槽slot
1. 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(默认)| toast
icon: '', //弹窗图标，String类型 success(默认) | info | error | loading
iconStyle: '', //图标样式，String类型
xclose: '', //自定义关闭按钮，String类型, btn | icon 可以传入富文本
shade: true, //遮罩层，Boolean类型
shadeClose: false, //点击遮罩关闭，Boolean类型
opacity: '', //遮罩透明度，String类型
time: 0, //自动关闭秒数，Number类型
endCallback: null, //销毁弹窗回调函数 Function
anim: 'scaleIn', //弹窗动画 scaleIn(默认) | fadeIn | shake | top | right | bottom | left
position: '', //弹窗位置 top | right | bottom | left
btnsColumn: false, //按钮是否换行竖直排列
btns: [ //按钮数组集合，默认null
{
text: '取消',
style: 'color: #2a83f2',
onTap() {
multPop.close();
}
},
{
text: '确定',
style: 'color: #2a83f2',
onTap() {
.....
}
}
],
},
opts: {},//传入对象参数
timer: null
}
#```
###mult-pop组件传入参数示例
#```
let multPop = this.$refs.multPop
this.$refs.multPop.show({
skin: 'toast',
content: 'success',
icon: 'success', //success | info | error | loading
shade: 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: "" }, //数据对象id
text:{ 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 | loading
time: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类型，默认6
del: '' , //底部删除按钮,String类型，默认svg删除按钮图片
loadingTxt: '', //默认等候文字，String类型，默认'请稍候...'
loadingTime: 1000, //默认等候时间,Number类型，默认1000/ms
resultTime:1000, //显示结果后，多久重回默认，Number类型，默认1000/ms
successTxt: '', //成功文字，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使用组件必须传递的参数 options
options: {
'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重复了，更改即可***