jwebv

README

说明

大家好，欢迎使用jwebv，使用过程中如有任何问题都可以直接反馈到我的邮箱

• 昵称：laoding
• 邮箱：[e-mail]

jwebv

vue 常用方法工具类

安装

# install
npm install jwebv
或者
npm i jwebv

• 安装后在main.js中添加引用

import jwebv from 'jwebv'
 
Vue.use(jwebv)

• 安装完毕，举个栗子判断下是否是移动端

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	元素层级，正整数

• hsp 横竖屏（已删除，可尝试orientation方法）

<hsp></hsp>

参数	类型	默认值	描述
msg	String	请竖屏访问，谢谢。	提示信息
zIndex	Number	999999	元素层级，正整数

• loadingImg 图片资源加载
  • 回调函数：
    • v-on:callback 图片资源加载过程回调，返回加载进度
    • v-on:complete 图片资源加载完成回调，返回 100
    • v-on:errorimg 图片资源加载失败回调，返回当前图片

<loadingImg></loadingImg>

参数	类型	默认值	描述
arrImg	Array	[]	图片资源数组
zIndex	Number	999999	元素层级，正整数
showCover	Boolean	false	dom中是否显示遮罩层和进度

• gobackTop 返回顶部
  • 回调函数：
    • v-on:callback 向下滚动回调过程，返回滚动条距顶部距离
    • v-on:endback 点击返回顶部完成后回调，返回0

<gobackTop></gobackTop>

参数	类型	默认值	描述
msg	String	返回顶部	提示信息

• 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后重新获取	执行过程中显示文字

• 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'	小标选中颜色

全局自定义指令

* 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来调用

$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);
 });
 

---

回到顶部

=========================================================