0.1.914 • Published 3 years ago
xrwebui v0.1.914
xrwebui
组件库
安装
npm install xrwebui --save使用
import Vue from 'vue';
import Xrwebui from 'xrwebui'
import 'xrwebui/dist/xrwebui.css'
Vue.use(Xrwebui)已封装的组件和方法列表
1. 接口请求封装
$Xrjsapi
| 方法名 | 类型 | 说明 | 参数 | 参数说明 |
|---|---|---|---|---|
| url | string | 接口请求的url地址 | null | 接口请求的url地址 |
| postparams | function | 常规接口请求 | (admin, name, text, ver) | admin是一个包含hotelid,appkey,secret,tenantid,token的对象，如果admin对象传空，其对应参数默认为是{"XR","XRLOGIN","SeBon02D65k08cMPf","17","F746968536F48E60497AD37F5478704B"};name为方法名，text为方法的请求参数，ver为版本号 |
| postparams2 | function | 移动后台5.0.0接口请求 | (method, apiParam, arr,ver) | (方法名，方法请求参数，code,tenantcode,版本号) |
| preview | function | API返回值 | null | null |
| newdate | function | 当前日期,返回格式为 yyyy-mm-dd hh：mm：ss | null | null |
2. 日期相关计算
$Xrcountdays
| 方法名 | 类型 | 说明 | 参数 | 参数说明 |
|---|---|---|---|---|
| getDays | function | 获取两个日期之间的所有日期 | （日期，日期） | 字符串形式日期的Date型日期 |
| getNextDate | function | 获取指定天数之后的日期,返回格式为 yyyy-mm-dd | （日期，天数） | null |
| getBeforeDate | function | 获取指定天数之前的天数,返回格式为 yyyy-mm-dd | （日期，天数） | null |
| DateDiff | function | 计算2个日期之间的间隔天数 | （日期，日期） | 是2020-12-18格式 |
| getDayOfWeek | function | 获取当前日期是周几,返回值为："周日","周一","周二","周三","周四","周五","周六" | （日期） | null |
| formateDate | function | 格式化日期 ,返回yyyy-mm-dd | （日期） | null |
3. 上拉加载更多
组件名 ： XrLoadmore
示例
<Xr-loadmore
:on-infinite-load="onInfiniteLoad"
:parent-pull-up-state="infiniteLoadData.pullUpState" //注意这里只传入了上拉状态，infiniteLoadData的其他参数不重要可自行定义
>
</Xr-loadmore>
data(){
return{
// 上拉加载的设置
infiniteLoadData: {
initialShowNum: 3, // 初始显示多少条
everyLoadingNum: 3, // 每次加载的个数
pullUpState: 2, // 子组件的pullUpState状态
pullUpList: [], // 上拉加载更多数据的数组
showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
}
}
},
methods:{
//上拉加载更多
onInfiniteLoad (done) {
if (this.infiniteLoadData.pullUpState === 1) {
this.getPullUpMoreData() //获取到要加载的数据，注意修改pullUpState的状态
}
done()
},
}4. 下拉刷新组件
组件名：XrRefresh
示例
<Xr-refresh :on-refresh="onRefresh">
</Xr-refresh>
methods:{
onRefresh(done){
alert('onRefresh') //调用刷新方法
done()
},
}
5. 输入单位斤的悬浮键盘
组件名：XrNubselect
6.GA打点
$addGA
| 方法名 | 类型 | 说明 | 参数 | 参数说明 |
|---|---|---|---|---|
| initFirebase | function | 初始化GA | （config） | config为object,firebase的基础配置信息 |
| setUserProperties | function | 设置用户属性 | （params） | params为object |
| judgeIsMobile | function | 判断当前是移动端还是PC端，移动端返回true | null | null |
| logEvent | function | 事件打点 | （{name:"",param:{}}） | name为事件名，param为打点数据 |
| screenEvent | function | 屏幕打点 | （{name:"",appname:""}） | name为屏幕名（必传），appname为当前产品名（非必传，PC端默认为xr，移动端不传该字段） |
| isMobile | Boolean | 当前是否为移动端 | null | null |
0.1.914
3 years ago