前言：今天给大家来到一个基于VUE开发的插件库，主要方便我们日常VUE开发时候遇到常用功能，减少开发难度和加快开发时间.

 感兴趣的可以下载到本地调试下，如果遇到问题可以联系作者：215911624@qq.com

安装

# installnpm install jbc-ic或者npm i jbc-ic

• 安装后在main.js中添加引用，jbc-ic库是基于jbc(基础类库)和Vue开发的   延伸阅读：（https://www.npmjs.com/package/jbc）

• 在Vue环境下提供了一些实用指令和常用组件

• jbc-ic增加了一些数据请求方法等挂载到了jbc下

• 所以安装jbc-ic后可直接使用jbc的方法，无需单独安装jbc,jbc调用方式又类似jquery，因为jbc在没有jquery的情况下会使用别名$

• 如果用户已使用jquery，jbc会把所有方法挂载到jquery上，综上：理论上安装jbc-ic完毕，就可以使用 $.变量或方法的方式来使用 例如：$.xxx 或$.xxx(),如不使用jbc方法请忽略

• jbc-ic的指令和组件调用跟Vue一致，例如：指令（v-clearSelect）

import jbc from 'jbc-ic'或import 'jbc-ic'Vue.use(jbc)

• 安装完毕，举个栗子获取uuid，测试jbc方法能否正常使用

//获取具有唯一性的字符 三种形式均可console.log(this.uuid());console.log($.uuid());console.log(jbc.uuid());

• 测试jbc-ic指令是否正常实用

//禁止双击选中v-clearSelect

新增或调整

• 分离加密方法，减小文件kb大小

方法

//基础类1toBin(data)     
//十进制转成二进制toDec(data)     
//二进制转成十进制toArgString(obj)  
//返回请求参数xxx=111&xxx=222格式的字符串fetch(arr)    
//兼容到IE9数据请求，优先使用fetch，不支持的使用ajax + promise 内部会自动去使用下面的ajax方法请求ajax(obj)   
//XMLHttpRequest请求
//例子：jbc.fetch(url, {
      type: "get",     //请求方式get（默认） post
      method: "fetch",   //调用类型 fetch（默认） ajax（自动使用上述方法的ajax请求，请求头为：application/x-www-form-urlencoded;charset=UTF-8）
      headers:{},    //请求头 默认application/x-www-form-urlencoded;charset=UTF-8
      cache: "force-cache",   //缓存 no-cache不缓存 force-cache强制缓存（默认）
      contentType: "json", //返回数据类型 text json（默认）
      data: {}  //参数
    })
    .then((e) => {
      console.log(e);
    })
    .catch((msg) => {
      console.log(msg);
    });
    vlog(data) 
    //格式化数据，用于Observer数据控制台显示预览
    //节点类hasClass(elem, class) 
    //是否存在样式addClass(elem, class) 
    //添加样式removeClass(elem, class) 
    //删除样式siblings(elem, class) 
    //获取兄弟节点
    //动画类animate(obj, json, interval, sp, fn) 
    //普通方向动画
    //例子：
    //jbc.animate(elem,  { left: 100 }, 16, 0.1, () => {});
    animateplus(options) 
    //动画增强功能/* * elements  默认值为 null  四种类型，分别是：String、Element、NodeList、Array，  
    要确定动画的 DOM 元素。您可以传递一个 CSS 选择器或 DOM 元素 * easing    
    默认值为 out-elastic，参数类型为字符串。它主要的作用是确定动画的加速曲线。 
    * transform 动画形态 translate、rotate、skew、scale * opacity   Array 透明度 [1 , 0.8] 
    其他css属性同理 
    * duration  默认值为 1000，参数类型为数字，或者函数。Number、Function。确定动画的持续时间（以毫秒为单位）。 回调函数将每个元素的索引作为参数，并返回一个数字。 
    * delay     默认值为 0，参数类型为数字，或者函数。Number、Function。 确定动画的延迟（以毫秒为单位）    回调函数将每个元素的索引作为参数，并返回一个数字。 
    * loop      默认值为 false，参数类型为 Boolean。主要作用是确定动画是否应该重复。 
    * direction 默认值为 normal，参数类型为字符串 String。确定动画的方向。reverse 向后运行动画，alternate 如果动画循环，则在每次迭代之后切换方向。 
    * speed     默认值为 1，参数类型为 Number。确定动画回放速率。在创作过程中有用，可以加快长序列的某些部分（值大于 1）或减慢特定的动画以观察（小于 1 的值）。 
    * optimize  默认值为 false，参数类型为 Boolean。如果设置为“动画”，则强制进行硬件加速 true。除非遇到性能问题，否则建议不要使用硬件加速，否则可能会产生有害的副作用。 
    * change    默认值为 null，参数类型为 Function。定义在动画的每个帧上调用的回调函数。回调以动画进程（0 到 1 之间）作为参数，可以独立使用而不受限制 elements。
    *///例子：/* * 
    jbc.animateplus({ 
    *     elements: "ul li", 
    *     easing: "out-elastic 1 0.4", 
    *     duration: 2000, 
    *     delay: (index) => index 
    * 100, 
    *     loop: false, 
    *     opacity: [1, 0.6], 
    *     //left:["0px","100px"], 
    *     transform: ["scale(0)", 0.88], 
    *     //transform: ["rotate(0deg)", "rotate(9deg)"], 
    *     direction: "normal", 
    *     speed: 1, 
    *   }) 
    *   .then(function (options) { 
    *     console.log(options); 
    *     jbc.animateplus({ 
    *       ...options, 
    *       easing: "out-elastic 1.4 0.2", 
    *       transform: ["translateY(0px)", "translateY(100px)"], 
    *     }); 
    *   }); 
    */

指令

  // 溢出字符以省略号代替 
  // v-shenglue="8"       表达式传值超出值用省略号代替
  // v-shenglue.min="8"   min修饰符解决中英混排，计算长度时一个汉字为2个字符* v-shenglue
  // <a v-shenglue="8">一二三四五六七八九</a>
  // <a v-shenglue.min="8">123abc文字</a>


  // 首字符为【或《的文本缩进0.5em  无修饰符功能 针对块状元素
  // v-textIndent
  // v-textIndent:%     arg值增加【或《之外的字符检查
  // v-textIndent="0.25"    表达式传值缩进0.25
  // v-textIndent:%,a,啊,b,c="0.25"   传值和表达式综合使用* v-textIndent


  // 禁止双击选中文字* v-clearSelect


  // 微信中禁止容器上下晃动* v-wxRepairShake
  // <div v-wxRepairShake><div>

  // 滑动开始* v-touchstart
                        
  // <div v-touchstart="touchstart"><div>

  // 滑动结束 * v-touchend                     
  // <div v-touchend="touchend"><div>

  // 轻击   * v-tap                  
  // <div v-tap="tap"><div> 
  // tap: function (e) { // e 事件对象
  //    console.log('轻击')
  // }

  // 长按 * v-longtap                         
  // <div v-longtap="longtap"><div>

  // 左滑* v-swipeleft                          
  // <div v-swipeleft="swipeleft"><div>

  // 右滑   * v-swiperight                       
  // <div v-swiperight="swiperight"><div>

  // 上滑    * v-swipeup              
  // <div v-swipeup="swipeup"><div>

  // 下滑* v-swipedown                     
  // <div v-swipedown="swipedown"><div>

  // 拖拽 * v-drag                     
  // <div v-drag="drag"><div>
  // drag: function (e) { // e 坐标+事件对象
  //    console.log(e.x, e.y)
  // }


  // 返回顶部
  // v-backTop 只有点击返回顶部功能 不监听滚动条状态
  // v-baclTop:Cur  有参数时会把它作为样式名 在滚动条离开顶部时增加当前样式
  // v-backTop.hide 有修饰符hide时 在滚动条返回顶部时会隐藏当前节点，离开顶部时会显示当前节点* v-backTop
  // <div v-backTop:Cur.hide class="backTop">返回顶部</div>


  //打字机效果
  // v-print 默认打字速率60ms，无延时
  // v-print:80 打字速率为80ms，无延时
  // v-print:80="1000" 打字速率为80ms，延时1000ms执行* v-print
  // <p v-print>
  //    疫情重压之下 菅义伟如何挺过年关？中国经营报
  //    发布时间：12-2811:24中国经营报官方帐号
  // </p>
  // <p v-print:80="4000">国家医保局：治疗新冠肺炎药品列入国家医保目录</p>
  // <p v-print:30="5000">本次调整高度重视新冠肺炎治疗相关药品的保障工作</p>
  // <p v-print:200="5800">编辑：高晨晨</p>

组件

• placeholder 文本框占位提示组件

• v-on:input 监听文本框数值

• v-on:blur 文本框失去焦点回调

• v-on:focus 文本框获取焦点回调

• 回调函数：

示例

//placeholder功能，提供基础样式//参数msg[string]   placeholder显示文字//属性：自动继承//方法：提供钩子 input、blur、focus//无指令<placeholder
  type="text"
  maxlength="20"
  class="myClass"
  msg="请输入"
  v-model="value"
  @input="aaa"></placeholder>

• lunbo 轮播

• v-slot:loading .parent > .loading 内的节点自定义 无返回值

• v-slot:ulliDom ul > li 内的节点自定义 返回当前li的数据

• v-slot:olliDom ol > li 内的节点自定义 返回当前li的数据

• v-on:begincallback 运动开始出发回调 返回当前li节点

• v-on:overcallback 运动结束后触发回调 返回当前li节点

• v-on:initcallback 初始化回调 返回父级节点

• v-on:linkAClickcallback a标签点击回调 返回a标签的所有属性

• v-on:liMouseOvercallback li标签鼠标悬停回调 返回当前li

• v-on:liMouseOutcallback li标签鼠标离开回调 返回当前li

• 回调函数：

• 插槽：

<lunbo></lunbo>

示例

//注意：lunbo不提供基础样式！！但是它可以千变万化，多研究，性能还不错//注意：autoplay在nogap为true时生效//提供钩子： initcallback、overcallback、begincallback、linkAClickcallback//提供滑动手势：左右滑动//组件自动响应异步数据<lunbo
  class="lunbo"
  :dataJson="lunboConfig"
  :isHaveArrow="true"
  :isHavePoint="true"
  arrowClass="Guide"
  loadingMsg="加载中..."
  :autoplay="true"
  :loop="10000"
  effect="up2down"
  @initcallback="init"
  @overcallback="animateOver"
  @begincallback="animateBegin">
  <template #ulliDom="data">
    <a v-bind="data">
      <img :src="data.src" alt="" />
    </a>
  </template>
  <template #olliDom><div><h3>test<h3></div></template></lunbo>//数据示例let dataJson={
  list:[
    {},
    { href:"", target:"" , olsrc:"游标图片地址"，xxx:"xxx" },//所有属性会绑定到当前li的a标签上
    {}
  ],
  leftAndRight:["左侧箭头图片地址","右侧图片地址"]}

• copytext 点击复制指定内容到剪贴板

• v-on:success 复制成功回调

• v-on:error 复制失败回调

• 回调函数：

示例

//自动生成的a标签继承组件所有属性,a标签无样式//属性：自动继承//方法：提供钩子 success、error//无指令<copytext
  msg="需要复制到剪贴板的文本"
  href=""
  target="_blank"
  @success="copySuccess"
  @error="copyFail"></copytext>

• yzmbtn 验证码倒计时按钮

• v-on:begintimer 点击开始回调

• v-on:callback 倒计时过程回调

• v-on:overtimer 结束回调

• 回调函数：

示例

//常用于发送手机验证码，点击后锁定按钮防止重复点击//方法：提供钩子 begintimer、callback、overtimer<yzmbtn
  :num="5.6"
  startdesc="s"
  enddesc="获取"
  @begintimer="consolefun"
  @callback="consolefun"
  @overtimer="consolefun"></yzmbtn>

• paging 绑定数据分页

• v-slot:showData div样式.showListPart内节点插槽 数据返回为当前选择的页码数据

• v-slot:prev 上一页插槽

• v-slot:next 下一页插槽

• v-slot:searchPrev 搜索部分 前往插槽

• v-slot:searchNext 搜索部分 页插槽

• v-on:initcallback 初始化回调

• v-on:selectcallback 选择哪页回调

• 回调函数：

• 插槽：

示例

//用于数组数据快速分页<paging
  :dataList="pagingArr"
  :pageSize="3"
  :pageNow="1"
  :maxCount="3"
  @selectcallback="consolefun">
    <template #showData="data">
      <div v-for="(item, key) in data" :key="key">{{ item }}</div>
    </template>
    <template #prev>&lt;</template>
    <template #next>&gt;</template>
    <template #searchPrev>前往</template>
    <template #searchNext>页</template></paging>

• tab 页签切换父组件

• v-slot:tabList 页签li节点内插槽，可自定义li内节点，返回当前对象{label:"xxx",name:"xxx"}

• v-on:clickcallback 点击切换页签回调 返回值为索引值

• 回调函数：

• 插槽

示例

//快速实现常用菜单切换、选项卡切换等类似功能，子组件标签为<part></part>//方法：提供钩子 clickcallback//注意：参数value如果设置了值，父组件便会去查找name值与value值一致的子组件，//如果未查找到，则不显示，如预先不知道子组件的name值可不设置，会默认显示第一个页签<tab
  :value="a1"
  @clickcallback="click">
  <template #tabList="data">
    <a>{{ data.label }}</a>
  </template>
  <part label="首页" name="a1"></part>
  <part label="关于我们" name="a2"></part></tab>

• part 页签切换子组件

• label 显示在父组件的选项卡菜单列表处

• name 用于父组件识别对应页签内容区域

• v-slot:default 自定义子标签内所有节点

• v-on:readycallback 切换到当前页面出发的回调 返回值为当前对象

• 回调函数：

• 插槽

• 所需配合父组件设置的属性：

tab组件综合示例

//解决常用菜单切换、选项卡切换等类似问题，父组件标签为<tab></tab>//方法：提供钩子 readycallback<tab :value="0" @clickcallback="click">
  <part
    v-for="(item, key) in arrTab"
    :key="key"
    :label="item.label"
    @readycallback="ready"
  >
    <keep-alive>
      当前是： {{ item.label + item.name }}，页签内容
    </keep-alive>
  </part></tab>