jwebv v1.0.34

README

说明

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

• 昵称：laoding
• 邮箱：215911624@qq.com

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>

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

<hsp></hsp>

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

<loadingImg></loadingImg>

• gobackTop 返回顶部

  • 回调函数：

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

<gobackTop></gobackTop>

• vcode 验证码

  • 回调函数：

    • v-on:start 倒计时开始回调函数，返回当前对象
    • v-on:progress 倒计时执行过程回调函数，返回当前秒数
    • v-on:end 倒计时执行完毕回调函数，返回当前对象

<vcode v-on:end="todo" :num="10"></vcode>

• lunbo 轮播

  • 回调函数：

    • v-on:animateover 运动结束后触发回调 返回当前li节点
    • v-on:initerror 初始化出现错误回调
    • v-on:init 初始化回调 返回父级对象

<lunbo></lunbo>

全局自定义指令

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

回到顶部

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