easy-use-directives v1.1.5

引入

支持Vue2，Vue3，基于Vue2开发，适配Vue3。持续更新中

import easyUseDirectives from 'easy-use-directives';

// 使用通用指令（可注入配置）
Vue.use(easyUseDirectives);

或单个引入

import { timeago } from 'easy-use-directives';

Vue.directive('timeago', timeago);

自定义指令集

• v-timeago ， 格式化时间 ** 时间前
• v-copy ， 复制
• v-focus ， 聚焦
• v-debounce ， 防抖
• v-throttle ， 节流
• v-longpress ， 长按
• v-drag ， 拖拽
• v-backtop ， 返回顶部
• v-submit ， 防重复提交
• v-clickout ， 弹窗外点击回调
• v-permission ， 权限
• v-lazy ， 图片懒加载
• v-ellipsis ， 文本超出省略号
• v-formatmoney ， 金钱格式化，加逗号
• v-formatdate ， 格式化时间

API

/* 格式化时间 ** 时间前
* 指令 v-timeago
* 参数：times: any, 时间戳(1400000000), 时间('2022-02-01 23:58:59'), 时间(new Date());
*
*
  刚刚
  12秒前
  3分钟前
  2小时前
  24天前
  6月前
  3年前
  12秒后
  3分钟后
  2小时后
  24天后
  6月后
  3年后
*/
<div v-timeago="times"></div>

/* 复制
* 指令 v-copy:[callback?]，callback 可选
* 参数：content: string
*/
<button v-copy:[callback]="content">复制</button>

/* 聚焦
* 指令 v-focus
* 参数：null
*/
<input v-focus />

/* 防抖
* 指令 v-debounce:[callback]，callback: function
* 参数：delay 可选, 默认 500ms
* 参数：event 可选（click｜input｜scroll），默认click
*/
<button v-debounce:[callback]="{delay: 2000, event: 'click' }">防抖</button>
<input v-debounce:[callback]="{delay: 1000, event: 'input' }" />
<div v-debounce:[callback]="{event: 'scroll' }">...内容</div>

/* 节流
* 指令 v-throttle:[callback]，callback: function
* 参数：delay 可选, 默认 500ms
*/
<button v-throttle:[callback]="{delay: 2000}">节流</button>

/* 长按
* 指令 v-longpress:[callback]，callback: function
* 参数：times 可选, 默认 1000ms
*/
<button v-longpress:[callback]="{times: 2000}">长按</button>

/* 拖拽
* 指令 v-drag:[type?], type: h5 | web, 可选, 默认 web
* 参数：el: string, id或class，拖拽对DOM范围，为空时父元素
*/
<div class="box" v-drag:[type]="el"></div>

/* 返回顶部
* 指令 v-backtop
* 参数：null
*/
<div class="backtop" v-backtop>返回顶部</div>

/* 防重复提交
* 指令 v-submit:[callback?]，callback 可选
* 参数：submitHandle: function, 返回一个Promise
      function submitHandle() {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(true);
            }, 1000)
          })
      }
*/
<button v-submit:[callback]="submitHandle">防重复提交</button>

/* 弹窗外点击回调
* 指令 v-clickout:[callback]，callback: function
* 参数：null
*/
<div v-if="ishow" v-clickout:[callback]>
  <p>弹窗内容</p>
</div>

/* 权限
* 指令 v-permission
* 参数：permission: string
* window.permissionList 权限列表放入 permissionList: Array<string>
* 如果分页面功能，防止重复，建议权限值['pageName.funName']
*/
<div v-permission="permission">权限</div>

/* 图片懒加载
* 指令 v-lazy
* 参数：imgUrl: string， src 默认图片
*/
<img v-lazy="imgUrl" src="xxx.jpg"/>

/* 文本超出省略号
* 指令 v-ellipsis
* 参数：line: number, 默认单行
*/
<div v-ellipsis='line'>
  设置文本超出省略号，支持单行和多行。设置文本超出省略号，支持单行和多行。设置文本超出省略号，支持单行和多行。
</div>

/* 金钱格式化，加逗号
* 指令 v-formatmoney
* 参数：price: string; 
* 参数：unit: string; 单位，默认为空,
* 参数：cutNum: number; 分割位，默认为3, 
*/
 <div v-formatmoney="{price: '12100.00', unit: '$', cutNum: 3}"></div>

/*
 * 指令 v-formatdate
 * 参数：times: any; 
 * 参数：format: string; 格式化，默认YYYY-MM-DD hh:mm:ss
 * 参数：zh: boolean; 是否输出中文，默认 false， 只针对w，q，输出中文对应数字
    *  Y:年,
    *  M:月份(1-12),
    *  D:天(1-31),
    *  h:小时(0-23),
    *  m:分(0-59),
    *  s:秒(0-59),
    *  f:毫秒(0-999),
    *  w:星期(0-6)
    *  q:季度(1-4)
 */
<div v-formatdate="{times: '', format: 'YYYY-MM-DD hh:mm:ss f q w', zh: true}">格式化时间</div>