jwebv
Version:
379 lines (295 loc) • 13 kB
Markdown
README
===========================
## 说明
大家好，欢迎使用jwebv，使用过程中如有任何问题都可以直接反馈到我的邮箱
* 昵称：`laoding`
* 邮箱：`215911624@qq.com`
## jwebv
> vue 常用方法工具类
## 安装
``` javascript
# install
npm install jwebv
或者
npm i jwebv
```
* 安装后在main.js中添加引用
```javascript
import jwebv from 'jwebv'
Vue.use(jwebv)
```
* 安装完毕，举个栗子判断下是否是移动端
```javascript
if(this.$browser.v.mobile()) {
...
}
```
---
## 新增
* 轮播组件增加a链接target属性，在数据列表lists数据里面添加即可
* 删除返回顶部默认样式，删除层级参数zIndex，修复滚动回调返回值问题
## 结构
主要文件结构大致如下：
* jwebv 根目录
* dist 打包文件
* jwebV.js
* src 开发文件
* assets 静态文件
* components 组件文件
* Cover.vue 遮罩层组件
* GoBackTop.vue 返回顶部组件
* LoadingImg.vue 加载图片组件
* Lunbo.vue 轮播组件
* ~~Orientation.vue 检测横竖屏组件~~
* VCode.vue 验证码组件
* lib
* index.js 主要js文件
* App.vue
* main.js
* ...
## 全局组件
* `cover` 遮盖层
* 绑定事件：
* `v-on:close` 遮盖层对象点击后关闭当前遮盖层
`<cover></cover>`
| 参数 | 类型 | 默认值 | 描述 |
| :-------| :----- | :----- | :------------- |
| opacity | Number | 0.88 | 透明度，数值0-1 |
| zIndex | Number | 999998 | 元素层级，正整数 |
<br>
* ~~`hsp` 横竖屏~~（已删除，可尝试`orientation`方法）
~~`<hsp></hsp>`~~
| 参数 | 类型 | 默认值 | 描述 |
| :------| :----- | :---------------- | :------------- |
| msg | String | 请竖屏访问，谢谢。 | 提示信息 |
| zIndex | Number | 999999 | 元素层级，正整数 |
<br>
* `loadingImg` 图片资源加载
* 回调函数：
* `v-on:callback` 图片资源加载过程回调，返回加载进度
* `v-on:complete` 图片资源加载完成回调，返回 100
* `v-on:errorimg` 图片资源加载失败回调，返回当前图片
`<loadingImg></loadingImg>`
| 参数 | 类型 | 默认值 | 描述 |
| :------| :----- | :----- | :-------------- |
| arrImg | Array | [] | 图片资源数组 |
| zIndex | Number | 999999 | 元素层级，正整数 |
| showCover | Boolean | false | dom中是否显示遮罩层和进度 |
<br>
* `gobackTop` 返回顶部
* 回调函数：
* `v-on:callback` 向下滚动回调过程，返回滚动条距顶部距离
* `v-on:endback` 点击返回顶部完成后回调，返回0
`<gobackTop></gobackTop>`
| 参数 | 类型 | 默认值 | 描述 |
| :------ | :----- | :------ | :------------- |
| msg | String | 返回顶部 | 提示信息 |
<br>
* `vcode` 验证码
* 回调函数：
* `v-on:start` 倒计时开始回调函数，返回当前对象
* `v-on:progress` 倒计时执行过程回调函数，返回当前秒数
* `v-on:end` 倒计时执行完毕回调函数，返回当前对象
`<vcode v-on:end="todo" :num="10"></vcode>`
| 参数 | 类型 | 默认值 | 描述 |
| :------- | :----- | :--------- | :------------------- |
| num | Number | 60 | 发送验证码需要倒计时时间 |
| defMsg | String | 获取验证码 | 默认显示文字 |
| doingMsg | String | s后重新获取 | 执行过程中显示文字 |
<br>
* `lunbo` 轮播
* 回调函数：
* `v-on:animateover` 运动结束后触发回调 返回当前li节点
* `v-on:initerror` 初始化出现错误回调
* `v-on:init` 初始化回调 返回父级对象
`<lunbo></lunbo>`
| 参数 | 类型 | 默认值 | 描述 |
| :------- | :----- | :--------- | :------------------- |
| list | Array | [] | 轮播的图片和链接 [ {href:'link',src:'imgsrc',target: '_blank',infodom: '可写dom标签'},{href:'link',src:'imgsrc'} ] |
| width | Number | 100 | 轮播父框宽度 |
| height | Number | 100 | 轮播父框高度 |
| loop | Number | 100 | 轮播速率 |
| effect | String | 'left' | 轮播方式，目前只有left，其他暂时没有开发 |
| autoplay | Boolean | true | 是否启用自动轮播 |
| nogap | Boolean | true | 是否启用无缝滚动 |
| ishaveArrow | Boolean | true | 是否启用左右箭头 |
| ishavePoint | Boolean | true | 是否启用指示小标 |
| leftstyle | {} | {} | 绑定向左箭头的样式，当然也可以通过 :class 来重新绑定样式 |
| rightstyle | {} | {} | 绑定向右箭头的样式，当然也可以通过 :class 来重新绑定样式 |
| ollistyle | {} | {} | 绑定小标的样式 :styleOl=" {width: '200px',height: '10px'}" |
| activeBgColor | String | 'orange' | 小标选中颜色 |
<br>
## 全局自定义指令
``` javascript
* shenglue
行内字数溢出用省略号代替
// <a v-shenglue:6>文字文字文字文字文字文字</a>
// <a v-shenglue="num">文字文字文字文字文字文字</a>
* textIndent
缩进0.5em 针对块状元素
// <a v-textIndent>《需要缩进》文字文字文字</a>
* clearSelect
禁止双击选中文字
// <a v-clearSelect>禁止双击选中文字<a>
* wxRepairShake
微信中禁止容器上下晃动
// <div v-wxRepairShake><div>
* touchstart
滑动开始
// <div v-touchstart="touchstart"><div>
* touchend
滑动结束
// <div v-touchend="touchend"><div>
* tap
轻击
// <div v-tap="tap"><div>
// tap: function (e) { // e 事件对象
// console.log('轻击')
// }
* longtap
长按
// <div v-longtap="longtap"><div>
* swipeleft
左滑
// <div v-swipeleft="swipeleft"><div>
* swiperight
右滑
// <div v-swiperight="swiperight"><div>
* swipeup
上滑
// <div v-swipeup="swipeup"><div>
* swipedown
下滑
// <div v-swipedown="swipedown"><div>
* drag
拖拽
// <div v-drag="drag"><div>
// drag: function (e) { // e 坐标+事件对象
// console.log(e.x, e.y)
// }
```
## 全局变量和方法
每个方法都实现了其原型prototype 属性方法，绑定到了Vue上，项目中可以采用this.xxx或vue.xxx来调用
``` javascript
$dingzc
$expando // 唯一标识符
$error(msg) // 异常抛出方法 msg异常信息
$extend(to, _from) // 参数重载拓展方法
$type(obj) // 确定JavaScript内置对象的类型，返回小写形式的类型名称。
$exist(obj) // 判断是否存在子节点，返回boolen类型
$getDepChild(obj) // 深挖每个子节点的最后一层节点进行返回，obj一般为父节点
$callback(fn, data) // 公共回调 fn回调函数 data回调数据
$cookie(name,val) // 添加或修改cookie，无val参数时获取执行cookie
$cookie.remove(name) // 删除指定cookie
$(id) // 获取节点id返回节点（不是ref）
$browser // 浏览器成员变量
ua // 浏览器版本信息
lang // 页面语言
v // 浏览器版本成员变量
maxthon() // 遨游
opera() // opera
firefox() // 火狐浏览器
chrome() // Chrome浏览器
safari() // Safari浏览器
ie() // IE浏览器
mobile() // 是否为移动终端
ios() // ios终端
android() // android终端或者uc浏览器
iPhone() // 是否为iPhone或者QQHD浏览器
iPad() // 是否iPad
webApp() // 是否web应该程序，没有头部与底部
weixin() // 是否微信
qq() // 是否QQ
wp() // 是否windowsphone
IE
ie8()
ie9()
ie10()
ie11() // 判断是否为相应版本IE bool类型
width() // window.innerWidth
height() // window.innerWidth
isPC() // 判断pc机（补充方法）
isH5browser() // 是否为支持H5的浏览器
IEVersion() // 判断IE浏览器版本，返回7-11或100
$check // 检查成员变量
isNum(txt) // 是否字符串为整数
isPhone(txt) // 是否为手机号码
isMail(txt) // 是否为邮件
isTel(txt) // 是否为电话号码
isUserName(txt) // 是否为一般注册帐号a-z,0-9,_@.
isCN(txt) // 是否为中文
isIDCard(txt) // 是否为身份证
isUrl(txt) // 是否为Url正式地址
isImg(txt) // 是否为图片地址
isImgBase64(txt) // 是否为base64图片地址
$string // 字符串成员变量
isInStr(substr, str) // 是否存在字符串中
isStrStart(str, start) // 判断是否以某个字符串开头
isStrEnd(str, end) // 判断是否以某个字符串结尾
reSelectedStr(str, start, end) // 返回字符串str中特定start到end字符之间的所有内容
reStrNum(str) // 返回字符串中所有数字
checkLimitChars(str, array) // 和谐特殊字符 str 原数据 array 需要和谐的字符数组
trim(txt) // 去空格
toArgString(json) // 返回请求参数xxx=111&xxx=222格式的字符串
$array
removalArray(arr) // 数组去重
inArray(elem,arr) // 在数组中搜索指定的值，并返回其索引值。不存在返回-1
merge(first, second) // 合并两个数组，修改第一个参数的内容
$random // 随机成员变量
random(start, end) // 随机数返回包含起始值
randomArr(arr) // 随机数组排列顺序
randomStr(str) // 随机字符串排列顺序
$method // 公共方法成员变量
fomatFloat(num, pos) // 格式化浮点类型数字 num 原数据 pos 保留几位小数
clickOther(el, fn) // 检查是否点了除当前对象以外的地方
reMobileNum(num, size) // 换算移动端屏幕比数据
getTimeStamp() // 返回时间戳
request(paras) // 获取页面参数
uuid(len) // 生成唯一标识符串（自定义位数）
orientation(fn) // 检测横竖屏,fn回调函数 返回值bool类型，true横屏
$jiami
aes(data,key,iv).Encrypt() //AES加密 iv非必须
aes(data,key,iv).Decrypt() //AES解密 iv非必须
rsa(data,key).Encrypt() //RSA加密 key为公钥
rsa(data,key).Decrypt() //RSA解密 key为私钥
$lenovo
aesRsa(url, json, fn) //aes+rsa加密请求 url地址 json参数 fn回调
$cssVauleCode(cssdata, options)
// css样式适配操作 cssdata样式数据 options{size: 640,float: 2,callback:function(){}}
$resize(options) // 自动适配移动端尺寸
options = {
size: 640, // 默认尺寸640
float: 2, // 默认精确到小数点后2位
startPos: '#startdom', // 需要适配样式中开始标志 默认#startdom
endPos: '#enddom', // 需要适配样式中结束标志 默认#enddom
callback:function(e){ // 适配完成回调函数
console.log(e) // 输出finish
}
}
//精简版fetch请求封装，IE浏览器使用promise解决 XMLHttpRequest请求，兼容到IE9
$fetch(url,options)
//数据请求
//优先使用fetch，可退化到ajax + promise
//url [string] 接口地址
//options [json] 配置信息
//options.type [string] 请求类型 get、post 默认get
//options.method [string] 请求方式 fetch、promise 默认fetch
//options.contentType [string] 预期的数据返回类型 json、text 默认json
//options.data [json] 数据请求的所有参数，json格式
//示例：
this.$fetch(this.url, {
data: { arg: "xxxxx", arg2: "xxxxxx" },
type:"get",
method:"fecth",
contentType:"json"
})
.then(data => {
console.log(data);
})
.catch(function(error) {
console.log(error);
});
```
----
[回到顶部](#readme)
=========================================================