@aidol/utils

vue 实用指令集合。

Docs

1. 1.x 文档。

Migration Guide

@aidol/utils 2.x 已发布，可按该 迁移指南 进行迁移。

Installation

# yarn
$ yarn add @aidol/utils
# npm
$ npm i @aidol/utils

Build

构建文件在 dist 文件夹下分为两个版本。

dist/aidol-utils.es.js 为 es Modules 版本。

dist/aidol-utils.umd.js 为 umd 版本，适合使用 <script></script> 标签的方式引用。

Features

1. vueDirectives 指令集，其中包含了一些实用指令，例：v-drag, v-affix, v-autoheight 等。

Usage

vueDirectives

该模块包含了一些 vue directive。

安装指令的方式：

1. 全局安装

// main.js

import Vue from 'vue'
import { vueDirectives } from '@aidol/utils'

// 安装全部指令
for (const k in vueDirectives) {
  if (vueDirectives.hasOwnProperty(k)) {
    Vue.directive(k, vueDirectives[k])
  }
}

// or 仅安装某个指令
Vue.directive('drag', vueDirectives.drag)

// ...
// new Vue({
//   el: 'app'
// })

1. 局部安装

import { vueDirectives } from '@aidol/utils'

export default {
  name: 'SomeComp',
  directives: {
    drag: vueDirectives.drag,
    affix: vueDirectives.affix,
    autoheight: vueDirectives.autoheight,
    // ...
  },
}

v-drag

拖拽指令。当给某 dom 元素加上 v-drag 指令后，该元素会变成可拖拽状态。

使用方式

<template>
  <div class="some class" v-drag="draggable">this is a box.</div>
</template>

export default {
  data() {
    return {
      draggable: true,
    }
  },
}

参数

v-affix

吸顶指令。可使用该指令实现元素吸顶效果。

使用方式

<template>
  <div class="some-container">
    <div class="some-class" v-affix>this is a affix element.</div>
    <div class="next-element"></div>
  </div>
</template>

参数

暂无。

v-autoheight

自动设置高度。有时，我们希望当前页面不出现滚动条，或者某个包裹元素不会产生滚动条。那么，你可能会需要该指令，使得应用该指令的元素可以正好占满剩余视窗高度，从而不出现纵向滚动条。

使用方式

<template>
  <div class="some-container">
    <div class="some-class">this is a top element.</div>
    <div class="next-element" v-autoheight="bottomGap"></div>
  </div>
</template>

export default {
  data() {
    return {
      bottomGap: 20,
    }
  },
}

参数

LOGS

2.x

• 2022/01/18

• 移除 ws 功能。

• 2022/01/19

• 移除 watermark 功能。

• 移除 paging 功能。

1.x

• 2020/11/20 (version 1.6.1)

• Refactor copyToClibboard 改名为 copyToClipboard。

• 2020/09/25 (version 1.6.0)

• Feature 新增 vueDirectives 指令集模块，包含了有：v-affix, v-drag, v-autoheight 三个实用指令。

• 2020/09/09 (version 1.5.3)

• Upgrade 优化 ws 重连的触发时机。

• 2020/08/13 (version 1.5.2)

• BugFix 修复 calc.div() 方法调用问题。

• 2020/08/04 (version 1.5.1)

• Upgrade watermark 优化。文本支持自动换行，content 参数支持 Array 类型，其他参数默认值优化。

• 2020/07/31 (version 1.5.0)

• Feature 新增水印生成工具函数。

• 2020/6/28 (version 1.4.3)

• BugFix 修复 ws 在意外断开时未正常重连问题。

• 2020/6/24 (version 1.4.2)

• BugFix 修复 ws 模块中 vue_emit_name 参数的一些潜在问题。