README

说明

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

• 昵称：laoding
• 邮箱：[email protected]

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

回到顶部

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