README

说明

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

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

jbc-ic

javascript instruction and component 指令和组件

安装

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

• 安装后在main.js中添加引用，jbc-ic库是基于jbc(基础类库)和Vue开发的
• 在Vue环境下提供了一些实用指令和常用组件
• jbc-ic增加了一些数据请求方法等挂载到了jbc下
• 所以安装jbc-ic后可直接使用jbc的方法，无需单独安装jbc
• jbc返回的是一个闭包方法集，您可以根据您的需要赋值给任意变量，例如：Vue.prototype.jbc = jbc;
• jbc-ic的指令和组件调用跟Vue一致，例如：指令（v-clearSelect）

import jbc from 'jbc-ic'
或
import 'jbc-ic'

Vue.use(jbc)

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

//获取具有唯一性的字符
console.log(jbc.uuid());
//等价于
console.log(window.jbc.uuid());

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

//禁止双击选中
v-clearSelect

新增或调整

• 调整jbc方法位置，从Vue.prototype下调整到Vue.prototype.jbc,防止与其他工具类重名

方法

//基础类1
toBin(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-clearRight

  // 禁止图片拖拽
* v-clearImgDrag

  // 微信中禁止容器上下晃动
* 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 文本框获取焦点回调

| 参数 | 类型 | 默认值 | 描述 | | :------| :----- | :---------------- | :-------------| | msg | String | 请输入 | 提示信息|

示例

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

• lunbo 轮播

  • 回调函数：

    • 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

  • 插槽：

    • v-slot:loading .parent > .loading 内的节点自定义 无返回值
    • v-slot:ulliDom ul > li 内的节点自定义 返回当前li的数据
    • v-slot:olliDom ol > li 内的节点自定义 返回当前li的数据

<lunbo></lunbo>

| 参数 | 类型 | 默认值 | 描述 | | :------- | :----- | :--------- | :------------------- | | dataJson | Object | {} | 轮播的图片和链接 { list: [{href:'link',src:'imgsrc',target: '_blank',olsrc: ''}],leftAndRight:['imgsrc','imgsrc'] } | | loop | Number | 6000 | 轮播速率 | | effect | String | 'left' | 轮播方式:'left','up2down'，其他暂时没有开发 | | autoplay | Boolean | true | 是否启用自动轮播 | | nogap | Boolean | true | 是否启用无缝滚动 | | isHaveArrow | Boolean | true | 是否启用左右箭头 | | isHavePoint | Boolean | true | 是否启用指示小标 | | arrowClass | String | 'Arrow' | 自定义左右箭头样式名 | | activeClass | String | 'Cur' | 自定义当前活动li和游标li样式名 默认Cur | | loadingMsg | String |'loading'| 加载提示文字 |

示例

//注意：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 复制失败回调

| 参数 | 类型 | 默认值 | 描述 | | :------| :----- | :------- | :-------------| | msg | String | "" | 需要复制到剪贴板的文本 |

示例

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

• yzmbtn 验证码倒计时按钮
  • 回调函数：
    • v-on:begintimer 点击开始回调
    • v-on:callback 倒计时过程回调
    • v-on:overtimer 结束回调

| 参数 | 类型 | 默认值 | 描述 | | :------| :----- | :------- | :-------------| | num | Number | 60 | 需要倒计时的时长，单位s，1s间隔，不支持负数 | | startdesc | String | s后可重发 | 倒计时开始显示文案 | | enddesc | String | 获取验证码 | 倒计时结束显示文案 |

示例

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

• paging 绑定数据分页

  • 回调函数：

    • v-on:initcallback 初始化回调
    • v-on:selectcallback 选择哪页回调

  • 插槽：

    • v-slot:showData div样式.showListPart内节点插槽 数据返回为当前选择的页码数据
    • v-slot:prev 上一页插槽
    • v-slot:next 下一页插槽
    • v-slot:searchPrev 搜索部分 前往插槽
    • v-slot:searchNext 搜索部分 页插槽

| 参数 | 类型 | 默认值 | 描述 | | :------| :----- | :------- | :-------------| | dataList | Array | [] | 数组源数据 | | pageSize | Number | 6 | 每页尺寸，显示多少条数据 | | pageNow | Number | 1 | 当前是哪一页 | | maxCount | Number | 5 | 最多显示的页码数 | | isSearch | Boolean | false | 是否显示搜索框 | | isTotal | Boolean | false | 是否显示总计信息 |

示例

//用于数组数据快速分页
<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-on:clickcallback 点击切换页签回调 返回值为索引值

  • 插槽

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

| 参数 | 类型 | 默认值 | 描述 | | :------| :----- | :------- | :-------------| | value | Number、String | 0 | 默认显示第几个页签 |

示例

//快速实现常用菜单切换、选项卡切换等类似功能，子组件标签为<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 页签切换子组件

  • 回调函数：

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

  • 插槽

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

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

    • label 显示在父组件的选项卡菜单列表处
    • name 用于父组件识别对应页签内容区域

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>

• cover 弹窗组件（父组件）
  • 插槽
    • v-slot:close 关闭按钮内容插槽
    • 提供默认插槽

| 参数 | 类型 | 默认值 | 描述 | | :------| :----- | :------- | :-------------| | zIndex | Number | 99999 | 整个弹窗标签在body内所处的层级 | | isCloseShow | Boolean | true | 控制关闭弹窗按钮是否显示 |

• covercontent 弹窗组件（内容子组件）
  • 回调函数：
    • v-on:readycallback 弹出所选弹窗触发的初始化回调 返回值为当前对象
  • 插槽
    • 提供默认插槽

| 参数 | 类型 | 默认值 | 描述 | | :------| :----- | :------- | :-------------| | width | Number | 500 | 当前显示的内容弹窗的宽度 | | height | Number | 300 | 当前显示的内容弹窗的高度 |

• coverbtn 弹窗组件（按钮组件）

  • 回调函数：
    • 无
  • 插槽
    • 提供默认插槽
  • 参数
    • 无
  • 需设置name属性与covercontent组件的name属性一致即可触发

• cover组件开放两个js方法

  • open 打开某个弹窗 参数name值
  • close 关闭弹窗 无参数

cover弹窗组件综合示例

//解决常用弹窗js逻辑，同样只有基础样式，父组件标签为<cover></cover>
//this.cover.open(name) 打开弹窗
//this.cover.close() 关闭弹窗
<div @click="openCoverA('aa')">js打开aa</div> //js控制可根据需要使用
<div @click="closeCover()" class="btnCover">js关闭弹窗</div>

<cover>
  <covercontent name="aa" :width="200" :height="200" >弹窗a</covercontent>
  <covercontent name="bb">弹窗b</covercontent>
</cover>

//弹窗按钮组件可放置在任意位置，与<cover>标签是兄弟标签
<coverbtn name="aa">打开aa</coverbtn>//name属性跟<covercontent>属性name一致即可关联
<coverbtn name="bb">打开bb</coverbtn>

//methods部分
openCoverA: function (name) {
  //打开某个弹窗
  this.cover.open(name);
},
closeCover: function () {
  //关闭整个弹窗
  this.cover.close();
}

回到顶部